From 9b06f1217469d9b93919b30daf741d8f9bebe6dd Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 23 Jan 2024 15:11:50 -0500 Subject: Initial commit to cgit platform --- style.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..cf88c92 --- /dev/null +++ b/style.css @@ -0,0 +1,157 @@ +* { box-sizing: border-box; } + +body { + font: 16px/1.6 "Avenir", "Helvetica", Arial, sans-serif; + padding: 0; + margin: 0; +} +main, .container { + padding: 1rem; + margin: 0 auto; + max-width: 75ch; +} +header, footer { + background-color: #f9f9f9; + padding: 2rem 0; +} +footer { + padding-bottom: 6rem; +} +h1,h2,h3,h4,h5,h6 { + font-weight: 900; +} +h1 { + background: #fff url('data:image/svg+xml;utf8,') no-repeat calc(100% - 1.5rem) center; + border: 1px solid lightgrey; + padding: 0.5rem 1.5rem; + font-size: 3rem; +} +h2 { + margin: 3rem 0 2rem; +} +p.multi { + column-count: 2; + column-gap: 2rem; +} +.center { text-align: center; } +a,a:visited { + color: #002CFC; +} +a:hover { + color: rebeccapurple; +} +img { + border: 1px solid lightgrey; + width: 100%; +} +.img { + left: -25%; + margin: 2rem 0 4rem; + position: relative; + width: 150%; +} +.img:before { + bottom: -10px; + background: black; + opacity: 0.2; + content:''; + filter: blur(10px); + height: 50%; + left: 1%; + position: absolute; + width: 98%; + z-index: -1; +} + +/* Blinking Cursor */ +.blinking-cursor { +font-weight: 100; +line-height: 0.5; +color: #2E3D48; +position: relative; +top: -5px; +user-select: none; +-webkit-animation: 1s blink step-end infinite; +-moz-animation: 1s blink step-end infinite; +-ms-animation: 1s blink step-end infinite; +-o-animation: 1s blink step-end infinite; +animation: 1s blink step-end infinite; +} + +@keyframes "blink" { +from, to { + color: transparent; +} +50% { + color: black; +} +} + +@-moz-keyframes blink { +from, to { + color: transparent; +} +50% { + color: black; +} +} + +@-webkit-keyframes "blink" { +from, to { + color: transparent; +} +50% { + color: black; +} +} + +@-ms-keyframes "blink" { +from, to { + color: transparent; +} +50% { + color: black; +} +} + +@-o-keyframes "blink" { +from, to { + color: transparent; +} +50% { + color: black; +} +} + +@media(max-width:1000px) { + h1 { + font-size: 2rem; + line-height: 3rem; + padding: 0.5rem 1rem; + } + .blinking-cursor { + top: -3px; + } + .img { + left: 0; + width: 100%; + } +} +@media(max-width:500px) { + h1 { + background-size: 20px; + font-size: 1.4rem; + padding: 0.5rem 3rem 0.5rem 1rem; + } + p.multi { + column-count: 1; + column-gap: 0; + } +} +@media(max-width:320px) { + h1 { + background-size: 20px; + font-size: 1.2rem; + padding: 0.5rem 3rem 0.5rem 1rem; + } +} \ No newline at end of file -- cgit v1.2.3-54-g00ecf