summary refs log tree commit diff
path: root/css
diff options
context:
space:
mode:
authorBen Harris <ben@tilde.team>2021-01-07 15:28:15 -0500
committerBen Harris <ben@tilde.team>2021-01-07 15:28:15 -0500
commit99c385172b70864115efbed2201d51d0ce317c2e (patch)
tree8134818297332520e090623bd6d921fdc87dfa94 /css
parent7756064af88d94481eee052deeecc6ea4371bdb1 (diff)
tidy up css and link to page source
Diffstat (limited to 'css')
-rw-r--r--css/style.css27
-rw-r--r--css/style.min.css1
2 files changed, 6 insertions, 22 deletions
diff --git a/css/style.css b/css/style.css
index 96ddbe1..a9bfe56 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,11 @@
-* { margin: 0; padding: 0; box-sizing: border-box;
-
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
   /* Color scheme */
-
   --textcolor: #dadada;
   --bgcolor: #141414;
   --highlight: #ffc400;
-
 }
 
 body {
@@ -20,7 +20,6 @@ body {
 }
 
 /* ------- Sections ------- */
-
 section {
   padding: calc(6em + 5vw) 5vw 8vw 5vw;
   /* ! Everything below is needed ! */
@@ -41,7 +40,6 @@ section#home { /* Show #home by default */
 }
 
 /* ------- Header ------- */
-
 header {
   padding: 5vw 5vw 0 5vw;
   display: flex;
@@ -63,7 +61,6 @@ nav a:not(:last-of-type) {
 }
 
 /* ------- General ------- */
-
 a {
   text-decoration: none;
   color: var(--highlight);
@@ -181,7 +178,6 @@ pre, textarea { /* for code samples */
 }
 
 /* Inline footnotes */
-
 label {
   cursor: pointer;
   vertical-align: super;
@@ -220,7 +216,6 @@ figure figcaption {
 }
 
 /* Responsive video embeds */
-
 figure.video {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
@@ -243,7 +238,6 @@ section:target iframe {
 }
 
 /* External links */
-
 a[href*="//"]:after {
   font-weight: 300;
   font-size: .85em;
@@ -259,6 +253,7 @@ a[href^="mailto:"]:after {
   color: var(--textcolor);
   opacity: .25;
 }
+
 a[href^="xmpp:"]:after {
   font-weight: 300;
   font-size: .85em;
@@ -275,7 +270,6 @@ a[href*="//"]:hover:after {
 }
 
 /* File links */
-
 a:before {
   font-size: .7em;
   margin-right: .4em;
@@ -283,7 +277,6 @@ a:before {
 }
 
 /* Add more filetypes here if you want */
-
 a[href$=".pdf"]:before { content: "pdf"; }
 a[href$=".txt"]:before { content: "txt"; }
 a[href$=".mp3"]:before { content: "mp3"; }
@@ -296,7 +289,6 @@ a[href$=".png"]:before { content: "img"; }
 a[href$=".asc"]:before { content: "asc"; }
 
 /* ------- News ------- */
-
 article + article {
   margin-top: 4.5em;
 }
@@ -314,7 +306,6 @@ article time {
 }
 
 /* ------- Images Grid ------- */
-
 .grid {
   display: grid;
   grid-gap: 5vmin;
@@ -348,7 +339,6 @@ article time {
 }
 
 /* ------- Slideshow ------- */
-
 .slides {
   position: fixed;
   top: 0;
@@ -387,7 +377,6 @@ article time {
 }
 
 /* ------- Lightbox ------- */
-
 .lightbox {
   display: none;
   color: var(--textcolor);
@@ -443,7 +432,6 @@ article time {
 }
 
 /* ------- Smaller screens ------- */
-
 @media only screen and (max-width: 680px) {
   body { font-size: 16px; }
 }
@@ -453,9 +441,7 @@ article time {
 }
 
 /* ------- Print ------- */
-
 @media print {
-
   nav, .lightbox:target:after { display: none; }
 
   article, figure, img {
@@ -464,13 +450,11 @@ article time {
   }
 
   /* Inline footnotes */
-
   label + input + small { display: inline; }
   label + input + small:before { content: "["; }
   label + input + small:after { content: "]"; }
 
   /* Slides */
-
   .slides, .slides figure {
     position: relative;
     height: auto;
@@ -485,5 +469,4 @@ article time {
     height: 100vh;
     object-fit: contain;
   }
-
 }
diff --git a/css/style.min.css b/css/style.min.css
new file mode 100644
index 0000000..8113043
--- /dev/null
+++ b/css/style.min.css
@@ -0,0 +1 @@
+*{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}}
\ No newline at end of file