diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d7df1b45c 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..f434f6ff1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,73 +17,162 @@ 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; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + --ink: #111; + --line: #222; + --muted: #6a6a6a; + --bg: #fafafa; + --card: #ffffff; + --accent: #111; +} + +* { + box-sizing: border-box; +} +html, body { - background: var(--paper); + margin: 0; + padding: 0; +} +body { + font-family: + "Inter", + system-ui, + -apple-system, + "Segoe UI", + Roboto, + Arial, + sans-serif; color: var(--ink); - font: var(--font); + background: var(--bg); + line-height: 1.55; + padding-bottom: 70px; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +.container { + max-width: 920px; + margin: 0 auto; + padding: 0 16px 48px; } -img, -svg { - width: 100%; - object-fit: cover; + +/* Header matches the sketchy title style */ +.page-hero { + text-align: center; + padding: 28px 16px 8px; +} + +.page-subtitle { + font-family: "Kalam", cursive; + color: var(--muted); + font-size: 14px; + margin: 0; + letter-spacing: 0.5px; } -/* ====== 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; + +/* Cards */ +.card { + background: var(--card); + border: 2px solid var(--line); + border-radius: 2px; + margin: 18px 0; + overflow: hidden; } -footer { - position: fixed; - bottom: 0; + +.card__media { + position: relative; + height: 240px; + border-bottom: 2px solid var(--line); +} +.card--featured .card__media { + height: 280px; +} + +.card__body { + padding: 16px 20px 20px; + display: flex; + flex-direction: column; + height: 100%; +} +.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: 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; } -/* ====== 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 { + +/* Two-column grid for the lower row */ +.grid { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + gap: 22px; + margin-top: 22px; } -/* ====== 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; + +.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 { + 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; + background: var(--bg); +} + +/* Responsiveness */ +@media (max-width: 780px) { + .grid { + grid-template-columns: 1fr; } - > img { - grid-column: span 3; + .card__media { + height: 200px; } } + +.card__media img { + width: 100%; + height: 220px; + object-fit: cover; + display: block; +} + +.page-title { + font-family: "Kalam", cursive; + font-size: 42px; + margin: 12px 0 4px; + letter-spacing: 1px; + text-transform: uppercase; +}