From 28a8e92bfcf7288dc449db1f6b76ab2a3573a17c Mon Sep 17 00:00:00 2001 From: joanne342 <130585013+joanne342@users.noreply.github.com> Date: Wed, 7 Jan 2026 17:21:38 +0000 Subject: [PATCH 1/4] Update style.css --- Wireframe/style.css | 45 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..0ee1fd11e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,10 +31,26 @@ body { color: var(--ink); font: var(--font); } +header { + text-align: center; +} a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + display: inline-block; + width: fit-content; + height: 40px; + line-height: 40px; + padding: 0 1.2em; + background: rgb(154, 206, 227); + color: black; + text-decoration: none; + border-radius: 6px; + font-weight: 600; + text-align: center; + vertical-align: bottom; +} + +a:hover { + background: rgb(193, 214, 230); } img, svg { @@ -48,11 +64,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: calc(var(--space) * 6); } footer { position: fixed; bottom: 0; + width: 100%; text-align: center; + background: white; + border-top: var(--line); + padding: var(--space); } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -80,10 +101,28 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); + grid-template-rows: auto 1fr auto; /* Add this */ > * { grid-column: 2/3; } > img { grid-column: span 3; } + > a { + align-self: end; /* Add this */ + } +} + +article > h2 { + padding-top: var(--space); } + +article:first-child > img { + grid-column: span 3; + /* no aspect-ratio here, so it keeps its natural height */ +} + +article:not(:first-child) > img { + grid-column: span 3; + aspect-ratio: 16 / 9; /* force same height for bottom two */ + object-fit: cover; From d057f1e0f688ef7e9dd1c26ad3f9d55eb9983b98 Mon Sep 17 00:00:00 2001 From: joanne342 <130585013+joanne342@users.noreply.github.com> Date: Wed, 7 Jan 2026 17:22:02 +0000 Subject: [PATCH 2/4] Update index.html --- Wireframe/index.html | 40 +++++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..23ebdabc6 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,41 @@ - Wireframe + Readme, branch and wireframe
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Readme, branch and wireframe

+

Brief definitions

+
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more + Branch image +

Branch

+

A branch is basically a pointer to a snapshot of your code so you can experiment with it without affecting the main codebase. It isn't a full copy because repos with multiple branches could get huge. Then you can merge your changes to the main codebase. It's like a sandbox.

+ Read More +
+ + +
+ Readme image +

Readme

+

A readme is particularly important on GitHub since the code is in textual form and the user may need to compile it. The readme tells you what the project is for and how to use it, amongst other things.

+ Read More +
+ +
+ Wireframe image +

Wireframe

+

A wireframe is a sketch of a website that shows where the title, subtitles, text, pictures and buttons are going to go but without real pictures and it has dummy text.

+ Read More
+ From c51c964172d2c37ccf5af24e3699f1a478c6b76b Mon Sep 17 00:00:00 2001 From: joanne342 <130585013+joanne342@users.noreply.github.com> Date: Sun, 3 May 2026 17:20:22 +0100 Subject: [PATCH 3/4] Update style.css --- Wireframe/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 0ee1fd11e..d060fb430 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -101,7 +101,7 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - grid-template-rows: auto 1fr auto; /* Add this */ + grid-template-rows: auto 1fr auto; > * { grid-column: 2/3; } @@ -109,7 +109,7 @@ article { grid-column: span 3; } > a { - align-self: end; /* Add this */ + align-self: end; } } From ee02517293ef805a99ec3db33edfdd292b9dee51 Mon Sep 17 00:00:00 2001 From: joanne342 <130585013+joanne342@users.noreply.github.com> Date: Sun, 3 May 2026 17:24:47 +0100 Subject: [PATCH 4/4] Update index.html --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 23ebdabc6..f7365a84e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,7 @@

Readme, branch and wireframe

- Branch image + A Git branching diagram showing 'feature2' merging into 'feature1', and 'feature1' merging into 'main'.

Branch

A branch is basically a pointer to a snapshot of your code so you can experiment with it without affecting the main codebase. It isn't a full copy because repos with multiple branches could get huge. Then you can merge your changes to the main codebase. It's like a sandbox.

Read More