diff options
| author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2019-10-01 21:35:51 -0700 |
|---|---|---|
| committer | Bastien Wirtz <bastien.wirtz@gmail.com> | 2019-10-01 21:40:45 -0700 |
| commit | 5323df4a32ca9b81fa598c0ca988596d93afe713 (patch) | |
| tree | f6a7caacb2b44621839265ffa5edc9ec7dc9c952 /app.css | |
| parent | bf35e3391223659f5ad8f56dc406b85289e915ce (diff) | |
| download | homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.gz homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.zst homer-5323df4a32ca9b81fa598c0ca988596d93afe713.zip | |
Implementing dark mode
Diffstat (limited to 'app.css')
| -rw-r--r-- | app.css | 90 |
1 files changed, 83 insertions, 7 deletions
| @@ -3,8 +3,86 @@ html { | |||
| 3 | 3 | ||
| 4 | body { | 4 | body { |
| 5 | font-family: 'Raleway', sans-serif; | 5 | font-family: 'Raleway', sans-serif; |
| 6 | background-color: #F5F5F5; | 6 | height: 100%; } |
| 7 | min-height: 100%; } | 7 | body #app { |
| 8 | min-height: 100%; | ||
| 9 | transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; | ||
| 10 | background-color: #f5f5f5; | ||
| 11 | color: #363636; } | ||
| 12 | body #app .title { | ||
| 13 | color: #303030; } | ||
| 14 | body #app .subtitle { | ||
| 15 | color: #424242; } | ||
| 16 | body #app .card { | ||
| 17 | background-color: #ffffff; | ||
| 18 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } | ||
| 19 | body #app .card:hover { | ||
| 20 | background-color: #ffffff; } | ||
| 21 | body #app .footer { | ||
| 22 | background-color: #ffffff; | ||
| 23 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } | ||
| 24 | @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { | ||
| 25 | body #app { | ||
| 26 | background-color: #f5f5f5; | ||
| 27 | color: #363636; } | ||
| 28 | body #app .title { | ||
| 29 | color: #303030; } | ||
| 30 | body #app .subtitle { | ||
| 31 | color: #424242; } | ||
| 32 | body #app .card { | ||
| 33 | background-color: #ffffff; | ||
| 34 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } | ||
| 35 | body #app .card:hover { | ||
| 36 | background-color: #ffffff; } | ||
| 37 | body #app .footer { | ||
| 38 | background-color: #ffffff; | ||
| 39 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } } | ||
| 40 | @media (prefers-color-scheme: dark) { | ||
| 41 | body #app { | ||
| 42 | background-color: #131313; | ||
| 43 | color: #eaeaea; } | ||
| 44 | body #app .title { | ||
| 45 | color: #fafafa; } | ||
| 46 | body #app .subtitle { | ||
| 47 | color: #f5f5f5; } | ||
| 48 | body #app .card { | ||
| 49 | background-color: #2b2b2b; | ||
| 50 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } | ||
| 51 | body #app .card:hover { | ||
| 52 | background-color: #2b2b2b; } | ||
| 53 | body #app .footer { | ||
| 54 | background-color: #2b2b2b; | ||
| 55 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } } | ||
| 56 | body #app.is-light { | ||
| 57 | background-color: #f5f5f5; | ||
| 58 | color: #363636; } | ||
| 59 | body #app.is-light .title { | ||
| 60 | color: #303030; } | ||
| 61 | body #app.is-light .subtitle { | ||
| 62 | color: #424242; } | ||
| 63 | body #app.is-light .card { | ||
| 64 | background-color: #ffffff; | ||
| 65 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } | ||
| 66 | body #app.is-light .card:hover { | ||
| 67 | background-color: #ffffff; } | ||
| 68 | body #app.is-light .footer { | ||
| 69 | background-color: #ffffff; | ||
| 70 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } | ||
| 71 | body #app.is-dark { | ||
| 72 | background-color: #131313; | ||
| 73 | color: #eaeaea; } | ||
| 74 | body #app.is-dark .title { | ||
| 75 | color: #fafafa; } | ||
| 76 | body #app.is-dark .subtitle { | ||
| 77 | color: #f5f5f5; } | ||
| 78 | body #app.is-dark .card { | ||
| 79 | background-color: #2b2b2b; | ||
| 80 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } | ||
| 81 | body #app.is-dark .card:hover { | ||
| 82 | background-color: #2b2b2b; } | ||
| 83 | body #app.is-dark .footer { | ||
| 84 | background-color: #2b2b2b; | ||
| 85 | box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } | ||
| 8 | body h1, body h2, body h3, body h4, body h5, body h6 { | 86 | body h1, body h2, body h3, body h4, body h5, body h6 { |
| 9 | font-family: 'Lato', sans-serif; } | 87 | font-family: 'Lato', sans-serif; } |
| 10 | body h1 { | 88 | body h1 { |
| @@ -54,7 +132,7 @@ body { | |||
| 54 | body #bighead .navbar a:hover { | 132 | body #bighead .navbar a:hover { |
| 55 | background-color: #5a95f5; } | 133 | background-color: #5a95f5; } |
| 56 | body #main-section { | 134 | body #main-section { |
| 57 | margin-bottom: 3rem; | 135 | margin-bottom: 2rem; |
| 58 | padding: 0; } | 136 | padding: 0; } |
| 59 | body #main-section h2 { | 137 | body #main-section h2 { |
| 60 | border-bottom: 1px dashed #ccc; | 138 | border-bottom: 1px dashed #ccc; |
| @@ -95,7 +173,6 @@ body { | |||
| 95 | body .card a { | 173 | body .card a { |
| 96 | outline: none; } | 174 | outline: none; } |
| 97 | body .card:hover { | 175 | body .card:hover { |
| 98 | background-color: #FFFFFF; | ||
| 99 | transform: translate(0, -3px); } | 176 | transform: translate(0, -3px); } |
| 100 | body .card:hover .tag { | 177 | body .card:hover .tag { |
| 101 | width: auto; | 178 | width: auto; |
| @@ -117,10 +194,9 @@ body { | |||
| 117 | bottom: 0; | 194 | bottom: 0; |
| 118 | padding: 0.5rem; | 195 | padding: 0.5rem; |
| 119 | text-align: left; | 196 | text-align: left; |
| 120 | background-color: #fafafa; | ||
| 121 | border-top: 1px solid #F5F5F5; | ||
| 122 | color: #676767; | 197 | color: #676767; |
| 123 | font-size: 0.85rem; } | 198 | font-size: 0.85rem; |
| 199 | transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; } | ||
| 124 | body .search-bar { | 200 | body .search-bar { |
| 125 | position: relative; | 201 | position: relative; |
| 126 | display: inline-block; } | 202 | display: inline-block; } |