From f5763d3f33f018fd6e91f023b413727de40c0591 Mon Sep 17 00:00:00 2001 From: dandankara <cunhacb22@gmail.com> Date: Sun, 8 Oct 2023 19:16:36 -0300 Subject: [PATCH] seo-change --- package.json | 1 + src/components/Calendar.svelte | 6 ++-- src/components/Header.svelte | 5 +++- src/components/Hero.svelte | 17 +++++------- src/components/LanguageSwitcher.svelte | 2 +- src/components/RowPartners.svelte | 2 +- src/components/RowSchedule.svelte | 18 ++++++------ src/components/RowWhatIsGambiConf.svelte | 2 ++ src/components/TimeSlot.svelte | 35 ++++++++++++++---------- 9 files changed, 47 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index e58eb9b..25f0499 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "rough-notation": "^0.5.1", "svelte-fa": "^3.0.3", "svelte-flag-icons": "^0.2.1", + "svelte-lazy-image": "^0.5.1", "svelte-loading-spinners": "0.3.4", "svelte-rough-notation": "^0.1.4", "svelte-select": "^5.2.1" diff --git a/src/components/Calendar.svelte b/src/components/Calendar.svelte index e3a928f..f860d71 100644 --- a/src/components/Calendar.svelte +++ b/src/components/Calendar.svelte @@ -70,7 +70,7 @@ <style> .root { font-size: 1rem; - + background-color: #FFFFFF; width: 315px; border: 1px solid var(--calendar-border-color); border-radius: 5px; @@ -101,8 +101,8 @@ } .regular-day { - color: #dac5b6; - opacity: 0.7; + color: #6E533A; + opacity: contrast(5.17); } .highlighted-day { diff --git a/src/components/Header.svelte b/src/components/Header.svelte index e17c64c..ca8faaa 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -3,11 +3,12 @@ import { base, assets } from "$app/paths" import LanguageSwitcher from "./LanguageSwitcher.svelte" import ThemeSwitcher from "./ThemeSwitcher.svelte" + import { useLazyImage as lazyImage } from 'svelte-lazy-image'; </script> <header> <a href={`${base}/`}> - <img src={`${assets}/logo.png`} alt="logo" /> + <img class="logo-header" src={`${assets}/logo.png`} alt="logo" use:lazyImage /> </a> <nav> @@ -34,6 +35,7 @@ left: 5vw; height: 60px; + width: 90px; filter: drop-shadow(0px 17px 17px rgba(0, 0, 0, 11%)); } @@ -53,6 +55,7 @@ left: 10vw; height: 70px; + width: 90px; } nav { diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte index 01b3ac1..cd3c325 100644 --- a/src/components/Hero.svelte +++ b/src/components/Hero.svelte @@ -3,10 +3,11 @@ import { assets } from "$app/paths" import Button from "./Button.svelte" import Link from "./Link.svelte" + import { useLazyImage as lazyImage } from 'svelte-lazy-image'; </script> <section> - <div class="background-overlay" /> + <img class="hero-background" src="/hero-background.png" alt="hero-background" use:lazyImage> <div class="message"> <div class="mascot"> @@ -24,7 +25,7 @@ </p> </div> - <h4 class="date"> + <span class="date"> <span> <Localized id="hero--date-first-line" /> </span> @@ -32,7 +33,7 @@ <span> <Localized id="hero--date-second-line" /> </span> - </h4> + </span> <p class="location"> <span> @@ -62,16 +63,11 @@ height: 55vh; } - .background-overlay { + .hero-background{ position: absolute; - width: 100%; height: 100%; - - background-image: url("/hero-background.png"); background-position: center center; - background-repeat: no-repeat; - background-size: cover; mix-blend-mode: overlay; } @@ -112,7 +108,6 @@ opacity: 70%; } - h4, p { margin: 0; } @@ -121,6 +116,8 @@ display: flex; flex-direction: column; margin-bottom: 10px; + font-size: 33.6px; + font-weight: bold; } .location { diff --git a/src/components/LanguageSwitcher.svelte b/src/components/LanguageSwitcher.svelte index dfda451..fd2e9e6 100644 --- a/src/components/LanguageSwitcher.svelte +++ b/src/components/LanguageSwitcher.svelte @@ -22,6 +22,7 @@ searchable={false} clearable={false} {items} + id="language-select" --background="none" --width="100px" --height="36px" @@ -36,7 +37,6 @@ {:else} <Us /> {/if} - {selection.label} </div> diff --git a/src/components/RowPartners.svelte b/src/components/RowPartners.svelte index 67b7421..e7787c4 100644 --- a/src/components/RowPartners.svelte +++ b/src/components/RowPartners.svelte @@ -26,11 +26,11 @@ grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 25px; - padding: 25px; } .content img { + width:175px; height: 175px; transition: filter 0.75s; filter: grayscale(1); diff --git a/src/components/RowSchedule.svelte b/src/components/RowSchedule.svelte index 1cdc799..335f205 100644 --- a/src/components/RowSchedule.svelte +++ b/src/components/RowSchedule.svelte @@ -14,7 +14,7 @@ <div id="schedule"> <Window title={$t("schedule--title")}> <article class="content"> - <h3><Localized id="schedule--25-november" /></h3> + <p class="schedule--date"><Localized id="schedule--25-november" /></p> <TimeSlot title={$t("schedule--presentation-opening-ceremony-first-day-title")} @@ -206,7 +206,7 @@ <div class="division" /> </div> - <h3><Localized id="schedule--26-november" /></h3> + <p class="schedule--date"><Localized id="schedule--26-november" /></p> <TimeSlot title={$t("schedule--presentation-opening-ceremony-second-day-title")} @@ -306,14 +306,6 @@ padding: 25px; } - h3 { - margin-bottom: 25px; - } - - .content > h3:first-of-type { - margin-top: 0; - } - .division-wrapper { display: flex; flex-direction: row; @@ -332,4 +324,10 @@ .break { text-align: center; } + .schedule--date { + font-size: 38.4px; + font-weight: bold; + margin-bottom: 25px; + margin-top: 0; + } </style> diff --git a/src/components/RowWhatIsGambiConf.svelte b/src/components/RowWhatIsGambiConf.svelte index 92c5f26..ccac8aa 100644 --- a/src/components/RowWhatIsGambiConf.svelte +++ b/src/components/RowWhatIsGambiConf.svelte @@ -54,6 +54,8 @@ .icon { float: left; + width: 128px; + height: 128px; } .content p:first-of-type { diff --git a/src/components/TimeSlot.svelte b/src/components/TimeSlot.svelte index b193556..c31ae33 100644 --- a/src/components/TimeSlot.svelte +++ b/src/components/TimeSlot.svelte @@ -1,4 +1,5 @@ <script lang="ts"> + import { useLazyImage as lazyImage } from 'svelte-lazy-image'; import { Localized } from "@nubolab-ffwd/svelte-fluent" import { getGoogleCalendarLink } from "../utils/calendar" import SocialLinks from "./SocialLinks.svelte" @@ -21,15 +22,15 @@ <article class="talk"> <div class="speaker-image-column"> - <img class="speaker-image" src={image} alt="Speaker" /> + <img class="speaker-image" src={image} alt="Speaker" use:lazyImage /> <SocialLinks links={socialLinks} /> </div> <div class="description-column"> - <h6> + <p class="description-schedule-event"> {title} - </h6> + </p> {#if hours} <p class="time"> @@ -42,10 +43,10 @@ </p> {#each members as { name, bio }} - <h6 class="talk-speaker"> + <p class="talk-speaker"> <Localized id="event-time-slot--by"/> {name}{#if bio}:{/if} - </h6> + </p> <p> {@html bio ?? ""} @@ -55,11 +56,6 @@ </article> <style> - h6 { - margin-top: 0; - margin-bottom: 0; - } - .time { margin: 0; font-weight: bold; @@ -74,12 +70,10 @@ } .speaker-image { - min-height: 200px; - max-height: 200px; - min-width: 200px; - max-width: 200px; + width: 200px; + height: 200px; object-fit: contain; - border-radius: 100px; + border-radius: 50%; border: solid 1px #f34b2122; } @@ -91,6 +85,17 @@ margin-bottom: 0; } + .talk-speaker{ + font-size: 24px; + font-weight: bold; + } + + .description-schedule-event { + font-size: 24px; + font-weight: bold; + margin-bottom: 0; + } + @media screen and (min-width: 768px) { .talk { display: flex;