Skip to content

Commit

Permalink
[edit] img sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
Joy-port committed Sep 1, 2021
1 parent 0b69e52 commit c7bf536
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 38 deletions.
13 changes: 9 additions & 4 deletions app/assets/js/all.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion app/assets/style/all.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
34 changes: 34 additions & 0 deletions app/assets/style/components/_button.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
55 changes: 55 additions & 0 deletions app/assets/style/components/_loader.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
5 changes: 4 additions & 1 deletion app/assets/style/helpers/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ h1, h2, h3, h4, h5, h6, p, .h1, .h2, .h3, .h4, .h5, .h6{

a{
padding: 0;
&:hover{
opacity: .7;
}
}

img{
Expand All @@ -20,4 +23,4 @@ img{
//動畫效果清除x軸
html, body {
overflow-x: hidden;
}
}
3 changes: 3 additions & 0 deletions app/assets/style/utilities/_sizing.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
.w-128 {
width: 128px;
}
.max-w-350{
max-width: 350px;
}
.w-540 {
width: 540px;
}
Expand Down
50 changes: 18 additions & 32 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
>
Expand Down

0 comments on commit c7bf536

Please sign in to comment.