Navbar link edits + css edits

DeceitfulDragon · May 19, 2024 · 73aace3 · 73aace3
1 parent 80518c4
commit 73aace3
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 58 deletions.
diff --git a/1-distribution.html b/1-distribution.html
@@ -10,7 +10,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
     <!-- Favicon -->
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>

diff --git a/2-csfp.html b/2-csfp.html
@@ -10,13 +10,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
-        <!-- Favicon -->
-        <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+    <link rel="manifest" href="./site.webmanifest">
 </head>
 <body>
     <header class="navbar-custom">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>

diff --git a/3-organizations.html b/3-organizations.html
@@ -10,13 +10,15 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
-        <!-- Favicon -->
-        <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
-        <link rel="manifest" href="./site.webmanifest">
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+    <link rel="manifest" href="./site.webmanifest">
 </head>
 <body>
     <header class="navbar-custom">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>
@@ -83,11 +85,14 @@ <h1 class="org-row-title">Five Loaves Food Shelf <i class="fas fa-chevron-right
             </article>
             <header class="col-md-10">
                 <h1 class="org-row-title">Two Fish Thrift Store <i class="fas fa-chevron-right arrow-icon"></i></h1>
-                <p class="org-row-desc">Lorem ipsum dolor sit amet</p>
+                <p class="org-row-desc">Started as the Community Clothing Center in 1979</p>
             </header>
             <!-- Dropdown content -->
             <article class="collapse org-row-extra" id="orgInfo2">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id diam maecenas ultricies mi eget mauris pharetra. Auctor augue mauris augue neque gravida in. Pellentesque dignissim enim sit amet venenatis urna. Fames ac turpis egestas maecenas. Erat velit scelerisque in dictum non. Tincidunt arcu non sodales neque sodales. Felis imperdiet proin fermentum leo vel orci porta non. A arcu cursus vitae congue mauris rhoncus aenean. Viverra mauris in aliquam sem fringilla. Sit amet purus gravida quis blandit turpis cursus in hac. In tellus integer feugiat scelerisque varius. Ornare lectus sit amet est placerat in egestas. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Morbi tristique senectus et netus et malesuada fames. Pretium vulputate sapien nec sagittis aliquam malesuada. Quam id leo in vitae turpis massa sed. Ut diam quam nulla porttitor massa id neque aliquam.</p>
+                <p>Two Fish Thrift Store has a long history in New Richmond.  Started as the Community Clothing Center in 1979 in the basement of First Lutheran Church, it has moved around town and eventually became the Clothing Center. <br>Later, the Clothing Center was renamed Two Fish to complement the food pantry, Five Loaves. 
+                    Two Fish has a wide assortment of clothing, books, games, puzzles, toys, and household items.
+                    <br>Most items are priced between $1-$6, with sales each week and a senior citizen discount on Monday and Tuesdays.
+                </p>
             </article>
         </section>
         <!-- COME Meal -->

diff --git a/5-donations.html b/5-donations.html
@@ -10,7 +10,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
     <!-- Favicon -->
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item active">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>

diff --git a/6-volunteering.html b/6-volunteering.html
@@ -10,7 +10,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
     <!-- Favicon -->
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>

