From 1f8b15fce8bcdbd19c20af2f544cd60e3fd1d1a4 Mon Sep 17 00:00:00 2001
From: ohjian <ohjian@xpub.nl>
Date: Mon, 25 Apr 2022 20:27:35 +0200
Subject: [PATCH] mobile friendly

---
 css/main.css | 278 +++++++++++++++++++++++++++------------------------
 1 file changed, 146 insertions(+), 132 deletions(-)

diff --git a/css/main.css b/css/main.css
index 81be7f0..1b74bdb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,132 +1,146 @@
-
-body{
-  margin:0;
-  display: flex;
-
-
-}
-
-.content{
-    width: 25vw;
-}
-
-.title{
-    background-color: yellow;
-    padding-top: 20px;
-    padding-bottom: 35px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 4px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 65px;
-    color: #121212;
-
-
-}
-
-.subtitle{
-    background-color: 515059;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 0px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-    color: #121212;
-}
-
-.date{
-    background-color: white;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 4px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-    color: #121212;
-
-
-}
-
-.tracklist{
-    background-color: blue;
-    padding-top: 15px;
-    padding-bottom: 75px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 0px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-    color: #121212;
-}
-
-.caretakers{
-    background-color: 515059;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 4px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-    color: #121212;
-}
-
-.audio{
-    background-color: #121212;
-    padding-top: 30px;
-    padding-bottom: 30px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 4px;
-    outline-color: #121212;
-
-}
-
-.intro{
-    background-color: lightgray;
-    padding-top: 15px;
-    padding-bottom: 100px;
-    padding-left: 15px;
-    padding-right: 15px;
-    outline-style: solid;
-    outline-width: 0px;
-    outline-color: #121212;
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 24px;
-    color: #121212;
-
-}
-
-.notation{
-    width: 75vw;
-    outline-style: solid;
-    outline-width: 4px;
-    outline-color: #121212;
-
-
-}
-
-.notation img{
-    object-fit:cover;
-
-}
+
+body{
+  margin:0;
+  display: flex;
+
+
+}
+
+.content{
+    width: 25vw;
+}
+
+.title{
+    background-color: yellow;
+    padding-top: 20px;
+    padding-bottom: 35px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 4px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 65px;
+    color: #121212;
+
+
+}
+
+.subtitle{
+    background-color: 515059;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 0px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121212;
+}
+
+.date{
+    background-color: white;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 4px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121212;
+
+
+}
+
+.tracklist{
+    background-color: blue;
+    padding-top: 15px;
+    padding-bottom: 75px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 0px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121212;
+}
+
+.caretakers{
+    background-color: 515059;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 4px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121212;
+}
+
+.audio{
+    background-color: #121212;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 4px;
+    outline-color: #121212;
+
+}
+
+.intro{
+    background-color: lightgray;
+    padding-top: 15px;
+    padding-bottom: 100px;
+    padding-left: 15px;
+    padding-right: 15px;
+    outline-style: solid;
+    outline-width: 0px;
+    outline-color: #121212;
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 24px;
+    color: #121212;
+
+}
+
+.notation{
+    width: 75vw;
+    outline-style: solid;
+    outline-width: 4px;
+    outline-color: #121212;
+
+
+}
+
+.notation img{
+    object-fit:cover;
+    width: 100%;
+
+}
+
+
+@media  (max-width: 769px){
+
+body{
+    display: block;
+}
+
+.content, .notation {
+    width: 100%;
+}
+
+}