Theme Rework

Added skeleton-auto.css, which dynamically sets the theme based on the browser and/or the Operating Systems colors, if supported. Set Default Theme to Auto with comments on helping switch to light and dark theme stylesheets. Darkened the skeleton-dark.css background color to the same as the color that skeleton-auto.css sets it as, which is html recommended standard color of #121212.
lnatero · Feb 9, 2022 · 8a06a7c · 8a06a7c
1 parent 5a6b21b
commit 8a06a7c
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 2 deletions.
diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
@@ -0,0 +1,171 @@
+/*
+* littlelink V1
+* https://littlelink.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/21/2019
+*
+* Built using:
+*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Code
+- Spacing
+- Utilities
+*
+* You'll find the button css in css/brands.css.
+*
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  text-align: center;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column {
+  position: center;
+  width: 100%;
+  float: center;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 0; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+
+html {
+  font-size: 100%;
+  color-scheme: light dark;
+}
+body {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1 {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-weight: 800; }
+h1 { font-size:24px; line-height: 64px; letter-spacing: 0;}
+
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 48px; line-height: 96px;}
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #0085FF; }
+a:hover {
+  color: #0085FF; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  color: #000000;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+p,
+ol {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css
@@ -77,7 +77,7 @@ are based on 10px sizing. So basically 1.5rem = 15px :) */
 html {
   font-size: 100%; }
 body {
-  background-color: #292929;
+  background-color: #121212;
   font-size: 18px;
   line-height: 24px;
   font-weight: 400;

diff --git a/index.html b/index.html
@@ -17,12 +17,21 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
 
+
   <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/skeleton-light.css">
+
+  <!-- Themes:
+         Auto:   css/skeleton-auto.css
+         Light:  css/skeleton-light.css
+         Dark:   css/skeleton-dark.css
+  -->
+  <link rel="stylesheet" href="css/skeleton-auto.css">
+
   <link rel="stylesheet" href="css/brands.css">
 
+
   <!-- Favicon
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="icon" type="image/png" href="images/avatar.png">