diff options
author | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-25 17:57:19 +0200 |
---|---|---|
committer | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-25 17:57:19 +0200 |
commit | 487e80adc7823b4fb91b660ec58b56e2adaaa7bb (patch) | |
tree | 245ad438df36075c51cf8a59f46f257d9633fcd3 | |
parent | Wrap content on smaller screens (diff) | |
download | gopherproxy-487e80adc7823b4fb91b660ec58b56e2adaaa7bb.tar.gz gopherproxy-487e80adc7823b4fb91b660ec58b56e2adaaa7bb.tar.bz2 gopherproxy-487e80adc7823b4fb91b660ec58b56e2adaaa7bb.zip |
Improved wrapping behavior
-rw-r--r-- | assets/style.css | 2 | ||||
-rw-r--r-- | css/main.scss | 29 | ||||
-rw-r--r-- | template.go | 4 |
3 files changed, 23 insertions, 12 deletions
diff --git a/assets/style.css b/assets/style.css index c3986cc..beb888d 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-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:0;max-width:100%;margin:0;padding:2em 1em;text-align:left;font:inherit;white-space:pre-wrap}.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}} | @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{padding:2em 1em;text-align:center}.content{box-sizing:border-box;display:inline-block;min-width:0;max-width:100%;margin:0;padding:0;text-align:left;font:inherit;white-space:pre-wrap;word-wrap:break-word}.content--has-type-annotations{padding-left:3em;padding-left:5ch}.type-annotation{margin-left:-3em;margin-left:-5ch;color:#929ba3;white-space:pre}.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 418f483..4341ca3 100644 --- a/css/main.scss +++ b/css/main.scss | |||
@@ -177,26 +177,37 @@ strong { | |||
177 | // | 177 | // |
178 | 178 | ||
179 | .wrap { | 179 | .wrap { |
180 | padding: 2em 1em; | ||
180 | text-align: center; | 181 | text-align: center; |
181 | } | 182 | } |
182 | 183 | ||
183 | .content { | 184 | .content { |
184 | display: inline-block; | 185 | box-sizing: border-box; |
186 | display: inline-block; | ||
185 | //min-width: 50em; | 187 | //min-width: 50em; |
186 | //min-width: 5ch + 80; | 188 | //min-width: 5ch + 80; |
187 | min-width: 0; | 189 | min-width: 0; |
188 | max-width: 100%; | 190 | max-width: 100%; |
189 | margin: 0; | 191 | margin: 0; |
190 | padding: 2em 1em; | 192 | padding: 0; |
191 | text-align: left; | 193 | text-align: left; |
192 | font: inherit; | 194 | font: inherit; |
193 | white-space: pre-wrap; | 195 | white-space: pre-wrap; |
196 | word-wrap: break-word; | ||
197 | |||
198 | &--has-type-annotations { | ||
199 | padding-left: 3em; | ||
200 | padding-left: 5ch; | ||
201 | } | ||
194 | } | 202 | } |
195 | 203 | ||
196 | // | 204 | // |
197 | 205 | ||
198 | .type-annotation { | 206 | .type-annotation { |
199 | color: $text-minus; | 207 | margin-left: -3em; |
208 | margin-left: -5ch; | ||
209 | color: $text-minus; | ||
210 | white-space: pre; | ||
200 | } | 211 | } |
201 | 212 | ||
202 | // | 213 | // |
diff --git a/template.go b/template.go index cdef279..93777b2 100644 --- a/template.go +++ b/template.go | |||
@@ -50,7 +50,7 @@ var tpltext = `<!doctype html> | |||
50 | </div> | 50 | </div> |
51 | </header> | 51 | </header> |
52 | <main class="wrap"> | 52 | <main class="wrap"> |
53 | <pre class="content"> | 53 | <pre class="content{{ if .Lines }} content--has-type-annotations{{ end }}"> |
54 | {{- if .Lines -}} | 54 | {{- if .Lines -}} |
55 | {{- $content := "" -}} | 55 | {{- $content := "" -}} |
56 | {{- range .Lines -}} | 56 | {{- range .Lines -}} |
@@ -60,7 +60,7 @@ var tpltext = `<!doctype html> | |||
60 | {{- if .Link -}} | 60 | {{- if .Link -}} |
61 | {{- $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)) -}} | 61 | {{- $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)) -}} |
62 | {{- else -}} | 62 | {{- else -}} |
63 | {{- $content = printf "%s%s" $content (printf " %s" (.Text | HTMLEscape)) -}} | 63 | {{- $content = printf "%s%s" $content (printf "<span class=\"type-annotation\"> </span>%s" (.Text | HTMLEscape)) -}} |
64 | {{- end -}} | 64 | {{- end -}} |
65 | {{- end -}} | 65 | {{- end -}} |
66 | {{- $content | safeHtml -}} | 66 | {{- $content | safeHtml -}} |