Update styling also mobile

MinThaMie · Nov 4, 2023 · 68983eb · 68983eb
1 parent ce99745
commit 68983eb
Show file tree

Hide file tree

Showing 7 changed files with 3,319 additions and 2,032 deletions.
diff --git a/app/breakpoints.js b/app/breakpoints.js
@@ -0,0 +1,5 @@
+export default {
+  mobile: '(max-width: 767px)',
+  tablet: '(min-width: 768px) and (max-width: 991px)',
+  desktop: '(min-width: 992px)',
+};
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -10,13 +10,17 @@ body {
   background-color: #fff;
 }
 
-.container {
+.desktop-container {
   display: grid;
   grid-template-columns: max-content 1fr;
   margin: 20px;
   gap: 48px;
 }
 
+.mobile-container {
+  margin: 20px;
+}
+
 .menu {
   display: flex;
   flex-direction: column;
@@ -58,12 +62,42 @@ nav > a.active.no-underline {
   border: none;
 }
 
+.menu.mobile {
+  height: 100%;
+}
+
 .links {
   display: flex;
   flex-flow: column;
   gap: 8px;
 }
 
+.menu.mobile > .links {
+  margin: 16px;
+}
+
+.menu.mobile > nav > a {
+  padding-left: 16px;
+}
+
+.menu-button {
+  border: 3px solid var(--primary-color);
+  font-family: Jura, sans-serif;
+  border-radius: 8px;
+  font-size: 24px;
+  padding: 4px 16px;
+  color: var(--primary-color);
+  background-color: unset;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.menu-button:hover,
+.menu-button:active {
+  color: white;
+  background-color: var(--primary-color);
+}
+
 .content {
   max-width: 80ch;
   line-height: 1.5;
@@ -81,14 +115,9 @@ nav > a.active.no-underline {
 
 .picture-container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   justify-content: center;
   margin-top: 20px;
 }
-
-@media (width <= 450px) {
-  .no-mobile {
-    display: none;
-  }
-}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,18 +1,44 @@
 {{page-title "Anne-Greeth"}}
 
-<div class="container">
-<div class="menu">
-  <nav>
-    <LinkTo class="no-underline home" @route="index">Anne-Greeth</LinkTo>
-    <LinkTo @route="kaartjes">Kaarten</LinkTo>
-    <LinkTo @route="in-opdracht">In Opdracht</LinkTo>
-    <LinkTo @route="contact">Contact</LinkTo>
-  </nav>
-  <div class="links">
-    <a class="" href="https://www.instagram.com/anne.greeth/">@anne.greeth</a>
-    <a class="" href="mailto:[email protected]">[email protected]</a>
+
+{{#if (media 'isDesktop')}}
+<div class="desktop-container">
+  <div class="menu">
+    <nav>
+      <LinkTo class="no-underline home" @route="index">Anne-Greeth</LinkTo>
+      <LinkTo @route="kaartjes">Kaarten</LinkTo>
+      <LinkTo @route="in-opdracht">In Opdracht</LinkTo>
+      <LinkTo @route="contact">Contact</LinkTo>
+    </nav>
+    <div class="links">
+      <a class="" href="https://www.instagram.com/anne.greeth/">@anne.greeth</a>
+      <a class="" href="mailto:[email protected]">[email protected]</a>
+    </div>
   </div>
+
+  {{outlet}}
 </div>
+{{else}}
+<MobileMenuWrapper as |mmw|>
+  <mmw.MobileMenu as |mm|>
+    <div class="menu mobile">
+      {{!-- template-lint-disable no-duplicate-landmark-elements --}}
+      <nav>
+        <mm.LinkTo class="no-underline home" @route="index">Anne-Greeth</mm.LinkTo>
+        <mm.LinkTo @route="kaartjes">Kaarten</mm.LinkTo>
+        <mm.LinkTo @route="in-opdracht">In Opdracht</mm.LinkTo>
+        <mm.LinkTo @route="contact">Contact</mm.LinkTo>
+      </nav>
+      <div class="links">
+        <a class="" href="https://www.instagram.com/anne.greeth/">@anne.greeth</a>
+        <a class="" href="mailto:[email protected]">[email protected]</a>
+      </div>
+    </div>
+  </mmw.MobileMenu>
 
-{{outlet}}
-</div>
+  <mmw.Content class="mobile-container">
+    <mmw.Toggle class="menu-button">Menu</mmw.Toggle>
+    {{outlet}}
+  </mmw.Content>
+</MobileMenuWrapper>
+{{/if}}
diff --git a/app/templates/in-opdracht.hbs b/app/templates/in-opdracht.hbs
@@ -12,8 +12,8 @@
     Heb jij een leuke opdracht voor mij, neem gerust <LinkTo @route="contact">contact</LinkTo> met mij op.
   </div>
   <div class="picture-container">
-    <img class="picture no-mobile" src="/images/haan.png" alt="haan"/>
-    <img class="picture no-mobile" src="/images/huisportret.jpeg" alt="Huisportret"/>
+    <img class="picture" src="/images/haan.png" alt="haan"/>
+    <img class="picture" src="/images/huisportret.jpeg" alt="Huisportret"/>
     <img class="picture" src="/images/vogeltje_lynx.jpeg" alt="Bee"/>
   </div>
 </div>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -5,9 +5,9 @@
   <br><br>
   Kijk gerust rond in mijn portfolio en aarzel niet om <LinkTo @route="contact">contact</LinkTo> op te nemen. Ben je op zoek naar creativiteit op maat, <LinkTo @route="in-opdracht">klik dan hier</LinkTo>.
   <div class="picture-container">
-    <img class="no-mobile picture" src="/images/bird.jpeg" alt="Bird"/>
+    <img class="picture" src="/images/bird.jpeg" alt="Bird"/>
     <img class="picture" src="/images/profile.jpg" alt="Myself"/>
-    <img class="no-mobile picture" src="/images/bee.jpeg" alt="Bee"/>
+    <img class="picture" src="/images/bee.jpeg" alt="Bee"/>
   </div>
 </div>