From c8db9f94f54f4b1cb0f1423c9a13c7712a90a6db Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Fri, 22 Mar 2024 04:56:56 +0000 Subject: wip --- style.css | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 115 insertions(+), 22 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 9300f21..3880ce7 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,104 @@ -.wrapper { +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + font-family: 'Franklin'; + margin: 0; + padding: 0; +} + +@font-face { + font-family: 'Franklin'; + src: url(LibreFranklin-VariableFont_wght.ttf); +} + +body { + background: rgb(224, 221, 217, 0.27); +} + +@media (min-width: 600px) { + .wrapper { grid-template-columns: 3fr 1fr; } + .right-section p { font-size: 1.4em; } +} + + +.container { + max-width: 1200px; + margin: 0 auto; display: grid; - /* height: 200px; */ - grid-template-columns: 3fr 1fr; - gap: 10px; + gap: 0.2rem; } -.child { - background: white; - padding: 1.2em; - border: 1px solid; - border-color: lightgray; - border-radius: 5px; +.cell { + } -.left-section { +.right-section { background: white; - padding: 1.2em; - border: 1px solid; + margin-right: 20px; + padding-left: 50px; + padding-top: 20px; + border: 0px solid; border-color: lightgray; border-radius: 5px; - margin-bottom: 10px; +} + +/* .left-section { */ +/* background: white; */ +/* /1* background: rgb(h24, 221, 217, 0.27); *1/ */ +/* padding-left: 50px; */ +/* padding-top: 20px; */ +/* padding-bottom: 50px; */ +/* border: 0px solid; */ +/* border-color: lightgray; */ +/* border-radius: 5px; */ +/* margin-bottom: 10px; */ +/* margin-left: 20px; */ +/* } */ + +.right-section p { + color: rgb(37, 95, 140, 0.8); + font-size: 1.2rem; + padding-left: 15px; +} + +q { + display: inline; +} + + +q:before { + content: open-quote; +} + +q:after { + content: close-quote; +} + +img { + border-radius: 20px; + box-shadow: 5px 10px 2px lightgray; + max-width: 400px; + height: auto; + width: 100%; +} + + +.left-section-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin: 10px 10px 10px 0px; +} + +.left-section-grid p { + font-size: 1.6rem; + color: darkgray; + padding-right: 50px; + text-align: right; } .inner { @@ -27,14 +106,16 @@ grid-template-columns: 1fr 1fr; } -@font-face { - font-family: 'OpenSans'; - src: url(OpenSans-VariableFont_wdth,wght.ttf); + +a { + font-size: inherit; + color: #394f49; } -* { - font-size: 12pt; - font-family: 'OpenSans'; +.divider { + color: #e0d9de; + border-width: 1; + margin: 10px 20px 20px 0px; } header { @@ -55,18 +136,30 @@ header { .info { margin-left: auto; margin-right: auto; + color: darkgray; text-align: center; } +.info p { + font-size: 1.1rem; +} + .jumplist { + font-size: 1.1rem; display: grid; grid-template-columns: repeat(3, 1fr); + margin-top: 20px; } h1 { - color: green; - font-size: 2.4em; + color: #657c76; + font-size: 2.0rem; +} + +h2 { + color: #4e8273; + font-size: 1.8rem; } -- cgit v1.2.3