From 51c7dd61279c88222ab83b7bb22432f6111337d4 Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 16:05:59 +0200 Subject: [PATCH 1/7] Update index.html --- Wireframe/index.html | 41 +++++++++++++++++++++++++++-------------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f0c1ec14f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -9,25 +9,38 @@

Wireframe

-

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

+

Learn about README files, wireframes, and Git branches

+
- -

Title

+ README file icon +

What is a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file introduces and explains a project. It tells users what your project does, how to use it, how to install it, and how to contribute. It’s the first thing most people see.

- Read more + Read more about readme-file
-
- +
+ Wireframe icon +

What is a Wireframe?

+

+ A wireframe is a visual guide that represents the skeletal framework of a website or application. It helps in planning the layout and functionality before actual development begins. +

+ Read more about wireframes +
+ +
+ Git Branch icon +

What is a Git Branch?

+

+ A Git branch is a separate line of development in a project. It allows you to work on features or fixes without affecting the main codebase, making it easier to manage changes and collaborate with others. +

+ Read more about git branches +
+ + From 7b1f6c4de04072f2c90934556538943d27c37b24 Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 16:06:49 +0200 Subject: [PATCH 2/7] Update index.html --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index f0c1ec14f..7431ee161 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -14,7 +14,7 @@

Wireframe

- README file icon + README file icon

What is a README file?

A README file introduces and explains a project. It tells users what your project does, how to use it, how to install it, and how to contribute. It’s the first thing most people see. @@ -22,7 +22,7 @@

What is a README file?

Read more about readme-file
- Wireframe icon + Wireframe icon

What is a Wireframe?

A wireframe is a visual guide that represents the skeletal framework of a website or application. It helps in planning the layout and functionality before actual development begins. @@ -31,7 +31,7 @@

What is a Wireframe?

- Git Branch icon + Git Branch icon

What is a Git Branch?

A Git branch is a separate line of development in a project. It allows you to work on features or fixes without affecting the main codebase, making it easier to manage changes and collaborate with others. From a415d191a323f69100d9236bde7c33d23740cffe Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 16:09:17 +0200 Subject: [PATCH 3/7] Update index.html --- Wireframe/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 7431ee161..ef94344f1 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -29,7 +29,6 @@

What is a Wireframe?

Read more about wireframes
-
Git Branch icon

What is a Git Branch?

From e068476d668954861f667516507d56870a83a035 Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 16:11:33 +0200 Subject: [PATCH 4/7] Update style.css --- Wireframe/style.css | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..af05110d4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,7 +18,7 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, var(--color) 5%, rgb(207, 16, 16)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -87,3 +87,21 @@ article { grid-column: span 3; } } + +header { + background-color: #f2f2f2; + color: black; + padding: var(--space); + border-bottom: var(--line); + text-align: center; + position: sticky; + top: 0; + z-index: 1; +} +footer { + background-color: #f2f2f2; + color: black; + padding: var(--space); + width: 100%; + border-top: var(--line); +} From 34bcb2575f45dcb474cbcf02ffa9b2cec75ad455 Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 22:20:59 +0200 Subject: [PATCH 5/7] Update style.css --- Wireframe/style.css | 43 +++++++++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index af05110d4..7a72af768 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -30,11 +30,16 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + margin: 0; + padding: 0; } a { padding: var(--space); border: var(--line); max-width: fit-content; + display: inline-block; + text-decoration: none; + color: inherit; } img, svg { @@ -62,12 +67,16 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 10); + padding: var(--space); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { - grid-column: span 2; - } +} +} +main > article:first-child { + grid-column: span 2; } /* ====== Article Layout ====== Setting the rules for how elements are placed in the article. @@ -76,16 +85,20 @@ Keeping things orderly and separate is the key to good, simple CSS. */ article { border: var(--line); - padding-bottom: var(--space); + padding-bottom: calc(var(--space) * 3); text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + background-color: white; + color: black; +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: span 3; } header { @@ -99,9 +112,19 @@ header { z-index: 1; } footer { + position: fixed; + bottom: 0; background-color: #f2f2f2; color: black; padding: var(--space); width: 100%; border-top: var(--line); + text-align: center; + z-index: 1; +} + +body::after { + content: ""; + display: block; + height: calc(var(--space) * 8); } From 8133c0766b112f62b47ec2de13d1b7ca43de69ab Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 22:23:14 +0200 Subject: [PATCH 6/7] Update style.css --- Wireframe/style.css | 61 +++++++++++---------------------------------- 1 file changed, 15 insertions(+), 46 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 7a72af768..8334d9ebc 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,21 +1,4 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - 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%, rgb(207, 16, 16)); @@ -24,8 +7,8 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + + body { background: var(--paper); color: var(--ink); @@ -33,6 +16,7 @@ body { margin: 0; padding: 0; } + a { padding: var(--space); border: var(--line); @@ -41,31 +25,14 @@ a { text-decoration: none; color: inherit; } + img, svg { width: 100%; object-fit: cover; } -/* ====== 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 { max-width: var(--container); margin: 0 auto calc(var(--space) * 10); @@ -74,15 +41,12 @@ main { grid-template-columns: 1fr 1fr; gap: var(--space); } -} + main > article: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: calc(var(--space) * 3); @@ -101,6 +65,7 @@ article > img { grid-column: span 3; } + header { background-color: #f2f2f2; color: black; @@ -111,6 +76,8 @@ header { top: 0; z-index: 1; } + + footer { position: fixed; bottom: 0; @@ -123,8 +90,10 @@ footer { z-index: 1; } + body::after { content: ""; display: block; height: calc(var(--space) * 8); } + From 77495abf67ab5cd3c0840265c319771f947124f6 Mon Sep 17 00:00:00 2001 From: blackoutisback Date: Fri, 6 Jun 2025 22:27:46 +0200 Subject: [PATCH 7/7] Update index.html --- Wireframe/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index ef94344f1..c885379e5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -12,7 +12,6 @@

Wireframe

Learn about README files, wireframes, and Git branches

-
README file icon

What is a README file?