From 3a3baddad1c801d77dc398d2c6980f3c14f4a47c Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 30 Oct 2021 22:11:00 +0200 Subject: chore: move htdocs to repo root --- htdocs/src/scss/layout/_footer.scss | 40 --------- htdocs/src/scss/layout/_grid.scss | 43 ---------- htdocs/src/scss/layout/_header.scss | 143 -------------------------------- htdocs/src/scss/layout/_main.scss | 153 ----------------------------------- htdocs/src/scss/layout/_nav.scss | 70 ---------------- htdocs/src/scss/layout/_toolbar.scss | 34 -------- 6 files changed, 483 deletions(-) delete mode 100644 htdocs/src/scss/layout/_footer.scss delete mode 100644 htdocs/src/scss/layout/_grid.scss delete mode 100644 htdocs/src/scss/layout/_header.scss delete mode 100644 htdocs/src/scss/layout/_main.scss delete mode 100644 htdocs/src/scss/layout/_nav.scss delete mode 100644 htdocs/src/scss/layout/_toolbar.scss (limited to 'htdocs/src/scss/layout') diff --git a/htdocs/src/scss/layout/_footer.scss b/htdocs/src/scss/layout/_footer.scss deleted file mode 100644 index 7dce0dc..0000000 --- a/htdocs/src/scss/layout/_footer.scss +++ /dev/null @@ -1,40 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/mixins" as mix; - -.footer { - align-items: center; - background: fun.get-var(color-bg-secondary); - border-top: fun.convert-px(1) solid fun.get-var(color-border-light); - display: flex; - flex-flow: row wrap; - font-family: fun.get-var(font-family-secondary); - font-size: fun.get-var(font-size-md); - gap: fun.get-var(spacing-3xs); - justify-content: center; - padding: fun.get-var(spacing-sm) fun.get-var(spacing-md) - calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-sm)}); - - @include mix.media("screen") { - @include mix.dimensions("lg") { - box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow); - padding: fun.get-var(spacing-sm) fun.get-var(spacing-md); - } - } - - .nav { - display: inline-flex; - gap: fun.get-var(spacing-3xs); - - &::after { - content: "/"; - } - } -} - -.copyright { - align-items: center; - display: flex; - flex-flow: row wrap; - gap: fun.get-var(spacing-3xs); - justify-content: center; -} diff --git a/htdocs/src/scss/layout/_grid.scss b/htdocs/src/scss/layout/_grid.scss deleted file mode 100644 index 3749678..0000000 --- a/htdocs/src/scss/layout/_grid.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/mixins" as mix; - -.body { - display: grid; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr) max-content; - height: 100vh; - position: relative; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - grid-template-columns: 1.5fr 4fr; - } - - @include mix.dimensions("xl") { - grid-template-columns: 1fr 4fr; - } - } -} - -.header { - grid-column: 1; - grid-row: 1; - width: 100%; -} - -.main { - grid-column: 1; - grid-row: 1 / -1; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - grid-column: 2; - } - } -} - -.footer { - grid-column: 1; - grid-row: 2; - width: 100%; -} diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss deleted file mode 100644 index cbc1693..0000000 --- a/htdocs/src/scss/layout/_header.scss +++ /dev/null @@ -1,143 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/mixins" as mix; - -.header { - background: fun.get-var(color-bg-secondary); - overflow-y: auto; - padding: fun.get-var(spacing-md) - clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); - scrollbar-color: fun.get-var(color-primary-light-opacity) - fun.get-var(color-bg-tertiary); - z-index: 5; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow); - } - } -} - -.branding { - margin-bottom: clamp( - #{fun.get-var(spacing-sm)}, - 3vw, - #{fun.get-var(spacing-md)} - ); - text-align: center; - - &__title { - font-family: fun.get-var(font-family-secondary); - font-size: clamp( - #{fun.get-var(font-size-2xl)}, - 5vw, - #{fun.get-var(font-size-3xl)} - ); - font-weight: 500; - margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs); - } - - &__link { - background: linear-gradient( - to top, - fun.get-var(color-primary-light) fun.convert-px(5), - transparent fun.convert-px(5) - ) - center / 0 100% no-repeat; - text-decoration: none; - transition: all 0.5s ease-in-out 0s; - - &:hover, - &:focus { - background-size: 100% 100%; - } - - &:active { - background-size: 0 100%; - } - } - - &__description { - font-family: fun.get-var(font-family-secondary); - font-size: clamp( - #{fun.get-var(font-size-md)}, - 3vw, - #{fun.get-var(font-size-lg)} - ); - font-weight: 400; - letter-spacing: fun.convert-px(1); - margin: 0; - text-transform: uppercase; - } -} - -.logo { - margin: auto; - position: relative; - width: max-content; - - &__image { - backface-visibility: hidden; - border: fun.convert-px(3) solid fun.get-var(color-border-light); - border-radius: 50%; - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-darker); - left: 0; - position: absolute; - top: 0; - width: 100%; - - &--back { - transform: rotateY(180deg); - } - } - - &__link { - display: block; - height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); - transform-style: preserve-3d; - transition: all 0.6s linear 0s; - width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)}); - - &:hover, - &:focus { - outline: none; - transform: rotateY(180deg); - } - - &:hover &, - &:focus & { - &__image { - &--front { - transform: none; - } - - &--back { - transform: rotateY(180deg); - } - } - } - - &:focus & { - &__image { - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-dark), - 0 0 0 fun.convert-px(5) fun.get-var(color-primary-light-opacity); - outline: none; - } - } - - &:active & { - &__image { - box-shadow: 0 0 fun.convert-px(6) fun.convert-px(1) - fun.get-var(color-shadow-dark), - 0 0 0 fun.convert-px(7) fun.get-var(color-primary-light-opacity); - } - } - } - - &:hover & { - &__link { - transform: rotateY(180deg); - } - } -} diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss deleted file mode 100644 index 33c118e..0000000 --- a/htdocs/src/scss/layout/_main.scss +++ /dev/null @@ -1,153 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/mixins" as mix; -@use "../abstracts/placeholders"; - -.main { - display: flex; - flex-flow: column nowrap; - height: calc(100% - #{fun.get-var(toolbar-height)}); - - @include mix.media("screen") { - @include mix.dimensions("lg") { - display: grid; - grid-template-columns: 5fr 2fr; - } - - @include mix.dimensions("xl") { - grid-template-columns: 4fr 1fr; - } - } -} - -// NoScript extension seems to replace noscript tag with a span. -.main > span, -.instructions, -noscript { - background: fun.get-var(color-bg); - padding: fun.get-var(spacing-md); - text-align: center; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - grid-column: 1 / -1; - } - } -} - -.instructions { - align-items: center; - display: flex; - justify-content: center; -} - -.legal-notice { - height: 100%; - overflow-y: auto; - padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); - scrollbar-color: fun.get-var(color-primary-light-opacity) - fun.get-var(color-bg-tertiary); - width: 100%; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - grid-column: 1 / -1; - } - } -} - -.legal-notice { - height: 100%; - overflow-y: auto; - padding: clamp(#{fun.get-var(spacing-md)}, 3vw, #{fun.get-var(spacing-lg)}); - scrollbar-color: fun.get-var(color-primary-light-opacity) - fun.get-var(color-bg-tertiary); - width: 100%; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - grid-column: 1 / -1; - } - } -} - -.project-preview { - background: fun.get-var(color-bg); - flex: 0 1 100%; - min-height: 0; - width: 100%; - - @include mix.media("screen") { - @include mix.dimensions("lg") { - height: 100%; - } - } - - iframe { - border: 0; - height: 100%; - width: 100%; - } -} - -.project-details { - background: fun.get-var(color-bg-secondary); - box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow); - flex: 1 0 100%; - overflow-y: auto; - padding: fun.get-var(spacing-md); - scrollbar-color: fun.get-var(color-primary-light-opacity) - fun.get-var(color-bg-tertiary); - - @include mix.media("screen") { - @include mix.dimensions("lg") { - font-size: fun.get-var(font-size-md); - } - } - - &__description { - margin-bottom: fun.get-var(spacing-md); - white-space: pre-wrap; - } - - .list { - &--tech { - padding-left: fun.get-var(spacing-sm); - } - - &--repos { - @extend %flex-list; - - gap: fun.get-var(spacing-xs); - } - - &__link { - background-repeat: no-repeat; - background-size: contain; - box-shadow: 0 0 0 0 fun.get-var(color-shadow); - display: block; - height: fun.convert-px(50); - transition: transform 0.3s ease-in-out 0s, - box-shadow 0.15s ease-in-out 0.15s; - width: fun.convert-px(50); - - &--github { - background: url(#{fun.encode-svg('')}); - } - - &--gitlab { - background: url(#{fun.encode-svg('')}); - } - - &:hover, - &:focus { - box-shadow: fun.convert-px(-1) fun.convert-px(1) fun.convert-px(4) - fun.convert-px(2) fun.get-var(color-shadow-light); - transform: scale(1.15); - } - - &:active { - opacity: 1; - } - } - } -} diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss deleted file mode 100644 index 98e4cb5..0000000 --- a/htdocs/src/scss/layout/_nav.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use "../abstracts/functions" as fun; -@use "../abstracts/placeholders"; - -.nav { - text-align: center; - - &__label { - font-weight: 600; - } - - &__list { - @extend %reset-list; - - .btn { - width: 100%; - } - } - - &:not(&--footer) &__item { - margin: fun.get-var(spacing-2xs) 0; - } - - &:not(&--footer) &__link { - background-image: linear-gradient( - to left, - #{fun.get-var(color-bg)} 0, - #{fun.get-var(color-bg)} 50%, - #{fun.get-var(color-primary)} 50% - ); - background-position: 100% 0; - background-size: 200% 100%; - border: fun.convert-px(3) solid fun.get-var(color-border); - border-radius: fun.convert-px(50); - display: block; - font-weight: 600; - margin: auto; - padding: fun.get-var(spacing-3xs); - position: relative; - text-decoration: none; - transition: all 0.4s ease-in-out 0s; - width: 75%; - - &:hover, - &:focus { - background-position: 0 0; - color: fun.get-var(color-fg-inverted); - } - - &:active { - background-position: 100% 0; - color: fun.get-var(color-primary-dark); - text-decoration: fun.convert-px(1) solid underline; - } - - &--selected { - background: fun.get-var(color-primary-dark); - box-shadow: inset 0 0 0 4px fun.get-var(color-bg); - color: fun.get-var(color-fg-inverted); - - &:hover, - &:focus { - background: fun.get-var(color-primary-light); - } - } - } - - .btn { - margin: auto; - } -} diff --git a/htdocs/src/scss/layout/_toolbar.scss b/htdocs/src/scss/layout/_toolbar.scss deleted file mode 100644 index 00e2bd7..0000000 --- a/htdocs/src/scss/layout/_toolbar.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use "../abstracts/functions" as fun; - -.toolbar { - align-items: center; - background: fun.get-var(color-primary); - bottom: 0; - box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow-dark); - color: fun.get-var(color-fg-inverted); - display: flex; - flex-flow: row nowrap; - gap: fun.get-var(spacing-xs); - height: fun.get-var(toolbar-height); - justify-content: center; - left: 0; - padding: 0 fun.get-var(spacing-sm); - position: absolute; - right: 0; - z-index: 2; - - & > &__options { - background: fun.get-var(color-primary); - color: fun.get-var(color-fg-inverted); - font-size: fun.get-var(font-size-sm); - height: 85%; - line-height: inherit; - padding: 0 fun.get-var(spacing-xs); - - &:hover, - &:focus { - background: fun.get-var(color-bg); - color: fun.get-var(color-primary); - } - } -} -- cgit v1.2.3