From 097c2958be074094b29ee02a85c1aeb86ba3482d Mon Sep 17 00:00:00 2001
From: Dan Leech <danleech@users.noreply.github.com>
Date: Thu, 27 Apr 2017 15:41:33 +0100
Subject: [PATCH] Inlines CSS, removes dependency on Sass

---
 _sass/_components.ad.scss     |  34 ------
 _sass/_components.footer.scss |  15 ---
 _sass/_components.grid.scss   |  74 ------------
 _sass/_components.navbar.scss |  38 -------
 _sass/_elements.scss          |  29 -----
 _sass/_settings.colours.scss  |   2 -
 css/styles.scss               |  11 --
 index.html                    | 205 +++++++++++++++++++++++++++++++++-
 8 files changed, 204 insertions(+), 204 deletions(-)
 delete mode 100644 _sass/_components.ad.scss
 delete mode 100644 _sass/_components.footer.scss
 delete mode 100644 _sass/_components.grid.scss
 delete mode 100644 _sass/_components.navbar.scss
 delete mode 100644 _sass/_elements.scss
 delete mode 100644 _sass/_settings.colours.scss
 delete mode 100644 css/styles.scss

diff --git a/_sass/_components.ad.scss b/_sass/_components.ad.scss
deleted file mode 100644
index c5750e447..000000000
--- a/_sass/_components.ad.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-#carbonads {
-    height: 100%;
-    width: 100%;
-    a {
-        color: $color-black;
-    }
-    & > span {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: space-between;
-    }
-}
-
-.carbon-img {
-    display: block;
-    padding: 1rem 1rem 0.5rem;
-}
-
-.carbon-text {
-    display: block;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    margin: 0 auto;
-    max-width: 15rem;
-}
-
-.carbon-poweredby {
-    font-size: 0.625rem;
-    font-weight: 700;
-    line-height: 1.5rem;
-    opacity: 0.25;
-    text-transform: uppercase;
-}
diff --git a/_sass/_components.footer.scss b/_sass/_components.footer.scss
deleted file mode 100644
index 37c00cb21..000000000
--- a/_sass/_components.footer.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.footer {
-    background-color: #EEE;
-    padding: 1.5rem;
-    @media (min-width: 720px) {
-        padding: 3rem;
-    }
-    a {
-        color: $color-black;
-        text-decoration: underline;
-    }
-    p {
-        margin: 0;
-        opacity: 0.5;
-    }
-}
diff --git a/_sass/_components.grid.scss b/_sass/_components.grid.scss
deleted file mode 100644
index 1d499f9f2..000000000
--- a/_sass/_components.grid.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.grid {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 1.5rem;
-    padding: 0;
-    @media (min-width: 720px) {
-        margin: 3rem;
-    }
-    @supports (display: grid) {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
-        grid-auto-rows: 6rem;
-        grid-column-gap: 0.375rem;
-        grid-row-gap: 0.375rem;
-        grid-auto-flow: dense;
-    }
-}
-
-.grid-item {
-    background-color: #757575;
-    text-align: center;
-    @supports not (display: grid) {
-        border: 0.1875rem solid #FFF;
-        padding: 0 0 0.75rem;
-        width: 20%;
-    }
-}
-
-.grid-item--ad {
-    background-color: #EEE;
-    grid-column: -2 / -1;
-    grid-row-end: span 2;
-    height: auto;
-    @media (min-width: 21.75rem) {
-        // 21.75rem is the minimum viewport
-        // width with multiple columns
-        grid-column: -3 / -1;
-    }
-    @supports not (display: grid) {
-        width: 100%;
-    }
-}
-
-.grid-item__link {
-    color: $color-white;
-    display: block;
-    padding: 1rem 1rem 0;
-    text-align: center;
-    width: 100%;
-}
-
-.grid-item__image {
-    height: 1.5rem;
-    width: 1.5rem;
-}
-
-.grid-item__title {
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1rem;
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.grid-item__subtitle {
-    color: $color-white;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    margin: 0;
-    opacity: 0.5;
-}
diff --git a/_sass/_components.navbar.scss b/_sass/_components.navbar.scss
deleted file mode 100644
index 787954257..000000000
--- a/_sass/_components.navbar.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.navbar {
-    background-color: $color-black;
-}
-
-.navbar__nav {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    @media (min-width: 720px) {
-        padding: 0 1.5rem;
-    }
-}
-
-.navbar__nav-item {
-    a {
-        color: #FFF;
-        display: block;
-        opacity: 0.5;
-        padding: 1.5rem 0.375rem;
-        &:focus, &:hover {
-            opacity: 1;
-        }
-    }
-    &:last-child {
-        a {
-            padding: 1.5rem 1.5rem 1.5rem 0.375rem;
-        }
-    }
-}
-
-.navbar__nav-item--home {
-    flex-grow: 1;
-    a {
-        opacity: 1;
-        padding: 1.5rem 0 1.5rem 1.5rem;
-    }
-}
diff --git a/_sass/_elements.scss b/_sass/_elements.scss
deleted file mode 100644
index 391a33f3f..000000000
--- a/_sass/_elements.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-:root {
-    font-size: 100%;
-}
-
-a {
-    text-decoration: none;
-}
-
-body {
-    background-color: $color-white;
-    color: $color-black;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    margin: 0;
-}
-
-svg {
-    height: 1.5rem;
-    width: 1.5rem;
-}
-
-path, rect, circle {
-    fill: #FFF;
-}
diff --git a/_sass/_settings.colours.scss b/_sass/_settings.colours.scss
deleted file mode 100644
index 7de8a8266..000000000
--- a/_sass/_settings.colours.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$color-black: #263238;
-$color-white: #FFFFFF;
diff --git a/css/styles.scss b/css/styles.scss
deleted file mode 100644
index 6af328fc5..000000000
--- a/css/styles.scss
+++ /dev/null
@@ -1,11 +0,0 @@
----
----
-
-@import "settings.colours";
-
-@import "elements";
-
-@import "components.ad";
-@import "components.footer";
-@import "components.grid";
-@import "components.navbar";
diff --git a/index.html b/index.html
index f604afb10..a77d3839e 100644
--- a/index.html
+++ b/index.html
@@ -100,7 +100,6 @@
 <head>
     <meta charset="utf-8">
     <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
-    <link href="/css/styles.css" rel="stylesheet">
     <link rel="preconnect" href="//www.google-analytics.com">
     <link rel="preconnect" href="//cdn.carbonads.com">
     <link rel="preconnect" href="//github.com">
@@ -122,6 +121,210 @@
     <link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">
     <link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">
     <link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
+    <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :root {
+          font-size: 100%;
+        }
+
+        a {
+          text-decoration: none;
+        }
+
+        body {
+          background-color: #FFFFFF;
+          color: #263238;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+          font-size: 0.875rem;
+          line-height: 1.5rem;
+          margin: 0;
+        }
+
+        svg {
+          height: 1.5rem;
+          width: 1.5rem;
+        }
+
+        path, rect, circle {
+          fill: #FFF;
+        }
+
+        #carbonads {
+          height: 100%;
+          width: 100%;
+        }
+        #carbonads a {
+          color: #263238;
+        }
+        #carbonads > span {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          justify-content: space-between;
+        }
+
+        .carbon-img {
+          display: block;
+          padding: 1rem 1rem 0.5rem;
+        }
+
+        .carbon-text {
+          display: block;
+          font-size: 0.75rem;
+          line-height: 1rem;
+          margin: 0 auto;
+          max-width: 15rem;
+        }
+
+        .carbon-poweredby {
+          font-size: 0.625rem;
+          font-weight: 700;
+          line-height: 1.5rem;
+          opacity: 0.25;
+          text-transform: uppercase;
+        }
+
+        .footer {
+          background-color: #EEE;
+          padding: 1.5rem;
+        }
+        @media (min-width: 720px) {
+          .footer {
+            padding: 3rem;
+          }
+        }
+        .footer a {
+          color: #263238;
+          text-decoration: underline;
+        }
+        .footer p {
+          margin: 0;
+          opacity: 0.5;
+        }
+
+        .grid {
+          display: flex;
+          flex-wrap: wrap;
+          list-style: none;
+          margin: 1.5rem;
+          padding: 0;
+        }
+        @media (min-width: 720px) {
+          .grid {
+            margin: 3rem;
+          }
+        }
+        @supports (display: grid) {
+          .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+            grid-auto-rows: 6rem;
+            grid-column-gap: 0.375rem;
+            grid-row-gap: 0.375rem;
+            grid-auto-flow: dense;
+          }
+        }
+
+        .grid-item {
+          background-color: #757575;
+          text-align: center;
+        }
+        @supports not (display: grid) {
+          .grid-item {
+            border: 0.1875rem solid #FFF;
+            padding: 0 0 0.75rem;
+            width: 20%;
+          }
+        }
+
+        .grid-item--ad {
+          background-color: #EEE;
+          grid-column: -2 / -1;
+          grid-row-end: span 2;
+          height: auto;
+        }
+        @media (min-width: 21.75rem) {
+          .grid-item--ad {
+            grid-column: -3 / -1;
+          }
+        }
+        @supports not (display: grid) {
+          .grid-item--ad {
+            width: 100%;
+          }
+        }
+
+        .grid-item__link {
+          color: #FFFFFF;
+          display: block;
+          padding: 1rem 1rem 0;
+          text-align: center;
+          width: 100%;
+        }
+
+        .grid-item__image {
+          height: 1.5rem;
+          width: 1.5rem;
+        }
+
+        .grid-item__title {
+          font-size: 0.75rem;
+          font-weight: 400;
+          line-height: 1rem;
+          margin: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .grid-item__subtitle {
+          color: #FFFFFF;
+          font-size: 0.75rem;
+          line-height: 1rem;
+          margin: 0;
+          opacity: 0.5;
+        }
+
+        .navbar {
+          background-color: #263238;
+        }
+
+        .navbar__nav {
+          display: flex;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        @media (min-width: 720px) {
+          .navbar__nav {
+            padding: 0 1.5rem;
+          }
+        }
+
+        .navbar__nav-item a {
+          color: #FFF;
+          display: block;
+          opacity: 0.5;
+          padding: 1.5rem 0.375rem;
+        }
+        .navbar__nav-item a:focus, .navbar__nav-item a:hover {
+          opacity: 1;
+        }
+        .navbar__nav-item:last-child a {
+          padding: 1.5rem 1.5rem 1.5rem 0.375rem;
+        }
+
+        .navbar__nav-item--home {
+          flex-grow: 1;
+        }
+        .navbar__nav-item--home a {
+          opacity: 1;
+          padding: 1.5rem 0 1.5rem 1.5rem;
+        }
+    </style>
 </head>
 
 <body>