diff --git a/index.html b/index.html index fa5e1e7..901166b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Chelsea Long - + diff --git a/styles/JeffBrandes.webp b/styles/JeffBrandes.webp new file mode 100644 index 0000000..39b8b11 Binary files /dev/null and b/styles/JeffBrandes.webp differ diff --git a/styles/RonDeSantis.webp b/styles/RonDeSantis.webp new file mode 100644 index 0000000..1e5379e Binary files /dev/null and b/styles/RonDeSantis.webp differ diff --git a/styles/SouthDakota.webp b/styles/SouthDakota.webp new file mode 100644 index 0000000..02980ab Binary files /dev/null and b/styles/SouthDakota.webp differ diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..8395128 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,130 @@ +html, body { + font-size: 20px; + line-height: 1.3; + font-weight: 400; + font-family: "input-mono", monospace; + background-color: white; + margin: 1rem; + color: black; +} + +main { + max-width: 800px; + margin: 0 auto; +} + +nav ul { + font: "input-mono", monospace; + font-weight: 800; + list-style-type: none; + margin: 0.5rem; + padding: 0.5rem; + text-align: right; +} + +nav li { + display: inline-block; + padding: 0; + font-size: 1rem; +} + +nav a { + color: black; + text-decoration: underline; + padding: 0; +} + +nav a:hover { + color: rgb(0, 21, 253); + text-decoration: underline; +} + +h1 { + font-size: 2rem; + font-weight: 800; +} + +h2 { + font-size: 1.5rem; +} + +a { + color: black; + text-decoration: underline; +} + +a:hover { + color: rgb(0, 21, 253); + text-decoration: underline; +} + +figure { + margin: 0; +} + +figcaption { + font: 0.5rem; + font-weight: 300; + line-height: 1.3; + margin: 1rem; + color: black; +} + +.highlight { + font-style: normal; + padding: 0 5px; + font-weight: 800; + background-color: yellowgreen; +} + +.highlight a { + color: black; + text-decoration: underline; + padding: 0; +} + +.highlight a:hover { + color: rgb(0, 21, 253); + text-decoration: underline; +} + +img { + width: 100%; + +} +article { + border-bottom: 1px solid black; + margin-bottom: 1rem; + clear: both; + overflow: hidden; +} + +article a { + display: block; + text-decoration: none; + cursor: pointer; +} + +article a:hover { + text-decoration: none; +} + +article a:hover img { + /* filter: hue-rotate(90deg) saturate(200%) contrast(200%); */ + filter: grayscale(100%); +} + +.floatLeft figcaption { + font-size: 10px; + font-style: italic; + margin: 0; +} + +@media (min-width: 850px) { + .floatLeft { + float: left; + width: 50%; + margin: 1rem 1rem 1rem 0; + } +} + diff --git a/styles/simple-grid.css b/styles/simple-grid.css new file mode 100644 index 0000000..c31a64f --- /dev/null +++ b/styles/simple-grid.css @@ -0,0 +1,174 @@ +/** +*** SIMPLE GRID +*** (C) ZACH COLE 2016 +*** +*** Modified by Soo Oh 2022 +**/ + +html, +body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0; + font-size: 100%; +} + +.container { + width: 90%; + margin-left: auto; + margin-right: auto; +} + +.row { + position: relative; + width: 100%; +} + +.row [class^="col"] { + float: left; + margin: 0.5rem 2%; + min-height: 0.125rem; +} + +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + width: 96%; +} + +.col-1-sm { + width: 4.33%; +} + +.col-2-sm { + width: 12.66%; +} + +.col-3-sm { + width: 21%; +} + +.col-4-sm { + width: 29.33%; +} + +.col-5-sm { + width: 37.66%; +} + +.col-6-sm { + width: 46%; +} + +.col-7-sm { + width: 54.33%; +} + +.col-8-sm { + width: 62.66%; +} + +.col-9-sm { + width: 71%; +} + +.col-10-sm { + width: 79.33%; +} + +.col-11-sm { + width: 87.66%; +} + +.col-12-sm { + width: 96%; +} + +.row::after { + content: ""; + display: table; + clear: both; +} + +.hidden-sm { + display: none; +} + +@media only screen and (min-width: 33.75em) { /* 540px */ + .container { + width: 80%; + } +} + +@media only screen and (min-width: 45em) { /* 720px */ + .col-1 { + width: 4.33%; + } + + .col-2 { + width: 12.66%; + } + + .col-3 { + width: 21%; + } + + .col-4 { + width: 29.33%; + } + + .col-5 { + width: 37.66%; + } + + .col-6 { + width: 46%; + } + + .col-7 { + width: 54.33%; + } + + .col-8 { + width: 62.66%; + } + + .col-9 { + width: 71%; + } + + .col-10 { + width: 79.33%; + } + + .col-11 { + width: 87.66%; + } + + .col-12 { + width: 96%; + } + + .hidden-sm { + display: block; + } +} + +@media only screen and (min-width: 60em) { /* 960px */ + .container { + width: 75%; + max-width: 60rem; + } +}