finished popup function@css and started media queries

staxx6 · Jun 29, 2018 · b9ab9a1 · b9ab9a1
1 parent d4e8b9d
commit b9ab9a1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
@@ -44,6 +44,9 @@
 html {
   font-size: 62.5%;
   /* default 16px -> now 10px; better for user changes */ }
+  @media only screen and (max-width: 93em) {
+    html {
+      font-size: 50%; } }
 
 body {
   box-sizing: border-box;
@@ -218,15 +221,16 @@ body {
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(var(--color-black-hex), 0.8);
-  z-index: 100; }
+  background-color: rgba(var(--color-black-hex), 0.95);
+  z-index: 100;
+  visibility: hidden;
+  opacity: 0;
+  transition: all .3s; }
   @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
     .popup {
       background-color: rgba(var(--color-black-hex), 0.3);
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px); } }
-  .popup--source {
-    display: none; }
   .popup-content {
     position: absolute;
     top: 50%;
@@ -246,7 +250,7 @@ body {
       grid-column: 1 / span 1; }
   .popup-paragraph {
     font-size: 1.5rem;
-    line-height: 1.3; }
+    line-height: 1.5; }
     .popup-paragraph--about {
       grid-column: 1 / span 2; }
     .popup-paragraph--me {
@@ -263,3 +267,8 @@ body {
     transform-origin: 50% 50%; }
     .popup__btn-close:hover, .popup__btn-close:focus {
       color: orangered; }
+    .popup__btn-close:active {
+      transform: scale(0.4); }
+  .popup:target {
+    opacity: 1;
+    visibility: visible; }
diff --git a/index.html b/index.html
@@ -27,13 +27,13 @@
                 <div class="footer__line"></div>
                 <ul class="footer__list">
                     <li class="footer__list-item--1">
-                        <a href="#popup--about" class="footer__btn">about</a>
+                        <a href="#about" class="footer__btn">about</a>
                     </li>
                     <!-- <li class="footer__list-item--2">
                         <a href="#" class="footer__btn">@staxx6</a>
                     </li> -->
                     <li class="footer__list-item--2">
-                        <a href="#popup--source" class="footer__btn">source</a>
+                        <a href="#source" class="footer__btn">source</a>
                     </li>
                     <li class="footer__list-item--3">
                         <a href="#" class="footer__btn">© 2018</a>
@@ -45,7 +45,7 @@
         </footer>
     </div>
 
-    <div class="popup popup--about" id="popup--about">
+    <div class="popup popup--about" id="about">
         <div class="popup-content">
             <a href="#" class="popup__btn-close">&times;</a>
             <p class="popup-paragraph popup-paragraph--about">
@@ -62,8 +62,9 @@
         </div>
     </div>
 
-    <div class="popup popup--source" id="popup--source">
+    <div class="popup popup--source" id="source">
         <div class="popup-content">
+            <a href="#" class="popup__btn-close">&times;</a>
             <img src="../img/git-logo.svg" alt="Github logo" class="popup-img">
             <p class="popup-paragraph">
                 You can find the source of this site on Github

diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
@@ -15,7 +15,7 @@
         @media only screen and (max-width: 56.25em) { @content }; // 900px
     }
     @if $breakpoint == medium {
-        @media only screen and (max-width: 75em) { @content }; // 1200px
+        @media only screen and (max-width: 93em) { @content }; // 1200px
     }
     @if $breakpoint == large {
         @media only screen and (min-width: 112.5em) { @content }; // 1800px

diff --git a/sass/base/_base.scss b/sass/base/_base.scss
@@ -31,9 +31,9 @@ html {
     // This defines what 1rem is
     font-size: 62.5%; /* default 16px -> now 10px; better for user changes */
 
-    // @include respond(small) {
-    //     font-size: 56.25%; 
-    // }
+    @include respond(medium) {
+        font-size: 50%; 
+    }
 }
 
 body {

diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
@@ -53,8 +53,11 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: rgba(var(--color-black-hex), .8);
+    background-color: rgba(var(--color-black-hex), 0.95);
     z-index: 100;
+    visibility: hidden; 
+    opacity: 0;
+    transition: all .3s;
 
     // TODO: Not working
     @supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
@@ -63,10 +66,9 @@
         backdrop-filter: blur(10px);
     }
 
-
-    &--source {
-        display: none;
-    }
+    // &--source {
+    //     display: none;
+    // }
 
     &-content {
         @include absCenter;
@@ -75,6 +77,7 @@
         box-shadow: 0 2rem 3rem rgba(var(--color-black-hex), .2);
         border-radius: 3px;
         padding: 4rem;
+
         display: grid;
         grid-template-columns: 10rem 1fr;
         grid-gap: 3rem;
@@ -88,7 +91,7 @@
 
     &-paragraph {
         font-size: 1.5rem;
-        line-height: 1.3;
+        line-height: 1.5;
 
         &--about {
             grid-column: 1 / span 2;
@@ -116,5 +119,15 @@
             // text-shadow: 
             color: orangered;
         }
+
+        &:active {
+            transform: scale(0.4);
+        }
+    }
+
+    // Open states
+    &:target {
+        opacity: 1;
+        visibility: visible;
     }
 }