Stop using compass.

Deprecated :(
This commit is contained in:
Justin Hsu 2022-03-17 22:19:41 -04:00
parent 615d2af023
commit 28639a81ff
2 changed files with 52 additions and 55 deletions

View File

@ -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"

View File

@ -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;
}
}