diff options
| -rw-r--r-- | assets/style.css | 2 | ||||
| -rw-r--r-- | css/main.scss | 39 | ||||
| -rw-r--r-- | template.go | 9 |
3 files changed, 38 insertions, 12 deletions
diff --git a/assets/style.css b/assets/style.css index f02e070..5289287 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;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;border-bottom:1px solid #353a3f}.header{padding:.9em 1em;color:#5d646a}.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:link:hover,.location__uripart:visited: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{padding-bottom:.75em;margin-bottom:1.5em}.modal__title{padding-right:1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-transform:uppercase}.setting{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between}.setting::after{order:2;flex:0 99999 auto;display:block;width:100%;height:0;margin:0 .5em;border-bottom:2px dotted #353a3f;content:''}.setting__label{order:1}.setting__value{order:3}#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}} | @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-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid #353a3f}.header{padding:.9em 1em;color:#5d646a}.location{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5em;color:#5d646a}.location__prefix{margin-right:.3em;color:#5d646a}.location__prefix:hover{color:#fff}.location__slash{margin:0 .3em}.location__uripart{color:#fff}.location__uripart+.location__slash+.location__uripart{color:#cad1d8}.location__uripart:link:hover,.location__uripart:visited:hover{color:#fff}.actions{flex:0 0 auto}.actions :visited{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{padding-bottom:.75em;margin-bottom:1.5em}.modal__title{padding-right:1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-transform:uppercase}.setting{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between}.setting::after{order:2;flex:1 1 auto;display:block;height:0;margin:0 .5em;border-bottom:2px dotted #353a3f;content:''}.setting__label{order:1}.setting__value{order:3}#none{position:fixed;top:0;left:0;width:0;height:0}@media screen and (max-width: 800px){body{font-size:1em}.modal{padding:1em}.modal__content{padding:1em 1.3em}}@media screen and (max-width: 500px){.location__prefix{display:none}} | ||
diff --git a/css/main.scss b/css/main.scss index 7d673f6..72500d2 100644 --- a/css/main.scss +++ b/css/main.scss | |||
| @@ -112,7 +112,7 @@ strong { | |||
| 112 | 112 | ||
| 113 | .header-base { | 113 | .header-base { |
| 114 | display: flex; | 114 | display: flex; |
| 115 | flex-flow: row wrap; | 115 | flex-direction: row; |
| 116 | align-items: center; | 116 | align-items: center; |
| 117 | justify-content: space-between; | 117 | justify-content: space-between; |
| 118 | border-bottom: 1px solid $border; | 118 | border-bottom: 1px solid $border; |
| @@ -128,16 +128,26 @@ strong { | |||
| 128 | // | 128 | // |
| 129 | 129 | ||
| 130 | .location { | 130 | .location { |
| 131 | color: $text-faint; | 131 | flex: 0 1 auto; |
| 132 | overflow: hidden; | ||
| 133 | white-space: nowrap; | ||
| 134 | text-overflow: ellipsis; | ||
| 135 | margin-right: .5em; | ||
| 136 | color: $text-faint; | ||
| 132 | 137 | ||
| 133 | &__prefix { | 138 | &__prefix { |
| 134 | color: $text-faint; | 139 | margin-right: .3em; |
| 140 | color: $text-faint; | ||
| 135 | 141 | ||
| 136 | &:hover { | 142 | &:hover { |
| 137 | color: $text-plus; | 143 | color: $text-plus; |
| 138 | } | 144 | } |
| 139 | } | 145 | } |
| 140 | 146 | ||
| 147 | &__slash { | ||
| 148 | margin: 0 .3em; | ||
| 149 | } | ||
| 150 | |||
| 141 | &__uripart { | 151 | &__uripart { |
| 142 | color: $text-plus; | 152 | color: $text-plus; |
| 143 | 153 | ||
| @@ -156,6 +166,16 @@ strong { | |||
| 156 | 166 | ||
| 157 | // | 167 | // |
| 158 | 168 | ||
| 169 | .actions { | ||
| 170 | flex: 0 0 auto; | ||
| 171 | |||
| 172 | :visited { | ||
| 173 | color: $link-idle; | ||
| 174 | } | ||
| 175 | } | ||
| 176 | |||
| 177 | // | ||
| 178 | |||
| 159 | .wrap { | 179 | .wrap { |
| 160 | text-align: center; | 180 | text-align: center; |
| 161 | } | 181 | } |
| @@ -227,9 +247,8 @@ strong { | |||
| 227 | 247 | ||
| 228 | &::after { | 248 | &::after { |
| 229 | order: 2; | 249 | order: 2; |
| 230 | flex: 0 99999 auto; | 250 | flex: 1 1 auto; |
| 231 | display: block; | 251 | display: block; |
| 232 | width: 100%; | ||
| 233 | height: 0; | 252 | height: 0; |
| 234 | margin: 0 .5em; | 253 | margin: 0 .5em; |
| 235 | border-bottom: 2px dotted $border; | 254 | border-bottom: 2px dotted $border; |
| @@ -258,8 +277,8 @@ strong { | |||
| 258 | // | 277 | // |
| 259 | 278 | ||
| 260 | @media screen and (max-width: 800px) { | 279 | @media screen and (max-width: 800px) { |
| 261 | .location__uripart ~ * { | 280 | body { |
| 262 | display: none; | 281 | font-size: 1em; |
| 263 | } | 282 | } |
| 264 | 283 | ||
| 265 | .modal { | 284 | .modal { |
| @@ -270,3 +289,9 @@ strong { | |||
| 270 | padding: 1em 1.3em; | 289 | padding: 1em 1.3em; |
| 271 | } | 290 | } |
| 272 | } | 291 | } |
| 292 | |||
| 293 | @media screen and (max-width: 500px) { | ||
| 294 | .location__prefix { | ||
| 295 | display: none; | ||
| 296 | } | ||
| 297 | } | ||
diff --git a/template.go b/template.go index ac7f674..cdef279 100644 --- a/template.go +++ b/template.go | |||
| @@ -27,11 +27,12 @@ var tpltext = `<!doctype html> | |||
| 27 | {{- $uriParts = $uriParts | pop -}} | 27 | {{- $uriParts = $uriParts | pop -}} |
| 28 | {{- end -}} | 28 | {{- end -}} |
| 29 | 29 | ||
| 30 | <button class="location__prefix">gopher://</button> {{ range $i, $part := $uriParts -}} | 30 | <button class="location__prefix">gopher://</button> |
| 31 | {{- range $i, $part := $uriParts -}} | ||
| 31 | {{- if ne $i 1 -}} | 32 | {{- if ne $i 1 -}} |
| 32 | {{- $href = printf "%s/%s" $href . -}} | 33 | {{- $href = printf "%s/%s" $href . -}} |
| 33 | {{- if ne $i 0 -}} | 34 | {{- if ne $i 0 -}} |
| 34 | <span class="location__slash"> / </span> | 35 | <span class="location__slash">/</span> |
| 35 | {{- end -}} | 36 | {{- end -}} |
| 36 | <a href="{{ $href }}" class="location__uripart">{{ . }}</a> | 37 | <a href="{{ $href }}" class="location__uripart">{{ . }}</a> |
| 37 | {{- else -}} | 38 | {{- else -}} |
| @@ -39,11 +40,11 @@ var tpltext = `<!doctype html> | |||
| 39 | {{- end -}} | 40 | {{- end -}} |
| 40 | {{- end -}} | 41 | {{- end -}} |
| 41 | {{- if ne (len $uriParts) 0 -}} | 42 | {{- if ne (len $uriParts) 0 -}} |
| 42 | <span class="location__slash"> / </span> | 43 | <span class="location__slash">/</span> |
| 43 | {{- end -}} | 44 | {{- end -}} |
| 44 | <span class="location__uripart">{{ $uriLast -}}</span> | 45 | <span class="location__uripart">{{ $uriLast -}}</span> |
| 45 | </div> | 46 | </div> |
| 46 | <div> | 47 | <div class="actions"> |
| 47 | {{- if not .Lines }}<a href="/{{ .URI | replace "^(.*?)/0" "$1/9" }}">View raw</a> | {{ end -}} | 48 | {{- if not .Lines }}<a href="/{{ .URI | replace "^(.*?)/0" "$1/9" }}">View raw</a> | {{ end -}} |
| 48 | <button class="settings-btn">Settings</button> | 49 | <button class="settings-btn">Settings</button> |
| 49 | </div> | 50 | </div> |
