tomit4/notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

♻️ Reformatted notes

Browse source
This commit is contained in:
z3rOR0ne 2023-02-05 00:55:35 -08:00
parent b9f2e01d22
commit d19b025e47
1 changed files with 26 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

49
coder_coder.css
View file

@ -2,7 +2,9 @@
/* This document contains boilerplate css tips/tricks /* This document contains boilerplate css tips/tricks
* garnered from the youtuber, coder_coder's youtube series, "Building a * garnered from the youtuber, coder_coder's youtube series, "Building a
* portfolio website with HTML & CSS 4 Part Series */ * portfolio website with HTML & CSS 4 Part Series
* https://www.youtube.com/@TheCoderCoder
* */
/* :root */ /* :root */
/* custom css variables should be set in root so they do not have to redefined /* custom css variables should be set in root so they do not have to redefined
@ -43,7 +45,7 @@ html {
font-size: 100%; font-size: 100%;
} }
/* * */ /* * */
/* box-sizing is inhereted from the html element */ /* box-sizing is inherited from the html element */
*, *,
*::before, *::before,
**::after { **::after {
@ -97,18 +99,18 @@ a:hover {
/* HEADER */ /* HEADER */
.header { .header {
margin-top: 20px; margin-top: 20px;
} }
.header__nav { .header__nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
/* gap: row-gap column-gap */ /* gap: row-gap column-gap */
/* note the use of px here, this is intentionally keeping the gap inbetween /* note the use of px here, this is intentionally keeping the gap inbetween
* the header__nav children at these fixed px amounts*/ * the header__nav children at these fixed px amounts*/
gap: 20px 25px; gap: 20px 25px;
} }
/* uses fluid-typography-calculator: https://royalfig.github.io/fluid-typography-calculator/ */ /* uses fluid-typography-calculator: https://royalfig.github.io/fluid-typography-calculator/ */
@ -127,7 +129,8 @@ a:hover {
} }
/* .header__social, */ /* .header__social, */
.header__social svg { /* she got stuck here for a while... */ .header__social svg {
/* she got stuck here for a while... */
/* display: inline-block; */ /* display: inline-block; */
display: block; display: block;
/* outline: 2px solid red; */ /* outline: 2px solid red; */
@ -144,17 +147,17 @@ a:hover {
} }
@media (min-width: 37.5em) { @media (min-width: 37.5em) {
/* 600px */ /* 600px */
.header__nav { .header__nav {
justify-content: flex-start; justify-content: flex-start;
align-items: center; /* vertically centered */ align-items: center; /* vertically centered */
text-align: left; text-align: left;
gap: 32px; gap: 32px;
} }
.header__home { .header__home {
/* flex: 1 0 0%; */ /* flex: 1 0 0%; */
flex: 1; flex: 1;
margin-inline-end: auto; margin-inline-end: auto;
} }
} }