Simplified card component code

author: Volpeon <git@volpeon.ink> 2021-06-14 19:10:05 +0200
committer: Volpeon <git@volpeon.ink> 2021-06-14 19:10:05 +0200
commit: 8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da (patch)
tree: f921fe76fc3acec99a3e1f628399b1ea1cc8ba6b
parent: Restructured some variables (diff)
download: volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.tar.gz
volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.tar.bz2
volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.zip
7 files changed, 42 insertions, 62 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index fd15836..9a6a53e 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -39,11 +39,6 @@ body {
    padding: 0;
 }
-main {
-    display:        flex;
-    flex-direction: column;
-}
 pre,
 code {
    font-family: $font-fam--mono;
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 832c410..d650842 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -133,12 +133,27 @@ $content--width:  42rem;
    $gray6: hsl(220, 7%, 16%);
    $gray7: hsl(220, 7%, 0%);
-    $link-idle: hsl(220, 60%, 40%);
+    $theme-link-bg: hsl(
+        var(--colors--accent--h),
-    $theme-link-bg:    change-color($link-idle, $lightness: 98.8%);
+        var(--colors--accent--s),
-    $theme-link-obj:   rgba($link-idle, .5);
+        98.8%
-    $theme-link-fg-hi: mix($link-idle, $gray0, 75%);
+    );
-    $theme-link-fg:    $link-idle;
+    $theme-link-obj: hsla(
+        var(--colors--accent--h),
+        var(--colors--accent--s),
+        var(--colors--accent--l),
+        .5
+    );
+    $theme-link-fg: hsl(
+        var(--colors--accent--h),
+        var(--colors--accent--s),
+        calc(var(--colors--accent--l) * .8)
+    );
+    $theme-link-fg-hi: hsl(
+        var(--colors--accent--h),
+        calc(var(--colors--accent--s) * .6),
+        calc(var(--colors--accent--l) * 1.2)
+    );
    @include store((
        --colors: (
@@ -200,7 +215,7 @@ $content--width:  42rem;
            --link: (
                --colored: (
-                    --idle:    $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //
+                    --idle:    hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), //
                    --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
                )
            ),
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6fdd874..d1b549d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,6 +30,8 @@
        display:          flex;
        position:         relative;
        align-items:      center;
+        padding-right:    calc(.5 * #{prop(--dims --pad-x)});
+        padding-left:     calc(.5 * #{prop(--dims --pad-x)});
        transform:        translateY(0);
        transition:       transform .2s, background-color .2s, color .2s;
        background-color: prop(--colors --bg);
@@ -83,45 +85,14 @@
            }
        }
-        @include element('content') {
+        @include element('block') {
-            box-sizing: border-box;
-            width:      100%;
-            padding:    prop(--dims --pad-y) prop(--dims --pad-x);
-            @include next-twin-element {
-                width: auto;
-            }
-            @include modifier('flip') {
-                visibility:       hidden;
-                position:         absolute;
-                top:              0;
-                left:             0;
-                height:           100%;
-                transition:       visibility 0s linear .2s, opacity .2s;
-                opacity:          0;
-                background-color: prop(--colors --hover --bg);
-            }
-            @include sibling-element('icon') {
-                padding-right: prop(--dims --pad-x);
-                padding-left:  0;
-            }
-        }
-        @include element('icon') {
-            display: block;
            flex:    0 0 auto;
-            padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
+            padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
-        }
-        @include element('image') {
+            @include modifier('main') {
-            display:         block;
+                flex-shrink: 1;
-            flex:            0 0 auto;
+                width:       100%;
-            width:           4em;
+            }
-            height:          100%;
-            object-fit:      cover;
-            object-position: center center;
        }
    }
 }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index cc0e827..6371411 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
    @include component(namespace()) {
        position:         relative;
-        flex:             0 0 auto;
        min-height:       prop(--dims --outer, $global: true);
        margin-top:       auto;
        overflow:         hidden;
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 03d05e0..00ea383 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -16,10 +16,10 @@ $body$
                        $if(pages.asc_title.show_dates)$
                            $for(it.pages.desc_date)$
                                <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
-                                    <div class="c-card__content">
+                                    <div class="c-card__block c-card__block--main">
                                        $it.title$
                                    </div>
-                                    <time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0">
+                                    <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
                                        <small class="u-dn@sm-hi">
                                            $it.date.short$
                                        </small>
@@ -32,7 +32,7 @@ $body$
                        $else$
                            $for(it.pages.asc_title)$
                                <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
-                                    <div class="c-card__content">
+                                    <div class="c-card__block c-card__block--main">
                                        $it.title$
                                    </div>
                                </a>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 8eeeb03..00d25af 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -23,16 +23,16 @@
                            <div class="l-card-grid__card c-card">
                        $endif$
                            $if(it.icon)$
-                                <svg class="c-card__icon o-icon">
+                                <svg class="c-card__block o-icon">
                                    <use href="/symbols.svg#icon-$it.icon$"></use>
                                </svg>
                            $endif$
-                            <div class="c-card__content">
+                            <div class="c-card__block c-card__block--main">
                                <strong class="u-db">$it.platform$</strong>
                                <small class="u-db">$it.username$</small>
                            </div>
                            $if(it.url)$
-                                <svg class="c-card__icon o-icon">
+                                <svg class="c-card__block o-icon">
                                    <use href="/symbols.svg#icon-arrow-up-right"></use>
                                </svg>
                            $endif$
@@ -73,15 +73,15 @@ $body$
                    $endif$
                    <div class="c-project__card c-card">
                        $if(pages.by_id.projects.pages.all.icon)$
-                            <svg class="c-card__icon o-icon">
+                            <svg class="c-card__block o-icon">
                                <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use>
                            </svg>
                        $endif$
-                        <div class="c-card__content">
+                        <div class="c-card__block c-card__block--main">
                            <small class="u-db">$pages.by_id.projects.pages.all.title$</small>
                            <strong class="u-db">$it.title$</strong>
                        </div>
-                        <svg class="c-card__icon o-icon">
+                        <svg class="c-card__block o-icon">
                            <use href="/symbols.svg#icon-arrow-right"></use>
                        </svg>
                    </div>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 2d32357..9fc6ebe 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -11,10 +11,10 @@ $body$
                $if(show_dates)$
                    $for(pages.desc_date)$
                        <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
-                            <div class="c-card__content">
+                            <div class="c-card__block c-card__block--main">
                                $it.title$
                            </div>
-                            <time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0">
+                            <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
                                <small class="u-dn@sm-hi">
                                    $it.date.short$
                                </small>
@@ -27,7 +27,7 @@ $body$
                $else$
                    $for(pages.asc_title)$
                        <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
-                            <div class="c-card__content">
+                            <div class="c-card__block c-card__block--main">
                                $it.title$
                            </div>
                        </a>
author	Volpeon <git@volpeon.ink>	2021-06-14 19:10:05 +0200
committer	Volpeon <git@volpeon.ink>	2021-06-14 19:10:05 +0200
commit	8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da (patch)
tree	f921fe76fc3acec99a3e1f628399b1ea1cc8ba6b
parent	Restructured some variables (diff)
download	volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.tar.gz volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.tar.bz2 volpeon.ink-8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da.zip

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index fd15836..9a6a53e 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss
@@ -39,11 +39,6 @@ body {
39	padding: 0;	39	padding: 0;
40	}	40	}
41		41
42	main {
43	display: flex;
44	flex-direction: column;
45	}
46
47	pre,	42	pre,
48	code {	43	code {
49	font-family: $font-fam--mono;	44	font-family: $font-fam--mono;


diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 832c410..d650842 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss
@@ -133,12 +133,27 @@ $content--width: 42rem;
133	$gray6: hsl(220, 7%, 16%);	133	$gray6: hsl(220, 7%, 16%);
134	$gray7: hsl(220, 7%, 0%);	134	$gray7: hsl(220, 7%, 0%);
135		135
136	$link-idle: hsl(220, 60%, 40%);	136	$theme-link-bg: hsl(
137		137	var(--colors--accent--h),
138	$theme-link-bg: change-color($link-idle, $lightness: 98.8%);	138	var(--colors--accent--s),
139	$theme-link-obj: rgba($link-idle, .5);	139	98.8%
140	$theme-link-fg-hi: mix($link-idle, $gray0, 75%);	140	);
141	$theme-link-fg: $link-idle;	141	$theme-link-obj: hsla(
		142	var(--colors--accent--h),
		143	var(--colors--accent--s),
		144	var(--colors--accent--l),
		145	.5
		146	);
		147	$theme-link-fg: hsl(
		148	var(--colors--accent--h),
		149	var(--colors--accent--s),
		150	calc(var(--colors--accent--l) * .8)
		151	);
		152	$theme-link-fg-hi: hsl(
		153	var(--colors--accent--h),
		154	calc(var(--colors--accent--s) * .6),
		155	calc(var(--colors--accent--l) * 1.2)
		156	);
142		157
143	@include store((	158	@include store((
144	--colors: (	159	--colors: (
@@ -200,7 +215,7 @@ $content--width: 42rem;
200		215
201	--link: (	216	--link: (
202	--colored: (	217	--colored: (
203	--idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), //	218	--idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), //
204	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //	219	--visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
205	)	220	)
206	),	221	),


diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 6fdd874..d1b549d 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss
@@ -30,6 +30,8 @@
30	display: flex;	30	display: flex;
31	position: relative;	31	position: relative;
32	align-items: center;	32	align-items: center;
		33	padding-right: calc(.5 * #{prop(--dims --pad-x)});
		34	padding-left: calc(.5 * #{prop(--dims --pad-x)});
33	transform: translateY(0);	35	transform: translateY(0);
34	transition: transform .2s, background-color .2s, color .2s;	36	transition: transform .2s, background-color .2s, color .2s;
35	background-color: prop(--colors --bg);	37	background-color: prop(--colors --bg);
@@ -83,45 +85,14 @@
83	}	85	}
84	}	86	}
85		87
86	@include element('content') {	88	@include element('block') {
87	box-sizing: border-box;
88	width: 100%;
89	padding: prop(--dims --pad-y) prop(--dims --pad-x);
90
91	@include next-twin-element {
92	width: auto;
93	}
94
95	@include modifier('flip') {
96	visibility: hidden;
97	position: absolute;
98	top: 0;
99	left: 0;
100	height: 100%;
101	transition: visibility 0s linear .2s, opacity .2s;
102	opacity: 0;
103	background-color: prop(--colors --hover --bg);
104	}
105
106	@include sibling-element('icon') {
107	padding-right: prop(--dims --pad-x);
108	padding-left: 0;
109	}
110	}
111
112	@include element('icon') {
113	display: block;
114	flex: 0 0 auto;	89	flex: 0 0 auto;
115	padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);	90	padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
116	}
117		91
118	@include element('image') {	92	@include modifier('main') {
119	display: block;	93	flex-shrink: 1;
120	flex: 0 0 auto;	94	width: 100%;
121	width: 4em;	95	}
122	height: 100%;
123	object-fit: cover;
124	object-position: center center;
125	}	96	}
126	}	97	}
127	}	98	}


diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index cc0e827..6371411 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
9		9
10	@include component(namespace()) {	10	@include component(namespace()) {
11	position: relative;	11	position: relative;
12	flex: 0 0 auto;
13	min-height: prop(--dims --outer, $global: true);	12	min-height: prop(--dims --outer, $global: true);
14	margin-top: auto;	13	margin-top: auto;
15	overflow: hidden;	14	overflow: hidden;


diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 03d05e0..00ea383 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html
@@ -16,10 +16,10 @@ $body$
16	$if(pages.asc_title.show_dates)$	16	$if(pages.asc_title.show_dates)$
17	$for(it.pages.desc_date)$	17	$for(it.pages.desc_date)$
18	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">	18	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
19	<div class="c-card__content">	19	<div class="c-card__block c-card__block--main">
20	$it.title$	20	$it.title$
21	</div>	21	</div>
22	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0">	22	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
23	<small class="u-dn@sm-hi">	23	<small class="u-dn@sm-hi">
24	$it.date.short$	24	$it.date.short$
25	</small>	25	</small>
@@ -32,7 +32,7 @@ $body$
32	$else$	32	$else$
33	$for(it.pages.asc_title)$	33	$for(it.pages.asc_title)$
34	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">	34	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
35	<div class="c-card__content">	35	<div class="c-card__block c-card__block--main">
36	$it.title$	36	$it.title$
37	</div>	37	</div>
38	</a>	38	</a>


diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 8eeeb03..00d25af 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html
@@ -23,16 +23,16 @@
23	<div class="l-card-grid__card c-card">	23	<div class="l-card-grid__card c-card">
24	$endif$	24	$endif$
25	$if(it.icon)$	25	$if(it.icon)$
26	<svg class="c-card__icon o-icon">	26	<svg class="c-card__block o-icon">
27	<use href="/symbols.svg#icon-$it.icon$"></use>	27	<use href="/symbols.svg#icon-$it.icon$"></use>
28	</svg>	28	</svg>
29	$endif$	29	$endif$
30	<div class="c-card__content">	30	<div class="c-card__block c-card__block--main">
31	<strong class="u-db">$it.platform$</strong>	31	<strong class="u-db">$it.platform$</strong>
32	<small class="u-db">$it.username$</small>	32	<small class="u-db">$it.username$</small>
33	</div>	33	</div>
34	$if(it.url)$	34	$if(it.url)$
35	<svg class="c-card__icon o-icon">	35	<svg class="c-card__block o-icon">
36	<use href="/symbols.svg#icon-arrow-up-right"></use>	36	<use href="/symbols.svg#icon-arrow-up-right"></use>
37	</svg>	37	</svg>
38	$endif$	38	$endif$
@@ -73,15 +73,15 @@ $body$
73	$endif$	73	$endif$
74	<div class="c-project__card c-card">	74	<div class="c-project__card c-card">
75	$if(pages.by_id.projects.pages.all.icon)$	75	$if(pages.by_id.projects.pages.all.icon)$
76	<svg class="c-card__icon o-icon">	76	<svg class="c-card__block o-icon">
77	<use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use>	77	<use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use>
78	</svg>	78	</svg>
79	$endif$	79	$endif$
80	<div class="c-card__content">	80	<div class="c-card__block c-card__block--main">
81	<small class="u-db">$pages.by_id.projects.pages.all.title$</small>	81	<small class="u-db">$pages.by_id.projects.pages.all.title$</small>
82	<strong class="u-db">$it.title$</strong>	82	<strong class="u-db">$it.title$</strong>
83	</div>	83	</div>
84	<svg class="c-card__icon o-icon">	84	<svg class="c-card__block o-icon">
85	<use href="/symbols.svg#icon-arrow-right"></use>	85	<use href="/symbols.svg#icon-arrow-right"></use>
86	</svg>	86	</svg>
87	</div>	87	</div>


diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 2d32357..9fc6ebe 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html
@@ -11,10 +11,10 @@ $body$
11	$if(show_dates)$	11	$if(show_dates)$
12	$for(pages.desc_date)$	12	$for(pages.desc_date)$
13	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">	13	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
14	<div class="c-card__content">	14	<div class="c-card__block c-card__block--main">
15	$it.title$	15	$it.title$
16	</div>	16	</div>
17	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0">	17	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
18	<small class="u-dn@sm-hi">	18	<small class="u-dn@sm-hi">
19	$it.date.short$	19	$it.date.short$
20	</small>	20	</small>
@@ -27,7 +27,7 @@ $body$
27	$else$	27	$else$
28	$for(pages.asc_title)$	28	$for(pages.asc_title)$
29	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">	29	<a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited">
30	<div class="c-card__content">	30	<div class="c-card__block c-card__block--main">
31	$it.title$	31	$it.title$
32	</div>	32	</div>
33	</a>	33	</a>