Finish trillio project

Phurba-Sherpa · Apr 7, 2024 · ded20de · ded20de
1 parent c5a8813
commit ded20de
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 24 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,5 @@
 /*
 COLORS
-
-
-
-
 */
 :root {
   --color-primary: #eb2f64;
@@ -32,6 +28,9 @@ COLORS
 html {
   font-size: 62.5%;
   box-sizing: border-box; }
+  @media only screen and (max-width: 68.75em) {
+    html {
+      font-size: 50%; } }
 
 body {
   font-size: 1.6rem;
@@ -48,11 +47,15 @@ img {
 
 .container {
   max-width: 120rem;
-  width: 90%;
   margin: 8rem auto;
   background-color: var(--color-grey-light-1);
   box-shadow: var(--shadow-dark);
   min-height: 40rem; }
+  @media only screen and (max-width: 75em) {
+    .container {
+      margin: 0;
+      max-width: 100%;
+      width: 100%; } }
 
 .header {
   height: 7rem;
@@ -63,10 +66,17 @@ img {
   align-items: center;
   justify-content: space-between;
   padding-left: 2rem; }
+  @media only screen and (max-width: 31.25em) {
+    .header {
+      flex-wrap: wrap;
+      height: 11rem;
+      align-content: space-around; } }
 
 .content {
-  display: flex;
-  background-color: orange; }
+  display: flex; }
+  @media only screen and (max-width: 56.25em) {
+    .content {
+      flex-direction: column; } }
 
 .sidebar {
   background-color: var(--color-grey-dark-1);
@@ -85,13 +95,27 @@ img {
   background-color: var(--color-grey-light-1);
   border-bottom: var(--line);
   font-size: 1.4rem; }
+  @media only screen and (max-width: 56.25em) {
+    .detail {
+      padding: 2.5rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .detail {
+      flex-direction: column; } }
 
 .desc {
   flex: 0 0 60%;
   background-color: #fff;
   margin-right: 4.5rem;
   box-shadow: var(--shadow-light);
   padding: 3rem; }
+  @media only screen and (max-width: 56.25em) {
+    .desc {
+      padding: 2rem;
+      margin-right: 2.5rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .desc {
+      margin-bottom: 2.5rem;
+      margin-right: 0; } }
 
 .user-reviews {
   flex: 1;
@@ -114,6 +138,11 @@ img {
   align-items: center;
   justify-content: center;
   font-size: 1.4rem; }
+  @media only screen and (max-width: 31.25em) {
+    .search {
+      order: 1;
+      flex: 0 0 100%;
+      background-color: var(--color-grey-light-2); } }
   .search__input {
     font-family: inherit;
     padding: .7rem 2rem;
@@ -196,10 +225,19 @@ img {
   list-style: none;
   font-size: 1.4rem;
   margin-top: 1.4rem; }
+  @media only screen and (max-width: 56.25em) {
+    .side-nav {
+      display: flex;
+      justify-content: center;
+      margin: 0; } }
   .side-nav__item {
     position: relative; }
     .side-nav__item:not(:last-child) {
       margin-bottom: .5rem; }
+      @media only screen and (max-width: 56.25em) {
+        .side-nav__item:not(:last-child) {
+          margin-bottom: 0;
+          margin-right: .5rem; } }
     .side-nav__item::before {
       content: '';
       display: block;
@@ -216,6 +254,9 @@ img {
       width: 100%; }
     .side-nav__item:active::before {
       background-color: var(--color-primary-light); }
+    @media only screen and (max-width: 56.25em) {
+      .side-nav__item {
+        flex: 1; } }
   .side-nav__link:link, .side-nav__link:visited {
     color: var(--color-grey-light-1);
     text-decoration: none;
@@ -225,11 +266,24 @@ img {
     align-items: center;
     z-index: 10;
     position: relative; }
+    @media only screen and (max-width: 56.25em) {
+      .side-nav__link:link, .side-nav__link:visited {
+        justify-content: center;
+        padding: 2rem 0; } }
+    @media only screen and (max-width: 37.5em) {
+      .side-nav__link:link, .side-nav__link:visited {
+        flex-direction: column;
+        padding: 1.5rem .5rem; } }
   .side-nav__icon {
     width: 1.75rem;
     height: 1.75rem;
     margin-right: 2rem;
     fill: currentColor; }
+    @media only screen and (max-width: 37.5em) {
+      .side-nav__icon {
+        margin-right: 0;
+        width: 1.5rem;
+        height: 1.5rem; } }
 
 /* =====================
     LEGAL
@@ -239,6 +293,9 @@ img {
   text-align: center;
   padding: 2.5rem;
   color: var(--color-grey-light-4); }
+  @media only screen and (max-width: 56.25em) {
+    .legal {
+      display: none; } }
 
 /* =====================
     GALLERY
@@ -255,13 +312,18 @@ img {
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: var(--line) .overview __heading;
-    border-bottom-font-size: 2.25rem;
-    border-bottom-font-weight: 300;
-    border-bottom-text-transform: uppercase;
-    border-bottom-padding: 1.5rem 3rem;
-    border-bottom-letter-spacing: 1px;
-    border-bottom-color: var(--color-grey-dark-2); }
+  border-bottom: var(--line); }
+  .overview__heading {
+    font-size: 2.25rem;
+    font-weight: 300;
+    text-transform: uppercase;
+    padding: 1.5rem 3rem;
+    letter-spacing: 1px;
+    color: var(--color-grey-dark-2); }
+    @media only screen and (max-width: 37.5em) {
+      .overview__heading {
+        font-size: 1.6rem;
+        padding: 1rem; } }
   .overview__stars {
     margin-right: auto;
     display: flex; }
@@ -288,9 +350,15 @@ img {
     font-size: 2.25rem;
     font-weight: 300;
     margin-bottom: -3px; }
+    @media only screen and (max-width: 37.5em) {
+      .overview__rating-avg {
+        font-size: 1.8rem; } }
   .overview__rating-vote {
     font-size: .8rem;
     text-transform: uppercase; }
+    @media only screen and (max-width: 37.5em) {
+      .overview__rating-vote {
+        font-size: .5rem; } }
 
 /* =====================
     button
@@ -393,6 +461,8 @@ img {
   align-items: center; }
   .recommend__count {
     margin-right: auto; }
+  .recommend__friends {
+    display: flex; }
   .recommend__photo {
     box-sizing: content-box;
     height: 4rem;
@@ -412,6 +482,10 @@ img {
   padding: 3rem;
   position: relative;
   overflow: hidden; }
+  @media only screen and (max-width: 56.25em) {
+    .review {
+      padding: 2rem;
+      margin-bottom: 2.5rem; } }
   .review__text {
     margin-bottom: 2rem;
     position: relative;
@@ -455,6 +529,9 @@ img {
 .cta {
   padding: 3.5rem 0;
   text-align: center; }
+  @media only screen and (max-width: 56.25em) {
+    .cta {
+      padding: 2.5rem; } }
   .cta__book-now {
     text-transform: uppercase;
     font-size: 2rem;

diff --git a/sass/_base.scss b/sass/_base.scss
@@ -1,9 +1,5 @@
 /*
 COLORS
-
-
-
-
 */
 :root {
     --color-primary: #eb2f64;
@@ -24,6 +20,12 @@ COLORS
     --line: 1px solid var(--color-grey-light-2);
 }
 
+$bp-largest: 75em;
+$bp-large: 68.75em;
+$bp-md: 56.25em;
+$bp-sm: 37.5em;
+$bp-xs: 31.25em;
+
 * {
     margin: 0;
     padding: 0;
@@ -39,6 +41,10 @@ COLORS
 html {
     font-size: 62.5%;
     box-sizing: border-box;
+
+    @media only screen and (max-width: $bp-large) {
+        font-size: 50%;
+    }
 }
 
 body {