Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring: Reworked some css elements and variables such as width and height for components.

Browse source
This commit is contained in:
Yohan Boujon 2025-04-06 22:34:12 +02:00
parent b7abea2326
commit edecb33754
4 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/lib/css/base.css
View file

@ -53,8 +53,9 @@ h2 {
--border-max: 2rem; --border-max: 2rem;
--profile-content-width-max: 40rem; --profile-content-width-max: 40rem;
--profile-content-width-min: 36rem; --profile-content-width-min: 36rem;
--content-width: 60rem; --content-width: 55rem;
--content-height: 55rem; --content-height: 29rem;
--content-3-width: calc((var(--content-width) - 2rem)/3);
--width-min-desktop: 1275px; --width-min-desktop: 1275px;
--width-mobile: 875px; --width-mobile: 875px;

2
src/lib/css/git.css
View file

@ -1,7 +1,7 @@
.git-container { .git-container {
background-color: #00000000; background-color: #00000000;
border-radius: 1rem; border-radius: 1rem;
width: calc(var(--content-width)/3 - 2rem); width: var(--content-3-width);
height: 10rem; height: 10rem;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;

14
src/lib/css/project.css
View file

@ -2,28 +2,28 @@
@media screen and (max-width: 1275px) { @media screen and (max-width: 1275px) {
.project-container { .project-container {
height: calc(var(--content-height)/2); height: var(--content-height);
width: calc((var(--content-width) + 6rem - 4rem)/3); width: var(--content-3-width);
} }
.project { .project {
height: calc(var(--content-height)/2); height: var(--content-height);
} }
} }
@media screen and (min-width: 1276px) { @media screen and (min-width: 1276px) {
.project-container { .project-container {
height: calc(var(--content-height)/2); height: var(--content-height);
width: calc((var(--content-width) + 6rem - 4rem)/3); width: var(--content-3-width);
} }
.project { .project {
height: calc(var(--content-height)/2); height: var(--content-height);
} }
} }
.project img { .project img {
height: calc((var(--content-width)+ 6rem - 4rem)/3*3/4); height: calc(var(--content-3-width)*3/4);
width: 100%; width: 100%;
} }

20
src/routes/+page.svelte
View file

@ -44,17 +44,15 @@
<p>{hubjson.project.description}</p> <p>{hubjson.project.description}</p>
</div> </div>
<div class="flex w-100 justify-center"> <div class="flex w-100 justify-center">
<div class="content flex-row center"> {#each hubjson.projects as project, index}
{#each hubjson.projects as project, index} <Project
<Project cover={hubjson.projects[index].cover}
cover={hubjson.projects[index].cover} title={hubjson.projects[index].title}
title={hubjson.projects[index].title} url={hubjson.projects[index].url}
url={hubjson.projects[index].url} description={hubjson.projects[index].description}
description={hubjson.projects[index].description} topic={topics[hubjson.projects[index].topic]}
topic={topics[hubjson.projects[index].topic]} />
/> {/each}
{/each}
</div>
</div> </div>
<div class="section"> <div class="section">
<h1>{hubjson.lab.title}</h1> <h1>{hubjson.lab.title}</h1>