summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_vars.scss2
-rw-r--r--assets/css/components/_footer.scss1
-rw-r--r--assets/css/components/_outer-button.scss7
-rw-r--r--assets/css/components/_project.scss55
-rw-r--r--assets/css/layouts/_card-grid.scss8
-rw-r--r--assets/css/layouts/_project-grid.scss17
-rw-r--r--assets/css/layouts/_section.scss7
-rw-r--r--assets/css/style.scss2
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