aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFeuerfuchs <git@feuerfuchs.dev>2019-06-25 14:24:13 +0200
committerFeuerfuchs <git@feuerfuchs.dev>2019-06-25 14:24:13 +0200
commitafd92d3654df08586892c831ac58f75350b0e54b (patch)
tree91c2598d485df9b67f2bc4eb8b0b3ddf22ad7725
parentSmall design fix (diff)
downloadgopherproxy-afd92d3654df08586892c831ac58f75350b0e54b.tar.gz
gopherproxy-afd92d3654df08586892c831ac58f75350b0e54b.tar.bz2
gopherproxy-afd92d3654df08586892c831ac58f75350b0e54b.zip
Minor design improvements
-rw-r--r--assets/style.css2
-rw-r--r--css/main.scss39
-rw-r--r--template.go9
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>