Frontend: Added some responsiveness.

frontend/src/lib/components/footer.svelte

@@ -52,7 +52,7 @@
 	</div>
 	<div class="footer-slider align-center ">
 		<span>2023-{new Date().getFullYear()}{mainjson.footer.copyright}</span>
-		<div class="flex-end">
+		<div>
 			<ButtonSlider
 				keys={[mainjson.footer.about.name, mainjson.footer.vision.name, mainjson.footer.contact.name]}
 				on:click={slideText}

frontend/src/lib/components/git.svelte

@@ -135,7 +135,7 @@
 </script>
 
 <div
-    class="overlay-container"
+    class="overlay-container margin-mobile git-main"
     role="button"
     tabindex="0"
     on:mousemove={(event) => {

frontend/src/lib/components/navbar.svelte

@@ -6,7 +6,10 @@
 	import anime from "animejs";
 	import mainjson from "$lib/json/main.json";
 
-	import Search from "$lib/components/search.svelte";
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiMenuClose } from '@mdi/js';
+
+	// import Search from "$lib/components/search.svelte";
 
 	const SCROLL = 150;
 
@@ -65,13 +68,17 @@
 
 <svelte:window bind:scrollY on:scroll={changeScroll} />
 
-<!-- Navbar -->
+<!-- Navbar ONLY DESKTOP -->
-<nav class={scrollY < SCROLL ? "flex-row" : "flex-row floating"}>
+<nav
+	class={scrollY < SCROLL
+		? "flex-row navbar-full"
+		: "flex-row navbar-full floating"}
+>
 	<div
 		role="banner"
 		class={scrollY < SCROLL
 			? "disabled"
-			: "navbar-height flex-row navbar-container"}
+			: "navbar-logo navbar-height flex-row navbar-container"}
 	>
 		<div class="navbar-title navbar-content">
 			<h1 class="title">Etheryo</h1>
@@ -80,7 +87,7 @@
 
 	<div
 		role="banner"
-		class="navbar-height flex-end navbar-container navbar-overlay"
+		class="navbar-height navbar-flex-end navbar-container navbar-overlay"
 		on:mousemove={(event) => {
 			update_gradient(event, navbar_category);
 		}}
@@ -119,3 +126,8 @@
 		></div>
 	</div>
 </nav>
+<!--
+<nav class="flex-row navbar-mobile">
+	<SvgIcon type="mdi" path={mdiMenuClose}></SvgIcon>
+</nav>
+-->

frontend/src/lib/components/person.svelte

@@ -1,5 +1,6 @@
 <script>
     import "$lib/css/person.css";
+    import "$lib/css/base.css";
     import Button from "$lib/components/button.svelte";
 
     import hubjson from "$lib/json/hub.json";
@@ -12,19 +13,19 @@
 </script>
 
 <div class="flex center">
-    <div class="person-container flex-row">
+    <div class="person-container flex-col-mobile">
-        <div class="person-picture">
+        <div class="person-picture center-mobile">
             <img alt="person" src={picture} />
         </div>
         <div class="person-content flex-col">
-            <div class="person-span flex-row">
+            <div class="person-span w-100 flex-row center-mobile">
                 <h1>{name}</h1>
                 {#if pronouns != ""}
                     <span>{pronouns}</span>
                 {/if}
             </div>
             <p>{description}</p>
-            <div class="flex-row flex-end">
+            <div class="flex-row person-button center-mobile">
                 <Button
                     label={hubjson.person.knowme}
                     action={() => {

frontend/src/lib/components/project.svelte

@@ -13,7 +13,7 @@
 	export let cover =
 		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg";
 	export let title = "Title";
-	export let url = ""
+	export let url = "";
 	export let description =
 		"This is a description, you can add some explaination to your project in here! It can always be interesting to talk about some subtext before going into the subject!";
 	export let topic = topics.embedded;
@@ -72,7 +72,7 @@
 	role="button"
 	tabindex="0"
 	type="button"
-	class="project-container"
+	class="project-container margin-mobile"
 	on:mousemove={(event) => {
 		update_gradient(event, post_div);
 	}}

frontend/src/lib/css/base.css

@@ -58,21 +58,74 @@ h2 {
     --border-max: 2rem;
     --profile-content-width-max: 40rem;
     --profile-content-width-min: 36rem;
-    --content-width: 55rem;
-    --content-height: 29rem;
-    --content-3-width: calc((var(--content-width) - 2rem)/3);
 
     --width-min-desktop: 1275px;
     --width-mobile: 875px;
     /*  https://clamp.font-size.app/ 
         min=875px       max=1100px       */
+    --0-9-rem: clamp(0.7rem, -0.0778rem + 1.4222vw, 0.9rem);
     --1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem);
+    --1-1-rem: clamp(0.8rem, -0.3667rem + 2.1333vw, 1.1rem);
     --1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem);
+    --1-4-rem: clamp(1rem, -0.5556rem + 2.8444vw, 1.4rem);
     --1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem);
     --2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem);
