From 768981d7ae3da2077bbd334c51bcea3d00c983c7 Mon Sep 17 00:00:00 2001
From: "Kowalski Dragon (kowalski7cc)" <kowalski7cc@users.noreply.github.com>
Date: Mon, 23 Oct 2023 14:59:03 +0200
Subject: [PATCH 1/5] Improve hero background

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>
---
 src/components/hero.jsx         | 173 ++++++++++++++++++--------------
 src/pages/schedule.jsx          |  10 +-
 src/styles/base.scss            |  10 --
 src/styles/components/hero.scss |   1 -
 src/styles/pages/index.scss     |   2 -
 5 files changed, 105 insertions(+), 91 deletions(-)

diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index 2486d54..c458182 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -5,6 +5,7 @@ import Container from "react-bootstrap/Container";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
 import Alert from "react-bootstrap/Alert";
+import { StaticImage } from "gatsby-plugin-image";
 
 const Hero = ({ small }) => {
   const data = useStaticQuery(
@@ -36,9 +37,30 @@ const Hero = ({ small }) => {
   const metadata = data.site.siteMetadata;
 
   return (
-    <div className='hero'>
-      <Container>
-        {/* {small && (
+    <div style={{ display: "grid" }}>
+      <StaticImage
+        style={{
+          gridArea: "1/1",
+          filter: "brightness(0.5)",
+        }}
+        src='../assets/images/hero.jpg'
+        aspectRatio={4 / 1}
+        formats={["auto", "avif", "webp"]}
+        layout='fullWidth'
+        placeholder="blurred"
+
+      />
+      <div
+        className='hero'
+        style={{
+          gridArea: "1/1",
+          position: "relative",
+          placeItems: "center",
+          display: "grid",
+        }}
+      >
+        <Container>
+          {/* {small && (
           <Alert variant='warning'>
             <Alert.Heading>
               <FontAwesomeIcon
@@ -66,77 +88,82 @@ const Hero = ({ small }) => {
             </p>
           </Alert>
         )} */}
-        <h1 style={{ textTransform: "uppercase" }} className='mb-0 title'>
-          Linux Day Milano <span className='ldmi'>{metadata.event.year}</span>
-        </h1>
-        <h4 className='pb-3 pb-sm-5 title'>
-          <small>
-            organizzato da{" "}
-            <a
-              title='Scopri di più su unixMiB'
-              href={metadata.contacts.website}
-              target='_blank'
-              className='unixmib text-white'
-              rel='noopener noreferrer'
-            >
-              <span className='unix'>unix</span>
-              <span className='mib'>MiB</span>
-            </a>
-          </small>
-        </h4>
-        <div className='subtitle'>
-          <FontAwesomeIcon
-            icon={icon({ name: "calendar", family: "classic", style: "solid" })}
-          />{" "}
-          {metadata.event.text}
-          <br />
-          <FontAwesomeIcon
-            icon={icon({ name: "clock", family: "classic", style: "solid" })}
-          />{" "}
-          Ore {metadata.event.time}
-          <br />
-          <FontAwesomeIcon
-            icon={icon({
-              name: "map-marked-alt",
-              family: "classic",
-              style: "solid",
-            })}
-          />{" "}
-          {metadata.contacts.place.name}
-          <br />
-          <FontAwesomeIcon
-            icon={icon({
-              name: "chevron-right",
-              family: "classic",
-              style: "solid",
-            })}
-          />{" "}
-          {metadata.contacts.place.building}
-          <br />
-        </div>
-        {small && (
-          <div className='mt-5 gx-5 d-flex flex-wrap justify-content-start clearfix'>
-            <Button
-              href='/#explore'
-              size='lg'
-              className='m-1'
-              variant='warning'
-            >
-              Scopri di più
-            </Button>
-            <Button
-              href='/schedule'
-              size='lg'
-              className='m-1'
-              variant='warning'
-            >
-              {metadata.switches.schedule
-                ? "Guarda il programma"
-                : "Programma precedente"}
-            </Button>
+          <h1 style={{ textTransform: "uppercase" }} className='mb-0 title'>
+            Linux Day Milano <span className='ldmi'>{metadata.event.year}</span>
+          </h1>
+          <h4 className='pb-3 pb-sm-5 title'>
+            <small>
+              organizzato da{" "}
+              <a
+                title='Scopri di più su unixMiB'
+                href={metadata.contacts.website}
+                target='_blank'
+                className='unixmib text-white'
+                rel='noopener noreferrer'
+              >
+                <span className='unix'>unix</span>
+                <span className='mib'>MiB</span>
+              </a>
+            </small>
+          </h4>
+          <div className='subtitle'>
+            <FontAwesomeIcon
+              icon={icon({
+                name: "calendar",
+                family: "classic",
+                style: "solid",
+              })}
+            />{" "}
+            {metadata.event.text}
+            <br />
+            <FontAwesomeIcon
+              icon={icon({ name: "clock", family: "classic", style: "solid" })}
+            />{" "}
+            Ore {metadata.event.time}
+            <br />
+            <FontAwesomeIcon
+              icon={icon({
+                name: "map-marked-alt",
+                family: "classic",
+                style: "solid",
+              })}
+            />{" "}
+            {metadata.contacts.place.name}
+            <br />
+            <FontAwesomeIcon
+              icon={icon({
+                name: "chevron-right",
+                family: "classic",
+                style: "solid",
+              })}
+            />{" "}
+            {metadata.contacts.place.building}
+            <br />
           </div>
-        )}
-      </Container>
+          {small && (
+            <div className='mt-5 gx-5 d-flex flex-wrap justify-content-start clearfix'>
+              <Button
+                href='/#explore'
+                size='lg'
+                className='m-1'
+                variant='warning'
+              >
+                Scopri di più
+              </Button>
+              <Button
+                href='/schedule'
+                size='lg'
+                className='m-1'
+                variant='warning'
+              >
+                {metadata.switches.schedule
+                  ? "Guarda il programma"
+                  : "Programma precedente"}
+              </Button>
+            </div>
+          )}
+        </Container>
+      </div>
     </div>
   );
 };
diff --git a/src/pages/schedule.jsx b/src/pages/schedule.jsx
index 317ebb8..0129ec5 100644
--- a/src/pages/schedule.jsx
+++ b/src/pages/schedule.jsx
@@ -215,10 +215,6 @@ const Page = ({ data }) => {
 
   useEffect(() => {
     let current = localStorage.getItem("starredTalks");
-    let showStarred = localStorage.getItem("showStarred");
-    if (showStarred === "true") {
-      setShowStarred(true);
-    }
     if (current) {
       try {
         current = JSON.parse(current);
@@ -230,6 +226,7 @@ const Page = ({ data }) => {
         setStarredTalks({});
       }
     }
+    localStorage.getItem("showStarred") === "true" && setShowStarred(true);
   }, []);
 
   useEffect(() => {
@@ -260,7 +257,10 @@ const Page = ({ data }) => {
               <div className='d-flex flex-row gap-3 d-print-none'>
                 <Button
                   variant='warning'
-                  onClick={() => {setShowStarred((curr) => !curr); localStorage.setItem("showStarred", !showStarred)}}
+                  onClick={() => {
+                    setShowStarred((curr) => !curr);
+                    localStorage.setItem("showStarred", !showStarred);
+                  }}
                 >
                   {showStarred ? "Tutte le talk" : "Agenda personale"}
                 </Button>
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 3af9043..7534d74 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -6,16 +6,6 @@ html {
   color: $unixmib;
 }
 
-@mixin cover-background($imageUrl, $overlay) {
-  @if $overlay {
-    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-      url($imageUrl) no-repeat center center fixed;
-  } @else {
-    background: url($imageUrl) no-repeat center center fixed;
-  }
-  background-size: cover;
-}
-
 @mixin tshadow() {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }
diff --git a/src/styles/components/hero.scss b/src/styles/components/hero.scss
index 40bd154..c9ad118 100644
--- a/src/styles/components/hero.scss
+++ b/src/styles/components/hero.scss
@@ -1,5 +1,4 @@
 .hero {
-    @include cover-background("../assets/images/hero.jpg", true);
 
     @include media-breakpoint-up(md) {
         padding: 3rem 4rem 5rem;
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
index 76eda94..8ba03ab 100644
--- a/src/styles/pages/index.scss
+++ b/src/styles/pages/index.scss
@@ -132,8 +132,6 @@
     &#sponsors {
       background-color: white; //#1881a2;
       color: black;
-      //@include cover-background("../assets/images/sponsor-bg.jpg", true);
-      //background-image: url("../assets/images/sponsor-bg.jpg");
       background-position: 50% 0;
       background-size: cover;
       padding-top: 0;

From 97058a23e47f0ae649dd8747fc9105b8a828d0b3 Mon Sep 17 00:00:00 2001
From: "Kowalski Dragon (kowalski7cc)" <kowalski7cc@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:00:18 +0200
Subject: [PATCH 2/5] Format code

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>
---
 src/components/hero.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index c458182..4cda721 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -47,8 +47,7 @@ const Hero = ({ small }) => {
         aspectRatio={4 / 1}
         formats={["auto", "avif", "webp"]}
         layout='fullWidth'
-        placeholder="blurred"
-
+        placeholder='blurred'
       />
       <div
         className='hero'

From e3a8331a598a29b336c8045273d2afd9733061ef Mon Sep 17 00:00:00 2001
From: "Kowalski Dragon (kowalski7cc)" <kowalski7cc@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:14:44 +0200
Subject: [PATCH 3/5] Fix image size

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>
---
 src/components/hero.jsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index 4cda721..8310055 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -37,28 +37,34 @@ const Hero = ({ small }) => {
   const metadata = data.site.siteMetadata;
 
   return (
-    <div style={{ display: "grid" }}>
+    <div
+      style={{
+        position: "relative",
+      }}
+    >
       <StaticImage
         style={{
-          gridArea: "1/1",
-          filter: "brightness(0.5)",
+          filter: "brightness(0.4)",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: -1,
         }}
         src='../assets/images/hero.jpg'
-        aspectRatio={4 / 1}
         formats={["auto", "avif", "webp"]}
         layout='fullWidth'
+        aspectRatio={3 / 1}
         placeholder='blurred'
       />
       <div
-        className='hero'
         style={{
-          gridArea: "1/1",
           position: "relative",
-          placeItems: "center",
-          display: "grid",
+          zIndex: 1,
         }}
       >
-        <Container>
+        <Container className='hero'>
           {/* {small && (
           <Alert variant='warning'>
             <Alert.Heading>

From 34989cfd4e69b9c8f91c3f556266ba398d30bfa4 Mon Sep 17 00:00:00 2001
From: "Kowalski Dragon (kowalski7cc)" <kowalski7cc@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:15:27 +0200
Subject: [PATCH 4/5] Lint: remove alert

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>
---
 src/components/hero.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index 8310055..b112b0d 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -4,7 +4,7 @@ import Button from "react-bootstrap/Button";
 import Container from "react-bootstrap/Container";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
-import Alert from "react-bootstrap/Alert";
+// import Alert from "react-bootstrap/Alert";
 import { StaticImage } from "gatsby-plugin-image";
 
 const Hero = ({ small }) => {

From c24dcedf2d2e0562076b3c397ffa8af30570f9a2 Mon Sep 17 00:00:00 2001
From: "Kowalski Dragon (kowalski7cc)" <kowalski7cc@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:19:23 +0200
Subject: [PATCH 5/5] Improve cover image

Signed-off-by: Kowalski Dragon (kowalski7cc) <kowalski7cc@users.noreply.github.com>
---
 src/components/hero.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index b112b0d..6fd80df 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -40,6 +40,7 @@ const Hero = ({ small }) => {
     <div
       style={{
         position: "relative",
+        color: "black",
       }}
     >
       <StaticImage
@@ -56,7 +57,6 @@ const Hero = ({ small }) => {
         formats={["auto", "avif", "webp"]}
         layout='fullWidth'
         aspectRatio={3 / 1}
-        placeholder='blurred'
       />
       <div
         style={{