fe88d941ee
Replace the previously used font in the style.css file with Roboto. The original font was not widely supported across different platforms and browsers, which could lead to inconsistent user experiences. By switching to Roboto, we ensure better compatibility and a more uniform appearance for users accessing the application.
154 lines
2.1 KiB
CSS
154 lines
2.1 KiB
CSS
html {
|
|
font-family: 'Roboto', sans-serif;
|
|
background: #FEFAE0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
body {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Roboto', serif;
|
|
color: #377ba8;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
a {
|
|
color: #377ba8;
|
|
text-decoration: none;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid #E0E5B6;
|
|
}
|
|
|
|
nav {
|
|
background: #CCD5AE;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
nav h1 {
|
|
flex: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
nav h1 a {
|
|
text-decoration: none;
|
|
padding: 0.25rem 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav ul li a, nav ul li span, header .action {
|
|
display: block;
|
|
padding: 0.5rem;
|
|
color: #377ba8;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 1rem 1rem;
|
|
}
|
|
|
|
.content > header {
|
|
border-bottom: 1px solid #E0E5B6;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.content > header h1 {
|
|
flex: auto;
|
|
margin: 1rem 0 0.25rem 0;
|
|
}
|
|
|
|
.flash {
|
|
margin: 1em 0;
|
|
padding: 1em;
|
|
background: #FAEDCE;
|
|
border: 1px solid #377ba8;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.post > header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.post > header > div:first-of-type {
|
|
flex: auto;
|
|
}
|
|
|
|
.post > header h1 {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post .about {
|
|
color: slategray;
|
|
font-style: italic;
|
|
}
|
|
|
|
.post .body {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.content:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content form {
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.content input, .content textarea {
|
|
margin-bottom: 1em;
|
|
padding: 0.5em;
|
|
border: 1px solid #E0E5B6;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.content textarea {
|
|
min-height: 12em;
|
|
resize: vertical;
|
|
}
|
|
|
|
input.danger {
|
|
color: #cc2f2e;
|
|
}
|
|
|
|
input[type=submit] {
|
|
align-self: start;
|
|
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;
|
|
}
|