From cbd2e261eb6c01d2ba857914a7816c7a772313ec Mon Sep 17 00:00:00 2001 From: Liyema Mfengwana <67449042+solohuns@users.noreply.github.com> Date: Sat, 30 May 2026 13:04:23 +0200 Subject: [PATCH 1/5] complete wireframe-sprint2 --- Wireframe/index.html | 144 +++++++++++++++++++++++------ Wireframe/style.css | 216 +++++++++++++++++++++++++++++-------------- 2 files changed, 263 insertions(+), 97 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7e7055494 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,119 @@ - - - - Wireframe - - - -
-

Wireframe

-

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

-
-
-
- -

Title

-

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

+

Wireframe

+

+ Learn about README files, wireframes, and Git branches. +

+
+
+ +
+
+ Person reading project documentation +
+
+

What is the purpose of a README file?

+

+ A README introduces a project: what it is, why it exists, and how to use, install, run, and contribute to it. + It orients new users and contributors, sets expectations (requirements, license, roadmap), and centralizes + quick-start commands and links. In short, it’s the project’s front door and owner’s manual.

- Read more + Read More +
+
+ + + +
+
+
+ Person reading project documentation +
+
+

What is the purpose of a wireframe?

+

+ A wireframe is a low‑fidelity layout of a page. It maps structure, hierarchy, and placement of elements + (headers, media, text, buttons) without visual polish. Teams use wireframes to align on content priority, + user flow, and functionality early—reducing rework before design and code. +

+ Read More +
-
-
-

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

-
- - + +
+
+ Developer working with Git and code +
+
+

What is a branch in Git?

+

+ A Git branch is an independent line of development. It lets you make changes, experiment, and review work + without affecting the main history. When ready, merge the branch back (often via pull request) to integrate + tested, reviewed changes into the primary codebase. +

+ Read More +
+
+ + + +
+

README essentials

+
    +
  • Project overview and goals
    • +
  • Installation and quick start
    • +
  • Usage examples and configuration
    • +
  • Contributing guidelines and license
    • +
  • Links to docs, issues, and support
    • +
+
+ +
+

Why wireframe first

+
    +
  • Clarifies content priority and layout
    • +
  • Enables fast feedback before visuals
    • +
  • De-risks scope and uncovers edge cases
    • +
  • Acts as a blueprint for designers/devs
    • +
+
+ +
+

Branch workflow highlights

+
    +
  • Create: git checkout -b feature/name
    • +
  • Commit work locally and push the branch
    • +
  • Open a pull request for review and CI
    • +
  • Merge, then delete the branch when done
    • +
