From fbf2cd03047fa147a8cf8580b7e5891e07a41d9d Mon Sep 17 00:00:00 2001
From: Cory O'Daniel <cory@coryodaniel.com>
Date: Mon, 14 Aug 2023 07:13:05 -0700
Subject: [PATCH] Moving CSS out

Moving css to a file, its gotten a bit long w/ the social sharing
---
 index.html | 248 +----------------------------------------------------
 style.css  | 246 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 247 insertions(+), 247 deletions(-)
 create mode 100644 style.css

diff --git a/index.html b/index.html
index 42578fda..b7d1d144 100644
--- a/index.html
+++ b/index.html
@@ -9,253 +9,7 @@
     <meta name="description" content="The OpenTF Foundation. Supporting an impartial, open, and community-driven Terraform." />
 
     <link rel="canonical" href="/" />
-
-    <style>
-      @media (min-width: 640px) {
-          .container {
-              max-width: 640px;
-          }
-      }
-
-      @media (min-width: 768px) {
-          .container {
-              max-width: 768px;
-          }
-      }
-
-      @media (min-width: 1024px) {
-          .container {
-              max-width: 1024px;
-          }
-      }
-
-      @media (min-width: 1280px) {
-          .container {
-              max-width: 1280px;
-          }
-      }
-
-      @media (min-width: 1536px) {
-          .container {
-              max-width: 1536px;
-          }
-      }
-
-      body {
-          color: rgb(75 85 99);
-          font-size: 1.5rem;
-          line-height: 2rem;
-
-          padding-top: 2rem;
-          padding-bottom: 2rem;
-      }
-
-      p {
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
-      }
-
-      li {
-          padding-top: 0.25rem;
-          padding-bottom: 0.25rem;
-      }
-
-      .mx-auto {
-          margin-left: auto;
-          margin-right: auto;
-      }
-
-      h1 {
-          text-align: center;
-          line-height: 3rem;
-      }
-
-      .font-bold {
-          font-weight: 700;
-      }
-
-      .resp-sharing-button__link,
-      .resp-sharing-button__icon {
-          display: inline-block
-      }
-      
-      .resp-sharing-button__link {
-          text-decoration: none;
-          color: #fff;
-          margin: 0.5em
-      }
-      
-      .resp-sharing-button {
-          border-radius: 5px;
-          transition: 25ms ease-out;
-          padding: 0.5em 0.75em;
-          font-family: Helvetica Neue,Helvetica,Arial,sans-serif
-      }
-      
-      .resp-sharing-button__icon svg {
-          width: 1em;
-          height: 1em;
-          margin-right: 0.4em;
-          vertical-align: top
-      }
-      
-      .resp-sharing-button--small svg {
-          margin: 0;
-          vertical-align: middle
-      }
-      
-      /* Non solid icons get a stroke */
-      .resp-sharing-button__icon {
-          stroke: #fff;
-          fill: none
-      }
-      
-      /* Solid icons get a fill */
-      .resp-sharing-button__icon--solid,
-      .resp-sharing-button__icon--solidcircle {
-          fill: #fff;
-          stroke: none
-      }
-      
-      .resp-sharing-button--twitter {
-          background-color: #55acee
-      }
-      
-      .resp-sharing-button--twitter:hover {
-          background-color: #2795e9
-      }
-      
-      .resp-sharing-button--pinterest {
-          background-color: #bd081c
-      }
-      
-      .resp-sharing-button--pinterest:hover {
-          background-color: #8c0615
-      }
-      
-      .resp-sharing-button--facebook {
-          background-color: #3b5998
-      }
-      
-      .resp-sharing-button--facebook:hover {
-          background-color: #2d4373
-      }
-      
-      .resp-sharing-button--tumblr {
-          background-color: #35465C
-      }
-      
-      .resp-sharing-button--tumblr:hover {
-          background-color: #222d3c
-      }
-      
-      .resp-sharing-button--reddit {
-          background-color: #5f99cf
-      }
-      
-      .resp-sharing-button--reddit:hover {
-          background-color: #3a80c1
-      }
-      
-      .resp-sharing-button--google {
-          background-color: #dd4b39
-      }
-      
-      .resp-sharing-button--google:hover {
-          background-color: #c23321
-      }
-      
-      .resp-sharing-button--linkedin {
-          background-color: #0077b5
-      }
-      
-      .resp-sharing-button--linkedin:hover {
-          background-color: #046293
-      }
-      
-      .resp-sharing-button--email {
-          background-color: #777
-      }
-      
-      .resp-sharing-button--email:hover {
-          background-color: #5e5e5e
-      }
-      
-      .resp-sharing-button--xing {
-          background-color: #1a7576
-      }
-      
-      .resp-sharing-button--xing:hover {
-          background-color: #114c4c
-      }
-      
-      .resp-sharing-button--whatsapp {
-          background-color: #25D366
-      }
-      
-      .resp-sharing-button--whatsapp:hover {
-          background-color: #1da851
-      }
-      
-      .resp-sharing-button--hackernews {
-          background-color: #FF6600
-      }
-      .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {
-          background-color: #FB6200
-      }
-      
-      .resp-sharing-button--vk {
-          background-color: #507299
-      }
-      
-      .resp-sharing-button--vk:hover {
-          background-color: #43648c
-      }
-      
-      .resp-sharing-button--facebook {
-          background-color: #3b5998;
-          border-color: #3b5998;
-      }
-      
-      .resp-sharing-button--facebook:hover,
-      .resp-sharing-button--facebook:active {
-          background-color: #2d4373;
-          border-color: #2d4373;
-      }
-      
-      .resp-sharing-button--twitter {
-          background-color: #55acee;
-          border-color: #55acee;
-      }
-      
-      .resp-sharing-button--twitter:hover,
-      .resp-sharing-button--twitter:active {
-          background-color: #2795e9;
-          border-color: #2795e9;
-      }
-      
-      .resp-sharing-button--linkedin {
-          background-color: #0077b5;
-          border-color: #0077b5;
-      }
-      
-      .resp-sharing-button--linkedin:hover,
-      .resp-sharing-button--linkedin:active {
-          background-color: #046293;
-          border-color: #046293;
-      }
-      
-      .resp-sharing-button--whatsapp {
-          background-color: #25D366;
-          border-color: #25D366;
-      }
-      
-      .resp-sharing-button--whatsapp:hover,
-      .resp-sharing-button--whatsapp:active {
-          background-color: #1DA851;
-          border-color: #1DA851;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/style.css">
   </head>
   <body>
     <div class="container mx-auto">
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..08676d15
--- /dev/null
+++ b/style.css
@@ -0,0 +1,246 @@
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+body {
+  color: rgb(75 85 99);
+  font-size: 1.5rem;
+  line-height: 2rem;
+
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+p {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+li {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1 {
+  text-align: center;
+  line-height: 3rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.resp-sharing-button__link,
+.resp-sharing-button__icon {
+  display: inline-block
+}
+
+.resp-sharing-button__link {
+  text-decoration: none;
+  color: #fff;
+  margin: 0.5em
+}
+
+.resp-sharing-button {
+  border-radius: 5px;
+  transition: 25ms ease-out;
+  padding: 0.5em 0.75em;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif
+}
+
+.resp-sharing-button__icon svg {
+  width: 1em;
+  height: 1em;
+  margin-right: 0.4em;
+  vertical-align: top
+}
+
+.resp-sharing-button--small svg {
+  margin: 0;
+  vertical-align: middle
+}
+
+/* Non solid icons get a stroke */
+.resp-sharing-button__icon {
+  stroke: #fff;
+  fill: none
+}
+
+/* Solid icons get a fill */
+.resp-sharing-button__icon--solid,
+.resp-sharing-button__icon--solidcircle {
+  fill: #fff;
+  stroke: none
+}
+
+.resp-sharing-button--twitter {
+  background-color: #55acee
+}
+
+.resp-sharing-button--twitter:hover {
+  background-color: #2795e9
+}
+
+.resp-sharing-button--pinterest {
+  background-color: #bd081c
+}
+
+.resp-sharing-button--pinterest:hover {
+  background-color: #8c0615
+}
+
+.resp-sharing-button--facebook {
+  background-color: #3b5998
+}
+
+.resp-sharing-button--facebook:hover {
+  background-color: #2d4373
+}
+
+.resp-sharing-button--tumblr {
+  background-color: #35465C
+}
+
+.resp-sharing-button--tumblr:hover {
+  background-color: #222d3c
+}
+
+.resp-sharing-button--reddit {
+  background-color: #5f99cf
+}
+
+.resp-sharing-button--reddit:hover {
+  background-color: #3a80c1
+}
+
+.resp-sharing-button--google {
+  background-color: #dd4b39
+}
+
+.resp-sharing-button--google:hover {
+  background-color: #c23321
+}
+
+.resp-sharing-button--linkedin {
+  background-color: #0077b5
+}
+
+.resp-sharing-button--linkedin:hover {
+  background-color: #046293
+}
+
+.resp-sharing-button--email {
+  background-color: #777
+}
+
+.resp-sharing-button--email:hover {
+  background-color: #5e5e5e
+}
+
+.resp-sharing-button--xing {
+  background-color: #1a7576
+}
+
+.resp-sharing-button--xing:hover {
+  background-color: #114c4c
+}
+
+.resp-sharing-button--whatsapp {
+  background-color: #25D366
+}
+
+.resp-sharing-button--whatsapp:hover {
+  background-color: #1da851
+}
+
+.resp-sharing-button--hackernews {
+  background-color: #FF6600
+}
+
+.resp-sharing-button--hackernews:hover,
+.resp-sharing-button--hackernews:focus {
+  background-color: #FB6200
+}
+
+.resp-sharing-button--vk {
+  background-color: #507299
+}
+
+.resp-sharing-button--vk:hover {
+  background-color: #43648c
+}
+
+.resp-sharing-button--facebook {
+  background-color: #3b5998;
+  border-color: #3b5998;
+}
+
+.resp-sharing-button--facebook:hover,
+.resp-sharing-button--facebook:active {
+  background-color: #2d4373;
+  border-color: #2d4373;
+}
+
+.resp-sharing-button--twitter {
+  background-color: #55acee;
+  border-color: #55acee;
+}
+
+.resp-sharing-button--twitter:hover,
+.resp-sharing-button--twitter:active {
+  background-color: #2795e9;
+  border-color: #2795e9;
+}
+
+.resp-sharing-button--linkedin {
+  background-color: #0077b5;
+  border-color: #0077b5;
+}
+
+.resp-sharing-button--linkedin:hover,
+.resp-sharing-button--linkedin:active {
+  background-color: #046293;
+  border-color: #046293;
+}
+
+.resp-sharing-button--whatsapp {
+  background-color: #25D366;
+  border-color: #25D366;
+}
+
+.resp-sharing-button--whatsapp:hover,
+.resp-sharing-button--whatsapp:active {
+  background-color: #1DA851;
+  border-color: #1DA851;
+}
\ No newline at end of file