touched... (C) whatthecommit.com

daggerok · daggerok · commit 9f0c593c2879 · 2019-12-25T20:12:46.000+02:00
diff --git a/frontender/README.md b/frontender/README.md
@@ -42,6 +42,7 @@ open http://127.0.0.1:1234/
 
 ## resources
 
+* [css clippy](https://bennettfeely.com/clippy/)
 * [Material icons guide](http://google.github.io/material-design-icons/)
 * [Material icons](https://material.io/resources/icons/)
 * [Origami studio](https://origami.design/)
diff --git a/frontender/package.json b/frontender/package.json
@@ -29,6 +29,7 @@
     "npm-run-all": "4.1.5",
     "parcel-bundler": "1.12.4",
     "rimraf": "3.0.0",
+    "sass": "^1.24.0",
     "webfontloader": "1.6.28"
   }
 }
diff --git a/frontender/src/index.html b/frontender/src/index.html
@@ -15,6 +15,7 @@
     <li><a href="./site/index.html">site</a></li>
     <li><a href="./box-shadow-neumorphism/index.html">box-shadow-neumorphism</a></li>
     <li><a href="./nav/index.html">nav</a></li>
+    <li><a href="./sassy/index.html">sassy</a></li>
   </ul>
 </body>
 </html>
diff --git a/frontender/src/sassy/index.html b/frontender/src/sassy/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>SASS</title>
+  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="style.scss">
+</head>
+<body>
+<div id="bg"></div>
+<script src="./main.js"></script>
+</body>
+</html>
diff --git a/frontender/src/sassy/main.js b/frontender/src/sassy/main.js
@@ -0,0 +1,9 @@
+import WebFont from 'webfontloader';
+
+WebFont.load({
+  google: {
+    families: [
+      'Roboto:300,400,500,600,700',
+    ],
+  },
+});
diff --git a/frontender/src/sassy/style.scss b/frontender/src/sassy/style.scss
@@ -0,0 +1,26 @@
+$fonts: (
+    primary: Roboto sans-serif
+);
+
+$colors: (
+    primary: #3338ff
+);
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: map-get($fonts, primary);
+
+    #bg {
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        background-color: map-get($colors, primary);
+        width: 50%;
+        height: 50%;
+        margin: 20% auto;
+        //position: absolute;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`	`"npm-run-all": "4.1.5",`
`30`	`30`	`"parcel-bundler": "1.12.4",`
`31`	`31`	`"rimraf": "3.0.0",`
	`32`	`+ "sass": "^1.24.0",`
`32`	`33`	`"webfontloader": "1.6.28"`
`33`	`34`	`}`
`34`	`35`	`}`