Merge pull request #3 from TyHil/style-guide

Published style guide
TyHil · Mar 12, 2024 · 171f085 · 171f085
2 parents 5c4a61d + 7baeb14
commit 171f085
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 278 deletions.
diff --git a/index.html b/index.html
@@ -31,9 +31,12 @@
     <meta name="twitter:domain" content="tylergordonhill.com" />
 
     <!-- Link Tags -->
-    <link rel="icon" href="typewriter-formatting/tabicon.png" />
-    <link href="https://tylergordonhill.com/global.css" rel="stylesheet" type="text/css" />
-    <link href="typewriter-formatting/style.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" href="/typewriter-formatting/tabicon.png" />
+    <link href="/style-guide/style.css" rel="stylesheet" type="text/css" />
+    <link href="/style-guide/header/style.css" rel="stylesheet" type="text/css" />
+    <link href="/style-guide/inputs/style.css" rel="stylesheet" type="text/css" />
+    <link href="/style-guide/footer/style.css" rel="stylesheet" type="text/css" />
+    <link href="/typewriter-formatting/style.css" rel="stylesheet" type="text/css" />
   </head>
 
   <body>
@@ -395,7 +398,7 @@ <h2 id="title">Typewriter Formatting</h2>
 
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-app-compat.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics-compat.js"></script>
-    <script src="https://tylergordonhill.com/global.js"></script>
-    <script src="typewriter-formatting/script.js"></script>
+    <script src="/style-guide/script.js"></script>
+    <script src="/typewriter-formatting/script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,7 +1,7 @@
 /* Tab Icon */
 
 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-  document.querySelector('link[rel="icon"]').href = 'typewriter-formatting/tabicon-light.png';
+  document.querySelector('link[rel="icon"]').href = '/typewriter-formatting/tabicon-light.png';
 }
 
 /* Constants */

diff --git a/style.css b/style.css
@@ -1,66 +1,14 @@
 /* STYLE GUIDE */
 
-/* Header */
-
-#title {
-  color: var(--dark0);
-}
-#byLine {
-  color: var(--dark1);
-  -webkit-text-decoration-color: var(--dark1);
-  text-decoration-color: var(--dark1);
-}
-#byLine:hover,
-#byLine:focus-visible {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-@media (prefers-color-scheme: light) {
-  #title {
-    color: var(--light1);
-  }
-  #byLine {
-    color: var(--light2);
-    -webkit-text-decoration-color: var(--light2);
-    text-decoration-color: var(--light2);
-  }
-  #byLine:hover,
-  #byLine:focus-visible {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-}
-
-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.2rem;
-  background-image: var(--primary);
-}
-#title {
-  text-align: center;
-}
-#byLine {
-  height: 3rem;
-  display: inline-block;
-  padding: 0.8rem 1rem 0.6rem 1rem;
-  border-radius: 1.5rem;
-  transition: background-color 200ms;
-  text-align: center;
-}
-
-/*Extra*/
+/* Header Extra */
 
 header,
 header > * {
   position: relative;
 }
 header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.2rem;
   margin-bottom: 1.5rem;
+  padding: 0;
 }
 #title {
   text-align: center;
@@ -76,184 +24,7 @@ header {
   height: calc(100% + 1.5rem);
 }
 
