diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..9e822e343 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,60 @@ - - - - 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. -

- Read more -
-
- - + + + + Wireframe + + + +
+

Welcome to Intro to Programming

+

+ Here we will learn about some introductory web development + concepts. +

+
+
+
+ +

The purpose of a README file

+

+ A README file is text file often included with a software + program or code package which provides the reader with + information they may need to use the software, such + installation instructions. +

+ Read more about README files +
+
+ +

The purpose of a wireframe

+

+ A wireframe is used to express the layout of a visual medium + such as a newspaper, or web page. It helps designers and + programmers to get a simple overview of a design. +

+ Read more about wireframing +
+
+ +

What is a Git branch

+

+ A git branch is a copy of the code in a git repository. + Branches are created so that developers can work separately + on specific features. Once a feature is completed it is + merged into main. If the creation of a feature is not + successful, for example there are too many bugs, the branch + can be deleted without affecting the main branch. +

+ Read more about Git +
+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..a3a0ec998 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,31 +16,50 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +* { + margin: 0; + box-sizing: border-box; +} + :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: 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 */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: var(--paper); + color: var(--ink); + font: var(--font); + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } img, svg { width: 100%; object-fit: cover; } +p { + margin-bottom: 0.5rem; +} +h1 { + margin-bottom: 1rem; +} +h2 { + margin-bottom: 0.8rem; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -48,11 +67,20 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + min-height: 0; +} +header { + text-align: center; } footer { position: fixed; bottom: 0; text-align: center; + border-top: 2px solid rgb(158, 158, 158); + padding: 1rem; + min-width: 100%; + background-color: rgb(54, 53, 53); + color: white; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.