feat: ✨ Add implementation of simple slider using postcss with nesting

AbdallahHemdan · AbdallahHemdan · commit 77c2fe28ecec · 2021-06-18T08:38:49.000+02:00
diff --git a/index.html b/index.html
@@ -4,10 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <link rel="stylesheet" href="style.css" />
+    <title>CSS Nesting</title>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/main.js"></script>
+    <div class="slider">
+      <i class="slider__image fa fa-codepen"></i>
+      <div class="slider__content">
+        <h2 class="slider__caption">codepen</h2>
+        <p class="slider__txt">
+          CodePen is a social development environment for front-end designers and developers. Build
+          and deploy a website, show off your work, build test cases to
+        </p>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "serve": "vite preview"
   },
   "devDependencies": {
+    "postcss-nesting": "^8.0.1",
     "vite": "^2.3.7"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nesting').default],
+};
diff --git a/style.css b/style.css
@@ -1,8 +1,38 @@
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
+
+body {
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 100vh;
+  color: #444;
+  font-size: 1rem;
+  font-family: 'Roboto', sans-serif;
+}
+
+.slider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  
+  & .slider__image {
+    color: #2196F3;
+    font-size: 8rem;
+  }
+
+  & .slider__content {
+    padding: 2rem;
+  
+    & .slider__caption {
+      margin: 2rem 0 1rem;
+      text-transform: uppercase;
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+      font-weight: 500;
+    }
+  
+    & .slider__txt {
+      max-width: 400px;
+      color: #999;
+    }
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`"serve": "vite preview"`
`8`	`8`	`},`
`9`	`9`	`"devDependencies": {`
	`10`	`+ "postcss-nesting": "^8.0.1",`
`10`	`11`	`"vite": "^2.3.7"`
`11`	`12`	`}`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ plugins: [require('postcss-nesting').default],`
	`3`	`+};`