Updated page to be mobile-friendly

alnopa9 · Feb 18, 2019 · 6e82dd4 · 6e82dd4
1 parent 2e1c9ed
commit 6e82dd4
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 44 deletions.
diff --git a/banksy.css b/banksy.css
@@ -1,6 +1,7 @@
 html {
-    background: url(pages/img/background/SSI/background.png);
+    background-image: url(pages/img/background/SSI/background.png);
     background-attachment: fixed;
+    background-repeat: no-repeat;
     background-size: cover;
 }
 body{
@@ -14,10 +15,10 @@ svg #timeline text:hover{fill: red}
 svg text{fill: black}
 .body-container{
     position: fixed;
-    top: 10vH;
+    top: 10%;
     left: 10%;
     width: 80%;
-    height: 85vH;
+    height: 85%;
     margin: auto;
     text-align: center;
     background-color: #ffffff;
@@ -33,56 +34,76 @@ svg text{fill: black}
 }
 .menu-container{
     position: fixed;
-    top: 0vH;
+    top: 0%;
     width: 80%;
     font-size: 1.25em;
     left: 10%;
+    height: 10%;
 }
 .menu{
     display: flex;
     justify-content: space-around;
     flex-direction: row;
     align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
 }
+@media screen and (max-width: 1000px) {
+    html{background-size: 100vH 100vH;}
+    body{font-size: 26px}
+    .menu{flex-direction:column; font-size: 30px}
+    .logo-container{width:100%; justify-content:center}
+    .menu-buttons{width:100%}
+    .content-container-a{flex-direction: column}
+    .gallery-b{overflow: scroll}
+    }
 .logo-container{
     display: flex;
-    justify-content: flex-end;
-    width: 35%;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }
 .menu-buttons{
     display: flex;
     justify-content: space-around;
-    width: 65%;
+    align-items: center;
+    width: 100%;
+    height: 100%;
 }
 .left-side, .right-side{ position: fixed; height: 100%;}
-.side-bars{
+.left-side, .right-side{
     position: fixed;
-    top: 0vH;
-    width: 100%;
-}
-.left-side{
-    top: 10vH;
-    left: 1%;
-    width: 9%;
-}
-.right-side{
-    top: 60vH;
-    right: 0px;
+    top: 10%;
     width: 10%;
+    height: 90%;
 }
+.left-side{left: 0%}
+.right-side{right: 0%}
+.left-side-flex, .right-side-flex{
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+}
+.left-side-flex{align-items: flex-start;}
+.right-side-flex{align-items: flex-end;}
+.left-side img, .right-side img{width: 100%;}
 .license-container{
     position: fixed;
-    top: 90vh;
-    height: 9.5vH;
+    top: 95%;
+    left: 0%;
+    height: 5%;
     width: 100%;
 }
 .license{
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     justify-content: center;
     height: 100%;
-    top: 0%;
-    font-size: 15px;
+    width: 100%;
+    font-size: 75%;
 }
 .content-container-a, .content-container-b{
     display: flex;
@@ -95,15 +116,12 @@ svg text{fill: black}
 .left-content, .right-content{
     display: flex;
     height: 100%;
+    width: 100%;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
-.left-content{width: 45%}
-.right-content{
-    width: 55%;
-    flex-wrap: wrap;
-}
+.left-content img{width: 100%; height: 100%;}
 .front-container, .middle-container, .last-container{
     position: absolute;
     left: 0%;

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
         <div class="body-container">
             <div class="content-container-a">
                 <div class="left-content">
-                    <img src="pages/img/background/slideshow/panda.png" id="rotator" alt="Array of Banksy's works in black and white" class="main" height="400"/>
+                    <img src="pages/img/background/slideshow/panda.png" id="rotator" alt="Array of Banksy's works in black and white" class="main"/>
                 </div>
                 <div class="right-content">
                     <h1>Welcome to the Banksy Project!</h1>

diff --git a/index.js b/index.js
@@ -5,7 +5,7 @@ function init() {
 
 
             function rotate() {
-          var images = new Array ('pages/img/background/slideshow/panda.png', 'pages/img/background/slideshow/balloons.png', 'pages/img/background/slideshow/bomb_hugger.png', 'pages/img/background/slideshow/flower_thrower.png', 'pages/img/background/slideshow/rat_camera.png', 'pages/img/background/slideshow/rat_paint.png', 'pages/img/background/slideshow/rat_parachute.png', 'pages/img/background/slideshow/anarchy_rat.png', 'pages/img/background/slideshow/angel.png', 'pages/img/background/slideshow/elephant_bomb.png', 'pages/img/background/slideshow/lenin.png', 'pages/img/background/slideshow/monkey_bomb.png', 'pages/img/background/slideshow/monkey_sign.png', 'pages/img/background/slideshow/rat_jackhammer.png', 'pages/img/background/slideshow/zebra.png')
+          var images = new Array ('pages/img/background/slideshow/panda.png', 'pages/img/background/slideshow/bomb_hugger.png', 'pages/img/background/slideshow/flower_thrower.png', 'pages/img/background/slideshow/rat_camera.png', 'pages/img/background/slideshow/rat_paint.png', 'pages/img/background/slideshow/rat_parachute.png', 'pages/img/background/slideshow/anarchy_rat.png', 'pages/img/background/slideshow/angel.png', 'pages/img/background/slideshow/elephant_bomb.png', 'pages/img/background/slideshow/lenin.png', 'pages/img/background/slideshow/monkey_bomb.png', 'pages/img/background/slideshow/monkey_sign.png', 'pages/img/background/slideshow/rat_jackhammer.png', 'pages/img/background/slideshow/zebra.png')
                 var thisImage = 0;
       var thisImage = Math.floor(Math.random()*(images.length)) ;
 

diff --git a/pages/top.html b/pages/top.html
@@ -8,17 +8,19 @@
             <a href="works.html">WORKS</a>
             <a href="map.html">MAP</a>
             <a href="timeline.html">TIMELINE</a>
-            <a href="team.html">ABOUT TEAM</a>
+            <a href="team.html">TEAM</a>
             <a href="https://github.com/alnopa9/Banksy">GITHUB</a>
         </div>
     </div>
 </div>
-<div class="side-bars">
-    <div class="left-side">
-        <a href="http://www.banksy.co.uk/"><img src="img/background/SSI/heart.png" alt="Banksy's Girl with Balloon Red Balloon" height="200"/></a>
+<div class="left-side">
+    <div class="left-side-flex">
+        <a href="http://www.banksy.co.uk/"><img src="img/background/SSI/heart.png" alt="Banksy's Girl with Balloon Red Balloon"/></a>
     </div>
-    <div class="right-side">
-        <a href="https://www.instagram.com/banksy/?hl=en"><img src="img/background/SSI/girl.png" alt="Banksy's Girl with Balloon Girl" height="250"/></a>
+</div>
+<div class="right-side">
+    <div class="right-side-flex">
+        <a href="https://www.instagram.com/banksy/?hl=en"><img src="img/background/SSI/girl.png" alt="Banksy's Girl with Balloon Girl"/></a>
     </div>
 </div>
 <div class="license-container">
@@ -36,4 +38,4 @@
             <a href="http://newtfire.org/firebellies.html">Powered by firebellies</a>.
         </span>
     </div>
-</div>
+</div>
diff --git a/topIndex.html b/topIndex.html
@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="banksy.css" />
 <div class="menu-container">
     <div class="menu">
         <div class="logo-container">
@@ -8,17 +9,19 @@
             <a href="pages/works.html">WORKS</a>
             <a href="pages/map.html">MAP</a>
             <a href="pages/timeline.html">TIMELINE</a>
-            <a href="pages/team.html">ABOUT TEAM</a>
+            <a href="pages/team.html">TEAM</a>
             <a href="https://github.com/alnopa9/Banksy">GITHUB</a>
         </div>
     </div>
 </div>
-<div class="side-bars">
-    <div class="left-side">
-        <a href="http://www.banksy.co.uk/"><img src="pages/img/background/SSI/heart.png" alt="Banksy's Girl with Balloon Red Balloon" height="200"/></a>
+<div class="left-side">
+    <div class="left-side-flex">
+        <a href="http://www.banksy.co.uk/"><img src="pages/img/background/SSI/heart.png" alt="Banksy's Girl with Balloon Red Balloon"/></a>
     </div>
-    <div class="right-side">
-        <a href="https://www.instagram.com/banksy/?hl=en"><img src="pages/img/background/SSI/girl.png" alt="Banksy's Girl with Balloon Girl" height="250"/></a>
+</div>
+<div class="right-side">
+    <div class="right-side-flex">
+        <a href="https://www.instagram.com/banksy/?hl=en"><img src="pages/img/background/SSI/girl.png" alt="Banksy's Girl with Balloon Girl"/></a>
     </div>
 </div>
 <div class="license-container">