From 8e5d6dabdcd690263a792228d2654b2874af9551 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Fri, 11 Mar 2022 10:15:09 -0600
Subject: [PATCH] Port most remaining legacy styles to Tailwind

---
 app/assets/stylesheets/components/base.css    | 16 +++--
 app/assets/stylesheets/legacy.sass.scss       | 23 +++++++-
 app/assets/stylesheets/legacy/_layout.scss    | 58 -------------------
 .../stylesheets/legacy/_mediaqueries.scss     | 33 -----------
 app/assets/stylesheets/legacy/_variables.scss | 13 -----
 app/views/dashboard/index.html.erb            |  2 +-
 6 files changed, 35 insertions(+), 110 deletions(-)
 delete mode 100644 app/assets/stylesheets/legacy/_layout.scss
 delete mode 100644 app/assets/stylesheets/legacy/_mediaqueries.scss
 delete mode 100644 app/assets/stylesheets/legacy/_variables.scss

diff --git a/app/assets/stylesheets/components/base.css b/app/assets/stylesheets/components/base.css
index 5bb472c..6aeb716 100644
--- a/app/assets/stylesheets/components/base.css
+++ b/app/assets/stylesheets/components/base.css
@@ -3,10 +3,6 @@
     @apply leading-none
   }
 
-  /* h1, h2, h3 { */
-  /*   @apply font-light; */
-  /* } */
-
   h1 {
     @apply text-3xl uppercase;
   }
@@ -26,4 +22,16 @@
   main section:first-of-type {
     @apply pt-0;
   }
+
+  main p {
+    @apply mb-4 leading-6;
+  }
+
+  main ul {
+    @apply mb-6;
+  }
+
+  main ul li {
+    @apply leading-6;
+  }
 }
diff --git a/app/assets/stylesheets/legacy.sass.scss b/app/assets/stylesheets/legacy.sass.scss
index 37154e6..9f5e447 100644
--- a/app/assets/stylesheets/legacy.sass.scss
+++ b/app/assets/stylesheets/legacy.sass.scss
@@ -1 +1,22 @@
-@import "legacy/layout";
+body {
+  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
+              url('/img/bg-1.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+body#admin {
+  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
+              url('/img/bg-1.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.ks-site-icon {
+  svg {
+    display: inline-block;
+    height: 1.875rem;
+    vertical-align: top;
+    width: auto;
+  }
+}
diff --git a/app/assets/stylesheets/legacy/_layout.scss b/app/assets/stylesheets/legacy/_layout.scss
deleted file mode 100644
index c7284ba..0000000
--- a/app/assets/stylesheets/legacy/_layout.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-body {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-body#admin {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-.ks-site-icon {
-  svg {
-    display: inline-block;
-    height: 1.875rem;
-    vertical-align: top;
-    width: auto;
-  }
-}
-
-main {
-  p {
-    line-height: 1.5rem;
-    margin-bottom: 1rem;
-
-    &.notice {
-      text-align: center;
-    }
-  }
-
-  ul {
-    margin-bottom: 1.5rem;
-
-    li {
-      line-height: 1.5rem;
-    }
-  }
-}
-
-.grid {
-  display: grid;
-
-  &.services {
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-row-gap: 1rem;
-    grid-column-gap: 2rem;
-
-    @include media-max(small) {
-      grid-template-columns: 1fr;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/legacy/_mediaqueries.scss b/app/assets/stylesheets/legacy/_mediaqueries.scss
deleted file mode 100644
index 44095a9..0000000
--- a/app/assets/stylesheets/legacy/_mediaqueries.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$breakpoints-max: (
-  small: 600px,
-  medium: 960px,
-  large: 1280px
-);
-
-$breakpoints-min: (
-  small: 601px,
-  medium: 961px,
-  large: 1281px
-);
-
-@mixin media-max($screen-size) {
-  @if map-has-key($breakpoints-max, $screen-size) {
-    @media (max-width: map-get($breakpoints-max, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
-
-@mixin media-min($screen-size) {
-  @if map-has-key($breakpoints-min, $screen-size) {
-    @media (min-width: map-get($breakpoints-min, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
diff --git a/app/assets/stylesheets/legacy/_variables.scss b/app/assets/stylesheets/legacy/_variables.scss
deleted file mode 100644
index 04f158f..0000000
--- a/app/assets/stylesheets/legacy/_variables.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$content-width: 800px;
-$content-max-width: 100%;
-
-$text-color-body: #222;
-$text-color-discreet: #888;
-
-$background-color-notice: #efffc4;
-$background-color-alert: #fff4c2;
-
-$color-blue: #0d4f99;
-$color-purple: #8955a0;
-$color-red-bright: #c00;
-$color-red-dark: #990c0e;
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index 3d98b91..bb8619e 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -6,7 +6,7 @@
       Your Kosmos account and password currently give you access to these
       services:
     </p>
-    <div class="grid services mt-12">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 services mt-12">
       <div>
         <h3 class="mb-3.5">
           <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %>