diff --git a/Wireframe/branch.svg b/Wireframe/branch.svg new file mode 100644 index 000000000..2ccaf7d20 --- /dev/null +++ b/Wireframe/branch.svg @@ -0,0 +1,11 @@ + + + + Layer 1 + + + + + BRANCH? + + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..67e66659e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,67 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe Solution + + + + + +
+

Webpage Explanation for Key Concept Questions

+ +
+ +
+
+ Illustration of a README markdown document +

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + A README file is the foundational documentation for a software, dataset, or coding project. It serves as a + project's "front door," designed to help users quickly understand what the project does, how to install and use + it, and how to contribute.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + + + + + + + + \ No newline at end of file diff --git a/Wireframe/readme.svg b/Wireframe/readme.svg new file mode 100644 index 000000000..868317bf7 --- /dev/null +++ b/Wireframe/readme.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + README? + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4d295e05e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -15,7 +15,9 @@ As well as useful links to learn more */ 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 ====== */ + + + ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); @@ -24,6 +26,7 @@ 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 { @@ -31,29 +34,34 @@ body { color: var(--ink); font: var(--font); } -a { + +.hyperlink { padding: var(--space); border: var(--line); max-width: fit-content; } + 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; + margin-bottom: calc(var(--space) * 2); +} + +#branch { + margin-bottom: calc(var(--space) * 4); } + /* ====== 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 @@ -62,28 +70,57 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*: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. */ +h1 { + text-align: center; +} + +ul { + justify-content: center; + display: flex; + gap: var(--space) +} + article { border: var(--line); padding-bottom: var(--space); text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + margin-bottom: calc(var(--space) * 2); + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } -} + + + h2 { + text-align: left; + vertical-align: top; + } + + td { + padding: var(--space); + max-width: fit-content; + vertical-align: top; + } +} \ No newline at end of file diff --git a/Wireframe/wireframe.svg b/Wireframe/wireframe.svg new file mode 100644 index 000000000..abe5ed549 --- /dev/null +++ b/Wireframe/wireframe.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + WIREFRAME? + + \ No newline at end of file