diff --git a/Wireframe/git-branch-image.png b/Wireframe/git-branch-image.png new file mode 100644 index 000000000..7f0094b5c Binary files /dev/null and b/Wireframe/git-branch-image.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..18eb73887 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,60 @@
-

Wireframe

+

The Utility of Definitions

- This is the default, provided code and no changes have been made yet. + And its pedagogical implications for the teaching of web development.

- -

Title

+ Illustration of a README document +

What is a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains what a project is, how to use it, and any + important setup instructions.

- Read more + + Read more + +
+ +
+ Illustration of a website wireframe +

What is a wireframe?

+

+ A wireframe is a simple plan for a webpage. It shows where the main + content, images, and sections should go before the final design is + added. +

+ + Read more + +
+ +
+ Illustration of a Git branch diagram +

What is a branch in Git?

+

+ A branch is a separate version of a project where developers can make + changes without affecting the main version straight away. +

+ + Read more +
+ diff --git a/Wireframe/readme-image.png b/Wireframe/readme-image.png new file mode 100644 index 000000000..753e51d5b Binary files /dev/null and b/Wireframe/readme-image.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..cde164725 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,43 +17,97 @@ As well as useful links to learn more */ 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; + --paper: white; + --ink: black; + --muted: #555555; + --font: 100%/1.5 Arial, Helvetica, sans-serif; + --space: clamp(10px, 10px + 2vw, 18px); + --line: 2px solid black; + --container: 1000px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +* { + box-sizing: border-box; +} + body { + margin: 0; + padding-bottom: 90px; background: var(--paper); color: var(--ink); font: var(--font); } + a { - padding: var(--space); + display: inline-block; + padding: 10px 16px; border: var(--line); + color: var(--ink); + font-weight: bold; + text-decoration: none; max-width: fit-content; } + +a:hover { + background: var(--ink); + color: var(--paper); +} + img, svg { + display: block; width: 100%; + height: 240px; object-fit: cover; + border-bottom: var(--line); } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + max-width: var(--container); + margin: 40px auto 32px auto; + padding: 0 var(--space); + text-align: center; +} + +header h1 { + margin: 0 0 8px; + font-size: 2.5rem; +} + +header p { + margin: 0; + color: var(--muted); + font-weight: bold; +} + main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding: 0 var(--space); } + footer { position: fixed; bottom: 0; + left: 0; + width: 100%; + padding: 20px var(--space); + border-top: var(--line); + background: var(--paper); text-align: center; } + +footer p { + margin: 0; + color: var(--muted); +} + /* ====== 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 @@ -65,10 +119,16 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { - grid-column: span 2; - } } + +main > *:first-child { + grid-column: span 2; +} + +main > *:first-child img { + height: 320px; +} + /* ====== 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. @@ -76,14 +136,48 @@ 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; +} + +article > * { + grid-column: 2 / 3; +} + +article > img { + grid-column: span 3; +} + +article h2 { + margin: var(--space) 0 8px; +} + +article p { + margin: 0 0 var(--space); + color: var(--muted); +} + +article a { + margin-bottom: var(--space); +} + +@media (max-width: 700px) { + main { + grid-template-columns: 1fr; } - > img { - grid-column: span 3; + + main > *:first-child { + grid-column: auto; + } + + img, + svg, + main > *:first-child img { + height: 220px; + } + + header h1 { + font-size: 2rem; } } diff --git a/Wireframe/wireframe-image.png b/Wireframe/wireframe-image.png new file mode 100644 index 000000000..6176dd0f5 Binary files /dev/null and b/Wireframe/wireframe-image.png differ