diff options
author | pdp8 <pdp8@pdp8.info> | 2024-02-01 16:10:46 +0100 |
---|---|---|
committer | pdp8 <pdp8@pdp8.info> | 2024-02-01 16:10:46 +0100 |
commit | 38ea16d54fa0578169af62d2deed738638e600fe (patch) | |
tree | 88fac5601d7d72d3e019a9624b1260cca1ab762f /style.css | |
parent | 01e16b853f9a5cbf60a23c48d3ce08e63672daf9 (diff) |
media loading optimizations, social redirection
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 83 |
1 files changed, 62 insertions, 21 deletions
@@ -1,12 +1,12 @@ body { + background-color: black; + color: #eee; width: 100vw; margin: 0; font-family: sans-serif; } nav { - background: #000; - color: #fff; padding: 0.75em 0 1em 0; } @@ -21,13 +21,21 @@ nav img { vertical-align: bottom; } -nav #logo img { height: 2em; } +nav #logo img { + height: 2em; +} -nav .current { color: #fff; } +nav .current { + color: white; +} -nav #menu { display:none; } +nav #menu { + display: none; +} -nav a:hover { color: #fff; } +nav a:hover { + color: white; +} @media screen and (max-width: 600px) { nav .item { @@ -43,16 +51,32 @@ nav a:hover { color: #fff; } } } -.post { padding: 1em; } +.post { + margin: 1em; +} -img, video { - max-width: 100%; +img, +video { max-height: 80vh; + max-width: 80vw; + object-fit: contain; display: block; margin-left: auto; margin-right: auto; } +#image { + padding-top: 2.5%; + padding-bottom: 1%; +} + +.cover { + max-height: min(50vh, 90vw); + max-width: min(50vh, 90vw); + margin-left: 0; + padding: 1em 0; +} + iframe { width: 100%; height: 90vh; @@ -63,16 +87,19 @@ a { color: #888; } -#image { - padding-top: 2.5%; - padding-bottom: 1%; +td { + padding-right: 1em; + font-size: larger; } -.cover { - max-height: 50vh; - margin-left: 0; +audio { + width: 12.5em; + height: 2.5em; } +audio::-webkit-media-controls-panel { + background-color: #aaa; +} #controller { position: fixed; @@ -86,13 +113,14 @@ a { .btn { display: inline-block; cursor: pointer; - color: #000; + color: #111; font-size: 2em; font-weight: bold; width: 4em; } -#prev, #next { +#prev, +#next { cursor: pointer; position: absolute; color: lightgrey; @@ -102,7 +130,20 @@ a { bottom: 6vh; } -#prev { left: 1%; } -#next { right: 1%; } -#prev:hover, #next:hover { text-decoration: none; } -#prev:active, #next:active { color: black; } +#prev { + left: 1%; +} + +#next { + right: 1%; +} + +#prev:hover, +#next:hover { + text-decoration: none; +} + +#prev:active, +#next:active { + color: black; +}
\ No newline at end of file |