From 8ecde1a5d790ea6c8ac653ca197fb0ec9013e7da Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Jun 2021 19:10:05 +0200 Subject: Simplified card component code --- assets/css/_basics.scss | 5 ---- assets/css/_vars.scss | 29 ++++++++++++++++----- assets/css/components/_card.scss | 45 ++++++--------------------------- assets/css/components/_footer.scss | 1 - templates/layouts/categorized_list.html | 6 ++--- templates/layouts/index.html | 12 ++++----- templates/layouts/list.html | 6 ++--- 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: change-color($link-idle, $lightness: 98.8%); - $theme-link-obj: rgba($link-idle, .5); - $theme-link-fg-hi: mix($link-idle, $gray0, 75%); - $theme-link-fg: $link-idle; + $theme-link-bg: hsl( + var(--colors--accent--h), + var(--colors--accent--s), + 98.8% + ); + $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') { - 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; + @include element('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') { - display: block; - flex: 0 0 auto; - width: 4em; - height: 100%; - object-fit: cover; - object-position: center center; + @include modifier('main') { + flex-shrink: 1; + width: 100%; + } } } } 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)$ -
+
$it.title$
- -
+
$it.title$
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 @@
$endif$ $if(it.icon)$ - + $endif$ -
+
$it.platform$ $it.username$
$if(it.url)$ - + $endif$ @@ -73,15 +73,15 @@ $body$ $endif$
$if(pages.by_id.projects.pages.all.icon)$ - + $endif$ -
+
$pages.by_id.projects.pages.all.title$ $it.title$
- +
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)$ -
+
$it.title$
- -
+
$it.title$
-- cgit v1.2.3-54-g00ecf