Merge pull request #98 from Syntaf/webpack-andrew

Change styling on FAQ and Rainy Days Options pages
Syntaf · Oct 27, 2024 · 4a7f7e9 · 4a7f7e9
2 parents ad171bc + 55923c0
commit 4a7f7e9
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 25 deletions.
diff --git a/app/javascript/stylesheets/faq.scss b/app/javascript/stylesheets/faq.scss
@@ -4,34 +4,69 @@ body[data-page-controller="faqs"] {
     .faq-wrapper {
         display: flex;
         flex-direction: column;
-        height: 100%;
+        min-height: 100%;
+        flex: 1;
     }
 
     .faq-hero {
-        height: 400px;
-        display: flex;
-        align-items: center;
-        background-size: cover;
-        background-position: bottom;
+        // height: 400px;
+        // display: flex;
+        // align-items: center;
+        // background-size: cover;
+        // background-position: bottom;
+        margin: 0 auto;
+        padding-left: 30px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+        .header-card{
+            padding: 25px 25px 25px 0;
+            margin-bottom: 30px;
+            display: inline-flex;
+            justify-content: center;
 
-        h1 {
-            color: white;
-            letter-spacing: 3px;
-            margin-left: 15%;
+            h1, h2 {
+                display: inline-block;
+                font-size: 26px;
+                margin: 0;
+            }
+            h1 {
+                // color: white;
+                // margin-left: 15%;
+                // letter-spacing: 3px;
+                font-weight: $extraBold;
+                padding-right: 10px;
+                border-right: 1px solid #eeeeee;
+            }
+            h2 {
+                padding-left: 10px;
+
+                @media (max-width: $mobileBreakpoint) {
+                display: flex;
+                align-items: center; // For centering vertically on mobile
+                }
+            }
         }
-    }
 
-    .faq-hero.redrock { 
-        background-image: url("../images/redrock/faq.jpg");
+        @media (max-width: $mobileBreakpoint) {
+            text-align: center;
+            margin: 0px;
+            flex-basis: 100px;
+        }
     }
 
-    .faq-hero.castlerock {
-        background-image: url("../images/castlerock/faq2.jpg");
-    }
+    // .faq-hero.redrock { 
+    //     // background-image: url("../images/redrock/faq.jpg");
+    // }
+    // .btn-outline-dark {
+    //     background-color: black;
+    // }
+    // .faq-hero.castlerock {
+    //     background-image: url("../images/castlerock/faq2.jpg");
+    // }
 
-    .faq-hero.stoneypoint {
-        background-image: url('../images/stoneypoint/hero-image.png');
-    }
+    // .faq-hero.stoneypoint {
+    //     background-image: url('../images/stoneypoint/hero-image.png');
+    // }
 
     .faq-content {
         flex: 1;

diff --git a/app/javascript/stylesheets/rainy_day_options.scss b/app/javascript/stylesheets/rainy_day_options.scss
@@ -83,10 +83,10 @@ body[data-page-controller="rainy_day_options"] {
                 margin-bottom: 10px;
 
                 .header {
-                    color: #666;
+                    color: black;
                     flex: 1;
                     font-weight: $bold;
-                    font-size: 16px;
+                    font-size: 26px;
 
                     @media (max-width: $mobileBreakpoint) {
                         display: none;
@@ -133,6 +133,7 @@ body[data-page-controller="rainy_day_options"] {
                     font-size: 16px;
                     padding: 5px 0;
                     cursor: pointer;
+                    background-color: #eee; //Added background-color
 
                     &.list-group-item {
                         min-height: 0;
@@ -164,6 +165,8 @@ body[data-page-controller="rainy_day_options"] {
 
         .mountain-project {
             width: 70%;
+            padding: 15px;
+            border-radius: 8px;
 
             @media (max-width: $mobileBreakpoint) {
                 width: 100%;
@@ -181,11 +184,14 @@ body[data-page-controller="rainy_day_options"] {
     }
 
     .crag-info {
-        padding: 0 10px 35px 10px;
-        margin-bottom: 35px;
+        // padding: 0 10px 35px 10px;
+        padding: 25px;
+        // margin-bottom: 35px;
+        background-color: #fff;
 
         &.bottom-border {
             border-bottom: 1px solid #eee;
+            margin-bottom: 35px;
         }
 
         &.bottom-padding {

diff --git a/app/views/area/faqs/index.html.erb b/app/views/area/faqs/index.html.erb
@@ -1,11 +1,14 @@
 <div class="faq-wrapper">
     <div class="faq-hero <%= @watched_area.slug %>">
-        <h1>FAQ</h1>
+    <div class="header-card">
+            <h1>WET ROCK POLICE</h1>
+            <h2>FAQ</h2>
+    </div>
     </div>
 
     <div class="faq-content">
         <div class="container">
-            <a href="/<%= @watched_area.slug %>"><i class="fas fa-arrow-left"></i> Back</a>
+            <a href="/<%= @watched_area.slug %>"><button type="button" class= "btn btn-outline-dark"> Back</button></a>
             <p class="about">
                 Wet Rock Police is a site developed for the purpose of <strong>informing</strong>, not policing (as the name might imply). There are no, and will never be, plans to
                 create any form of monitization on this website. Below you will find a list of commonly asked questions; if you have further questions, complaints, or requests