diff --git a/assets/css/abstracts/_index.scss b/assets/css/abstracts/_index.scss index 78c2c13..8d249cf 100644 --- a/assets/css/abstracts/_index.scss +++ b/assets/css/abstracts/_index.scss @@ -2,4 +2,4 @@ // ABSTRACTS (INDEX) // -------------------------------------------------- -@forward 'variables'; +@forward "variables"; diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index e5b0ef4..0e2670e 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -2,58 +2,23 @@ // VARIABLES // -------------------------------------------------- -:root { +// Fonts +$text-font-family: Helvetica, Arial, sans-serif; +$text-font-size: 0.9rem; +$text-line-height: 1.15; - // Fonts +// Dimensions +$app-width: min(100%, 120rem); // => 1920px +$large-content-width: min(100%, 100rem); // => 1600px +$medium-content-width: min(100%, 80rem); // => 1280px +$small-content-width: min(100%, 60rem); // => 960px +$icon-size: clamp(2rem, 1.667rem + 0.694vw, 2.5rem); // Viewport range: 48rem <=> 120rem +$icon-spacing: clamp(0.25rem, 0.083rem + 0.347vw, 0.5rem); // Viewport range: 48rem <=> 120rem - --text-font-family: Helvetica, Arial, sans-serif; - --regular-font-weight: 400; - --medium-font-weight: 500; - --semi-bold-font-weight: 600; - --bold-font-weight: 700; - --text-font-size: 1rem; - --text-line-height: 1.1; - - // Dimensions - - --icon-size: 3rem; - --sidebar-padding: 0.8rem; - - // Colors - - --black: #000; - --white: #fff; -} +// Colors +$black: #000; +$white: #fff; // Media queries - -$tablet-media-query: 48rem; -$desktop-media-query: 62rem; - -@media screen and (min-width: $tablet-media-query) { - - :root { - - // Fonts - - --text-font-size: 0.95rem; - - // Dimensions - - --icon-size: 2.8rem; - } -} - -@media screen and (min-width: $desktop-media-query) { - - :root { - - // Fonts - - --text-font-size: 0.9rem; - - // Dimensions - - --icon-size: 2.6rem; - } -} +$tablet-media-query: 48rem; // => 768px +$desktop-media-query: 62rem; // => 992px diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss index 6b119df..3d8cd34 100644 --- a/assets/css/base/_base.scss +++ b/assets/css/base/_base.scss @@ -1,79 +1,111 @@ -@use '../abstracts' as *; +@use "../abstracts" as *; // -------------------------------------------------- // BASE STYLE // -------------------------------------------------- -// Fonts and colors - body { - font-family: var(--text-font-family); - font-size: var(--text-font-size); - line-height: var(--text-line-height); - color: var(--black); + color: $black; + background-color: $white; + font-family: $text-font-family; + font-size: $text-font-size; + line-height: $text-line-height; } strong { - font-weight: var(--bold-font-weight); + font-weight: 700; } em { font-style: italic; } -// Link style - a { - color: var(--black); - text-decoration: none; - transition: text-decoration 200ms ease-in-out; - - &:hover, - &:focus, - &:active { - text-decoration: underline; - } + color: $black; + text-decoration: underline; + text-underline-position: under; &:focus-visible { - outline: 1px dashed var(--black); + outline: 1px dashed $black; outline-offset: 2px; } } -// General layout +// -------------------------------------------------- +// BASE LAYOUT +// -------------------------------------------------- body { - min-height: 100vh !important; + display: flex; + flex-direction: column; + align-items: center; - header { - position: fixed; - top: 0; + #app { + position: relative; + display: grid; + grid-template-columns: auto 1fr auto; + justify-content: center; + justify-items: center; + width: $app-width; - .header__logo { - width: 5rem; + header { + grid-column: 1; + position: sticky; + top: 0; + height: 100vh; // Fallback in case dvh unit is not supported + height: 100dvh; + padding: 1rem; + + .header__logo { + position: relative; + width: $icon-size; + aspect-ratio: calc(1 / 2); + background-image: url("/public/images/signature-vertical.svg"); + background-size: contain; + background-position: center; + + @media screen and (min-width: $desktop-media-query) { + width: calc(($icon-size * 2) + $icon-spacing); + aspect-ratio: calc(2 / 1); + background-image: url("/public/images/signature-horizontal.svg"); + } + } } - } - main {} + main { + grid-column: 2; + width: $large-content-width; + padding: calc(2rem + $icon-size) 0; + } - footer { - position: fixed; - bottom: 0; - display: flex; - flex-direction: column; - justify-content: flex-end; - gap: 0.8rem; - - .footer__link { + footer { + grid-column: 3; + position: sticky; + top: 0; + height: 100vh; // Fallback in case dvh unit is not supported + height: 100dvh; display: flex; - justify-content: center; - align-items: center; - width: var(--icon-size); - height: var(--icon-size); + flex-direction: column; + justify-content: flex-end; + gap: $icon-spacing; + padding: 1rem; - svg { - width: 100%; - height: 100%; + @media screen and (min-width: $desktop-media-query) { + flex-direction: row; + align-items: flex-end; + } + + .footer__link { + display: flex; + justify-content: center; + align-items: center; + width: $icon-size; + aspect-ratio: 1; + + svg { + width: 100%; + height: 100%; + } } } } diff --git a/assets/css/base/_index.scss b/assets/css/base/_index.scss index 0fff0d7..788976a 100644 --- a/assets/css/base/_index.scss +++ b/assets/css/base/_index.scss @@ -2,5 +2,5 @@ // BASE (INDEX) // -------------------------------------------------- -@forward 'minireset'; -@forward 'base'; +@forward "minireset"; +@forward "base"; diff --git a/assets/css/main.scss b/assets/css/main.scss index 60bee4b..dba57a9 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -2,6 +2,6 @@ // MAIN // -------------------------------------------------- -@use '@splidejs/splide/dist/css/splide-core.min'; +@use "@splidejs/splide/dist/css/splide-core.min"; @use "base" as *; @use "pages" as *; diff --git a/assets/css/pages/_home.scss b/assets/css/pages/_home.scss index 55ccb40..1acbb34 100644 --- a/assets/css/pages/_home.scss +++ b/assets/css/pages/_home.scss @@ -1,4 +1,4 @@ -@use '../abstracts' as *; +@use "../abstracts" as *; // -------------------------------------------------- // HOME STYLE @@ -10,11 +10,11 @@ display: flex; flex-direction: column; align-items: center; - gap: 1rem; + gap: 2rem; .home__gallery-item { display: table; - max-width: min(1280px, 100%); + max-width: $medium-content-width; .home__carousel { @@ -52,6 +52,8 @@ caption-side: bottom; width: fit-content; margin: 0.5rem auto 0; + padding: 0 0.5rem; + text-align: center; } } } diff --git a/assets/css/pages/_index.scss b/assets/css/pages/_index.scss index eb7d905..890ceaf 100644 --- a/assets/css/pages/_index.scss +++ b/assets/css/pages/_index.scss @@ -2,4 +2,4 @@ // PAGES (INDEX) // -------------------------------------------------- -@forward 'home'; +@forward "home"; diff --git a/assets/js/app.js b/assets/js/app.js index 183ed05..75e1f41 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -31,7 +31,7 @@ function setUpCarousels() { rewind: true, rewindByDrag: true, role: 'undefined', - speed: 250, + speed: 0, type: 'fade', width: 'auto', }); diff --git a/public/icons/apple-mail.svg b/public/icons/apple-mail.svg deleted file mode 100644 index 595c9bf..0000000 --- a/public/icons/apple-mail.svg +++ /dev/null @@ -1,18 +0,0 @@ - diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg deleted file mode 100644 index e3c2906..0000000 --- a/public/icons/instagram.svg +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/public/icons/logo.svg b/public/icons/logo.svg deleted file mode 100644 index 3359217..0000000 --- a/public/icons/logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/images/remix-instagram-fill.svg b/public/images/remix-instagram-fill.svg new file mode 100644 index 0000000..b0662ca --- /dev/null +++ b/public/images/remix-instagram-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/remix-mail-fill.svg b/public/images/remix-mail-fill.svg new file mode 100644 index 0000000..8960d11 --- /dev/null +++ b/public/images/remix-mail-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/signature-horizontal.svg b/public/images/signature-horizontal.svg new file mode 100644 index 0000000..0c11e23 --- /dev/null +++ b/public/images/signature-horizontal.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/signature-vertical.svg b/public/images/signature-vertical.svg new file mode 100644 index 0000000..ec1ba3b --- /dev/null +++ b/public/images/signature-vertical.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/site/templates/base.twig b/site/templates/base.twig index f6d42b7..08b895b 100644 --- a/site/templates/base.twig +++ b/site/templates/base.twig @@ -2,62 +2,64 @@ - + - {{ snippet('metadata') }} - {{ snippet('favicon') }} + {{ snippet('metadata') }} + {{ snippet('favicon') }} - {# CSS #} - {% block stylesheets %} - - {% endblock %} + {# CSS #} + {% block stylesheets %} + + {% endblock %} - {# JavaScript #} - {% block scripts %} - + {% endblock %} + + {# Umami #} + - {% endblock %} - {# Umami #} - + - + - +
- {% block header %} -
- -
- {% endblock %} + {% block header %} +
+ +
+ {% endblock %} - {% block main %} - {% endblock %} + {% block main %} + {% endblock %} - {% block footer %} - - {% endblock %} + {% block footer %} + + {% endblock %} - +
+ +