diff options
author | Volpeon <git@volpeon.ink> | 2021-04-20 21:45:36 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-20 21:45:36 +0200 |
commit | 269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f (patch) | |
tree | dece94a7b29ef36c98d322b8439e41d171fde0a8 /assets/css | |
parent | Update (diff) | |
download | volpeon.ink-269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f.tar.gz volpeon.ink-269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f.tar.bz2 volpeon.ink-269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f.zip |
Support project previews
Diffstat (limited to 'assets/css')
-rw-r--r-- | assets/css/_vars.scss | 2 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 1 | ||||
-rw-r--r-- | assets/css/components/_outer-button.scss | 7 | ||||
-rw-r--r-- | assets/css/components/_project.scss | 55 | ||||
-rw-r--r-- | assets/css/layouts/_card-grid.scss | 8 | ||||
-rw-r--r-- | assets/css/layouts/_project-grid.scss | 17 | ||||
-rw-r--r-- | assets/css/layouts/_section.scss | 7 | ||||
-rw-r--r-- | assets/css/style.scss | 2 |
8 files changed, 81 insertions, 18 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 756ddb8..52723a3 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -2,7 +2,7 @@ $breakpoints: ( | |||
2 | lg: 1500px, | 2 | lg: 1500px, |
3 | md: 900px, | 3 | md: 900px, |
4 | sm: 600px, | 4 | sm: 600px, |
5 | xs: 320px, | 5 | xs: 400px, |
6 | ); | 6 | ); |
7 | 7 | ||
8 | $unit-intervals: ( | 8 | $unit-intervals: ( |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index fcea457..cf02d04 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -11,7 +11,6 @@ | |||
11 | align-items: center; | 11 | align-items: center; |
12 | justify-content: space-between; | 12 | justify-content: space-between; |
13 | height: prop(--dims --outer, $global: true); | 13 | height: prop(--dims --outer, $global: true); |
14 | padding-right: prop(--dims --outer, $global: true); | ||
15 | font-size: 1 / 16 * 15em; | 14 | font-size: 1 / 16 * 15em; |
16 | 15 | ||
17 | @include element('content') { | 16 | @include element('content') { |
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index d636f7d..4e7a242 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss | |||
@@ -27,13 +27,6 @@ | |||
27 | font-weight: 450; | 27 | font-weight: 450; |
28 | text-decoration: none; | 28 | text-decoration: none; |
29 | 29 | ||
30 | @include modifier('scroll-top') { | ||
31 | position: fixed; | ||
32 | z-index: 9000; | ||
33 | right: 0; | ||
34 | bottom: 0; | ||
35 | } | ||
36 | |||
37 | @include modifier('inverted') { | 30 | @include modifier('inverted') { |
38 | background-color: prop(--colors --inverted --bg); | 31 | background-color: prop(--colors --inverted --bg); |
39 | color: prop(--colors --inverted --fg); | 32 | color: prop(--colors --inverted --fg); |
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss new file mode 100644 index 0000000..943bf68 --- /dev/null +++ b/assets/css/components/_project.scss | |||
@@ -0,0 +1,55 @@ | |||
1 | @include namespace('project') { | ||
2 | @include store(( | ||
3 | --colors: ( | ||
4 | --bg: prop(--colors --bg-hi, $global: true), | ||
5 | ) | ||
6 | )); | ||
7 | |||
8 | @include component(namespace()) { | ||
9 | position: relative; | ||
10 | |||
11 | &::before { | ||
12 | content: ''; | ||
13 | display: block; | ||
14 | padding-bottom: 20em; | ||
15 | background-color: prop(--colors --bg); | ||
16 | } | ||
17 | |||
18 | &::after { | ||
19 | content: ''; | ||
20 | background-image: linear-gradient(340deg, rgba(#000, .85) 5em, transparent 100%); | ||
21 | } | ||
22 | |||
23 | @include multi('element' 'picture', '&::after') { | ||
24 | display: block; | ||
25 | position: absolute; | ||
26 | z-index: 10; | ||
27 | top: 0; | ||
28 | left: 0; | ||
29 | width: 100%; | ||
30 | height: 100%; | ||
31 | object-fit: cover; | ||
32 | object-position: center center; | ||
33 | } | ||
34 | |||
35 | @include element('card') { | ||
36 | position: absolute; | ||
37 | z-index: 20; | ||
38 | right: 1em; | ||
39 | bottom: 1em; | ||
40 | min-width: 15em; | ||
41 | box-shadow: 0 .3em 1em rgba(#000, .5); | ||
42 | } | ||
43 | |||
44 | @include media('<=sm') { | ||
45 | &::after { | ||
46 | background-image: linear-gradient(to top, rgba(#000, .85) 5em, transparent 100%); | ||
47 | } | ||
48 | |||
49 | @include element('card') { | ||
50 | left: 1em; | ||
51 | min-width: 0; | ||
52 | } | ||
53 | } | ||
54 | } | ||
55 | } | ||
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index cbc4388..7c8ad8c 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss | |||
@@ -1,13 +1,17 @@ | |||
1 | @include namespace('card-grid') { | 1 | @include namespace('card-grid') { |
2 | @include store(( | 2 | @include store(( |
3 | --dims: ( | 3 | --dims: ( |
4 | --card-width: 17em | 4 | --col-width: 17em |
5 | ) | 5 | ) |
6 | )); | 6 | )); |
7 | 7 | ||
8 | @include layout(namespace()) { | 8 | @include layout(namespace()) { |
9 | display: grid; | 9 | display: grid; |
10 | grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr)); | 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); |
11 | gap: .6rem; | 11 | gap: .6rem; |
12 | |||
13 | @include media('<=sm') { | ||
14 | grid-template-columns: 1fr; | ||
15 | } | ||
12 | } | 16 | } |
13 | } | 17 | } |
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss new file mode 100644 index 0000000..df2952b --- /dev/null +++ b/assets/css/layouts/_project-grid.scss | |||
@@ -0,0 +1,17 @@ | |||
1 | @include namespace('project-grid') { | ||
2 | @include store(( | ||
3 | --dims: ( | ||
4 | --col-width: 26em | ||
5 | ) | ||
6 | )); | ||
7 | |||
8 | @include layout(namespace()) { | ||
9 | display: grid; | ||
10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
11 | gap: 1rem; | ||
12 | |||
13 | @include media('<=sm') { | ||
14 | grid-template-columns: 1fr; | ||
15 | } | ||
16 | } | ||
17 | } | ||
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 70ace4c..51e3dc8 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
@@ -25,7 +25,6 @@ | |||
25 | left: 0; | 25 | left: 0; |
26 | flex-direction: row; | 26 | flex-direction: row; |
27 | justify-self: flex-start; | 27 | justify-self: flex-start; |
28 | padding-right: prop(--dims --outer, $global: true); | ||
29 | font-size: 1 / 16 * 15em; | 28 | font-size: 1 / 16 * 15em; |
30 | 29 | ||
31 | &::after { | 30 | &::after { |
@@ -38,11 +37,5 @@ | |||
38 | border-top: 1px solid prop(--colors --border); | 37 | border-top: 1px solid prop(--colors --border); |
39 | } | 38 | } |
40 | } | 39 | } |
41 | |||
42 | @include media('<=sm') { | ||
43 | @include element('head') { | ||
44 | padding-right: 0; | ||
45 | } | ||
46 | } | ||
47 | } | 40 | } |
48 | } | 41 | } |
diff --git a/assets/css/style.scss b/assets/css/style.scss index 1d19aae..958710c 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss | |||
@@ -13,6 +13,7 @@ | |||
13 | @import 'layouts/section'; | 13 | @import 'layouts/section'; |
14 | @import 'layouts/landing'; | 14 | @import 'layouts/landing'; |
15 | @import 'layouts/card-grid'; | 15 | @import 'layouts/card-grid'; |
16 | @import 'layouts/project-grid'; | ||
16 | 17 | ||
17 | @import 'objects/icon'; | 18 | @import 'objects/icon'; |
18 | @import 'objects/button'; | 19 | @import 'objects/button'; |
@@ -22,6 +23,7 @@ | |||
22 | @import 'components/landing-banner'; | 23 | @import 'components/landing-banner'; |
23 | @import 'components/footer'; | 24 | @import 'components/footer'; |
24 | @import 'components/card'; | 25 | @import 'components/card'; |
26 | @import 'components/project'; | ||
25 | 27 | ||
26 | @import 'scopes/body'; | 28 | @import 'scopes/body'; |
27 | 29 | ||