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

Addded min version for desktop.

Browse source
This commit is contained in:
Yohan Boujon 2024-08-18 00:35:45 +01:00
parent befe5a5bf4
commit b59f3c1a12
7 changed files with 142 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/lib/components/archive.svelte
View file

@ -7,7 +7,7 @@
export let fontPost = 1;
export let paddingPost = 0.5;
export let width = "100%";
export let customStyle = "";
const posts = {
'Août 2024': [
@ -38,7 +38,6 @@
const size = Object.keys(posts).length;
let archiveRefs = Array(size);
let archivePostRefs = Array(size);
let containerRef;
let isActive = Array(size).fill(false);
let indexArchive = -1;
@ -103,9 +102,8 @@
</script>
<div
class="archive-container"
style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem; width:{width};"
bind:this={containerRef}
class="archive-container {customStyle}"
style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem;"
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#each Object.keys(posts) as date, index}

33
frontend/src/lib/components/social.svelte
View file

@ -9,34 +9,35 @@
{
pic: 'https://cdn.simpleicons.org/instagram',
color: 'E4405F',
alt: 'instagram',
alt: 'Instagram',
name: '@yo.boujon',
link: 'https://www.instagram.com/yoboujon/'
},
{
pic: 'https://cdn.simpleicons.org/github',
color: '181717',
alt: 'github',
alt: 'Github',
name: 'yoboujon',
link: 'https://github.com/yoboujon'
},
{
pic: 'https://cdn.simpleicons.org/youtube',
color: 'FF0000',
alt: 'youtube',
alt: 'Youtube',
name: '@yoboujon',
link: 'https://www.youtube.com/@yoboujon'
},
{
pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
color: '0A66C2',
alt: 'linkedin',
alt: 'Linkedin',
name: 'Yohan Boujon',
link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
},
{
icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
color: 'AD62AA',
alt: 'Etheryo',
name: 'Etheryo',
link: 'https://www.etheryo.fr'
}
@ -83,26 +84,28 @@
}
</script>
<div class="social" bind:this={div_social}>
<div class="social social-width" bind:this={div_social}>
<h1>Liens</h1>
{#each social_list as s}
<div class="social-link align-center">
{#if s.pic === undefined}
<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
{:else}
<img alt={s.alt} src={s.pic} />
{/if}
<a
href={s.link}
target="_blank"
<div
class="social-link align-center"
style="--social-color: #{s.color};"
role="button"
tabindex="0"
title={s.alt}
on:mouseenter={() => {
changeBackground(s.color, false);
}}
on:mouseleave={() => {
changeBackground(s.color, true);
}}>{s.name}</a
}}
>
{#if s.pic === undefined}
<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
{:else}
<img alt={s.alt} src={s.pic} />
{/if}
<a href={s.link} target="_blank">{s.name}</a>
</div>
{/each}
</div>

3
frontend/src/lib/css/base.css
View file

@ -44,7 +44,8 @@ h1 {
--border-min: 0.5rem;
--border-max: 2rem;
--profile-content-width: 40rem;
--profile-content-width-max: 40rem;
--profile-content-width-min: 36rem;
--width-min-desktop: 1275px;
--width-mobile: 875px;

34
frontend/src/lib/css/post-min.css vendored
View file

@ -1,11 +1,39 @@
@media screen and (max-width: 1275px) {
.post-min-container {
height: calc(var(--profile-content-width-min)/2);
width: calc((var(--profile-content-width-min) + 6rem - 4rem)/3);
}
.post-min {
height: calc(var(--profile-content-width-min)/2);
}
.post-min img {
max-height: calc(var(--profile-content-width-min)/4);
}
}
@media screen and (min-width: 1276px) {
.post-min-container {
height: calc(var(--profile-content-width-max)/2);
width: calc((var(--profile-content-width-max) + 6rem - 4rem)/3);
}
.post-min {
height: calc(var(--profile-content-width-max)/2);
}
.post-min img {
max-height: calc(var(--profile-content-width-max)/4);
}
}
.post-min-container {
display: grid;
grid-template-areas:
"post-min-overlay-back"
"post-min-overlay-front"
"post-min";
height: calc(var(--profile-content-width)/2);
width: calc((var(--profile-content-width) + 6rem - 4rem)/3);
margin-left: 1rem;
margin-right: 1rem;
}
@ -15,13 +43,11 @@
display: flex;
flex-direction: column;
grid-area: overlay;
height: calc(var(--profile-content-width)/2);
z-index: var(--z-index-front);
}
.post-min img {
width: auto;
max-height: calc(var(--profile-content-width)/4);
width: 100%;
object-fit: cover;
border-top-left-radius: 1rem;

26
frontend/src/lib/css/profile/base.css
View file

@ -5,6 +5,26 @@
--picture-border: 1.5rem;
}
@media screen and (max-width: 1275px) {
.profile-post-container {
width: calc(var(--profile-content-width-min) + 6rem);
}
.profile-content {
width: var(--profile-content-width-min);
}
}
@media screen and (min-width: 1276px) {
.profile-post-container {
width: calc(var(--profile-content-width-max) + 6rem);
}
.profile-content {
width: var(--profile-content-width-max);
}
}
.profile {
font-family: 'JetBrains Mono';
color: var(--color-text);
@ -95,20 +115,16 @@
margin-right: 1rem;
}
.profile-container > div {
.profile-container>div {
margin-bottom: 2rem;
}
.profile-post-container {
display: flex;
flex-direction: row;
width: calc(var(--profile-content-width) + 6rem);
}
/* Depending on media */
.profile-content {
width: var(--profile-content-width);
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;

60
frontend/src/lib/css/social.css
View file

@ -3,14 +3,52 @@
--social-min-width: 2rem;
}
@media screen and (max-width: 1275px) {
.social-width {
width: var(--social-min-width);
}
.social-link a {
display: none;
}
.social h1 {
display: none;
}
.social-archive {
width: calc(var(--profile-content-width-min) + 6rem);
}
}
@media screen and (min-width: 1276px) {
.social-width {
width: var(--social-max-width);
}
.social-link a {
text-decoration: none;
position: relative;
color: var(--color-text);
margin-left: auto;
font-size: 1.4rem;
font-weight: 500;
}
.social-archive {
width: calc(var(--social-max-width) + 4rem);
}
}
.social {
padding: 3rem;
padding-right: 2rem;
padding-left: 2rem;
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:
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);
width: var(--social-max-width);
}
.social-link {
@ -26,15 +64,19 @@
.social-link img {
height: 2rem;
width: 2rem;
transition: all .3s ease 0s;
}
.social-link a {
text-decoration: none;
position: relative;
color: var(--color-text);
margin-left: auto;
font-size: 1.4rem;
font-weight: 500;
.social-link img:hover {
filter: drop-shadow(0px 4px 8px var(--social-color));
}
.social-link svg {
transition: all .3s ease 0s;
}
.social-link svg:hover {
filter: drop-shadow(0px 0px 8px var(--social-color));
}
/* Underline links */

15
frontend/src/routes/profile/+page.svelte
View file

@ -4,7 +4,7 @@
import PostMin from '$lib/components/post-min.svelte';
import Social from '$lib/components/social.svelte';
import Archive from '$lib/components/archive.svelte'
import Archive from '$lib/components/archive.svelte';
let cover =
'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
@ -13,8 +13,11 @@
let pronoun = 'il/lui';
let description =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Qui atque praesentium et culpa. Qui aliquam nobis error id praesentium quam reprehenderit.<br><br>Corrupti voluptas amet ut. Ratione neque fugit nam vel incidunt. Blanditiis sit vel et occaecati. Expedita necessitatibus sit et minima recusandae pariatur explicabo. Aspernatur nam laborum corrupti quisquam vero repellat soluta. Aliquid magni fugiat sint sunt. Natus ut architecto magni harum et quam. Eaque dicta quo ex inventore.<br><br>Aut odio et sunt et dicta quo non. Impedit debitis omnis in nihil. Deleniti quaerat aut quia molestias. Neque voluptatum deleniti dolore aliquam. Delectus saepe aliquam doloremque fugit voluptas laborum dolorem nobis. Eveniet est repellat autem sunt. Repudiandae repellendus incidunt est eveniet ut. Similique quis vero dolorum. Debitis dolores atque ullam quia repellat repudiandae. Consequuntur voluptatem quia vel repellendus sed asperiores. Modi rerum alias voluptatem in quia quasi quos et. Quae quisquam quis repellendus tenetur. Incidunt accusantium fugiat veritatis molestiae. Corporis nemo odio dolorem perferendis praesentium et impedit saepe.';
let innerWidth;
</script>
<svelte:window bind:innerWidth />
<div class="profile">
<div class="profile-banner">
<div class="profile-banner-gradient"></div>
@ -29,9 +32,11 @@
</div>
<div class="profile-main justify-center">
<div class="profile-container">
<Social />
<Social showname={false} />
{#if innerWidth > 1275}
<h1 class="profile-title">Archives</h1>
<Archive width="24rem"/>
<Archive customStyle="social-archive" />
{/if}
</div>
<div class="profile-container">
<div class="profile-content">
@ -52,6 +57,10 @@
/>
<PostMin title="Alix est beau" />
</div>
{#if innerWidth <= 1275}
<h1 class="profile-title">Archives</h1>
<Archive customStyle="social-archive" />
{/if}
</div>
</div>
</div>