summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_utils.scss41
-rw-r--r--assets/css/_vars.scss13
-rw-r--r--assets/css/components/_card.scss11
-rw-r--r--assets/css/components/_landing-banner.scss2
-rw-r--r--assets/css/components/_outer-button.scss42
-rw-r--r--assets/css/layouts/_container.scss13
-rw-r--r--assets/css/layouts/_landing.scss10
-rw-r--r--assets/css/layouts/_section.scss24
-rw-r--r--metadata/metadata.yaml1
-rw-r--r--templates/layouts/index.html42
-rw-r--r--templates/symbols.svg4
11 files changed, 140 insertions, 63 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 5e07d6f..8f8170c 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -18,12 +18,49 @@
18 18
19@include utility('mt0') { 19@include utility('mt0') {
20 margin-top: 0; 20 margin-top: 0;
21
22 @each $breakpoint in map-keys($breakpoints) {
23 @include media('<=#{$breakpoint}') {
24 @include suffix('#{$breakpoint}-lo') {
25 margin-top: 0;
26 }
27 }
28
29 @include media('>#{$breakpoint}') {
30 @include suffix('#{$breakpoint}-hi') {
31 margin-top: 0;
32 }
33 }
34 }
35}
36
37@include utility('pt0') {
38 padding-top: 0;
39
40 @each $breakpoint in map-keys($breakpoints) {
41 @include media('<=#{$breakpoint}') {
42 @include suffix('#{$breakpoint}-lo') {
43 padding-top: 0;
44 }
45 }
46
47 @include media('>#{$breakpoint}') {
48 @include suffix('#{$breakpoint}-hi') {
49 padding-top: 0;
50 }
51 }
52 }
21} 53}
22 54
23@include utility('ml') { 55@include utility('my-auto') {
24 margin-left: auto; 56 margin-top: auto;
57 margin-bottom: auto;
25} 58}
26 59
27@include utility('db') { 60@include utility('db') {
28 display: block; 61 display: block;
29} 62}
63
64@include utility('ar') {
65 text-align: right;
66}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index b19ebee..9b5fe86 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -32,6 +32,7 @@ $gray6: hsl(220, 0%, 100%);
32 --dims: ( 32 --dims: (
33 --outer: 4rem, 33 --outer: 4rem,
34 --outer-spacing: 2rem, 34 --outer-spacing: 2rem,
35 --spacing-y: 3rem,
35 ), 36 ),
36 --colors: ( 37 --colors: (
37 --bg-hi: $gray0, // Darker background 38 --bg-hi: $gray0, // Darker background
@@ -69,7 +70,7 @@ $gray6: hsl(220, 0%, 100%);
69 70
70@include store(( 71@include store((
71 --dims: ( 72 --dims: (
72 --outer: 4rem 73 --outer: 4rem,
73 ), 74 ),
74), 'sm'); 75), 'sm');
75 76
@@ -84,16 +85,6 @@ $gray6: hsl(220, 0%, 100%);
84 --link--hover--bg: var(--link--idle--fg); 85 --link--hover--bg: var(--link--idle--fg);
85 --link--hover--fg: #000; 86 --link--hover--fg: #000;
86 87
87 --hero--back-fg: var(--colors--bg-hi);
88
89 --nav--bg: var(--colors--bg);
90 --nav--logo--fg: var(--colors--fg-hi);
91 --nav--item--idle--fg: var(--colors--fg);
92 --nav--item--hover--fg: var(--colors--fg-lo);
93 --nav--item--active--fg: var(--colors--fg-lo);
94
95 --footer--bg: var(--colors--bg);
96
97 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; 88 --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
98 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; 89 --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458;
99 --page--link--hover--bg: var(--page--link--idle--fg); 90 --page--link--hover--bg: var(--page--link--idle--fg);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index bb8b4d2..09b03b0 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,7 +14,7 @@
14 14
15 @include store(( 15 @include store((
16 --dims: ( 16 --dims: (
17 --pad-x: .9em, 17 --pad-x: 1em,
18 --pad-y: .6em 18 --pad-y: .6em
19 ) 19 )
20 ), 'md'); 20 ), 'md');
@@ -69,5 +69,14 @@
69 flex: 0 0 auto; 69 flex: 0 0 auto;
70 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); 70 padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
71 } 71 }
72
73 @include element('image') {
74 display: block;
75 flex: 0 0 auto;
76 width: 4em;
77 height: 100%;
78 object-fit: cover;
79 object-position: center center;
80 }
72 } 81 }
73} 82}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 8f07c37..f6016c4 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -17,7 +17,7 @@
17 } 17 }
18 18
19 @include element('text') { 19 @include element('text') {
20 font-size: 1 / 16 * 17em; 20 font-size: 1 / 16 * 18em;
21 } 21 }
22 22
23 @include element('title-inner') { 23 @include element('title-inner') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 13614bb..b92dd9e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,7 +7,7 @@
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 --logo: ( 10 --icon: (
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: ( 13 --hover: (
@@ -24,31 +24,34 @@
24 transition: background-color .2s, color .2s; 24 transition: background-color .2s, color .2s;
25 background-color: prop(--colors --bg); 25 background-color: prop(--colors --bg);
26 color: prop(--colors --fg); 26 color: prop(--colors --fg);
27 font-weight: 500; 27 font-weight: 450;
28 text-decoration: none; 28 text-decoration: none;
29 29
30 &:hover { 30 @include element('icon') {
31 background-color: prop(--colors --hover --bg); 31 display: flex;
32 color: prop(--colors --hover --fg); 32 position: relative;
33 flex: 0 0 auto;
34 align-items: center;
35 justify-content: center;
36 width: prop(--dims --outer, $global: true);
37 height: 100%;
38 transition: background-color .2s, color .2s;
39 background-color: prop(--colors --icon --bg);
40 color: prop(--colors --icon --fg);
33 } 41 }
34 42
35 @include modifier('logo') { 43 @include modifier('icon-only') {
36 background-color: prop(--colors --logo --bg); 44 @include element('icon') {
37 color: prop(--colors --logo --fg); 45 background-color: prop(--colors --bg);
38 46 color: prop(--colors --fg);
39 &:hover {
40 background-color: prop(--colors --logo --hover --bg);
41 color: prop(--colors --logo --hover --fg);
42 } 47 }
43 } 48 }
44 49
45 @include element('icon') { 50 &:hover {
46 display: flex; 51 @include multi('&', 'element' 'icon') {
47 position: relative; 52 background-color: prop(--colors --hover --bg);
48 align-items: center; 53 color: prop(--colors --hover --fg);
49 justify-content: center; 54 }
50 width: prop(--dims --outer, $global: true);
51 height: 100%;
52 } 55 }
53 56
54 @include element('icon-symbol') { 57 @include element('icon-symbol') {
@@ -62,6 +65,7 @@
62 padding-right: prop(--dims --outer-spacing, $global: true); 65 padding-right: prop(--dims --outer-spacing, $global: true);
63 padding-left: prop(--dims --outer-spacing, $global: true); 66 padding-left: prop(--dims --outer-spacing, $global: true);
64 line-height: prop(--dims --outer, $global: true); 67 line-height: prop(--dims --outer, $global: true);
68 white-space: nowrap;
65 } 69 }
66 } 70 }
67} 71}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index d63460b..0f569e4 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,22 +1,19 @@
1@include namespace('container') { 1@include namespace('container') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --pad-x: 3rem, 4 --pad-x: 3rem
5 --pad-y: $line-height * 2rem
6 ) 5 )
7 )); 6 ));
8 7
9 @include store(( 8 @include store((
10 --dims: ( 9 --dims: (
11 --pad-x: 2rem, 10 --pad-x: 2rem
12 --pad-y: $line-height * 1.5rem
13 ) 11 )
14 ), 'md'); 12 ), 'md');
15 13
16 @include store(( 14 @include store((
17 --dims: ( 15 --dims: (
18 --pad-x: 4%, 16 --pad-x: 4%
19 --pad-y: $line-height * 1rem
20 ) 17 )
21 ), 'sm'); 18 ), 'sm');
22 19
@@ -33,8 +30,8 @@
33 } 30 }
34 31
35 @include modifier('pad-y') { 32 @include modifier('pad-y') {
36 padding-top: prop(--dims --pad-y); 33 padding-top: prop(--dims --spacing-y, $global: true);
37 padding-bottom: prop(--dims --pad-y); 34 padding-bottom: prop(--dims --spacing-y, $global: true);
38 } 35 }
39 } 36 }
40} 37}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index a332528..aa85679 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -25,16 +25,14 @@
25 } 25 }
26 26
27 @include iro-responsive-env(('md', 'lg')) { 27 @include iro-responsive-env(('md', 'lg')) {
28 padding-right: iro-responsive-set((0, 6rem)); 28 padding-right: iro-responsive-set((0, 3rem));
29 padding-left: iro-responsive-set((0, 6rem)); 29 padding-left: iro-responsive-set((0, 6rem));
30
31 @include element('banner') {
32 padding-right: iro-responsive-set((0, 6rem));
33 }
34 } 30 }
35 31
36 @include media('<=md') { 32 @include media('<=md') {
37 display: block; 33 flex-direction: column;
34 align-items: stretch;
35 justify-content: center;
38 36
39 @include element('side') { 37 @include element('side') {
40 display: none; 38 display: none;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 94a145b..38b20aa 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,17 +1,21 @@
1@include namespace('section') { 1@include namespace('section') {
2 @include layout(namespace()) { 2 @include layout(namespace()) {
3 display: flex; 3 display: flex;
4 flex-direction: column; 4 flex-direction: column;
5 align-items: flex-start; 5 align-items: stretch;
6 min-height: 100%; 6 justify-content: flex-start;
7 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); 7 min-height: 100%;
8 padding-bottom: prop(--dims --outer, $global: true); 8 margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)});
9 padding-bottom: prop(--dims --outer, $global: true);
9 10
10 @include element('heading') { 11 @include element('heading') {
11 position: sticky; 12 display: flex;
12 z-index: 9000; 13 position: sticky;
13 top: 0; 14 z-index: 9000;
14 left: 0; 15 top: 0;
16 left: 0;
17 flex-direction: row;
18 justify-self: flex-start;
15 } 19 }
16 } 20 }
17} 21}
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 972de8d..6980efb 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -56,6 +56,7 @@ profiles:
56 featured: true 56 featured: true
57 57
58 - platform: GitHub 58 - platform: GitHub
59 icon: git-branch
59 username: volpeon 60 username: volpeon
60 url: "https://github.com/volpeon" 61 url: "https://github.com/volpeon"
61 62
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 3145b69..d39e70a 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -14,7 +14,7 @@
14 </header> 14 </header>
15 15
16 <section class="l-landing__content"> 16 <section class="l-landing__content">
17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body"> 17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo">
18 <div class="l-card-grid"> 18 <div class="l-card-grid">
19 $for(profiles)$ 19 $for(profiles)$
20 $if(it.featured)$ 20 $if(it.featured)$
@@ -64,18 +64,50 @@ $body$
64 </span> 64 </span>
65 </a> 65 </a>
66 </header> 66 </header>
67
68 <div class="l-container l-container--pad-x l-container--pad-y l-card-grid u-my-auto">
69 <a class="l-card-grid__card c-card" href="projects/blobfox-emojis/">
70 <div class="c-card__content">
71 <small class="u-db">Emojis</small>
72 <strong class="u-db">Blobfox</strong>
73 </div>
74 <svg class="c-card__icon o-icon">
75 <use href="#icon-arrow-right"></use>
76 </svg>
77 </a>
78
79 <a class="l-card-grid__card c-card" href="projects/bunhd-emojis/">
80 <div class="c-card__content">
81 <small class="u-db">Emojis</small>
82 <strong class="u-db">BunHD</strong>
83 </div>
84 <svg class="c-card__icon o-icon">
85 <use href="#icon-arrow-right"></use>
86 </svg>
87 </a>
88
89 <!--<a class="l-card-grid__card c-card" href="#">
90 <div class="c-card__content">
91 <small class="u-db">Icons</small>
92 <strong class="u-db">iro</strong>
93 </div>
94 <svg class="c-card__icon o-icon">
95 <use href="#icon-arrow-right"></use>
96 </svg>
97 </a>-->
98 </div>
67 </section> 99 </section>
68 100
69 <footer class="c-footer"> 101 <footer class="c-footer">
70 <div class="c-footer__content"> 102 <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top">
71 9thPK7O3xn
72 </div>
73 <a class="c-outer-button" href="#">
74 <span class="c-outer-button__icon"> 103 <span class="c-outer-button__icon">
75 <svg class="c-outer-button__icon-symbol o-icon"> 104 <svg class="c-outer-button__icon-symbol o-icon">
76 <use href="#icon-arrow-up"></use> 105 <use href="#icon-arrow-up"></use>
77 </svg> 106 </svg>
78 </span> 107 </span>
79 </a> 108 </a>
109 <div class="c-footer__content u-ar">
110 9thPK7O3xn
111 </div>
80 </footer> 112 </footer>
81</main> 113</main>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index 902cc35..a5907e1 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -15,6 +15,10 @@
15 <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" /> 15 <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
16 </symbol> 16 </symbol>
17 17
18 <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
19 <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
20 </symbol>
21
18 <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> 22 <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
19 <path 23 <path
20 d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311" 24 d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 17:13:36 +0000