aboutsummaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css157
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