Renamed griddy.css to index.css finally

public/index.css

@@ -0,0 +1,305 @@
+/* Prevents Padding or borders from changing box size */
+html { box-sizing: border-box; }
+*, 
+*:before, 
+*:after { box-sizing: inherit; }
+
+:root {
+    --bg-color: #ffffff;
+    --fg-color: #000000;
+    --selection-bg-color: #caffca;
+    --selection-fg-color: #000000;
+    --accent: #10dd10;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: #000000;
+        --fg-color: #ffffff;
+        --selection-fg-color: #000000;
+        --accent: #96ff96;
+    }
+}
+body {
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    font-family: sans-serif;
+    line-height: 1.5em;
+}
+::-moz-selection { /* Code for Firefox */
+    color: var(--selection-fg-color);
+    background: var(--selection-bg-color);
+}  
+::selection {
+    color: var(--selection-fg-color);
+    background: var(--selection-bg-color);
+}
+
+.headline {
+    text-align: center;
+    width: 90%;
+    margin: 1.5em auto;
+    line-height: 1.1em;
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    .headline {
+        max-width: 75%;
+    }
+}
+@media (min-width: 850px) {
+    .headline {
+        max-width: 60%;
+    }
+}
+@media (min-width: 1250px) {
+    .headline {
+        max-width: 40%;
+    }
+}
+/* Blinking cursor */
+@keyframes cursor-blink {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+.headline::after {
+    content: "";
+    width: 1px;
+    height: 0.85em;
+    background: var(--accent);
+    margin-left: 3px;
+    display: inline-block;
+    animation: cursor-blink 900ms ease-in-out infinite;
+}
+.footer {
+    width: 90%;
+    text-align: center;
+    margin: 0 auto 2em;
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    .footer {
+        max-width: 75%;
+    }
+}
+@media (min-width: 850px) {
+    .footer {
+        max-width: 60%;
+    }
+}
+@media (min-width: 1250px) {
+    .footer {
+        max-width: 40%;
+    }
+}
+
+a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--bg-color);
+    transition: all 200ms ease-in-out;
+    white-space-collapse: discard;
+}
+a:hover {
+    text-decoration-color: var(--accent);
+    white-space-collapse: discard;
+}
+
+.center {
+    text-align: center;
+    width: 90%;
+    margin: 1em auto 0;
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    .center {
+        max-width: 75%;
+    }
+}
+@media (min-width: 850px) {
+    .center {
+        max-width: 60%;
+    }
+}
+@media (min-width: 1250px) {
+    .center {
+        max-width: 40%;
+    }
+}
+
+p {
+    margin: 0 0 0.5em 0;
+}
+
+br {
+    margin-bottom: 10px;
+}
+
+code {
+    border: 1px solid var(--fg-color);
+    border-radius: 5px;
+    padding: 2px;
+    margin: 1px;
+    font-family: serif;
+    background-color: var(--fg-color);
+    color: var(--bg-color);
+}
+code a {
+    text-decoration-color: var(--fg-color);
+}
+
+/* Avoid annoying underlines on links with whitespaces before them */
+div.space {
+    margin: 0;
+    display: inline-block;
+    width: 5px;
+}
+
+.row {
+    width: 90%;
+    margin: 0 auto;
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    .row {
+        max-width: 75%;
+    }
+}
+@media (min-width: 850px) {
+    .row {
+        max-width: 60%;
+    }
+}
+/* Large Devices */
+@media (min-width: 1250px) {
+    .row {
+        max-width: 40%;
+    }
+}
+
+/* Do a clearfix */
+.row::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+/* Columns */
+.col { 
+    width: 100%;
+    float: left;
+    padding: 5px;
+}
+
+
+.badge {
+    padding: 6px 10px;
+    border: 1px solid var(--accent);
+    border-radius: 0px;
+    transition: all 200ms ease-in-out;
+}
+.badge:hover {
+    background-color: var(--fg-color);
+    color: var(--bg-color);
+}
+.badge svg {
+    transition: all 200ms ease-in-out;   
+}
+.badge:hover svg {
+    filter: invert();
+}
+.badge-centered {
+    text-align: center;
+}
+.under-a-badge {
+    border-top: none;
+}
+
+svg {
+    height: 0.8em;
+}
+svg.svg-h9 {
+    height: 0.9em;
+    transform: translateY(0.05em);
+}
+svg.svg-h10 {
+    height: 1em;
+    transform: translateY(0.10em);
+}
+svg.svg-h11 {
+    height: 1.1em;
+    transform: translateY(0.15em);
+}
+svg.svg-h12 {
+    height: 1.2em;
+    transform: translateY(0.20em);
+}
+
+hr {
+    --hr-color: var(--accent);
+
+    width: 90%;
+    height: 1px;
+    margin: 2.35em auto;
+    border-width: 0;
+    color: var(--hr-color);
+    background-color: var(--hr-color);
+}
+/* Larger Devices */
+@media (min-width: 700px) {
+    hr {
+        max-width: 75%;
+    }
+}
+@media (min-width: 850px) {
+    hr {
+        max-width: 60%;
+    }
+}
+/* Large Devices */
+@media (min-width: 1250px) {
+    hr {
+        max-width: 40%;
+    }
+}
+
+.align-left {
+    text-align: left;
+    margin-left: 0;
+}
+
+
+/* Small Devices */
+@media (min-width: 576px) {
+    .sm-1 { width: 10%; }
+    .sm-2 { width: 20%; }
+    .sm-3 { width: 30%; }
+    .sm-4 { width: 40%; }
+    .sm-5 { width: 50%; }
+    .sm-6 { width: 60%; }
+    .sm-7 { width: 70%; }
+    .sm-8 { width: 80%; }
+    .sm-9 { width: 90%; }
+    .sm-10 { width: 100%; }
+}
+
+/* Medium Devices */
+@media (min-width: 768px) {
+    .md-1 { width: 10%; }
+    .md-2 { width: 20%; }
+    .md-3 { width: 30%; }
+    .md-4 { width: 40%; }
+    .md-5 { width: 50%; }
+    .md-6 { width: 60%; }
+    .md-7 { width: 70%; }
+    .md-8 { width: 80%; }
+    .md-9 { width: 90%; }
+    .md-10 { width: 100%; }
+}