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

8 files changed, 473 insertions, 122 deletions

diff --git a/Makefile b/Makefile
index da35555..fa3998e 100644
--- a/Makefile
+++ b/Makefile
@@ -7,7 +7,7 @@ dev: build
 
 build: clean
         sassc -t compressed css/main.scss assets/style.css
-        tsc --strict --outFile assets/main.js js/main.ts
+        tsc --strict --module none --outFile /dev/stdout js/KeyValueStore.ts js/main.ts | uglifyjs -c -m -o assets/main.js --
         pyftsubset fonts/iosevka-term-ss03-regular.ttf --name-IDs+=0,4,6 --text-file=glyphs.txt --flavor='woff' --output-file='assets/iosevka-term-ss03-regular.woff'
         pyftsubset fonts/iosevka-term-ss03-regular.ttf --name-IDs+=0,4,6 --text-file=glyphs.txt --flavor='woff2' --output-file='assets/iosevka-term-ss03-regular.woff2'
         go build -o ./gopherproxy ./cmd/gopherproxy/main.go
diff --git a/assets/icons.svg b/assets/icons.svg
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/assets/icons.svg
diff --git a/assets/main.js b/assets/main.js
index 46cb7ee..cbabeef 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -1,39 +1 @@
-"use strict";
-var linkQryEls = document.getElementsByClassName('link--QRY');
-var i = linkQryEls.length;
-while (i--) {
-    linkQryEls[i].addEventListener('click', function (e) {
-        e.preventDefault();
-        var resp = prompt('Please enter required input: ', '');
-        if ((resp !== null) && (resp !== "")) {
-            window.location.href = e.target.href + '?' + resp;
-        }
-        return false;
-    });
-}
-var imgPreviewEls = document.getElementsByClassName('img-preview');
-i = imgPreviewEls.length;
-var _loop_1 = function () {
-    var imgPreviewEl = imgPreviewEls[i];
-    var child = imgPreviewEl.children[0];
-    var thumbnailUrl = child.src;
-    child.addEventListener('load', function (e) {
-        child.classList.remove('faded');
-    });
-    imgPreviewEls[i].addEventListener('click', function (e) {
-        e.preventDefault();
-        child.classList.add('faded');
-        if (child.classList.contains('expanded')) {
-            child.classList.remove('expanded');
-            child.src = thumbnailUrl;
-        }
-        else {
-            child.classList.add('expanded');
-            child.src = imgPreviewEl.href;
-        }
-        return false;
-    });
-};
-while (i--) {
-    _loop_1();
-}
+"use strict";var KeyValueStore=function(){function e(e){this.data=e;for(var t=0,n=Object.keys(e);t<n.length;t++){var a=n[t],l=e[a];if(l.valueRange&&-1===l.valueRange.indexOf(l.value))throw new Error('Invalid value "'+l.value+'" for ID "'+a+'"')}}return e.prototype.getValue=function(e){return this.data[e].value},e.prototype.setValue=function(e,t){var n=this.data[e];if(n.valueRange&&-1===n.valueRange.indexOf(t))throw new Error('Invalid value "'+t+'" for ID "'+e+'"');n.value=t,n.callbacks&&n.callbacks.forEach(function(e){e(t)})},e.prototype.cycleValue=function(e,t){void 0===t&&(t=1);var n=this.data[e];if(!n)throw new Error('Invalid ID "'+e+'"');var a=n.value;if(n.valueRange){var l=n.valueRange.indexOf(a)+t;l>=n.valueRange.length?l=0:l<0&&(l=n.valueRange.length-1),a=n.value=n.valueRange[l]}else{if("number"!=typeof a)throw new Error("Can't cycle \""+e+'"');a+=t,n.value=a}return n.callbacks&&n.callbacks.forEach(function(e){e(a)}),a},e.prototype.addCallback=function(e,t){var n=this.data[e];n.callbacks||(n.callbacks=[]),n.callbacks.push(t)},e}();function ensureSetting(e,t){var n=localStorage.getItem(e);return null===n&&(n=t,localStorage.setItem(e,n)),n}var settings=new KeyValueStore({imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var i=document.querySelectorAll(".link--IMG, .link--GIF"),s=i.length,e=function(){var e=i[s],t=e.href.replace(/^(.*?)\/I/,"$1/T"),n=document.createTextNode("\n"),a=document.createElement("span");a.classList.add("type-annotation"),a.textContent=" ->  ";var l=document.createElement("img");l.src=t,l.addEventListener("load",function(e){l.classList.remove("faded")});var r=document.createElement("a");r.classList.add("img-preview"),r.href=e.href,r.addEventListener("click",function(e){return e.preventDefault(),l.classList.add("faded"),l.classList.contains("expanded")?(l.classList.remove("expanded"),l.src=t):(l.classList.add("expanded"),l.src=r.href),!1}),r.append(l),e.parentNode.insertBefore(r,e.nextSibling),e.parentNode.insertBefore(a,r),e.parentNode.insertBefore(n,a)};s--;)e()}function removeImageThumbnails(){for(var e=document.querySelectorAll(".link--IMG, .link--GIF"),t=e.length;t--;)for(var n=e[t],a=3;a--&&n.nextSibling;)n.nextSibling.remove()}!function(){for(var e=document.getElementsByClassName("link--QRY"),t=e.length;t--;)e[t].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter required input: ","");return null!==t&&""!==t&&(window.location.href=e.target.href+"?"+t),!1})}(),document.getElementsByClassName("location__prefix")[0].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter new location: ","");return null!==t&&""!==t&&(window.location.href=window.location.origin+"/"+t),!1}),function(){function e(e,t){void 0===t&&(t=!1),e?generateImageThumbnails():t||removeImageThumbnails(),localStorage.setItem("image-previews",e?"1":"0"),n.textContent=e?"[yes]":"[no]"}var n=document.getElementsByClassName("setting--image-previews")[0].getElementsByClassName("setting__value")[0];n.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("imagePreviews"),!1}),e(settings.getValue("imagePreviews"),!0),settings.addCallback("imagePreviews",e)}(),function(){for(var a=document.getElementsByClassName("modal"),l=a.length,e=function(){var t=a[l],n=t.getElementsByClassName("modal__content")[0],e=t.getElementsByClassName("modal__close-btn")[0];document.addEventListener("click",function(e){t.classList.contains("modal--visible")&&(e.target===n||n.contains(e.target)||(t.classList.remove("modal--visible"),e.preventDefault(),e.stopPropagation()))},!0),document.addEventListener("keydown",function(e){t.classList.contains("modal--visible")&&27===e.keyCode&&t.classList.remove("modal--visible")}),e.addEventListener("click",function(e){return e.preventDefault(),t.classList.remove("modal--visible"),!1})};l--;)e();var t=document.getElementsByClassName("settings-btn")[0],n=document.getElementsByClassName("modal--settings")[0];t.addEventListener("click",function(e){return e.preventDefault(),n.classList.add("modal--visible"),!1})}();
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
index 46ad8cb..3ab3b36 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1 +1 @@
-@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8}button{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;background:none;border:0;padding:0;color:#fff}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}.header{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;padding:.9em 1em;border-bottom:1px solid #353a3f;line-height:1.3;color:#686f76}.header__uripart{color:#929ba3}.header__uripart--last{color:#fff}.wrap{text-align:center}.content{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left}.type-annotation{color:#929ba3}
+@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8;font-family:"Iosevka Term SS03","IBM Plex Mono","Fira Code","Fira Mono","Roboto Mono","Droid Sans Mono",Monaco,Consolas,Courier,monospace;font-size:1.0625em;line-height:1.5}h1,h2,h3,h4,h5,h6{font:inherit;color:#fff;margin:0}button{background:none;border:0;padding:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer}button:focus{outline:1px dotted currentColor}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}strong{font-weight:normal}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}:link:hover,:visited:hover{color:#fff}.novisit{color:#fff}.header-base{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.header-base::after{display:block;width:100%;white-space:nowrap;overflow:hidden;color:#5d646a;content:'----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------'}.header{padding:.9em 1em 0;color:#929ba3}.location{color:#5d646a}.location__prefix{color:#5d646a}.location__prefix:hover{color:#fff}.location__uripart{color:#fff}.location__uripart+.location__slash+.location__uripart{color:#cad1d8}.location__uripart+.location__slash+.location__uripart:hover{color:#fff}.wrap{text-align:center}.content{display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left;font:inherit}.type-annotation{color:#929ba3}.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(0,0,0,0.75)}.modal--visible{display:block}.modal__content{max-width:30em;padding:1.5em 1.8em;margin:0 auto;background-color:#14171a;box-shadow:0 .3em 2em #000;text-align:left}.modal__head{margin-bottom:1.5em}.modal__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}.setting__label{white-space:nowrap;overflow:hidden;margin-right:.5em}.setting__label::after{color:#5d646a;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}}
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;
+    }
+}
diff --git a/js/KeyValueStore.ts b/js/KeyValueStore.ts
new file mode 100644
index 0000000..fd8f39e
--- /dev/null
+++ b/js/KeyValueStore.ts
@@ -0,0 +1,89 @@
+type KeyValueStoreCallback<T> = (value: T) => void;
+
+interface IKeyValueStoreParam<T> {
+    value: T;
+    valueRange?: T[];
+    callbacks?: KeyValueStoreCallback<T>[];
+}
+
+type KeyValueStoreData<T> = { [K in keyof T]: IKeyValueStoreParam<T[K]> };
+
+class KeyValueStore<T> {
+    constructor(private data: KeyValueStoreData<T>) {
+        for (const id of Object.keys(data)) {
+            const props = data[id as keyof typeof data];
+
+            if (props.valueRange && props.valueRange.indexOf(props.value) === -1) {
+                throw new Error(`Invalid value "${props.value}" for ID "${id}"`);
+            }
+        }
+    }
+
+    public getValue(id: keyof T) {
+        return this.data[id].value;
+    }
+
+    public setValue<K extends keyof T>(id: K, value: T[K]) {
+        const props = this.data[id];
+
+        if (props.valueRange) {
+            const valueIndex = props.valueRange.indexOf(value);
+            if (valueIndex === -1) {
+                throw new Error(`Invalid value "${value}" for ID "${id}"`);
+            }
+        }
+
+        props.value = value;
+
+        if (props.callbacks) {
+            props.callbacks.forEach(callback => {
+                callback(value);
+            });
+        }
+    }
+
+    public cycleValue<K extends keyof T>(id: K, dir: -1 | 1 = 1) {
+        const props = this.data[id];
+
+        if (!props) {
+            throw new Error(`Invalid ID "${id}"`);
+        }
+
+        let value = props.value;
+
+        if (props.valueRange) {
+            let valueIndex = props.valueRange.indexOf(value) + dir;
+
+            if (valueIndex >= props.valueRange.length) {
+                valueIndex = 0;
+            } else if (valueIndex < 0) {
+                valueIndex = props.valueRange.length - 1;
+            }
+
+            value = props.value = props.valueRange[valueIndex];
+        } else if (typeof value === "number") {
+            (value as number) += dir;
+            props.value = value;
+        } else {
+            throw new Error(`Can't cycle "${id}"`);
+        }
+
+        if (props.callbacks) {
+            props.callbacks.forEach(callback => {
+                callback(value);
+            });
+        }
+
+        return value;
+    }
+
+    public addCallback<K extends keyof T>(id: K, callback: KeyValueStoreCallback<T[K]>) {
+        const props = this.data[id];
+
+        if (!props.callbacks) {
+            props.callbacks = [];
+        }
+
+        props.callbacks.push(callback);
+    }
+}
diff --git a/js/main.ts b/js/main.ts
index 21e589d..7ef7020 100644
--- a/js/main.ts
+++ b/js/main.ts
@@ -1,42 +1,181 @@
-let linkQryEls = document.getElementsByClassName('link--QRY');
-let i   = linkQryEls.length;
-while (i--) {
-    linkQryEls[i].addEventListener('click', e => {
+/// <reference path="./KeyValueStore.ts" />
+
+//
+
+function ensureSetting(key: string, defaultValue: string): string {
+    let strValue = localStorage.getItem(key);
+    if (strValue === null) {
+        strValue = defaultValue;
+        localStorage.setItem(key, strValue);
+    }
+    return strValue;
+}
+
+const settings = new KeyValueStore({
+    imagePreviews: {
+        value: ensureSetting('image-previews', '1') === '1',
+        valueRange: [false, true]
+    }
+});
+
+//
+
+(() => {
+    const linkQryEls = document.getElementsByClassName('link--QRY');
+    let   i          = linkQryEls.length;
+    while (i--) {
+        linkQryEls[i].addEventListener('click', e => {
+            e.preventDefault();
+
+            const resp = prompt('Please enter required input: ', '');
+            if ((resp !== null) && (resp !== "")) {
+                window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
+            }
+
+            return false;
+        });
+    }
+})();
+
+(() => {
+    const locationPrefixEl = document.getElementsByClassName('location__prefix')[0];
+    locationPrefixEl.addEventListener('click', e => {
         e.preventDefault();
 
-        const resp = prompt('Please enter required input: ', '');
+        const resp = prompt('Please enter new location: ', '');
         if ((resp !== null) && (resp !== "")) {
-            window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp;
+            window.location.href = window.location.origin + '/' + resp;
         }
 
         return false;
     });
-}
+})();
 
-let imgPreviewEls = document.getElementsByClassName('img-preview');
-i                 = imgPreviewEls.length;
-while (i--) {
-    const imgPreviewEl = imgPreviewEls[i] as HTMLAnchorElement;
-    const child        = imgPreviewEl.children[0] as HTMLImageElement;
-    const thumbnailUrl = child.src;
+(() => {
+    const settingImagePreviewEl      = document.getElementsByClassName('setting--image-previews')[0];
+    const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0];
+    const settingImagePreviewCallback = (value: boolean, init = false) => {
+        if (value) {
+            generateImageThumbnails();
+        } else if (!init) {
+            removeImageThumbnails();
+        }
 
-    child.addEventListener('load', e => {
-        child.classList.remove('faded');
-    });
+        localStorage.setItem('image-previews', value ? '1' : '0');
+        settingImagePreviewValueEl.textContent = value ? '[yes]' : '[no]';
+    }
 
-    imgPreviewEls[i].addEventListener('click', e => {
+    settingImagePreviewValueEl.addEventListener('click', e => {
         e.preventDefault();
+        settings.cycleValue('imagePreviews');
+        return false;
+    });
 
-        child.classList.add('faded');
+    settingImagePreviewCallback(settings.getValue('imagePreviews'), true);
+    settings.addCallback('imagePreviews', settingImagePreviewCallback);
+})();
 
-        if (child.classList.contains('expanded')) {
-            child.classList.remove('expanded');
-            child.src = thumbnailUrl;
-        } else {
-            child.classList.add('expanded');
-            child.src = imgPreviewEl.href;
-        }
-        
+(() => {
+    const modalEls = document.getElementsByClassName('modal');
+    let   i        = modalEls.length;
+    while (i--) {
+        const modalEl         = modalEls[i];
+        const modalContentEl  = modalEl.getElementsByClassName('modal__content')[0];
+        const modalCloseBtnEl = modalEl.getElementsByClassName('modal__close-btn')[0];
+
+        document.addEventListener('click', e => {
+            if (!modalEl.classList.contains('modal--visible')) {
+                return;
+            }
+            if (e.target !== modalContentEl && !modalContentEl.contains(e.target as Element)) {
+                modalEl.classList.remove('modal--visible');
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, true);
+
+        document.addEventListener('keydown', e => {
+            if (!modalEl.classList.contains('modal--visible')) {
+                return;
+            }
+            if (e.keyCode === 27) {
+                modalEl.classList.remove('modal--visible');
+            }
+        });
+
+        modalCloseBtnEl.addEventListener('click', e => {
+            e.preventDefault();
+            modalEl.classList.remove('modal--visible');
+            return false;
+        });
+    }
+
+    //
+
+    const settingsBtnEl   = document.getElementsByClassName('settings-btn')[0];
+    const settingsModalEl = document.getElementsByClassName('modal--settings')[0];
+
+    settingsBtnEl.addEventListener('click', e => {
+        e.preventDefault();
+        settingsModalEl.classList.add('modal--visible');
         return false;
     });
+})();
+
+function generateImageThumbnails() {
+    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
+    let   i          = linkImgEls.length;
+    while (i--) {
+        const linkImgEl    = linkImgEls[i] as HTMLAnchorElement;
+        const thumbnailUrl = linkImgEl.href.replace(/^(.*?)\/I/, '$1/T');
+
+        const lineBreakEl = document.createTextNode('\n');
+
+        const typeAnnotEl = document.createElement('span');
+        typeAnnotEl.classList.add('type-annotation');
+        typeAnnotEl.textContent = ' ->  ';
+
+        const thumbnailEl = document.createElement('img');
+        thumbnailEl.src = thumbnailUrl;
+        thumbnailEl.addEventListener('load', e => {
+            thumbnailEl.classList.remove('faded');
+        });    
+
+        const thumbnailAnchorEl = document.createElement('a');
+        thumbnailAnchorEl.classList.add('img-preview');
+        thumbnailAnchorEl.href = linkImgEl.href;
+        thumbnailAnchorEl.addEventListener('click', e => {
+            e.preventDefault();
+    
+            thumbnailEl.classList.add('faded');
+    
+            if (thumbnailEl.classList.contains('expanded')) {
+                thumbnailEl.classList.remove('expanded');
+                thumbnailEl.src = thumbnailUrl;
+            } else {
+                thumbnailEl.classList.add('expanded');
+                thumbnailEl.src = thumbnailAnchorEl.href;
+            }
+            
+            return false;
+        });
+
+        thumbnailAnchorEl.append(thumbnailEl);
+        linkImgEl.parentNode!.insertBefore(thumbnailAnchorEl, linkImgEl.nextSibling);
+        linkImgEl.parentNode!.insertBefore(typeAnnotEl, thumbnailAnchorEl);
+        linkImgEl.parentNode!.insertBefore(lineBreakEl, typeAnnotEl);
+    }
+}
+
+function removeImageThumbnails() {
+    const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF');
+    let   i          = linkImgEls.length;
+    while (i--) {
+        const linkImgEl = linkImgEls[i];
+        let   j = 3;
+        
+        while (j-- && linkImgEl.nextSibling) {
+            linkImgEl.nextSibling.remove();
+        }
+    }
 }
diff --git a/template.go b/template.go
index f5f4f2b..dfda36d 100644
--- a/template.go
+++ b/template.go
@@ -12,31 +12,38 @@ var tpltext = `<!doctype html>
     </style>
   </head>
   <body>
-    <header class="header">
-      {{- $href     := "" -}}
-      {{- $uriParts := split .URI "/" -}}
-      {{- $uriLast  := $uriParts | last -}}
-      {{- $uriParts  = $uriParts | pop -}}
-      {{- if eq $uriLast "" -}}
-        {{- $uriLast  = $uriParts | last -}}
-        {{- $uriParts = $uriParts | pop -}}
-      {{- end -}}
-      {{- if eq (len $uriParts) 1 -}}
-        {{- $uriLast  = $uriParts | last -}}
-        {{- $uriParts = $uriParts | pop -}}
-      {{- end -}}
+    <header class="header header-base">
+      <div class="location">
+        {{- $href     := "" -}}
+        {{- $uriParts := split .URI "/" -}}
+        {{- $uriLast  := $uriParts | last -}}
+        {{- $uriParts  = $uriParts | pop -}}
+        {{- if eq $uriLast "" -}}
+          {{- $uriLast  = $uriParts | last -}}
+          {{- $uriParts = $uriParts | pop -}}
+        {{- end -}}
+        {{- if eq (len $uriParts) 1 -}}
+          {{- $uriLast  = $uriParts | last -}}
+          {{- $uriParts = $uriParts | pop -}}
+        {{- end -}}
 
-      {{- range $i, $part := $uriParts -}}
-        {{- if ne $i 1 -}}
-          {{- $href = printf "%s/%s" $href . -}}
-          {{- if ne $i 0 }} / {{ end -}}
-          <a href="{{ $href }}" class="header__uripart">{{ . }}</a>
-        {{- else -}}
-          {{- $href = printf "%s/1" $href -}}
+        <button class="location__prefix">gopher://</button> {{ range $i, $part := $uriParts -}}
+          {{- if ne $i 1 -}}
+            {{- $href = printf "%s/%s" $href . -}}
+            {{- if ne $i 0 -}}
+              <span class="location__slash"> / </span>
+            {{- end -}}
+            <a href="{{ $href }}" class="location__uripart">{{ . }}</a>
+          {{- else -}}
+            {{- $href = printf "%s/1" $href -}}
+          {{- end -}}
+        {{- end -}}
+        {{- if ne (len $uriParts) 0 -}}
+          <span class="location__slash"> / </span>
         {{- end -}}
-      {{- end -}}
-      {{- if ne (len $uriParts) 0 }} / {{ end -}}
-      <span class="header__uripart header__uripart--last">{{ $uriLast -}}</span>
+        <span class="location__uripart">{{ $uriLast -}}</span>
+      </div>
+      <button class="settings-btn">Settings</button>
     </header>
     <main class="wrap">
       <pre class="content">
@@ -48,9 +55,6 @@ var tpltext = `<!doctype html>
             {{- end -}}
             {{- if .Link -}}
               {{- $content = printf "%s%s" $content (printf "<span class=\"type-annotation\">%s  </span><a class=\"link link--%s\" href=\"%s\">%s</a>" .Type .Type .Link (.Text | HTMLEscape)) -}}
-              {{- if or (eq .Type "IMG") (eq .Type "GIF") -}}
-                {{- $content = printf "%s\n%s" $content (printf "<span class=\"type-annotation\"> ->  </span><a class=\"img-preview\" href=\"%s\"><img src=\"%s\" /></a>" .Link (.Link | replace "^/(.*?)/I" "/$1/T")) -}}
-              {{- end -}}
             {{- else -}}
               {{- $content = printf "%s%s" $content (printf "     %s" (.Text | HTMLEscape)) -}}
             {{- end -}}
@@ -61,6 +65,18 @@ var tpltext = `<!doctype html>
         {{- end -}}
       </pre>
     </main>
+    <aside class="modal modal--settings">
+      <div class="modal__content">
+        <header class="modal__head header-base">
+          <h1 class="modal__title">Settings</h1>
+          <button class="modal__close-btn">Close</button>
+        </header>
+        <div class="setting setting--image-previews">
+          <strong class="setting__label">Image thumbnails</strong>
+          <button class="setting__value">[N/A]</button>
+        </div>
+      </div>
+    </aside>
     <script type="text/javascript">
       {{ .Script | safeJs }}
     </script>