diff options
| author | Ada Isopods <me@bathynomus.xyz> | 2023-01-09 21:57:46 -0700 |
|---|---|---|
| committer | Ada Isopods <me@bathynomus.xyz> | 2026-10-21 23:30:16 -0600 |
| commit | e7d593cf078eaac4f1af82fc39d9fdf0ae8a37f8 (patch) | |
| tree | 6cfb29a0938c48c18c4e8c832c723cce78b40b09 /style.css | |
| parent | d646ae0d9abb61030677a1a27945b9f5540c89f5 (diff) | |
Initial commit of website contents
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..0d3a55e --- /dev/null +++ b/style.css @@ -0,0 +1,117 @@ +@font-face { + font-family: Ubuntu; + src: url(ubuntu.ttf); +} +@font-face { + font-family: Ubuntu-Bold; + src: url(ubuntu-bold.ttf); +} +:root { + --hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif; + --stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif; +} +html, body { + min-height: 100%; + margin:0; + padding:0; +} +body { + overflow-x: clip; + color: gainsboro; + font-family: var(--stdfont); + background-color: black; + background-image: url('bg_default.png'); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + overflow-wrap: break-word; + display: flex; + flex-direction: row-reverse; +} +a { + color: gainsboro; +} +p { + text-shadow: 0 0 5px black; +} +#main { + flex: 50%; + padding: 1rem; + box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7); + display: flex; + flex-direction: column; + justify-content: center; + background: rgba(0, 0, 0, 0.7); + background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%); + background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%); +} +#secondary { + flex: 50%; + display: flex; + justify-content: center; + align-items: center; +} +#displaycontent { + box-shadow: 4px 4px 8px 2px black; + font-size: 0; +} +#header { + font-family: var(--hfont); + font-size: 3.5em; + color: transparent; + -webkit-text-stroke-width: 2px; + margin: 0; +} +#subheader { + margin-left: -5px; + font-size: 0.6em; + color: white; + -webkit-text-stroke-width: 0; + text-shadow: 0 0 9px white; + z-index: 1; + animation-name: subheaderappear; + animation-duration: 0.5s; +} +@keyframes subheaderappear { + from {color: #19191900; text-shadow: 0 0 0 black;} + to {color: white; text-shadow: 0 0 9px white;} +} +nav a { + text-decoration: none; + display: inline; + font-family: var(--hfont); + font-size: 1.4em; + padding: 5px; +} +@media(max-width: 80vh) { + body { + flex-direction: column; + } + #main { + padding: 1rem; + background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%); + } +} +.bandcamp-color { color: #629aa9; transition-duration: 0.2s; } +.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; } +.youtube-color { color: #ff0000; transition-duration: 0.2s; } +.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; } +.itchio-color { color: #fa5c5c; transition-duration: 0.2s; } +.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; } +.patreon-color { color: #FF424D; transition-duration: 0.2s; } +.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; } +.white-color { color: gainsboro; transition-duration: 0.2s; } +.white-color:hover { color: white; text-shadow: 0 0 7px white;} + +#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;} +@keyframes hblue { + 0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);} + 15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;} +} +#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; } +#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;} +@keyframes hyellow { + from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);} + to {text-shadow: 0 0 15px gold;} +} |
