minor changes

Nickolausen · Sep 11, 2024 · d0f7cc1 · d0f7cc1
1 parent 0aeb76f
commit d0f7cc1
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 23 deletions.
diff --git a/src/Components/Articolo.jsx b/src/Components/Articolo.jsx
@@ -8,7 +8,7 @@ export default function Articolo(props)
                 {props.title}
             </blockquote>
             <figcaption class="blockquote-footer mt-3">
-                <a href={props.articolo_url} target='_blank' className='fs-6'>
+                <a href={props.articolo_url} target='_blank' className='animated_link fs-6'>
                     <cite title={props.testata}>{props.testata}, {props.data}</cite>
                 </a>
             </figcaption>

diff --git a/src/Components/CardRassegna.jsx b/src/Components/CardRassegna.jsx
@@ -18,8 +18,7 @@ function CardRassegna(props)
                 <div className={styles.overlay + " card-body position-absolute bottom-0 start-50 translate-middle w-100 z-2"}>
                     <h5 className="card-title">{props.title}</h5>
                     <p className="card-text text-white">
-                        {props.description} - 
-                        <HashLink to={`${props.url}#rassegna`}> Clicca per vedere di più</HashLink>
+                        {props.description} - <HashLink className="animated_link" to={`${props.url}#rassegna`}> Clicca per vedere di più</HashLink>
                     </p>
                 </div>
             </> : 

