From c448abd99a470e1ec541027077dcdef0745270d8 Mon Sep 17 00:00:00 2001
From: Feuerfuchs <git@feuerfuchs.dev>
Date: Sun, 23 Jun 2019 17:29:07 +0200
Subject: Show expandable thumbnails for images

---
 css/main.scss | 58 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 12 deletions(-)

(limited to 'css')

diff --git a/css/main.scss b/css/main.scss
index d0646d7..0d5a5d9 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -10,6 +10,12 @@ $border:         mix(hsl(210, 100%, 95%), $background, 16%);
 $sel-background: rgba($accent, .996);
 $sel-text:       #000;
 
+@mixin monospace-font {
+    font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
+    font-size:   1 / 16 * 17em;
+    line-height: 1.5;
+}
+
 @font-face {
     font-family: 'Iosevka Term SS03';
     font-style:  normal;
@@ -31,6 +37,35 @@ body {
     color:            $text;
 }
 
+button {
+    @include monospace-font;
+
+    background: none;
+    border:     0;
+    padding:    0;
+    color:      $text-plus;
+}
+
+img {
+    display:        inline-block;
+    vertical-align: top;
+    max-width:      8em;
+    margin:         .1em 0;
+
+    &::selection {
+        background-color: rgba($sel-background, .35);
+    }
+
+    &.expanded {
+        max-width: 40em;
+        max-width: 80ch;
+    }
+
+    &.faded {
+        opacity: .5;
+    }
+}
+
 ::selection {
     color:            $sel-text;
     background-color: $sel-background;
@@ -51,10 +86,10 @@ body {
 // }
 
 .header {
+    @include monospace-font;
+
     padding:       .9em 1em;
     border-bottom: 1px solid $border;
-    font-family:   'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
-    font-size:     1 / 16 * 17em;
     line-height:   1.3;
     color:         $text-faint;
 }
@@ -72,17 +107,16 @@ body {
 }
 
 .content {
-    display:     inline-block;
-    min-width:   50em;
-    min-width:   5ch + 80;
-    margin:      0;
-    padding:     2em 1em;
-    text-align:  left;
-    font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
-    font-size:   1 / 16 * 17em;
-    line-height: 1.5;
+    @include monospace-font;
+    
+    display:    inline-block;
+    min-width:  50em;
+    min-width:  5ch + 80;
+    margin:     0;
+    padding:    2em 1em;
+    text-align: left;
 }
 
-.link-type {
+.type-annotation {
     color: $text-minus;
 }
-- 
cgit v1.2.3-54-g00ecf