From 2cc4ec6dd14a299f0d077ca3c51fc71f00f2f108 Mon Sep 17 00:00:00 2001 From: Connor Frank Date: Tue, 16 Apr 2024 00:40:51 -0400 Subject: more formatting --- style.css | 274 +++++++++++++++++++++++++++++++------------------------------- 1 file changed, 138 insertions(+), 136 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 06d4796..ca2f022 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,14 @@ body { - margin: 0; - padding: 0; - background-color: white; - font-family: sans-serif; - font-size: 16px; - line-height: 1.5; - color: black; + margin: 0; + padding: 0; + background-color: white; + font-family: sans-serif; + font-size: 16px; + line-height: 1.5; + color: black; +} +a:hover { + color: #ff6347; } .responsive-image { @@ -14,19 +17,19 @@ body { } .container { - margin-left: auto; - margin-right: auto; - padding-left: 15px; - padding-right: 15px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; } @media (min-width: 992px) { - .container { - width: 970px; - } + .container { + width: 970px; + } } .row { - display: grid; - grid-template-columns: repeat(12, 1fr); + display: grid; + grid-template-columns: repeat(12, 1fr); } .darkgroup { @@ -35,161 +38,160 @@ body { margin-top: 20px; padding-bottom: 30px; } - .lightgroup { margin-top: 20px; padding-bottom: 30px; } #dhead { - margin-top: 20px; + margin-top: 20px; } #dpic { - grid-column: span 6; - text-align: right; + grid-column: span 6; + text-align: right; } #ddesc { - padding-top: 40px; - padding-left: 20px; - grid-column: span 6; + padding-top: 40px; + padding-left: 20px; + grid-column: span 6; } @media (max-width: 991px) { - #dpic { - grid-column: span 12; - text-align: center; - } - #ddesc { - grid-column: span 12; - padding-top: 20px; - text-align: center; - } + #dpic { + grid-column: span 12; + text-align: center; + } + #ddesc { + grid-column: span 12; + padding-top: 20px; + text-align: center; + } } h1 { - font-size: 34px; - font-weight: normal; - padding: 0; - margin: 0; + font-size: 34px; + font-weight: normal; + padding: 0; + margin: 0; } h2 { - font-weight: normal; - font-style: italic; - color: #385d24; - font-size: 18px; - padding: 0; - margin: 5px 0 10px 0; + font-weight: normal; + font-style: italic; + color: #385d24; + font-size: 18px; + padding: 0; + margin: 5px 0 10px 0; } @media (min-width: 992px) { - h2 { - max-width: 300px; - } + h2 { + max-width: 300px; + } } #dpic img { - width: 240px; - height: 240px; - border-radius: 120px; + width: 240px; + height: 240px; + border-radius: 120px; } .iico { - width: 40px; - height: 40px; + width: 40px; + height: 40px; +} +.img-bg { + display: block; + max-width: 100%; + height: auto; } hr { - height: 1px; - background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - padding: 0; - margin: 20px 0px 20px 0px; - border: 0; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + padding: 0; + margin: 20px 0px 20px 0px; + border: 0; } .ico { - grid-column: span 1; - vertical-align: top; - border-left: 2px solid #385d24; - position: relative; + grid-column: span 1; + vertical-align: top; + border-left: 2px solid #385d24; + position: relative; } .ico img { - border-radius: 5px; - width: 100%; - max-width: 80px; - margin-left: 10px; + border-radius: 5px; + width: 100%; + max-width: 80px; + margin-left: 10px; } .desc { - grid-column: span 10; - vertical-align: top; - font-size: 17px; - padding-left: 20px; - padding-bottom: 20px; -} -.entry { + grid-column: span 10; + vertical-align: top; + font-size: 17px; + padding-left: 20px; + padding-bottom: 20px; } .entry-dot { - position: absolute; - top: 4px; - left: -7px; - width: 8px; - height: 8px; - border-radius: 10px; - background-color: #385d24; - border: 2px solid white; + position: absolute; + top: 5px; + left: -6px; + width: 8px; + height: 8px; + border-radius: 10px; + background-color: #385d24; + border: 1px solid white; } .timespan { - grid-column: span 1; - font-size: 14px; - text-align: right; - padding-right: 5px; - color: #385d24; -} -.hassets { - position: relative; -} -@media (max-width: 991px) { - .hassets { - display: none; - } -} -.hasset { - position: absolute; - margin: 0; - padding: 0; + grid-column: span 1; + font-size: 14px; + text-align: right; + padding-right: 5px; + color: #385d24; } .ctitle { - font-size: 36px; - margin-bottom: 20px; - margin-top: 40px; -} -.card { - grid-column: span 3; - vertical-align: top; - background-color: #385d24; - border: 1px solid #385d24; - border-radius: 3px; - padding: 5px; - background-color: white; - padding-bottom: 10px; + font-size: 36px; + margin-bottom: 20px; + margin-top: 40px; } -@media (max-width: 991px) { - .card { - grid-column: span 6; - } - #featured-talks .row { - grid-column-gap: 5px; - grid-row-gap: 5px; - } -} -.card img { - border-radius: 5px; - width: 100%; -} -.cdesc { - height: 30px; - vertical-align: top; - margin-bottom: 10px; - font-size: 15px; -} -@media (max-width: 768px) { - .cdesc { - font-size: 14px; - padding-bottom: 10px; - } + +@media (prefers-color-scheme: dark) { + body { + background-color: #262a33; + color: white; + } + a { + color: #00ffff; + } + .darkgroup { + background-color: #657595; + color: black; + a { + color: #32CD32 + } + a:hover { + color: #ff6347; + } + } + h1, h2, .timespan, .desc { + color: white; + } + .ico { + border-left: 2px solid #32CD32; + } + .entry-dot { + background-color: #32CD32; + } + .iico { + filter: invert(100%); + } + .img-bg { + background-color: white; + padding: 1px; + border-radius: 2px; + } + .responsive-image { + background-color: white; + padding: 1px; + border-radius: 2px; + } + hr { + background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0)); + } } -- cgit v1.2.3