update

jevelopment · May 28, 2020 · cbaab5b · cbaab5b
1 parent 0b1bbaf
commit cbaab5b
Show file tree

Hide file tree

Showing 34 changed files with 231 additions and 16 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -2,4 +2,23 @@
     <h1>Arte della Lettura <span>Podcast</span></h1>
     <div class = "wave">
     </div>
+
+    <nav role="navigation">
+        <div id="hammenuToggle">
+          <input type="checkbox" />
+
+          <span></span>
+          <span></span>
+          <span></span>
+
+
+          <ul id="menu">
+            <a href="#"><li>Home</li></a>
+            <a href="#"><li>About</li></a>
+            <a href="#"><li>Info</li></a>
+            <a href="#"><li>Contact</li></a>
+            <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
+          </ul>
+        </div>
+      </nav>
 </div>
diff --git a/_includes/player.html b/_includes/player.html
@@ -1,5 +1,5 @@
 <div class = "player-container">
-    <audio id="player" crossorigin playsinline data-plyr-config='{ "title": "{{include.title}}" }'>
+    <audio id="player" disableContextMenu data-plyr-config='{ "title": "{{page.title}}"}'>
         <source src="/assets/audio/{{page.filename}}.mp3" type="audio/mp3" />
     </audio>
 </div>
diff --git a/_includes/playerjs.html b/_includes/playerjs.html
@@ -10,7 +10,7 @@
      'progress',
      "fast-forward",
      'current-time',
-     'duration', 
+    // 'duration', 
      'mute',
      'volume',
      'settings',
@@ -19,6 +19,8 @@
 
     const player = new Plyr('#player', {
         controls,
+        invertTime: true,
+        toggleInvert: true,
         settings: ['quality', 'speed'],
         //Italian translation, used in my website. Delete this to use English or translate the player to your language.
         i18n: {

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,7 +5,6 @@
 </head>
 <body>
   {%- include header.html -%}
-
   <div class="container">
       <div class="content ">
         {{ content }}
@@ -15,21 +14,22 @@
         {%- include sidebar.html -%}
       </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>
 
-    <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
@@ -5,7 +5,7 @@ body{
     background-repeat: repeat-x;
 }
     .circles{
-        position: absolute;
+        position: fixed;
         z-index: -5;
         top: 0;
         left: 0;

diff --git a/_sass/header.scss b/_sass/header.scss
@@ -6,4 +6,147 @@
         padding: 20px;
         color: white;
     }
+
+    //start menu
+    #hammenuToggle
+{
+  display: block;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+
+  z-index: 1;
+
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#hammenuToggle a
+{
+  text-decoration: none;
+  color: #232323;
+
+  transition: color 0.3s ease;
+}
+
+#hammenuToggle a:hover
+{
+  color: tomato;
+}
+
+
+#hammenuToggle input
+{
+  display: block;
+  width: 40px;
+  height: 32px;
+  position: absolute;
+  top: -7px;
+  left: -5px;
+
+  cursor: pointer;
+
+  opacity: 0; /* hide this */
+  z-index: 2; /* and place it over the hamburger */
+
+  -webkit-touch-callout: none;
+}
+
+/*
+ * Just a quick hamburger
+ */
+#hammenuToggle span
+{
+  display: block;
+  width: 33px;
+  height: 4px;
+  margin-bottom: 5px;
+  position: relative;
+
+  background: #cdcdcd;
+  border-radius: 3px;
+
+  z-index: 1;
+
+  transform-origin: 4px 0px;
+
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              opacity 0.55s ease;
+}
+
+#hammenuToggle span:first-child
+{
+  transform-origin: 0% 0%;
+}
+
+#hammenuToggle span:nth-last-child(2)
+{
+  transform-origin: 0% 100%;
+}
+
+/* 
+ * Transform all the slices of hamburger
+ * into a crossmark.
+ */
+#hammenuToggle input:checked ~ span
+{
+  opacity: 1;
+  transform: rotate(45deg) translate(-2px, -1px);
+  background: #232323;
+}
+
+/*
+ * But let's hide the middle one.
+ */
+#hammenuToggle input:checked ~ span:nth-last-child(3)
+{
+  opacity: 0;
+  transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+/*
+ * Ohyeah and the last one should go the other direction
+ */
+#hammenuToggle input:checked ~ span:nth-last-child(2)
+{
+  transform: rotate(-45deg) translate(0, -1px);
+}
+
+/*
+ * Make this absolute positioned
+ * at the top left of the screen
+ */
+#menu
+{
+  position: absolute;
+  width: 300px;
+  margin: -100px 0 0 -50px;
+  padding: 50px;
+  padding-top: 125px;
+
+  background: #ededed;
+  list-style-type: none;
+  -webkit-font-smoothing: antialiased;
+  /* to stop flickering of text in safari */
+
+  transform-origin: 0% 0%;
+  transform: translate(-100%, 0);
+
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+}
+
+#menu li
+{
+  padding: 10px 0;
+  font-size: 22px;
+}
+
+/*
+ * And let's slide it in from the left
+ */
+#hammenuToggle input:checked ~ ul
+{
+  transform: none;
+}
 }
diff --git a/android-icon-144x144.png b/android-icon-144x144.png
diff --git a/android-icon-192x192.png b/android-icon-192x192.png
diff --git a/android-icon-36x36.png b/android-icon-36x36.png
diff --git a/android-icon-48x48.png b/android-icon-48x48.png
diff --git a/android-icon-72x72.png b/android-icon-72x72.png
diff --git a/android-icon-96x96.png b/android-icon-96x96.png
diff --git a/apple-icon-114x114.png b/apple-icon-114x114.png
diff --git a/apple-icon-120x120.png b/apple-icon-120x120.png
diff --git a/apple-icon-144x144.png b/apple-icon-144x144.png
diff --git a/apple-icon-152x152.png b/apple-icon-152x152.png
diff --git a/apple-icon-180x180.png b/apple-icon-180x180.png
diff --git a/apple-icon-57x57.png b/apple-icon-57x57.png
diff --git a/apple-icon-60x60.png b/apple-icon-60x60.png
diff --git a/apple-icon-72x72.png b/apple-icon-72x72.png
diff --git a/apple-icon-76x76.png b/apple-icon-76x76.png
diff --git a/apple-icon-precomposed.png b/apple-icon-precomposed.png
diff --git a/apple-icon.png b/apple-icon.png
diff --git a/assets/css/mobile.scss b/assets/css/mobile.scss
@@ -18,4 +18,12 @@
         background-size: 286%;
         background-position-x: 31%;
     }
+}
+
+@media (min-width: 768px){
+    #hammenuToggle{
+        display: none !important;
+        visibility: hidden !important;
+        position: absolute !important;
+    }
 }
diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon-96x96.png b/favicon-96x96.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
diff --git a/ms-icon-144x144.png b/ms-icon-144x144.png
diff --git a/ms-icon-150x150.png b/ms-icon-150x150.png
diff --git a/ms-icon-310x310.png b/ms-icon-310x310.png
diff --git a/ms-icon-70x70.png b/ms-icon-70x70.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>