From 34a302be75326338a046bd35f47e4f8236fe9124 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Sat, 16 Aug 2025 15:03:19 -0700
Subject: [PATCH] separate stylesheet

---
 index.html | 220 +----------------------------------------------------
 style.css  | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 218 insertions(+), 219 deletions(-)
 create mode 100644 style.css

diff --git a/index.html b/index.html
index 308f0d1..9d6956f 100644
--- a/index.html
+++ b/index.html
@@ -6,225 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Tyler Says Hi!" />
     <link rel="icon" type="image/x-icon" href="./favicon.ico" />
-    <style type="text/css">
-      :root {
-        --background-light: #f9f9f9;
-        --text-primary-light: #222222;
-        --text-secondary-light: #4a4a4a;
-        --accent-light: #007aff;
-        --border-light: #e0e0e0;
-        --shadow-light: rgba(0, 0, 0, 0.1);
-
-        --background-dark: #1a1a1a;
-        --text-primary-dark: #f5f5f5;
-        --text-secondary-dark: #cccccc;
-        --accent-dark: #00bfff;
-        --border-dark: #333333;
-        --shadow-dark: rgba(255, 255, 255, 0.1);
-
-        --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE,
-          ChalkDuster, Comic Sans MS, comic-sans, sans-serif;
-      }
-
-      h1 {
-        font-size: 3rem;
-      }
-
-      a {
-        color: unset;
-      }
-
-      /* Light Theme */
-      body {
-        background-color: var(--background-light);
-        color: var(--text-primary-light);
-        font-family: var(--font-stack);
-      }
-
-      body a:hover {
-        color: var(--accent-light);
-      }
-
-      button {
-        /* Remove all default styling */
-        background: none;
-        border: none;
-        padding: 0;
-        margin: 0;
-        font: inherit;
-        color: inherit;
-        cursor: pointer;
-        outline: none;
-
-        /* Fix for odd text sizing in some browsers */
-        line-height: normal;
-
-        /* Prevent text selection */
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-
-        /* Remove default focus styles */
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      button:focus-visible {
-        outline: 2px solid #4d90fe;
-        outline-offset: 2px;
-      }
-
-      button::-moz-focus-inner {
-        border: 0;
-        padding: 0;
-      }
-
-      body button {
-        background: none;
-        color: unset;
-      }
-      body button:hover {
-        color: var(--accent-light);
-      }
-
-      body .secondary-text {
-        color: var(--text-secondary-light);
-      }
-
-      body .border {
-        border-color: var(--border-light);
-      }
-
-      body .shadow {
-        box-shadow: 0 2px 4px var(--shadow-light);
-      }
-
-      svg.logo {
-        height: 60vh;
-        width: 60vh;
-        margin-bottom: -10vh;
-        margin-top: -10vh;
-      }
-
-      html {
-        height: 100%;
-        width: 100%;
-      }
-
-      body {
-        overflow-x: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-        margin: auto;
-        text-align: center;
-      }
-
-      .links {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-top: 1.25rem;
-        gap: 2rem;
-      }
-
-      .links svg {
-        height: 4vh;
-        width: 4vh;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background-color: var(--background-dark);
-          color: var(--text-primary-dark);
-          font-family: var(--font-stack);
-        }
-
-        body a:hover {
-          color: var(--accent-dark);
-        }
-
-        body .secondary-text {
-          color: var(--text-secondary-dark);
-        }
-
-        body .border {
-          border-color: var(--border-dark);
-        }
-
-        body .shadow {
-          box-shadow: 0 2px 4px var(--shadow-dark);
-        }
-      }
-
-      .bluesky-flutter {
-        display: flex;
-        gap: 0.5em;
-        align-items: center;
-      }
-
-      .bluesky-flutter svg {
-        width: 2em;
-        height: 2em;
-        transition: 200ms;
-      }
-
-      .bluesky-flutter .left {
-        transform-origin: center;
-      }
-      .bluesky-flutter .right {
-        transform-origin: center;
-        transform: scale(-1, 1);
-      }
-      .bluesky-flutter:hover .left,
-      .bluesky-flutter:focus .left {
-        animation: flutter 430ms ease-in-out;
-        --flip: 1;
-      }
-      .bluesky-flutter:hover .right,
-      .bluesky-flutter:focus .right {
-        animation: flutter 500ms ease-in-out;
-        --flip: -1;
-      }
-      .bluesky-flutter:hover svg,
-      .bluesky-flutter:focus svg {
-        transform: rotate(-5deg);
-        transition: 500ms;
-      }
-
-      @media (prefers-reduced-motion) {
-        .bluesky-flutter:hover .left,
-        .bluesky-flutter:focus .left,
-        .bluesky-flutter:hover .right,
-        .bluesky-flutter:focus .right {
-          animation: none;
-        }
-      }
-
-      @keyframes flutter {
-        10% {
-          transform: scale(calc(var(--flip) * 1), 0.9);
-        }
-        20% {
-          transform: scale(calc(var(--flip) * 0.5), 1);
-        }
-        40% {
-          transform: scale(calc(var(--flip) * 0.9), 0.95);
-        }
-        60% {
-          transform: scale(calc(var(--flip) * 0.3), 1);
-        }
-        80% {
-          transform: scale(calc(var(--flip) * 0.9), 0.95);
-        }
-        100% {
-          transform: scale(calc(var(--flip) * 1), 1);
-        }
-      }
-    </style>
+    <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
     <svg
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2448567
--- /dev/null
+++ b/style.css
@@ -0,0 +1,217 @@
+:root {
+  --background-light: #f9f9f9;
+  --text-primary-light: #222222;
+  --text-secondary-light: #4a4a4a;
+  --accent-light: #007aff;
+  --border-light: #e0e0e0;
+  --shadow-light: rgba(0, 0, 0, 0.1);
+
+  --background-dark: #1a1a1a;
+  --text-primary-dark: #f5f5f5;
+  --text-secondary-dark: #cccccc;
+  --accent-dark: #00bfff;
+  --border-dark: #333333;
+  --shadow-dark: rgba(255, 255, 255, 0.1);
+
+  --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster,
+    Comic Sans MS, comic-sans, sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+a {
+  color: unset;
+}
+
+/* Light Theme */
+body {
+  background-color: var(--background-light);
+  color: var(--text-primary-light);
+  font-family: var(--font-stack);
+}
+
+body a:hover {
+  color: var(--accent-light);
+}
+
+button {
+  /* Remove all default styling */
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+
+  /* Fix for odd text sizing in some browsers */
+  line-height: normal;
+
+  /* Prevent text selection */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* Remove default focus styles */
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible {
+  outline: 2px solid #4d90fe;
+  outline-offset: 2px;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+body button {
+  background: none;
+  color: unset;
+}
+body button:hover {
+  color: var(--accent-light);
+}
+
+body .secondary-text {
+  color: var(--text-secondary-light);
+}
+
+body .border {
+  border-color: var(--border-light);
+}
+
+body .shadow {
+  box-shadow: 0 2px 4px var(--shadow-light);
+}
+
+svg.logo {
+  height: 60vh;
+  width: 60vh;
+  margin-bottom: -10vh;
+  margin-top: -10vh;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+  text-align: center;
+}
+
+.links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1.25rem;
+  gap: 2rem;
+}
+
+.links svg {
+  height: 4vh;
+  width: 4vh;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: var(--background-dark);
+    color: var(--text-primary-dark);
+    font-family: var(--font-stack);
+  }
+
+  body a:hover {
+    color: var(--accent-dark);
+  }
+
+  body .secondary-text {
+    color: var(--text-secondary-dark);
+  }
+
+  body .border {
+    border-color: var(--border-dark);
+  }
+
+  body .shadow {
+    box-shadow: 0 2px 4px var(--shadow-dark);
+  }
+}
+
+.bluesky-flutter {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.bluesky-flutter svg {
+  width: 2em;
+  height: 2em;
+  transition: 200ms;
+}
+
+.bluesky-flutter .left {
+  transform-origin: center;
+}
+.bluesky-flutter .right {
+  transform-origin: center;
+  transform: scale(-1, 1);
+}
+.bluesky-flutter:hover .left,
+.bluesky-flutter:focus .left {
+  animation: flutter 430ms ease-in-out;
+  --flip: 1;
+}
+.bluesky-flutter:hover .right,
+.bluesky-flutter:focus .right {
+  animation: flutter 500ms ease-in-out;
+  --flip: -1;
+}
+.bluesky-flutter:hover svg,
+.bluesky-flutter:focus svg {
+  transform: rotate(-5deg);
+  transition: 500ms;
+}
+
+@media (prefers-reduced-motion) {
+  .bluesky-flutter:hover .left,
+  .bluesky-flutter:focus .left,
+  .bluesky-flutter:hover .right,
+  .bluesky-flutter:focus .right {
+    animation: none;
+  }
+}
+
+@keyframes flutter {
+  10% {
+    transform: scale(calc(var(--flip) * 1), 0.9);
+  }
+  20% {
+    transform: scale(calc(var(--flip) * 0.5), 1);
+  }
+  40% {
+    transform: scale(calc(var(--flip) * 0.9), 0.95);
+  }
+  60% {
+    transform: scale(calc(var(--flip) * 0.3), 1);
+  }
+  80% {
+    transform: scale(calc(var(--flip) * 0.9), 0.95);
+  }
+  100% {
+    transform: scale(calc(var(--flip) * 1), 1);
+  }
+}
-- 
2.51.2