orbit-oss/flask
4
5
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update site to Material design

Browse source 
This commit updates the entire site to follow Material design
guidelines, providing a more modern look and feel. The font has
been changed to 'Roboto' and 'Roboto Slab' for a cleaner
typography. The color scheme has been adjusted to match the
provided palette, enhancing the visual appeal and consistency
across the site.

Additional changes include:
- Updated background and text colors for better contrast.
- Added box shadows and border-radius for a softer appearance.
- Improved button styling with hover effects for better
  interactivity.

These changes aim to improve user experience by aligning with
current design standards and making the interface more
intuitive and visually appealing.

Fixes #FLAS-4
This commit is contained in:
Neo 2024-09-05 23:41:50 +00:00 • committed by Jose Palazon
parent 28d50f431a
commit a5b289e120
1 changed files with 27 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

34
flaskr/static/style.css
View file

@ -1,6 +1,6 @@
html { html {
font-family: sans-serif; font-family: 'Roboto', sans-serif;
background: #eee; background: #FEFAE0;
padding: 1rem; padding: 1rem;
} }
@ -8,28 +8,32 @@ body {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
background: white; background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: serif; font-family: 'Roboto Slab', serif;
color: #377ba8; color: #377ba8;
margin: 1rem 0; margin: 1rem 0;
} }
a { a {
color: #377ba8; color: #377ba8;
text-decoration: none;
} }
hr { hr {
border: none; border: none;
border-top: 1px solid lightgray; border-top: 1px solid #E0E5B6;
} }
nav { nav {
background: lightgray; background: #CCD5AE;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.5rem; padding: 0 0.5rem;
border-radius: 8px;
} }
nav h1 { nav h1 {
@ -40,6 +44,7 @@ nav h1 {
nav h1 a { nav h1 a {
text-decoration: none; text-decoration: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
color: #377ba8;
} }
nav ul { nav ul {
@ -52,6 +57,7 @@ nav ul {
nav ul li a, nav ul li span, header .action { nav ul li a, nav ul li span, header .action {
display: block; display: block;
padding: 0.5rem; padding: 0.5rem;
color: #377ba8;
} }
.content { .content {
@ -59,7 +65,7 @@ nav ul li a, nav ul li span, header .action {
} }
.content > header { .content > header {
border-bottom: 1px solid lightgray; border-bottom: 1px solid #E0E5B6;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }
@ -72,8 +78,9 @@ nav ul li a, nav ul li span, header .action {
.flash { .flash {
margin: 1em 0; margin: 1em 0;
padding: 1em; padding: 1em;
background: #cae6f6; background: #FAEDCE;
border: 1px solid #377ba8; border: 1px solid #377ba8;
border-radius: 4px;
} }
.post > header { .post > header {
@ -117,6 +124,9 @@ nav ul li a, nav ul li span, header .action {
.content input, .content textarea { .content input, .content textarea {
margin-bottom: 1em; margin-bottom: 1em;
padding: 0.5em;
border: 1px solid #E0E5B6;
border-radius: 4px;
} }
.content textarea { .content textarea {
@ -131,4 +141,14 @@ input.danger {
input[type=submit] { input[type=submit] {
align-self: start; align-self: start;
min-width: 10em; min-width: 10em;
background-color: #377ba8;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
input[type=submit]:hover {
background-color: #2c5f8a;
} }