1 line
5.3 KiB
CSS
1 line
5.3 KiB
CSS
*{margin:0;padding:0;box-sizing:border-box;--textcolor:#dadada;--bgcolor:#141414;--highlight:#ffc400}body{font-size:18px;font-family:'JetBrains Mono','Input Mono',monospace;line-height:1.4;color:var(--textcolor);background:var(--bgcolor);position:relative;max-width:64em;margin:0 auto}section{padding:calc(6em + 5vw) 5vw 8vw 5vw;display:none;position:absolute;top:0;min-height:100vh;width:100%;background:var(--bgcolor)}section:target{display:block}section#home{display:block}header{padding:5vw 5vw 0 5vw;display:flex;flex-wrap:wrap;position:absolute;width:100%;z-index:2}header h1{font-size:1em;flex:1;white-space:nowrap;padding:0 5vw .5em 0}nav a:not(:last-of-type){margin-right:1.5vw}a{text-decoration:none;color:var(--highlight)}a:hover{border-bottom:1px solid}section h1{font-size:1em;margin:0 0 1em 0}h2,h3,h4{font-size:1em;font-weight:600;margin:1.6em 0 .6em 0}article,ol,p,ul{max-width:60ch;margin-bottom:.6em}ul{list-style-type:none}ul li::marker{content:"\2022 "}li{margin-bottom:.2em}ol,ul{padding-left:2ch}b,strong{font-weight:600}small{font-size:.85em}hr{height:1px;border:0;background:currentColor;opacity:.1;margin:1.2em 0}abbr{text-decoration:none}abbr[title]:hover{opacity:.7;cursor:help}blockquote{padding-left:2ch;opacity:.7;margin-bottom:.6em;position:relative}blockquote:before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;background:currentColor;width:1px;opacity:.2}audio,img,svg,video{display:block;max-width:100%;height:auto;fill:currentColor}code,textarea{font-size:1em;opacity:.7}a code{opacity:1}pre,textarea{font-size:.9em;color:inherit;line-height:inherit;padding:.6em .9em;margin:.8em 0 1em 0;position:relative;display:block;width:100%;white-space:pre;border:0;border-radius:4px;background:rgba(255,255,100,.075);box-shadow:inset 1px 1px 0 rgba(0,0,0,.2),inset -1px -1px 0 rgba(0,0,0,.04)}label{cursor:pointer;vertical-align:super;line-height:1;font-size:.75em;padding-left:.1em}label:hover{color:var(--highlight)}label:before{content:"["}label:after{content:"]"}label+input,label+input+small{display:none}input:checked+small{display:block;padding:.8em 0 1em 2.5vw}figure{margin:2em 0 1.5em 0}figure figcaption{margin:.8em 0 0 0;font-size:.85em;opacity:.7}figure.video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}figure.video embed,figure.video iframe,figure.video object{position:absolute;top:0;left:0;width:100%;height:100%;border:0;visibility:hidden}section:target iframe{visibility:visible}a[href*="//"]:after{font-weight:300;font-size:.85em;content:"\2197";color:var(--textcolor);opacity:.25}a[href^="mailto:"]:after{font-weight:300;font-size:.85em;content:"\2709";color:var(--textcolor);opacity:.25}a[href^="xmpp:"]:after{font-weight:300;font-size:.85em;content:"\1F5EA";color:var(--textcolor);opacity:.25}a[href*="//"]:hover:after,a[href^="mailto:"]:hover:after,a[href^="xmpp:"]:hover:after{color:var(--highlight);opacity:1}a:before{font-size:.7em;margin-right:.4em;opacity:.75}a[href$=".pdf"]:before{content:"pdf"}a[href$=".txt"]:before{content:"txt"}a[href$=".mp3"]:before{content:"mp3"}a[href$=".zip"]:before{content:"zip"}a[href$=".rar"]:before{content:"rar"}a[href$=".gif"]:before,a[href$=".jpeg"]:before,a[href$=".jpg"]:before,a[href$=".png"]:before{content:"img"}a[href$=".asc"]:before{content:"asc"}article+article{margin-top:4.5em}article h2{font-weight:700;margin:0 0 1em 0}article time{margin-left:.6em;font-size:.8em;font-weight:400;opacity:.7}.grid{display:grid;grid-gap:5vmin;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-flow:dense;padding:2em 0}.grid a{position:relative;border:0}.grid a:hover{transform:scale(.975)}.grid a:before{content:"";display:block;padding-top:100%}.grid a img{position:absolute;top:0;width:100%;height:100%;object-fit:contain}.slides{position:fixed;top:0;left:0;right:0;height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory}.slides figure{height:100vh;padding:0 5vw;margin:0;display:grid;place-items:center;align-content:center;scroll-snap-align:center}.slides figure img{max-height:88vh}.slides figure.cover{padding:0}.slides figure.cover img{max-height:none;position:absolute;z-index:-1;width:100vw;height:100vh;object-fit:cover}.lightbox{display:none;color:var(--textcolor)}.lightbox:target{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;background:var(--bgcolor);border:0;z-index:3}.lightbox img{max-height:100vh;z-index:4}.lightbox:target:before{content:"";height:2em;width:2em;animation:spin .8s infinite linear;border:1px solid;border-right-color:transparent;border-radius:50%;display:block;position:absolute;transform:translateX(-50%);opacity:.25}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.lightbox:target:after{content:"\00D7";position:fixed;font-size:2em;font-weight:200;line-height:0;top:.75em;right:.5em;z-index:4}@media only screen and (max-width:680px){body{font-size:16px}}@media only screen and (max-width:540px){nav{width:100%}}@media print{.lightbox:target:after,nav{display:none}article,figure,img{page-break-inside:avoid;break-inside:avoid}label+input+small{display:inline}label+input+small:before{content:"["}label+input+small:after{content:"]"}.slides,.slides figure{position:relative;height:auto;padding:0}.slides figure img,.slides figure.cover img{max-height:auto;position:relative;z-index:1;width:auto;height:100vh;object-fit:contain}} |