adjusting styles, removing header, adding byline

sdl60660 · Dec 27, 2024 · 2bdf27b · 2bdf27b
1 parent 3ce6b27
commit 2bdf27b
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 53 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 
 import './styles/App.scss'
 
-import Header from './components/Header'
+// import Header from './components/Header'
 import Intro from './components/Intro'
 import Controls from './components/Controls'
 import ProgressTracking from './components/ProgressTracking'
 import Results from './components/Results'
 import Footer from './components/Footer'
 // import DownNotice from "./components/DownNotice";
-import ContributionAsk from './components/ContributionAsk'
+// import ContributionAsk from './components/ContributionAsk'
 
 function App() {
     const [queryData, setQueryData] = useState(null)
@@ -24,7 +24,7 @@ function App() {
 
     return (
         <div className="App">
-            <Header />
+            {/* <Header /> */}
             {/* <DownNotice/> */}
             {/* <ContributionAsk /> */}
             <Intro />

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -71,18 +71,6 @@ const Footer = (props) => {
                 </p>
                 <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
 
-                {/* <p>
-                    Maintaining this project is not free! Please consider
-                    chipping in{' '}
-                    <a
-                        href="https://ko-fi.com/samlearner"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        here
-                    </a>
-                    .
-                </p> */}
                 <div className="btn-container">
                     <a
                         title="Support this project"

diff --git a/frontend/src/components/Intro.jsx b/frontend/src/components/Intro.jsx
@@ -1,29 +1,54 @@
-import React from 'react';
-import "../styles/Intro.scss";
+import React from 'react'
+import '../styles/Intro.scss'
 
 const Intro = (props) => {
-
     return (
         <div className="container" id="intro-container">
             <div className="row">
                 <h1>Letterboxd Movie Recommendations</h1>
             </div>
             <div className="row intro-paragraph">
                 <p>
-                    This site will gather movie ratings from any Letterboxd user and provide movie recommendations based on
-                    ratings data from thousands of other users.
+                    This site will gather movie ratings from any Letterboxd user
+                    and provide movie recommendations based on ratings data from
+                    thousands of other users.
+                </p>
+                <p>
+                    The more movies you've rated on Letterboxd, the better and
+                    more personalized the recommendations will be, but it can
+                    provide recommendations to any user. If you'd like to filter
+                    out more well-known movies (based on the number of
+                    Letterboxd reviews), you can do so using the last slider
+                    below.
                 </p>
+            </div>
+            <div className="row byline">
                 <p>
-                    The more movies you've rated on Letterboxd, the better and more personalized
-                    the recommendations will be, but it can provide recommendations to any user. If you'd like to filter out more well-known
-                    movies (based on the number of Letterboxd reviews), you can do so using the last slider below.
+                    By{' '}
+                    <span className="bolded">
+                        {' '}
+                        <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href="https://www.samlearner.com/"
+                        >
+                            Sam Learner
+                        </a>
+                    </span>{' '} <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href="https://letterboxd.com/samlearner/"
+                    >
+                        <img
+                            className="icon-img"
+                            src="images/letterboxd.svg"
+                            alt="letterboxd link"
+                        />
+                    </a>
                 </p>
             </div>
         </div>
     )
 }
 
-
-
-
-export default Intro;
+export default Intro
diff --git a/frontend/src/styles/Intro.scss b/frontend/src/styles/Intro.scss
@@ -3,46 +3,79 @@
 #intro-container {
     text-align: left;
     max-width: 650px;
-    margin-top: 2rem;
-}
+    margin-top: 96px;
 
-#intro-container .row {
-    text-align: center;
-}
+    .row {
+        text-align: center;
+        max-width: 580px;
 
-#intro-container .row.intro-paragraph {
-    text-align: left;
-    max-width: 580px;
+        &.intro-paragraph {
+            text-align: left;
+
+            margin: 32px auto 24px;
+            font-family: 'Yantramanav', 'aktiv-grotesk', Inconsolata, Monaco;
+
+            p {
+                font-size: 18px;
+                line-height: 130%;
+            }
+        }
 
-    margin: 32px auto 40px;
-    font-family: 'Yantramanav', 'aktiv-grotesk', Inconsolata, Monaco;
+        &.byline {
+            max-width: 580px;
 
-    p {
-        font-size: 18px;
-        line-height: 130%;
+            font-style: italic;
+            text-align: left;
+
+            margin: 0 auto 32px;
+
+            .icon-img {
+                height: 14px;
+                width: auto;
+            }
+        }
+    }
+
+    h1 {
+        font-size: 44px;
+        line-height: 44px;
+        font-family: 'Red Hat Display', 'aktiv-grotesk', Inconsolata, Monaco;
+        font-weight: 500;
     }
-}
 
-#intro-container h1 {
-    font-size: 44px;
-    line-height: 44px;
-    font-family: 'Red Hat Display', 'aktiv-grotesk', Inconsolata, Monaco;
-    font-weight: 500;
+    span.bolded {
+        font-weight: 600;
+    }
 }
 
 @media only screen and (max-width: 700px) {
     #intro-container {
         max-width: 85vw;
+        margin-top: 64px;
 
-        .row.intro-paragraph {
-            margin: 24px auto 32px;
+        .row {
+            &.intro-paragraph {
+                margin: 32px auto 24px;
 
-            width: 90%;
-            max-width: 500px;
+                width: 90%;
+                max-width: 500px;
 
-            p {
-                font-size: 16px;
-                line-height: 130%;
+                p {
+                    font-size: 16px;
+                    line-height: 130%;
+                }
+            }
+
+            &.byline {
+                width: 90%;
+                max-width: 500px;
+
+                margin: 0 auto 24px;
+
+                .icon-img {
+                    height: 14px;
+                    width: auto;
+                }
             }
         }