diff options
| author | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-23 17:29:07 +0200 |
|---|---|---|
| committer | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-23 17:29:07 +0200 |
| commit | c448abd99a470e1ec541027077dcdef0745270d8 (patch) | |
| tree | 433def56b6f0e81457cbe39fc85f402a9e4e18a8 /css | |
| parent | Check type instead of file ext to render text via tpl (diff) | |
| download | gopherproxy-c448abd99a470e1ec541027077dcdef0745270d8.tar.gz gopherproxy-c448abd99a470e1ec541027077dcdef0745270d8.tar.bz2 gopherproxy-c448abd99a470e1ec541027077dcdef0745270d8.zip | |
Show expandable thumbnails for images
Diffstat (limited to 'css')
| -rw-r--r-- | css/main.scss | 58 |
1 files changed, 46 insertions, 12 deletions
diff --git a/css/main.scss b/css/main.scss index d0646d7..0d5a5d9 100644 --- a/css/main.scss +++ b/css/main.scss | |||
| @@ -10,6 +10,12 @@ $border: mix(hsl(210, 100%, 95%), $background, 16%); | |||
| 10 | $sel-background: rgba($accent, .996); | 10 | $sel-background: rgba($accent, .996); |
| 11 | $sel-text: #000; | 11 | $sel-text: #000; |
| 12 | 12 | ||
| 13 | @mixin monospace-font { | ||
| 14 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | ||
| 15 | font-size: 1 / 16 * 17em; | ||
| 16 | line-height: 1.5; | ||
| 17 | } | ||
| 18 | |||
| 13 | @font-face { | 19 | @font-face { |
| 14 | font-family: 'Iosevka Term SS03'; | 20 | font-family: 'Iosevka Term SS03'; |
| 15 | font-style: normal; | 21 | font-style: normal; |
| @@ -31,6 +37,35 @@ body { | |||
| 31 | color: $text; | 37 | color: $text; |
| 32 | } | 38 | } |
| 33 | 39 | ||
| 40 | button { | ||
| 41 | @include monospace-font; | ||
| 42 | |||
| 43 | background: none; | ||
| 44 | border: 0; | ||
| 45 | padding: 0; | ||
| 46 | color: $text-plus; | ||
| 47 | } | ||
| 48 | |||
| 49 | img { | ||
| 50 | display: inline-block; | ||
| 51 | vertical-align: top; | ||
| 52 | max-width: 8em; | ||
| 53 | margin: .1em 0; | ||
| 54 | |||
| 55 | &::selection { | ||
| 56 | background-color: rgba($sel-background, .35); | ||
| 57 | } | ||
| 58 | |||
| 59 | &.expanded { | ||
| 60 | max-width: 40em; | ||
| 61 | max-width: 80ch; | ||
| 62 | } | ||
| 63 | |||
| 64 | &.faded { | ||
| 65 | opacity: .5; | ||
| 66 | } | ||
| 67 | } | ||
| 68 | |||
| 34 | ::selection { | 69 | ::selection { |
| 35 | color: $sel-text; | 70 | color: $sel-text; |
| 36 | background-color: $sel-background; | 71 | background-color: $sel-background; |
| @@ -51,10 +86,10 @@ body { | |||
| 51 | // } | 86 | // } |
| 52 | 87 | ||
| 53 | .header { | 88 | .header { |
| 89 | @include monospace-font; | ||
| 90 | |||
| 54 | padding: .9em 1em; | 91 | padding: .9em 1em; |
| 55 | border-bottom: 1px solid $border; | 92 | border-bottom: 1px solid $border; |
| 56 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | ||
| 57 | font-size: 1 / 16 * 17em; | ||
| 58 | line-height: 1.3; | 93 | line-height: 1.3; |
| 59 | color: $text-faint; | 94 | color: $text-faint; |
| 60 | } | 95 | } |
| @@ -72,17 +107,16 @@ body { | |||
| 72 | } | 107 | } |
| 73 | 108 | ||
| 74 | .content { | 109 | .content { |
| 75 | display: inline-block; | 110 | @include monospace-font; |
| 76 | min-width: 50em; | 111 | |
| 77 | min-width: 5ch + 80; | 112 | display: inline-block; |
| 78 | margin: 0; | 113 | min-width: 50em; |
| 79 | padding: 2em 1em; | 114 | min-width: 5ch + 80; |
| 80 | text-align: left; | 115 | margin: 0; |
| 81 | font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; | 116 | padding: 2em 1em; |
| 82 | font-size: 1 / 16 * 17em; | 117 | text-align: left; |
| 83 | line-height: 1.5; | ||
| 84 | } | 118 | } |
| 85 | 119 | ||
| 86 | .link-type { | 120 | .type-annotation { |
| 87 | color: $text-minus; | 121 | color: $text-minus; |
| 88 | } | 122 | } |