aboutsummaryrefslogtreecommitdiffhomepage
path: root/app.scss
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2019-11-12 08:23:44 -0800
committerGitHub <noreply@github.com>2019-11-12 08:23:44 -0800
commit05bdc2680193564dbb8acbd85aa8d79eeec546f5 (patch)
treee3789186c38674cc94a29d72684d9413630bb5a7 /app.scss
parent8aa8398fba4916ced1b793a7ca7e8574fc7ff98e (diff)
parent7312bdd6bc5b57349a72402077f9ed6da332be6c (diff)
downloadhomer-05bdc2680193564dbb8acbd85aa8d79eeec546f5.tar.gz
homer-05bdc2680193564dbb8acbd85aa8d79eeec546f5.tar.zst
homer-05bdc2680193564dbb8acbd85aa8d79eeec546f5.zip
Merge pull request #5 from pdevq/master
Styling Tags - Search Bar Icon Fix - Dark Theme Link Hover Text
Diffstat (limited to 'app.scss')
-rw-r--r--app.scss25
1 files changed, 21 insertions, 4 deletions
diff --git a/app.scss b/app.scss
index d4d2099..defd931 100644
--- a/app.scss
+++ b/app.scss
@@ -9,7 +9,8 @@ $theme-light: (
9 text: #363636, 9 text: #363636,
10 text-title: #303030, 10 text-title: #303030,
11 text-subtitle: #424242, 11 text-subtitle: #424242,
12 card-shadow: rgba(0, 0, 0, 0.1) 12 card-shadow: rgba(0, 0, 0, 0.1),
13 a-hover: #363636
13); 14);
14$theme-dark: ( 15$theme-dark: (
15 background: #131313, 16 background: #131313,
@@ -17,7 +18,8 @@ $theme-dark: (
17 text: #eaeaea, 18 text: #eaeaea,
18 text-title: #fafafa, 19 text-title: #fafafa,
19 text-subtitle: #f5f5f5, 20 text-subtitle: #f5f5f5,
20 card-shadow: rgba(0, 0, 0, 0.4) 21 card-shadow: rgba(0, 0, 0, 0.4),
22 a-hover: #ffdd57
21); 23);
22 24
23 25
@@ -25,7 +27,12 @@ $theme-dark: (
25@mixin theme($theme) { 27@mixin theme($theme) {
26 background-color: map-get($theme, "background"); 28 background-color: map-get($theme, "background");
27 color: map-get($theme, "text"); 29 color: map-get($theme, "text");
28 30 a {
31 &:hover {
32 color: map-get($theme, "a-hover");
33 }
34 }
35
29 .title { 36 .title {
30 color: map-get($theme, "text-title"); 37 color: map-get($theme, "text-title");
31 } 38 }
@@ -154,6 +161,7 @@ body {
154 a { 161 a {
155 color: #ffffff; 162 color: #ffffff;
156 &:hover { 163 &:hover {
164 color: #ffffff;
157 background-color: lighten( $secondary-color, 5% ); 165 background-color: lighten( $secondary-color, 5% );
158 } 166 }
159 } 167 }
@@ -212,6 +220,10 @@ body {
212 overflow: hidden; 220 overflow: hidden;
213 transition: all 0.2s ease-out; 221 transition: all 0.2s ease-out;
214 padding: 0; 222 padding: 0;
223
224 .tag-text {
225 display: none;
226 }
215 } 227 }
216 228
217 .card { 229 .card {
@@ -232,6 +244,10 @@ body {
232 width: auto; 244 width: auto;
233 color: #ffffff; 245 color: #ffffff;
234 padding: 0 0.75em; 246 padding: 0 0.75em;
247
248 .tag-text {
249 display: block;
250 }
235 } 251 }
236 } 252 }
237 253
@@ -289,11 +305,12 @@ body {
289 } 305 }
290 306
291 .search-label::before { 307 .search-label::before {
292 font-family: 'FontAwesome'; 308 font-family: 'Font Awesome 5 Free';
293 position: absolute; 309 position: absolute;
294 top: 12px; 310 top: 12px;
295 left: 8px; 311 left: 8px;
296 content: "\f002"; 312 content: "\f002";
313 font-weight: 900;
297 width: 20px; 314 width: 20px;
298 height: 20px; 315 height: 20px;
299 } 316 }