From 7fc188b0a4d73856c05eacc9bdf2a1561505a8d6 Mon Sep 17 00:00:00 2001 From: Morgana Date: Fri, 25 Sep 2026 14:19:20 -0500 Subject: Initial Commit --- static/style/index.css | 142 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 static/style/index.css (limited to 'static/style/index.css') diff --git a/static/style/index.css b/static/style/index.css new file mode 100644 index 0000000..bee815d --- /dev/null +++ b/static/style/index.css @@ -0,0 +1,142 @@ +html { + background-color: var(--dark-color); +} + +main { + background-image: url("/static/img/bgcropped.webp"), linear-gradient(5deg, var(--heavy-color) 30%, var(--light-color)); + background-color: var(--heavy-color); + background-size: cover; + aspect-ratio: 2 / 1; + box-shadow: 0 -1em 1em var(--heavy-color) inset; + display: flex; + flex-direction: column; +} + +header { + font-size: 3em; +} + +nav { + display: flex; + flex-wrap: wrap; + gap: 1em; + justify-content: center; + align-content: start; + flex-grow: 2; + max-width: 75em; + margin: auto; + + >a { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 8em; + background-color: var(--accent-color); + border: 2px solid var(--heavy-color); + width: 8em; + height: 2em; + padding: 2em; + border-radius: 1em; + text-align: center; + align-content: center; + text-decoration: none; + color: var(--dark-color); + font-weight: bold; + font-variant: small-caps; + } +} + +#search { + margin: auto; + margin-bottom: 1em; + flex-grow: 1; + align-content: end; + + input { + background-color: var(--light-color); + font-size: inherit; + color: var(--dark-color); + border: 2px solid var(--heavy-color); + border-radius: 1em 0 0 1em; + border-right: none; + padding: 0.5em; + width: 25em; + } + + button { + background-color: var(--light-color); + font-size: inherit; + color: var(--dark-color); + border: 2px solid var(--heavy-color); + border-radius: 0 1em 1em 0; + border-left: none; + padding: 0.5em; + } +} + +section { + display: flex; + flex-wrap: wrap; + gap: 1em; + justify-content: center; + padding: 1em; + background-color: var(--heavy-color); + + img { + border: 2px outset var(--dark-color); + width: 100%; + text-align: center; + box-sizing: border-box; + margin: auto; + } + + >div { + overflow: auto; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 8em; + padding: 1em; + height: 15em; + text-align: left; + text-decoration: none; + background-color: var(--light-color); + color: var(--dark-color); + border-radius: 1em; + font-weight: bold; + + h2 { + margin-top: 0; + margin-bottom: 0.5rem; + padding: 0; + font-variant: small-caps; + + a { + color: inherit; + text-decoration: none; + } + } + } +} + +@media (max-width: 750px) { + html { + font-size: 0.8em; + } + + header { + font-size: 1.5em; + } + + nav>a { + padding: 1em; + height: 4em; + } + + #search>input { + width: 15em; + } + + section { + flex-direction: column; + flex-wrap: inherit; + } +} \ No newline at end of file -- cgit v1.3.1