diff --git a/src/lib/components/archive.svelte b/src/lib/components/archive.svelte new file mode 100644 index 0000000..12236dc --- /dev/null +++ b/src/lib/components/archive.svelte @@ -0,0 +1,132 @@ + + +
+ + {#each Object.keys(posts) as date, index} + +
{ + if (indexArchive != -1 && indexArchive != index) { + toggleArchive(date, indexArchive); + } + toggleArchive(date, index); + }} + > + {date} + +
+
+ {#each posts[date] as p} +
+ {p} +
+ {/each} +
+ {/each} +
diff --git a/src/lib/components/button-slider.svelte b/src/lib/components/button-slider.svelte new file mode 100644 index 0000000..19402da --- /dev/null +++ b/src/lib/components/button-slider.svelte @@ -0,0 +1,26 @@ + + +
+ {#each keys as k, id} + + {/each} +
diff --git a/src/lib/components/carousel-vertical.svelte b/src/lib/components/carousel-vertical.svelte new file mode 100644 index 0000000..675597a --- /dev/null +++ b/src/lib/components/carousel-vertical.svelte @@ -0,0 +1,78 @@ + + +
+
{ + redirectTo(`/articles/${mainpost.slug}`); + }} + on:keydown={(event) => handleKeyDown(event, `/articles/${mainpost.slug}`)} + > +
+

{mainpost.title}

+
+ mainpicture +
+
+ + {mainpost.date} +
+
+ + {mainpost.author} +
+
+
+
+
+ {#each posts as p, index} + {#if index > 0} +
{ + redirectTo(`/articles/${p.slug}`); + }} + on:keydown={(event) => handleKeyDown(event, `/articles/${p.slug}`)} + > + mainpicture +
+

{p.title}

+
+ + {p.date} +
+
+ + {p.author} +
+
+
+ {/if} + {/each} +
+
+
diff --git a/src/lib/components/count.svelte b/src/lib/components/count.svelte new file mode 100644 index 0000000..986b562 --- /dev/null +++ b/src/lib/components/count.svelte @@ -0,0 +1,30 @@ + + +
+

{count_num}

+

{name}

+
diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte new file mode 100644 index 0000000..b9118a7 --- /dev/null +++ b/src/lib/components/footer.svelte @@ -0,0 +1,58 @@ + + +
+
+
+

Etheryo

+
+
+
+ +
+
+
+
+ {new Date().getFullYear()} • Tous droits réservés • Yohan Boujon +
+ +
+
+
diff --git a/src/lib/components/footer/page1.svelte b/src/lib/components/footer/page1.svelte new file mode 100644 index 0000000..a3f0155 --- /dev/null +++ b/src/lib/components/footer/page1.svelte @@ -0,0 +1,24 @@ + + +
+ github + Code source +
+
+ raspberrypi + Hébergé sur Raspberry Pi +
+
+ crowcpp + Réalisé avec CrowCpp +
+
+ + Keep the web free + +
diff --git a/src/lib/components/footer/page2.svelte b/src/lib/components/footer/page2.svelte new file mode 100644 index 0000000..ac84221 --- /dev/null +++ b/src/lib/components/footer/page2.svelte @@ -0,0 +1,19 @@ + + +
+ +

Notre Vision

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa + sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum + urna. Sed tincidunt est non nulla scelerisque. + +
diff --git a/src/lib/components/footer/page3.svelte b/src/lib/components/footer/page3.svelte new file mode 100644 index 0000000..358b5a6 --- /dev/null +++ b/src/lib/components/footer/page3.svelte @@ -0,0 +1,16 @@ + + +
+ + Envoyez nous un mail +
+
+ + Besoin d'aide +
\ No newline at end of file diff --git a/src/lib/components/link.svelte b/src/lib/components/link.svelte new file mode 100644 index 0000000..05e3d5a --- /dev/null +++ b/src/lib/components/link.svelte @@ -0,0 +1,73 @@ + + +
+
+
+
+
+ base + hover +
+ Link + +
+
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte new file mode 100644 index 0000000..d5aa6d6 --- /dev/null +++ b/src/lib/components/navbar.svelte @@ -0,0 +1,111 @@ + + + + + + + diff --git a/src/lib/components/post-min.svelte b/src/lib/components/post-min.svelte new file mode 100644 index 0000000..536440e --- /dev/null +++ b/src/lib/components/post-min.svelte @@ -0,0 +1,73 @@ + + +
{ + update_gradient(event, post_div); + }} + on:mouseenter={() => { + animateForeground(true, post_div); + title_h1.style.textDecoration = 'underline 2px'; + }} + on:mouseleave={() => { + animateForeground(false, post_div); + title_h1.style.textDecoration = ''; + }} +> +
+ imgcool (updateY = false)} + on:mouseleave={() => (updateY = true)} + /> +

