From a14eb22f4b5e870e02edf62ce734f647629c97c2 Mon Sep 17 00:00:00 2001 From: Connor Frank Date: Mon, 15 Apr 2024 15:58:41 +0000 Subject: style --- style.css | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..63492fe --- /dev/null +++ b/style.css @@ -0,0 +1,178 @@ +body { + margin: 0; + padding: 0; + background-color: white; + font-family: sans-serif; + font-size: 16px; + line-height: 1.5; + color: black; +} + +.container { + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 992px) { + .container { + width: 970px; + } +} +.row { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +#dhead { + margin-top: 20px; +} +#dpic { + grid-column: span 6; + text-align: right; +} +#ddesc { + 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; + } +} +h1 { + font-size: 34px; + font-weight: normal; + padding: 0; + margin: 0; +} +h2 { + font-weight: normal; + font-style: italic; + color: #999; + font-size: 18px; + padding: 0; + margin: 5px 0 10px 0; +} +@media (min-width: 992px) { + h2 { + max-width: 300px; + } +} +#dpic img { + width: 240px; + height: 240px; + border-radius: 120px; +} +.iico { + width: 40px; + height: 40px; +} +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; +} +.ico { + grid-column: span 1; + vertical-align: top; + border-left: 2px solid #cfcfcf; + position: relative; +} +.ico img { + 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 { +} +.entry-dot { + position: absolute; + top: 4px; + left: -7px; + width: 8px; + height: 8px; + border-radius: 10px; + background-color: #cfcfcf; + border: 2px solid white; +} +.timespan { + grid-column: span 1; + font-size: 14px; + text-align: right; + padding-right: 5px; + color: #bbb; +} +.hassets { + position: relative; +} +@media (max-width: 991px) { + .hassets { + display: none; + } +} +.hasset { + position: absolute; + margin: 0; + padding: 0; +} +.ctitle { + font-size: 36px; + margin-bottom: 20px; + margin-top: 40px; +} +.card { + grid-column: span 3; + vertical-align: top; + background-color: #eee; + border: 1px solid #ddd; + border-radius: 3px; + padding: 5px; + background-color: white; + padding-bottom: 10px; +} +@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; + } +} -- cgit v1.2.3