changed linkto readme wireframe

Author: ihortar

Wireframe/index.html

@@ -15,39 +15,45 @@ <h1>Wireframe Exercise</h1>
 
     <main>
       <section class="articles">
-        <!-- TOP LARGE ARTICLE -->
-        <article class="article-large">
+        <h2 class="visually-hidden">Articles</h2>
+
+        <!-- TOP ARTICLE -->
+        <article>
           <img src="readme.png" alt="README file example" />
-          <h2>What Is the Purpose of a README File?</h2>
+          <h3>What Is the Purpose of a README File?</h3>
           <p>
             A README file explains what a project does, how to use it, and how
             others can contribute.
           </p>
-          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
+          <a
+            href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+          >
             Read more
           </a>
         </article>
 
-        <!-- BOTTOM LEFT ARTICLE -->
+        <!-- BOTTOM LEFT -->
         <article>
           <img src="wireframe.png" alt="Website wireframe example" />
-          <h2>What Is the Purpose of a Wireframe?</h2>
+          <h3>What Is the Purpose of a Wireframe?</h3>
           <p>
-            A wireframe is a visual guide that represents the layout and
-            structure of a webpage before design and development.
+            A wireframe is a visual guide that represents the layout and structure
+            of a webpage before design and development.
           </p>
-          <a href="https://www.nngroup.com/articles/wireframes/">Read more</a>
+          <a href="https://www.nngroup.com/articles/draw-wireframe-even-if-you-cant-draw/">Read more</a>
         </article>
 
-        <!-- BOTTOM RIGHT ARTICLE -->
+        <!-- BOTTOM RIGHT -->
         <article>
           <img src="git_branch.png" alt="Git branching diagram" />
-          <h2>What Is a Branch in Git?</h2>
+          <h3>What Is a Branch in Git?</h3>
           <p>
-            A Git branch lets developers work on features or fixes without
+            A Git branch allows developers to work on features or fixes without
             affecting the main codebase.
           </p>
-          <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
+          <a
+            href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
+          >
             Read more
           </a>
         </article>

Wireframe/style.css

@@ -1,15 +1,14 @@
 /* ====== Design Palette ====== */
 :root {
   --paper: #ffffff;
-  --background-color: #f5f5f5;
   --ink: #000000;
   --font: 100%/1.5 system-ui, sans-serif;
   --space: clamp(8px, 2vw, 16px);
   --line: 2px solid #000;
   --container: 1000px;
 }
 
-/* ====== Base Elements ====== */
+/* ====== Base ====== */
 * {
   box-sizing: border-box;
 }
@@ -21,15 +20,6 @@ body {
   font: var(--font);
 }
 
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-  text-decoration: none;
-  color: inherit;
-  display: inline-block;
-}
-
 img {
   width: 100%;
   height: auto;
@@ -42,25 +32,26 @@ header {
   padding: calc(var(--space) * 2);
 }
 
-/* ====== Site Layout ====== */
+/* ====== Main Layout ====== */
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 6) auto;
+  padding: var(--space);
 }
 
-/* ====== Articles Grid Layout ====== */
+/* ====== Articles Grid ====== */
 .articles {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: calc(var(--space) * 2);
 }
 
-/* first article spans full width */
-.articles > article:first-child {
+/* First article spans full width */
+.articles > article:first-of-type {
   grid-column: span 2;
 }
 
-/* ====== Article Layout ====== */
+/* ====== Article Card ====== */
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -77,6 +68,20 @@ article > img {
   border-bottom: var(--line);
 }
 
+article h3 {
+  margin-top: var(--space);
+}
+
+a {
+  display: inline-block;
+  margin-top: var(--space);
+  padding: var(--space);
+  border: var(--line);
+  text-decoration: none;
+  color: inherit;
+  max-width: fit-content;
+}
+
 /* ====== Footer ====== */
 footer {
   position: fixed;
@@ -87,3 +92,16 @@ footer {
   background-color: #eee;
   border-top: var(--line);
 }
+
+/* ====== Accessibility ====== */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}