From 5e211f2b1dcfffe6fc73bccbf682cf5c696e2bf9 Mon Sep 17 00:00:00 2001 From: Aki Date: Thu, 7 Apr 2022 20:37:21 +0200 Subject: Intialized starshatter website as git repository --- style.css | 212 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..5ae5c52 --- /dev/null +++ b/style.css @@ -0,0 +1,212 @@ +@font-face { + font-family: 'OPTIEdgarBold-Extended'; + src: + url('fonts/subset-OPTIEdgarBold-Extended.woff') format('woff'), + url('fonts/subset-OPTIEdgarBold-Extended.ttf') format('truetype'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +body { + font-family: sans-serif; + font-size: 16px; + max-width: 48em; + min-width: 20em; + margin: 1em auto 8em auto; + padding: 0 2em; + background-color: #111; + color: #eee; +} + +nav { + display: flex; + align-items: center; + flex-direction: row; + flex-wrap: wrap; +} + +nav > a { + flex: 1; + min-width: fit-content; + text-align: center; + display: block; + padding: 0.3em 0.8em; + border: 1px solid #222; + margin: 0.3em; + color: #666; + text-decoration: none; + transition: all 100ms; +} + +nav > a:hover { + background-color: #0a638d; + border-color: #0e84bb; + color: #eee; +} + +nav > a:active { + background-color: #8d810a; + border-color: #bbb80e; + color: #eee; +} + +header { + padding: 6em 0; + text-align: center; + +} + +.star { + display: inline-block; + position: relative; +} + +.star > * { + position: absolute; + width: 287px; + height: 287px; + left: -148px; + top: calc(-143.5px + -0.4em); + background-image: url(media/star.png); + background-repeat: no-repeat; + background-position: center; + z-index: -1; +} + +h1 { + font-family: 'OPTIEdgarBold-Extended', sans-serif; + color: black; + font-size: 220%; + letter-spacing: 0.32em; + text-shadow: + 0 0 0.4em #ffffffa1, + 0.02em 0 0.1em #fff, + -0.02em 0 0.1em #fff, + 0 0.02em 0.1em #fff, + 0 -0.02em 0.1em #fff, + 0.014em 0.014em 0.1em #fff, + -0.014em 0.014em 0.1em #fff, + 0.014em -0.014em 0.1em #fff, + -0.014em -0.014em 0.1em #fff; + text-transform: uppercase; + line-height: 1; +} + +.subtitle { + font-size: 34%; + letter-spacing: 1em; + color: #296c8b; + text-shadow: none; + font-family: sans-serif; +} + +section { + padding: 1em 1em 1.5em 1em; +} + +section > :first-child { + margin-top: 0; +} + +section > :last-child { + margin-bottom: 0; +} + +section .self { + font-weight: normal; + float: right; + color: #0a638d; + transition: all 100ms; +} + +#downloads { + margin-left: -0.2em; + border-left: 0.2em solid #0e84bb; + background-color: #171717; + margin-bottom: 1em; +} + +section p, +section ul, +section ol { + line-height: 1.32; +} + +strong, +h2, h3 { + color: #fff; +} + +footer { + margin-top: 3em; + text-align: center; + font-size: 80%; + color: #aaa; +} + +footer p { + margin: 0; +} + +.gallery { + display: flex; + flex-wrap: wrap; +} + +.gallery > * { + display: block; + margin: 0.3em; + border: 2px solid #333; + flex: 1; + min-width: 12em; + transition: all 100ms; +} + +.gallery > :hover { + border-color: #555; +} + +.gallery > :active { + border-color: #777; +} + +.gallery img { + display: block; + width: 100%; +} + +.gallery { + margin-bottom: 1em; +} + +p a:link, +ul a:link, +p a:visited, +ul a:visited { + color: #15a1e3; + transition: all 100ms; + padding: 0 0.1em; +} + +p a:hover, +ul a:hover, +.self:hover { + background-color: #063e46b8; + color: #51bff3; +} + +p a:active, +ul a:active, +.self:active { + color: #e3df0f; + background-color: #463b07b8; +} + +.centered { + text-align: center; +} + +.smaller { + font-size: 80%; +} \ No newline at end of file -- cgit v1.1