ab02397494
This commit updates the font family in the file flaskr/static/style.css to FontAwesome as per the review comment. The previous font family was not rendering the icons correctly, leading to visual inconsistencies. By switching to FontAwesome, we ensure that the icons are displayed as intended. Additionally, the icon previously set in the background has been removed to avoid duplication and potential rendering issues. This change simplifies the styling and aligns with the reviewer's feedback.
225 lines
3.3 KiB
CSS
225 lines
3.3 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', sans-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;
|
|
background: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
padding: 0.5em;
|
|
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;
|
|
}
|
|
|
|
#theme-toggle {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 25px;
|
|
background: #ccc;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#theme-toggle:before {
|
|
content: '\f186'; /* FontAwesome Unicode for moon */
|
|
font-family: 'FontAwesome';
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 21px;
|
|
height: 21px;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s, content 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
body.dark-mode #theme-toggle {
|
|
background: #4d4d4d;
|
|
}
|
|
|
|
body.dark-mode #theme-toggle:before {
|
|
transform: translateX(25px);
|
|
content: '\f185'; /* FontAwesome Unicode for sun */
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode {
|
|
background: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
body.dark-mode a {
|
|
color: #bb86fc;
|
|
}
|
|
|
|
body.dark-mode nav {
|
|
background: #333;
|
|
}
|
|
|
|
body.dark-mode .flash {
|
|
background: #333;
|
|
border-color: #bb86fc;
|
|
}
|
|
|
|
body.dark-mode .post .about {
|
|
color: #999;
|
|
}
|
|
|
|
body.dark-mode .content input,
|
|
body.dark-mode .content textarea {
|
|
background: #333;
|
|
color: #e0e0e0;
|
|
border: 1px solid #555;
|
|
}
|