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

Compare commits

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

No commits in common. "625fcb5986ed8d94d4487b2a8dfea05f2b2aae82" and "b7abea23269c31dbc185e0935af1c51d760d9a5a" have entirely different histories.
625fcb5986 ... b7abea2326

16 changed files with 34 additions and 150 deletions
Show stats Expand all files Collapse all files

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

@ -1,21 +0,0 @@
<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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.article-banner-content {

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

@ -42,8 +42,7 @@ 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;
@ -54,9 +53,8 @@ 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);
--content-width: 60rem;
--content-height: 55rem;
--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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

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

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

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

@ -1,78 +0,0 @@
.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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
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: var(--content-height);
width: var(--content-3-width);
height: calc(var(--content-height)/2);
width: calc((var(--content-width) + 6rem - 4rem)/3);
}
.project {
height: var(--content-height);
height: calc(var(--content-height)/2);
}
}
@media screen and (min-width: 1276px) {
.project-container {
height: var(--content-height);
width: var(--content-3-width);
height: calc(var(--content-height)/2);
width: calc((var(--content-width) + 6rem - 4rem)/3);
}
.project {
height: var(--content-height);
height: calc(var(--content-height)/2);
}
}
.project img {
height: calc(var(--content-3-width)*3/4);
height: calc((var(--content-width)+ 6rem - 4rem)/3*3/4);
width: 100%;
}

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

@ -1,7 +1,7 @@
.search {
display: flex;
flex-direction: row;
box-shadow: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
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: var(--shadow);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
border-radius: 1rem;
position: absolute !important;
z-index: 1;

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

@ -47,16 +47,5 @@
"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,7 +6,6 @@
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";
@ -45,15 +44,17 @@
<p>{hubjson.project.description}</p>
</div>
<div class="flex w-100 justify-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 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>
</div>
<div class="section">
<h1>{hubjson.lab.title}</h1>
@ -68,9 +69,4 @@
<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>