Add 'news-homepage/'

alpe12 · Oct 29, 2023 · aef91b9 · aef91b9
1 parent ed79a6f
commit aef91b9
Show file tree

Hide file tree

Showing 22 changed files with 565 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/_projects
diff --git a/index.html b/index.html
@@ -8,6 +8,22 @@
 </head>
 <body>
     <main class="cards">
+        <div class="card">
+            <a class="imagelink" href="./news-homepage/index.html">
+                <img src="./src/images/news-homepage.webp" alt='Screenshot of "News homepage"' loading="lazy">
+            </a>
+            <div class="content">
+                <a class="title" href="./news-homepage/index.html">
+                    <h2>News homepage</h2>
+                </a>
+                <ul class="tags">
+                    <li class="html">HTML</li>
+                    <li class="css">CSS</li>
+                    <li class="js">JS</li>
+                </ul>
+                <a href="./news-homepage/README.html" class="readme">Details</a>
+            </div>
+        </div>
         <div class="card">
             <a class="imagelink" href="./intro-section-with-dropdown-navigation/index.html">
                 <img src="./src/images/intro-section-with-dropdown-navigation.webp" alt='Screenshot of "Intro section with dropdown navigation"' loading="lazy">

diff --git a/intro-section-with-dropdown-navigation/src/css/style.css b/intro-section-with-dropdown-navigation/src/css/style.css
@@ -208,6 +208,7 @@ main {
     left: 0;
     width: 100%;
     font-size: 0.8rem;
+    z-index: 4;
 }
 .attribution p {
     display: inline-block;
@@ -226,6 +227,9 @@ main {
     }
 }
 @media (max-width: 780px){
+    html {
+        position: relative;
+    }
     body {
         margin: 0;
         gap: 0;
@@ -238,11 +242,11 @@ main {
         position: absolute;
         top: 0;
         right: 0;
+        bottom: 0;
         flex-direction: column;
         background-color: white;
         padding: 24px;
         padding-top: 4rem;
-        height: 100%;
         justify-content: normal;
         min-width: min(100%, 240px);
         z-index: 2;
@@ -290,14 +294,10 @@ main {
     }
     header input.hamburger:checked ~ .menus {
         display: flex;
-        box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, 0.5);
-    }
-    main,
-    main .left,
-    main .right {
-        flex-direction: column;
+        box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, 0.6);
     }
     main {
+        flex-direction: column;
         gap: 28px;
     }
     main .right {

diff --git a/intro-section-with-dropdown-navigation/src/js/script.js b/intro-section-with-dropdown-navigation/src/js/script.js
@@ -1,6 +1,6 @@
-const menus_input = [...document.querySelectorAll('.menu-expand')].map(el => el.parentElement).map(el => el.querySelector('input[id$=-menu-toggle]'));
+const menus_input = [...document.querySelectorAll('header .menus .menu-expand')].map(el => el.parentElement).map(el => el.querySelector('input[id$=-menu-toggle]'));
 
-function closeOthers(el){
+function closeInactive(el){
     if (document.querySelector('header label.hamburger').getBoundingClientRect().width > 0){
         const hamburger = document.querySelector('header input.hamburger');
         if (hamburger.checked && (el.target.closest('header') === null || el.target === document.querySelector('header > :first-child'))){
@@ -23,4 +23,4 @@ function closeOthers(el){
     }
 }
 
-document.addEventListener('click', closeOthers);
+document.addEventListener('click', closeInactive);
diff --git a/news-homepage/README.md b/news-homepage/README.md
@@ -0,0 +1,60 @@
+# Frontend Mentor - News homepage solution
+
+This is a solution to the [News homepage challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 
+
+## Table of contents
+
+- [Overview](#overview)
+  - [The challenge](#the-challenge)
+  - [Screenshot](#screenshot)
+  - [Links](#links)
+- [My process](#my-process)
+  - [What I learned](#what-i-learned)
+
+
+## Overview
+
+### The challenge
+
+Users should be able to:
+
+- View the optimal layout for the interface depending on their device's screen size
+- See hover and focus states for all interactive elements on the page
+
+### Screenshot
+
+![](./src/images/screenshot.png)
+![](./src/images/screenshot-mobile.png)
+![](./src/images/screenshot-mobile-menu.png)
+
+### Links
+
+- Live Site URL: [Github Pages](https://alpe12.github.io/frontendMentor/news-homepage/)
+
+## My process
+
+### What I learned
+
+I wanted the padding to scale between two values, depending on the page width (also two values). After much research I was able to do it with this:
+
+```css
+--min-width: 681;
+--max-width: 1440;
+--min-padding-vertical: 22.5;
+--max-padding-vertical: 90;
+--min-padding-horizontal: 40;
+--max-padding-horizontal: 165;
+padding: 
+    clamp(
+        var(--min-padding-vertical)*1px,
+        calc(var(--min-padding-vertical)*1px + (var(--max-padding-vertical) - var(--min-padding-vertical)) * ((100vw - var(--min-width)*1px) / (var(--max-width) - var(--min-width)))),
+        var(--max-padding-vertical)*1px
+    )
+    clamp(
+        var(--min-padding-horizontal)*1px,
+        calc(var(--min-padding-horizontal)*1px + (var(--max-padding-horizontal) - var(--min-padding-horizontal)) * ((100vw - var(--min-width)*1px) / (var(--max-width) - var(--min-width)))),
+        var(--max-padding-horizontal)*1px
+    );
+```
+
+Also learned more about how to use grid. Still a lot to learn though.
diff --git a/news-homepage/index.html b/news-homepage/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Frontend Mentor | News homepage</title>
+    <link rel="shortcut icon" href="./src/images/favicon-32x32.png" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./src/css/style.css">
+    <script src="./src/js/script.js" defer></script>
+</head>
+<body>
+    <header>
+        <img src="./src/images/logo.svg" alt="">
+        <input class="hamburger" id="menu-toggle" type="checkbox">
+        <label class="hamburger" for="menu-toggle">
+            <img src="./src/images/icon-menu.svg" alt="" class="open">
+            <img src="./src/images/icon-menu-close.svg" alt="" class="close">
+        </label>
+        <nav>
+            <ul>
+                <li><a href="">Home</a></li>
+                <li><a href="">New</a></li>
+                <li><a href="">Popular</a></li>
+                <li><a href="">Trending</a></li>
+                <li><a href="">Categories</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="web3">
+            <picture>
+                <source media="(min-width: 820px)" srcset="./src/images/image-web-3-desktop.jpg">
+                <img src="./src/images/image-web-3-mobile.jpg" alt="">
+            </picture>
+            <h1>The Bright Future of Web 3.0?</h1>
+            <div class="content">
+                <p>We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. 
+                But is it really fulfilling its promise?</p>
+                <a href="">Read more</a>
+            </div>
+        </div>
+        <div class="new">
+            <h2>New</h2>
+            <div class="articles">
+                <article>
+                    <h3><a href="">Hydrogen VS Electric Cars</a></h3>
+                    <p>Will hydrogen-fueled cars ever catch up to EVs?</p>
+                </article>
+                <article>
+                    <h3><a href="">The Downsides of AI Artistry</a></h3>
+                    <p>What are the possible adverse effects of on-demand AI image generation?</p>
+                </article>
+                <article>
+                    <h3><a href="">Is VC Funding Drying Up?</a></h3>
+                    <p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
+                </article>
+            </div>
+        </div>
+        <div class="cards">
+            <article>
+                <img src="./src/images/image-retro-pcs.jpg" alt="">
+                <div class="content">
+                    <span class="count">01</span>
+                    <h4><a href="">Reviving Retro PCs</a></h4>
+                    <p>What happens when old PCs are given modern upgrades?</p>
+                </div>
+            </article>
+            <article>
+                <img src="./src/images/image-top-laptops.jpg" alt="">
+                <div class="content">
+                    <span class="count">02</span>
+                    <h4><a href="">Top 10 Laptops of 2022</a></h4>
+                    <p>Our best picks for various needs and budgets.</p>
+                </div>
+            </article>
+            <article>
+                <img src="./src/images/image-gaming-growth.jpg" alt="">
+                <div class="content">
+                    <span class="count">03</span>
+                    <h4><a href="">The Growth of Gaming</a></h4>
+                    <p>How the pandemic has sparked fresh opportunities.</p>
+                </div>
+            </article>
+        </div>
+    </main>
+    <div class="attribution">
+        <p>Challenge by <a href="https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl" target="_blank">Frontend Mentor</a>.</p>
+        <p>Coded by <a href="https://github.com/alpe12">Douglas Pessoa</a>.</p>
+    </div>
+</body>
+</html>