Joshua Goins
7cb42d47f3
Images are no longer super blown up on desktop devices, images are now limited in size according to the current article width. On large displays, the article width is now limited so the text is actually readable.
194 lines
2.8 KiB
CSS
194 lines
2.8 KiB
CSS
/* desktop devices */
|
|
@media (min-width: 768px) {
|
|
header {
|
|
margin: 10px;
|
|
}
|
|
|
|
aside {
|
|
margin: 10px;
|
|
|
|
flex: 15em 0 0;
|
|
}
|
|
|
|
article {
|
|
margin: 10px;
|
|
}
|
|
|
|
footer {
|
|
margin: 10px;
|
|
}
|
|
|
|
#content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
max-width: 100em;
|
|
|
|
}
|
|
}
|
|
|
|
/* mobile devices */
|
|
@media (max-width: 768px) {
|
|
aside div {
|
|
padding: 2px;
|
|
}
|
|
|
|
aside div a {
|
|
font-size: 135%;
|
|
margin-top: 13px;
|
|
margin-bottom: 13px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-primary);
|
|
accent-color: var(--accent-color);
|
|
|
|
color: var(--text-color);
|
|
}
|
|
|
|
|
|
:root {
|
|
--primary-accent: #9f5858;
|
|
--secondary-accent: #c99192;
|
|
--border-color: #325e8d;
|
|
--background-primary: #eff1ff;
|
|
--background-secondary: #ffffff;
|
|
--text-color: #363131;
|
|
--link-visited: #460b0b;
|
|
--extra-color: #efe4e4;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--primary-accent: #ce4545;
|
|
--secondary-accent: #c99192;
|
|
--background-primary: #34313a;
|
|
--background-secondary: #3c3a44;
|
|
--border-color: #515860;
|
|
--text-color: #fbeded;
|
|
--link-visited: #ad1616;
|
|
--extra-color: #504e5a;
|
|
}
|
|
|
|
.ext-link {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
a:link {
|
|
color: var(--primary-accent);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-visited);
|
|
}
|
|
|
|
header {
|
|
flex-grow: 1;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
aside {
|
|
background-color: var(--background-secondary);
|
|
|
|
text-align: center;
|
|
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
padding: 15px;
|
|
}
|
|
|
|
article {
|
|
background-color: var(--background-secondary);
|
|
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
|
|
padding: 15px;
|
|
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--background-secondary);
|
|
|
|
flex-grow: 1;
|
|
flex-basis: 100%;
|
|
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 3px;
|
|
|
|
padding: 15px;
|
|
}
|
|
|
|
.site-menu {
|
|
width: 100%;
|
|
border: 1px solid gray;
|
|
border-radius: 5px;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.gallery-img {
|
|
border: 1px black solid;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.article-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
figure {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
margin: 25px;
|
|
}
|
|
|
|
figure figcaption {
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-con {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
td {
|
|
text-align: center;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: var(--extra-color);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
#f-badges {
|
|
text-align: center;
|
|
}
|
|
|
|
#f-badges * {
|
|
display: inline;
|
|
margin-left: 0.2em;
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
#f-list {
|
|
text-align: center;
|
|
}
|
|
|
|
#f-list * {
|
|
display: inline;
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.2em;
|
|
}
|