diff options
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_card.scss | 3 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_project.scss | 9 |
3 files changed, 5 insertions, 9 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 37d4b0e..f444daf 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -50,7 +50,8 @@ | |||
50 | color: currentColor; | 50 | color: currentColor; |
51 | text-decoration: none; | 51 | text-decoration: none; |
52 | 52 | ||
53 | &:hover { | 53 | &:hover, |
54 | &:focus { | ||
54 | transform: translateY(#{prop(--dims --hover-offset)}); | 55 | transform: translateY(#{prop(--dims --hover-offset)}); |
55 | background-color: prop(--colors --hover --bg); | 56 | background-color: prop(--colors --hover --bg); |
56 | color: prop(--colors --hover --fg); | 57 | color: prop(--colors --hover --fg); |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index cf02d04..4e809a4 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -8,10 +8,10 @@ | |||
8 | 8 | ||
9 | @include component(namespace()) { | 9 | @include component(namespace()) { |
10 | display: flex; | 10 | display: flex; |
11 | position: relative; | ||
11 | align-items: center; | 12 | align-items: center; |
12 | justify-content: space-between; | 13 | justify-content: space-between; |
13 | height: prop(--dims --outer, $global: true); | 14 | height: prop(--dims --outer, $global: true); |
14 | font-size: 1 / 16 * 15em; | ||
15 | 15 | ||
16 | @include element('content') { | 16 | @include element('content') { |
17 | width: 100%; | 17 | width: 100%; |
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 580e70b..3df48d2 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss | |||
@@ -22,7 +22,8 @@ | |||
22 | color: currentColor; | 22 | color: currentColor; |
23 | text-decoration: none; | 23 | text-decoration: none; |
24 | 24 | ||
25 | &:hover { | 25 | &:hover, |
26 | &:focus { | ||
26 | @include element('picture') { | 27 | @include element('picture') { |
27 | opacity: .75; | 28 | opacity: .75; |
28 | filter: blur(0); | 29 | filter: blur(0); |
@@ -64,11 +65,5 @@ | |||
64 | max-width: calc(100% - 2em); | 65 | max-width: calc(100% - 2em); |
65 | box-shadow: 0 .8em 2.5em rgba(#000, .25); | 66 | box-shadow: 0 .8em 2.5em rgba(#000, .25); |
66 | } | 67 | } |
67 | |||
68 | @include media('<=sm') { | ||
69 | @include element('picture') { | ||
70 | mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em); | ||
71 | } | ||
72 | } | ||
73 | } | 68 | } |
74 | } | 69 | } |