Commit 9db8c80a authored by Henrik Tramberend's avatar Henrik Tramberend
Browse files

Add new SCSS style sheet and compiler

Style sheets can now be added in CSS or SCSS format. SCSS files are
automatically compiled to CSS and added as a dependency to whatever
target uses them. Which means changes to SCSS files are picked up by
`decker watch` and `decker server`.
parent b538e45f
......@@ -3,7 +3,7 @@ import Action
import Common
import Context
import Control.Exception
import Control.Monad ()
import Control.Monad (when)
import Data.IORef ()
import Data.List
import Data.Maybe
......@@ -14,12 +14,12 @@ import External
import GHC.Conc (numCapabilities)
import Project
import Resources
import System.Environment
import System.Exit
import System.Directory (copyFile)
import System.FilePath ()
import qualified Text.Mustache as M ()
import Text.Pandoc ()
import Text.Printf ()
import qualified Text.Sass as Sass
import Utilities
main :: IO ()
......@@ -159,6 +159,21 @@ main = do
need [src]
pdflatex ["-output-directory", dir, src]
pdf2svg [pdf, out]
priority 2 $
"//*.css" %> \out -> do
let src = out -<.> ".scss"
exists <- doesFileExist src
putNormal $ src ++ " exists: " ++ (show exists)
when exists $ do
need [src]
putNormal ("# scss (for " ++ makeRelativeTo projectDir out ++ ")")
scss <- liftIO $ readFile src
result <- liftIO $ Sass.compileString scss Sass.def
case result of
Left err -> do
msg <- liftIO $ Sass.errorMessage err
throw (SassException msg)
Right css -> liftIO $ writeFile out css
--
phony "clean" $ do
removeFilesAfter publicDir ["//"]
......
......@@ -42,6 +42,7 @@ executable decker
build-depends: base
, Glob
, HTTP
, hsass
, aeson
, ansi-terminal
, array
......
@import url("fonts/roboto.css");
@import url("fonts/source-code-pro.css");
/**
* A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is darkblue.
*
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #fff;
background-color: #fff;
}
.reveal .slides {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: normal;
color: #000;
}
.reveal .smalltext {
font-size: 26px;
}
::selection {
color: #fff;
background: rgba(0, 0, 0, 0.99);
text-shadow: none;
}
.reveal .slides > section,
.reveal .slides > section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal .slides h1,
.reveal .slides h2,
.reveal .slides h3,
.reveal .slides h4,
.reveal .slides h5,
.reveal .slides h6 {
margin: 0 0 20px 0;
color: #777;
font-family: 'Roboto', sans-serif;
font-weight: normal;
line-height: 1.3;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word;
}
.reveal .white h1,
.reveal .white h2 {
color: #eee;
}
.reveal .black h1,
.reveal .black h2 {
color: #111;
}
.reveal .white {
color: #eee;
}
.reveal .speaker-notes h1,
.reveal .speaker-notes h2,
.reveal .speaker-notes h3,
.reveal .speaker-notes h4,
.reveal .speaker-notes h5,
.reveal .speaker-notes h6 {
color: #FFF;
font-weight: bold;
margin-bottom: 0.2em;
}
.reveal .speaker-notes h1 {
text-decoration: underline;
margin-bottom: 0.4em;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: 20px 0;
line-height: 1.3;
}
/* Ensure certain elements are never larger than the slide itself */
/*
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
*/
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal q,
.reveal blockquote {
quotes: none;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: 'Source Code Pro', monospace;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.reveal .slides code {
font-family: 'Source Code Pro', monospace;
/* background: #FFF; */
font-size: 100%;
/* font-weight: bold; */
color: #900;
}
.reveal .slides pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 500px;
word-wrap: normal;
background: #EEE;
color: #000;
border: 0.05em solid #777;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center;
}
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right;
}
.reveal table tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
}
.reveal sub {
vertical-align: sub;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #009;
text-decoration: none;
-webkit-transition: color 0.15s ease;
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
}
.reveal a:hover {
color: blue;
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: #00004d;
}
.reveal section img.float-left {
float: left;
}
.reveal section img.float-right {
float: right;
}
/*********************************************
* IMAGES
*********************************************/
.reveal section img {
margin: 15px 0px;
border: none;
box-shadow: none;
}
.reveal a img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border: none;
box-shadow: none;
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
border-right-color: #009;
}
.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
border-left-color: #009;
}
.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
border-bottom-color: #009;
}
.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
border-top-color: #009;
}
.reveal .controls div.navigate-left.enabled:hover {
border-right-color: blue;
}
.reveal .controls div.navigate-right.enabled:hover {
border-left-color: blue;
}
.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: blue;
}
.reveal .controls div.navigate-down.enabled:hover {
border-top-color: blue;
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
}
.reveal .progress span {
background: #777;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #009;
background-color: rgba(255, 255, 255, 0);
}
.reveal section {
text-align: left;
line-height: 1.4em;
}
.reveal section h1 {
font-size: 1.5em;
font-weight: bold;
margin: 0 0 0.8em 0;
}
.reveal section h2 {
font-size: 1.2em;
font-weight: bold;
margin: 0em 0 0.5em 0;
}
.reveal section h3 {
font-size: 1.0em;
font-weight: bold;
margin: 0.0em 0 0.5em 0;
}
.reveal section .shadowed h1,
.reveal section .shadowed h2,
.reveal section .shadowed h3,
.reveal section .shadowed p,
.reveal section .shadowed ul,
.reveal section .shadowed ol,
.reveal section .shadowed li {
text-shadow: 0.05em 0.05em #fff, -0.05em -0.05em #fff, -0.05em 0.05em #fff, 0.05em -0.05em #fff;
}
.reveal section h1.title {
color: #000;
}
.reveal section h1.subtitle {
color: #666;
}
.reveal section h2.author {
color: #666;
}
.reveal section h3.date {
color: #666;
}
.reveal section figure figcaption {
font-size: 0.8em;
font-style: italic;
text-align: center;
}
.reveal section pre {
font-size: 80%;
width: 100%;
padding: 0.2;
margin: 0 0 0.5em 0;
}
.reveal section div.code-size-90 pre code {
font-size: 90%;
}
.reveal section div.code-size-80 pre code {
font-size: 80%;
}
.reveal section div.code-size-70 pre code {
font-size: 70%;
}
.reveal section div.code-size-60 pre code {
font-size: 60%;
}
.reveal section div.code-size-50 pre code {
font-size: 50%;
}
.reveal section ul,
.reveal section ol {
margin: 0 0 0.5em 1.4em;
}
.reveal section figure,
.reveal section p {
margin: 0 0 0.5em 0;
}
.reveal section img {
width: 100%;
margin: 0px auto;
display: block;
}
.reveal section video {
width: 100%;
margin: 0px auto;
display: block;
}
.reveal section.img-center img {
margin: 0px auto;
display: block;
}
.reveal section.img-nocenter img {
margin: 0px 0px;
display: inline;
}
.reveal section div.slide-column div {
margin-top: 0.2em;
}
.reveal section div.slide-column div:first-child {
margin-top: 0;
}
.reveal section div.box.definition {
padding: 0 0.5em 0 0.5em;
margin: 0 0 0.5em 0;
background-color: #aea;
border: 0.1em solid #8b8;
}
.reveal section div.box.definition h2 {
padding: 0 0.5em 0 0.5em;
margin: 0 -0.4em 0.5em -0.4em;
color: #eee;
background-color: #0c0;
}
.reveal section div.box.alert {
padding: 0 0.5em 0 0.5em;
margin: 0 0 0.5em 0;
background-color: #fbb;
border: 0.1em solid #b88;
}
.reveal section div.box.alert h2 {
padding: 0 0.5em 0 0.5em;
margin: 0 -0.4em 0.5em -0.4em;
color: #eee;
background-color: #d00;
}
.reveal section div.box.equation {
padding: 0 0.5em 0 0.5em;
margin: 0 0 0.5em 0;
background-color: #ddd;
border: 0.1em solid #bbb;
}
.reveal section div.box.equation h2 {
padding: 0 0.5em 0 0.5em;
margin: 0 -0.4em 0.5em -0.4em;
color: #eee;
background-color: #666;
}
/* CSS3 columns with split and join classes */
div.css-columns {
column-count: 2;
column-gap: 1em;
column-rule-style: none;
}
div.box {
break-inside: avoid-column;
}
/* Slide masters with top, bottom, left, center, right areas and flexbox grow support */
.reveal section div.multi-column-row {
display:flex;
flex-flow: row nowrap;
align-items: flex;
}
.reveal section div.multi-column-row-3 > div.column-1 {padding-right:0.4em;}
.reveal section div.multi-column-row-3 > div.column-2 {padding-right:0.4em;padding-left:0.4em;}