Frontend: Added some responsiveness.
This commit is contained in:
parent
9698bf2f43
commit
308b4e1114
15 changed files with 248 additions and 94 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="overlay-container"
|
||||
class="overlay-container margin-mobile git-main"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:mousemove={(event) => {
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
<nav class={scrollY < SCROLL ? "flex-row" : "flex-row floating"}>
|
||||
<!-- Navbar ONLY DESKTOP -->
|
||||
<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>
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -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-picture">
|
||||
<div class="person-container flex-col-mobile">
|
||||
<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={() => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
margin: 2rem;
|
||||
font-size: var(--2-5-rem);
|
||||
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;
|
||||
margin: 2rem;
|
||||
width: var(--content-width);
|
||||
font-size: var(--1-rem);
|
||||
margin: var(--margin-section);
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: var(--content-width);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -89,5 +89,6 @@
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
}
|
||||
|
||||
.cover-img-text h2 {
|
||||
font-size: 1.1rem;
|
||||
font-family: 'JetBrains Mono';
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@
|
|||
"overlay-back"
|
||||
"overlay-front"
|
||||
"overlay";
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
margin-right: 1rem;
|
||||
width: 100%;
|
||||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue