Initial commit to cgit platformHEADmaster

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