+    --2-5-rem: clamp(1.8rem, -0.9222rem + 4.9778vw, 2.5rem);
 
+    --max-width-mobile: 700px;
+    --max-width-tablet: 1275px;
+    --min-width-desktop: 1275px;
     --navbar-height: 6rem;
     --transition: all .4s ease 0s;
+    --content-3-width: calc((var(--content-width) - 2rem)/3);
+}
+
+@media screen and (min-width: 975px) {
+    :root {
+        --content-width: 55rem;
+        --content-height: 29rem;
+    }
+}
+
+@media screen and (max-width: 975px) {
+    :root {
+        --content-width: 50rem;
+        --content-height: 25rem;
+    }
+}
+
+
+@media screen and (min-width: 640px) {
+    .flex-col-mobile {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .margin-mobile {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+
+    :root {
+        --margin-section: 2rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .flex-col-mobile {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .margin-mobile {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    :root {
+        --margin-section: 0;
+    }
 }
 
 .base {
@@ -86,7 +139,7 @@ h2 {
     font-weight: 700;
     cursor: default;
     transition: var(--transition);
-    font-size: 1.5rem;
+    font-size: var(--1-6-rem);
     margin: 0;
 }
 
@@ -105,17 +158,22 @@ h2 {
     color: var(--color-text);
     font-family: Gabarito;
     font-weight: 700;
-    font-size: 2.5rem;
+    font-size: var(--2-5-rem);
-    margin: 2rem;
+    margin: var(--margin-section);
+    margin-top: 2rem;
+    margin-bottom: 2rem;
 }
 
 .section p {
     color: var(--color-subtext);
     font-family: "JetBrains Mono";
     font-weight: 500;
-    font-size: 1rem;
+    font-size: var(--1-rem);
-    margin: 2rem;
+    margin: var(--margin-section);
-    width: var(--content-width);
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    max-width: var(--content-width);
+    text-align: justify;
 }
 
 .content {

frontend/src/lib/css/carousel.css

@@ -89,5 +89,6 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     font-size: 1.4rem;
 }

frontend/src/lib/css/cover-img.css

@@ -30,7 +30,6 @@
 }
 
 .cover-img-text h2 {
-    font-size: 1.1rem;
     font-family: 'JetBrains Mono';
     color: var(--color-background);
 }

frontend/src/lib/css/footer.css

@@ -4,6 +4,37 @@
     --height-footer: 25rem;
 }
 
+@media screen and (min-width: 640px) {
+    .footer-slider div {
+        margin-left: auto !important;
+        padding-right: 2rem;
+    }
+
+    .footer-slider>span {
+        padding-left: 2rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .footer-left {
+        min-height: 10rem;
+    }
+
+    .footer-content {
+        flex-direction: column !important;
+        height: 100% !important;
+    }
+
+    .footer-slider {
+        flex-direction: column-reverse;
+    }
+
+    .footer-slider>* {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+}
+
 .footer-container:before {
     content: "";
     position: absolute;
@@ -20,7 +51,6 @@
     flex-direction: column;
     margin-top: 3rem;
     padding-top: 2rem;
-    height: var(--height-footer);
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;
 }
@@ -58,15 +88,10 @@
 
 .footer-slider>span {
     font-family: 'JetBrains Mono';
-    padding-left: 2rem;
     color: var(--color-hiddentext);
     font-size: var(--1-rem);
 }
 
-.footer-slider div {
-    padding-right: 2rem;
-}
-
 .footer-page {
     min-height: 15rem;
     max-height: 15rem;

frontend/src/lib/css/git.css

@@ -1,7 +1,11 @@
+.git-main {
+    width: var(--content-3-width);
+}
+
 .git-container {
     background-color: #00000000;
     border-radius: 1rem;
-    width: var(--content-3-width);
+    width: auto;
     height: 10rem;
     cursor: pointer;
     overflow: hidden;
@@ -19,7 +23,7 @@
 .git-container h1 {
     font-family: "JetBrains Mono";
     font-weight: 800;
-    font-size: 1.2rem;
+    font-size: var(--1-2-rem);
     margin: 1rem;
     margin-top: 0;
 }
@@ -42,7 +46,7 @@
 
 .git-commit svg {
     transform: translate(0) !important;
-    width: 2rem;
+    width: var(--2-rem);
     margin-left: 0.3rem;
     margin-right: 0.3rem;
 }
@@ -50,7 +54,7 @@
 .git-commit p {
     color: var(--color-subtext);
     font-family: "JetBrains Mono";
-    font-size: 1rem;
+    font-size: var(--1-rem);
     margin: 0;
     margin-left: 0.6rem;
     user-select: none;

frontend/src/lib/css/navbar.css

@@ -8,6 +8,68 @@
     --navbar-blur: blur(0.6rem);
 }
 
+/* Responsive */
+
+@media screen and (min-width: 640px) {
+    .navbar-flex-end {
+        margin-left: auto !important;
+    }
+
+    .navbar-height {
+        height: var(--navbar-height);
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    .navbar-categories {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+/* Little window */
+@media screen and (max-width: 640px) {
+    .navbar-logo {
+        display: none !important;
+    }
+
+    .navbar-height {
+        height: var(--navbar-height);
+        width: 95dvw;
+        margin-left: 2.5dvw;
+        margin-right: 2.5dvw;
+    }
+}
+
+/* Mobile */
+@media screen and (max-width: 480px) {
+    .navbar-content {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        width: 100% !important;
+        height: calc(var(--navbar-height)*0.75) !important;
+        box-sizing: border-box; 
+    }
+
+    .navbar-height {
+        height: calc(var(--navbar-height)*0.75);
+        width: 100dvw;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+
+    nav {
+        padding-top: 0 !important;
+        height: calc(var(--navbar-height)*0.75) !important;
+    }
+
+    .navbar-categories {
+        justify-content: left !important;
+    }
+}
+
 nav {
     height: var(--navbar-height);
     width: 100%;
@@ -59,17 +121,12 @@ a {
 
 .navbar-content {
     grid-area: overlay;
-    z-index: var(--z-index-normal);
+    z-index: var(--z-index-front);
     width: inherit;
     display: flex;
 }
 
 /* Each element */
-.navbar-height {
-    height: var(--navbar-height);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
 
 .navbar-title {
     margin-left: 3rem;
@@ -78,9 +135,8 @@ a {
 
 .navbar-categories {
     align-items: center;
+    justify-content: center;
     height: var(--navbar-height);
-    padding-left: 1rem;
-    padding-right: 1rem;
 }
 
 .navbar-categories a {
@@ -90,7 +146,6 @@ a {
     font-size: 1rem;
     transition: var(--transition);
     color: var(--color-background);
-    transition: var(--transition);
 }
 
 .navbar-categories div {
@@ -152,6 +207,7 @@ a {
     padding-top: 0;
     -webkit-backdrop-filter: var(--navbar-blur);
     backdrop-filter: var(--navbar-blur);
+    width: 100dvw;
 }
 
 .floating>div {

frontend/src/lib/css/overlay.css

@@ -4,8 +4,6 @@
         "overlay-back"
         "overlay-front"
         "overlay";
-    margin-left: 1rem;
-    margin-right: 1rem;
 }
 
 .overlay {

frontend/src/lib/css/person.css

@@ -1,5 +1,27 @@
+@media screen and (min-width: 640px) {
     :root {
         --picture-width: 15rem;
+        --picture-margin: 3rem;
+        --span-margin: 1rem;
+    }
+
+    .person-button {
+        margin-left: auto !important;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    :root {
+        --picture-width: 10rem;
+        --picture-margin: 0;
+        --span-margin: 0;
+    }
+
+    .center-mobile {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
 }
 
 .person-container {
@@ -15,7 +37,7 @@
 }
 
 .person-picture {
-    margin-right: 3rem;
+    margin-right: var(--picture-margin);
 }
 
 .person-content {
@@ -24,10 +46,14 @@
     width: 100%;
 }
 
+.person-span {
+    width: 100%;
+}
+
 .person-span>span {
     background-color: var(--color-pill);
     margin-left: 1rem;
-    margin-right: 1rem;
+    margin-right: var(--span-margin);
     padding: 0.5rem;
     border-radius: var(--border-min);
     font-size: var(--1-2-rem);

frontend/src/lib/css/project.css

@@ -1,40 +1,12 @@
-
-
-@media screen and (max-width: 1275px) {
-    .project-container {
-        height: var(--content-height);
-        width: var(--content-3-width);
-    }
-
-    .project {
-        height: var(--content-height);
-    }
-}
-
-@media screen and (min-width: 1276px) {
-    .project-container {
-        height: var(--content-height);
-        width: var(--content-3-width);
-    }
-
-    .project {
-        height: var(--content-height);
-    }
-}
-
-.project img {
-    height: calc(var(--content-3-width)*3/4);
-    width: 100%;
-}
-
 .project-container {
     display: grid;
     grid-template-areas:
         "post-min-overlay-back"
         "post-min-overlay-front"
         "project";
-    margin-left: 1rem;
+    width: 100%;
-    margin-right: 1rem;
+    max-width: var(--content-3-width);
+    height: var(--content-height);
 }
 
 .project {
@@ -43,10 +15,11 @@
     flex-direction: column;
     grid-area: overlay;
     z-index: var(--z-index-front);
+    height: var(--content-height);
 }
 
 .project img {
-    width: auto;
+    height: calc(var(--content-3-width)*3/4);
     width: 100%;
     object-fit: cover;
     border-top-left-radius: 1rem;
@@ -59,11 +32,10 @@
 .project h1 {
     font-family: 'JetBrains Mono';
     font-weight: 800;
-    font-size: 1.1rem;
+    font-size: var(--1-1-rem);
     margin-left: 1rem;
     margin-right: 1rem;
     margin-bottom: 0;
-    user-select: none;
     /* Overflow */
     overflow: hidden;
     display: -webkit-box;
@@ -71,13 +43,14 @@
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     line-clamp: 2;
+
 }
 
 .project p {
     font-family: 'JetBrains Mono';
     font-weight: 400;
     font-style: italic;
-    font-size: 0.9rem;
+    font-size: var(--0-9-rem);
     margin-left: 1rem;
     margin-right: 1rem;
     /* Overflow */
@@ -92,6 +65,7 @@
 .project span {
     font-family: 'JetBrains Mono';
     color: var(--color-background);
+    font-size: var(--0-9-rem);
     margin: 0.7rem;
     padding: 0;
 

frontend/src/routes/+page.svelte

@@ -100,7 +100,7 @@
 		<h1>{hubjson.project.title}</h1>
 		<p>{hubjson.project.description}</p>
 	</div>
-	<div class="flex w-100 justify-center">
+	<div class="flex w-100 center flex-col-mobile">
 		{#each hubjson.projects as project, index}
 			<Project
 				cover={hubjson.projects[index].cover}
@@ -115,7 +115,7 @@
 		<h1>{hubjson.lab.title}</h1>
 		<p>{hubjson.lab.description}</p>
 	</div>
-	<div class="flex w-100 justify-center">
+	<div class="flex w-100 center flex-col-mobile">
 		{#each hubjson.repos as repo}
 			<Git {repo} />
 		{/each}