💄

noeypatt · Mar 28, 2020 · 88e5181 · 88e5181 · vercel · Mar 28, 2020
1 parent cf8197f
commit 88e5181
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 11 deletions.
diff --git a/pages/index/Society.js b/pages/index/Society.js
@@ -50,14 +50,14 @@ const Society = () => {
                 <link rel='icon' href='/static/logomain.svg' />
             </Head>
             <NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
-            <div className="warp-about">
+            <div className="warp-society">
                 <div className="page-content">
                     {
                         isSmallScreen ?
                             <div className="container-fluid">
                                 <div className="head-content">
-                                    <h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
-                                    <h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
+                                    <h4>สังคมผู้สูงอายุ </h4>
+                                    <h5>ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h5>
                                 </div>
 
                                 <div className="detail-content">
@@ -78,8 +78,8 @@ const Society = () => {
                             :
                             <div className="container-fluid">
                                 <div className="head-content">
-                                    <h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
-                                    <h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
+                                    <h3>สังคมผู้สูงอายุ </h3>
+                                    <h3>ภายในอำเภอกะทู้ จังหวัดภูเก็ต</h3>
                                 </div>
 
                                 <div className="detail-content">

diff --git a/styles/base.scss b/styles/base.scss
@@ -6,6 +6,9 @@
 @import "./info.scss";
 @import "./footer.scss";
 
+//Index
+@import './index/society.scss';
+
 //Main
 @import "./main.scss";
 @import "./chart.scss";

diff --git a/styles/cover.scss b/styles/cover.scss
@@ -1,6 +1,9 @@
 $font-header: "Frank Ruhl Libre" !important;
 $font-color: #071d40 !important;
 $primary-color: #39b54a !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
+
 
 .warp-cover {
   // position: relative;
@@ -44,17 +47,18 @@ $primary-color: #39b54a !important;
           color: $font-color;
         }
         h5 {
+          border: $border-bg-color;
           cursor: pointer;
           margin-top: 1rem;
-          background-color: $primary-color;
+          background: $bg-color;
           color: white !important;
           border-radius: 2rem;
           padding: 1rem 2rem;
         }
         h5:hover {
           color: $primary-color;
-          border: 1px solid $primary-color;
-          background-color: white !important;
+          border: $border-bg-color;
+          background: white !important;
         }
 
         .detail {

diff --git a/styles/index/society.scss b/styles/index/society.scss
@@ -0,0 +1,61 @@
+.warp-society {
+  .page-content {
+    padding-top: 3rem;
+
+    .container-fluid {
+      display: flex;
+      flex-direction: column;
+      .head-content {
+        h3 {
+          font-size: 2rem !important;
+          margin-bottom: 1rem !important;
+        }
+      }
+      .detail-content {
+        display: flex;
+        justify-content: center;
+        margin: 2rem 3rem;
+
+        @media (max-width: 575.98px) {
+          flex-direction: column;
+        }
+        img {
+          height: 20rem;
+          margin-right: 1rem;
+          @media (max-width: 575.98px) {
+            margin-right: 0;
+            height: 18rem;
+          }
+        }
+
+        .data-detail-content {
+          display: flex;
+          flex-direction: column;
+
+          @media (max-width: 575.98px) {
+            margin-top: 1rem;
+          }
+
+          .title-content {
+            padding: 0 3rem;
+
+            @media (max-width: 768px) {
+              padding: 0;
+            }
+
+            .header-title-content {
+              font-weight: bold !important;
+            }
+
+            h6 {
+              text-align: start;
+              opacity: 0.8;
+              margin-bottom: 0.5rem !important;
+              font-weight: lighter;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/styles/nav.scss b/styles/nav.scss
@@ -2,6 +2,8 @@ $font-color: #071d40 !important;
 $font-header: "Frank Ruhl Libre" !important;
 $font-base: "Prompt", sans-serif;
 $primary-color: #39b54a !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
 $line-color: #e8e9fe;
 
 .warp-index {
@@ -140,16 +142,18 @@ ul {
     }
 
     p.li-buttom-line-active {
-      border: 1px solid $primary-color;
+      border: $border-bg-color;
       border-radius: 1.5rem;
       padding: 0.5rem 2rem !important;
       margin: 0 1rem 0 0.5rem !important;
-      background-color: $primary-color;
+      background: $bg-color;
       color: white !important;
     }
     p.li-buttom-line-active:hover {
+      margin: 0 1rem 0 0.5rem !important;
       color: $font-color;
-      background-color: white !important;
+      border: $border-bg-color;
+      background: white !important;
     }
   }
 }