summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/_utils.scss2
-rw-r--r--assets/css/_vars.scss28
-rw-r--r--assets/css/components/_card.scss2
-rw-r--r--assets/css/components/_footer.scss4
-rw-r--r--assets/css/components/_header.scss (renamed from assets/css/components/_logo.scss)13
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_outer-button.scss31
-rw-r--r--assets/css/components/_section-heading.scss29
-rw-r--r--assets/css/layouts/_landing.scss4
-rw-r--r--assets/css/layouts/_section.scss28
-rw-r--r--assets/css/scopes/_body.scss26
-rw-r--r--assets/css/style.scss3
12 files changed, 99 insertions, 73 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 8f8170c..e8e98d2 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,4 +1,4 @@
1@include utility('hidden') { 1@include utility('dn') {
2 display: none; 2 display: none;
3 3
4 @each $breakpoint in map-keys($breakpoints) { 4 @each $breakpoint in map-keys($breakpoints) {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9b5fe86..71dc5d2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -23,27 +23,29 @@ $subcontent--indent: 2em;
23$gray0: hsl(220, 0%, 6%); 23$gray0: hsl(220, 0%, 6%);
24$gray1: hsl(220, 0%, 9%); 24$gray1: hsl(220, 0%, 9%);
25$gray2: hsl(220, 0%, 15%); 25$gray2: hsl(220, 0%, 15%);
26$gray3: hsl(220, 0%, 29%); 26$gray3: hsl(220, 0%, 20%);
27$gray4: hsl(220, 0%, 54%); 27$gray4: hsl(220, 0%, 33%);
28$gray5: hsl(220, 0%, 73%); 28$gray5: hsl(220, 0%, 54%);
29$gray6: hsl(220, 0%, 100%); 29$gray6: hsl(220, 0%, 73%);
30$gray7: hsl(220, 0%, 100%);
30 31
31@include store(( 32@include store((
32 --dims: ( 33 --dims: (
33 --outer: 4rem, 34 --outer: 4rem,
34 --outer-spacing: 2rem, 35 --outer-spacing: 1.7rem,
35 --spacing-y: 3rem, 36 --spacing-y: 4rem,
36 ), 37 ),
37 --colors: ( 38 --colors: (
38 --bg-hi: $gray0, // Darker background 39 --bg-hi: $gray0, // Darker background
39 --bg: $gray1, // Background 40 --bg: $gray1, // Background
40 --bg-lo: $gray2, // Lighter background 41 --bg-lo: $gray2, // Lighter background
41 42
42 --obj: $gray3, 43 --obj-hi: $gray3,
44 --obj: $gray4,
43 45
44 --fg-hi: $gray4, // Faint text 46 --fg-hi: $gray5, // Faint text
45 --fg: $gray5, // Text 47 --fg: $gray6, // Text
46 --fg-lo: $gray6, // Strong text 48 --fg-lo: $gray7, // Strong text
47 49
48 --accent: ( 50 --accent: (
49 --h: 354, 51 --h: 354,
@@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%);
68 } 70 }
69} 71}
70 72
71@include store(( 73/* @include store((
72 --dims: ( 74 --dims: (
73 --outer: 4rem, 75 --outer: 3.5rem,
74 ), 76 ),
75), 'sm'); 77), 'sm'); */
76 78
77:root { 79:root {
78 --heading--fg: var(--colors--fg-lo); 80 --heading--fg: var(--colors--fg-lo);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 09b03b0..cb18810 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,7 +15,7 @@
15 @include store(( 15 @include store((
16 --dims: ( 16 --dims: (
17 --pad-x: 1em, 17 --pad-x: 1em,
18 --pad-y: .6em 18 --pad-y: .7em
19 ) 19 )
20 ), 'md'); 20 ), 'md');
21 21
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index c20bc22..c127d02 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,7 +2,7 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --obj, $global: true), 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --bg-lo, $global: true), 5 --border: prop(--colors --obj-hi, $global: true),
6 ) 6 )
7 )); 7 ));
8 8
@@ -11,6 +11,8 @@
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 16
15 @include element('content') { 17 @include element('content') {
16 width: 100%; 18 width: 100%;
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_header.scss
index 13587c8..61f6f4a 100644
--- a/assets/css/components/_logo.scss
+++ b/assets/css/components/_header.scss
@@ -1,4 +1,4 @@
1@include namespace('logo') { 1@include namespace('header') {
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --fg-lo, $global: true), 4 --fg: prop(--colors --fg-lo, $global: true),
@@ -11,9 +11,12 @@
11 )); 11 ));
12 12
13 @include component(namespace()) { 13 @include component(namespace()) {
14 position: fixed; 14 display: flex;
15 z-index: 10000; 15 position: fixed;
16 top: 0; 16 z-index: 10000;
17 left: 0; 17 top: 0;
18 left: 0;
19 flex-direction: row;
20 justify-content: flex-start;
18 } 21 }
19} 22}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index f6016c4..58d64d7 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -10,7 +10,7 @@
10 @include element('title') { 10 @include element('title') {
11 max-width: 7em; 11 max-width: 7em;
12 margin-top: 0; 12 margin-top: 0;
13 transform: translateX(-.05em); 13 transform: translateX(-.06em);
14 font-family: $font-fam--large; 14 font-family: $font-fam--large;
15 font-weight: 350; 15 font-weight: 350;
16 text-transform: none; 16 text-transform: none;
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index b92dd9e..774281d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,13 +7,9 @@
7 --bg: prop(--colors --accent --color, $global: true), 7 --bg: prop(--colors --accent --color, $global: true),
8 --fg: prop(--colors --bg-hi, $global: true), 8 --fg: prop(--colors --bg-hi, $global: true),
9 ), 9 ),
10 --icon: ( 10 --inverted: (
11 --fg: prop(--colors --fg-lo, $global: true), 11 --fg: prop(--colors --fg-lo, $global: true),
12 --bg: prop(--colors --bg-hi, $global: true), 12 --bg: prop(--colors --bg-hi, $global: true),
13 --hover: (
14 --fg: prop(--colors --bg-hi, $global: true),
15 --bg: prop(--colors --accent --color, $global: true),
16 )
17 ) 13 )
18 ) 14 )
19 )); 15 ));
@@ -24,9 +20,17 @@
24 transition: background-color .2s, color .2s; 20 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg); 21 background-color: prop(--colors --bg);
26 color: prop(--colors --fg); 22 color: prop(--colors --fg);
23 font-size: 1rem;
27 font-weight: 450; 24 font-weight: 450;
28 text-decoration: none; 25 text-decoration: none;
29 26
27 @include modifier('scroll-top') {
28 position: fixed;
29 z-index: 9000;
30 right: 0;
31 bottom: 0;
32 }
33
30 @include element('icon') { 34 @include element('icon') {
31 display: flex; 35 display: flex;
32 position: relative; 36 position: relative;
@@ -36,19 +40,16 @@
36 width: prop(--dims --outer, $global: true); 40 width: prop(--dims --outer, $global: true);
37 height: 100%; 41 height: 100%;
38 transition: background-color .2s, color .2s; 42 transition: background-color .2s, color .2s;
39 background-color: prop(--colors --icon --bg);
40 color: prop(--colors --icon --fg);
41 } 43 }
42 44
43 @include modifier('icon-only') { 45 @include modifier('inverted') {
44 @include element('icon') { 46 background-color: prop(--colors --inverted --bg);
45 background-color: prop(--colors --bg); 47 color: prop(--colors --inverted --fg);
46 color: prop(--colors --fg);
47 }
48 } 48 }
49 49
50 &:hover { 50 &:link,
51 @include multi('&', 'element' 'icon') { 51 &:visited {
52 &:hover {
52 background-color: prop(--colors --hover --bg); 53 background-color: prop(--colors --hover --bg);
53 color: prop(--colors --hover --fg); 54 color: prop(--colors --hover --fg);
54 } 55 }
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
deleted file mode 100644
index 717442b..0000000
--- a/assets/css/components/_section-heading.scss
+++ /dev/null
@@ -1,29 +0,0 @@
1@include namespace('section-heading') {
2 @include store((
3 --dims: (
4 --pad-y: $line-height * 1rem
5 ),
6 --colors: (
7 --line: prop(--colors --accent --color, $global: true),
8 )
9 ));
10
11 @include component(namespace()) {
12 margin: 0 0 prop(--dims --pad-y);
13 font-family: $font-fam--text;
14 font-size: 1 / 16 * 13em;
15 font-weight: bold;
16 letter-spacing: .2em;
17 text-transform: uppercase;
18
19 &::before {
20 content: '';
21 display: inline-block;
22 width: 3em;
23 height: 2px;
24 margin-right: 1.3em;
25 background-color: prop(--colors --line);
26 vertical-align: middle;
27 }
28 }
29}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..d1169dd 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,8 +10,12 @@
10 10
11 @include layout(namespace()) { 11 @include layout(namespace()) {
12 display: flex; 12 display: flex;
13 box-sizing: border-box;
13 flex-direction: row; 14 flex-direction: row;
14 align-items: center; 15 align-items: center;
16 min-height: 100%;
17 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
18 padding-bottom: prop(--dims --outer, $global: true);
15 19
16 @include element('banner') { 20 @include element('banner') {
17 width: 70%; 21 width: 70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index a005ece..0ad9a61 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,11 @@
1@include namespace('section') { 1@include namespace('section') {
2 @include layout(namespace()) { 2 @include store((
3 box-sizing: border-box; 3 --colors: (
4 min-height: 100%; 4 --border: prop(--colors --obj-hi, $global: true),
5 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); 5 )
6 padding-bottom: prop(--dims --outer, $global: true); 6 ));
7 7
8 @include layout(namespace()) {
8 @include modifier('no-head') { 9 @include modifier('no-head') {
9 padding-top: prop(--dims --outer, $global: true); 10 padding-top: prop(--dims --outer, $global: true);
10 } 11 }
@@ -17,6 +18,23 @@
17 left: 0; 18 left: 0;
18 flex-direction: row; 19 flex-direction: row;
19 justify-self: flex-start; 20 justify-self: flex-start;
21 padding-right: prop(--dims --outer, $global: true);
22 font-size: 1 / 16 * 15em;
23
24 &::after {
25 content: '';
26 width: 100%;
27 height: 100%;
28 margin-right: prop(--dims --outer-spacing, $global: true);
29 margin-left: prop(--dims --outer-spacing, $global: true);
30 border-top: 1px solid prop(--colors --border);
31 }
32 }
33
34 @include media('<=sm') {
35 @include element('head') {
36 padding-right: 0;
37 }
20 } 38 }
21 } 39 }
22} 40}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6fbacff..9b3a862 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -5,3 +5,29 @@
5 } 5 }
6 } 6 }
7} 7}
8@include namespace('body') {
9 @include scope(namespace()) {
10 font-size: 1 / 16 * 18em;
11
12 > :first-child {
13 margin-top: 0;
14 }
15
16 h1 {
17 transform: translateX(-.06em);
18 font-family: $font-fam--large;
19 font-weight: 550;
20 text-transform: none;
21 }
22
23 img {
24 max-width: 100%;
25 }
26
27 @include iro-responsive-env(('xs', 'md')) {
28 h1 {
29 font-size: iro-responsive-set((1.8rem, 3rem));
30 }
31 }
32 }
33}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d095dec..1d19aae 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,9 +18,8 @@
18@import 'objects/button'; 18@import 'objects/button';
19 19
20@import 'components/outer-button'; 20@import 'components/outer-button';
21@import 'components/logo'; 21@import 'components/header';
22@import 'components/landing-banner'; 22@import 'components/landing-banner';
23@import 'components/section-heading';
24@import 'components/footer'; 23@import 'components/footer';
25@import 'components/card'; 24@import 'components/card';
26 25