i fucking hate css
Jes Olson j3s@c3f.net
Fri, 06 Oct 2023 21:05:25 -0500
5 files changed,
113 insertions(+),
53 deletions(-)
M
static/style.css
→
static/style.css
@@ -8,36 +8,40 @@ /* make sure the scrollbar is always shown so
the width doesnt change between pages */ html { overflow-y: scroll - -moz-filter: grayscale(100%); - -webkit-filter: grayscale(100%); - filter: gray; /* IE6-9 */ - filter: grayscale(100%); } -img { +a img { + display: block; border-bottom: none; } a:hover { border-bottom: 1.5px solid var(--gray); + background-color: #fafad2; } a { + color: black; text-decoration: none; border-bottom: 1.5px solid var(--medium-gray); } +sub a { + border-bottom: none; +} + #main, #header, aside, img { - max-width: 500px; + /* TODO: i don't knoiw why 89ch works out to 80ch in my thought posts but it does */ margin: 0 auto; + max-width: 500px; padding: 0; } li { - list-style: none; + list-style: none; padding-left: 1em; text-indent: -1em; }@@ -53,6 +57,35 @@ font-family: monospace;
text-align: center; } +.center { + text-align: center; +} + +.termfont { + text-align: center; + font-size: 1.2rem; +} + +.datefont { + text-align: center; + font-style: italic; + font-size: 0.7rem; +} + +.thoughtbody { + font-size: min(2.5vw, 1rem); + max-width: 80ch; + font-family: monospace; + white-space: pre; + display: block; + width: auto; + overflow-x: auto; /* allows horizontal scrolling */ + overflow-y: visible; /* keeps vertical scroll behavior normal */ + border: 2px dashed #888; + margin: 20px auto; + padding: 20px; +} + .grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);@@ -73,3 +106,63 @@ 0 0 5px black,
0 0 10px black, 0 0 15px black; } + +@keyframes lol { + from{ + transform: rotate(0deg); + } + to { + transform: rotate(9000deg); + } +} + +.lol { + animation: lol; + animation-duration: 500s; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-delay: 1s; +} + +.box{ + border: 2px dashed #888; + + margin: 0 auto; + width: 320px; + height: 140px; + position: relative; +} + +.box b { + position: absolute; + -webkit-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; + -moz-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; + -o-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; + animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate; +} + +@-webkit-keyframes moveX { + from { left: 0; } to { left: 280px; } +} +@-moz-keyframes moveX { + from { left: 0; } to { left: 280px; } +} +@-o-keyframes moveX { + from { left: 0; } to { left: 280px; } +} +@keyframes moveX { + from { left: 0; } to { left: 280px; } +} + +@-webkit-keyframes moveY { + from { top: 0; } to { top: 100px; } +} +@-moz-keyframes moveY { + from { top: 0; } to { top: 100px; } +} +@-o-keyframes moveY { + from { top: 0; } to { top: 100px; } +} +@keyframes moveY { + from { top: 0; } to { top: 100px; } +}
M
templates/head.html
→
templates/head.html
@@ -2,24 +2,6 @@ {{ define "head" }}
<!doctype html> <html> <head> - <style> - @keyframes lol { - from{ - transform: rotate(0deg); - } - to { - transform: rotate(9000deg); - } - } - - #header img { - animation: lol; - animation-duration: 500s; - animation-timing-function: ease; - animation-fill-mode: forwards; - animation-delay: 1s; - } - </style> <link rel="stylesheet" href="/static/style.css" type="text/css"> <link rel='shortcut icon' href='/static/favicon.ico'> <meta charset="utf-8">
M
templates/thought.html
→
templates/thought.html
@@ -1,25 +1,13 @@
{{define "thought.html"}} -<!doctype html> -<html> -<head> - <style> - #main, #header, aside { max-width: 750px; margin: 0 auto; padding: 0; } - nav ul { list-style: none; padding: 0; margin: 0 45px 30px 0; float: left; } - .grayscale { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } - pre { white-space: pre-wrap; } - </style> - - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel='shortcut icon' href='/static/favicon.ico'> - <title>{{ .Data.Title }}</title> -</head> -<div id="main"><body class="grayscale"> - <a href="/"><img height="92" src="/static/unnamed-puffy.png" alt="another pufferfish drawn by rekka"></a> - <a href="/"><img height="92" src="/static/unnamed-puffy-2.png" alt="yet another pufferfish drawn by rekka"></a> - <a href="/"><img height="92" src="/static/unnamed-puffy-3.png" alt="yet another pufferfish drawn by rekka"></a> - <hr> - <pre>{{ .Data.Content }}</pre> -</div></body> +{{ template "head" . }} +<div class="box"> + <p><small><a class="datefont" href="/thoughts.html">↵return</a></small> + <p class="termfont">{{ .Data.Title }}</p> + <b> + <img class="lol" height="30" src="/static/unnamed-puffy.png" alt="another pufferfish drawn by rekka"> + </b> +</div> +<p class="thoughtbody">{{ .Data.Content }} +<p class="datefont">last updated {{ .Data.Updated }} </html> {{end}}
M
templates/thoughts.html
→
templates/thoughts.html
@@ -2,8 +2,7 @@ {{ define "thoughts.html" }}
{{ template "head" . }} {{ template "nav" . }} <div id="main"> -<p><i><a href="/feed.atom">rss feed</a></i></p> -<p><i>ever wanted to peer into the head of a MANIAC?</p></i> +<h3>thoughts</h3> <h4>2023</h4> <li><a href="/thought/vore-a-new-rss-feed-reader.html">vore: a new rss feed reader</a></li> <li><a href="/thought/write-posix-shell.html">write posix shell</a></li>@@ -29,7 +28,5 @@ <li><a href="/thought/holy-is-thy-name.html">holy-is-thy-name</a></li>
<li><a href="/thought/no-hacktober.html">no-hacktober</a></li> <li><a href="/thought/pumpernickel-bread.html">pumpernickel-bread</a></li> <li><a href="/thought/something-is-different.html">something-is-different</a></li> -<hr> -<img src="/static/thoughtscrombles.png" alt="scrombles the cat"> </div> {{end}}