diff --git a/Wireframe/CYF-Git-Branch-Example.png b/Wireframe/CYF-Git-Branch-Example.png new file mode 100644 index 000000000..7e0f5df78 Binary files /dev/null and b/Wireframe/CYF-Git-Branch-Example.png differ diff --git a/Wireframe/README-File-Example.jpg b/Wireframe/README-File-Example.jpg new file mode 100644 index 000000000..dae9d53e4 Binary files /dev/null and b/Wireframe/README-File-Example.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..02a37636d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,106 @@ - Wireframe + Wireframe To Web Code
-

Wireframe

+

Wireframe To Web Code

+

- This is the default, provided code and no changes have been made yet. + Wireframes, README & Git branches, explained.

+
- -

Title

+ Picture of an example wireframe + +

Wireframe

+

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe is a plan outlining the basic structure of the elements of a website, webpage or digital interface - + its purpose is to give the viewer a rough idea of how content will be displayed and function in the final product, + such as banners, navigation bars, buttons, images, and articles. + In essence, a wireframe is the architectural "blueprint" of a web document. +

+ + + READ MORE + +
+ +
+ Picture of an example README file + +

README

+ +

+ The purpose of a README file is to provide important information for a project or piece of software. + It can include information such as: +

+ + + +

+ README files are commonly written in Markdown (.md), plaintext format. +

+ + + READ MORE + +
+ +
+ Picture of CYF Example Git Branch Diagram + +

Git Branches

+ +

+ In Git, repositories are made up of "branches."

- Read more + + + + + READ MORE +
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..97d4dbafb 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -21,7 +21,7 @@ As well as useful links to learn more */ --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 2px solid; --container: 1280px; } /* ====== Base Elements ====== @@ -31,16 +31,30 @@ body { color: var(--ink); font: var(--font); } -a { +a {font-family: Arial; + font-weight: 600; + text-decoration: none; + color: black; padding: var(--space); border: var(--line); max-width: fit-content; } img, -svg { +svg { margin: auto; width: 100%; object-fit: cover; } + +/* ====== Text Formatting ===== */ + +h1, h2, a { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} +p, ul{ + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -49,10 +63,15 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + +header { + text-align: center; +} + footer { - position: fixed; - bottom: 0; text-align: center; + font-weight: 700; + border-top-style: solid; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -65,10 +84,13 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { - grid-column: span 2; - } } + + /* Moved outside of main {} to fix parsing error */ + main > *: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. @@ -77,13 +99,16 @@ Keeping things orderly and separate is the key to good, simple CSS. article { border: var(--line); padding-bottom: var(--space); - text-align: left; + text-align: justify; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } +} + + /* Moved outside of article {} to fix parsing error */ + article > * { + grid-column: 2/3; +} +/* Moved outside of article {} to fix parsing error */ + article > img { + grid-column: span 3; }