{title}

+
+ + {date} +
+
+
+
+
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte new file mode 100644 index 0000000..250f3bb --- /dev/null +++ b/src/lib/components/post.svelte @@ -0,0 +1,85 @@ + + + +
{ + update_gradient(event, post_div); + }} + on:mouseenter={() => { + animateForeground(true, post_div); + title_h1.style.textDecoration = 'underline 3px'; + }} + on:mouseleave={() => { + animateForeground(false, post_div); + title_h1.style.textDecoration = ''; + }} +> +
+ imgcool (updateX = false)} + on:mouseleave={() => (updateX = true)} + /> +
+
+

{title}

+

{text}

+
+
+
+ profile + {author} +
+
+ {date} + +
+
+
+
+
+
+
diff --git a/src/lib/components/search.svelte b/src/lib/components/search.svelte new file mode 100644 index 0000000..9a67c6c --- /dev/null +++ b/src/lib/components/search.svelte @@ -0,0 +1,108 @@ + + + + + + +
+
+ + +
+
+
diff --git a/src/lib/components/social.svelte b/src/lib/components/social.svelte new file mode 100644 index 0000000..f551851 --- /dev/null +++ b/src/lib/components/social.svelte @@ -0,0 +1,128 @@ + + + diff --git a/src/lib/components/svg-icon-custom.svelte b/src/lib/components/svg-icon-custom.svelte new file mode 100644 index 0000000..0c0840c --- /dev/null +++ b/src/lib/components/svg-icon-custom.svelte @@ -0,0 +1,57 @@ + + + + + + + + + diff --git a/src/lib/css/archive.css b/src/lib/css/archive.css new file mode 100644 index 0000000..bdda71e --- /dev/null +++ b/src/lib/css/archive.css @@ -0,0 +1,51 @@ +.archive-container { + 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; +} + +.archive { + font-family: 'JetBrains Mono'; + font-size: 1.2rem; + padding: 1rem; + display: flex; + flex-direction: row; + justify-content: space-between; + cursor: pointer; + border-radius: 1rem; +} + +.archive-post { + font-family: 'JetBrains Mono'; + font-size: var(--font-post); + padding-left: 1rem; + color: var(--color-subtext); + opacity: 0; + height: 0px; + display: none; +} + +.archive-post > div { + width: auto; +} + +.archive-post span { + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + line-clamp: 1; +} + +.archive-post span:hover { + color: var(--palette-pink); + text-decoration: underline 2px; + cursor: pointer; +} + +.archive-post div { + padding: var(--padding-post); +} \ No newline at end of file diff --git a/src/lib/css/article.css b/src/lib/css/article.css new file mode 100644 index 0000000..fc68c6c --- /dev/null +++ b/src/lib/css/article.css @@ -0,0 +1,29 @@ +:root { + --banner-height: 60vh; +} + +.article-banner { + display: grid; + grid-template-areas: + "article-banner-gradient" + "article-banner-content"; + height: var(--banner-height); + width: 100dvw; +} + +.article-banner-background { + grid-area: overlay; + width: 100dvw; + height: var(--banner-height); + z-index: var(--z-index-last); + 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; +} + +.article-banner-content { + grid-area: overlay; + width: 100dvw; + height: var(--banner-height); +} \ No newline at end of file diff --git a/src/lib/css/base.css b/src/lib/css/base.css new file mode 100644 index 0000000..99a19b9 --- /dev/null +++ b/src/lib/css/base.css @@ -0,0 +1,183 @@ +@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); + +body, +html { + height: 100%; + background: var(--color-background); + margin: 0; + padding: 0; +} + +h1 { + margin-top: 0.5rem; + margin-bottom: 1rem; + font-weight: 800; + font-size: var(--2-rem); +} + +h2 { + font-weight: 600; + font-size: var(--1-4-rem); +} + +:root { + --color-title: #071952; + --color-subtitle: #0C356A; + --color-special: #0174BE; + --color-text: #261C2C; + --color-subtext: #413543; + --color-hiddentext: #AA94AD; + --color-background: #F8F1F1; + --color-code: #ECE6F1; + --color-pill: #D0D4CA; + + --palette-pink: #ad62aa; + --palette-red: #9A031E; + --palette-orange: #FF5B22; + --palette-yellow: #ff9843; + --palette-green: #0d9276; + --palette-purple: #4B1E78; + --palette-brown: #3c2317; + + --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%); + + --z-index-last: -1; + --z-index-normal: 0; + --z-index-front: 1; + --z-index-navbar: 2; + --z-index-popup: 3; + + --border-min: 0.5rem; + --border-max: 2rem; + --profile-content-width-max: 40rem; + --profile-content-width-min: 36rem; + + --width-min-desktop: 1275px; + --width-mobile: 875px; + /* https://clamp.font-size.app/ + min=875px max=1100px */ + --1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem); + --1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem); + --1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem); + --2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem); + + --navbar-height: 6rem; + --transition: all .4s ease 0s; +} + +.base { + z-index: var(--z-index-front); + position: relative; +} + +.title { + color: var(--color-background); + font-family: Gabarito; + font-weight: 700; + cursor: default; + transition: var(--transition); + font-size: 1.5rem; + margin: 0; +} + +.flex-row { + display: flex; + align-items: center; + flex-direction: row; +} + +.flex-col { + display: flex; + flex-direction: column; +} + +.flex-start { + align-self: flex-start; +} + +.flex-end { + margin-left: auto !important; +} + +.shadow { + box-shadow: #41354340 0px 8px 18px -1px; +} + +.h-100 { + height: 100%; +} + +.h-70 { + height: 60%; +} + +.h-fit { + height: fit-content; +} + +.flex { + display: flex; +} + +.align-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.center { + align-items: center; + justify-content: center; +} + +.margin-padding-0 { + margin: 0; + padding: 0; +} + +.margin-bottom { + margin-bottom: 0.5rem; +} + +.margin-horizontal-05 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.margin-left-3 { + margin-left: 3rem; +} + +.margin-right-2 { + margin-right: 2rem; +} + +.margin-05 { + margin-left: 0.5rem; +} + +.padding-left-3 { + padding-left: 3rem; +} + +.relative { + position: relative; +} + +.inherit-w-h { + width: inherit; + height: inherit; +} + +.text-justify { + text-align: justify; + text-justify: inter-word; +} + +.disabled { + display: none !important; +} \ No newline at end of file diff --git a/src/lib/css/button-slider.css b/src/lib/css/button-slider.css new file mode 100644 index 0000000..ecc22a2 --- /dev/null +++ b/src/lib/css/button-slider.css @@ -0,0 +1,36 @@ +.button-slider-container { + display: flex; + width: var(--button-slider-width); + height: 3.5rem; + background: var(--background-dark); + border-radius: 3rem; + padding: 0 !important; + box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2); +} + +.button-slider-active { + background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%); + box-shadow: 0px 8px 18px -1px #33283760; +} + +.button-slider-active span { + color: var(--color-background) !important; +} + +.button-slider-container button { + background-color: #00000000; + font-family: 'JetBrains Mono'; + border-radius: 3rem; + height: 2.5rem; + display: flex; + align-items: center; + margin-left: 0.5rem; + margin-right: 0.5rem; + border: none; + cursor: pointer; +} + +.button-slider-container span { + padding: 1.6rem; + color: var(--color-text); +} \ No newline at end of file diff --git a/src/lib/css/carousel.css b/src/lib/css/carousel.css new file mode 100644 index 0000000..6a4902d --- /dev/null +++ b/src/lib/css/carousel.css @@ -0,0 +1,93 @@ +.carousel-v-main { + padding: 1rem; + margin-left: 10dvw; + width: 80dvw; + display: flex; + flex-direction: row; + height: calc(50dvh + 2rem*3); + font-family: Urbanist; + font-weight: 500; + font-size: 1.1rem; + padding-bottom: 3rem; +} + +.carousel-v-bigpost { + display: flex; + width: 50%; + height: 100%; + box-shadow: #00000040 0px 8px 18px -1px; + transition: all .1s ease 0s; + background-color: var(--color-background); + z-index: 2; + margin-right: 1rem; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.carousel-v-bigpost>div { + display: flex; + flex-direction: column; + margin: 1rem; +} + +.carousel-picture { + width: 90%; + height: auto; + object-fit: cover; +} + +.carousel-v-minpost-container { + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; + width: 50%; + height: 100%; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.carousel-v-main h2 { + font-family: Gabarito; + font-weight: 500; +} + +.carousel-v-main svg { + margin-right: 1rem; +} + +.carousel-v-bigpost:hover, .carousel-v-minpost:hover { + cursor: pointer; + transform: scale(1.01) translateY(-4px); +} + +.carousel-v-minpost { + display: flex; + flex-direction: row; + height: calc(50dvh/3); + padding: 1rem; + box-shadow: #00000040 0px 8px 18px -1px; + transition: all .1s ease 0s; + margin-right: 1rem; + margin-left: 1rem; + background-color: var(--color-background); +} + +.carousel-v-minpost img { + min-width: 40%; + max-width: 40%; + height: 100%; + object-fit: cover; + margin: 0; + margin-right: 1rem; +} + +.carousel-v-minpost h2 { + margin: 0; + margin-bottom: 0.5rem; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 1.4rem; +} \ No newline at end of file diff --git a/src/lib/css/count.css b/src/lib/css/count.css new file mode 100644 index 0000000..312145c --- /dev/null +++ b/src/lib/css/count.css @@ -0,0 +1,19 @@ +.count { + display: flex; + flex-direction: column; + padding: 1rem; + 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; + border-radius: 1rem; +} + +.count h1 { + margin: 0; +} + +.count h2 { + margin: 0; + font-weight: 400; +} \ No newline at end of file diff --git a/src/lib/css/footer.css b/src/lib/css/footer.css new file mode 100644 index 0000000..0d353f9 --- /dev/null +++ b/src/lib/css/footer.css @@ -0,0 +1,75 @@ +:root { + --ratio-container: 0.7; + --ratio-content: 50%; + --height-footer: 25rem; +} + +.footer-container:before { + content: ""; + position: absolute; + left: 0; + height: 4rem; + top: -2rem; + width: 100%; + background-color: var(--color-background); + border-radius: var(--border-max); +} + +.footer-container { + position: relative; + 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; +} + +.footer-content { + width: inherit; + height: calc(var(--ratio-container) * var(--height-footer)); + display: flex; + flex-direction: row; +} + +.footer-left { + flex-basis: calc(100% - var(--ratio-content)); + display: flex; + justify-content: center; + align-items: center; +} + +.footer-left h1 { + font-size: 3rem; +} + +.footer-right { + flex-basis: var(--ratio-content); + padding: 2rem; + overflow: hidden; +} + +.footer-slider { + width: inherit; + height: auto; + padding: 1rem; + display: flex; +} + +.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; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/src/lib/css/footer/page.css b/src/lib/css/footer/page.css new file mode 100644 index 0000000..4b5bb1a --- /dev/null +++ b/src/lib/css/footer/page.css @@ -0,0 +1,70 @@ +.page-icon-text > a { + text-decoration: none; + position: relative; + font-size: var(--1-2-rem); + transition: var(--transition); +} + +.page-icon-text h1 { + font-size: var(--1-6-rem); +} + +.page-icon-text > a:hover { + color: var(--palette-pink); +} + +.page-icon-text > a::after { + content: ""; + display: block; /* Ensure the pseudo-element takes up space */ + position: absolute; + height: 0.2rem; + background-color: var(--palette-pink); + width: 0%; + transition: var(--transition); +} + +.page-icon-text > a:hover::after { + width: 100%; +} + +.page-icon-text { + color: var(--color-background); + font-family: 'JetBrains Mono'; + font-weight: 500; + display: flex; + align-items: center; + padding: 0.5rem; +} + +.page-icon-text i { + font-weight: 700; + font-size: var(--1-6-rem); + color: var(--color-hiddentext); + cursor: default; +} + +.page-special svg { + padding-left: 2rem; + color: var(--color-hiddentext); +} + +.page-icon-text img, .page-icon-text svg { + /* width: calc(calc(((var(--page-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */ + width: 1.8rem; + height: auto; + padding-right: 2rem; +} + +.page-text { + color: var(--color-hiddentext); + font-family: 'JetBrains Mono'; + font-weight: 400; + font-size: var(--1-rem); + display: flex; + align-items: center; + padding: 0.5rem; +} + +.page-overflow { + max-height: 10rem; +} \ No newline at end of file diff --git a/src/lib/css/link.css b/src/lib/css/link.css new file mode 100644 index 0000000..bd51cfa --- /dev/null +++ b/src/lib/css/link.css @@ -0,0 +1,83 @@ +:root { + --line-size: 5px; +} + +.link-container { + width: 60rem; + height: 20rem; + margin-bottom: 2rem; + cursor: pointer; + transition: var(--transition); + display: grid; + border-radius: 1rem; + grid-template-areas: + "overlay"; +} + +.link-container:hover { + box-shadow: var(--shadow); +} + +.link-container svg { + margin-left: 1rem; + color: var(--color-text); + transition: var(--transition); +} + +.link-img { + display: grid; + grid-template-areas: + "overlay"; + max-width: 30rem; + height: 20rem; +} + +.link-img img { + grid-area: overlay; + height: 100%; + width: auto; +} + +.link-img-hover { + opacity: 0; +} + +.link-content { + grid-area: overlay; + width: 60rem; + height: 20rem; + border-radius: 1rem; +} + +.link-background { + grid-area: overlay; + width: 60rem; + height: 20rem; + border-radius: 1rem; + opacity: 0; + background-image: var(--gradient); +} + +/* Link Underlined */ + +.link-content>span { + font-family: 'JetBrains Mono'; + font-weight: 500; + font-size: 2.5rem; + text-decoration: none; + position: relative; + color: var(--color-text); + transition: var(--transition); +} + +.link-content>span::after { + content: ""; + position: absolute; + background-color: var(--color-background); + height: var(--line-size); + bottom: calc(0px - var(--line-size)); + height: var(--line-size); + left: 0; + transition: var(--transition); + width: var(--span-width); +} \ No newline at end of file diff --git a/src/lib/css/main.css b/src/lib/css/main.css new file mode 100644 index 0000000..5ba71f1 --- /dev/null +++ b/src/lib/css/main.css @@ -0,0 +1,32 @@ +:root { + --banner-height: 60vh; +} + +.main-banner { + display: grid; + grid-template-areas: + "overlay"; + width: 100%; +} + +.main-banner-gradient { + grid-area: overlay; + background: linear-gradient(0deg, #00000000, #261C2C20 50%, #261c2c40 100%); + height: calc(var(--navbar-height)*2); +} + +.main-banner-content { + grid-area: overlay; + margin-top: var(--navbar-height); +} + +.main-banner-content img { + width: 40dvw; +} + +.main-banner-content h1 { + color: var(--color-text); + font-family: Gabarito; + font-weight: 700; + font-size: 3rem; +} \ No newline at end of file diff --git a/src/lib/css/navbar.css b/src/lib/css/navbar.css new file mode 100644 index 0000000..0243626 --- /dev/null +++ b/src/lib/css/navbar.css @@ -0,0 +1,176 @@ +:root { + --navbar-dark: #261C2CFF; + --navbar-darker: #261C2CFF; + --navbar-light: #413543FF; + --navbar-ligher: #413543FF; + --navbar-outline: 2px solid rgb(40, 32, 44, 0.5); + --navbar-inset: inset 0px 0px 0px 2px rgba(52, 42, 58, 0.5); + --navbar-blur: blur(0.6rem); +} + +nav { + height: var(--navbar-height); + width: 100%; + position: fixed; + z-index: 5; + transition: var(--transition); + padding-top: 0.5rem; +} + +a { + color: var(--color-background); +} + +.navbar-background { + border-radius: var(--border-min); + background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%); + height: 90%; + margin: 0.5rem; +} + +/* Background */ + +.container { + display: grid; + grid-template-areas: + "navbar-overlay-back" + "navbar-overlay-front" + "content"; +} + +.navbar-overlay-front { + grid-area: overlay; + background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%); + width: inherit; + height: inherit; + border-radius: var(--border-min); + box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, var(--navbar-inset); + outline: 2px solid rgb(40, 32, 44, 0.5); +} + +.navbar-overlay-back { + grid-area: overlay; + width: inherit; + height: inherit; + border-radius: var(--border-min); + box-shadow: var(--navbar-inset); + outline: var(--navbar-outline) +} + +.content { + grid-area: overlay; + z-index: 1; + 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; + margin-right: 3rem; +} + +.navbar-categories { + align-items: center; + height: var(--navbar-height); + padding-left: 1rem; + padding-right: 1rem; +} + +.navbar-categories a { + text-decoration: none; + font-family: JetBrains Mono; + font-weight: 500; + font-size: 1rem; + transition: var(--transition); + color: var(--color-background); + transition: var(--transition); +} + +.navbar-categories div { + position: relative; + margin-left: 1rem; + margin-right: 1rem; +} + +.navbar-categories>div>a::before, +.navbar-categories>div>a::after { + content: ""; + position: absolute; + width: 0; + background-color: var(--palette-pink); + transition: var(--transition); + height: 3px; +} + +.navbar-categories>div>a::before { + top: -3px; + height: 3px; +} + +.navbar-categories>div>a::after { + bottom: -3px; + height: 3px; + right: 0; +} + +.navbar-categories>div>a:hover::before, +.navbar-categories>div>a:hover::after { + width: 100%; +} + +.navbar-categories>div>a:hover { + color: var(--palette-pink); +} + +.navbar-search { + justify-content: center; + padding-right: 1rem; + padding-left: 1rem; +} + +.navbar-search-floating input { + margin-top: 0 !important; + background-color: var(--color-background) !important; + color: var(--color-subtext) !important; + border-color: var(--color-pill) !important; +} + +/* Floating */ + +.floating { + background-image: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%); + box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; + border-bottom-left-radius: 2rem; + border-bottom-right-radius: 2rem; + padding-top: 0; + -webkit-backdrop-filter: var(--navbar-blur); + backdrop-filter: var(--navbar-blur); +} + +.floating>div { + display: flex; + align-items: center; + flex-direction: row; +} + +/* Active */ + +.navbar-active { + color: var(--palette-pink) !important; + cursor: default; +} + +.navbar-active::after { + width: 100% !important; +} + +.navbar-active::before { + width: 0 !important; +} \ No newline at end of file diff --git a/src/lib/css/pill.css b/src/lib/css/pill.css new file mode 100644 index 0000000..1c5cfee --- /dev/null +++ b/src/lib/css/pill.css @@ -0,0 +1,69 @@ +.pill { + align-items: center; + display: flex; + flex-direction: row; + font-weight: 600; + background-color: #00000000; + border-radius: 3rem; + box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2); + margin: 0.5rem; +} + +.pill-reversed { + padding: 0 !important; + justify-content: flex-end; +} + +.pill img { + border-radius: 100% !important; + width: 3rem !important; + height: 3rem !important; + margin-right: 1rem !important; +} + +.pill svg { + border-radius: 100% !important; + width: 1.8rem !important; + height: 1.8rem !important; + padding: calc((3rem - 1.8rem)/2); + color: var(--color-background); + background: linear-gradient(180deg, rgb(52, 42, 58), rgb(38, 28, 44)); + margin-right: 1rem; +} + +.pill-profile { + transition: all .4s ease 0s; +} + +.pill-profile:hover { + background: var(--color-text); + box-shadow: 0px 8px 18px -1px #413543A0; +} + +.pill-profile:hover span { + color: var(--color-background) !important; +} + +.pill-reversed svg { + + margin-left: 1rem; + margin-right: 0; +} + +.pill span { + font-size: var(--1-rem); + font-style: normal; + color: var(--color-text); + transition: all .4s ease 0s; + /* Overflow */ + overflow: hidden; + white-space: nowrap; + text-overflow: "."; + max-width: var(--width-pill); + padding-right: 1rem; +} + +.pill-reversed span { + padding-right: 0; + padding-left: 1rem; +} \ No newline at end of file diff --git a/src/lib/css/post-min.css b/src/lib/css/post-min.css new file mode 100644 index 0000000..fe0eb34 --- /dev/null +++ b/src/lib/css/post-min.css @@ -0,0 +1,101 @@ +@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"; + margin-left: 1rem; + margin-right: 1rem; +} + +.post-min { + cursor: pointer; + display: flex; + flex-direction: column; + grid-area: overlay; + z-index: var(--z-index-front); +} + +.post-min img { + width: auto; + width: 100%; + object-fit: cover; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + border-bottom-left-radius: 0.6rem; + border-bottom-right-radius: 0.6rem; + margin-bottom: 1rem; +} + +.post-min h1 { + font-weight: 800; + font-size: 1.1rem; + margin-left: 1rem; + margin-right: 1rem; + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + line-clamp: 3; +} + +.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; + border-radius: 1rem; +} + +.post-min-overlay-back { + grid-area: overlay; + border-radius: 1rem; +} + +.post-min-pill { + height: 2rem; + width: auto; + margin: 1rem; + margin-top: auto !important; +} + +.post-min-pill span { + font-size: 0.8rem; +} + +.post-min-pill svg { + width: 1.2rem !important; + height: 1.2rem !important; + padding: calc((2rem - 1.2rem)/2); +} \ No newline at end of file diff --git a/src/lib/css/post.css b/src/lib/css/post.css new file mode 100644 index 0000000..61c1c45 --- /dev/null +++ b/src/lib/css/post.css @@ -0,0 +1,117 @@ +:root { + --width-max-post: 60rem; + --width-min-post: 50rem; + --height-post: 20rem; + --width-picture: 25rem; + --ratio-picture: 0.5; +} + +@media screen and (max-width: 1075px) { + .post-container { + width: var(--width-min-post); + } + + .post-text { + width: calc(var(--width-min-post) - var(--width-picture) - 4rem); + } +} + +@media screen and (min-width: 1076px) { + .post-container { + width: var(--width-max-post); + } + + .post-text { + width: calc(var(--width-max-post) - var(--width-picture) - 4rem); + } +} + +/* Post */ + +.post-container { + display: grid; + grid-template-areas: + "post-overlay-back" + "post-overlay-front" + "post"; + height: var(--height-post); +} + +.post-overlay-front { + 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; +} + +.post-overlay-back { + grid-area: overlay; + border-radius: 1rem; +} + +.post { + cursor: pointer; + display: flex; + grid-area: overlay; + z-index: var(--z-index-front); +} + +.post img { + width: var(--width-picture); + height: var(--height-post); + object-fit: cover; + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-top-right-radius: 0.6rem; + border-bottom-right-radius: 0.6rem; + margin-right: 1rem; +} + +.post-text { + font-family: 'JetBrains Mono'; + justify-content: space-between; + display: flex; + flex-direction: column; + margin: 1rem; + margin-right: 2rem; +} + +.text-container { + margin-top: 1rem; + margin-bottom: 1rem; + display: flex; + flex-direction: row; +} + +.post-text h1 { + font-weight: 800; + font-size: var(--1-6-rem); + margin-top: 1rem; + margin-bottom: 1rem; + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.post-text p { + font-size: 1rem; + font-style: italic; + color: var(--color-subtext); + text-align: justify; + text-justify: auto; + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + line-clamp: 3; +} + +.post-author-pill { + width: 100%; +} \ No newline at end of file diff --git a/src/lib/css/profile/base.css b/src/lib/css/profile/base.css new file mode 100644 index 0000000..bf4f8fe --- /dev/null +++ b/src/lib/css/profile/base.css @@ -0,0 +1,136 @@ +:root { + --banner-height: 30vw; + --picture-width: 15rem; + --picture-left: 5vw; + --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); +} + +.profile h1 { + margin: 0; +} + +.profile-title { + margin-bottom: 2rem !important; + margin-left: 2rem !important; +} + +.profile p { + text-align: justify; + text-justify: auto; +} + +.profile-banner { + display: grid; + grid-template-areas: + "profile-banner-gradient" + "profile-banner-img" + "profile-banner-profile"; + height: var(--banner-height); + width: 100%; +} + +.profile-banner-gradient { + grid-area: overlay; + background: linear-gradient(0deg, #00000000, #261C2C70 50%, #261C2CC0 100%); + height: calc(var(--navbar-height)*2); +} + +.profile-banner-img { + grid-area: overlay; + z-index: var(--z-index-last); +} + +.profile-banner-img img { + object-fit: cover; + width: 100dvw; + height: var(--banner-height); +} + +.profile-banner-profile { + grid-area: overlay; + position: absolute; + top: calc(var(--banner-height) - var(--picture-width)*2/5); + left: var(--picture-left); +} + +.profile-banner-profile img { + width: var(--picture-width); + height: var(--picture-width); + border-radius: 100%; + border: var(--picture-border) solid; + color: var(--color-background); +} + +.profile-name { + display: flex; + height: 8rem; + margin-left: calc(var(--picture-left) + var(--picture-width) + var(--picture-border)*2); +} + +.profile-name > span { + background-color: var(--color-pill); + margin-left: 1rem; + margin-right: 1rem; + padding: 0.5rem; + border-radius: var(--border-min); + font-size: var(--1-2-rem); +} + +.profile-slider { + margin-top: 3rem; + margin-bottom: 2rem; +} + +.profile-main { + width: 100%; + display: flex; +} + +.profile-container { + display: flex; + flex-direction: column; + margin-bottom: 2rem; + margin-left: 1rem; + margin-right: 1rem; +} + +.profile-container>div { + margin-bottom: 2rem; +} + +.profile-post-container { + display: flex; + flex-direction: row; +} + +.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; + background-image: var(--background-light); +} \ No newline at end of file diff --git a/src/lib/css/search.css b/src/lib/css/search.css new file mode 100644 index 0000000..59aa2e4 --- /dev/null +++ b/src/lib/css/search.css @@ -0,0 +1,47 @@ +.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; + border-radius: 5rem; + background-color: var(--color-background); + margin: 0 !important; +} + +.search input { + padding-left: 0.5rem; + background-color: var(--color-background); + font-family: 'JetBrains Mono'; + background-color: #00000000; + border: 0; + width: 100%; + border-top-right-radius: 5rem; + border-bottom-right-radius: 5rem; +} + +.search input:focus { + border: 0; + outline: none; +} + +.search svg { + color: var(--color-background); + background-color: var(--color-text); + border-radius: 100%; + box-shadow: #4f325d40 15px 0px 60px -12px, #0000004d 15px 0px 36px -18px; + background: radial-gradient(circle farthest-corner at 0px 0px, var(--color-subtext) 0%, var(--color-text) 80%); + cursor: pointer; + transform: scale(1.1) !important; +} + +.search-box { + 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; + border-radius: 1rem; + position: absolute !important; + z-index: 1; + transform: translateX(-1rem); + display: none; + opacity: 0; +} \ No newline at end of file diff --git a/src/lib/css/social.css b/src/lib/css/social.css new file mode 100644 index 0000000..42d6795 --- /dev/null +++ b/src/lib/css/social.css @@ -0,0 +1,105 @@ +:root { + --social-max-width: 20rem; + --social-min-width: 2rem; +} + +@media screen and (max-width: 1275px) { + .social-width { + width: var(--social-min-width); + } + + .social-link span { + 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 span { + 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; + background-image: var(--background-light); +} + +.social-link { + height: 2rem; + display: flex; + flex-direction: row; + margin-top: 1.2rem; + margin-bottom: 1.2rem; + cursor: pointer; + transition: var(--transition); +} + +.social-link img { + height: 2rem; + width: 2rem; + transition: var(--transition); +} + +.social-link img:hover { + filter: drop-shadow(0px 4px 8px var(--social-color)); +} + +.social-link svg { + transition: var(--transition); +} + +.social-link svg:hover { + filter: drop-shadow(0px 0px 8px var(--social-color)); +} + +/* Underline links */ + +.social-link span:hover { + color: var(--social-color); +} + +.social-link span::after { + content: ""; + position: absolute; + width: 0; + background-color: var(--social-color); + transition: var(--transition); + height: 3px; +} + +.social-link span::after { + bottom: -3px; + height: 3px; + right: 0; +} + +.social-link span:hover::after { + width: 100%; +} \ No newline at end of file diff --git a/src/lib/css/style.css b/src/lib/css/style.css new file mode 100644 index 0000000..fe9eea0 --- /dev/null +++ b/src/lib/css/style.css @@ -0,0 +1,4 @@ +.blank { + height: 10rem; + background-color: #00000000; +} diff --git a/src/lib/ts/color.ts b/src/lib/ts/color.ts new file mode 100644 index 0000000..da7deaf --- /dev/null +++ b/src/lib/ts/color.ts @@ -0,0 +1,28 @@ +type RGB = { + r: number; + g: number; + b: number; + }; + +export function hexTorgb(hex: string) { + return { + r: parseInt(hex.substring(0, 2), 16), + g: parseInt(hex.substring(2, 4), 16), + b: parseInt(hex.substring(4, 6), 16), + } +} + +/* should be type {r,g,b} */ +export function rgbTohex(rgb: RGB) { + return (rgb.r.toString(16) + rgb.g.toString(16) + rgb.b.toString(16)); +} + +export function darkenHexTorgb(hex: string, darken: number) { + let rgb = hexTorgb(hex); + console.log(hex); + console.log(rgb); + rgb.r = Math.floor(Math.round(rgb.r * darken)); + rgb.g = Math.floor(Math.round(rgb.g * darken)); + rgb.b = Math.floor(Math.round(rgb.b * darken)); + return rgb; +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..bd5a401 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,16 @@ + + + +
+ +
+