diff --git a/Wireframe/assets/gitflow.webp b/Wireframe/assets/gitflow.webp new file mode 100644 index 000000000..33528600d Binary files /dev/null and b/Wireframe/assets/gitflow.webp differ diff --git a/Wireframe/assets/reademe_file.webp b/Wireframe/assets/reademe_file.webp new file mode 100644 index 000000000..be8266a4d Binary files /dev/null and b/Wireframe/assets/reademe_file.webp differ diff --git a/Wireframe/assets/wireframe.webp b/Wireframe/assets/wireframe.webp new file mode 100644 index 000000000..c7beb5663 Binary files /dev/null and b/Wireframe/assets/wireframe.webp differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..c0533ad39 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,77 @@ - + - - - - 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 + + + +
+

CYF Blog

+

Your source of programming minutiae

+
+
+
+ Example of a readme file. On the left we see the file open in the editor and written in markdown, on the right we see a preview of what the file looks like openend in a web browser +

Read me if you want to learn about README

+

+ A README file contains descriptive information about the + content of a directory in which the file is located. The + scope of the information generally includes the files of the + directory, and may include descendant directories, or even + the full directory tree. +

+ Learn how to write a README file +
+
+ Four wireframe sketches for a mobile app, lined up next to each other +

Wireframes: an essential blueprint

+

+ A website wireframe is a visual guide that represents the + skeletal framework of a website. It depicts the page layout + or arrangement of the website's content, including interface + elements and navigational systems, and how they work + together. +

+ Create wireframe dynamically +
+
+ A diagram showing an example of different git branches types: master branch, develop branch, and two feature branches +

Branching for dummies

+

+ In Git and other version control systems, branching is + creating a copy of a project, file, or directory so changes + can be made independently and in parallel. A branch is like + a separate workspace where the user can try ideas and apply + changes without affecting the main project. Developers can + create branches from any branch to work on features, fixes, + or experiments. +

+ Learn to branch +
+
+ + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..437cee521 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,42 +17,69 @@ 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; + --paper: oklch(0.9 0.03 290); + --ink: oklch(0.2 0.09 270); + --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 */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background: var(--paper); + color: var(--ink); + font: var(--font); } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space) 20px; + border: var(--line); + border-radius: 50px; + margin-top: auto; + width: fit-content; + background-color: var(--ink); + color: var(--paper); + line-height: 1; } + img, svg { - width: 100%; - object-fit: cover; + width: 100%; + object-fit: cover; + border-radius: 20px 20px 0 0; + min-height: 400px; + margin-bottom: var(--space); } /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + background-color: var(--ink); + color: var(--paper); + text-align: center; + padding: var(--space); +} main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + max-width: var(--container); + margin: calc(var(--space) * 3) auto calc(var(--space) * 6) auto; } footer { - position: fixed; - bottom: 0; - text-align: center; + position: fixed; + width: 100vw; + background-color: var(--ink); + color: var(--paper); + bottom: 0; + text-align: center; + padding: var(--space) 0; +} +h1 { + font-size: 4rem; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,12 +89,13 @@ 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; + justify-content: center; + gap: var(--space); + > *:first-child { + grid-column: span 2; + } } /* ====== Article Layout ====== Setting the rules for how elements are placed in the article. @@ -75,15 +103,28 @@ 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); + border-radius: 20px; + padding-bottom: var(--space); + text-align: left; + display: grid; + gap: var(--space); + grid-template-columns: var(--space) 1fr var(--space); + grid-template-rows: auto auto 1fr auto; + > * { + grid-column: 2/3; + } + > img { + grid-column: span 3; + } +} + +@media only screen and (max-width: 768px) { + main { + display: grid; + grid-template-columns: 1fr; + > *:first-child { + grid-column: span 1; + } + } }