From c7bf536a171e021b6c25eb9d0cdfce2b332d2a0f Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Wed, 1 Sep 2021 12:21:38 +0800
Subject: [PATCH] [edit] img sizing

---
 app/assets/js/all.js                     | 13 ++++--
 app/assets/style/all.scss                |  3 +-
 app/assets/style/components/_button.scss | 34 +++++++++++++++
 app/assets/style/components/_loader.scss | 55 ++++++++++++++++++++++++
 app/assets/style/helpers/_base.scss      |  5 ++-
 app/assets/style/utilities/_sizing.scss  |  3 ++
 app/index.html                           | 50 ++++++++-------------
 7 files changed, 125 insertions(+), 38 deletions(-)
 create mode 100644 app/assets/style/components/_button.scss
 create mode 100644 app/assets/style/components/_loader.scss

diff --git a/app/assets/js/all.js b/app/assets/js/all.js
index 268987c..38f1a72 100644
--- a/app/assets/js/all.js
+++ b/app/assets/js/all.js
@@ -15,15 +15,20 @@ var swiper = new Swiper(".swiper-js", {
   },
   
   breakpoints: {
-    576: {
-      slidesPerView: 1,
-      spaceBetween: 0,
+    414: {
+      slidesPerView: 1.5,
+      spaceBetween: 15,
   
     },
-    768: {
+    576: {
       slidesPerView: 2,
       spaceBetween: 15,
   
+    },
+    768: {
+      slidesPerView: 2.5,
+      spaceBetween: 30,
+  
     },
     992: {
       slidesPerView: 3,
diff --git a/app/assets/style/all.scss b/app/assets/style/all.scss
index 5cb4ae9..6f9dfd2 100644
--- a/app/assets/style/all.scss
+++ b/app/assets/style/all.scss
@@ -14,7 +14,8 @@
 @import './utilities/spacing';
 @import './utilities/utilities';
 
-
+@import './components/loader';
+@import './components/button';
 @import './components/swiper';
 @import './components/timeline';
 @import './components/scrollbar';
\ No newline at end of file
diff --git a/app/assets/style/components/_button.scss b/app/assets/style/components/_button.scss
new file mode 100644
index 0000000..c4cf23b
--- /dev/null
+++ b/app/assets/style/components/_button.scss
@@ -0,0 +1,34 @@
+.btn-primary{
+    &:hover{
+        color:#630834;
+        border-color: #630834;
+        background-color: transparent;
+        opacity: 1;
+    }
+}
+.btn-outline-primary{
+    &:hover{
+        color:#EFEFEF;
+        border-color: transparent;
+        background-color: #630834;
+        opacity: 1;
+    }
+}
+
+.btn-secondary{
+    &:hover{
+        color:#E31277;
+        border-color: #E31277;
+        background-color: transparent;
+        opacity: 1;
+    }
+}
+
+.btn-outline-light{
+    &:hover{
+        color:#E31277;
+        border-color: #E31277;
+        background-color: transparent;
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/app/assets/style/components/_loader.scss b/app/assets/style/components/_loader.scss
new file mode 100644
index 0000000..315e809
--- /dev/null
+++ b/app/assets/style/components/_loader.scss
@@ -0,0 +1,55 @@
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
diff --git a/app/assets/style/helpers/_base.scss b/app/assets/style/helpers/_base.scss
index f246ec8..82f4012 100644
--- a/app/assets/style/helpers/_base.scss
+++ b/app/assets/style/helpers/_base.scss
@@ -11,6 +11,9 @@ h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6{
 
 a{
     padding: 0;
+    &:hover{
+        opacity: .7;
+    }
 }
 
 img{
@@ -20,4 +23,4 @@ img{
 //動畫效果清除x軸
 html, body {
     overflow-x: hidden;
-}
\ No newline at end of file
+}
diff --git a/app/assets/style/utilities/_sizing.scss b/app/assets/style/utilities/_sizing.scss
index 75e237e..ebb7cd0 100644
--- a/app/assets/style/utilities/_sizing.scss
+++ b/app/assets/style/utilities/_sizing.scss
@@ -12,6 +12,9 @@
 .w-128 {
   width: 128px;
 }
+.max-w-350{
+  max-width: 350px;
+}
 .w-540 {
   width: 540px;
 }
diff --git a/app/index.html b/app/index.html
index cab03c6..d055946 100644
--- a/app/index.html
+++ b/app/index.html
@@ -232,39 +232,25 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
           data-aos-duration="1400"
         >
           <div class="row g-0 gx-7">
-            <!-- 不同圖片縮放效果 -->
-
-            <!-- 整張等比例放大縮小 -->
-            <!--  <div class="col-md-4 h-md-350">
-              <img
-                class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
-                src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                alt="exhibition img"
-              />
-            </div> -->
-
-            <!-- 多加一個外框 圖片在方筐內放大縮小-->
             <div
               class="
                 col-md-5 col-lg-4
                 position-relative
-                overflow-hidden
-                h-345 h-md-auto
               "
             >
               <a
                 href="info.html"
-                class="p-0 d-block h-100 align-middle | hvr-shrink"
+                class="ratio ratio-1x1 h-100 d-block | p-0 mb-2 | mb-md-0| hvr-shrink"
               >
                 <img
                   src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
                   alt="展覽圖片"
-                  class="card-img h-100 w-100"
+                  class="card-img mb-2 | mb-md-0"
                 />
               </a>
             </div>
-
-            <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
+            
+            <div class="col-md-5 col-lg-6 py-md-12">
               <div class="d-flex flex-column justify-content-md-between h-100">
                 <div class="h-100 flex-grow-1 | mb-6 mb-md-0">
                   <div
@@ -295,7 +281,7 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                     $350
                   </p>
                   <p
-                    class="h6 mb-0"
+                    class="h6 mb-2"
                     data-aos="fade-left"
                     data-aos-duration="1400"
                   >
@@ -322,7 +308,7 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
               </div>
             </div>
             <div
-              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              class="d-none d-md-block offset-lg-1 col-md-1 py-12"
               data-aos="fade-left"
               data-aos-duration="1400"
             >
@@ -347,17 +333,17 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
           data-aos-duration="1400"
         >
           <div class="row g-0 gx-7">
-            <div class="col-md-5 col-lg-4 h-md-350">
+            <div class="col-md-5 col-lg-4">
               <!-- 整張等比例放大縮小 -->
-              <a href="info.html" class="p-0 d-block h-100 | hvr-shrink">
+              <a href="info.html" class="ratio ratio-1x1 h-100 d-block | p-0 mb-2 | mb-md-0 | hvr-shrink">
                 <img
-                  class="card-img w-100 h-100 mb-2 | mb-md-0"
+                  class="card-img mb-2 | mb-md-0"
                   src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
                   alt="exhibition img"
                 />
               </a>
             </div>
-            <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
+            <div class="col-md-5 col-lg-6 py-md-12">
               <div class="d-flex flex-column justify-content-md-between h-100">
                 <div class="h-100 flex-grow-1 | mb-6 mb-md-0">
                   <div
@@ -388,7 +374,7 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                     $350
                   </p>
                   <p
-                    class="h6 mb-0"
+                    class="h6 mb-2"
                     data-aos="fade-left"
                     data-aos-duration="1400"
                   >
@@ -415,7 +401,7 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
               </div>
             </div>
             <div
-              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              class="h-md-350 d-none d-md-block offset-lg-1 col-md-1 py-12"
               data-aos="fade-left"
               data-aos-duration="1400"
             >
@@ -440,16 +426,16 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
           data-aos-duration="1400"
         >
           <div class="row g-0 gx-7">
-            <div class="col-md-5 col-lg-4 h-md-350">
-              <a href="info.html" class="p-0 d-block h-100 | hvr-shrink">
+            <div class="col-md-5 col-lg-4">
+              <a href="info.html" class="ratio ratio-1x1 h-100 d-block | p-0 | hvr-shrink">
                 <img
-                  class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
+                  class="card-img mb-2 | mb-md-0"
                   src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
                   alt="exhibition img"
                 />
               </a>
             </div>
-            <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
+            <div class="col-md-5 col-lg-6 py-md-12">
               <div class="d-flex flex-column justify-content-md-between h-100">
                 <div class="h-100 flex-grow-1 | mb-6 mb-md-0">
                   <div
@@ -480,7 +466,7 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
                     $350
                   </p>
                   <p
-                    class="h6 mb-0"
+                    class="h6 mb-2"
                     data-aos="fade-left"
                     data-aos-duration="1400"
                   >
@@ -507,7 +493,7 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
               </div>
             </div>
             <div
-              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              class="h-md-350 d-none d-md-block offset-lg-1 col-md-1 py-12"
               data-aos="fade-left"
               data-aos-duration="1400"
             >