+
+ +
+ + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d30cab2a0 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,74 +16,154 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; +:root{ + --ink:#111; + --line:#222; + --muted:#6a6a6a; + --bg:#fafafa; + --card:#ffffff; + --accent:#111; +} + +*{box-sizing:border-box} +html,body{margin:0;padding:0} +body{ + font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + color:var(--ink); + background:var(--bg); + line-height:1.55; +} + +.container{ + max-width: 920px; + margin: 0 auto; + padding: 0 16px 48px; +} + +/* Header matches the sketchy title style */ +.page-hero{ + text-align:center; + padding: 28px 16px 8px; +} +.page-title{ + font-family: "Kalam", cursive; + font-size: 42px; + margin: 12px 0 4px; + letter-spacing: 1px; + text-transform: uppercase; +} +.page-subtitle{ + font-family: "Kalam", cursive; + color:var(--muted); + font-size: 14px; + margin:0; + letter-spacing: .5px; +} + +/* Cards */ +.card{ + background:var(--card); + border:2px solid var(--line); + border-radius:2px; + margin: 18px 0; + overflow:hidden; +} +.card--featured{ + /* visually wider like the top box in the wireframe */ +} +.card__media{ + position:relative; + height: 240px; + border-bottom:2px solid var(--line); +} +.card--featured .card__media{ height: 280px; } + +.fake-img{ + background:#fff; +} +.fake-img .diag{ + position:absolute; + top:0;left:0;right:0;bottom:0; + pointer-events:none; +} +.fake-img .diag.left{ + background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% ); + opacity:.7; +} +.fake-img .diag.right{ + background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% ); + opacity:.7; } -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; - text-align: center; -} -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; + +.card__body{ + padding: 16px 20px 20px; +} +.card__title{ + font-family:"Kalam", cursive; + font-size: 20px; + margin: 0 0 6px; +} +.card__summary{ + margin: 0 0 12px; + color:#333; + font-size: 14px; +} + +.btn{ + display:inline-block; + border:2px solid var(--line); + padding:6px 12px; + font-size:13px; + color:var(--accent); + text-decoration:none; + border-radius:3px; + background:#f7f7f7; +} + +/* Two-column grid for the lower row */ +.grid{ + display:grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ -article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + gap: 22px; + margin-top: 22px; +} + +.details{ + max-width: 920px; + margin: 10px auto 0; + padding: 0 2px; +} +.details h3{ + font-size: 16px; + margin: 22px 0 8px; + font-weight:600; } +.details ul{ + margin: 0 0 8px 18px; +} + +/* Footer */ +.site-footer{ + border-top:2px solid var(--line); + margin-top: 36px; + padding: 18px 12px; + text-align:center; + font-family:"Kalam", cursive; + font-size:12px; + color:#222; +} + +/* Responsiveness */ +@media (max-width: 780px){ + .grid{ grid-template-columns: 1fr; } + .card__media{ height: 200px; } + .card--featured .card__media{ height: 220px; } +} + + +.card__media img { + width: 100%; + height: 220px; + object-fit: cover; + display: block; +} \ No newline at end of file From 324207221a701bdc6e98ec8d4f5869ed5b303560 Mon Sep 17 00:00:00 2001 From: Liyema Mfengwana <67449042+solohuns@users.noreply.github.com> Date: Mon, 1 Jun 2026 14:44:17 +0200 Subject: [PATCH 2/5] edit css --- Wireframe/style.css | 202 ++++++++++++++++++++++++++------------------ 1 file changed, 122 insertions(+), 80 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index d30cab2a0..efd05165a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,154 +16,196 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ -:root{ - --ink:#111; - --line:#222; - --muted:#6a6a6a; - --bg:#fafafa; - --card:#ffffff; - --accent:#111; +:root { + --ink: #111; + --line: #222; + --muted: #6a6a6a; + --bg: #fafafa; + --card: #ffffff; + --accent: #111; } -*{box-sizing:border-box} -html,body{margin:0;padding:0} -body{ - font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; - color:var(--ink); - background:var(--bg); - line-height:1.55; +* { + box-sizing: border-box; +} +html, +body { + margin: 0; + padding: 0; +} +body { + font-family: + "Inter", + system-ui, + -apple-system, + Segoe UI, + Roboto, + Arial, + sans-serif; + color: var(--ink); + background: var(--bg); + line-height: 1.55; + padding-bottom: 70px; } -.container{ +.container { max-width: 920px; margin: 0 auto; padding: 0 16px 48px; } /* Header matches the sketchy title style */ -.page-hero{ - text-align:center; +.page-hero { + text-align: center; padding: 28px 16px 8px; } -.page-title{ +.page-title { font-family: "Kalam", cursive; font-size: 42px; margin: 12px 0 4px; letter-spacing: 1px; text-transform: uppercase; } -.page-subtitle{ +.page-subtitle { font-family: "Kalam", cursive; - color:var(--muted); + color: var(--muted); font-size: 14px; - margin:0; - letter-spacing: .5px; + margin: 0; + letter-spacing: 0.5px; } /* Cards */ -.card{ - background:var(--card); - border:2px solid var(--line); - border-radius:2px; +.card { + background: var(--card); + border: 2px solid var(--line); + border-radius: 2px; margin: 18px 0; - overflow:hidden; + overflow: hidden; } -.card--featured{ +.card--featured { /* visually wider like the top box in the wireframe */ } -.card__media{ - position:relative; +.card__media { + position: relative; height: 240px; - border-bottom:2px solid var(--line); + border-bottom: 2px solid var(--line); } -.card--featured .card__media{ height: 280px; } - -.fake-img{ - background:#fff; -} -.fake-img .diag{ - position:absolute; - top:0;left:0;right:0;bottom:0; - pointer-events:none; -} -.fake-img .diag.left{ - background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% ); - opacity:.7; +.card--featured .card__media { + height: 280px; } -.fake-img .diag.right{ - background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% ); - opacity:.7; + +.fake-img { + background: #fff; +} +.fake-img .diag { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} +.fake-img .diag.left { + background: linear-gradient( + to bottom right, + transparent 49%, + var(--line) 50%, + transparent 51% + ); + opacity: 0.7; +} +.fake-img .diag.right { + background: linear-gradient( + to top right, + transparent 49%, + var(--line) 50%, + transparent 51% + ); + opacity: 0.7; } -.card__body{ +.card__body { padding: 16px 20px 20px; + display: flex; + flex-direction: column; + height: 100%; } -.card__title{ - font-family:"Kalam", cursive; +.card__title { + font-family: "Kalam", cursive; font-size: 20px; margin: 0 0 6px; } -.card__summary{ +.card__summary { margin: 0 0 12px; - color:#333; + color: #333; font-size: 14px; } -.btn{ - display:inline-block; - border:2px solid var(--line); - padding:6px 12px; - font-size:13px; - color:var(--accent); - text-decoration:none; - border-radius:3px; - background:#f7f7f7; +.btn { + display: block; + border: 2px solid var(--line); + padding: 6px 12px; + font-size: 13px; + color: var(--accent); + text-decoration: none; + border-radius: 3px; + background: #f7f7f7; + text-align: center; } /* Two-column grid for the lower row */ -.grid{ - display:grid; +.grid { + display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; } -.details{ +.details { max-width: 920px; margin: 10px auto 0; padding: 0 2px; } -.details h3{ +.details h3 { font-size: 16px; margin: 22px 0 8px; - font-weight:600; + font-weight: 600; } -.details ul{ +.details ul { margin: 0 0 8px 18px; } /* Footer */ -.site-footer{ - border-top:2px solid var(--line); - margin-top: 36px; +.site-footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + border-top: 2px solid var(--line); padding: 18px 12px; - text-align:center; - font-family:"Kalam", cursive; - font-size:12px; - color:#222; + text-align: center; + font-family: "Kalam", cursive; + font-size: 12px; + color: #222; + background: var(--bg); } /* Responsiveness */ -@media (max-width: 780px){ - .grid{ grid-template-columns: 1fr; } - .card__media{ height: 200px; } - .card--featured .card__media{ height: 220px; } +@media (max-width: 780px) { + .grid { + grid-template-columns: 1fr; + } + .card__media { + height: 200px; + } + .card--featured .card__media { + height: 220px; + } } - .card__media img { width: 100%; height: 220px; object-fit: cover; display: block; -} \ No newline at end of file +} From 23ce22595b5c7aa9416cc8e040b63b1b048f2388 Mon Sep 17 00:00:00 2001 From: Liyema Mfengwana <67449042+solohuns@users.noreply.github.com> Date: Mon, 1 Jun 2026 15:03:26 +0200 Subject: [PATCH 3/5] edit css and change h1 class --- Wireframe/index.html | 2 +- Wireframe/style.css | 53 +++++++++----------------------------------- 2 files changed, 11 insertions(+), 44 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7e7055494..d7df1b45c 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -17,7 +17,7 @@
-

Wireframe

+

Wireframe

Learn about README files, wireframes, and Git branches.

diff --git a/Wireframe/style.css b/Wireframe/style.css index efd05165a..530fa25bb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -59,13 +59,7 @@ body { text-align: center; padding: 28px 16px 8px; } -.page-title { - font-family: "Kalam", cursive; - font-size: 42px; - margin: 12px 0 4px; - letter-spacing: 1px; - text-transform: uppercase; -} + .page-subtitle { font-family: "Kalam", cursive; color: var(--muted); @@ -82,9 +76,7 @@ body { margin: 18px 0; overflow: hidden; } -.card--featured { - /* visually wider like the top box in the wireframe */ -} + .card__media { position: relative; height: 240px; @@ -94,36 +86,6 @@ body { height: 280px; } -.fake-img { - background: #fff; -} -.fake-img .diag { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; -} -.fake-img .diag.left { - background: linear-gradient( - to bottom right, - transparent 49%, - var(--line) 50%, - transparent 51% - ); - opacity: 0.7; -} -.fake-img .diag.right { - background: linear-gradient( - to top right, - transparent 49%, - var(--line) 50%, - transparent 51% - ); - opacity: 0.7; -} - .card__body { padding: 16px 20px 20px; display: flex; @@ -198,9 +160,6 @@ body { .card__media { height: 200px; } - .card--featured .card__media { - height: 220px; - } } .card__media img { @@ -209,3 +168,11 @@ body { object-fit: cover; display: block; } + +.page-title { + font-family: "Kalam", cursive; + font-size: 42px; + margin: 12px 0 4px; + letter-spacing: 1px; + text-transform: uppercase; +} \ No newline at end of file From eeb9092a152ef39fb28522656886e7c86bdad05f Mon Sep 17 00:00:00 2001 From: Liyema Mfengwana <67449042+solohuns@users.noreply.github.com> Date: Mon, 1 Jun 2026 15:07:41 +0200 Subject: [PATCH 4/5] edit css --- Wireframe/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 530fa25bb..8d57fbf11 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -175,4 +175,4 @@ body { margin: 12px 0 4px; letter-spacing: 1px; text-transform: uppercase; -} \ No newline at end of file +} From 74f644dd05c6993c1907d9d728517a249dfea872 Mon Sep 17 00:00:00 2001 From: Liyema Mfengwana <67449042+solohuns@users.noreply.github.com> Date: Tue, 2 Jun 2026 10:58:40 +0200 Subject: [PATCH 5/5] edit css --- Wireframe/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 8d57fbf11..f434f6ff1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -38,7 +38,7 @@ body { "Inter", system-ui, -apple-system, - Segoe UI, + "Segoe UI", Roboto, Arial, sans-serif;