make mobile compatible

5 months ago · 5a686ec6b6
parent 060cd6057f
commit 5a686ec6b6
3 changed files with 80 additions and 27 deletions
--- a/web/index.html
+++ b/web/index.html
@ -5,15 +5,20 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Counter Tourist Tnformation</title>
    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
 </head>
 <body>
 <div class="nav">
-    <h3>Counter <br> Tourist <br> Information</h3>
+        
+    <h3 onclick="togglemenu()">Counter <br> Tourist <br> Information</h3>
+        
+    <div class="menu" id="menu">    
        <h4>The surroundings</h4>
        <h4>Events</h4>
        <h4>Visitors disinfo</h4>
        <h4>Sutainability</h4>
    </div>
+</div>
 <div class="landingimage">
    <div class="imagedescription">Beautiful Breda | photo Person With a Smartphone</div>
 </div>
--- a/web/script.js
+++ b/web/script.js
@ -0,0 +1,9 @@
+
+function togglemenu(){
+    let menu = document.getElementById("menu");
+    if(menu.style.display !== "none"){
+        menu.style.display = "none";
+    } else {
+        menu.style.display = "block";
+    }
+}
--- a/web/style.css
+++ b/web/style.css
@ -14,34 +14,43 @@
    src: url(fonts/VG5000-Regular.otf);
 }

+*{
+    overflow-x: hidden;
+}

 body{
    font-family: Montserrat;
    
+
 }

 .nav{
    
-    width: 80vw;
+    width: 100%;
    z-index: 9001;
-    display: flex;
    background-color: #212529;
-    justify-content: space-around;
-    align-items: center;
    position: fixed;
-    left: 10vw;
-   
+    top: -2%;
+    left: 0;  
 }

+
+
 .nav>h3{
+    font-size: 2em;
    color: #81d742;
-    padding: .5em;
    font-family: VG5000;
+    padding-left: 10vw;
 }

-.nav>h4{
+.menu{
+    display: none;
+    width: fit-content;
+    margin: auto;
    color: white;
    font-weight: lighter;
+    padding-bottom: 2vh;
+
 }

 .landingimage{
@ -55,15 +64,16 @@ body{
 .imagedescription{
    background: rgba(5, 5, 5, 0.3);
    position: relative;
-    top: 93%;
+    top: 92%;
    left: 2%;
    padding: 4px;
    width: fit-content;
-    color: white;
+    color: rgba(255,255,255,0.7);
+    pointer-events: none;
 }
 h1{
    font-family: VG5000;
-    font-size: 4em;
+    font-size: clamp(1.5rem, 1rem + 9vw, 6rem);
 }

 p{
@ -72,11 +82,12 @@ p{

 .index{
    background: #81d742;
+    width: 100%;
 }

 .index>*{
-    padding: 10px;
-    max-width: 50ch;
+    padding: 2%;
+    max-width: 70ch;
    text-align: center;
    margin: auto;
    
@ -88,28 +99,56 @@ p{
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 50px;
+    max-width: 2000px;
 }

 .tourcard{
    position: relative;
-    width: 33%;
-    min-width: 350px;
    max-width: 500px;
-    margin-bottom: 50px;
+    margin: 2%;
+    flex-grow: 1;
 }

 .tourcard >img{
-    width: 90%;
+    width: 100%;
 }

 .tour-text{
    position: absolute;
-    bottom:5%;
-    left: 5%;
-    padding: 5%;
+    width: 80%;
+    bottom:8%;
+    left: 8%;
+    padding: 2%;
    font-family:Montserrat;
    font-size: .7em;
    background: white;
-    width: 70%;
+    
+}
+
+@media only screen and (min-width: 801px) {
+    .nav{
+        width: 80vw;
+        z-index: 9001;
+        display: flex;
+        background-color: #212529;
+        justify-content: space-around;
+        align-items: center;
+        position: fixed;
+        left: 10vw;
+    }
+
+    .nav>h3{
+        color: #81d742;
+        padding: .5em;
+        font-family: VG5000;
    }
    
+    .menu{
+        width: 100%;
+        display: flex;
+        color: white;
+        font-weight: lighter;
+        justify-content: space-around;
+        
+    }
+}