Merge pull request #46 from unixMiB/feature/improve-hero-background

Improve hero background
unixMiB · Oct 23, 2023 · 4dc9df4 · 4dc9df4
2 parents ec21dc9 + c24dced
commit 4dc9df4
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 92 deletions.
diff --git a/src/components/hero.jsx b/src/components/hero.jsx
@@ -4,7 +4,8 @@ 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 }) => {
   const data = useStaticQuery(
@@ -36,9 +37,35 @@ const Hero = ({ small }) => {
   const metadata = data.site.siteMetadata;
 
   return (
-    <div className='hero'>
-      <Container>
-        {/* {small && (
+    <div
+      style={{
+        position: "relative",
+        color: "black",
+      }}
+    >
+      <StaticImage
+        style={{
+          filter: "brightness(0.4)",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: -1,
+        }}
+        src='../assets/images/hero.jpg'
+        formats={["auto", "avif", "webp"]}
+        layout='fullWidth'
+        aspectRatio={3 / 1}
+      />
+      <div
+        style={{
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        <Container className='hero'>
+          {/* {small && (
           <Alert variant='warning'>
             <Alert.Heading>
               <FontAwesomeIcon
@@ -66,77 +93,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
@@ -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
@@ -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
@@ -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
@@ -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;