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

Compare commits

base: Etheryo:b7abea23269c31dbc185e0935af1c51d760d9a5a
Branches Tags
Etheryo:main
Etheryo:rust
...
compare: Etheryo:625fcb5986ed8d94d4487b2a8dfea05f2b2aae82
Branches Tags
Etheryo:main
Etheryo:rust

3 commits
b7abea2326 ... 625fcb5986

Author SHA1 Message Date
Yohan Boujon
625fcb5986 Added HoverCard. 2025-04-06 23:23:39 +02:00
Yohan Boujon
3b250c5b4f Refactoring: new css variable "--shadow" because redundant. 2025-04-06 22:36:38 +02:00
Yohan Boujon
edecb33754 Refactoring: Reworked some css elements and variables such as width and height for components. 2025-04-06 22:34:12 +02:00
16 changed files with 150 additions and 34 deletions
Show stats Expand all files Collapse all files

21
src/lib/components/hover-card.svelte Normal file
View file

@ -0,0 +1,21 @@
<script>
import "$lib/css/base.css";
import "$lib/css/hover-card.css"
export let picture;
export let title = "Title";
export let description = "This is a description, you can add some explaination to your picture in here!";
</script>
<div class="hover-card-container">
<div class="hover-card">
<img alt="hover-card" src={picture} />
</div>
<div class="hover-card-overlay"></div>
<div class="hover-card flex-row">
<div class="hover-card-metadata margin-bot-force">
<h1>{title}</h1>
<p>{description}</p>
</div>
</div>
</div>

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

@ -2,7 +2,7 @@
border-radius: 1rem;
color: var(--color-text);
background-image: var(--background-light);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
}
.archive {

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

@ -19,7 +19,7 @@
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
}
.article-banner-content {

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

@ -42,7 +42,8 @@ h2 {
--background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(15, 11, 17, 0.1) 100%);
--background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
--shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
--shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
--z-index-last: -1;
--z-index-normal: 0;
--z-index-front: 1;
@ -53,8 +54,9 @@ h2 {
--border-max: 2rem;
--profile-content-width-max: 40rem;
--profile-content-width-min: 36rem;
--content-width: 60rem;
--content-height: 55rem;
--content-width: 55rem;
--content-height: 29rem;
--content-3-width: calc((var(--content-width) - 2rem)/3);
--width-min-desktop: 1275px;
--width-mobile: 875px;

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

@ -5,7 +5,7 @@
margin-left: 1rem;
margin-right: 1rem;
background-image: var(--background-light);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
border-radius: 1rem;
}

2
src/lib/css/cover-img.css
View file

@ -55,5 +55,5 @@
object-fit: cover;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
}

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

@ -1,7 +1,7 @@
.git-container {
background-color: #00000000;
border-radius: 1rem;
width: calc(var(--content-width)/3 - 2rem);
width: var(--content-3-width);
height: 10rem;
cursor: pointer;
overflow: hidden;
@ -94,6 +94,6 @@
transform: translateY(1rem);
padding: 0.8rem;
border-radius: 1rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
opacity: 0.8;
}

78
src/lib/css/hover-card.css Normal file
View file

@ -0,0 +1,78 @@
.hover-card-container {
display: grid;
grid-template-areas:
"hover-card-metadata"
"hover-card-overlay"
"hover-card-picture";
margin-right: 1rem;
margin-left: 1rem;
width: var(--content-3-width);
height: var(--content-3-width);
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
}
.hover-card-container:hover {
transform: translateY(-0.3rem) scale(102%);
box-shadow: var(--shadow-hover);
}
.hover-card-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hover-card {
grid-area: overlay;
width: var(--content-3-width);
height: var(--content-3-width);
}
.hover-card-overlay {
grid-area: overlay;
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, #120e14 0%, #120e14dc 30%, #120e1491 35%, rgba(0,0,0,0) 45%);
}
.hover-card-metadata {
width: 100%;
height: 7rem;
color: var(--color-background);
}
.hover-card-metadata h1 {
font-family: 'JetBrains Mono';
font-weight: 800;
font-size: 1.3rem;
margin: 1rem;
margin-bottom: 0;
user-select: none;
/* Overflow */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.hover-card-metadata p {
font-family: 'JetBrains Mono';
font-weight: 400;
font-style: italic;
font-size: 0.8rem;
margin-left: 1rem;
margin-right: 1rem;
/* Overflow */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
line-clamp: 2;
}

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

@ -19,7 +19,7 @@
.overlay-front {
grid-area: overlay;
background-image: var(--background-light);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
border-radius: 1rem;
}

2
src/lib/css/post-min.css vendored
View file

@ -74,7 +74,7 @@
.post-min-overlay-front {
grid-area: overlay;
background-image: var(--background-light);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
border-radius: 1rem;
}

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

@ -41,7 +41,7 @@
grid-area: overlay;
background-image: var(--background-light);
border-radius: 1rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
}
.post-overlay-back {

2
src/lib/css/profile/base.css
View file

@ -131,6 +131,6 @@
.profile-content {
padding: 3rem;
border-radius: 1rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
background-image: var(--background-light);
}

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

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

4
src/lib/css/search.css
View file

@ -1,7 +1,7 @@
.search {
display: flex;
flex-direction: row;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
border-radius: 5rem;
background-color: var(--color-background);
margin: 0 !important;
@ -37,7 +37,7 @@
width: inherit;
height: 16rem;
background-color: var(--color-background);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
box-shadow: var(--shadow);
border-radius: 1rem;
position: absolute !important;
z-index: 1;

13
src/lib/json/hub.json
View file

@ -47,5 +47,16 @@
"photo": {
"title": "Photographie",
"description": "Je ne suis pas un professionnel, mais il faut avouer que prendre des photos, faire du montage dessus, ou simplement régler la colorimétrie fait partie de mes passions. Cette petite galerie montre mes dernières photos, souvent liées à une émotion actuelle."
}
},
"photos": [
{
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg"
},
{
"url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg"
},
{
"url": "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
}
]
}

26
src/routes/+page.svelte
View file

@ -6,6 +6,7 @@
import Person from "$lib/components/person.svelte";
import Project from "$lib/components/project.svelte";
import Git from "$lib/components/git.svelte";
import HoverCard from "$lib/components/hover-card.svelte";
import topics from "$lib/ts/topic.ts";
@ -44,17 +45,15 @@
<p>{hubjson.project.description}</p>
</div>
<div class="flex w-100 justify-center">
<div class="content flex-row center">
{#each hubjson.projects as project, index}
<Project
cover={hubjson.projects[index].cover}
title={hubjson.projects[index].title}
url={hubjson.projects[index].url}
description={hubjson.projects[index].description}
topic={topics[hubjson.projects[index].topic]}
/>
{/each}
</div>
{#each hubjson.projects as project, index}
<Project
cover={hubjson.projects[index].cover}
title={hubjson.projects[index].title}
url={hubjson.projects[index].url}
description={hubjson.projects[index].description}
topic={topics[hubjson.projects[index].topic]}
/>
{/each}
</div>
<div class="section">
<h1>{hubjson.lab.title}</h1>
@ -69,4 +68,9 @@
<h1>{hubjson.photo.title}</h1>
<p>{hubjson.photo.description}</p>
</div>
<div class="flex w-100 justify-center">
{#each hubjson.photos as photo}
<HoverCard picture={photo.url} />
{/each}
</div>
</div>