diff --git a/assets/css/abstracts/_index.scss b/assets/css/abstracts/_index.scss
index 8d249cf..78c2c13 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 0e2670e..e5b0ef4 100644
--- a/assets/css/abstracts/_variables.scss
+++ b/assets/css/abstracts/_variables.scss
@@ -2,23 +2,58 @@
// VARIABLES
// --------------------------------------------------
-// Fonts
-$text-font-family: Helvetica, Arial, sans-serif;
-$text-font-size: 0.9rem;
-$text-line-height: 1.15;
+:root {
-// 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
+ // Fonts
-// Colors
-$black: #000;
-$white: #fff;
+ --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;
+}
// Media queries
-$tablet-media-query: 48rem; // => 768px
-$desktop-media-query: 62rem; // => 992px
+
+$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;
+ }
+}
diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss
index 3d8cd34..6b119df 100644
--- a/assets/css/base/_base.scss
+++ b/assets/css/base/_base.scss
@@ -1,111 +1,79 @@
-@use "../abstracts" as *;
+@use '../abstracts' as *;
// --------------------------------------------------
// BASE STYLE
// --------------------------------------------------
+// Fonts and colors
+
body {
- color: $black;
- background-color: $white;
- font-family: $text-font-family;
- font-size: $text-font-size;
- line-height: $text-line-height;
+ font-family: var(--text-font-family);
+ font-size: var(--text-font-size);
+ line-height: var(--text-line-height);
+ color: var(--black);
}
strong {
- font-weight: 700;
+ font-weight: var(--bold-font-weight);
}
em {
font-style: italic;
}
+// Link style
+
a {
- color: $black;
- text-decoration: underline;
- text-underline-position: under;
+ color: var(--black);
+ text-decoration: none;
+ transition: text-decoration 200ms ease-in-out;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
&:focus-visible {
- outline: 1px dashed $black;
+ outline: 1px dashed var(--black);
outline-offset: 2px;
}
}
-// --------------------------------------------------
-// BASE LAYOUT
-// --------------------------------------------------
+// General layout
body {
- display: flex;
- flex-direction: column;
- align-items: center;
+ min-height: 100vh !important;
- #app {
- position: relative;
- display: grid;
- grid-template-columns: auto 1fr auto;
- justify-content: center;
- justify-items: center;
- width: $app-width;
+ header {
+ position: fixed;
+ top: 0;
- 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");
- }
- }
+ .header__logo {
+ width: 5rem;
}
+ }
- main {
- grid-column: 2;
- width: $large-content-width;
- padding: calc(2rem + $icon-size) 0;
- }
+ main {}
- footer {
- grid-column: 3;
- position: sticky;
- top: 0;
- height: 100vh; // Fallback in case dvh unit is not supported
- height: 100dvh;
+ footer {
+ position: fixed;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ gap: 0.8rem;
+
+ .footer__link {
display: flex;
- flex-direction: column;
- justify-content: flex-end;
- gap: $icon-spacing;
- padding: 1rem;
+ justify-content: center;
+ align-items: center;
+ width: var(--icon-size);
+ height: var(--icon-size);
- @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%;
- }
+ svg {
+ width: 100%;
+ height: 100%;
}
}
}
diff --git a/assets/css/base/_index.scss b/assets/css/base/_index.scss
index 788976a..0fff0d7 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 dba57a9..60bee4b 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 1acbb34..55ccb40 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: 2rem;
+ gap: 1rem;
.home__gallery-item {
display: table;
- max-width: $medium-content-width;
+ max-width: min(1280px, 100%);
.home__carousel {
@@ -52,8 +52,6 @@
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 890ceaf..eb7d905 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 75e1f41..183ed05 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -31,7 +31,7 @@ function setUpCarousels() {
rewind: true,
rewindByDrag: true,
role: 'undefined',
- speed: 0,
+ speed: 250,
type: 'fade',
width: 'auto',
});
diff --git a/public/icons/apple-mail.svg b/public/icons/apple-mail.svg
new file mode 100644
index 0000000..595c9bf
--- /dev/null
+++ b/public/icons/apple-mail.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/icons/instagram.svg b/public/icons/instagram.svg
new file mode 100644
index 0000000..e3c2906
--- /dev/null
+++ b/public/icons/instagram.svg
@@ -0,0 +1,31 @@
+
diff --git a/public/icons/logo.svg b/public/icons/logo.svg
new file mode 100644
index 0000000..3359217
--- /dev/null
+++ b/public/icons/logo.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/images/remix-instagram-fill.svg b/public/images/remix-instagram-fill.svg
deleted file mode 100644
index b0662ca..0000000
--- a/public/images/remix-instagram-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/images/remix-mail-fill.svg b/public/images/remix-mail-fill.svg
deleted file mode 100644
index 8960d11..0000000
--- a/public/images/remix-mail-fill.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/images/signature-horizontal.svg b/public/images/signature-horizontal.svg
deleted file mode 100644
index 0c11e23..0000000
--- a/public/images/signature-horizontal.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/public/images/signature-vertical.svg b/public/images/signature-vertical.svg
deleted file mode 100644
index ec1ba3b..0000000
--- a/public/images/signature-vertical.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/site/templates/base.twig b/site/templates/base.twig
index 08b895b..f6d42b7 100644
--- a/site/templates/base.twig
+++ b/site/templates/base.twig
@@ -2,64 +2,62 @@
-
+
- {{ 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 %}
-
-
-
+
Internal server error - Forgejo
500
Internal server error
Forgejo version: 11.0.3+gitea-1.22.0