Improved design, add setting for image previews, add prompt for new location

1 files changed, 174 insertions, 29 deletions

diff --git a/css/main.scss b/css/main.scss
index 0d5a5d9..6334f42 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -2,7 +2,7 @@ $accent:         scale-color(#e8ad58, $lightness: 30%);
 $background:     hsl(210, 14%, 9%);
 $text:           mix(hsl(210, 60%, 95%), $background, 85%);
 $text-minus:     mix(hsl(210, 100%, 95%), $background, 60%);
-$text-faint:     mix(hsl(210, 100%, 95%), $background, 40%);
+$text-faint:     mix(hsl(210, 100%, 95%), $background, 35%);
 $text-plus:      #fff;
 $link-idle:      $text-plus;
 $link-visited:   $text;
@@ -10,11 +10,7 @@ $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-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
 
 @font-face {
     font-family: 'Iosevka Term SS03';
@@ -35,15 +31,29 @@ body {
     //     hsla(210, 100%, 95%, .025) 2px
     // );
     color:            $text;
+    font-family:      $font-monospace;
+    font-size:        1 / 16 * 17em;
+    line-height:      1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font:        inherit;
+    color:       $text-plus;
+    margin:      0;
 }
 
 button {
-    @include monospace-font;
+    background:      none;
+    border:          0;
+    padding:         0;
+    color:           $text-plus;
+    font:            inherit;
+    text-decoration: underline;
+    cursor:          pointer;
 
-    background: none;
-    border:     0;
-    padding:    0;
-    color:      $text-plus;
+    &:focus {
+        outline: 1px dotted currentColor;
+    }
 }
 
 img {
@@ -66,6 +76,10 @@ img {
     }
 }
 
+strong {
+    font-weight: normal;
+}
+
 ::selection {
     color:            $sel-text;
     background-color: $sel-background;
@@ -79,44 +93,175 @@ img {
     color: $link-visited;
 }
 
+:link,
+:visited {
+    &:hover {
+        color: $text-plus;
+    }
+}
+
+.novisit {
+    color: $link-idle;
+}
+
 // :link, :visited {
 //     &:hover {
 //         color: $text-plus;
 //     }
 // }
 
-.header {
-    @include monospace-font;
+.header-base {
+    display:         flex;
+    flex-flow:       row wrap;
+    align-items:     center;
+    justify-content: space-between;
 
-    padding:       .9em 1em;
-    border-bottom: 1px solid $border;
-    line-height:   1.3;
-    color:         $text-faint;
+    &::after {
+        display:     block;
+        width:       100%;
+        white-space: nowrap;
+        overflow:    hidden;
+        color:       $text-faint;
+        content:     '----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
+    }
 }
 
-.header__uripart {
-    color: $text-minus;
+//
+
+.header {
+    padding: .9em 1em 0;
+    color:   $text-minus;
 }
 
-.header__uripart--last {
-    color: $text-plus;
+//
+
+.location {
+    color: $text-faint;
+
+    &__prefix {
+        color: $text-faint;
+
+        &:hover {
+            color: $text-plus;
+        }
+    }
+
+    &__uripart {
+        color: $text-plus;
+    
+        + .location__slash + .location__uripart {
+            color: $text;
+
+            &:hover {
+                color: $text-plus;
+            }
+        }
+    }
 }
 
+//
+
 .wrap {
     text-align: center;
 }
 
 .content {
-    @include monospace-font;
-    
-    display:    inline-block;
-    min-width:  50em;
-    min-width:  5ch + 80;
-    margin:     0;
-    padding:    2em 1em;
-    text-align: left;
+    display:     inline-block;
+    min-width:   50em;
+    min-width:   5ch + 80;
+    margin:      0;
+    padding:     2em 1em;
+    text-align:  left;
+    font:        inherit;
 }
 
+//
+
 .type-annotation {
     color: $text-minus;
 }
+
+//
+
+.modal {
+    position:         fixed;
+    top:              0;
+    left:             0;
+    z-index:          100;
+    display:          none;
+    width:            100%;
+    height:           100%;
+    box-sizing:       border-box;
+    padding:          2em;
+    background-color: rgba(#000, .75);
+
+    &--visible {
+        display: block;
+    }
+
+    &__content {
+        max-width:        30em;
+        padding:          1.5em 1.8em;
+        margin:           0 auto;
+        background-color: $background;
+        box-shadow:       0 .3em 2em #000;
+        text-align:       left;
+    }
+    
+    &__head {
+        margin-bottom: 1.5em;
+    }
+    
+    &__title {
+        padding-right: 1em;
+        white-space:   nowrap;
+        text-overflow: ellipsis;
+        overflow:      hidden;
+    }
+}
+
+//
+
+.setting {
+    display:         flex;
+    flex-direction:  row;
+    align-items:     center;
+    justify-content: space-between;
+
+    &__label {
+        white-space:  nowrap;
+        overflow:     hidden;
+        margin-right: .5em;
+    
+        &::after {
+            color:   $text-faint;
+            content: ' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .';
+        }
+    }
+}
+
+//
+
+#none {
+    position: fixed;
+    top:      0;
+    left:     0;
+    width:    0;
+    height:   0;
+}
+
+//
+
+@media screen and (max-width: 800px) {
+    .location__uripart ~ * {
+        display: none;
+    }
+
+    .modal {
+        padding: 1em;
+    }
+
+    .modal__content {
+        padding: 1em 1.3em;
+    }
+}