TheSANDWICH/thesandwi.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement CSS nesting
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Isaac Mills 2025-07-13 11:59:28 -06:00
parent ec1d4e6246
commit 76b9d66ae7
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
1 changed files with 76 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

164
src/style.css
View file

@ -10,31 +10,16 @@
} }
.section-header { .section-header {
display: flex; display: flex;
text-align: left; text-align: left;
justify-content: space-between; justify-content: space-between;
/* flex-flow: wrap; */
/* flex-wrap: wrap; */
/* height: 100%; */
/* padding: 15px; */
/* gap: 5px; */
h1 {
font-size: 48pt;
}
} }
.section-header h1 {
font-size: 48pt;
}
/* .section-header>div { */
/* background: #ffecb3; */
/* border: 3px solid #ffcc80; */
/* border-radius: 5px; */
/* padding: 8px; */
/* } */
center:has(> blockquote) { center:has(> blockquote) {
margin: 10px auto; margin: 10px auto;
font-size: min(5vw, 22pt); font-size: min(5vw, 22pt);
@ -42,20 +27,22 @@ center:has(> blockquote) {
border-radius: 5px; border-radius: 5px;
} }
blockquote p { blockquote {
text-align: center; p {
} text-align: center;
}
blockquote p::before { p::before {
content: "\201C"; content: "\201C";
} }
blockquote p::after { p::after {
content: "\201D"; content: "\201D";
} }
blockquote+p { &+p {
text-align: right; text-align: right;
}
} }
html { html {
@ -63,28 +50,27 @@ html {
font-family: system-ui; font-family: system-ui;
} }
#page-content { #page-content {
background-image: linear-gradient(to bottom, #000000, #636363 1024px); background-image: linear-gradient(to bottom, #000000, #636363 1024px);
&,
&>* {
position: relative;
z-index: 1;
}
} }
#page-content-content { #page-content-content {
width: var(--page-width); width: var(--page-width);
} }
#page-content,
#page-content>* {
position: relative;
z-index: 1;
}
#footer { #footer {
background-color: #484848; background-color: #484848;
}
#footer p, p,
#footer li { li {
font-size: 8pt; font-size: 8pt;
}
} }
.footnotes { .footnotes {
@ -97,14 +83,19 @@ html {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 32px; margin: 32px;
}
.project>div { &>div {
padding: 16px; padding: 16px;
}
} }
.project-title { .project-title {
min-width: 275px; min-width: 275px;
h1 {
font-size: 24pt;
margin: 0;
}
} }
.description { .description {
@ -115,40 +106,37 @@ html {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin: 20px 0; margin: 20px 0;
}
.links a { a {
font-size: 16pt; font-size: 16pt;
}
} }
.tab-list { .tab-list {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
a {
background-color: transparent;
border: solid 3px transparent;
border-bottom: solid 3px #eee;
font-size: 16pt;
}
a[aria-selected=true] {
font-weight: bold;
border-bottom: solid 6px #eee;
}
} }
.tab-list a { .figure {
background-color: transparent; &>* {
border: solid 3px transparent; width: 80%;
border-bottom: solid 3px #eee; }
font-size: 16pt;
}
.tab-list a[aria-selected=true] { &>svg {
font-weight: bold; height: 80%;
border-bottom: solid 6px #eee; }
}
.figure>* {
width: 80%;
}
.figure>svg {
height: 80%;
}
.project-title h1 {
font-size: 24pt;
margin: 0;
} }
.project-alt { .project-alt {
@ -224,38 +212,38 @@ a {
.project { .project {
flex-direction: column; flex-direction: column;
padding: 18px; padding: 18px;
}
.project>div { &>div {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
}
p {
font-size: 14pt;
}
} }
blockquote { blockquote {
margin: 0px auto; margin: 0px auto;
} }
.project p {
font-size: 14pt;
}
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.tab-list { .tab-list {
flex-direction: column; flex-direction: column;
}
.tab-list a { a {
background-color: transparent; background-color: transparent;
border: solid 3px #999; border: solid 3px #999;
font-size: 16pt; font-size: 16pt;
padding: 8px; padding: 8px;
} }
.tab-list a[aria-selected=true] { a[aria-selected=true] {
background-color: #eee; background-color: #eee;
font-weight: bold; font-weight: bold;
color: black; color: black;
border: solid 12px #eee; border: solid 12px #eee;
}
} }
} }