diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..64c482a88 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,30 +3,80 @@ - Wireframe + Wireframe to Web Code + -
-

Wireframe

+
+

Wireframe to Web Code

- This is the default, provided code and no changes have been made yet. + A simple webpage built from a wireframe using semantic HTML and CSS.

+
-
- -

Title

-

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

- Read more -
+
+
+ +

What is the purpose of a README file?

+

+ A README is the first place someone looks when they open a project. + It explains what the project does, how to run it, and how to + contribute. A clear README reduces confusion and makes collaboration + easier. +

+ + Read more about README files + +
+ +
+ +

What is the purpose of a wireframe?

+

+ A wireframe is a simple layout sketch that shows where key parts of + a page will go before design details are added. It helps you plan + structure, spacing, and components so you can build the layout + correctly first. +

+ + Read more about wireframes + +
+ +
+ +

What is a branch in Git?

+

+ A branch is an independent line of work in a Git repository. It lets + you make changes safely without affecting the main version. When + your work is ready, it can be reviewed and merged back through a + pull request. +

+ + Read more about Git branches + +
+
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..35fd61da1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,12 +1,12 @@ /* 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 +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 + 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 @@ -18,42 +18,92 @@ 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(--paper) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; + + /* Used to keep content visible above the fixed footer */ + --footer-height: calc(var(--space) * 4); } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +*, +*::before, +*::after { + box-sizing: border-box; +} + body { + margin: 0; background: var(--paper); color: var(--ink); font: var(--font); } + a { + display: inline-block; padding: var(--space); border: var(--line); max-width: fit-content; + color: inherit; } + +/* Clear focus style for keyboard accessibility */ +a:focus-visible { + outline: 3px solid currentColor; + outline-offset: 3px; +} + img, svg { width: 100%; + height: auto; + display: block; object-fit: cover; } -/* ====== Site Layout ====== + +/* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header, main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto; + padding: calc(var(--space) * 2); } + +/* Center the PAGE TITLE and the SUBTITLE (matches wireframe + reviewer feedback) */ +.page-header { + text-align: center; +} + +main { + /* Prevent overlap with fixed footer and give the layout breathing room */ + padding-bottom: calc(var(--footer-height) + (var(--space) * 2)); +} + +/* Footer fixed to bottom of viewport (full width) */ footer { position: fixed; bottom: 0; + left: 0; + right: 0; + + border-top: var(--line); + background: var(--paper); + padding: var(--space); text-align: center; + min-height: var(--footer-height); } + +footer p { + margin: 0; +} + /* ====== 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 @@ -61,29 +111,59 @@ Play with the options that come up. https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ -main { +.articles { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + gap: calc(var(--space) * 2); } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. + +/* Make the first article span both columns (wireframe layout) */ +.articles > *:first-child { + grid-column: 1 / -1; +} + +/* ====== 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, 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; +} + +.article > *, +article > * { + grid-column: 2/3; +} + +.article > img, +article > img { + grid-column: 1 / -1; +} + +/* Optional: improve spacing/readability while keeping the wireframe feel */ +.article h2, +article h2 { + margin: calc(var(--space) * 1.5) 0 var(--space); +} + +.article p, +article p { + margin: 0 0 calc(var(--space) * 1.5); +} + +/* Keep layout readable on small screens */ +@media (max-width: 700px) { + .articles { + grid-template-columns: 1fr; } - > img { - grid-column: span 3; + + .articles > *:first-child { + grid-column: auto; } }