fixed pictures and started with hex copy to clipboard

staxx6 · Jul 3, 2018 · 3d34d05 · 3d34d05
1 parent b9ab9a1
commit 3d34d05
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 22 deletions.
diff --git a/css/style.css b/css/style.css
@@ -38,6 +38,9 @@
   --color-black: #2C2C2D;
   --color-black-hex: 44, 44, 45;
   --color-white:#F9F9F9;
+  --color-white-rgb: 249, 249, 249;
+  --color-magenta: #F50D5F;
+  --color-magenta-rgb: 245, 13, 95;
   --anim-shake: 1.4s;
   --anim-shake-delay: 0.4s 1s; }
 
@@ -172,6 +175,25 @@ body {
     transform: translate(-23rem, 3rem); }
   .main-text__color::after {
     transform: rotate(180deg) translate(-1.2rem, -3rem); }
+  .main-text__color-btn, .main-text__color-btn-txt {
+    background: none;
+    border: none;
+    outline: none; }
+
+.link--outside {
+  display: inline-block; }
+  .link--outside, .link--outside:link, .link--outside:visited {
+    text-decoration: none;
+    color: var(--color-magenta);
+    padding: 1px 3px;
+    margin: -1px -3px;
+    transition: all .2s; }
+  .link--outside:active, .link--outside:focus, .link--outside:hover {
+    color: var(--color-white);
+    background: var(--color-magenta); }
+  .link--outside:active, .link--outside:focus {
+    outline: none;
+    transform: translateY(1px); }
 
 .main {
   display: grid;
@@ -210,10 +232,15 @@ body {
       grid-column: 4 / span 1; }
     .footer__list-item--3 {
       grid-column: 6 / span 1; }
-  .footer__btn {
+  .footer__btn, .footer__btn:link, .footer__btn:visited {
     text-decoration: none;
     color: var(--color-footer);
-    transition: color var(--anim-shake-delay); }
+    padding: 1px 3px;
+    margin: -1px -3px;
+    transition: color var(--anim-shake-delay), background 0.2s; }
+  .footer__btn:active, .footer__btn:focus, .footer__btn:hover {
+    background: rgba(var(--color-black-hex), 0.7);
+    outline: none; }
 
 .popup {
   height: 100vh;
@@ -236,7 +263,7 @@ body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 48%;
+    width: 38%;
     background-color: var(--color-white);
     box-shadow: 0 2rem 3rem rgba(var(--color-black-hex), 0.2);
     border-radius: 3px;
@@ -266,9 +293,11 @@ body {
     transition: all .2s;
     transform-origin: 50% 50%; }
     .popup__btn-close:hover, .popup__btn-close:focus {
-      color: orangered; }
+      color: var(--color-magenta); }
     .popup__btn-close:active {
       transform: scale(0.4); }
+  .popup__header {
+    margin-bottom: -2rem; }
   .popup:target {
     opacity: 1;
     visibility: visible; }
diff --git a/img/github-logo.png b/img/github-logo.png
diff --git a/img/me.png b/img/me.png
diff --git a/index.html b/index.html
@@ -19,7 +19,6 @@
             <button class="main-text__btn-shake" onclick="shake()">Shake</button>
             <div class="main-text__for">for</div>
             <div class="main-text__color">color</div>
-            <!-- --anim to start anim-->
         </main>
 
         <footer class="footer">
@@ -29,9 +28,6 @@
                     <li class="footer__list-item--1">
                         <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="#source" class="footer__btn">source</a>
                     </li>
@@ -48,6 +44,9 @@
     <div class="popup popup--about" id="about">
         <div class="popup-content">
             <a href="#" class="popup__btn-close">&times;</a>
+            <h2 class="popup__header">
+                About me
+            </h2>
             <p class="popup-paragraph popup-paragraph--about">
                 This page was created for my personal challange to create one mockup a day. Maybe I get some inspiration from this random
                 colors to use in my daily mockups.
@@ -57,18 +56,18 @@
             <p class="popup-paragraph popup-paragraph--me">
                 My name is
                 <em>Simon Oczadly</em> (@staxx6) and you can find my website here:
-                <a href="https://staxx6.github.io/" class="link link-outsite">staxx6.github.io</a>
+                <a href="https://staxx6.github.io/" class="link link--outside">staxx6.github.io</a>
             </p>
         </div>
     </div>
 
     <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">
+            <img src="../img/github-logo.png" alt="Github logo" class="popup-img">
             <p class="popup-paragraph">
-                You can find the source of this site on Github
-                <a href="https://github.com/staxx6/shake" class="link link-outsite">github.com/staxx6/shake</a>
+                You can find the source of this site on GitHub:
+                <a href="https://github.com/staxx6/shake" class="link link--outside">github.com/staxx6/shake</a>
             </p>
         </div>
     </div>

diff --git a/js/color.js b/js/color.js
@@ -23,8 +23,17 @@ let brightness = (colorHex) => {
     );
 }
 
