From a68ba0aa74e43a1892404f8f2125326709812e41 Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sun, 11 Aug 2024 21:43:14 +0100 Subject: [PATCH] Footer fully implemented. --- .../src/lib/components/button-slider.svelte | 25 +++++++ frontend/src/lib/components/footer.svelte | 62 ++++++++++------ .../src/lib/components/footer/page1.svelte | 24 +++++++ .../src/lib/components/footer/page2.svelte | 19 +++++ .../src/lib/components/footer/page3.svelte | 16 +++++ frontend/src/lib/css/base.css | 5 ++ frontend/src/lib/css/button-slider.css | 35 +++++++++ frontend/src/lib/css/footer.css | 62 ++-------------- frontend/src/lib/css/footer/page.css | 71 +++++++++++++++++++ 9 files changed, 242 insertions(+), 77 deletions(-) create mode 100644 frontend/src/lib/components/button-slider.svelte create mode 100644 frontend/src/lib/components/footer/page1.svelte create mode 100644 frontend/src/lib/components/footer/page2.svelte create mode 100644 frontend/src/lib/components/footer/page3.svelte create mode 100644 frontend/src/lib/css/button-slider.css create mode 100644 frontend/src/lib/css/footer/page.css diff --git a/frontend/src/lib/components/button-slider.svelte b/frontend/src/lib/components/button-slider.svelte new file mode 100644 index 0000000..9335d5a --- /dev/null +++ b/frontend/src/lib/components/button-slider.svelte @@ -0,0 +1,25 @@ + + +
+ {#each keys as k, id} + + {/each} +
diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte index 3d70edc..eb56246 100644 --- a/frontend/src/lib/components/footer.svelte +++ b/frontend/src/lib/components/footer.svelte @@ -1,8 +1,40 @@
@@ -11,29 +43,15 @@

Etheryo Blog

-
- github - Lien Github -
-
- raspberrypi - Hébergé sur Raspberry Pi -
-
- crowcpp - Réalisé avec CrowCpp -
-
- - Keep the web free - +
+
-
+
{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon -
ButtonSlider
+
+ +
diff --git a/frontend/src/lib/components/footer/page1.svelte b/frontend/src/lib/components/footer/page1.svelte new file mode 100644 index 0000000..a3f0155 --- /dev/null +++ b/frontend/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/frontend/src/lib/components/footer/page2.svelte b/frontend/src/lib/components/footer/page2.svelte new file mode 100644 index 0000000..ac84221 --- /dev/null +++ b/frontend/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/frontend/src/lib/components/footer/page3.svelte b/frontend/src/lib/components/footer/page3.svelte new file mode 100644 index 0000000..358b5a6 --- /dev/null +++ b/frontend/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/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 36f0a4b..4dfd8d5 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -132,4 +132,9 @@ h1 { .inherit-w-h { width: inherit; height: inherit; +} + +.text-justify { + text-align: justify; + text-justify: inter-word; } \ No newline at end of file diff --git a/frontend/src/lib/css/button-slider.css b/frontend/src/lib/css/button-slider.css new file mode 100644 index 0000000..c2f1503 --- /dev/null +++ b/frontend/src/lib/css/button-slider.css @@ -0,0 +1,35 @@ +.button-slider-container { + display: flex; + width: 100%; + height: 3.5rem; + background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%); + border-radius: 3rem; + padding: 0 !important; +} + +.button-slider-active { + background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%); + box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2); +} + +.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/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css index 9325737..2601e55 100644 --- a/frontend/src/lib/css/footer.css +++ b/frontend/src/lib/css/footer.css @@ -1,8 +1,6 @@ :root { - --footer-height: 20rem; --ratio-container: 70%; --ratio-content: 50%; - --font-size: 1.2rem; } .footer-container:before { @@ -50,59 +48,6 @@ overflow: hidden; } -.footer-icon-text a { - text-decoration: none; - position: relative; - transition: all .3s ease 0s; -} - -.footer-icon-text a:hover { - color: var(--palette-pink); -} - -.footer-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: all .3s ease 0s; -} - -.footer-icon-text a:hover::after { - width: 100%; -} - -.footer-icon-text { - color: var(--color-background); - font-family: 'JetBrains Mono'; - font-weight: 500; - font-size: var(--font-size); - display: flex; - align-items: center; - padding: 0.5rem; -} - -.footer-icon-text i { - font-weight: 700; - font-size: 1.6rem; - color: var(--color-hiddentext); - cursor: default; -} - -.footer-special svg { - padding-left: 2rem; - color: var(--color-hiddentext); -} - -.footer-icon-text img, .footer-icon-text svg { - /* width: calc(calc(((var(--footer-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */ - width: 1.8rem; - height: auto; - padding-right: 2rem; -} - .footer-slider { width: inherit; height: calc(100% - var(--ratio-container)); @@ -118,4 +63,11 @@ .footer-slider div { padding-right: 2rem; +} + +.page-base { + min-height: 15rem; + max-height: 15rem; + display: flex; + flex-direction: column; } \ No newline at end of file diff --git a/frontend/src/lib/css/footer/page.css b/frontend/src/lib/css/footer/page.css new file mode 100644 index 0000000..5cfbfad --- /dev/null +++ b/frontend/src/lib/css/footer/page.css @@ -0,0 +1,71 @@ +:root { + --a-size: 1.2rem; + --p-size: 1rem; +} + +.page-icon-text a { + text-decoration: none; + position: relative; + font-size: var(--a-size); + transition: all .3s ease 0s; +} + +.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: all .3s ease 0s; +} + +.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: 1.6rem; + 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(--p-size); + display: flex; + align-items: center; + padding: 0.5rem; +} + +.page-overflow { + max-height: 10rem; +} \ No newline at end of file