diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 157 |
1 files changed, 157 insertions, 0 deletions
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,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="lightgrey" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') 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 |