angeley.es source
Clone
HTTPS:
git clone https://vervis.peers.community/repos/rwVmE
SSH:
git clone USERNAME@vervis.peers.community:rwVmE
Branches
Tags
default.sass
/// Colours -------------------------------------------------------------- ///
$red: #cc0000 // logo
$redorange: #ef2929 // logo hover
$ochre: #c4a000 // heading
$lightblue: #739fcf // link
$lightmint: #d3d7cf // nav link
$aqua: #34e2e2 // link hover
$bluegray: #555753 // hr
$lightgray: #eeeeec // nav link hover
$gray80: #ccc // body text
$darkgray: #555 // footer text
$black: #000 // body background
$gray25: #404040 // addition for del, code, blockquote
/// Mixins --------------------------------------------------------------- ///
// Format @font-face src value with the correct paths
@function font-src($family, $weight, $style, $variant)
$path: "/fonts/" + to-lower-case($family) + "/"
$basename: to-lower-case($family) + "-" + to-lower-case($variant)
@if $variant == "Bold Italic"
$basename: to-lower-case($family) + "-bold-italic"
$local: local($family + " " + $variant)
$woff2: url($path + $basename + ".woff2") format("woff2")
$woff: url($path + $basename + ".woff") format("woff")
@return $local, $woff2, $woff
// Add @font-face attributes
=font-face($family, $weight, $style, $variant)
@font-face
font-family: $family
font-weight: $weight
font-style: $style
src: font-src($family, $weight, $style, $variant)
// Set font attributes and colour
=font--cabin($weight, $size, $color)
font: $weight $size Cabin, Helvetica, sans-serif
color: $color
=font--hack($weight, $size, $color)
font: $weight $size Hack, monospace
color: $color
// Set default link style
=link--normal
+font--cabin(400, 2rem, $lightblue)
text-decoration: none
border-bottom: 0.1rem solid
padding: 0 0 0.1rem 0
&:hover
color: $aqua
/// Start of css output -------------------------------------------------- ///
/** Initialise fonts **/
+font-face("Cabin", 400, normal, "Regular")
+font-face("Cabin", 400, italic, "Italic")
+font-face("Cabin", 600, normal, "Bold")
+font-face("Cabin", 600, italic, "Bold Italic")
+font-face("Hack", 400, normal, "Regular")
/** Global **/
*
margin: 0
padding: 0
box-sizing: border-box
/** html and body tags **/
.default
font-size: 62.5%
.body
max-width: 80rem
margin: 0 auto
padding: 0 2rem 0
background: $black
/** Header **/
.header
text-align: center
margin: 4rem auto 2rem
.header-title__link
+font--cabin(400, #{7rem}/#{7.5rem}, $red)
letter-spacing: 0.1rem
text-decoration: none
&:hover
color: $redorange
/** Navigation **/
.nav
margin: 2rem auto
.nav__link
+font--cabin(400, 2.2rem, $lightmint)
margin: 0 1.5rem
text-decoration: none
&:hover
color: $lightgray
/** Footer **/
.footer
+font--cabin(400, 1.5rem, $darkgray)
text-align: center
margin: 10rem auto 3rem
.footer__link
+link--normal
font-size: 1.5rem
/** Main content
Supply a small set of defaults, some for Markdown formatting **/
.main
+font--cabin(400, #{2rem}/#{2.8rem}, $gray80)
a
+link--normal
abbr
cursor: help
text-decoration: none
border-bottom: 0.2rem dotted
b
font-weight: 600
blockquote
margin: 0 2rem
padding: 0rem 2rem
border-left: 1rem solid $gray25
font-style: italic
// Collapse outer left/right margins in nested blockquote
blockquote blockquote
margin: 0
border-left: 0.5rem solid $gray25
// Insert additional space between blockquotes and paragraphs
blockquote + p, p + blockquote
margin-top: 3rem
cite
font-style: italic
font-size: 2.1rem
code, samp, var
+font--hack(400, 1.5rem, $gray80)
background: $gray25
margin: 0 0.2rem
padding: 0.2rem 0.4rem 0.1rem
del
color: $gray25
background: $black
// Do not use details/summary in Markdown files, it will be enclosed by
// paragraph tags, resulting in invalid HTML
details
padding: 0 0 0 3rem
summary
margin: 0 0 1rem -2.5rem
color: $lightblue
cursor: context-menu
&:hover
color: $aqua
dfn
font-weight: 600
font-style: normal
dl
margin: 2rem 0
dt
margin: 1rem 0 0 0
font-weight: 600
dd
margin: 0 0 1rem 4rem
em, i
font-style: italic
h1
+font--cabin(400, 4.5rem, $gray80)
margin: 5rem 0 2rem
h2
+font--cabin(400, 4rem, $gray80)
margin: 5rem 0 2rem
h3
+font--cabin(600, 3.2rem, $gray80)
margin: 4.5rem 0 1.5rem
h4
+font--cabin(600, 3rem, $gray80)
margin: 3rem 0 1.5rem
h5
+font--cabin(600, 2.8rem, $gray80)
margin: 3rem 0 1.5rem
h6
+font--cabin(600, 2.3rem, $gray80)
margin: 3rem 0 1.5rem
// When a h2 heading is immediately under h1, decrease the margin between
// headings. Likewise for h2 to h3
h1 + h2
margin: 2rem 0
h2 + h3, h3 + h4, h4 + h5, h5 + h6
margin: 2rem 0 1.5rem
hr
border: 0.1rem solid $bluegray
margin: 5rem auto
img
border: 0
margin: 2rem 0
mark
background: $ochre
padding: 0.2rem 0.5rem
ol
list-style-type: decimal
margin: 2rem
ol li, ul li
padding: 0 0 0 0.5rem
p
margin: 1.5rem 0
pre
+font--hack(400, 1.5rem, $gray80)
margin: 3rem 0
padding: 2rem
background: $gray25
word-wrap: break-word
overflow: auto
s
text-decoration: line-through
small
font-size: 1.5rem
strong
font-weight: 600
font-size: 2.1rem
sub, sup
font-size: 1.5rem
table
margin: 3rem 0
border-collapse: collapse
overflow: auto
td
padding: 0.5rem 0 0
th
padding: 0 3rem 1rem 0
tfoot, thead
font-weight: 600
tbody
font-size: 1.8rem
u
text-decoration: underline
ul
list-style-type: disc
margin: 2rem 0 2rem 2rem
ul li ul
list-style-type: circle
margin: 0.5rem 0 1rem 2rem
// Pandoc uses a div instead of figure/figcaption tags
figure, .figure
margin: 3rem 0
figure img, .figure img
margin: 0
figcaption, .caption
+font--cabin(400, 1.5rem, $darkgray)
font-style: italic
margin: 0.5rem 0 1.5rem
// Pandoc compiles code fences as pre with nested code tag
// Drop code padding
pre code
padding: 0
// Pandoc assigns a .header class to the 1st row of tables,
// which may become a naming conflict in some cases */
thead, tr.header
text-align: left
border-bottom: 0.1rem solid $bluegray
// Pandoc footnotes
.footnotes li *
font-size: 1.8rem
line-height: 2rem
.footnotes li a[href^="#fnref"]
padding: 0 0 0 0.5rem
border: 0
a.footnoteRef
border: 0
// Classes for specific usage
date.date--icon, time.time--icon
&:before
content: "🕒"
margin: 0 0.5rem 0 0
h1.main-title
+font--cabin(400, 4.5rem, $ochre)
margin: 4rem 0 2rem
strong.strong--double
font-size: 2.1rem
border-bottom: 0.5rem double
strong.strong--em
font-size: 2.1rem
font-style: italic
/** Add a media query to make adjustments for smaller screens **/
@media (max-width: 480px)
/* Scale overall font size */
.default
font-size: 56.25%
/* Decrease header title font size */
.header-title__link
+font--cabin(400, 12vw, $red)
/* Increase nav link line height */
.nav__link
+font--cabin(400, #{2.2rem}/#{3.2rem}, $lightmint)
/* Scale footer top margin to viewport width */
.footer
margin: 15vw auto 3rem
/* Scale heading font sizes */
.main
h1
font-size: 11vw
h2
font-size: 10vw
h3
font-size: 9vw
h4
font-size: 8.5vw
h5
font-size: 8vw
h6
font-size: 7.5vw
h1.main-title
font-size: 11vw
margin: 4rem 0 0.5rem