The essential tool to creating perfect web designs.
+
+
+
+
+
The purpose of a README file
+
+ A README file is the first source of information to guide
+ anyone who visits your repository. What the code does, how
+ to contribute, or how to install and use it.
+
+ 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.
+
+ A git branch is a copy of the code in a git repository.
+ Branches are created so that developers can work seperately
+ on specific features. Once a feature is completed it is
+ merged into main. If the creation of a feature is not
+ sucessful, for example there are too many bugs, the branch
+ can be delete without affecting the main branch.
+
+ Read more
+
+
+
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..0aac7b044 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -16,43 +16,73 @@ As well as useful links to learn more */
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
+
+/* a basic reset to user agent stylesheets */
+* {
+ 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;
+ 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/
*/
main {
- max-width: var(--container);
- margin: 0 auto calc(var(--space) * 4) auto;
+ 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;
+ 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.
@@ -62,12 +92,12 @@ 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;
- }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--space);
+ > *:first-child {
+ grid-column: span 2;
+ }
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
@@ -75,15 +105,15 @@ 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;
- }
- > img {
- grid-column: span 3;
- }
+ border: var(--line);
+ padding-bottom: var(--space);
+ text-align: left;
+ display: grid;
+ grid-template-columns: var(--space) 1fr var(--space);
+ > * {
+ grid-column: 2/3;
+ }
+ > img {
+ grid-column: span 3;
+ }
}
-