From 28639a81ff4789ff1ce28e762789a1dc7fef9e46 Mon Sep 17 00:00:00 2001
From: Justin Hsu <email@justinh.su>
Date: Thu, 17 Mar 2022 22:19:41 -0400
Subject: [PATCH] Stop using compass.

Deprecated :(
---
 app/Main.hs    |  8 ++--
 css/style.scss | 99 ++++++++++++++++++++++++--------------------------
 2 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/app/Main.hs b/app/Main.hs
index b8c2904..b9a8718 100644
--- a/app/Main.hs
+++ b/app/Main.hs
@@ -29,10 +29,10 @@ bibSources = [ "bibs/header.bib"
 contentSections :: [String]
 contentSections = [ "contacts", "about", "news", "biblio" ]
 --------------------------------------------------------------------------------
-compass :: Compiler (Item String)
-compass =
+sass :: Compiler (Item String)
+sass =
     getResourceString >>=
-    withItemBody (unixFilter "sass" ["-s", "--scss", "--compass"])
+    withItemBody (unixFilter "sass" ["-s", "--scss"])
 
 b2bflags :: [String]
 b2bflags = [ "--expand"
@@ -70,7 +70,7 @@ main = hakyllWith config $ do
 
     match (fromGlob "css/*.scss") $ do
         route $ setExtension "css"
-        compile $ compass
+        compile $ sass
 
     match (fromGlob "content/*.md") $ do
         route $ setExtension "html"
diff --git a/css/style.scss b/css/style.scss
index a9b31a8..8e2414a 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,68 +1,66 @@
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/box-shadow";
-@import "compass/typography/links/link-colors";
-@import "compass/typography/links/unstyled-link";
-@import "compass/typography/links/hover-link";
-@import "compass/typography/vertical_rhythm";
-
 $break-point: 45em;
 $bg-color: #EEEEEE;
 $main-color: #2196F3;
 $acc-color: #C51162;
 
 $base-font-size: 16px;
-$base-line-height: 24px;
-$rhythm-unit: "em";
-$min-line-padding: 1px;
-@include establish-baseline;
 
-$text-pad: rhythm(0.5);
+$main-pad: 0.75em;
+$mini-pad: 0.25em;
 
 @mixin flexed {
-  @include display-flex;
-  @include flex-wrap(nowrap);
-  @include align-items(center);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+@mixin hover-link {
+  text-decoration: none;
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
 }
 
 body {
   margin: 0;
   background: $bg-color;
+
   a {
+    color: $acc-color;
     @include hover-link;
-    @include link-colors($acc-color);
   }
 }
 
 // Default table style sets the wrong font weight
 // if we set this in body.
 * {
-  @include adjust-font-size-to(1em);
+  font-size: $base-font-size;
+  line-height: 1.5em;
   font-family: 'roboto', sans-serif;
   font-weight: 300;
 }
 
 .container {
   @include flexed;
-  @include flex-direction(column);  
-  @include justify-content(flex-start);
+  flex-direction: column;
+  justify-content: flex-start;
 
   h1 {
-    @include adjust-font-size-to(2em, 1);
+    font-size: 2em;
   }
 
   h2 {
-    @include adjust-font-size-to(1.5em, 1);
+    font-size: 1.5em;
   }
 
   p {
-    @include adjust-font-size-to(1em);
+    font-size: 1em;
   }
 }
 
 .container > * {
   width: $break-point;
-  margin: $text-pad;
+  margin: $main-pad;
 }
 
 @media all and (max-width: $break-point) {
@@ -73,12 +71,12 @@ body {
 
 // Top banner.
 .header {
-  @include single-box-shadow(0, 10px, 5px, -10px);
+  box-shadow: 0 10px 5px -10px;
   background: $main-color;
-  padding: $text-pad;
+  padding: $main-pad;
 
   h1 {
-    @include adjust-font-size-to(4em);
+    font-size: 4em;
     color: white;
   }
 }
@@ -86,8 +84,8 @@ body {
 // The top box. About, picture, and contact.
 .topbox {
   @include flexed;
-  @include flex-direction(row);
-  @include justify-content(space-around);
+  flex-direction: row;
+  justify-content: space-around;
   background: white;
 }
 
@@ -101,32 +99,31 @@ body {
 // Bar containing picture and contact info.
 .bio-bar {
   @include flexed;
-  @include flex-direction(column);
-  @include justify-content(space-around);
-  // @include flex(1 1);
-  @include order(2);
+  flex-direction: column;
+  justify-content: space-around;
+  order: 2;
 }
 
 @media all and (max-width: $break-point) {
   .topbox {
-    @include flex-direction(column);
-    @include align-items(stretch);
+    flex-direction: column;
+    align-items: stretch;
   }
 
   .bio-bar {
-    @include flex-direction(row);  
-    @include order(1);
+    flex-direction: row;
+    order: 1;
   }
 }
 
 .picture {
   // @include flex(1 1);
-  padding: $text-pad;
+  padding: $main-pad;
 }
 
 .contact {
   // @include flex(1 1);
-  padding: $text-pad;
+  padding: $main-pad;
 
   h2 {
     color: $main-color;
@@ -136,12 +133,12 @@ body {
 // About cell ~ 2x sidebar in normal mode
 .about {
   // @include flex(2 1);
-  padding: $text-pad;
+  padding: $mini-pad;
 }
 
 @media all and (max-width: $break-point) {
   .about {
-    @include order(2);
+    order: 2;
   }
 }
 
@@ -149,21 +146,21 @@ body {
 #mini-header {
   background: $main-color;
   color: white;
-  @include adjust-font-size-to(3em,1);
-  padding: $text-pad;
+  font-size: 3em;
+  padding: $mini-pad;
 }
 
 #mini-header-alt {
   background: $acc-color;
   color: white;
-  @include adjust-font-size-to(3em,1);
-  padding: $text-pad;
+  font-size: 3em;
+  padding: $mini-pad;
 }
 
 // Main unit for sections.
 #card {
-  padding: $text-pad;
-  @include single-box-shadow(0, 11px, 5px, -10px);
+  padding: $main-pad;
+  box-shadow: 0 11px 5px -10px;
   background: white;
   h1 {
     background: $main-color;
@@ -193,12 +190,12 @@ body {
 }
 
 #drafts, #thesis, #pubs, #invite {
-  padding: $text-pad;
+  padding: $mini-pad;
 }
 
 #bibcell {
   vertical-align: top;
-  padding: $text-pad;
+  padding: $mini-pad;
 }
 
 // Latex parsed as {H} turns into spans, make these bold.
@@ -213,7 +210,7 @@ footer * {
   margin: 0;
   a {
     // Turn off colors. Using both colors together looks bad.
-    @include unstyled-link;
+    color: inherit;
     @include hover-link;
   }
-}
+}