app.sass

@use "sass:meta"

@use "@fortawesome/fontawesome-free/scss/fontawesome.scss" as * with ($fa-font-path: "./fonts")
@use "@fortawesome/fontawesome-free/scss/solid.scss" as * with ($fa-font-path: "./fonts")
@use "@fortawesome/fontawesome-free/scss/brands.scss" as * with ($fa-font-path: "./fonts")

@use "bootstrap/scss/bootstrap.scss" as *

@use "./pandoc-solarized.css" as *

$body-bg: #fffff8
@use "typeface-et-book/et-book/et-book.css" as *

@import url('https://fonts.googleapis.com/css?family=Open+Sans|B612|B612+Mono&display=swap')

body
    font-family: 'B612 Mono', monospace
    margin: 2.5rem

body#body-cv
    background-color: transparent

#copyright
    font-size: 0.8rem
    font-weight: 300

.badge, #copyright
    font-family: 'B612 Mono', monospace
    font-size: 0.8rem
    font-weight: 300

.badge:before
    content: "["

.badge:after
    content: "]"

a.badge.bg-light
    background-color: transparent !important

article
    font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
    font-size: 1.2rem

.sourceCode, .pre
    font-size: 0.9rem

.sourceCode.diff span.st
    color: #DC322F

.sourceCode.diff span.va
    color: #2AA198

.sourceCode.pre
    color: #000
    background-color: transparent

.pre
    color: #fff
    background-color: #000

.pre, .mono-flow
    padding: 1em 2em 1em 1em
    border-radius: 1em
    font-size: 10pt
    font-family: 'B612 Mono', monospace

#ifdef .pre
    color: #000
    background-color: transparent
    border: solid 1px #000
    opacity: 0.5
    font-size: 5pt
    float: right
    position: relative
    left: 10px

.spacer
    height: 20px

.box span.tag
    border-radius: 0

a
    text-decoration: none

blockquote
    display: block
    margin-block-start: 1em
    margin-block-end: 1em
    margin-inline-start: 40px
    margin-inline-end: 40px

blockquote footer
    display: block
    font-size: 1.1rem
    text-align: right
    margin-inline-end: 40px

blockquote footer:before
    content: "— "

#nav-side
    background-color: inherit
    border: inherit

#nav-side > .card-body
    padding-left: 0
    padding-top: 0

.d-lg-block #content
    @extend .col-9

.d-lg-none #content
    @extend .col-12

#content-cv
    @extend .col-12

@media print
    body
        font-size: 12pt
        margin-top: 2cm
        margin-right: 2cm
        margin-bottom: 1.5cm
        margin-left: 2cm

// WARNING: You may not @extend an outer selector from within @media so I am
// not doing @extend .col-12 for print.
@media print
    #content
        flex: 0 0 100%
        max-width: 100%

$date: #808080

// NOTE: First group of 3.
// SEE: https://colorbrewer2.org/#type=qualitative&scheme=Set3&n=5
// ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3' ]
$updo: #8dd3c7
$blobs: #bebada
$flaretiming: #fb8072

// NOTE: Second group of 6.
// SEE: https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=6
// ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c']
$cit: #a6cee3
$bracco: #1f78b4
$aqualinc: #b2df8a
$tagly: #33a02c
$apress: #fb9a99
$travieo: #e31a1c

// NOTE: Third group of 5.
// SEE: https://colorbrewer2.org/#type=qualitative&scheme=Dark2&n=5
// ['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e']
$cactus: #1b9e77
$croplogic: #7570b3
$waimak: #e7298a
$nutricentre: #66a61e
$niwa: #e6ab02

// NOTE: Fourth group of 4.
// SEE: https://colorbrewer2.org/#type=qualitative&scheme=Set2&n=4
// ['#66c2a5','#fc8d62','#8da0cb','#e78ac3']
$obvious: #66c2a5
$aspelle: #fc8d62
$sml: #8da0cb
$trimble: #e78ac3

$twitter: #1da1f2
$linkedin: #0077b5
$stackoverflow: #f48024
$skype: #00aff0

.date,
.date > code
    color: $date

.updo,
.updo > code
    color: $updo

.blobs,
.blobs > code
    color: $blobs

.flaretiming,
.flaretiming > code
    color: $flaretiming

.cit,
.cit > code
    color: $cit

.bracco,
.bracco > code
    color: $bracco

.aqualinc,
.aqualinc > code
    color: $aqualinc

.cactus,
.cactus > code
    color: $cactus

.tagly,
.tagly > code
    color: $tagly

.apress,
.apress > code
    color: $apress

.travieo,
.travieo > code
    color: $travieo

.croplogic,
.croplogic > code
    color: $croplogic

.waimak,
.waimak > code
    color: $waimak

.nutricentre,
.nutricentre > code
    color: $nutricentre

.niwa,
.niwa > code
    color: $niwa

.aspelle,
.aspelle > code
    color: $aspelle

.obvious,
.obvious > code
    color: $obvious

.sml,
.sml > code
    color: $sml

.trimble,
.trimble > code
    color: $trimble

h2.work-section
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
    font-size: 1rem
    padding-left: 1.5rem

div.work-history > ul
    list-style-type: none
    padding-inline-start: 0
    text-indent: -3.2rem
    margin-left: 3.2rem

div.work-history,
div.work-history > pre
    margin: 0

a:target::after
    content: " ☜"

#nav-side a.nav-link
    font-size: 1.4rem
    font-weight: bold

a
    color: a11y-color(#007bff, #fffff8)

dd
    margin-left: 2em

.hint, .tip, .note, .warning
    margin-bottom: 1em

.hint,
.tip
    background: #dbfaf4

.note
    background: #e7f2fa

.warning
    background:#ffedcc 

.hint > div.title > p:before,
.tip > div.title > p:before,
.note > div.title > p:before
    content: "✓"
    display: inline-block
    padding-left: 0.5em
    padding-right: 0.2em

.warning > div.title > p:before
    content: "!"
    display: inline-block
    padding-left: 0.5em
    padding-right: 0.2em

.hint > div.title,
.tip > div.title,
.note > div.title,
.warning > div.title
    font-family: 'B612 Mono', monospace

.tip > div.title,
.hint > div.title
    color: #1abc9c

.note > div.title
    color: #6ab0de

.warning > div.title
    color: #f0b37e 

.hint > p,
.tip > p,
.note > p,
.warning > p
    padding-left: 0.5em

.hint,
.tip,
.note,
.warning
    padding: 0em 0.5em

div#services-list ul
    list-style-type: none