From 1e88c7f1ca7ba8d47ba83a94732b03ef30130006 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Fri, 17 Jan 2025 15:47:56 -0500 Subject: Revert "Complete styling changes - again" This reverts commit 068badb857215f0e10500ddd29a8b335efe3b2bd. --- public/fonts/IBMPlexSans-Bold.woff2 | Bin 0 -> 55396 bytes public/fonts/IBMPlexSans-Italic.woff2 | Bin 0 -> 59468 bytes public/fonts/IBMPlexSans-Regular.woff2 | Bin 0 -> 55380 bytes public/fonts/SofiaSans-Medium.woff2 | Bin 44700 -> 0 bytes public/fonts/SofiaSans-MediumItalic.woff2 | Bin 45952 -> 0 bytes public/fonts/SofiaSans-Regular.woff2 | Bin 41524 -> 0 bytes public/fonts/SofiaSans-SemiBold.woff2 | Bin 44912 -> 0 bytes public/style.css | 318 +++++++++++++++++++++--------- 8 files changed, 223 insertions(+), 95 deletions(-) create mode 100644 public/fonts/IBMPlexSans-Bold.woff2 create mode 100644 public/fonts/IBMPlexSans-Italic.woff2 create mode 100644 public/fonts/IBMPlexSans-Regular.woff2 delete mode 100644 public/fonts/SofiaSans-Medium.woff2 delete mode 100644 public/fonts/SofiaSans-MediumItalic.woff2 delete mode 100644 public/fonts/SofiaSans-Regular.woff2 delete mode 100644 public/fonts/SofiaSans-SemiBold.woff2 (limited to 'public') diff --git a/public/fonts/IBMPlexSans-Bold.woff2 b/public/fonts/IBMPlexSans-Bold.woff2 new file mode 100644 index 0000000..b570504 Binary files /dev/null and b/public/fonts/IBMPlexSans-Bold.woff2 differ diff --git a/public/fonts/IBMPlexSans-Italic.woff2 b/public/fonts/IBMPlexSans-Italic.woff2 new file mode 100644 index 0000000..57523c9 Binary files /dev/null and b/public/fonts/IBMPlexSans-Italic.woff2 differ diff --git a/public/fonts/IBMPlexSans-Regular.woff2 b/public/fonts/IBMPlexSans-Regular.woff2 new file mode 100644 index 0000000..ca64cc5 Binary files /dev/null and b/public/fonts/IBMPlexSans-Regular.woff2 differ diff --git a/public/fonts/SofiaSans-Medium.woff2 b/public/fonts/SofiaSans-Medium.woff2 deleted file mode 100644 index b251a2c..0000000 Binary files a/public/fonts/SofiaSans-Medium.woff2 and /dev/null differ diff --git a/public/fonts/SofiaSans-MediumItalic.woff2 b/public/fonts/SofiaSans-MediumItalic.woff2 deleted file mode 100644 index 4ebf61b..0000000 Binary files a/public/fonts/SofiaSans-MediumItalic.woff2 and /dev/null differ diff --git a/public/fonts/SofiaSans-Regular.woff2 b/public/fonts/SofiaSans-Regular.woff2 deleted file mode 100644 index 4d16f7a..0000000 Binary files a/public/fonts/SofiaSans-Regular.woff2 and /dev/null differ diff --git a/public/fonts/SofiaSans-SemiBold.woff2 b/public/fonts/SofiaSans-SemiBold.woff2 deleted file mode 100644 index c690dcc..0000000 Binary files a/public/fonts/SofiaSans-SemiBold.woff2 and /dev/null differ diff --git a/public/style.css b/public/style.css index 58e63c7..4d8fd13 100644 --- a/public/style.css +++ b/public/style.css @@ -2,147 +2,275 @@ box-sizing: border-box; } -@font-face { - font-family: 'Sofia Sans'; - font-style: normal; - font-weight: normal; - src: url('/public/fonts/SofiaSans-Regular.woff2') format('woff2'); +:root { + --main-color: #228427; } -@font-face { - font-family: 'Sofia Sans'; - font-style: italic; - font-weight: normal; - src: url('/public/fonts/SofiaSans-MediumItalic.woff2') format('woff2'); -} -@font-face { - font-family: 'Sofia Sans'; - font-weight: bold; - src: url('/public/fonts/SofiaSans-SemiBold.woff2') format('woff2'); + +html { + font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif; + padding: 0; + margin: 0; + scroll-behavior: smooth; } body { - color: #2d2d2d; - font-family: "Sofia Sans", serif; - line-height: 1.48; - font-size: 16px; - padding: 0 10px; - margin: 4rem auto; - max-width: 680px; + background-color: #f9f9f9; + color: #333; + font-size: 100%; + max-width: 85%; + margin: 1rem auto; + padding: 0; } -nav#top a { - display: inline-block; - margin: 0 0 1rem 0; +nav > ul { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: wrap; + font-weight: bold; + flex-direction: row; + position: relative; } +nav > ul > li { + align-items: center; + display: inline-flex; +} + +nav > ul > li > a { + border: 1px solid var(--main-color); + color: var(--main-color); + display: inline-block; + margin: 0 -1px -1px 0; + padding: 7px; + text-decoration: none; + white-space: nowrap; +} + +nav > ul > li > a:hover, nav > ul > li > a:active { + text-decoration: none; + background-color: var(--main-color); + color: #fff; +} + +/*--- End Top Nav ---*/ + main { - max-width: 42em; - margin:15 auto; + display: block; + width: 100%; + margin: 0; + padding: 1px 0 20px 0; + border: 1px solid var(--main-color); + background-color: #fff; } -pre { - background: lightgoldenrodyellow; - border-radius: 2px; - overflow: auto; - padding: 8px; +main > p > em { + font-weight: normal; + font-style: italic; } -code { - background: lightgoldenrodyellow; - border-radius: 2px; - color: saddlebrown; - font-size: 14px; - padding: 1px 2px; +main ul, main ol { + padding-right: 10px; } -img { - height: auto; - max-width: 100%; +/*--- Begin Footer ---*/ + +footer nav ul { + margin: -1px 0 0 0; +} +footer small { + display: block; + margin: 20px 0 0 0; + padding: 0 0 0 10px; } -figure { - margin: 3rem 0; +/*--- Links ---*/ + +a { + color: var(--main-color); } -figcaption { - font-family: sans-serif; - font-size: 90%; + +a:hover { + text-decoration: none; + color: #fff; + background-color: var(--main-color); } -blockquote { - background: rgba(0,0,0,0.05); - border-left: 2px solid; - margin-bottom: 2rem; - margin-top: 2rem; - padding-left: 10px; +a:active { + text-decoration: none; + color: #fff; + background-color: var(--main-color); +} + +a, img { + border: none; +} + +a:focus, img:focus { + outline: none; } +/*--- Header Styles ---*/ + h1 { - font-size: 28px; - line-height: 1.2; - margin: 0 0 10px; + font-size: 190%; + margin: 18px 18px 0 18px; } -h1 + p { - margin-bottom: 2rem; - margin-top: 0; + +h2 { + font-size: 125%; + margin: 18px 18px 0 18px; +} + +h3 { + font-size: 113%; + margin: 18px 18px 0 18px; } -h2,h3,h4,h5,h6 { - color: grey; - line-height: 1.2; - margin-top: 3rem; +h4 { + margin: 18px 18px 0 18px; } -.posts { - list-style: none; +p { + margin: 12px 18px 18px 18px; padding: 0; + line-height: 1.25em; } -.posts li { - display: flex; - justify-content: space-between; - margin-bottom: 8px; + +hr { + margin: 2rem 0; } -.posts li span { - font-size: 90%; - font-style: italic; - margin-left: 10px; - min-width: 100px; - opacity: 0.7; - text-align: right; + +img { + height: auto; + max-width: 100%; } -footer { - margin-top: 4rem; +pre { + background: #eee; + padding: 20px; + overflow: auto; } -footer nav { - margin-bottom: 2rem; +code { + font-size: 110%; } -footer nav ul { - list-style: none; +.table-container { + margin: 2rem 0; + overflow-y: scroll; +} +table { + border-collapse: collapse; + min-width: 500px; + text-align: left; + width: 100%; +} +table caption { + background: #eee; + font-weight: bold; + font-size: 120%; + padding: 10px; + text-align: left; +} +table tr { + border-bottom: 1px solid; +} +table th, table td { + padding: 10px; +} + +blockquote { + background: #f2f2f2; + border-left: 2px solid grey; + padding: 6px; +} +blockquote p { margin: 0; - padding: 0; } -footer nav ul li { - display: inline-block; - margin-right: 10px; + +.footnotes { + font-size: 90%; +} + +/*--- List Styles ---*/ + +ol { + line-height: 1.25em; +} + +ul, ol { + margin: 12px 0 0 36px; + padding: 0 0 0 24px; + line-height: 1.5em; +} + +ul { + list-style-type: square; +} + +li ul, li ol { + margin-top: 0; +} + +ul.posts li { + margin-bottom: 10px; +} +ul.posts li span { + display: block; +} + +@media(max-width:600px) { + body { + max-width: 100%; + margin: 12px; + } + nav ul { + display: block; + margin: 0 0 -1px 0; + } + nav > ul > li { + width: 50%; + } + nav > ul > li > a { + border-right: 0; + display: block; + margin: 0; + width: 100%; + } + nav ul li:nth-of-type(even) a { + border-right: 1px solid var(--main-color); + } + + footer nav ul li { + margin: 0 0 -1px 0; + } } @media(prefers-color-scheme: dark) { + :root { + --main-color: #eee8a7; + } + html, body { + background: black; + } body { + color: white; + } + main { background: #2d2d2d; - color: #f1f1f1; } - h2,h3,h4,h5,h6 { - color: lightgrey; + table caption { + background: black; + } + nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active { + color: black; + } + pre { + background: black; } blockquote { - background: rgba(0,0,0,0.5); + background: black; } } - -@media(max-width:680px) { - body { - margin: 1rem auto; - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2