From 0de5545dd4706d4dccdc8f843a98f5d9d5155bd0 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 13 Apr 2021 20:42:29 +0200 Subject: Update --- assets/css/_utils.scss | 41 +++++++++++++++++++++++++++-- assets/css/_vars.scss | 13 ++------- assets/css/components/_card.scss | 11 +++++++- assets/css/components/_landing-banner.scss | 2 +- assets/css/components/_outer-button.scss | 42 ++++++++++++++++-------------- assets/css/layouts/_container.scss | 13 ++++----- assets/css/layouts/_landing.scss | 10 +++---- assets/css/layouts/_section.scss | 24 ++++++++++------- metadata/metadata.yaml | 1 + templates/layouts/index.html | 42 ++++++++++++++++++++++++++---- templates/symbols.svg | 4 +++ 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 @@ @include utility('mt0') { margin-top: 0; + + @each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include suffix('#{$breakpoint}-lo') { + margin-top: 0; + } + } + + @include media('>#{$breakpoint}') { + @include suffix('#{$breakpoint}-hi') { + margin-top: 0; + } + } + } +} + +@include utility('pt0') { + padding-top: 0; + + @each $breakpoint in map-keys($breakpoints) { + @include media('<=#{$breakpoint}') { + @include suffix('#{$breakpoint}-lo') { + padding-top: 0; + } + } + + @include media('>#{$breakpoint}') { + @include suffix('#{$breakpoint}-hi') { + padding-top: 0; + } + } + } } -@include utility('ml') { - margin-left: auto; +@include utility('my-auto') { + margin-top: auto; + margin-bottom: auto; } @include utility('db') { display: block; } + +@include utility('ar') { + text-align: right; +} 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%); --dims: ( --outer: 4rem, --outer-spacing: 2rem, + --spacing-y: 3rem, ), --colors: ( --bg-hi: $gray0, // Darker background @@ -69,7 +70,7 @@ $gray6: hsl(220, 0%, 100%); @include store(( --dims: ( - --outer: 4rem + --outer: 4rem, ), ), 'sm'); @@ -84,16 +85,6 @@ $gray6: hsl(220, 0%, 100%); --link--hover--bg: var(--link--idle--fg); --link--hover--fg: #000; - --hero--back-fg: var(--colors--bg-hi); - - --nav--bg: var(--colors--bg); - --nav--logo--fg: var(--colors--fg-hi); - --nav--item--idle--fg: var(--colors--fg); - --nav--item--hover--fg: var(--colors--fg-lo); - --nav--item--active--fg: var(--colors--fg-lo); - - --footer--bg: var(--colors--bg); - --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; --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 @@ @include store(( --dims: ( - --pad-x: .9em, + --pad-x: 1em, --pad-y: .6em ) ), 'md'); @@ -69,5 +69,14 @@ flex: 0 0 auto; padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); } + + @include element('image') { + display: block; + flex: 0 0 auto; + width: 4em; + height: 100%; + object-fit: cover; + object-position: center center; + } } } 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 @@ } @include element('text') { - font-size: 1 / 16 * 17em; + font-size: 1 / 16 * 18em; } @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 @@ --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), ), - --logo: ( + --icon: ( --fg: prop(--colors --fg-lo, $global: true), --bg: prop(--colors --bg-hi, $global: true), --hover: ( @@ -24,31 +24,34 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); - font-weight: 500; + font-weight: 450; text-decoration: none; - &:hover { - background-color: prop(--colors --hover --bg); - color: prop(--colors --hover --fg); + @include element('icon') { + display: flex; + position: relative; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: prop(--dims --outer, $global: true); + height: 100%; + transition: background-color .2s, color .2s; + background-color: prop(--colors --icon --bg); + color: prop(--colors --icon --fg); } - @include modifier('logo') { - background-color: prop(--colors --logo --bg); - color: prop(--colors --logo --fg); - - &:hover { - background-color: prop(--colors --logo --hover --bg); - color: prop(--colors --logo --hover --fg); + @include modifier('icon-only') { + @include element('icon') { + background-color: prop(--colors --bg); + color: prop(--colors --fg); } } - @include element('icon') { - display: flex; - position: relative; - align-items: center; - justify-content: center; - width: prop(--dims --outer, $global: true); - height: 100%; + &:hover { + @include multi('&', 'element' 'icon') { + background-color: prop(--colors --hover --bg); + color: prop(--colors --hover --fg); + } } @include element('icon-symbol') { @@ -62,6 +65,7 @@ padding-right: prop(--dims --outer-spacing, $global: true); padding-left: prop(--dims --outer-spacing, $global: true); line-height: prop(--dims --outer, $global: true); + white-space: nowrap; } } } 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 @@ @include namespace('container') { @include store(( --dims: ( - --pad-x: 3rem, - --pad-y: $line-height * 2rem + --pad-x: 3rem ) )); @include store(( --dims: ( - --pad-x: 2rem, - --pad-y: $line-height * 1.5rem + --pad-x: 2rem ) ), 'md'); @include store(( --dims: ( - --pad-x: 4%, - --pad-y: $line-height * 1rem + --pad-x: 4% ) ), 'sm'); @@ -33,8 +30,8 @@ } @include modifier('pad-y') { - padding-top: prop(--dims --pad-y); - padding-bottom: prop(--dims --pad-y); + padding-top: prop(--dims --spacing-y, $global: true); + padding-bottom: prop(--dims --spacing-y, $global: true); } } } 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 @@ } @include iro-responsive-env(('md', 'lg')) { - padding-right: iro-responsive-set((0, 6rem)); + padding-right: iro-responsive-set((0, 3rem)); padding-left: iro-responsive-set((0, 6rem)); - - @include element('banner') { - padding-right: iro-responsive-set((0, 6rem)); - } } @include media('<=md') { - display: block; + flex-direction: column; + align-items: stretch; + justify-content: center; @include element('side') { 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 @@ @include namespace('section') { @include layout(namespace()) { - display: flex; - flex-direction: column; - align-items: flex-start; - min-height: 100%; - margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); - padding-bottom: prop(--dims --outer, $global: true); + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + min-height: 100%; + margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); + padding-bottom: prop(--dims --outer, $global: true); @include element('heading') { - position: sticky; - z-index: 9000; - top: 0; - left: 0; + display: flex; + position: sticky; + z-index: 9000; + top: 0; + left: 0; + flex-direction: row; + justify-self: flex-start; } } } 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: featured: true - platform: GitHub + icon: git-branch username: volpeon url: "https://github.com/volpeon" 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 @@
-
+
$for(profiles)$ $if(it.featured)$ @@ -64,18 +64,50 @@ $body$ + +
+ +
+ Emojis + Blobfox +
+ + + + + + +
+ Emojis + BunHD +
+ + + + + + +
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 @@ + + + +