diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..ac5d1aad6 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -53,3 +53,9 @@ They ensure your code is reliable, maintainable, and presents a polished, credib - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) - [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) - [Format Code and Make Logical Commits in VS Code](../practical_guide.md) + +### Images + +- [Keeping your README Fresh and Engaging](https://microsoft.github.io/genaiscript/blog/readme-maintenance/) +- [Starting Guide to Wireframe Design – 7 Steps & 3 Tools](https://www.oursky.com/blogs/starting-guide-to-wireframe-design---7-steps-3-tools/) +- [Mastering Git Branches: From Creation to Conflict Resolution](https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339) \ No newline at end of file diff --git a/Wireframe/assets/git-branch-small.webp b/Wireframe/assets/git-branch-small.webp new file mode 100644 index 000000000..cf740e0d7 Binary files /dev/null and b/Wireframe/assets/git-branch-small.webp differ diff --git a/Wireframe/assets/git-branch.webp b/Wireframe/assets/git-branch.webp new file mode 100644 index 000000000..02dfcb7c2 Binary files /dev/null and b/Wireframe/assets/git-branch.webp differ diff --git a/Wireframe/assets/readme-small.webp b/Wireframe/assets/readme-small.webp new file mode 100644 index 000000000..0bc1ffc77 Binary files /dev/null and b/Wireframe/assets/readme-small.webp differ diff --git a/Wireframe/assets/readme.webp b/Wireframe/assets/readme.webp new file mode 100644 index 000000000..fc2fd6165 Binary files /dev/null and b/Wireframe/assets/readme.webp differ diff --git a/Wireframe/assets/wireframe_design-small.webp b/Wireframe/assets/wireframe_design-small.webp new file mode 100644 index 000000000..805bc86a2 Binary files /dev/null and b/Wireframe/assets/wireframe_design-small.webp differ diff --git a/Wireframe/assets/wireframe_design.webp b/Wireframe/assets/wireframe_design.webp new file mode 100644 index 000000000..2b6ce185a Binary files /dev/null and b/Wireframe/assets/wireframe_design.webp differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..964e7f19d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,32 +1,121 @@ - + + Wireframe +
-

Wireframe

+

GitHub Web Project Essentials

- This is the default, provided code and no changes have been made yet. + A quickstart guide to building, documenting and maintaining web projects + with GitHub.

-
- -

Title

-

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

+ Keeping your README fresh and engaging +

What Is the Purpose of a README File

+

+ A good README file serves as a project's "front door," acting as a + crucial piece of documentation that explains what an application does, + why the specific technologies were chosen, and how it differentiates a + high-quality project to both users and potential employers. At a + minimum, an effective layout must include the project title, a + descriptive overview, clear instructions on installation and usage, + collaborator credits, and an appropriate open-source license.

- Read more + Read more +
+
+ Wireframe design example +

What Is the Purpose of a Wireframe?

+

+ A wireframe is a simplified visual guide used in web and app design to + outline the structure, layout, and functionality of a digital + interface. It focuses on arrangement rather than aesthetics, showing + where content, navigation, and interactive elements will be placed. + This skeletal structure helps designers and clients visualize the user + experience and make decisions about layout and functionality early in + the development process, before time and resources are invested in + detailed visual design. +

+ Read more +
+
+ Git branches visual concept +

What Is a Branch in Git?

+

+ In version control systems like Git, a branch is a separate line of + development that diverges from the main project timeline. It allows + developers to work on new features, bug fixes, or experiments in + isolation without affecting the stable, primary version of the + codebase. When changes on a branch are complete and tested, they can + be merged back into the main line, integrating the updates seamlessly. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f9f50aa33 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,13 +17,15 @@ As well as useful links to learn more */ https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); + --color: oklch(0.6 0.25 20); + --paper: oklch(0.98 0.01 20); --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 */ body { @@ -31,29 +33,87 @@ body { color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + img, svg { width: 100%; object-fit: cover; } + +.article-img { + aspect-ratio: 16 / 9; +} + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + text-align: center; + padding: calc(var(--space) * 2) var(--space); +} + main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: calc(var(--space) * 8); + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + + > *:first-child { + grid-column: span 2; + } } + footer { position: fixed; bottom: 0; + left: 0; + right: 0; text-align: center; + background: var(--paper); + border-top: var(--line); + padding: var(--space) 0; + + .red-text { + color: #c92a2a; + } + + .footer-link { + padding: 0; + border: none; + display: inline; + color: inherit; + text-decoration: underline; + font-weight: bold; + text-decoration-color: #c92a2a; + transition: + color 0.2s ease, + text-decoration-color 0.2s ease; + + .red-text { + color: #c92a2a; + transition: color 0.2s ease; + } + + &:hover { + color: #c92a2a; + text-decoration-color: currentColor; + + .red-text { + color: var(--ink); + } + } + } } + /* ====== 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,14 +121,12 @@ Play with the options that come up. https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + +.card:not(#main-article) { + grid-row: span 4; + grid-template-rows: subgrid; } + /* ====== 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. @@ -80,10 +138,37 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); + row-gap: var(--space); + > * { grid-column: 2/3; + margin: 0; } + > img { grid-column: span 3; } } + +.article-link { + text-decoration: none; + color: white; + background-color: #d9383a; + border: 1px solid #d9383a; + border-radius: 4px; + text-align: center; + font-weight: bold; + text-transform: uppercase; + font-size: 0.85rem; + letter-spacing: 0.05em; + align-self: start; + transition: + background-color 0.2s ease, + border-color 0.2s ease; +} + +.article-link:hover { + background-color: #a61e22; + border-color: #a61e22; + color: white; +}