-/* Inputs */
-
-/*General*/
-
-input,
-button {
-  border: none;
-}
-input.large,
-button.large {
-  font-family: Tahoma, sans-serif;
-}
-.largeInputBox {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.smallInputBox {
-  display: flex;
-  gap: 0.3rem;
-}
-.inputBox:not(.checkbox) {
-  justify-content: space-between;
-}
-input.disabled,
-label.disabled {
-  color: var(--light2);
-  cursor: default;
-}
-
-/*Button*/
-
-button,
-a.button {
-  background-color: var(--dark1);
-  color: var(--light0);
-  transition: background-color 200ms;
-}
-button.disabled,
-a.button.disabled,
-button:disabled {
-  background-color: var(--dark2);
-  color: var(--light2);
-  cursor: default;
-}
-button.small,
-a.button.small {
-  font-size: 0.8rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 0.25rem;
-}
-button.medium,
-a.button.medium {
-  font-size: 1rem;
-  line-height: 1rem;
-  padding: 0.45rem 0.75rem;
-  border-radius: 1.5rem;
-}
-button.large,
-a.button.large {
-  font-size: 1rem;
-  line-height: 1.6rem;
-  padding: 0.7rem 1rem;
-  border-radius: 1.5rem;
-}
-button:hover,
-button:focus-visible,
-a.button:hover,
-a.button:focus-visible {
-  background-color: var(--dark2);
-}
-a.button {
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-/*Text, number, and textarea*/
-
-input[type='text'],
-input[type='number'],
-textarea {
-  background-color: var(--dark1);
-  color: var(--light0);
-}
-input[type='text'].disabled,
-input[type='number'].disabled,
-textarea.disabled,
-input[type='text']:disabled,
-input[type='number']:disabled,
-textarea:disabled {
-  background-color: var(--dark2);
-  color: var(--light2);
-}
-input::placeholder {
-  color: var(--light2);
-}
-input[type='text'],
-input[type='number'],
-textarea {
-  border: none;
-}
-input[type='text'],
-input[type='number'] {
-  transition: background-color 200ms;
-}
-input[type='text'].small,
-input[type='number'].small,
-textarea {
-  margin: 0.1rem 0;
-  padding: 0.15rem 0.25rem;
-  border-radius: 0.25rem;
-}
-input[type='text'].medium,
-input[type='number'].medium {
-  line-height: 1rem;
-  padding: 0.45rem 0.75rem;
-  border-radius: 1.5rem;
-}
-input[type='text'].large,
-input[type='number'].large {
-  font-size: 1rem;
-  line-height: 1.6rem;
-  padding: 0.7rem 1rem;
-  border-radius: 1.5rem;
-}
-input[type='text']:hover,
-input[type='text']:focus-visible,
-input[type='number']:hover,
-input[type='number']:focus-visible {
-  background-color: var(--dark2);
-}
-/*Scrollbar*/
-textarea {
-  scrollbar-color: rgba(0, 0, 0, 0.24) var(--dark1);
-}
-textarea::-webkit-scrollbar-track {
-  background-color: var(--dark1);
-}
-textarea::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.24);
-}
-textarea::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.28);
-}
-@media (prefers-color-scheme: light) {
-  textarea::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.24);
-  }
-  textarea::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.28);
-  }
-}
-
-/*File*/
-
-input[type='file']::file-selector-button {
-  border: none;
-  border-radius: 0.25rem;
-  background-color: var(--dark1);
-  color: var(--light0);
-  cursor: pointer;
-}
-input[type='file'].disabled::file-selector-button,
-input[type='file']:disabled::file-selector-button {
-  background-color: var(--dark2);
-  color: var(--light2);
-}
-input[type='file']::file-selector-button:hover,
-input[type='file']:focus-visible::file-selector-button {
-  background-color: var(--dark2);
-}
-input[type='file']::file-selector-button {
-  line-height: 1rem;
-  padding: 0.2rem 0.5rem;
-}
-
-/*Extra*/
+/* Inputs Extra */
 
 button,
 a.button {
@@ -310,46 +81,6 @@ input[type='file']:focus-visible::file-selector-button {
   background-color: var(--dark3);
 }
 
-/* Footer */
-
-footer {
-  padding: 2rem 1rem;
-  background-color: var(--dark1);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-#footer-main {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  gap: 2rem;
-}
-#footer-main > div {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-#footer-sub {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1rem;
-}
-footer p {
-  margin-bottom: 0.25rem;
-}
-footer a,
-footer a:visited {
-  color: var(--light1);
-  text-decoration-color: transparent;
-  transition: text-decoration-color 200ms;
-}
-footer a:hover {
-  text-decoration-color: var(--light1);
-}
-
 /* STYLES */
 
 /* Main */