Greatly improved homepage and gallery mobile view

4 years ago · e20b2af921
parent 03cdc67e2c
commit e20b2af921
7 changed files with 60 additions and 25 deletions
--- a/css.css
+++ b/css.css
@ -13,12 +13,11 @@
  font-size: 4rem;
  white-space: nowrap;
  text-align: center;
-  height: 5rem;
 }
 .welcome {
  display: block;
-  margin: 2rem auto;
-  width: 50%;
+  margin: 2vh auto;
+  width: 80%;
  text-align: center;
 }
 .slideDown {
@ -45,15 +44,14 @@
  width: 100%;
  box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
  float: left;
-  height: 30vh;
  background-color: #33353d;
 }
 .infoBlockMe {
+  height: 30vh;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 100%;
  width: 33%;
  border-right: #454752 2px solid;
 }
@ -71,7 +69,6 @@
 }
 /* About Website */
 .aboutPages {
-  height: 30vh;
  float: left;
  background-color: #33353d;
  width: 100%;
@ -83,11 +80,12 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 100%;
+  height: 30vh;
  float: left;
 }
 .infoTextPages {
  width: 70%;
+  font-size: 2.5rem;
  text-align: center;
 }
 /* Mobile support */
@ -106,6 +104,23 @@
 /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
  .name {
-    font-size: 3rem;
+    font-size: 9vw;
+  }
+  .welcome {
+    font-size: 8vw;
+  }
+  .infoBlockPages {
+    width: 100%;
+    border: 0;
+    border-bottom: #454752 2px solid;
+  }
+  .infoBlockMe {
+    height: 20vh;
+    border: 0;
+    border-bottom: #454752 2px solid;
+    width: 100%;
+  }
+  .about {
+    display: block;
  }
 }
--- a/gallery/css.css
+++ b/gallery/css.css
@ -4,9 +4,15 @@
 body {
  background-color: #212126!important;
 }
+button {
+  border: 0;
+  padding: 0;
+  margin-top: 8px!important;
+}
 .gallery {
  margin-top: calc(3rem + 55px);
  text-align: center;
+  font-size: 2vw;
 }
 .rowImg {
  display: flex;
@ -20,6 +26,23 @@ body {
  padding: 0 4px;
 }
 .columnImg img {
-  margin-top: 8px;
  width: 100%;
 }
+@media screen and (min-width:500px) and (max-width:1000px) {
+  .columnImg {
+    flex: 50%;
+    max-width: 50%;
+  }
+  .gallery {
+    font-size: 3vw;
+  }
+}
+@media screen and (min-width:0px) and (max-width:500px) {
+  .columnImg {
+    flex: 100%;
+    max-width: 100%;
+  }
+  .gallery {
+    font-size: 5vw;
+  }
+}
--- a/gallery/index.html
+++ b/gallery/index.html
@ -15,25 +15,22 @@
 <body>

  <h1 class="gallery">
-  Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. <br>
+  Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. (Ik heb ze niet zelf gemaakt) <br>
  Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken.
  </h1>

 <div class="rowImg">
  <div class="columnImg">
-    <img src="/resources/img/mountain.jpg">
-    <img src="/resources/img/leaves.jpg">
-    <img src="/w3images/falls2.jpg">
+    <button onclick="window.open('https://www.pexels.com/photo/scenic-view-of-rocky-mountain-during-evening-1624438/', '_self')"><img src="/resources/img/mountain.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')"><img src="/resources/img/leaves.jpg" alt="img"></button>
  </div>
  <div class="columnImg">
-    <img src="/resources/img/roadwoods.jpg">
-    <img src="/resources/img/sunset.jpg">
-    <img src="/w3images/falls2.jpg">
+    <button onclick="window.open('https://www.pexels.com/photo/landscape-photo-of-riverand-pine-trees-2217365/', '_self')"><img src="/resources/img/riverwoods.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
  </div>
  <div class="columnImg">
-    <img src="/resources/img/roadwoodsred.jpg">
-    <img src="/resources/img/nightcity.jpg">
-    <img src="/w3images/falls2.jpg">
+    <button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button>
  </div>
 </div>

--- a/index.html
+++ b/index.html
@ -22,11 +22,11 @@
 	<div class="mainContent">
 		<h1 class="name">Guus van Meerveld</h1>
 		<h1 class="welcome">Welkom op deze website!</h1>
-		<a class="slideDown" href="#2"><i class="fas fa-caret-down fa-2x caret-down"></i></a>
+		<a class="slideDown" href="#about" id="about"><i class="fas fa-caret-down fa-2x caret-down"></i></a>
 	</div>

 	<!-- About Me-->
-	<div class="about" id="2">
+	<div class="about">
 		<div class="infoBlockMe"><h1>Mijn naam is Guus van Meerveld</h1></div>
 		<div class="infoBlockMe"><h1>Ik ben 15 jaar oud en heb deze website gebouwd</h1></div>
 		<div class="infoBlockMe" style="border:0;"><h1>Als je suggesties hebt, ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a></h1></div>
@ -41,7 +41,7 @@
 			<div class="infoTextPages">
 				<h2>Het idee van deze website is om al mijn hobbys op een plek samen te brengen.</h2>
 			</div>
-		</div><div class="infoBlockPages">
+		</div><div class="infoBlockPages" style="border:0;">
 			<div class="infoTextPages">
 				<h2>Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.</h2>
 			</div>
--- a/resources/img/nightcity.jpg
+++ b/resources/img/nightcity.jpg
--- a/resources/img/riverwoods.jpg
+++ b/resources/img/riverwoods.jpg
--- a/resources/js/navbar.json.js
+++ b/resources/js/navbar.json.js
@ -26,16 +26,16 @@ Navbar = [
  },
  {
    name: "Tools",
-    desc: "Tools for programming",
+    desc: "Tools voor programmeren",
    dropdown: [
      {
        name: "Playground",
-        desc: "Test your HTML live!",
+        desc: "Test je HTML live!",
        link: "/playground"
      },
      {
        name: "Minifier",
-        desc: "Minify your HTML/CSS/JavaScript",
+        desc: "Minify je HTML/CSS/JavaScript",
        link: "/minify"
      }
    ]