+// Creates a textinput field inside a button
+let colorBtn = (newColor) => `<button id=\"btn-color\" class=\"main-text__color-btn\" onclick=\"copyHex()\"><input type=\"text\" value=\"${newColor}\" id=\"btn-txt-color\" class=\"main-text__color-btn-txt\" readOnly=\"readOnly\"></button>`;
+
+let copyHex = () => {
+    let btn = document.getElementById('btn-txt-color');
+    btn.select();
+    document.execCommand("copy");
+}
+
 let shake = () => {
-    let newColor = getNewColor(); // TODO here new color func //demo color: #F5309C
+    let newColor = getNewColor();
     setDocStyleProperty('--color-main', newColor);
 
     let varColorText = brightness(newColor) < 130 ? '--color-white' : '--color-black';
@@ -40,7 +49,8 @@ let shake = () => {
     getFirstClass('main-text__color').style.animation = `shake-color ${animationTime}s ease-in-out`;
 
     setTimeout(() => {
-        getFirstClass('main-text__color').innerHTML = newColor;
+        //getFirstClass('main-text__color').innerHTML = newColor; // without text copy
+        getFirstClass('main-text__color').innerHTML = colorBtn(newColor);
         setDocStyleProperty('--color-color', newColor);
     }, animationTime / 2 * 1000 + 50);
 

diff --git a/sass/base/_base.scss b/sass/base/_base.scss
@@ -10,7 +10,7 @@
 
     // COLORS
     --color-main: #F9F9F9; //TODO: name it white
-    --color-main-hex: 249, 249, 249;
+    --color-main-hex: 249, 249, 249; //rgb not hex
     --color-shake: #2574BB;
     --color-for: #31C432;
     --color-color: #F9F9F9;
@@ -19,8 +19,11 @@
     --color-footer: #2C2C2D;
 
     --color-black: #2C2C2D;
-    --color-black-hex: 44, 44, 45;
+    --color-black-hex: 44, 44, 45; // rgb not hex
     --color-white:#F9F9F9;
+    --color-white-rgb: 249, 249, 249;
+    --color-magenta: #F50D5F;
+    --color-magenta-rgb: 245, 13, 95;
 
     // ANIMATIONS TIME
     --anim-shake: 1.4s;

diff --git a/sass/components/_link.scss b/sass/components/_link.scss
@@ -0,0 +1,28 @@
+.link {
+    &--outside {
+        display: inline-block;
+
+        &,
+        &:link,
+        &:visited {
+            text-decoration: none;
+            color: var(--color-magenta);
+            padding: 1px 3px;
+            margin: -1px -3px;
+            transition: all .2s;
+        }
+
+        &:active,
+        &:focus,
+        &:hover {
+            color: var(--color-white);
+            background: var(--color-magenta);
+        }
+
+        &:active,
+        &:focus {
+            outline: none;
+            transform: translateY(1px);
+        }
+    }
+}
diff --git a/sass/components/_main-text.scss b/sass/components/_main-text.scss
@@ -47,7 +47,7 @@
 
         &:active,
         &:focus {
-            outline:0;
+            outline:    0;
         }
     }
 
@@ -101,5 +101,12 @@
         &::after {
             transform: rotate(180deg) translate(-1.2rem, -3rem);
         }
+
+        &-btn,
+        &-btn-txt {
+            background: none;
+            border: none;
+            outline: none;
+        }
     }
 }
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
@@ -41,9 +41,22 @@
     }
 
     &__btn {
-        text-decoration: none;
-        color: var(--color-footer);
-        transition: color var(--anim-shake-delay);
+        &,
+        &:link,
+        &:visited {
+            text-decoration: none;
+            color: var(--color-footer);
+            padding: 1px 3px;
+            margin: -1px -3px;
+            transition: color var(--anim-shake-delay), background .2s;
+        }
+
+        &:active,
+        &:focus,
+        &:hover {
+            background: rgba(var(--color-black-hex), .7);
+            outline: none;
+        }
     }
 }
 
@@ -72,7 +85,7 @@
 
     &-content {
         @include absCenter;
-        width: 48%;
+        width: 38%;
         background-color: var(--color-white);
         box-shadow: 0 2rem 3rem rgba(var(--color-black-hex), .2);
         border-radius: 3px;
@@ -117,14 +130,18 @@
         &:focus {
             // transform: scale(1.4);
             // text-shadow: 
-            color: orangered;
+            color: var(--color-magenta);
         }
 
         &:active {
             transform: scale(0.4);
         }
     }
 
+    &__header {
+        margin-bottom: -2rem;
+    }
+
     // Open states
     &:target {
         opacity: 1;

diff --git a/sass/main.scss b/sass/main.scss
@@ -10,6 +10,7 @@
 @import "components/button";
 @import "components/form";
 @import "components/main-text";
+@import "components/link";
 
 @import "layout/main";
 @import "layout/header";