diff --git a/style.css b/style.css index 74d7f84..5b8fce9 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,60 @@ -/* {font-size:13pt;font-weight:normal;} */ +@font-face { + font-family: 'Liberation Monospace'; + font-style: normal; + font-weight: normal; + src: local('Liberation Monospace'), url('https://fonts.cdnfonts.com/s/276/LiberationMono-Regular.woff') format('woff'); +} -@media (min-width: 64em) { - .row { - display: flex; - flex-wrap: nowrap; - flex-direction: row-reverse; +@font-face { + font-family: 'Liberation Monospace'; + font-style: normal; + font-weight: bold; + src: local('Liberation Monospace'), url('https://fonts.cdnfonts.com/s/276/LiberationMono-Bold.woff') format('woff'); +} + +body { + margin: auto; + padding: 1em; + max-width: 1024px; + font-family: 'Liberation Monospace', 'Courier New', monospace, sans-serif; + color: #fb5; + background: #111; + word-wrap: break-word; +} + +a { + text-decoration: none; + color: #f70; + font-weight: bold; + padding-right: 0.25em; +} + + a:hover { + color: #f20; } - .col { flex-grow: 1; } + +hr { + border-color: #fb5; +} + +.text-center { + text-align: center +} + +.advisory { + background: #fc4; + color: #222; + font-weight: bold; + padding: 1em; + border-radius: 0.25em; +} + +h1 { + font-size:1.6rem; + text-transform: uppercase; + letter-spacing:-.75px; + color: #fb5; + padding-top:.5rem; } .grid { @@ -17,62 +65,34 @@ padding: 1em; } -body { - margin: auto; - padding: 1em; - max-width: 64em; - font-family: "courier new", monospace; - color: #fb5; - background: #111; - word-wrap: break-word; -} -a { - text-decoration: none; - color: #f70; - font-weight: bold; - padding-right: 0.25em; -} -a:hover {color: #f20;} -hr { - border-color: #fb5; -} -.text-center { - text-align: center -} -.advisory { - background: #fc4; - color: #222; - font-weight: bold; - padding: 1em; - border-radius: 0.25em; -} -h1 { - text-transform: uppercase; - color: #fb5; - font-family: monospace; -} - /* THEGOODS */ #fancyboi::before { content: "$ "; } + @media (prefers-reduced-motion: no-preference) { @keyframes flash { 50% { opacity: 0; } } + @keyframes reveal { from { max-width: 2em; } /* Width of ::before */ to { max-width: 100%; } } + #fancyboi { overflow: hidden; white-space: nowrap; animation: reveal 4s linear; text-overflow: "█"; } + #fancyboi::after { content: "█"; animation: flash 0.5s step-end infinite; + position: relative; + top: -2px; + margin-left: 3px; } } /* SDOOGEHT */ @@ -86,43 +106,39 @@ code > span.fl { } /* Style the navbar */ - #navbar { - overflow: hidden; - background-color: #fb5; - color: #222; - z-index: 99; - position: relative; - top: 0; - left: 0; - width: 100%; - border-radius: 0.25em; - } - - #navbar a:hover { - background-color: #f93; - } - - /* Navbar links */ - #navbar a { - float: left; - display: block; - color: black; - text-align: center; - padding: 14px; - text-decoration: none; - } - - /* RSS Icon Styles */ - .rss-icon { - float: right; - padding: 14px; - } - -/* Page content */ -.content { - padding-top: 5px; +#navbar { + overflow: hidden; + background-color: #fb5; + color: #222; + z-index: 99; + position: relative; + top: 0; + left: 0; + width: 100%; + border-radius: 0.25em; } +#navbar a:hover { + background-color: #f93; +} + +/* Navbar links */ +#navbar a { + float: left; + display: block; + color: black; + text-align: center; + padding: 14px; + text-decoration: none; +} + +/* RSS Icon Styles */ +.rss-icon { + float: right; + margin-top:5px; +} + +/* Page content */ .user-list { display: flex; flex-flow: row wrap; @@ -178,6 +194,7 @@ blockquote { display: block; } } + /* Ensure the user-list displays items in a single column */ .single-column { display: block; @@ -305,6 +322,7 @@ pre { #active-users h2 { flex-shrink:0; + font-size: 1.25rem; } #active-users a {