Built in functions

Pickra · Pickra · commit 49fb92e19937 · 2017-03-12T12:49:41.000-04:00
diff --git a/images/wolverine.gif b/images/wolverine.gif
diff --git a/index.html b/index.html
@@ -6,17 +6,9 @@
     <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
-    <div class="spiderman-container">
-        <div class="spiderman">
-            <img src="images/spiderman.jpg" height="350" />
-            <div class="description">
-                <div class="header">
-                    Spider-man
-                    <a class="description-link" href="https://en.wikipedia.org/wiki/Spider-Man">stuff </a>
-                    <div>MOOOOOOOOAAAR!!!</div>
-                </div>
-            </div>
-        </div>
+    <div class="wolverine">
+        <img src="images/wolverine.gif">
+        <p class="wolverine-text">Wolverine</p>
     </div>
 </body>
 </html>
diff --git a/scss/built-in-functions/_built-in-functions.scss b/scss/built-in-functions/_built-in-functions.scss
@@ -0,0 +1,37 @@
+$base-color: #a83b24;
+$light-color: lighten($base-color, 20%);
+$dark-color: darken($base-color, 35%);
+
+.old-light-dark {
+  background-image: linear-gradient($light-color, $base-color, $dark-color);
+}
+
+$light-color: scale_color($base-color, $alpha: -50%);
+$dark-color: scale_color($base-color, $saturation: -35%);
+
+$cbc: complement($base-color);
+$clc: complement($light-color);
+$cdc: complement($dark-color);
+
+.wolverine {
+  text-align: center;
+  background-image: linear-gradient($light-color, $base-color, $dark-color);
+
+  &:hover {
+    background-image: linear-gradient($clc, $cbc, $cdc);
+    .wolverine-text {
+      color: transparentize(mix($base-color, yellow, 25%), .2);
+    }
+  }
+
+  &-text {
+    font-size: 1.5rem;
+    padding-bottom: 1rem;
+    color: mix($base-color, yellow, 75%);
+  }
+
+  img {
+    margin-top: 3rem;
+    border-radius: 50%;
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
@@ -1,2 +1 @@
-@import "variables/variables";
-@import "variables/vary";
+@import "built-in-functions/built-in-functions";

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-@import "variables/variables";`
`2`		`-@import "variables/vary";`
	`1`	`+@import "built-in-functions/built-in-functions";`