Footer now implemented without media queries

SamHemingway · Jul 3, 2022 · a181f3b · a181f3b
1 parent 52bb59a
commit a181f3b
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 187 deletions.
diff --git a/.nova/Configuration.json b/.nova/Configuration.json
@@ -0,0 +1,3 @@
+{
+  "prettier.format-on-save" : "Enable"
+}
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Frontend Mentor - Equalizer landing page solution
 
-This is a solution to the [Equalizer landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 
+This is a solution to the [Equalizer landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 
 ## Table of contents
 
@@ -15,6 +15,7 @@ This is a solution to the [Equalizer landing page challenge on Frontend Mentor](
   - [Continued development](#continued-development)
   - [Useful resources](#useful-resources)
 - [Author](#author)
+- [Acknowledgements](#acknowledgements)
 
 ## Overview
 
@@ -46,21 +47,21 @@ Users should be able to:
 - Semantic HTML5 markup
 - CSS custom properties
 - Flexbox
-- CSS Grid
 
 ### What I learned
 
 - It is very difficult to take layouts that don't follow a coherent design system and force them into one. At first, I attempted to use concepts from Every Layout to build this design, but it became clear that this was a herculean task given that the design wasn't built with these kinds of components in mind.
-- Building sites via explicit media queries to change layout is much less time consuming than building something truly responsive. Admittedly, I wouldn't have had to build *so many* clamp declarations in my CSS if the design had consistent padding/heading size changes. On the subject of clamp...
+- Building sites via explicit media queries to change layout is much less time consuming than building something truly responsive. Admittedly, I wouldn't have had to build _so many_ clamp declarations in my CSS if the design had consistent padding/heading size changes. On the subject of clamp...
 - I had to dust off my maths to figure out how to use linear interpolation to dynamically change, for example, the size of `h1` tag between desktop and mobile sizes. Whilst I'm confident there's a way to implement this without resorting to magic numbers for the clamp declarations which litter my CSS doc, my attempts ended in failure and as such I used a website (linked in [Useful resources](#useful-resources)) to generate these for me.
 - Sometimes, you've got to throw away the resources provided by Frontend Mentor and rebuild it yourself to make something work. In this example, the background image was provided as one large image for each viewport size (so one image for desktop, one for tablet, one for mobile). This was very unwieldy to make work as the background image elements required specific sizing and positioning at each provided viewport. Therefore, I ended up exporting each background image element individually from Figma and then implemented each `png` separately rather than all in one go.
-- That I'm not currently capable of achieving this kind of layout without using media queries. I spent a lot of time trying to make certain elements (such as the app screenshot and card in the main element that need to overlap, as well as the footer) work with just native flexbox/grid but I couldn't find a way to make it work.
-- How to use the `svg` tag for svg images so that I can change their values using CSS (an example of this is the hover effect on the social icons in the footer).
+- That a seemingly difficult Flexbox implementation is actually really simple if you just nest Flexbox items. I spent so long trying to get the footer element to work as one Flexbox item, before realising I could just implement it as 2 nested Flexbox elements and solved it in about 5 minutes...
+- That, as much as I had best intentions around trying to achieve this design without media queries, there are certain things that simply require it, and that's okay 😀
+- How to use inline svgs so that I can change their values using CSS (an example of this is the hover effect on the social icons in the footer), as well as generally how to edit them to make them accessible so they scale with user zoom on the browser.
+- That you can't nest a `button` tag inside of an `a` tag. Instead, just style the `a` tag!
 
 ### Continued development
 
 - Try to implement linear interpolation via CSS variables rather than magic numbers in future designs.
-- Try to implement elements such as those I required media queries for via pure flexbox/grid in the future.
 
 ### Useful resources
 
@@ -72,3 +73,7 @@ Users should be able to:
 
 - Website - [Sam Hemingway](https://samhemingway.dev)
 - Frontend Mentor - [@SamHemingway](https://www.frontendmentor.io/profile/samhemingway)
+
+## Acknowledgements
+
+- Thanks to [@faruking](https://www.frontendmentor.io/profile/faruking) on FEM who got me thinking about different ways to approach the footer! Whilst I didn't go with their solution, it was their idea that made me realise that I could just nest Flexboxes to implement with a defined `flex-basis` for each element to achieve the design in a graceful way.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet" />
 
+    <link rel="stylesheet" href="styles/reset.css" />
     <link rel="stylesheet" href="styles/variables.css" />
     <link rel="stylesheet" href="styles/utilities.css" />
     <link rel="stylesheet" href="styles/global.css" />
@@ -30,45 +31,67 @@ <h1 class="header__title">We make your music sound extraordinary.</h1>
 
       <main>
         <article class="switcher">
-          <img src="assets/illustration-app.png" alt="app screenshot" class="app-screenshot">
+          <img src="assets/illustration-app.png" alt="app screenshot" class="app-screenshot" />
           <div class="card stack">
             <h2 class="card-header">Premium EQ</h2>
             <p class="card-body">
               Get expert-level control with a robust equalizer, volume mixer, and spatial audio. Take your listening experience to a whole new level and access
               all our incredible features!
             </p>
             <p class="card-body card-body__callout"><span class="card-body__strong">$4</span> / month</p>
-            <a href="#" class="card-link">
-              <button class="button button__dark">
-                <img class="icon" src="/assets/icon-apple.svg" alt="apple store download button">
-                iOS Download
-              </button>
+            <a href="#" class="button button--dark">
+              <img class="icon" src="/assets/icon-apple.svg" alt="apple store download button" />
+              iOS Download
             </a>
-            <a href="#" class="card-link">
-              <button class="button button__light">
-                <img class="icon" src="/assets/icon-android.svg" alt="android store download button">
-                Android Download
-              </button>
+            <a href="#" class="button button--light">
+              <img class="icon" src="/assets/icon-android.svg" alt="android store download button" />
+              Android Download
             </a>
           </div>
         </article>
       </main>
 
       <footer class="footer">
-        <img src="assets/logo.svg" alt="equalizer" class="logo logo-footer" />
+        <div class="footer__logo">
+          <img src="assets/logo.svg" alt="equalizer" class="logo" />
+        </div>
+        <div class="footer__content">
           <div class="footer-body">
-            <p class="footer-body__text">
+            <p>
               All rights reserved © Equalizer 2021
-              </p>
-              <p class="footer-body__text">Have any problems? Contact us via social media or email us at <a href="#">equalizer@example.com</a></p>
+              <br />
+              Have any problems? Contact us via social media or email us at <a href="#">equalizer@example.com</a>
+            </p>
           </div>
           <div class="footer-socials">
             <a href="#" class="icon-socials">
-              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><title>Visit  equalizer facebook page</title><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z" fill="currentColor"/></svg>
+              <svg width="1.25rem" height="auto" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" role="link">
+                <title>Visit equalizer facebook page</title>
+                <path
+                  d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </a>
+            <a href="#" class="icon-socials"
+              ><svg width="1.25rem" height="auto" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" role="link">
+                <title>Visit equalizer Instagram page</title>
+                <path
+                  d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z"
+                  fill="currentColor"
+                /></svg
+            ></a>
+            <a href="#" class="icon-socials"
+              ><svg width="1.25rem" height="auto" viewbox="0 0 20 17" xmlns="http://www.w3.org/2000/svg" role="link">
+                <title>Visit equalizer Twitter page</title>
+                <path
+                  d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z"
+                  fill="currentColor"
+                />
+              </svg>
             </a>
-            <a href="#" class="icon-socials"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><title>Visit  equalizer Instagram page</title><path d="M10 1.802c2.67 0 2.987.01 4.042.059 2.71.123 3.975 1.409 4.099 4.099.048 1.054.057 1.37.057 4.04 0 2.672-.01 2.988-.057 4.042-.124 2.687-1.387 3.975-4.1 4.099-1.054.048-1.37.058-4.041.058-2.67 0-2.987-.01-4.04-.058-2.718-.124-3.977-1.416-4.1-4.1-.048-1.054-.058-1.37-.058-4.041 0-2.67.01-2.986.058-4.04.124-2.69 1.387-3.977 4.1-4.1 1.054-.048 1.37-.058 4.04-.058ZM10 0C7.284 0 6.944.012 5.877.06 2.246.227.227 2.242.061 5.877.01 6.944 0 7.284 0 10s.012 3.057.06 4.123c.167 3.632 2.182 5.65 5.817 5.817 1.067.048 1.407.06 4.123.06s3.057-.012 4.123-.06c3.629-.167 5.652-2.182 5.816-5.817.05-1.066.061-1.407.061-4.123s-.012-3.056-.06-4.122C19.777 2.249 17.76.228 14.124.06 13.057.01 12.716 0 10 0Zm0 4.865a5.135 5.135 0 1 0 0 10.27 5.135 5.135 0 0 0 0-10.27Zm0 8.468a3.333 3.333 0 1 1 0-6.666 3.333 3.333 0 0 1 0 6.666Zm5.338-9.87a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z" fill="currentColor"/></svg></a>
-            <a href="#" class="icon-socials"><svg width="20" height="17" xmlns="http://www.w3.org/2000/svg"><title>Visit  equalizer Twitter page</title><path d="M20 2.172a8.192 8.192 0 0 1-2.357.646 4.11 4.11 0 0 0 1.805-2.27 8.22 8.22 0 0 1-2.606.996A4.096 4.096 0 0 0 13.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 0 1 1.392 1a4.109 4.109 0 0 0 1.27 5.478 4.086 4.086 0 0 1-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 0 1-1.853.07 4.106 4.106 0 0 0 3.833 2.849A8.25 8.25 0 0 1 0 14.658a11.616 11.616 0 0 0 6.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0 0 20 2.172Z" fill="currentColor"/></svg></a>
           </div>
+        </div>
       </footer>
     </div>
   </body>