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