working, basic style

Author: the-duckchild

src/Components/photoOfTheDay.scss

@@ -1,19 +1,36 @@
+ $background-color: #062356;
+ $text-color: #FFFFF2;
+ $lighter-orange: #EE8434;
+ $button-grey: #878888;
+$general-font: "Public Sans";
+
+ body {
+    background-color: $background-color;
+    font-family: $general-font
+ }
 
  .photoOfTheDayContainer{
      display: flex;
      justify-content: center; 
+     background-color: $background-color;
+     
  }
 
 .photo-of-the-day {
     display: flex;
     justify-content: center;
-    width: 100%;
+    width: auto;
     margin: auto;
-    border: 2px blue solid;
     height: 50vh;
+    object-fit: contain;
+    margin: 2vw;
+
 }
 
 .explanation {
     width: 70%;
     margin: auto;
+    color: $text-color;
+    padding: 5px;
+    text-align: center;
 }

src/Components/photoOfTheDay.tsx

@@ -8,10 +8,10 @@ export default function PhotoOfTheDay () {
     const [photo, setPhoto] = useState<string>()
     const [title, setTitle] = useState<string>()
     const [explanation,setExplanation] = useState<string>()
-    //const [photoAddress, setPhotoAddress] = useState("https://api.nasa.gov/planetary/apod?date=2025-05-19&api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy")
+   
 
     const fallBackImageDates = ["2025-05-08" , "2025-05-13", "2025-04-24" , "2025-03-26" , "2025-04-13" , "2025-03-23" , "2025-01-15" , "2024-11-10" , "2024-03-22" , "2023-08-10"]
-    const photoAddress = "https://api.nasa.gov/planetary/apod?date=2025-05-21&api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy"
+    const photoAddress = "https://api.nasa.gov/planetary/apod?&api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy"
 
     useEffect (() => {
         fetch(photoAddress)
@@ -25,7 +25,7 @@ export default function PhotoOfTheDay () {
                 else {
                     const randomFromZeroToNine = Math.floor(Math.random() * 10);
                     const altPhotoAddress = `https://api.nasa.gov/planetary/apod?date=${fallBackImageDates[randomFromZeroToNine]}&api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy`
-                    //setPhotoAddress(altPhotoAddress);
+          
                     fetch(altPhotoAddress)
                     .then(response => response.json())
                     .then(data => {
@@ -40,11 +40,12 @@ export default function PhotoOfTheDay () {
         },[]);
 
 return ( 
-<div>   
+<div> <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"></link>  
         <div className="photoOfTheDayContainer">
             <img src={photo} className="photo-of-the-day" width="100%" alt-text={title}/>
 
         </div>
+        <div className="explanation">Astronomy Photo of the Day</div>
         <div className="explanation">
         {/* {explanation} */}
         </div>

src/index.scss

@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }