update

jevelopment · May 27, 2020 · 0b1bbaf · 0b1bbaf
1 parent 403456e
commit 0b1bbaf
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 21 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -4,7 +4,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">
+
 
     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/css/mobile.css">

diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,5 @@
+<div id = "header">
+    <h1>Arte della Lettura <span>Podcast</span></h1>
+    <div class = "wave">
+    </div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,7 +4,7 @@
   {% include head.html %}
 </head>
 <body>
-
+  {%- include header.html -%}
 
   <div class="container">
       <div class="content ">
@@ -16,6 +16,20 @@
       </div>
 
   </div>
+
+
+    <ul class="circles">
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+    </ul>
 {%- include playerjs.html -%}
 </body>
 </html>
diff --git a/_sass/background.scss b/_sass/background.scss
@@ -0,0 +1,119 @@
+body{
+    background-color:#fff;
+    background-image: 
+    url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%2040%201440%20320%22%3E%0A%20%20%3Cpath%20fill%3D%22%2301a0e4%22%20fill-opacity%3D%221%22%20d%3D%22M0%2C160L48%2C176C96%2C192%2C192%2C224%2C288%2C229.3C384%2C235%2C480%2C213%2C576%2C176C672%2C139%2C768%2C85%2C864%2C90.7C960%2C96%2C1056%2C160%2C1152%2C165.3C1248%2C171%2C1344%2C117%2C1392%2C90.7L1440%2C64L1440%2C0L1392%2C0C1344%2C0%2C1248%2C0%2C1152%2C0C1056%2C0%2C960%2C0%2C864%2C0C768%2C0%2C672%2C0%2C576%2C0C480%2C0%2C384%2C0%2C288%2C0C192%2C0%2C96%2C0%2C48%2C0L0%2C0Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E');
+    background-repeat: repeat-x;
+}
+    .circles{
+        position: absolute;
+        z-index: -5;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .circles li{
+        position: absolute;
+        display: block;
+        list-style: none;
+        width: 20px;
+        height: 20px;
+        background: rgba(0, 160, 227, 0.2);
+        animation: animate 25s linear infinite;
+        bottom: -150px;
+
+    }
+
+    .circles li:nth-child(1){
+        left: 25%;
+        width: 80px;
+        height: 80px;
+        animation-delay: 0s;
+    }
+
+
+    .circles li:nth-child(2){
+        left: 10%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 2s;
+        animation-duration: 12s;
+    }
+
+    .circles li:nth-child(3){
+        left: 70%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 4s;
+    }
+
+    .circles li:nth-child(4){
+        left: 40%;
+        width: 60px;
+        height: 60px;
+        animation-delay: 0s;
+        animation-duration: 18s;
+    }
+
+    .circles li:nth-child(5){
+        left: 65%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 0s;
+    }
+
+    .circles li:nth-child(6){
+        left: 75%;
+        width: 110px;
+        height: 110px;
+        animation-delay: 3s;
+    }
+
+    .circles li:nth-child(7){
+        left: 35%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 7s;
+    }
+
+    .circles li:nth-child(8){
+        left: 50%;
+        width: 25px;
+        height: 25px;
+        animation-delay: 15s;
+        animation-duration: 45s;
+    }
+
+    .circles li:nth-child(9){
+        left: 20%;
+        width: 15px;
+        height: 15px;
+        animation-delay: 2s;
+        animation-duration: 35s;
+    }
+
+    .circles li:nth-child(10){
+        left: 85%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 0s;
+        animation-duration: 11s;
+    }
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 50%;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -1,35 +1,24 @@
+$base-color: #01a0e4;
+
 * {
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
+            margin: 0px;
+            padding: 0px;
+            font-family: 'Karla', sans-serif;
 }
 html{
     scroll-behavior: smooth;
 }
-body{
-    background-color:#fff;
-}
+
 .container{
-    margin-top: 80px;
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: flex-start;
     .content{
         order: 1;
-        border: 1px solid black;
         width: 55%;
     }
-    .sidebar{
-        width: 15%;
-        order: 5;
-        background-color: white;
-        border: 1px solid;
-        padding-bottom: 30px;
-        img{
-            max-width: 100%;
-            height: auto;
-        }
-    }
-
 }
diff --git a/_sass/header.scss b/_sass/header.scss
@@ -0,0 +1,9 @@
+#header{
+   // background-color: $base-color;
+    min-height: 50px;
+    h1{
+        margin: auto;
+        padding: 20px;
+        color: white;
+    }
+}
diff --git a/_sass/sidebar.scss b/_sass/sidebar.scss
@@ -0,0 +1,13 @@
+.container{
+    .sidebar{
+        width: 15%;
+        order: 5;
+        background-color: white;
+        padding-bottom: 30px;
+        img{
+            max-width: 100%;
+            height: auto;
+            //border: 1px solid white;
+        }
+    }
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -1,4 +1,4 @@
 ---
 ---
 
-@import "base", "sidebar", "player";
+@import "base", "background", "header", "sidebar", "player";
diff --git a/assets/css/mobile.scss b/assets/css/mobile.scss
@@ -11,7 +11,11 @@
         }
         .sidebar{
             margin-top: 30px;
-            width: 30% !important;
+            width: 50% !important;
         }
     }
+    body{
+        background-size: 286%;
+        background-position-x: 31%;
+    }
 }