@import url('https://fonts.googleapis.com/css2?family=Nunito'); html { scroll-behavior: smooth; height: 100vh; } body { background: #e7ffe5; font-family: 'Nunito', sans-serif; margin: 0 auto; } /* remove the bullet points and padding */ ul { list-style: none; padding: 0; margin: 0; } /* style for links (only present in header and buttons) minor transition for smoothness */ a { color: white; background-color: #3f7a5d; text-decoration: none; letter-spacing: 0.08rem; transition: all 0.1s; } /* give it a nice little 'hover' effect (!) because the nav is of the same colour as we mimic opacity: 0.8 with a lighter colour */ a:hover { background-color: #6ea78b; } /* put the nav at the top with a colour */ .nav { position: relative; top: 0; background-color: #3f7a5d; overflow: hidden; } /* make the links into blocks */ .nav a { float: left; display: block; text-align: center; padding: 24px; } /* hide the menu icon (wide screens) */ .nav .icon { display: none; } .articles { max-width: 1280px; margin-left: auto; margin-right: auto; } /* when <646px, hide all links except the first one (paw) and display the menu icon on the right */ @media screen and (max-width: 646px) { .nav a:not(:first-child) {display: none;} .nav a.icon { float: right; display: block; } } /* with a little JS in the html, we display the rest of the menu items in a column by injecting a new class */ @media screen and (max-width: 646px) { .nav.responsive {position: relative;} .nav.responsive a.icon { position: absolute; right: 0; top: 0; } .nav.responsive a { float: none; display: block; text-align: left; } } /* it's-a nice! excludes the header and footer which should be edge-to-edge of max-width */ main { padding: 1rem; } /* narrow the section down for readability (respect
padding) and center it */ .welcome { max-width: 640px; margin-right: auto; margin-left: auto; } .welcome > article > h1 { text-align: center; } .welcome > article > p { text-align: justify; } /* using grid for the articles section to automatically be repeated. 300px (+ pad/marg) per article works out as: - one article per row <646px - two articles per (second) row >646px - main article + 1 article on 1st row and then three articles per row >964px - main article + 2 articles on 1st row and then four articles per row >1280px*/ .articles > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1rem; } /* have the main-article stay big by occupying grid 1-to-3 on the 1st row */ @media screen and (min-width: 646px) { #main-article { grid-column: 1 / 3; grid-row: 1; } } .articles > ul > li { background-color: rgba(255, 255, 255, 0.4); box-shadow: rgba(0, 0, 0, 0.2) 0 0.065rem 0.25rem; border-radius: 0.4rem; padding: 1rem; } /* remove any excess hide potential overflow style the corners to the article keep surrounding layout unaffected */ .articles > ul > li > figure { margin: 0; max-height: 272px; overflow: hidden; border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem; position: relative; } .articles > ul > li > figure > img { width: 100%; } /* position the figcaption to the bottom though, seems to not be perfect at all resolutions perhaps due to img resizing (?) */ .articles > ul > li > figure > figcaption { position: absolute; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.4); } .articles > ul > li > figure > figcaption > h2 { color: white; padding: 0.4rem; font-size: 1rem; } .articles > ul > li > p { font-size: 0.8rem; line-height: 1.2; padding: 0.4rem; } /* make the links into buttons with a little transition animation (!) to-do: make them stick to the bottom */ .articles > ul > li > a { text-align: center; display: inline-block; border-radius: 0.2rem; padding: 0.4rem 1rem; margin: 0.4rem; transition: all 0.3s; } footer { color: white; background-color: #3f7a5d; padding: 0.8rem; text-align: center; font-size: 0.8rem; position: relative; bottom: 0; width: 100%; }