diff --git a/7-about.html b/7-about.html
@@ -10,7 +10,9 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <!-- Custom Stylesheet -->
+    <!-- Reset Stylesheet -->
+    <link href="./assets/css/reset.css" rel="stylesheet">
+    <!-- Main Stylesheet -->
     <link href="./assets/css/style.css" rel="stylesheet">
     <!-- Favicon -->
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,7 +44,7 @@
                         <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                        <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -24,15 +24,19 @@ html, body {
 body {
     font-family: "Roboto", sans-serif;
     background-color: var(--tertiaryColor);
-     /* Min viewport height */
     min-height: 100vh;
+    overflow-x: hidden;
 }
 
 main {
     flex-grow: 1;
     overflow-y: auto;
 }
 
+ul, ol {
+    padding-left: 40px;
+}
+
 header, footer {
     flex-shrink: 0;
 }
@@ -59,7 +63,7 @@ h1, h2, h3, h4, h5 {
     border: none;
 }
 .btn-primary:hover {
-    background-color:#63463b;
+    background-color: #63463b;
 }
 
 /* Text color classes */
@@ -117,7 +121,6 @@ h1, h2, h3, h4, h5 {
     overflow: hidden;
     margin-bottom: 20px;
     border-radius: 15px;
-
 }
 
 .carousel-inner {
@@ -218,7 +221,6 @@ footer li a:hover {
     color: #cfcfcf;
 }
 
-
 .distribution, .po-box, .volunteer-link {
     text-align: center;
 }
@@ -252,7 +254,7 @@ footer li a:hover {
 }
 .distribution-box img {
     width: 70%;
-    height: auto;
+    max-height: 330px;
     border-radius: 15px;
     max-width: 100%;
 }
@@ -539,7 +541,6 @@ footer li a:hover {
 
 /* Responsive changes */
 @media (max-width: 992px) {
-
     .main-youtube, .wide-image, .sidebar {
         flex-basis: 100%;
         max-width: 100%;
@@ -552,89 +553,80 @@ footer li a:hover {
 
     .about-us img, .card-title, .volunteer-heading {
         font-size: 1.75rem;
-   }
+    }
     .card, .card-body {
         padding: 10px;
-   }
+    }
     .distribution-box {
         flex-basis: 100%;
-   }
+    }
     .distribution-box img {
         width: 100%;
-   }
+    }
     .card-text, .volunteer-text, .volunteer-link {
         font-size: 1rem;
-   }
+    }
     .csfp-text {
         border-bottom: 2px solid #dee2e6;
         border-right: none;
-   }
+    }
     .csfp-image {
         margin-left: 0px;
         margin-top: 10px;
         margin-right: 10px;
-   }
+    }
     .csfp-image:last-child {
         margin-right: 0;
-   }
+    }
 }
 
 @media (max-width: 768px) {
     h1, h2, h3, h4, h5, .card-title, .card-text, .sidebar li {
         font-size: 1.5rem;
     }
-
     .distribution-box {
         flex-basis: 100%;
-   }
+    }
     .post-header {
         flex-wrap: wrap;
-   }
+    }
     .post-title-section {
         flex-basis: 100%;
         margin-bottom: 10px;
-   }
+    }
     .post-title {
         font-size: 1.25rem;
-   }
+    }
     .post-date {
         font-size: 0.85rem;
-   }
+    }
     .author-name {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: 150px;
-   }
+    }
 }
 
 @media (max-width: 576px) {
     h1, h2, h3, h4, h5, .card-title, .card-text {
         font-size: 1.5rem;
     }
-
-    #fsCarousel .carousel-inner .carousel-item img {
-        height: 300px;
-    }
-
-    #tsCarousel .carousel-inner .carousel-item img {
+    #fsCarousel .carousel-inner .carousel-item img, #tsCarousel .carousel-inner .carousel-item img {
         height: 300px;
     }
-
     footer ul {
         flex-direction: column;
     }
-
     footer li, footer li a {
         width: 100%;
         margin: 10px 0;
     }
-
     .about-us img {
         max-width: 100%;
-   }
+    }
     .distribution-box {
         padding: 10px;
         flex-basis: 100%;
-   }
+    }
 }
diff --git a/index.html b/index.html
@@ -10,7 +10,9 @@
         <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
         <!-- Icons -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-        <!-- Custom Stylesheet -->
+        <!-- Reset Stylesheet -->
+        <link href="./assets/css/reset.css" rel="stylesheet">
+        <!-- Main Stylesheet -->
         <link href="./assets/css/style.css" rel="stylesheet">
         <!-- Favicon -->
         <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,7 +44,7 @@
                             <a class="nav-link" href="3-organizations.html"><i class="fa-solid fa-sitemap"></i> Organizations</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="4-newsletter.html"><i class="fa-solid fa-newspaper"></i> Newsletter</a>
+                            <a class="nav-link" href="4-news.html"><i class="fa-solid fa-newspaper"></i> News</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="5-donations.html"><i class="fa-solid fa-money-check-dollar"></i> Donations</a>