diff --git a/src/Components/DelayedGallery.jsx b/src/Components/DelayedGallery.jsx
@@ -71,7 +71,7 @@ function DelayedGallery(props) {
                     close={() => setIndex(-1)}
                     plugins={[Counter, Fullscreen, Zoom, Thumbnails, Slideshow]}
                     animation={{ zoom: animationDuration }}
-                    counter={{ container: { className: "badge text-bg-primary fs-6", style: { top: 0, bottom: "unset" } } }}
+                    counter={{ container: { className: "fs-6", style: { top: 0, bottom: "unset" } } }}
                     carousel={{ preload }}
                     slideshow={{ autoplay, delay }}
                     zoom={{

diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
@@ -23,9 +23,7 @@ function Footer(props)
         </div>
         <div className="row pt-5">
             <div className="col-12">
-                <span className={styles.credits}>Crafted with <i className="fa fa-heart" style={{ color: "red"}}></i> by 
-                    <a className='text-decoration-none' href='https://github.com/Nickolausen'> Nicholas Magi</a> & 
-                    <a className='text-decoration-none' href='https://github.com/lspita'> Ludovico Maria Spitaleri </a>  
+                <span className={styles.credits}>Crafted with <i className="fa fa-heart" style={{ color: "red"}}></i> by <a className='animated_link text-decoration-none' href='https://github.com/Nickolausen'> Nicholas Magi</a> & <a className='animated_link text-decoration-none' href='https://github.com/lspita'> Ludovico Maria Spitaleri </a>  
                 </span>
             </div>
         </div>

diff --git a/src/Components/HomeLink.jsx b/src/Components/HomeLink.jsx
@@ -3,9 +3,9 @@ import { HashLink } from "react-router-hash-link"
 function HomeLink(props)
 {
     return <>
-        <HashLink to="/#home" className={props.classNames + " text-start d-flex flex-column align-items-center"}>
+        <HashLink to="/#home" className={props.classNames +" text-start d-flex flex-column align-items-center"}>
             <p className="mb-0"><i className="fa fa-home fs-2"></i></p>
-            <p className="py-0 my-0 1 fs-6">Torna alla Home</p>
+            <p className={"animated_link py-0 my-0 1 fs-6"}>Torna alla Home</p>
         </HashLink>
     </>
 }

diff --git a/src/Components/RassegnaDettaglio.jsx b/src/Components/RassegnaDettaglio.jsx
@@ -45,11 +45,11 @@ function RassegnaDettaglio() {
 
             fetchedRassegna.articoli.forEach(articolo => 
                 {
-                    if (countArticoli % 4 === 0) colClasses += " col-md-12 col-xl-3"
+                    if (countArticoli % 4 === 0) colClasses += " col-md-12 col-xl-6"
                     else if (countArticoli % 3 === 0) colClasses += " col-md-6 col-xl-4"
                     else if (countArticoli % 2 === 0) colClasses += " col-md-6"
 
-                    fetchedArticoli.push(<div className={colClasses + ' px-0 d-flex flex-column justify-content-center align-items-center'}>
+                    fetchedArticoli.push(<div style={{minHeight: 250 + "px"}} className={colClasses + ' px-0 d-flex flex-column justify-content-center align-items-center'}>
                         <Articolo { ...articolo}/>
                     </div>)
                 })
@@ -92,7 +92,7 @@ function RassegnaDettaglio() {
 
     return <>
         <div id='rassegna' className="container px-0 d-flex justify-content-center align-items-start">
-            <button className='btn btn-primary mt-4 mb-0 mb-xl-4 outline-0 border-0'>
+            <button className='btn mt-4 mb-0 mb-xl-4 outline-0 border-0'>
                 <HomeLink></HomeLink>
             </button>
         </div>
@@ -117,7 +117,7 @@ function RassegnaDettaglio() {
                             <img className={styles.yt_logo + ' position-absolute start-50 top-50 translate-middle exclude'} src={import.meta.env.BASE_URL + '/imgs/YT_logo.png'}></img>
                         </a>
                     </div>
-                    <p className='pt-4 fs-5'>Clicca sull'immagine per visionare il video su YouTube!</p>
+                    <p className='pt-4 fs-5'>Clicca sull'immagine per visionare il video su <a className="animated_link" href={'https://www.youtube.com/watch?v=' + rassegna.yt_id} target='_blank'>Youtube</a>!</p>
                 </div>
             </div>
         </div>

diff --git a/src/DB_Eventi.js b/src/DB_Eventi.js
@@ -25,13 +25,13 @@ function get_DB_Eventi()
                     testata: "CesenaToday",
                     articolo_url: "https://www.cesenatoday.it/cronaca/2protagonistra-la-matemativa-un-successo-la-notte-pitagorica-all-itt-pascal.html",
                     title: "Protagonista la matematica, un successo la 'Notte Pitagorica' all'Itt Pascal",
-                    data: "17 maggio 2024"
+                    data: "17/05/2024"
                 },
                 {
                     testata: "Corriere Cesenate",
                     articolo_url: "https://www.corrierecesenate.it/Cesena/Notte-Pitagorica-l-Itt-Pascal-Grande-successo",
                     title: "Notte Pitagorica, l'Itt Pascal: 'Grande successo'",
-                    data: "16 maggio 2024"
+                    data: "16/05/2024"
                 }
             ]
         },
@@ -52,25 +52,25 @@ function get_DB_Eventi()
                     testata: "Corriere Cesenate",
                     articolo_url: "https://www.corrierecesenate.it/Cesena/Gli-Itinerari-cosmici-del-Pascal-alla-Rocca-Malatestiana",
                     title: "Gli 'Itinerari cosmici' del Pascal alla Rocca Malatestiana",
-                    data: "24 luglio 2024"
+                    data: "24/07/2024"
                 },
                 {
                     testata: "Corriere Cesenate",
                     articolo_url: "https://www.corrierecesenate.it/Cesena/I-Pitagorici-dell-Itt-Pascal-propongono-gli-Itinerari-cosmici",
                     title: "I Pitagorici dell'Itt Pascal propongono gli Itinerari cosmici",
-                    data: "29 luglio 2024"
+                    data: "29/07/2024"
                 },
                 {
                     testata: "Corriere Cesenate",
                     articolo_url: "https://www.corrierecesenate.it/Cesena/In-tanti-alla-Notte-pitagorica-.-La-fotogallery",
                     title: "In tanti alla 'Notte pitagorica'. La fotogallery",
-                    data: "31 luglio 2024"
+                    data: "31/07/2024"
                 },
                 {
                     testata: "Radio Studio Delta",
                     articolo_url: "https://www.radiostudiodelta.it/events/itinerari-cosmici-alla-rocca-malatestiana/",
                     title: "Itinerari Cosmici alla Rocca Malatestiana",
-                    data: "28 luglio 2024"
+                    data: "28/07/2024"
                 }
             ]
         }

diff --git a/src/index.css b/src/index.css
@@ -65,6 +65,31 @@
   text-align: center;
 }
 
+.animated_link {
+  display: inline-block;
+  position: relative;
+  top: 0;
+  color: var(--accent-color);
+}
+
+.animated_link::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--accent-color);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.animated_link:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
 article, section {
   margin: 0 auto;
   max-width: 1280px;
@@ -80,9 +105,9 @@ a {
   text-decoration: inherit;
 }
 
-a:hover {
+/* a:hover {
   color: var(--accent-color-shadow);
-}
+} */
 
 h1, h2, h3, h4, h5, .title-like {
   font-family: var(--second-font) !important;
@@ -142,7 +167,7 @@ hr {
   opacity: .75 !important;
 }
 
-@media (prefers-color-scheme: light) {
+/* @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -153,4 +178,4 @@ hr {
   button {
     background-color: #f9f9f9;
   }
-}
+} */