diff --git a/.Rprofile b/.Rprofile index 8fdb28e..6249740 100644 --- a/.Rprofile +++ b/.Rprofile @@ -3,6 +3,7 @@ if (file.exists("~/.Rprofile")) { } options( + blogdown.hugo.version = "0.89.1", blogdown.author = "Brendan Cullen", blogdown.ext = ".Rmd", blogdown.subdir = "post", diff --git a/.hugo_build.lock b/.hugo_build.lock new file mode 100644 index 0000000..e69de29 diff --git a/assets/custom.scss b/assets/custom.scss new file mode 100644 index 0000000..7715093 --- /dev/null +++ b/assets/custom.scss @@ -0,0 +1,256 @@ +@font-face { + font-family: 'Ilisarniq-Light'; + src: url('fonts/Ilisarniq-Light.eot'); + src: url('fonts/Ilisarniq-Light.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Light.woff2') format('woff2'), + url('fonts/Ilisarniq-Light.woff') format('woff'), + url('fonts/Ilisarniq-Light.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-LightItalic'; + src: url('fonts/Ilisarniq-LightItalic.eot'); + src: url('fonts/Ilisarniq-LightItalic.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-LightItalic.woff2') format('woff2'), + url('fonts/Ilisarniq-LightItalic.woff') format('woff'), + url('fonts/Ilisarniq-LightItalic.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-Regular'; + src: url('fonts/Ilisarniq-Regular.eot'); + src: url('fonts/Ilisarniq-Regular.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Regular.woff2') format('woff2'), + url('fonts/Ilisarniq-Regular.woff') format('woff'), + url('fonts/Ilisarniq-Regular.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-Italic'; + src: url('fonts/Ilisarniq-Italic.eot'); + src: url('fonts/Ilisarniq-Italic.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Italic.woff2') format('woff2'), + url('fonts/Ilisarniq-Italic.woff') format('woff'), + url('fonts/Ilisarniq-Italic.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-Demi'; + src: url('fonts/Ilisarniq-Demi.eot'); + src: url('fonts/Ilisarniq-Demi.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Demi.woff2') format('woff2'), + url('fonts/Ilisarniq-Demi.woff') format('woff'), + url('fonts/Ilisarniq-Demi.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-DemiItalic'; + src: url('fonts/Ilisarniq-DemiItalic.eot'); + src: url('fonts/Ilisarniq-DemiItalic.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-DemiItalic.woff2') format('woff2'), + url('fonts/Ilisarniq-DemiItalic.woff') format('woff'), + url('fonts/Ilisarniq-DemiItalic.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-Bold'; + src: url('fonts/Ilisarniq-Bold.eot'); + src: url('fonts/Ilisarniq-Bold.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Bold.woff2') format('woff2'), + url('fonts/Ilisarniq-Bold.woff') format('woff'), + url('fonts/Ilisarniq-Bold.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-BoldItalic'; + src: url('fonts/Ilisarniq-BoldItalic.eot'); + src: url('fonts/Ilisarniq-BoldItalic.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-BoldItalic.woff2') format('woff2'), + url('fonts/Ilisarniq-BoldItalic.woff') format('woff'), + url('fonts/Ilisarniq-BoldItalic.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-Black'; + src: url('fonts/Ilisarniq-Black.eot'); + src: url('fonts/Ilisarniq-Black.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-Black.woff2') format('woff2'), + url('fonts/Ilisarniq-Black.woff') format('woff'), + url('fonts/Ilisarniq-Black.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Ilisarniq-BlackItalic'; + src: url('fonts/Ilisarniq-BlackItalic.eot'); + src: url('fonts/Ilisarniq-BlackItalic.eot?#iefix') format('embedded-opentype'), + url('fonts/Ilisarniq-BlackItalic.woff2') format('woff2'), + url('fonts/Ilisarniq-BlackItalic.woff') format('woff'), + url('fonts/Ilisarniq-BlackItalic.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + + +@font-face { + font-family: 'Petrona'; + src: url('fonts/Petrona-VariableFont_wght.eot'); + src: url('fonts/Petrona-VariableFont_wght.eot?#iefix') format('embedded-opentype'), + url('fonts/Petrona-VariableFont_wght.woff2') format('woff2'), + url('fonts/Petrona-VariableFont_wght.woff') format('woff'), + url('fonts/Petrona-VariableFont_wght.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Petrona'; + src: url('fonts/Petrona-Italic-VariableFont_wght.eot'); + src: url('fonts/Petrona-Italic-VariableFont_wght.eot?#iefix') format('embedded-opentype'), + url('fonts/Petrona-Italic-VariableFont_wght.woff2') format('woff2'), + url('fonts/Petrona-Italic-VariableFont_wght.woff') format('woff'), + url('fonts/Petrona-Italic-VariableFont_wght.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +:root { + --decorator-outer-offset-top: .3rem; + --decorator-outer-offset-left: -.475rem; + --decorator-border-width: 1px; + --decorator-outer-dim: 12px; + --decorator-border: 4px solid #F3E0E1; +} + +.decorator { + flex:0 0 0; + position:relative; + width:2pt; + min-height:100%; + border-left:var(--decorator-border); +} +.decorator::before { + position:absolute; + top:var(--decorator-outer-offset-top); + left:var(--decorator-outer-offset-left); + content:' '; + display:block; + width:var(--decorator-outer-dim); + height:var(--decorator-outer-dim); + border-radius:calc(var(--decorator-outer-dim) / 2); + background-color:#e8987f +} +.decorator::after { + position:absolute; + top:calc(var(--decorator-outer-offset-top) + var(--decorator-border-width)); + left:calc(var(--decorator-outer-offset-left) + var(--decorator-border-width)); + content:' '; + display:block; + width:calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)); + height:calc(var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)); + border-radius:calc((var(--decorator-outer-dim) - (var(--decorator-border-width) * 2)) / 2); + background-color:#e8987f +} +.blocks:last-child .decorator { + margin-bottom:0.25in +} + + +/*----CSS Credit: +Adapted from code by Desirée De Leon: https://desiree.rbind.io/ +-----*/ + +/* --------Blog posts--------- */ +/* Headers within blogs */ + +.article-style .section.level1 h1, +.article-style .section.level2 h2, +.article-style .section.level3 h3, +.article-style .section.level3 h4{ + padding-top: 0.75em; + padding-bottom: 0.75em; + font-weight: 300; +} + +/* -----------div tips------------- */ + +div.puzzle, div.fyi, div.demo, div.note, div.book, div.github, div.profile, div.bookmark, div.link, div.code, div.quote, div.reader{ + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + color: #FFFFFF; + background-color: #5a9998; + border: dashed 5px #32807f; + } + + +div.puzzle { + background-image: url("../note_box_icons/Your-turn.png"); +} + +div.fyi { + background-image: url("../note_box_icons/fyi.png"); +} + +div.demo { + background-image: url("../note_box_icons/Live-code.png"); +} + +div.note { + background-image: url("../note_box_icons/lightbulb.png"); +} + +div.book { + background-image: url("../note_box_icons/book.png"); +} + +div.github { + background-image: url("../note_box_icons/github.png"); +} + +div.profile { + background-image: url("../note_box_icons/profile.png"); +} + +div.bookmark { + background-image: url("../note_box_icons/bookmark.png"); +} + +div.link { + background-image: url("../note_box_icons/link.png"); +} + +div.code { + background-image: url("../note_box_icons/code.png"); +} + +div.quote { + background-image: url("../note_box_icons/quote.png"); +} + +div.reader { + background-image: url("../note_box_icons/reader.png"); +} \ No newline at end of file diff --git a/assets/jsconfig.json b/assets/jsconfig.json new file mode 100644 index 0000000..f2843cb --- /dev/null +++ b/assets/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "*": [ + "../themes/hugo-apero/assets/*" + ] + } + } +} \ No newline at end of file diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss deleted file mode 100644 index b422ca8..0000000 --- a/assets/scss/custom.scss +++ /dev/null @@ -1,116 +0,0 @@ -/*----CSS Credit: -Adapted from code by Desirée De Leon: https://desiree.rbind.io/ ------*/ - -/* Whole document: */ -body { - font-weight: 300; -} - -/*----NAV LINK HOVER ANIMATION -----*/ - -.nav-link:hover { - color: black !important; -} - -/*----------------------------------*/ - -.hljs { /* code font size */ -font-size: 16px; -padding: 1rem; -} - -/* -------About/Home Section-------- */ - -#about .portrait-title h2 { - text-transform: uppercase !important; - margin-bottom: 30px; - font-weight: 300; -} - -a.navbar-brand { - font-family: Raleway; - font-weight: 300; -} - -a.nav-link { - font-family: Raleway; - font-weight: 300; -} - - -/* --------Blog posts--------- */ -/* Headers within blogs */ - -.article-style .section.level1 h1, -.article-style .section.level2 h2, -.article-style .section.level3 h3, -.article-style .section.level3 h4{ - padding-top: 0.75em; - padding-bottom: 0.75em; - font-weight: 300; -} - -/* -----------div tips------------- */ - -div.puzzle, div.fyi, div.demo, div.note, div.book, div.github, div.profile, div.bookmark, div.link, div.code, div.quote, div.reader{ - padding: 1em; - margin: 1em 0; - padding-left: 100px; - background-size: 70px; - background-repeat: no-repeat; - background-position: 15px center; - min-height: 120px; - color: #FFFFFF; - background-color: #5a9998; - border: dashed 5px #32807f; - } - - -div.puzzle { - background-image: url("../note_box_icons/Your-turn.png"); -} - -div.fyi { - background-image: url("../note_box_icons/fyi.png"); -} - -div.demo { - background-image: url("../note_box_icons/Live-code.png"); -} - -div.note { - background-image: url("../note_box_icons/lightbulb.png"); -} - -div.book { - background-image: url("../note_box_icons/book.png"); -} - -div.github { - background-image: url("../note_box_icons/github.png"); -} - -div.profile { - background-image: url("../note_box_icons/profile.png"); -} - -div.bookmark { - background-image: url("../note_box_icons/bookmark.png"); -} - -div.link { - background-image: url("../note_box_icons/link.png"); -} - -div.code { - background-image: url("../note_box_icons/code.png"); -} - -div.quote { - background-image: url("../note_box_icons/quote.png"); -} - -div.reader { - background-image: url("../note_box_icons/reader.png"); -} \ No newline at end of file diff --git a/config.toml b/config.toml index c3c2d7c..137d253 100644 --- a/config.toml +++ b/config.toml @@ -1,74 +1,186 @@ -# Configuration of Academic -# Documentation: https://sourcethemes.com/academic/ -# -# This file is formatted using TOML syntax - learn more at https://learnxinyminutes.com/docs/toml/ -# Each configuration section is defined by a name in square brackets (e.g. `[outputs]`). - -# Title of your site +baseURL = "https://bcullen.rbind.io/" +theme = "hugo-apero" +languageCode = "en" title = "Brendan Cullen" - -# The URL of your site. -# End your URL with a `/` trailing slash, e.g. `https://example.com/`. -baseurl = "https://bcullen.rbind.io/" - -# Enter a copyright notice to display in the site footer. -# To display a copyright symbol, type `©`. For current year, type `{year}`. -copyright = "© {year}" - -############################ -## Advanced options below ## -############################ - -# Name of Academic theme folder in `themes/`. -theme = "hugo-academic" - -# Get last modified date for content from Git? -enableGitInfo = false - -# Enable analytics by entering your Google Analytics tracking ID -googleAnalytics = "UA-150600553-1" - -# Default language to use (if you setup multilingual support) -defaultContentLanguage = "en" -hasCJKLanguage = false # Set `true` for Chinese/Japanese/Korean languages. -defaultContentLanguageInSubdir = false -removePathAccents = true # Workaround for https://github.com/gohugoio/hugo/issues/5687 - -paginate = 10 # Number of items per page in paginated lists. +author = "Brendan Cullen" +copyright = "" # set to override the auto generated copyright using org info and now year +googleAnalytics = "" +disqusShortname = "" # see params.utterances to use utterances instead of Disqus +metaDataFormat = "yaml" +footnoteReturnLinkContents = "↩" # ↩ +# set deliberately low for testing choose your preffered number based on the blog layout you've chosen +paginate = 5 +preserveTaxonomyNames = true +ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_cache$", "\\.knit\\.md$", "\\.utf8\\.md$"] enableEmoji = true -footnotereturnlinkcontents = "^" -ignoreFiles = ["\\.ipynb$", ".ipynb_checkpoints$", "\\.Rmd$", "\\.Rmarkdown$", "_cache$", "\\.knit\\.md$", "\\.utf8\\.md$"] - -[outputs] - home = [ "HTML", "RSS", "JSON", "WebAppManifest" ] - section = [ "HTML", "RSS" ] - -[mediaTypes."application/manifest+json"] - suffixes = ["webmanifest"] - -[outputFormats.WebAppManifest] - mediaType = "application/manifest+json" - rel = "manifest" [markup] defaultMarkdownHandler = "goldmark" - [markup.goldmark] - [markup.goldmark.renderer] - unsafe = true # Enable user to embed HTML snippets in Markdown content. - [markup.highlight] - codeFences = false # Disable Hugo's code highlighter as it conflicts with Academic's highligher. + [markup.goldmark.renderer] + unsafe = true # Enable user to embed HTML snippets in Markdown content. + hardwraps = false [markup.tableOfContents] startLevel = 2 - endLevel = 3 + endLevel = 2 + ordered = false + [markup.highlight] + # one of: https://xyproto.github.io/splash/docs/ + style = "github" + +[params] + orgName = "Brendan Cullen" + orgLocal = "" + description = "Brendan Cullen's personal website" + favicon = "/img/bonsai.ico" + logo = "/img/bonsai.png" + mainSections = ["blog", "project", "talk"] + navallcaps = true + # show/hide social icons in site header & footer + # configure social icons and links below in [[params.social]] + socialInHeader = false + socialInFooter = true + # Default image for social sharing and search engines. + # Place image file in `static` folder and specify image name here. + sharing_image = "/img/headshot.jpg" + # Twitter username (without @). Used when a visitor shares your site on Twitter. + twitter = "_bcullen" + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "sky" + + # or, leave theme empty & make your own palette + # see docs at https://hugo-apero.netlify.app/blog/color-themes/ + # the custom scss file must be in the assets/ folder + # add the filename name here, without extension + # to use hex colors instead of named tachyons colors, include "hex" in filename + custom_theme = "" + + # use an embedded font-family + # serif options: Fraunces / EB Garamond / Bitter + # sans-serif options: Commissioner / Atkinson Hyperlegible / Metropolis + # if you import your own fonts, name them here too + customtextFontFamily = "Commissioner" + customheadingFontFamily = "Fraunces" + # alternatively, leave empty and select basic font options: sans-serif or serif + # for more http://tachyons.io/docs/typography/font-family/ + textFontFamily = "sans-serif" + headingFontFamily = "sans-serif" + + # Configuration of https://utteranc.es/ for comments + [params.utterances] + use_utterances = true + repo_name = "brendanhcullen/bcullen" + issue_term = "title" # url, pathname, or title + theme = "boxy-light" + label = "comments :crystal_ball:" -[imaging] - resampleFilter = "lanczos" - quality = 90 - anchor = "smart" # Anchor for cropping. Options include Smart and Center. + # Configuration of math rendering + [params.math] + renderer = "katex" # one of "mathjax" / "katex" -# Taxonomies. + # Social icons may appear on homepage and in site header or footer + # Configure show/hide above - add as many as you like below + # Icon pack "fab" includes brand icons, see: https://fontawesome.com/icons?d=gallery&s=brands&m=free + # Icon pack "fas" includes solid icons, see: https://fontawesome.com/icons?d=gallery&s=solid&m=free + # Icon pack "far" includes regular icons, see: https://fontawesome.com/icons?d=gallery&s=regular&m=free + [[params.social]] + icon = "twitter" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://twitter.com/_bcullen" + [[params.social]] + icon = "linkedin" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://www.linkedin.com/in/bcull/" + [[params.social]] + icon = "github" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://github.com/brendanhcullen" + #[[params.social]] + # icon = "impactstory" # icon name without the 'fa-' + # icon_pack = "ai" + # url = "https://impactstory.org/u/0000-0002-8082-1890" + #[[params.social]] + # icon = "orcid" # icon name without the 'fa-' + # icon_pack = "ai" + # url = "http://orcid.org/0000-0002-8082-1890" + #[[params.social]] + # icon = "rss" # icon name without the 'fa-' + # icon_pack = "fas" + # url = "/blog/index.xml" + #[[params.social]] + # icon = "facebook-square" # icon name without the 'fa-' + # icon_pack = "fab" + # url = "https://www.facebook.com/hashtag/ap%C3%A9ro" + #[[params.social]] + # icon = "instagram" # icon name without the 'fa-' + # icon_pack = "fab" + # url = "https://www.instagram.com/explore/tags/apero/" [taxonomies] - tag = "tags" category = "categories" - publication_type = "publication_types" - author = "authors" + series = "series" + tag = "tags" + +[menu] + # Configure header + [[menu.header]] + name = "About" + title = "About Me" + url = "/about/" + weight = 1 + [[menu.header]] + name = "Blog" + title = "Blog" + url = "/blog/" + weight = 2 + [[menu.header]] + name = "Projects" + title = "Project Portfolio" + url = "/project/" + weight = 3 + [[menu.header]] + name = "Talks" + title = "Talks" + url = "/talk/" + weight = 4 + + # Configure footer + [[menu.footer]] + name = "License" + title = "License" + url = "/license/" + weight = 1 + [[menu.footer]] + name = "Contact" + title = "Contact form" + url = "/contact/" + weight = 2 + [[menu.footer]] + name = "Contributors" + title = "Contributors" + url = "/contributors/" + weight = 3 + +# see https://gohugo.io/about/hugo-and-gdpr/ +[privacy] + [privacy.disqus] + disable = false + [privacy.googleAnalytics] + disable = false + anonymizeIP = true + respectDoNotTrack = true + [privacy.instagram] + disable = false + simple = true + [privacy.twitter] + disable = false + enableDNT = true + simple = false + [privacy.vimeo] + disable = false + enableDNT = true + simple = true + [privacy.youtube] + disable = false + privacyEnhanced = true diff --git a/config/_default/languages.toml b/config/_default/languages.toml deleted file mode 100644 index f7c6da6..0000000 --- a/config/_default/languages.toml +++ /dev/null @@ -1,20 +0,0 @@ -# Languages -# Create a `[X]` block for each language you want, where X is the language ID. -# Refer to https://sourcethemes.com/academic/docs/language/ - -# Configure the English version of the site. -[en] - languageCode = "en-us" - # contentDir = "content/en" # Uncomment for multi-lingual sites, and move English content into `en` sub-folder. - -# Uncomment the lines below to configure your website in a second language. -#[zh] -# languageCode = "zh-Hans" -# contentDir = "content/zh" -# title = "Chinese website title..." -# [zh.params] -# description = "Site description in Chinese..." -# [[zh.menu.main]] -# name = "Wo" -# url = "#about" -# weight = 1 diff --git a/config/_default/menus.toml b/config/_default/menus.toml deleted file mode 100644 index e5011dd..0000000 --- a/config/_default/menus.toml +++ /dev/null @@ -1,67 +0,0 @@ -# Navigation Links -# To link a homepage widget, specify the URL as a hash `#` followed by the filename of the -# desired widget in your `content/home/` folder. -# The weight parameter defines the order that the links will appear in. - -[[main]] - name = "ABOUT" - url = "#about" - weight = 10 - -[[main]] - name = "PROJECTS" - url = "/project_landing" - weight = 20 - -[[main]] - name = "TEACHING" - identifier = "teaching" - url = "#" - weight = 30 - -[[main]] - name = "Workshops " - parent = "teaching" - url = "/courses/workshops/" - weight = 30.1 - -[[main]] - name = "University Courses " - parent = "teaching" - url = "/courses/university/" - weight = 30.2 - -[[main]] - name = "BLOG" - url = "/post" - weight = 40 - -[[main]] - name = "CV & RÉSUMÉ" - identifier = "cv" - url = "#" - weight = 50 - -[[main]] - name = "CV " - parent = "cv" - url = "/cv/index.html" - weight = 50.1 - -[[main]] - name = "RÉSUMÉ " - parent = "cv" - url = "/cv/resume.html" - weight = 50.2 - -[[main]] - name = "CONTACT" - url = "/contact" - weight = 60 - -# Link to a PDF of your resume/CV from the menu. -# To enable, copy your resume/CV to `static/files/cv.pdf` and uncomment the lines below. -# [[main]] -# name = "CV" -# url = "files/cv.pdf" -# weight = 70 diff --git a/config/_default/params.toml b/config/_default/params.toml deleted file mode 100644 index 60593d1..0000000 --- a/config/_default/params.toml +++ /dev/null @@ -1,277 +0,0 @@ -# SITE SETUP -# Documentation: https://sourcethemes.com/academic/ - -############################ -## Theme -############################ - -# Choose a theme. -# Latest themes (may require updating): https://sourcethemes.com/academic/themes/ -# Browse built-in themes in `themes/academic/data/themes/` -# Browse user installed themes in `data/themes/` -theme = "my_theme" - -# Enable users to switch between day and night mode? -day_night = true - -# Override the theme's font set (optional). -# Latest font sets (may require updating): https://sourcethemes.com/academic/themes/ -# Browse built-in font sets in `themes/academic/data/fonts/` -# Browse user installed font sets in `data/fonts/` -font = "my_font_set" - -# Choose a font size. -# Sizes: XS (extra small), S (small), M (medium), L (large - DEFAULT), XL (extra large) -font_size = "" - -############################ -## Basic Info -############################ - -# Website type -# Improve how search engines understand your site. -# For personal sites, choose "Person". -# For organizations and projects, choose from https://schema.org/Organization#subtypes -# E.g. Person, Organization, LocalBusiness, Project, EducationalOrganization -site_type = "Person" - -# Local business type (optional) -# If you entered "LocalBusiness" above, choose the type of business from https://schema.org/LocalBusiness#subtypes -local_business_type = "" - -# Organization name (optional) -# Enter an organization or project name. Defaults to the site title from `config.toml`. -org_name = "" - -# Description for social sharing and search engines. If undefined, superuser role is used in place. -description = "Brendan Cullen's personal website" - -############################ -## Site Features -############################ - -# Enable source code highlighting? true/false -# Documentation: https://sourcethemes.com/academic/docs/writing-markdown-latex/#highlighting-options -highlight = true -highlight_languages = ["r"] # Add support for highlighting additional languages -# highlight_style = "github" # For supported styles, see https://cdnjs.com/libraries/highlight.js/ - -# Enable LaTeX math rendering? true/false -# If false, you can enable math on a per page basis as needed. -math = false - -# Enable diagram rendering? true/false -# If false, you can enable diagrams on a per page basis as needed. -diagram = false - -# Privacy pack -# Show a cookie consent message to visitors -# Anonymize IP in Google Analytics (if enabled) -privacy_pack = false - -# Enable visitors to edit pages? -# `repo` defines the repository URL. `editable` defines which page types can be edited. -edit_page = {repo_url = "https://github.com/gcushen/hugo-academic", content_dir = "", repo_branch = "master", editable = {docs = true, page = false, post = false}} - -############################ -## Code folding -############################ - -# Set to true to disable code folding -disable_codefolding = false -# Set to "hide" or "show" all codes by default -codefolding_show = "hide" -# Set to true to exclude the "Show/hide all" button -codefolding_nobutton = false - -############################ -## Contact details -## -## These details power the Contact widget (if enabled). -## Additionally, for organizations, these details may be used to enrich search engine results. -############################ - -# Enter contact details (optional). To hide a field, clear it to "". -email = "bcullen@uoregon.edu" -#phone = "" -#address = "" - -# Geographic coordinates -# To get your coordinates, right-click on Google Maps and choose "What's here?". The coords will show up at the bottom. -#coordinates = {latitude = "37.4275", longitude = "-122.1697"} - -# Directions for visitors to locate you. -directions = "" - -# Office hours -# A list of your office hours. To remove, set to an empty list `[]`. -office_hours = [] - -# Enter an optional link for booking appointments (e.g. calendly.com). -appointment_url = "" - -# Contact links -# Set to `[]` to disable, or comment out unwanted lines with a hash `#`. -contact_links = [ - {icon = "twitter", icon_pack = "fab", name = "Message me on Twitter", link = "https://twitter.com/_bcullen"}, - #{icon = "skype", icon_pack = "fab", name = "Skype Me", link = "skype:echo123?call"}, - #{icon = "keybase", icon_pack = "fab", name = "Chat on Keybase", link = "https://keybase.io/"}, - #{icon = "comments", icon_pack = "fas", name = "Discuss on Forum", link = "https://discourse.gohugo.io"}, - # {icon = "telegram", icon_pack = "fab", name = "Telegram Me", link = "https://telegram.me/@Telegram"}, - ] - -############################ -## Social -############################ - -# Default image for social sharing and search engines. Place image in `static/img/` folder and specify image name here. -sharing_image = "sharing_image.jpg" -twitter_image = "sharing_image.jpg" - -# Twitter username (without @). Used when a visitor shares your site on Twitter. -twitter = "_bcullen" - -############################ -## Regional Settings -############################ - -# Date and time format (refer to https://sourcethemes.com/academic/docs/customization/#date-format ) -# Examples: "Mon, Jan 2, 2006" or "2006-01-02" -date_format = "Jan 2, 2006" -# Examples: "3:04 pm" or "15:04" -time_format = "3:04 PM" - -# Address format (choose from the [address_formats] list below or add you own to the list). -address_format = "en-us" - -############################ -## Advanced -############################ - -# Main menu alignment (l = left, c = center, r = right) and logo options. -main_menu = {align = "r", show_logo = true} - -# Show estimated reading time for posts? (true/false) -reading_time = true - -# Display next/previous section pager? (true/false) -section_pager = false -docs_section_pager = true # Display pager in Docs layout (e.g. tutorials)? - -# Enable in-built social sharing buttons? (true/false) -sharing = true - -# Link authors to their profile page? (true/false) -link_authors = true - -# Load JS plugins -# E.g. To load `/assets/js/custom.js`, set `plugins_js = ["custom"]`. -plugins_js = [] - -# Avatars. -# An avatar is an image that appears next to a user's name. -# An avatar can be uploaded as an image named `avatar` to each user's profile or fetched from Gravatar.com. -[avatar] - # Get user avatars from Gravatar.com? (true/false) - gravatar = false - - # Choose a shape for avatar images. Options: circle, square. - shape = "circle" - -# Available address formats. -[address_formats] - en-us = {order = ['street', 'city', 'region', 'postcode'], delimiters = [', ', ', ', ' ', '']} - en-gb = {order = ['street', 'city', 'region', 'postcode'], delimiters = [', ', ', ', ', ', '']} - de = {order = ['street', 'postcode', 'city'], delimiters = ['
', ' ', '']} - fr-fr = {order = ['street', 'postcode', 'city'], delimiters = ['
', ' ', '']} - zh = {order = ['postcode', 'region', 'city', 'street'], delimiters = [' ', ' ', ' ', '']} - -# Configuration of publication pages. -[publications] - # Date format (refer to https://sourcethemes.com/academic/docs/customization/#date-format ) - # Examples: "Mon, Jan 2, 2006" or "2006-01-02" - date_format = "January 2006" - - # Citation style ("apa" or "mla") - citation_style = "apa" - -# Configuration of project pages. -[projects] - # Views for associated content. - # 1: List - # 2: Compact - # 3: Card - # 4: Citation (publications only) - post_view = 2 - publication_view = 2 - talk_view = 2 - -############################ -## Comments -############################ -[comments] - # Comment provider: - # 0: Disabled - # 1: Disqus (https://disqus.com) - # 2: Commento (https://commento.io) - engine = 0 - - # Which page types are commentable? - commentable = {page = true, post = true, docs = true, project = true, publication = true, talk = true} - - # Configuration of Disqus. - [comments.disqus] - shortname = "" # Paste the shortname from your Disqus dashboard. - show_count = true # Show comment count in page header? (true/false) - - # Configuration of Commento. - [comments.commento] - # If self-hosting Commento, enter its URL here (e.g. "https://commento.?.com"), otherwise leave empty. - url = "" - -############################ -## Search -############################ -[search] - # Search provider: - # 0: No search engine - # 1: Academic (built-in) - # 2: Algolia (https://www.algolia.com) - engine = 1 - - # Configuration of Algolia search engine. - # Paste the values from your Algolia dashboard. - [search.algolia] - app_id = "" - api_key = "" - index_name = "" - show_logo = false - -############################ -## Maps -############################ -[map] - # To show your address on a map in the Contact widget, enter your latitude and longitude (above) - # and choose a map provider below. - # - # To use Google Maps, set `engine` to 1 and enter your API key that can be obtained here: - # https://developers.google.com/maps/documentation/javascript/get-api-key - # To use OpenStreetMap tiles, set `engine` to 2. - # To use OpenStreetMap on a high traffic site, set `engine` to 3 and enter your API key that can be obtained here: - # https://www.mapbox.com/studio/account/tokens - # - # Map provider: - # 0: No map - # 1: Google Maps - # 2: OpenStreetMap (Mapnik) - # 3: OpenStreetMap (Mapbox) - engine = 2 - api_key = "" - zoom = 15 - -############################ -## Marketing -############################ -[marketing] - google_analytics = "" - google_tag_manager = "" diff --git a/config_old.toml b/config_old.toml new file mode 100644 index 0000000..a8efedc --- /dev/null +++ b/config_old.toml @@ -0,0 +1,75 @@ +# Configuration of Academic +# Documentation: https://sourcethemes.com/academic/ +# +# This file is formatted using TOML syntax - learn more at https://learnxinyminutes.com/docs/toml/ +# Each configuration section is defined by a name in square brackets (e.g. `[outputs]`). + +# Title of your site +title = "Brendan Cullen" + +# The URL of your site. +# End your URL with a `/` trailing slash, e.g. `https://example.com/`. +baseurl = "https://bcullen.rbind.io/" + +# Enter a copyright notice to display in the site footer. +# To display a copyright symbol, type `©`. For current year, type `{year}`. +copyright = "© {year}" + +############################ +## Advanced options below ## +############################ + +# Name of Academic theme folder in `themes/`. +#theme = "hugo-academic" +theme = "hugo-apero" + +# Get last modified date for content from Git? +enableGitInfo = false + +# Enable analytics by entering your Google Analytics tracking ID +googleAnalytics = "UA-150600553-1" + +# Default language to use (if you setup multilingual support) +defaultContentLanguage = "en" +hasCJKLanguage = false # Set `true` for Chinese/Japanese/Korean languages. +defaultContentLanguageInSubdir = false +removePathAccents = true # Workaround for https://github.com/gohugoio/hugo/issues/5687 + +paginate = 10 # Number of items per page in paginated lists. +enableEmoji = true +footnotereturnlinkcontents = "^" +ignoreFiles = ["\\.ipynb$", ".ipynb_checkpoints$", "\\.Rmd$", "\\.Rmarkdown$", "_cache$", "\\.knit\\.md$", "\\.utf8\\.md$"] + +[outputs] + home = [ "HTML", "RSS", "JSON", "WebAppManifest" ] + section = [ "HTML", "RSS" ] + +[mediaTypes."application/manifest+json"] + suffixes = ["webmanifest"] + +[outputFormats.WebAppManifest] + mediaType = "application/manifest+json" + rel = "manifest" + +[markup] + defaultMarkdownHandler = "goldmark" + [markup.goldmark] + [markup.goldmark.renderer] + unsafe = true # Enable user to embed HTML snippets in Markdown content. + [markup.highlight] + codeFences = false # Disable Hugo's code highlighter as it conflicts with Academic's highligher. + [markup.tableOfContents] + startLevel = 2 + endLevel = 3 + +[imaging] + resampleFilter = "lanczos" + quality = 90 + anchor = "smart" # Anchor for cropping. Options include Smart and Center. + +# Taxonomies. +[taxonomies] + tag = "tags" + category = "categories" + publication_type = "publication_types" + author = "authors" diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..7e40407 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,18 @@ +--- +title: "Brendan Cullen" +subtitle: "Data Science Educator, RStudio, PBC" +description: "Brief blurb." +images: + - img/headshot.jpg +image_left: false +text_align_left: true +show_social_links: true # specify social accounts in site config +show_action_link: true +action_link: /about +action_label: "About me →" +action_type: text # text, button +type: home +--- + +** index doesn't contain a body, just front matter above. +See index.html in the layouts folder ** diff --git a/content/about/_index.md b/content/about/_index.md new file mode 100644 index 0000000..d161b3d --- /dev/null +++ b/content/about/_index.md @@ -0,0 +1,13 @@ +--- +title: "About" +description: | + Brendan Cullen's personal website. +show_header: true +sidebar_left: true +# Keep this! Do not edit. +cascade: + headless: true +--- + +** index doesn't contain a body, just front matter above. +See the header / main / sidebar folders to edit the index.md files ** diff --git a/content/about/header/index.md b/content/about/header/index.md new file mode 100644 index 0000000..68aff73 --- /dev/null +++ b/content/about/header/index.md @@ -0,0 +1,19 @@ +--- +## Configure header of page +text_align_right: false +show_title_as_headline: false +headline: | + Welcome +--- + +My background here. + +### Education + +Data Science Specialization in Educational Leadership ∙ University of Oregon ∙ 2019 + +M.S., Psychology ∙ + University of Oregon ∙ 2019 + +B.A., Neuroscience ∙ + Middlebury College ∙ 2015 \ No newline at end of file diff --git a/content/about/main/index.md b/content/about/main/index.md new file mode 100644 index 0000000..9f04964 --- /dev/null +++ b/content/about/main/index.md @@ -0,0 +1,16 @@ +--- +## Configure page content in wide column +title: "Lately..." # leave blank to exclude +number_featured: 1 # pulling from mainSections in config.toml +use_featured: false # if false, use most recent by date +number_categories: 3 # set to zero to exclude +show_intro: true +intro: | + I teach data science with R. +show_outro: false +outro: | + +--- + +** index doesn't contain a body, just front matter above. +See about/list.html in the layouts folder ** \ No newline at end of file diff --git a/content/about/sidebar/avatar.jpg b/content/about/sidebar/avatar.jpg new file mode 100644 index 0000000..aaed468 Binary files /dev/null and b/content/about/sidebar/avatar.jpg differ diff --git a/content/about/sidebar/index.md b/content/about/sidebar/index.md new file mode 100644 index 0000000..a064161 --- /dev/null +++ b/content/about/sidebar/index.md @@ -0,0 +1,17 @@ +--- +## Configure sidebar content in narrow column +author: "Brendan Cullen" +role: "Data Science Educator, [RStudio, PBC](https://www.rstudio.com/)" +avatar_shape: rounded # circle, square, rounded, leave blank to exclude +show_social_links: true # specify social accounts in site config +audio_link_label: "" # leave blank to exclude +link_list_label: "Formerly..." # bookmarks, elsewhere, etc. +link_list: +- name: Social and Affective Neuroscience Lab + url: https://sanlab.uoregon.edu +- name: Center for Translational Neuroscience + url: https://ctn.uoregon.edu/profile/bcullen +--- + +** index doesn't contain a body, just front matter above. +See about/list.html in the layouts folder ** \ No newline at end of file diff --git a/content/post/2020-03-08-one-size-rarely-fits-all/featured.jpg b/content/blog/2017-12-01-one-size-rarely-fits-all/featured.jpg similarity index 100% rename from content/post/2020-03-08-one-size-rarely-fits-all/featured.jpg rename to content/blog/2017-12-01-one-size-rarely-fits-all/featured.jpg diff --git a/content/post/2020-03-08-one-size-rarely-fits-all/index.Rmd b/content/blog/2017-12-01-one-size-rarely-fits-all/index.Rmarkdown similarity index 94% rename from content/post/2020-03-08-one-size-rarely-fits-all/index.Rmd rename to content/blog/2017-12-01-one-size-rarely-fits-all/index.Rmarkdown index ec707d1..21ceb9b 100644 --- a/content/post/2020-03-08-one-size-rarely-fits-all/index.Rmd +++ b/content/blog/2017-12-01-one-size-rarely-fits-all/index.Rmarkdown @@ -1,7 +1,8 @@ --- title: One Size Rarely Fits All +layout: single author: Brendan Cullen -date: '2020-03-08' +date: '2017-12-01' slug: [] categories: tags: @@ -11,7 +12,7 @@ tags: subtitle: '' summary: 'A case for a precision medicine approach to behavioral health in psychology' authors: [] -lastmod: '2020-03-08T16:36:57-07:00' +lastmod: '' featured: no image: caption: 'Source: Shutterstock / HelloRF Zcool' @@ -20,6 +21,11 @@ image: projects: [] --- +
+ +
+
+ Think about the last time you had a splitting headache and needed some quick relief. Which bottle did you reach for? Tylenol or Advil? Why? Maybe you think of yourself as a “Tylenol person” or an “Advil person” because one of these has worked for you before. Or maybe one always upsets your stomach. The point is that not everyone experiences the same pain relief from one pill. Some people prefer Tylenol and others Advil, but nobody quite knows why. The same is true of psychological treatments—they don’t work the same way for all people. People differ in how they respond to treatments for depression, anxiety, addiction, and so forth. The lingo in the field is that there are individual differences in treatment effectiveness. Why? Because, to state the obvious, no two people are exactly alike. And that fact poses a problem for the study of these treatments. Researchers test psychological treatments the same way they test drugs like Tylenol and Advil—using randomized controlled trials (RCTs). People are assigned at random to either one group, which receives a treatment, or another group, which does not. RCTs are an excellent way to assess the differences between the groups on average. The group difference indicates how well the treatment works. The problem is that researchers tend to treat people who differ from their group’s average as mere statistical fluctuations—“noise” in the signal. @@ -28,23 +34,23 @@ The drawback of group-to-group comparisons is that they hide person-to-person di How do we learn for whom psychological treatments will work? There are three main things we need to know: -# 1) How does the treatment work? +## 1) How does the treatment work? At this point, there is strong evidence that Tylenol is an effective painkiller. But, even after decades of research, we still don’t fully understand how Tylenol relieves pain. Similarly, though we know that many psychological treatments are effective (at least for some people), we do not know how these treatments work. For example, researchers don’t know which parts of the brain are changed by most treatments. If we knew more specifics about how a treatment worked, we could improve it. We could focus our efforts on the parts of the treatment that make people better and remove the parts that don’t seem as important. And here’s the bonus: If we knew how treatments worked, that would help us learn for whom they work. Imagine we knew that a treatment reduced depression by decreasing self-criticism. In other words, a reduction in self-criticism is the one and only active ingredient in this treatment. If so, then people who criticize themselves a lot would be good candidates to benefit most from this treatment. -# 2) What are the unique causes of the problem for a given person? +## 2) What are the unique causes of the problem for a given person? To predict whether someone would benefit from a given treatment, we need to know more about the special factors underlying that person’s problem. In terms of pain, Tylenol is usually the better option for headache pain, and Advil is a good bet for inflammation. Similarly, a psychological treatment will work for a given person only if it addresses whatever caused the problem in the first place. Consider two people who both experience severe anxiety, but for different reasons. If genetic factors cause one person’s anxiety while past trauma is the main source of the other person’s anxiety, then these two individuals will likely need different types of treatment. -# 3) How does the treatment mesh with a person’s unique characteristics? +## 3) How does the treatment mesh with a person’s unique characteristics? Like all drugs, Tylenol and Advil have side effects. And it turns out that they have different side effects depending on whether somebody is at risk for heart disease. So, people who have experienced a heart attack, for example, must carefully choose which pill to take when they have a headache. Similarly, whether or not a psychological treatment will work for somebody might depend on that person’s age, gender, or life history, to name just a few examples. The success of many treatments also depends on how severe a person’s problem is to begin with. Consider again the example of a treatment for depression that works on average for a group of people. Perhaps this treatment works best for people who are severely depressed because it focuses on a symptom that is more common in those people. A different treatment, which also works on average, might consistently decrease depression in mildly depressed people but not work at all for severely depressed people. -# The bottom line +## The bottom line With answers to these three questions, researchers can begin to tailor psychological treatments to the unique needs of different people. We know that a given treatment will not work, at least not equally well, for every person. But being able to predict at the outset who will benefit and who won’t could save a lot of time and money. Rather than treating individual differences as “noise,” we can use them to glean potentially important information. If we can better understand why some people benefit from treatment while others don’t, we can make treatments more effective for more people. Eventually, this will allow more people to live healthier lives. ->*Note*. I originally wrote this piece for Psychology Today. See the original post [here](https://www.psychologytoday.com/us/blog/the-motivated-brain/201712/one-size-rarely-fits-all){target="_blank"}. \ No newline at end of file +>*Note*. I originally wrote this piece for Psychology Today. See the original post [here](https://www.psychologytoday.com/us/blog/the-motivated-brain/201712/one-size-rarely-fits-all). \ No newline at end of file diff --git a/content/blog/2017-12-01-one-size-rarely-fits-all/index.markdown b/content/blog/2017-12-01-one-size-rarely-fits-all/index.markdown new file mode 100644 index 0000000..2c419a4 --- /dev/null +++ b/content/blog/2017-12-01-one-size-rarely-fits-all/index.markdown @@ -0,0 +1,56 @@ +--- +title: One Size Rarely Fits All +layout: single +author: Brendan Cullen +date: '2017-12-01' +slug: [] +categories: +tags: + - precision-medicine + - health + - psychology +subtitle: '' +summary: 'A case for a precision medicine approach to behavioral health in psychology' +authors: [] +lastmod: '' +featured: no +image: + caption: 'Source: Shutterstock / HelloRF Zcool' + focal_point: '' + preview_only: FALSE +projects: [] +--- + +
+ +
+
+ +Think about the last time you had a splitting headache and needed some quick relief. Which bottle did you reach for? Tylenol or Advil? Why? Maybe you think of yourself as a “Tylenol person” or an “Advil person” because one of these has worked for you before. Or maybe one always upsets your stomach. The point is that not everyone experiences the same pain relief from one pill. Some people prefer Tylenol and others Advil, but nobody quite knows why. + +The same is true of psychological treatments—they don’t work the same way for all people. People differ in how they respond to treatments for depression, anxiety, addiction, and so forth. The lingo in the field is that there are individual differences in treatment effectiveness. Why? Because, to state the obvious, no two people are exactly alike. And that fact poses a problem for the study of these treatments. Researchers test psychological treatments the same way they test drugs like Tylenol and Advil—using randomized controlled trials (RCTs). People are assigned at random to either one group, which receives a treatment, or another group, which does not. RCTs are an excellent way to assess the differences between the groups on average. The group difference indicates how well the treatment works. The problem is that researchers tend to treat people who differ from their group’s average as mere statistical fluctuations—“noise” in the signal. + +The drawback of group-to-group comparisons is that they hide person-to-person differences that may be important. For example, even when one group does a lot better than another on average, there may still be many people in the first group who do not improve at all. Or maybe some people in the first group get worse even though their group got better overall. Instead of only thinking at the “group” level, we need to pay more attention to person-to-person differences. This will help us learn why treatments work only for some individuals and not others. + +How do we learn for whom psychological treatments will work? There are three main things we need to know: + +## 1) How does the treatment work? + +At this point, there is strong evidence that Tylenol is an effective painkiller. But, even after decades of research, we still don’t fully understand how Tylenol relieves pain. Similarly, though we know that many psychological treatments are effective (at least for some people), we do not know how these treatments work. For example, researchers don’t know which parts of the brain are changed by most treatments. If we knew more specifics about how a treatment worked, we could improve it. We could focus our efforts on the parts of the treatment that make people better and remove the parts that don’t seem as important. And here’s the bonus: If we knew how treatments worked, that would help us learn for whom they work. Imagine we knew that a treatment reduced depression by decreasing self-criticism. In other words, a reduction in self-criticism is the one and only active ingredient in this treatment. If so, then people who criticize themselves a lot would be good candidates to benefit most from this treatment. + + +## 2) What are the unique causes of the problem for a given person? + +To predict whether someone would benefit from a given treatment, we need to know more about the special factors underlying that person’s problem. In terms of pain, Tylenol is usually the better option for headache pain, and Advil is a good bet for inflammation. Similarly, a psychological treatment will work for a given person only if it addresses whatever caused the problem in the first place. Consider two people who both experience severe anxiety, but for different reasons. If genetic factors cause one person’s anxiety while past trauma is the main source of the other person’s anxiety, then these two individuals will likely need different types of treatment. + + +## 3) How does the treatment mesh with a person’s unique characteristics? + +Like all drugs, Tylenol and Advil have side effects. And it turns out that they have different side effects depending on whether somebody is at risk for heart disease. So, people who have experienced a heart attack, for example, must carefully choose which pill to take when they have a headache. Similarly, whether or not a psychological treatment will work for somebody might depend on that person’s age, gender, or life history, to name just a few examples. The success of many treatments also depends on how severe a person’s problem is to begin with. Consider again the example of a treatment for depression that works on average for a group of people. Perhaps this treatment works best for people who are severely depressed because it focuses on a symptom that is more common in those people. A different treatment, which also works on average, might consistently decrease depression in mildly depressed people but not work at all for severely depressed people. + + +## The bottom line + +With answers to these three questions, researchers can begin to tailor psychological treatments to the unique needs of different people. We know that a given treatment will not work, at least not equally well, for every person. But being able to predict at the outset who will benefit and who won’t could save a lot of time and money. Rather than treating individual differences as “noise,” we can use them to glean potentially important information. If we can better understand why some people benefit from treatment while others don’t, we can make treatments more effective for more people. Eventually, this will allow more people to live healthier lives. + +>*Note*. I originally wrote this piece for Psychology Today. See the original post [here](https://www.psychologytoday.com/us/blog/the-motivated-brain/201712/one-size-rarely-fits-all). diff --git a/content/blog/2017-12-01-one-size-rarely-fits-all/index_files/header-attrs/header-attrs.js b/content/blog/2017-12-01-one-size-rarely-fits-all/index_files/header-attrs/header-attrs.js new file mode 100644 index 0000000..dd57d92 --- /dev/null +++ b/content/blog/2017-12-01-one-size-rarely-fits-all/index_files/header-attrs/header-attrs.js @@ -0,0 +1,12 @@ +// Pandoc 2.9 adds attributes on both header and div. We remove the former (to +// be compatible with the behavior of Pandoc < 2.8). +document.addEventListener('DOMContentLoaded', function(e) { + var hs = document.querySelectorAll("div.section[class*='level'] > :first-child"); + var i, h, a; + for (i = 0; i < hs.length; i++) { + h = hs[i]; + if (!/^h[1-6]$/i.test(h.tagName)) continue; // it should be a header h1-h6 + a = h.attributes; + while (a.length > 0) h.removeAttribute(a[0].name); + } +}); diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/Trainingneedssurvey.xlsx b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/Trainingneedssurvey.xlsx new file mode 100644 index 0000000..d6aa107 Binary files /dev/null and b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/Trainingneedssurvey.xlsx differ diff --git a/content/post/2020-03-08-data-science-training-needs-in-grad-school/featured.jpg b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/featured.jpg similarity index 100% rename from content/post/2020-03-08-data-science-training-needs-in-grad-school/featured.jpg rename to content/blog/2020-03-08-data-science-training-needs-in-grad-school/featured.jpg diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.Rmarkdown b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.Rmarkdown new file mode 100644 index 0000000..0642c01 --- /dev/null +++ b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.Rmarkdown @@ -0,0 +1,171 @@ +--- +title: Data Science Training in Psychology +layout: single +author: Brendan Cullen +date: '2020-03-08' +slug: [] +categories: [] +tags: + - data science + - education + - R + - grad school +subtitle: '' +summary: 'Reflections on the importance of data science training in psychology and how we might close training gaps for grad students.' +authors: [] +lastmod: '' +featured: no +image: + caption: 'Photo by Emile Perron on Unsplash' + focal_point: '' + preview_only: no +projects: [] +--- + +
+ +
+
+ +Psychology is generally considered a "soft" science, on the opposite end of the spectrum from the "hard" sciences of physics, chemistry, and biology. This often creates a misconception that psychology is somehow not as quantitative, computational, or rigorous, methodologically. To the contrary, psychology is in fact very "hard" (some might even say ["the hardest"](https://thehardestscience.com/2009/03/14/making-progress-in-the-hardest-science/)). Why? Because explaining human cognition and behavior is really difficult. People do not think and behave in predictable and consistent ways like atoms and molecules. + +Indeed, the combination of random variation ("noise") in how we humans respond to our environment on an given day/hour/minute, combined with the inherent challenge of proper sampling, reliable measurement and accurate model building makes data analysis for a psychologist no easy feat. Explaining variance in psychological data has required centuries of refining statistical methods and computational tools. Fortunately, today's scientists have access to open-source software like R and Python that have *vastly* enhanced our ability to work with data in a way that is more transparent and reproducible. As a result, the teaching of these tools is becoming increasingly more common in psychology graduate programs (and many other fields), particularly in statistics classes. + +*** + +## Graduate statistics + +The Department of Psychology at the University of Oregon requires first-year graduate students to take a 3-course series of classes on statistics and data analysis. (You can access the materials for these classes [here.](https://github.com/uopsych)) As I'm sure used to be the case in psychology departments across many universities, the labs for these classes were originally taught in SPSS. However, thanks to the efforts of some hard-working graduate teaching assistants who served as lab instructors at the time, the labs eventually transitioned to being taught entirely in R. + +While learning R in first-year grad stats has immense benefits, it is also really challenging. In addition to grappling with the dense conceptual material, learning a programming language and using it to do statistics felt really daunting since I had very little programming background before graduate school. And the reality is, given that many (myself included) tend to experience a large learning curve with programming, combined with the already hefty gradstats curriculum, there just isn't space in these classes to teach students much beyond the basics of R. + +*** + +## Training needs + +But the way things seem to be moving, it's becoming more common for many students to need more general data science skills in grad school. Current psychology grad students at UO (n = 28) were recently surveyed about the degree to which they perceive they will need different data science-related skills for their desired careers and how much training in those skills is available at UO to their knowledge. Specifically, they were asked, + +* On a scale of 0 ("Not at all") to 4 ("Essential"), how much do you NEED this skill for your desired career? + +* On a scale of 0 ("Not at all") to 4 ("Complete"), how much training is PROVIDED in this skill at your institution? + + +I created the plot below to visualize how much students report they need these skills compared to how much training they feel they already have. + +```{r echo=FALSE, message = FALSE, warning = FALSE} +library(tidyverse) +library(gdata) +library(janitor) +library(colorblindr) + +# import raw data +data_raw <- rio::import("Trainingneedssurvey.xlsx", sheet = 2 ) %>% + clean_names() %>% + rename(skill = x1) %>% + #mapvalues(skill, from = "Analysis Neuroimaging", to = "Neuroimaging Analysis") + mutate(skill = str_to_title(skill)) + +# fix typos +data_raw$skill <-as.factor(recode(data_raw$skill, "Analysis Neuroimaging"="Neuroimaging Analysis", "Research Ethic"= "Research Ethics")) + +# means +data_m <- data_raw %>% + select(skill, need_m, have_m) %>% + gather(c(need_m,have_m), key = need_have, value = mean) %>% + mutate(need_have = factor(need_have, + labels = c("Have", "Need"))) +# standard errors +data_se <- data_raw %>% + select(skill, need_se, have_se) %>% + gather(c(need_se,have_se), key = need_have, value = se) %>% + mutate(need_have = factor(need_have, + labels = c("Have", "Need"))) + +# join data +data_tidy <- left_join(data_m, data_se) + +data_diff <- data_raw %>% + select(skill, need_m, have_m) %>% + mutate(diff = need_m - have_m) +``` + +```{r echo=FALSE, warning=FALSE, fig.width=15, fig.height=10} +data_tidy %>% + ggplot(aes(fct_reorder2(skill, need_have, desc(mean)), mean)) + + expand_limits(y = c(0, 4)) + + coord_flip() + + geom_line(aes(group = skill), linetype = 3, color = "gray40") + + geom_errorbar(aes( + ymin = mean - se, + ymax = mean + se, + group = need_have + ), + alpha = 0.25) + + geom_point(aes(color = need_have), size = 7) + + theme_minimal(base_size = 17) + + scale_color_manual(values = c("#ABC7C4", "#609298")) + + scale_y_continuous( + labels = c( + "0 \n(Not at all)", + "1 \n(A little)", + "2 \n(Some)", + "3 \n(Very much)", + "4 \n(Essential/\nComplete)" + ) + ) + + labs( + x = "", + y = "\nMean Response", + title = "Data science training needs for UO psychology doctoral students", + caption = "Error bars represent standard error of the mean." + ) + + theme( + panel.grid.minor = element_blank(), + legend.title = element_blank(), + legend.key.size = unit(1, "cm"), + legend.direction = "horizontal", + legend.position = c(0.84, 0.07), + legend.box.background = element_rect(fill = "white"), + legend.background = element_rect(color = "#ABC7C4"), + legend.text = element_text(size = 15) + ) +``` + +Interestingly, the top two skills that students reported needing the most on average for their careers are data visualization and data wrangling. Fortunately, this was the first year (to my knowledge) that [PSY611](https://uopsych.github.io/psy611/), the first course in the gradstats sequence, included entire labs devoted to data visualization and data wrangling. + +Among other crucial research skills like study design, data collection, and research ethics, the other most coveted technical skill seems to be *programming*. In fact, general programming skills seems to be where there is currently the biggest gap in training in our department. The graph below shows skills ranked in descending order by how large the gap is between how much training in those skills students need and how much they currently have. + +```{r echo=FALSE, warning=FALSE, fig.width=15, fig.height=10} +data_diff %>% + ggplot(aes(x = fct_reorder(skill, diff), y = diff)) + + geom_col(alpha = 0.8, color = "#609298") + + coord_flip() + + geom_hline(yintercept = 0, + size = 1, + color = "black") + + labs( + x = "", + y = "Training Gap (Need - Have)", + title = "Perceived gaps in data science training from current UO psychology doctoral students" + ) + + theme_minimal(base_size = 17) + + theme(panel.grid.minor = element_blank(), + plot.caption = element_text(size = 17, hjust = 0)) +``` + +On the whole, it seems that that there are bigger training gaps for more general data science skills (e.g., programming in R and Python, data wrangling, data visualization). In contrast, the smallest gaps exist for more specialized skills like advanced statistics (e.g., computational modeling, network analysis, structural equation modeling) -- likely because our department has an entire class devoted to each of these topics. + +*** +## Learning Resources + +For the most part, it seems that grad students in our department want more training in general data science skills above and beyond the training they are currently receiving through coursework. Often what this means is that grad students end up teaching themselves (and each other) these skills. Some of my peers have made really incredible tutorials on new tools and methodologies they've recently learned. Sometimes students also attend specialized methods workshops and take detailed notes that could greatly benefit others who want to learn the same kind of methods. + +What I would love to see is a central, searchable repository of data science resources at UO that will house these student-created tutorials, workshop notes, and other data science products (e.g. R packages, shiny apps, etc.) that will make it easier for folks (both within our department and beyond) to find these resources. + +*** + +## A final thought + +Reflecting on all this has brought home a thought that I think is worth sharing -- as grad students, one of the best resources we have access to during our time in grad school is *each other*. Personally, I have learned so much over the years from my [fellow lab members](https://sanlab.uoregon.edu/people/). Without them, I would not have conquered my fear of Github or felt inspired to learn more about R and other programming languages. Perhaps the most impactful benefit I've received from them, though, is their encouragement -- and that, in particular, is something I hope to pay forward as much as possible. + +We all enter grad school with different backgrounds and skill sets, and in so many situations the combination of our different strengths can lead to mutual benefit. So why not help each other out? diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.markdown b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.markdown new file mode 100644 index 0000000..95d07ed --- /dev/null +++ b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index.markdown @@ -0,0 +1,80 @@ +--- +title: Data Science Training in Psychology +layout: single +author: Brendan Cullen +date: '2020-03-08' +slug: [] +categories: [] +tags: + - data science + - education + - R + - grad school +subtitle: '' +summary: 'Reflections on the importance of data science training in psychology and how we might close training gaps for grad students.' +authors: [] +lastmod: '' +featured: no +image: + caption: 'Photo by Emile Perron on Unsplash' + focal_point: '' + preview_only: no +projects: [] +--- + +
+ +
+
+ +Psychology is generally considered a "soft" science, on the opposite end of the spectrum from the "hard" sciences of physics, chemistry, and biology. This often creates a misconception that psychology is somehow not as quantitative, computational, or rigorous, methodologically. To the contrary, psychology is in fact very "hard" (some might even say ["the hardest"](https://thehardestscience.com/2009/03/14/making-progress-in-the-hardest-science/)). Why? Because explaining human cognition and behavior is really difficult. People do not think and behave in predictable and consistent ways like atoms and molecules. + +Indeed, the combination of random variation ("noise") in how we humans respond to our environment on an given day/hour/minute, combined with the inherent challenge of proper sampling, reliable measurement and accurate model building makes data analysis for a psychologist no easy feat. Explaining variance in psychological data has required centuries of refining statistical methods and computational tools. Fortunately, today's scientists have access to open-source software like R and Python that have *vastly* enhanced our ability to work with data in a way that is more transparent and reproducible. As a result, the teaching of these tools is becoming increasingly more common in psychology graduate programs (and many other fields), particularly in statistics classes. + +*** + +## Graduate statistics + +The Department of Psychology at the University of Oregon requires first-year graduate students to take a 3-course series of classes on statistics and data analysis. (You can access the materials for these classes [here.](https://github.com/uopsych)) As I'm sure used to be the case in psychology departments across many universities, the labs for these classes were originally taught in SPSS. However, thanks to the efforts of some hard-working graduate teaching assistants who served as lab instructors at the time, the labs eventually transitioned to being taught entirely in R. + +While learning R in first-year grad stats has immense benefits, it is also really challenging. In addition to grappling with the dense conceptual material, learning a programming language and using it to do statistics felt really daunting since I had very little programming background before graduate school. And the reality is, given that many (myself included) tend to experience a large learning curve with programming, combined with the already hefty gradstats curriculum, there just isn't space in these classes to teach students much beyond the basics of R. + +*** + +## Training needs + +But the way things seem to be moving, it's becoming more common for many students to need more general data science skills in grad school. Current psychology grad students at UO (n = 28) were recently surveyed about the degree to which they perceive they will need different data science-related skills for their desired careers and how much training in those skills is available at UO to their knowledge. Specifically, they were asked, + +* On a scale of 0 ("Not at all") to 4 ("Essential"), how much do you NEED this skill for your desired career? + +* On a scale of 0 ("Not at all") to 4 ("Complete"), how much training is PROVIDED in this skill at your institution? + + +I created the plot below to visualize how much students report they need these skills compared to how much training they feel they already have. + + + + + +Interestingly, the top two skills that students reported needing the most on average for their careers are data visualization and data wrangling. Fortunately, this was the first year (to my knowledge) that [PSY611](https://uopsych.github.io/psy611/), the first course in the gradstats sequence, included entire labs devoted to data visualization and data wrangling. + +Among other crucial research skills like study design, data collection, and research ethics, the other most coveted technical skill seems to be *programming*. In fact, general programming skills seems to be where there is currently the biggest gap in training in our department. The graph below shows skills ranked in descending order by how large the gap is between how much training in those skills students need and how much they currently have. + + + +On the whole, it seems that that there are bigger training gaps for more general data science skills (e.g., programming in R and Python, data wrangling, data visualization). In contrast, the smallest gaps exist for more specialized skills like advanced statistics (e.g., computational modeling, network analysis, structural equation modeling) -- likely because our department has an entire class devoted to each of these topics. + +*** +## Learning Resources + +For the most part, it seems that grad students in our department want more training in general data science skills above and beyond the training they are currently receiving through coursework. Often what this means is that grad students end up teaching themselves (and each other) these skills. Some of my peers have made really incredible tutorials on new tools and methodologies they've recently learned. Sometimes students also attend specialized methods workshops and take detailed notes that could greatly benefit others who want to learn the same kind of methods. + +What I would love to see is a central, searchable repository of data science resources at UO that will house these student-created tutorials, workshop notes, and other data science products (e.g. R packages, shiny apps, etc.) that will make it easier for folks (both within our department and beyond) to find these resources. + +*** + +## A final thought + +Reflecting on all this has brought home a thought that I think is worth sharing -- as grad students, one of the best resources we have access to during our time in grad school is *each other*. Personally, I have learned so much over the years from my [fellow lab members](https://sanlab.uoregon.edu/people/). Without them, I would not have conquered my fear of Github or felt inspired to learn more about R and other programming languages. Perhaps the most impactful benefit I've received from them, though, is their encouragement -- and that, in particular, is something I hope to pay forward as much as possible. + +We all enter grad school with different backgrounds and skill sets, and in so many situations the combination of our different strengths can lead to mutual benefit. So why not help each other out? diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-2-1.png b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-2-1.png new file mode 100644 index 0000000..3e1ed62 Binary files /dev/null and b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-2-1.png differ diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-3-1.png b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-3-1.png new file mode 100644 index 0000000..3a7eb01 Binary files /dev/null and b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/figure-html/unnamed-chunk-3-1.png differ diff --git a/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/header-attrs/header-attrs.js b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/header-attrs/header-attrs.js new file mode 100644 index 0000000..dd57d92 --- /dev/null +++ b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/index_files/header-attrs/header-attrs.js @@ -0,0 +1,12 @@ +// Pandoc 2.9 adds attributes on both header and div. We remove the former (to +// be compatible with the behavior of Pandoc < 2.8). +document.addEventListener('DOMContentLoaded', function(e) { + var hs = document.querySelectorAll("div.section[class*='level'] > :first-child"); + var i, h, a; + for (i = 0; i < hs.length; i++) { + h = hs[i]; + if (!/^h[1-6]$/i.test(h.tagName)) continue; // it should be a header h1-h6 + a = h.attributes; + while (a.length > 0) h.removeAttribute(a[0].name); + } +}); diff --git a/content/post/2020-03-08-data-science-training-needs-in-grad-school/training_dotplot_se.png b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/training_dotplot_se.png similarity index 100% rename from content/post/2020-03-08-data-science-training-needs-in-grad-school/training_dotplot_se.png rename to content/blog/2020-03-08-data-science-training-needs-in-grad-school/training_dotplot_se.png diff --git a/content/post/2020-03-08-data-science-training-needs-in-grad-school/training_gaps.png b/content/blog/2020-03-08-data-science-training-needs-in-grad-school/training_gaps.png similarity index 100% rename from content/post/2020-03-08-data-science-training-needs-in-grad-school/training_gaps.png rename to content/blog/2020-03-08-data-science-training-needs-in-grad-school/training_gaps.png diff --git a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/data_dictionary.csv b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/data_dictionary.csv similarity index 100% rename from content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/data_dictionary.csv rename to content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/data_dictionary.csv diff --git a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/featured.jpg b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/featured.jpg similarity index 100% rename from content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/featured.jpg rename to content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/featured.jpg diff --git a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmd b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmarkdown similarity index 83% rename from content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmd rename to content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmarkdown index 837c75d..11eb899 100644 --- a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmd +++ b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.Rmarkdown @@ -1,35 +1,38 @@ --- -title: 'Tidymodels: Decision Tree Learning in R' -author: Cianna Bedford-Petersen, Christopher Loan & Brendan Cullen +title: 'Decision Tree Learning in R' +layout: single +author: Brendan Cullen, Cianna Bedford-Petersen & Christopher Loan date: '2020-06-02' slug: [] categories: [] tags: [] -subtitle: 'Cianna Bedford-Petersen, Christopher Loan & Brendan Cullen' -summary: 'An overview and worked example of tree-based machine learning methods in R using `tidymodels`' +subtitle: '' +summary: 'An overview and worked example of tree-based machine learning methods in R using tidymodels' authors: [] -lastmod: '2020-06-02T10:57:23-07:00' +lastmod: '' featured: no image: caption: 'Image by Ilona Ilyés from Pixabay' focal_point: '' preview_only: FALSE projects: [] -disable_codefolding: false -codefolding_show: "show" -codefolding_nobutton: false --- -RStudio has recently released a cohesive suite of packages for modelling and machine learning, called `{tidymodels}`. The successor to Max Kuhn’s `{caret}` package, `{tidymodels}` allows for a tidy approach to your data from start to finish. We’re going to walk through the basics for getting off the ground with `{tidymodels}` and demonstrate its application to three different tree-based methods for predicting student test scores. For further information about the package, you can visit https://www.tidymodels.org/. +
+ +
+
-# Setup +RStudio has recently released a cohesive suite of packages for modelling and machine learning, called tidymodels. The successor to Max Kuhn’s caret package, tidymodels allows for a tidy approach to your data from start to finish. We’re going to walk through the basics for getting off the ground with tidymodels and demonstrate its application to three different tree-based methods for predicting student test scores. For further information about the package, you can visit https://www.tidymodels.org/. + +## Setup ```{r echo=FALSE} options(scipen = 17) ``` -Load both the `{tidyverse}` and `{tidymodels}` packages into your environment. We’ll also load in the `{skimr}` package to help us with some descriptives for our data and a host of other packages that will be required to run our machine learning models. +Load both the tidyverse and tidymodels packages into your environment. We’ll also load in the skimr package to help us with some descriptives for our data and a host of other packages that will be required to run our machine learning models. ```{r message=FALSE} library(tidymodels) @@ -40,7 +43,7 @@ library(future) # parallel processing & decrease computation time library(xgboost) # boosted trees ``` -# Import the data +## Import the data We use simulated data which approximates reading and math scores for ~189,000 3rd-8th grade students in Oregon public schools see [this Kaggle page](https://www.kaggle.com/c/edld-654-spring-2020) for details. For the purpose of demonstration, we’ll be sampling 1% of the data with `sample_frac()` to keep computer processing time manageable. All school IDs in the data are real, so we can use that information to link the data with other sources. Specifically, we’re also going to pull in some data on student enrollment in free and reduced lunch from the National Center for Education Statistics and some ethnicity data from the Oregon Department of Education. @@ -105,13 +108,13 @@ frl <- left_join(frl, stu_counts) dat <- left_join(dat, frl) ``` -After loading in our three datasets, we’ll join them together to make one cohesive data set to use for modelling. After joining, the data contains both student-level variables (e.g. gender, ethnicity, enrollment in special education/talented and gifted programs, etc.) and district-level variables (e.g. school longitude and latitude, proportion of students who qualify for free and reduced-price lunch, etc.), all of which will be included for each 3 of our `{tidymodels}` tree-based examples. +After loading in our three datasets, we’ll join them together to make one cohesive data set to use for modelling. After joining, the data contains both student-level variables (e.g. gender, ethnicity, enrollment in special education/talented and gifted programs, etc.) and district-level variables (e.g. school longitude and latitude, proportion of students who qualify for free and reduced-price lunch, etc.), all of which will be included for each 3 of our tidymodels tree-based examples. For a more complete description of the variables, you can download the data dictionary [here](data_dictionary.csv). -# Explore the data +## Explore the data -We’ll use the `skim()` function from `{skimr}` to take a closer look at our variables. Many numeric predictors are clearly non-normal (see histograms below), but this is no problem as tree-based methods are robust to non-normality. +We’ll use the `skimr::skim()` to take a closer look at our variables. Many numeric predictors are clearly non-normal (see histograms below), but this is no problem as tree-based methods are robust to non-normality. ```{r} dat %>% @@ -122,7 +125,7 @@ dat %>% select(-starts_with("numeric.p")) # remove quartiles ``` -While most of our predictors are categorical, we can use `{corrplot}` to better visualize the relationships among the numeric variables. +While most of our predictors are categorical, we can use corrplot to better visualize the relationships among the numeric variables. ```{r warning=FALSE} dat %>% @@ -134,9 +137,9 @@ dat %>% ``` -# Split data and resample +## Split data and resample -The first step of our analysis is to split our data into two separate sets: a "training" set and a "testing" set. The training set is used to train a model and, if desired, to adjust (i.e., "tune") the model's hyperparameters before evaluating its final performance on our test data. By allowing us to test a model on a new sample, we assess "out of sample" accuracy (i.e., unseen data-—what all predictive models are interested in) and limit overfitting to the training set. We can do this efficiently with the `initial_split()` function. This comes from the `{rsample}` package, which is part of the `{tidymodels}` package that we already loaded. Defaults put 75% of the data in the training set and 25% in the test set, but this can be adjusted with the `prop` argument. Then, we’ll extract the training data from our split object and assign it a name. +The first step of our analysis is to split our data into two separate sets: a "training" set and a "testing" set. The training set is used to train a model and, if desired, to adjust (i.e., "tune") the model's hyperparameters before evaluating its final performance on our test data. By allowing us to test a model on a new sample, we assess "out of sample" accuracy (i.e., unseen data-—what all predictive models are interested in) and limit overfitting to the training set. We can do this efficiently with the `initial_split()` function. This comes from the rsample package, which is part of the tidymodels package that we already loaded. Defaults put 75% of the data in the training set and 25% in the test set, but this can be adjusted with the `prop` argument. Then, we’ll extract the training data from our split object and assign it a name. To further prevent over-fitting, we’ll resample our data using `vfold_cv()`. This function outputs k-*fold* cross-validated versions of our training data, where k = the number of times we resample (unsure why v- is used instead of k- here). By using k = 10 data sets, we get a better estimate of the model's out-of-sample accuracy. On top of decreasing bias from over-fitting, this is essential when tuning hyperparameters (though we plan to apply defaults and not tune here, for brevity). Though our use of 10-fold cross validation is both frequently used and effective, it should be noted that other methods (e.g., bootstrap resampling) or other k-values are sometimes used to accomplish the same goal. @@ -151,7 +154,7 @@ train <- training(split) cv <- vfold_cv(train) ``` -# Pre-processing +## Pre-processing Before we add in our data to the model, we’re going to set up an object that pre-processes our data. This is called a *recipe*. To create a recipe, you’ll first specify a formula for your model, indicating which variable is your outcome and which are your predictors. Using `~.` here will indicate that we want to use all variables other than `score` as predictors. Then, we can specify a series of pre-processing steps for our data that directs our recipe to assign our variables a role or performs feature engineering steps. Pre-processing may be sound uncommon, but if you've ever used `lm()` (or several other `R` functions) you've done some of this by simply calling the function (e.g., automatic dummy-coding to handle categorical data). This is beneficial because it gives the analyst more control, despite adding complexity to the process. @@ -170,37 +173,37 @@ rec <- recipe(score ~ ., train) %>% ``` -# Create a model +## Create a model -The last step before bringing in our data is to specify our model. This will call upon functions from the `{parsnip}` package, which standardizes language for specifying a multitude of statistical models. There are a few core elements that you will need to specify for each model +The last step before bringing in our data is to specify our model. This will call upon functions from the parsnip package, which standardizes language for specifying a multitude of statistical models. There are a few core elements that you will need to specify for each model -## The type of model +### The type of model This indicates what type of model you choose to fit, each of which will be a different function. We’ll be focusing on decision tree methods using `bag_tree()`, `random_forest()`, and `boost_tree()`. A full list of models can be found here https://www.tidymodels.org/find/parsnip/ -## The engine +### The engine `set_engine()` calls the package to support the model you specified above. -## The mode +### The mode `set_mode()` indicates the type of prediction you’d like to use in your model, you’ll choose between regression and classification. Since we are looking to predict student scores, which is a continuous predictor, we’ll be choosing regression. -## The arguments +### The arguments `set_args()` allows you to set values for various parameters for your model, each model type will have a specific set of parameters that can be altered. For these parameters, you can either set a particular value or you can use the tune function to search for the optimal value of each parameter. Tuning requires a few extra steps, so we will leave the default arguments for clarity. For more information on tuning check out https://tune.tidymodels.org/. -# Create a workflow +## Create a workflow Up to this point we’ve been setting up a lot of individual elements and now it is time to combine them to create a cohesive framework, called a *workflow*, so we can run our desired models. First, we’ll use the `workflow()` command and then we’ll pulling the recipe and model we already created. The next section shows three examples of specifying models and creating a workflow for different decision tree methods. -# Model Examples +## Model Examples -## Bagged trees +### Bagged trees A bagged tree approach creates multiple subsets of data from the training set which are randomly chosen with replacement. Each subset of data is used to train a given decision tree. In the end, we have an ensemble of different models. The predictions from all the different trees are averaged together, giving us a stronger prediction than one tree could independently. -### Specify model +#### Specify model ```{r} set.seed(100) @@ -209,7 +212,7 @@ mod_bag <- bag_tree() %>% set_engine("rpart", times = 10) # 10 bootstrap resamples ``` -### Create workflow +#### Create workflow ```{r} wflow_bag <- workflow() %>% @@ -217,7 +220,7 @@ wflow_bag <- workflow() %>% add_model(mod_bag) ``` -### Fit the model +#### Fit the model ```{r cache=TRUE, message=FALSE} set.seed(100) @@ -232,7 +235,7 @@ fit_bag <- fit_resamples( extract = function(x) extract_model(x))) ``` -### Visualize +#### Visualize The plot below shows the root nodes from a bagged tree made of 100 trees (10 folds x 10 bootstrapped resamples). Root nodes are the 1st node in a decision tree, and they are determined by which variable best optimizes a loss function (e.g., minimizes mean square error [MSE] for continuous outcomes or Gini Index for categorical outcomes). Put roughly, the most common root nodes can be thought of as the most "important" predictors. @@ -259,11 +262,11 @@ bag_roots(fit_bag) %>% labs(x = "root", y = "count") ``` -## Random forest +### Random forest Random forest is similar to bagged tree methodology but goes one step further. In addition to taking random subsets of data, the model also draws a random selection of features. Instead of utilizing all features, the random subset of features allows more predictors to be eligible root nodes. This is particularly useful for handling high dimensionality data (e.g., have more variables than participants/cases). -### Specify the model +#### Specify the model ```{r} set.seed(100) @@ -276,7 +279,7 @@ mod_rf <-rand_forest() %>% set_args(trees = 1000) ``` -### Create workflow +#### Create workflow ```{r} wflow_rf <- workflow() %>% @@ -284,7 +287,7 @@ wflow_rf <- workflow() %>% add_recipe(rec) ``` -### Fit the model +#### Fit the model ```{r cache=TRUE, message=FALSE} set.seed(100) @@ -300,7 +303,7 @@ fit_rf <- fit_resamples( ) ``` -### Visualize +#### Visualize The plot below shows the root nodes from a random forest with 1000 trees (specified using `set_args(trees = 1000)` in the parsnip model object). @@ -338,11 +341,11 @@ rf_roots(fit_rf) %>% labs(x = "root", y = "count") ``` -## Boosted trees +### Boosted trees Boosted trees, like bagged trees, are an ensemble model. Instead of applying successive models to resampled data and pooling estimates, boosted trees fit the next tree to the residuals (i.e., error term) of the prior tree. The goal is to minimize residual error through multiple trees, and is typically done with fairly "shallow" decision tree (i.e., 1-6 splits in each tree). Though each model is only slightly improving the error rate, the sequential use of many shallow trees makes computationally efficient (i.e. reduced run time) and highly accurate predictions. -### Specify the model +#### Specify the model ```{r} mod_boost <- boost_tree() %>% @@ -350,7 +353,7 @@ mod_boost <- boost_tree() %>% set_mode("regression") ``` -### Create workflow +#### Create workflow ```{r} wflow_boost <- workflow() %>% @@ -358,7 +361,7 @@ wflow_boost <- workflow() %>% add_model(mod_boost) ``` -### Fit the model +#### Fit the model ```{r cache=TRUE, message=FALSE} set.seed(100) @@ -373,11 +376,11 @@ fit_boost <- fit_resamples( ) ``` -### Visualize +#### Visualize -One of the few downfalls of `{tidymodels}` is its (current) inability to plot these tree-based models. For the past two models, it was simpler to extract root nodes and plot them, but their interpretation (as we're fitting to residuals instead of data sets) are not straightforward. For that reason, we don't have any pretty plots here. Instead, we'll skip to evaluating the metrics of all models. +One of the few downfalls of tidymodels is its (current) inability to plot these tree-based models. For the past two models, it was simpler to extract root nodes and plot them, but their interpretation (as we're fitting to residuals instead of data sets) are not straightforward. For that reason, we don't have any pretty plots here. Instead, we'll skip to evaluating the metrics of all models. -# Evaluate metrics +## Evaluate metrics After running these three models, it’s time to evaluate their performance. We can do this with `tune::collect_metrics()`. The table below shows the estimate of the out-of-sample performance for each of our 3 models. @@ -393,7 +396,7 @@ collect_metrics(fit_bag) %>% Here, we are faced with a common problem in the machine learning world: choosing between models that perform similarly (see overlapping standard errors). Whether we would prefer random forests or bagged trees may depend on computational efficiency (i.e., time) or other factors. In practice, tuning several hyperparameters may have made one model clearly preferable over the others, but in our case - relying on all defaults - we would probably have similar performance with both models on a new data set and would prefer random forest or boosted tree models for their efficiency. -# Out-of-sample performance +## Out-of-sample performance The final step is to apply each trained model to our test data using `last_fit()`. @@ -430,7 +433,7 @@ collect_metrics(final_fit_bag) %>% knitr::kable() ``` -After applying our 3 trained models to the unseen test data, it looks like random forest is the winner since it has the lowest RMSE. In this example, we only used 1% of the data to train these models, which could make it difficult to meaningfully compare their performance. However, the random forest model also results in the best out-of-sample prediction (RMSE = 83.47) when using all of the available data, which we did for the [Kaggle competition](https://www.kaggle.com/c/edld-654-spring-2020/leaderboard). +After applying our 3 trained models to the unseen test data, it looks like the boosted tree model is the winner since it has the lowest RMSE. In this example, we only used 1% of the data to train these models, which could make it difficult to meaningfully compare their performance. In practice, the random forest model results in the best out-of-sample prediction when using all of the available data, which we did for the [Kaggle competition](https://www.kaggle.com/c/edld-654-spring-2020/leaderboard).
Session Info ```{r echo=FALSE} diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.markdown b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.markdown new file mode 100644 index 0000000..7b01482 --- /dev/null +++ b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index.markdown @@ -0,0 +1,690 @@ +--- +title: 'Decision Tree Learning in R' +layout: single +author: Brendan Cullen, Cianna Bedford-Petersen & Christopher Loan +date: '2020-06-02' +slug: [] +categories: [] +tags: [] +subtitle: '' +summary: 'An overview and worked example of tree-based machine learning methods in R using tidymodels' +authors: [] +lastmod: '' +featured: no +image: + caption: 'Image by Ilona Ilyés from Pixabay' + focal_point: '' + preview_only: FALSE +projects: [] +--- + +
+ +
+
+ +RStudio has recently released a cohesive suite of packages for modelling and machine learning, called tidymodels. The successor to Max Kuhn’s caret package, tidymodels allows for a tidy approach to your data from start to finish. We’re going to walk through the basics for getting off the ground with tidymodels and demonstrate its application to three different tree-based methods for predicting student test scores. For further information about the package, you can visit https://www.tidymodels.org/. + +## Setup + + + + +Load both the tidyverse and tidymodels packages into your environment. We’ll also load in the skimr package to help us with some descriptives for our data and a host of other packages that will be required to run our machine learning models. + + +```r +library(tidymodels) +library(tidyverse) # manipulating data +library(skimr) # data visualization +library(baguette) # bagged trees +library(future) # parallel processing & decrease computation time +library(xgboost) # boosted trees +``` + +## Import the data + +We use simulated data which approximates reading and math scores for ~189,000 3rd-8th grade students in Oregon public schools see [this Kaggle page](https://www.kaggle.com/c/edld-654-spring-2020) for details. For the purpose of demonstration, we’ll be sampling 1% of the data with `sample_frac()` to keep computer processing time manageable. All school IDs in the data are real, so we can use that information to link the data with other sources. Specifically, we’re also going to pull in some data on student enrollment in free and reduced lunch from the National Center for Education Statistics and some ethnicity data from the Oregon Department of Education. + + +```r +set.seed(100) + +# import data and perform initial cleaning +# initial cleaning steps include: +# *recode NA's for lang_cd and ayp_lep to more meaningful values +# *remove vars with entirely missing data +# Note: the data is called 'train.csv', but we will actually further split this into its own training and testing data + +dat <- read_csv(here::here("static", "data", "train.csv")) %>% + select(-classification) %>% # remove this variable because it's redundant with `score` + mutate(lang_cd = ifelse(is.na(lang_cd), "E", lang_cd), + ayp_lep = ifelse(is.na(ayp_lep), "G", ayp_lep)) %>% + sample_frac(.01) %>% # sample 1% of the data to reduce run time + janitor::remove_empty(c("rows", "cols")) %>% + drop_na() %>% + select_if(~length(unique(.x)) > 1) + +# import fall membership report ethcnicity data and do some basic cleaning and renaming +sheets <- readxl::excel_sheets(here::here("static", "data", "fallmembershipreport_20192020.xlsx")) + +ode_schools <- readxl::read_xlsx(here::here("static", "data", "fallmembershipreport_20192020.xlsx"), + sheet = sheets[4]) + +ethnicities <- ode_schools %>% + select(attnd_schl_inst_id = `Attending School ID`, + attnd_dist_inst_id = `Attending District Institution ID`, + sch_name = `School Name`, + contains("%")) %>% + janitor::clean_names() + +names(ethnicities) <- gsub("x2019_20_percent", "p", names(ethnicities)) + +# join ethnicity data with original dataset +dat <- left_join(dat, ethnicities) + +# import and tidy free and reduced lunch data +frl <- rio::import("https://nces.ed.gov/ccd/Data/zip/ccd_sch_033_1718_l_1a_083118.zip", + setclass = "tbl_df") %>% + janitor::clean_names() %>% + filter(st == "OR") %>% + select(ncessch, lunch_program, student_count) %>% + mutate(student_count = replace_na(student_count, 0)) %>% + pivot_wider(names_from = lunch_program, + values_from = student_count) %>% + janitor::clean_names() %>% + mutate(ncessch = as.double(ncessch)) + +# import student counts for each school across grades +stu_counts <- rio::import("https://github.com/datalorax/ach-gap-variability/raw/master/data/achievement-gaps-geocoded.csv", setclass = "tbl_df") %>% + filter(state == "OR" & year == 1718) %>% + count(ncessch, wt = n) %>% + mutate(ncessch = as.double(ncessch)) + +# join frl and stu_counts data +frl <- left_join(frl, stu_counts) + +# add frl data to train data +dat <- left_join(dat, frl) +``` + +After loading in our three datasets, we’ll join them together to make one cohesive data set to use for modelling. After joining, the data contains both student-level variables (e.g. gender, ethnicity, enrollment in special education/talented and gifted programs, etc.) and district-level variables (e.g. school longitude and latitude, proportion of students who qualify for free and reduced-price lunch, etc.), all of which will be included for each 3 of our tidymodels tree-based examples. + +For a more complete description of the variables, you can download the data dictionary [here](data_dictionary.csv). + +## Explore the data + +We’ll use the `skimr::skim()` to take a closer look at our variables. Many numeric predictors are clearly non-normal (see histograms below), but this is no problem as tree-based methods are robust to non-normality. + + +```r +dat %>% + select(-contains("id"), -ncessch, -missing, -not_applicable) %>% # remove ID and irrelevant variables + mutate(tst_dt = lubridate::as_date(lubridate::mdy_hms(tst_dt))) %>% # covert test date to date + modify_if(is.character, as.factor) %>% # convert character vars to factors + skim() %>% + select(-starts_with("numeric.p")) # remove quartiles +``` + + +Table: Table 1: Data summary + +| | | +|:------------------------|:----------| +|Name |Piped data | +|Number of rows |1864 | +|Number of columns |41 | +|_______________________ | | +|Column type frequency: | | +|Date |1 | +|factor |25 | +|numeric |15 | +|________________________ | | +|Group variables |None | + + +**Variable type: Date** + +|skim_variable | n_missing| complete_rate|min |max |median | n_unique| +|:-------------|---------:|-------------:|:----------|:----------|:----------|--------:| +|tst_dt | 0| 1|2018-03-19 |2018-06-08 |2018-05-18 | 47| + + +**Variable type: factor** + +|skim_variable | n_missing| complete_rate|ordered | n_unique|top_counts | +|:-------------------|---------:|-------------:|:-------|--------:|:----------------------------------| +|gndr | 0| 1|FALSE | 2|M: 958, F: 906 | +|ethnic_cd | 0| 1|FALSE | 7|W: 1153, H: 455, M: 91, A: 84 | +|tst_bnch | 0| 1|FALSE | 6|G4: 337, 2B: 334, G7: 316, G6: 308 | +|migrant_ed_fg | 0| 1|FALSE | 2|N: 1805, Y: 59 | +|ind_ed_fg | 0| 1|FALSE | 2|N: 1841, Y: 23 | +|sp_ed_fg | 0| 1|FALSE | 2|N: 1612, Y: 252 | +|tag_ed_fg | 0| 1|FALSE | 2|N: 1755, Y: 109 | +|econ_dsvntg | 0| 1|FALSE | 2|Y: 1077, N: 787 | +|ayp_lep | 0| 1|FALSE | 10|G: 1481, F: 155, Y: 84, E: 62 | +|stay_in_dist | 0| 1|FALSE | 2|Y: 1822, N: 42 | +|stay_in_schl | 0| 1|FALSE | 2|Y: 1806, N: 58 | +|dist_sped | 0| 1|FALSE | 2|N: 1849, Y: 15 | +|trgt_assist_fg | 0| 1|FALSE | 2|N: 1786, Y: 78 | +|ayp_schl_partic | 0| 1|FALSE | 2|Y: 1849, N: 15 | +|ayp_dist_prfrm | 0| 1|FALSE | 2|Y: 1812, N: 52 | +|ayp_schl_prfrm | 0| 1|FALSE | 2|Y: 1781, N: 83 | +|rc_schl_partic | 0| 1|FALSE | 2|Y: 1849, N: 15 | +|rc_dist_prfrm | 0| 1|FALSE | 2|Y: 1812, N: 52 | +|rc_schl_prfrm | 0| 1|FALSE | 2|Y: 1781, N: 83 | +|lang_cd | 0| 1|FALSE | 2|E: 1816, S: 48 | +|tst_atmpt_fg | 0| 1|FALSE | 2|Y: 1861, P: 3 | +|grp_rpt_schl_partic | 0| 1|FALSE | 2|Y: 1849, N: 15 | +|grp_rpt_dist_prfrm | 0| 1|FALSE | 2|Y: 1853, N: 11 | +|grp_rpt_schl_prfrm | 0| 1|FALSE | 2|Y: 1838, N: 26 | +|sch_name | 1| 1|FALSE | 681|Sto: 13, Whi: 11, Hig: 10, J W: 10 | + + +**Variable type: numeric** + +|skim_variable | n_missing| complete_rate| mean| sd|hist | +|:----------------------------------|---------:|-------------:|-------:|------:|:-----| +|enrl_grd | 0| 1| 5.47| 1.67|▇▅▃▅▃ | +|score | 0| 1| 2497.11| 115.24|▁▃▇▂▁ | +|lat | 0| 1| 44.73| 1.05|▂▁▃▅▇ | +|lon | 0| 1| -122.54| 1.17|▆▇▁▁▁ | +|p_american_indian_alaska_native | 1| 1| 0.01| 0.05|▇▁▁▁▁ | +|p_asian | 1| 1| 0.04| 0.07|▇▁▁▁▁ | +|p_native_hawaiian_pacific_islander | 1| 1| 0.01| 0.01|▇▁▁▁▁ | +|p_black_african_american | 1| 1| 0.02| 0.04|▇▁▁▁▁ | +|p_hispanic_latino | 1| 1| 0.24| 0.19|▇▅▂▁▁ | +|p_white | 1| 1| 0.61| 0.20|▁▃▅▇▆ | +|p_multiracial | 1| 1| 0.07| 0.03|▇▆▁▁▁ | +|free_lunch_qualified | 0| 1| 224.52| 134.82|▇▇▃▁▁ | +|reduced_price_lunch_qualified | 0| 1| 39.10| 23.64|▆▇▃▁▁ | +|no_category_codes | 0| 1| 263.63| 151.80|▆▇▃▁▁ | +|n | 0| 1| 793.78| 532.54|▇▃▂▁▁ | + +While most of our predictors are categorical, we can use corrplot to better visualize the relationships among the numeric variables. + + +```r +dat %>% + select(-contains("id"), -ncessch, -missing, -not_applicable) %>% + select_if(is.numeric) %>% + select(score, everything()) %>% + cor(use = "complete.obs") %>% + corrplot::corrplot() +``` + + + + +## Split data and resample + +The first step of our analysis is to split our data into two separate sets: a "training" set and a "testing" set. The training set is used to train a model and, if desired, to adjust (i.e., "tune") the model's hyperparameters before evaluating its final performance on our test data. By allowing us to test a model on a new sample, we assess "out of sample" accuracy (i.e., unseen data-—what all predictive models are interested in) and limit overfitting to the training set. We can do this efficiently with the `initial_split()` function. This comes from the rsample package, which is part of the tidymodels package that we already loaded. Defaults put 75% of the data in the training set and 25% in the test set, but this can be adjusted with the `prop` argument. Then, we’ll extract the training data from our split object and assign it a name. + +To further prevent over-fitting, we’ll resample our data using `vfold_cv()`. This function outputs k-*fold* cross-validated versions of our training data, where k = the number of times we resample (unsure why v- is used instead of k- here). By using k = 10 data sets, we get a better estimate of the model's out-of-sample accuracy. On top of decreasing bias from over-fitting, this is essential when tuning hyperparameters (though we plan to apply defaults and not tune here, for brevity). Though our use of 10-fold cross validation is both frequently used and effective, it should be noted that other methods (e.g., bootstrap resampling) or other k-values are sometimes used to accomplish the same goal. + + +```r +# split the data +split <- initial_split(dat) + +# extract the training data +train <- training(split) + +# resample the data with 10-fold cross-validation (10-fold by default) +cv <- vfold_cv(train) +``` + +## Pre-processing + +Before we add in our data to the model, we’re going to set up an object that pre-processes our data. This is called a *recipe*. To create a recipe, you’ll first specify a formula for your model, indicating which variable is your outcome and which are your predictors. Using `~.` here will indicate that we want to use all variables other than `score` as predictors. Then, we can specify a series of pre-processing steps for our data that directs our recipe to assign our variables a role or performs feature engineering steps. Pre-processing may be sound uncommon, but if you've ever used `lm()` (or several other `R` functions) you've done some of this by simply calling the function (e.g., automatic dummy-coding to handle categorical data). This is beneficial because it gives the analyst more control, despite adding complexity to the process. + +A complete list of possible pre-processing steps can be found here: https://www.tidymodels.org/find/recipes/ + + + +```r +rec <- recipe(score ~ ., train) %>% + step_mutate(tst_dt = as.numeric(lubridate::mdy_hms(tst_dt))) %>% # convert `test date` variable to a date + update_role(contains("id"), ncessch, new_role = "id vars") %>% # declare ID variables + step_nzv(all_predictors(), freq_cut = 0, unique_cut = 0) %>% # remove variables with zero variances + step_novel(all_nominal()) %>% # prepares test data to handle previously unseen factor levels + step_unknown(all_nominal()) %>% # categorizes missing categorical data (NA's) as `unknown` + step_medianimpute(all_numeric(), -all_outcomes(), -has_role("id vars")) %>% # replaces missing numeric observations with the median + step_dummy(all_nominal(), -has_role("id vars")) # dummy codes categorical variables +``` + + +## Create a model + +The last step before bringing in our data is to specify our model. This will call upon functions from the parsnip package, which standardizes language for specifying a multitude of statistical models. There are a few core elements that you will need to specify for each model + +### The type of model + +This indicates what type of model you choose to fit, each of which will be a different function. We’ll be focusing on decision tree methods using `bag_tree()`, `random_forest()`, and `boost_tree()`. A full list of models can be found here https://www.tidymodels.org/find/parsnip/ + +### The engine + +`set_engine()` calls the package to support the model you specified above. + +### The mode + +`set_mode()` indicates the type of prediction you’d like to use in your model, you’ll choose between regression and classification. Since we are looking to predict student scores, which is a continuous predictor, we’ll be choosing regression. + +### The arguments + +`set_args()` allows you to set values for various parameters for your model, each model type will have a specific set of parameters that can be altered. For these parameters, you can either set a particular value or you can use the tune function to search for the optimal value of each parameter. Tuning requires a few extra steps, so we will leave the default arguments for clarity. For more information on tuning check out https://tune.tidymodels.org/. + +## Create a workflow + +Up to this point we’ve been setting up a lot of individual elements and now it is time to combine them to create a cohesive framework, called a *workflow*, so we can run our desired models. First, we’ll use the `workflow()` command and then we’ll pulling the recipe and model we already created. The next section shows three examples of specifying models and creating a workflow for different decision tree methods. + +## Model Examples + +### Bagged trees + +A bagged tree approach creates multiple subsets of data from the training set which are randomly chosen with replacement. Each subset of data is used to train a given decision tree. In the end, we have an ensemble of different models. The predictions from all the different trees are averaged together, giving us a stronger prediction than one tree could independently. + +#### Specify model + + +```r +set.seed(100) +mod_bag <- bag_tree() %>% + set_mode("regression") %>% + set_engine("rpart", times = 10) # 10 bootstrap resamples +``` + +#### Create workflow + + +```r +wflow_bag <- workflow() %>% + add_recipe(rec) %>% + add_model(mod_bag) +``` + +#### Fit the model + + +```r +set.seed(100) +plan(multisession) + +fit_bag <- fit_resamples( + wflow_bag, + cv, + metrics = metric_set(rmse, rsq), + control = control_resamples(verbose = TRUE, + save_pred = TRUE, + extract = function(x) extract_model(x))) +``` + +#### Visualize + +The plot below shows the root nodes from a bagged tree made of 100 trees (10 folds x 10 bootstrapped resamples). Root nodes are the 1st node in a decision tree, and they are determined by which variable best optimizes a loss function (e.g., minimizes mean square error [MSE] for continuous outcomes or Gini Index for categorical outcomes). Put roughly, the most common root nodes can be thought of as the most "important" predictors. + + +```r +# extract roots +bag_roots <- function(x){ + x %>% + select(.extracts) %>% + unnest(cols = c(.extracts)) %>% + mutate(models = map(.extracts, + ~.x$model_df)) %>% + select(-.extracts) %>% + unnest(cols = c(models)) %>% + mutate(root = map_chr(model, + ~as.character(.x$fit$frame[1, 1]))) %>% + select(root) +} + +# plot +bag_roots(fit_bag) %>% + ggplot(mapping = aes(x = fct_rev(fct_infreq(root)))) + + geom_bar() + + coord_flip() + + labs(x = "root", y = "count") +``` + + + +### Random forest + +Random forest is similar to bagged tree methodology but goes one step further. In addition to taking random subsets of data, the model also draws a random selection of features. Instead of utilizing all features, the random subset of features allows more predictors to be eligible root nodes. This is particularly useful for handling high dimensionality data (e.g., have more variables than participants/cases). + +#### Specify the model + + +```r +set.seed(100) +mod_rf <-rand_forest() %>% + set_engine("ranger", + num.threads = parallel::detectCores(), + importance = "permutation", + verbose = TRUE) %>% + set_mode("regression") %>% + set_args(trees = 1000) +``` + +#### Create workflow + + +```r +wflow_rf <- workflow() %>% + add_model(mod_rf) %>% + add_recipe(rec) +``` + +#### Fit the model + + +```r +set.seed(100) +plan(multisession) + +fit_rf <- fit_resamples( + wflow_rf, + cv, + metrics = metric_set(rmse, rsq), + control = control_resamples(verbose = TRUE, + save_pred = TRUE, + extract = function(x) x) +) +``` + +#### Visualize + +The plot below shows the root nodes from a random forest with 1000 trees (specified using `set_args(trees = 1000)` in the parsnip model object). + + +```r +# extract roots +rf_tree_roots <- function(x){ + map_chr(1:1000, + ~ranger::treeInfo(x, tree = .)[1, "splitvarName"]) +} + +rf_roots <- function(x){ + x %>% + select(.extracts) %>% + unnest(cols = c(.extracts)) %>% + mutate(fit = map(.extracts, + ~.x$fit$fit$fit), + oob_rmse = map_dbl(fit, + ~sqrt(.x$prediction.error)), + roots = map(fit, + ~rf_tree_roots(.)) + ) %>% + select(roots) %>% + unnest(cols = c(roots)) +} + +# plot +rf_roots(fit_rf) %>% + group_by(roots) %>% + count() %>% + arrange(desc(n)) %>% + filter(n > 75) %>% + ggplot(aes(fct_reorder(roots, n), n)) + + geom_col() + + coord_flip() + + labs(x = "root", y = "count") +``` + + + +### Boosted trees + +Boosted trees, like bagged trees, are an ensemble model. Instead of applying successive models to resampled data and pooling estimates, boosted trees fit the next tree to the residuals (i.e., error term) of the prior tree. The goal is to minimize residual error through multiple trees, and is typically done with fairly "shallow" decision tree (i.e., 1-6 splits in each tree). Though each model is only slightly improving the error rate, the sequential use of many shallow trees makes computationally efficient (i.e. reduced run time) and highly accurate predictions. + +#### Specify the model + + +```r +mod_boost <- boost_tree() %>% + set_engine("xgboost", nthreads = parallel::detectCores()) %>% + set_mode("regression") +``` + +#### Create workflow + + +```r +wflow_boost <- workflow() %>% + add_recipe(rec) %>% + add_model(mod_boost) +``` + +#### Fit the model + + +```r +set.seed(100) +plan(multisession) + +fit_boost <- fit_resamples( + wflow_boost, + cv, + metrics = metric_set(rmse, rsq), + control = control_resamples(verbose = TRUE, + save_pred = TRUE) +) +``` + +#### Visualize + +One of the few downfalls of tidymodels is its (current) inability to plot these tree-based models. For the past two models, it was simpler to extract root nodes and plot them, but their interpretation (as we're fitting to residuals instead of data sets) are not straightforward. For that reason, we don't have any pretty plots here. Instead, we'll skip to evaluating the metrics of all models. + +## Evaluate metrics + +After running these three models, it’s time to evaluate their performance. We can do this with `tune::collect_metrics()`. The table below shows the estimate of the out-of-sample performance for each of our 3 models. + + +```r +collect_metrics(fit_bag) %>% + bind_rows(collect_metrics(fit_rf)) %>% + bind_rows(collect_metrics(fit_boost)) %>% + filter(.metric == "rmse") %>% + mutate(model = c("bag", "rf", "boost")) %>% + select(model, everything()) %>% + knitr::kable() +``` + + + +|model |.metric |.estimator | mean| n| std_err| +|:-----|:-------|:----------|--------:|--:|--------:| +|bag |rmse |standard | 96.70756| 10| 1.356172| +|rf |rmse |standard | 93.66723| 10| 1.475393| +|boost |rmse |standard | 92.46805| 10| 1.478565| + +Here, we are faced with a common problem in the machine learning world: choosing between models that perform similarly (see overlapping standard errors). Whether we would prefer random forests or bagged trees may depend on computational efficiency (i.e., time) or other factors. In practice, tuning several hyperparameters may have made one model clearly preferable over the others, but in our case - relying on all defaults - we would probably have similar performance with both models on a new data set and would prefer random forest or boosted tree models for their efficiency. + +## Out-of-sample performance + +The final step is to apply each trained model to our test data using `last_fit()`. + + +```r +# bagged trees +final_fit_bag <- last_fit( + wflow_bag, + split = split +) + +# random forest +final_fit_rf <- last_fit( + wflow_rf, + split = split +) + +# boosted trees +final_fit_boost <- last_fit( + wflow_boost, + split = split +) +``` + +The table below shows the actual out-of-sample performance for each of our 3 models. + + +```r +# show performance on test data +collect_metrics(final_fit_bag) %>% + bind_rows(collect_metrics(final_fit_rf)) %>% + bind_rows(collect_metrics(final_fit_boost)) %>% + filter(.metric == "rmse") %>% + mutate(model = c("bag", "rf", "boost")) %>% + select(model, everything()) %>% + knitr::kable() +``` + + + +|model |.metric |.estimator | .estimate| +|:-----|:-------|:----------|---------:| +|bag |rmse |standard | 96.62098| +|rf |rmse |standard | 93.80719| +|boost |rmse |standard | 90.30180| + +After applying our 3 trained models to the unseen test data, it looks like the boosted tree model is the winner since it has the lowest RMSE. In this example, we only used 1% of the data to train these models, which could make it difficult to meaningfully compare their performance. In practice, the random forest model results in the best out-of-sample prediction when using all of the available data, which we did for the [Kaggle competition](https://www.kaggle.com/c/edld-654-spring-2020/leaderboard). + +
Session Info + +``` +## ─ Session info ─────────────────────────────────────────────────────────────── +## setting value +## version R version 4.0.3 (2020-10-10) +## os macOS Catalina 10.15.7 +## system x86_64, darwin17.0 +## ui X11 +## language (EN) +## collate en_US.UTF-8 +## ctype en_US.UTF-8 +## tz America/Los_Angeles +## date 2021-12-01 +## +## ─ Packages ─────────────────────────────────────────────────────────────────── +## package * version date lib source +## assertthat 0.2.1 2019-03-21 [1] CRAN (R 4.0.2) +## backports 1.1.10 2020-09-15 [1] CRAN (R 4.0.2) +## baguette * 0.1.0 2020-10-28 [1] CRAN (R 4.0.2) +## base64enc 0.1-3 2015-07-28 [1] CRAN (R 4.0.2) +## blob 1.2.1 2020-01-20 [1] CRAN (R 4.0.2) +## blogdown 1.0.1 2021-01-11 [1] Github (rstudio/blogdown@0f7f73f) +## bookdown 0.21 2020-10-13 [1] CRAN (R 4.0.3) +## broom * 0.7.1 2020-10-02 [1] CRAN (R 4.0.2) +## C50 0.1.3.1 2020-05-26 [1] CRAN (R 4.0.2) +## cellranger 1.1.0 2016-07-27 [1] CRAN (R 4.0.2) +## class 7.3-17 2020-04-26 [1] CRAN (R 4.0.3) +## cli 2.2.0 2020-11-20 [1] CRAN (R 4.0.3) +## codetools 0.2-16 2018-12-24 [1] CRAN (R 4.0.3) +## colorspace 2.0-0 2020-11-11 [1] CRAN (R 4.0.2) +## corrplot 0.84 2017-10-16 [1] CRAN (R 4.0.2) +## crayon 1.3.4 2017-09-16 [1] CRAN (R 4.0.2) +## Cubist 0.2.3 2020-01-10 [1] CRAN (R 4.0.2) +## data.table 1.13.6 2020-12-30 [1] CRAN (R 4.0.2) +## DBI 1.1.0 2019-12-15 [1] CRAN (R 4.0.2) +## dbplyr 1.4.4 2020-05-27 [1] CRAN (R 4.0.2) +## dials * 0.0.8 2020-07-08 [1] CRAN (R 4.0.2) +## DiceDesign 1.8-1 2019-07-31 [1] CRAN (R 4.0.2) +## digest 0.6.27 2020-10-24 [1] CRAN (R 4.0.2) +## dplyr * 1.0.3 2021-01-15 [1] CRAN (R 4.0.2) +## earth 5.3.0 2020-10-11 [1] CRAN (R 4.0.2) +## ellipsis 0.3.1 2020-05-15 [1] CRAN (R 4.0.2) +## evaluate 0.14 2019-05-28 [1] CRAN (R 4.0.1) +## fansi 0.4.2 2021-01-15 [1] CRAN (R 4.0.2) +## farver 2.0.3 2020-01-16 [1] CRAN (R 4.0.2) +## forcats * 0.5.0 2020-03-01 [1] CRAN (R 4.0.2) +## foreach 1.5.0 2020-03-30 [1] CRAN (R 4.0.2) +## Formula 1.2-4 2020-10-16 [1] CRAN (R 4.0.2) +## fs 1.5.0 2020-07-31 [1] CRAN (R 4.0.2) +## furrr 0.1.0 2018-05-16 [1] CRAN (R 4.0.2) +## future * 1.18.0 2020-07-09 [1] CRAN (R 4.0.2) +## generics 0.1.0 2020-10-31 [1] CRAN (R 4.0.2) +## ggplot2 * 3.3.3 2020-12-30 [1] CRAN (R 4.0.2) +## globals 0.12.5 2019-12-07 [1] CRAN (R 4.0.2) +## glue 1.4.2 2020-08-27 [1] CRAN (R 4.0.2) +## gower 0.2.2 2020-06-23 [1] CRAN (R 4.0.2) +## GPfit 1.0-8 2019-02-08 [1] CRAN (R 4.0.2) +## gtable 0.3.0 2019-03-25 [1] CRAN (R 4.0.2) +## hardhat 0.1.4 2020-07-02 [1] CRAN (R 4.0.2) +## haven 2.3.1 2020-06-01 [1] CRAN (R 4.0.2) +## highr 0.8 2019-03-20 [1] CRAN (R 4.0.2) +## hms 0.5.3 2020-01-08 [1] CRAN (R 4.0.2) +## htmltools 0.5.0 2020-06-16 [1] CRAN (R 4.0.2) +## httr 1.4.2 2020-07-20 [1] CRAN (R 4.0.2) +## infer * 0.5.4.9000 2021-01-19 [1] Github (tidymodels/infer@9044fff) +## inum 1.0-1 2019-04-25 [1] CRAN (R 4.0.2) +## ipred 0.9-9 2019-04-28 [1] CRAN (R 4.0.2) +## iterators 1.0.12 2019-07-26 [1] CRAN (R 4.0.2) +## jsonlite 1.7.2 2020-12-09 [1] CRAN (R 4.0.2) +## knitr 1.30 2020-09-22 [1] CRAN (R 4.0.2) +## labeling 0.4.2 2020-10-20 [1] CRAN (R 4.0.2) +## lattice 0.20-41 2020-04-02 [1] CRAN (R 4.0.3) +## lava 1.6.7 2020-03-05 [1] CRAN (R 4.0.2) +## lhs 1.0.2 2020-04-13 [1] CRAN (R 4.0.2) +## libcoin 1.0-6 2020-08-14 [1] CRAN (R 4.0.2) +## lifecycle 0.2.0 2020-03-06 [1] CRAN (R 4.0.2) +## listenv 0.8.0 2019-12-05 [1] CRAN (R 4.0.2) +## lubridate 1.7.9.2 2020-11-13 [1] CRAN (R 4.0.2) +## magrittr 2.0.1 2020-11-17 [1] CRAN (R 4.0.3) +## MASS 7.3-51.6 2020-04-26 [1] CRAN (R 4.0.2) +## Matrix 1.2-18 2019-11-27 [1] CRAN (R 4.0.3) +## modeldata * 0.0.2 2020-06-22 [1] CRAN (R 4.0.2) +## modelr 0.1.8 2020-05-19 [1] CRAN (R 4.0.2) +## munsell 0.5.0 2018-06-12 [1] CRAN (R 4.0.2) +## mvtnorm 1.1-1 2020-06-09 [1] CRAN (R 4.0.2) +## nnet 7.3-14 2020-04-26 [1] CRAN (R 4.0.3) +## parsnip * 0.1.4 2020-10-27 [1] CRAN (R 4.0.2) +## partykit 1.2-10 2020-10-12 [1] CRAN (R 4.0.2) +## pillar 1.4.7 2020-11-20 [1] CRAN (R 4.0.2) +## pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.0.2) +## plotmo 3.6.0 2020-09-13 [1] CRAN (R 4.0.2) +## plotrix 3.7-8 2020-04-16 [1] CRAN (R 4.0.2) +## plyr 1.8.6 2020-03-03 [1] CRAN (R 4.0.2) +## pROC 1.16.2 2020-03-19 [1] CRAN (R 4.0.2) +## prodlim 2019.11.13 2019-11-17 [1] CRAN (R 4.0.2) +## purrr * 0.3.4 2020-04-17 [1] CRAN (R 4.0.2) +## R6 2.5.0 2020-10-28 [1] CRAN (R 4.0.2) +## ranger 0.12.1 2020-01-10 [1] CRAN (R 4.0.2) +## Rcpp 1.0.5 2020-07-06 [1] CRAN (R 4.0.2) +## readr * 1.4.0 2020-10-05 [1] CRAN (R 4.0.2) +## readxl 1.3.1 2019-03-13 [1] CRAN (R 4.0.2) +## recipes * 0.1.14 2020-10-17 [1] CRAN (R 4.0.2) +## repr 1.1.0 2020-01-28 [1] CRAN (R 4.0.2) +## reprex 0.3.0 2019-05-16 [1] CRAN (R 4.0.2) +## reshape2 1.4.4 2020-04-09 [1] CRAN (R 4.0.2) +## rlang 0.4.10 2020-12-30 [1] CRAN (R 4.0.2) +## rmarkdown 2.6 2020-12-14 [1] CRAN (R 4.0.2) +## rpart 4.1-15 2019-04-12 [1] CRAN (R 4.0.3) +## rsample * 0.0.8 2020-09-23 [1] CRAN (R 4.0.2) +## rstudioapi 0.13 2020-11-12 [1] CRAN (R 4.0.2) +## rvest 0.3.6 2020-07-25 [1] CRAN (R 4.0.2) +## scales * 1.1.1 2020-05-11 [1] CRAN (R 4.0.2) +## sessioninfo 1.1.1 2018-11-05 [1] CRAN (R 4.0.2) +## skimr * 2.1.2 2020-07-06 [1] CRAN (R 4.0.2) +## stringi 1.5.3 2020-09-09 [1] CRAN (R 4.0.2) +## stringr * 1.4.0 2019-02-10 [1] CRAN (R 4.0.2) +## survival 3.1-12 2020-04-10 [1] CRAN (R 4.0.0) +## TeachingDemos 2.12 2020-04-07 [1] CRAN (R 4.0.2) +## tibble * 3.0.5 2021-01-15 [1] CRAN (R 4.0.2) +## tidymodels * 0.1.1 2020-07-14 [1] CRAN (R 4.0.2) +## tidyr * 1.1.2 2020-08-27 [1] CRAN (R 4.0.2) +## tidyselect 1.1.0 2020-05-11 [1] CRAN (R 4.0.2) +## tidyverse * 1.3.0 2019-11-21 [1] CRAN (R 4.0.2) +## timeDate 3043.102 2018-02-21 [1] CRAN (R 4.0.2) +## tune * 0.1.1 2020-07-08 [1] CRAN (R 4.0.2) +## vctrs 0.3.6 2020-12-17 [1] CRAN (R 4.0.2) +## withr 2.4.0 2021-01-16 [1] CRAN (R 4.0.2) +## workflows * 0.1.2 2020-07-07 [1] CRAN (R 4.0.2) +## xfun 0.20 2021-01-06 [1] CRAN (R 4.0.3) +## xgboost * 1.2.0.1 2020-09-02 [1] CRAN (R 4.0.2) +## xml2 1.3.2 2020-04-23 [1] CRAN (R 4.0.2) +## yaml 2.2.1 2020-02-01 [1] CRAN (R 4.0.2) +## yardstick * 0.0.7 2020-07-13 [1] CRAN (R 4.0.2) +## +## [1] /Library/Frameworks/R.framework/Versions/4.0/Resources/library +``` +
diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/__packages b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/__packages new file mode 100644 index 0000000..486b910 --- /dev/null +++ b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/__packages @@ -0,0 +1,26 @@ +base +tidymodels +broom +scales +dials +dplyr +ggplot2 +infer +modeldata +parsnip +purrr +recipes +rsample +tibble +tidyr +tune +workflows +yardstick +tidyverse +readr +stringr +forcats +skimr +baguette +future +xgboost diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.RData b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.RData new file mode 100644 index 0000000..4bea611 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.RData differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdb b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdb new file mode 100644 index 0000000..1d23617 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdb differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdx b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdx new file mode 100644 index 0000000..80c3d50 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-10_2bb3b3f01add4c8318d5afa34b8637b2.rdx differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.RData b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.RData new file mode 100644 index 0000000..664076c Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.RData differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdb b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdb new file mode 100644 index 0000000..02678f0 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdb differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdx b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdx new file mode 100644 index 0000000..6ba43f4 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-14_fc506d1990d4a9f8f61a6f838e2ab119.rdx differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.RData b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.RData new file mode 100644 index 0000000..a331a60 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.RData differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdb b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdb new file mode 100644 index 0000000..48a2a41 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdb differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdx b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdx new file mode 100644 index 0000000..abc5120 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-18_4571ab498c9f06dfcb5aa518faf36ef6.rdx differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.RData b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.RData new file mode 100644 index 0000000..0f4b876 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.RData differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdb b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdb new file mode 100644 index 0000000..64f7da7 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdb differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdx b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdx new file mode 100644 index 0000000..8e5de65 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-20_f098ad1f34303e5771e95828695dc318.rdx differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.RData b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.RData new file mode 100644 index 0000000..fb3c3e5 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.RData differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdb b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdb new file mode 100644 index 0000000..9422722 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdb differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdx b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdx new file mode 100644 index 0000000..1ca5162 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_cache/html/unnamed-chunk-3_6ad0f2ee7684e1fa34817a3b499b507e.rdx differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-11-1.png b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-11-1.png new file mode 100644 index 0000000..f699b30 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-11-1.png differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-15-1.png b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-15-1.png new file mode 100644 index 0000000..f97fbc7 Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-15-1.png differ diff --git a/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-5-1.png b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-5-1.png new file mode 100644 index 0000000..9e24d7f Binary files /dev/null and b/content/blog/2020-06-02-tidymodels-decision-tree-learning-in-r/index_files/figure-html/unnamed-chunk-5-1.png differ diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/certificate.png b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/certificate.png similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/certificate.png rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/certificate.png diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise-operations.png b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise-operations.png similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise-operations.png rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise-operations.png diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_concept_map.png b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_concept_map.png similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_concept_map.png rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_concept_map.png diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_formative_assessment.gif b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_formative_assessment.gif similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_formative_assessment.gif rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/columnwise_formative_assessment.gif diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/featured.jpg b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/featured.jpg similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/featured.jpg rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/featured.jpg diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmd b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmarkdown similarity index 58% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmd rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmarkdown index 7fff80c..93a7bb2 100644 --- a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmd +++ b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.Rmarkdown @@ -1,5 +1,6 @@ --- title: Reflections on RStudio Instructor Training +layout: single author: Brendan Cullen date: '2020-09-03' slug: [] @@ -8,22 +9,23 @@ tags: - data science - education - R -subtitle: 'tl;dr You should definitely look into it.' +subtitle: '' summary: "The 'what' and 'why' of RStudio Instructor Training and resources for those interested in pursuing it." authors: [] -lastmod: '2020-09-03T21:28:31-07:00' +lastmod: '' featured: no image: caption: 'Photo by oatawa on iStock' focal_point: '' preview_only: no projects: [] -output: - blogdown::html_page: - toc: TRUE - toc_depth: 4 --- +
+ +
+
+ A while back I wrote about how we [need more data science training](https://bcullen.rbind.io/post/2020-03-08-data-science-training-needs-in-grad-school/) as grad students in psychology and that one of the best ways for us to get this training is to [learn from each other](https://twitter.com/_bcullen/status/1237414725081653249). This is just one of many reasons why I'm so humbled and excited to have recently become an [RStudio Certified Instructor](https://education.rstudio.com/trainers/people/cullen+brendan/) in the tidyverse. I'm looking forward to start implementing and sharing what I learned with my fellow grad students, especially at the end of this month when I will be leading an introductory R workshop for the new cohort of first year PhD and master's students in my department. @@ -32,15 +34,15 @@ As a small way of paying it forward, I wanted to offer a reflection on what I th ------------------------------------------------------------------------ -# The *what* +## The *what* -::: {.book} -
The best place the start is to read about the RStudio Instructor Training and Certification Program [here](https://education.rstudio.com/trainers/#info). The [RStudio Education Blog](https://education.rstudio.com/categories/certify/) also has lots of helpful posts about the program. -::: +
+The best place the start is to read about the RStudio Instructor Training and Certification Program here. The RStudio Education Blog also has lots of helpful posts about the program. +
The process boils down to three steps. -## Training Course `r fontawesome::fa("chalkboard-teacher")` +### Training Course `r fontawesome::fa("chalkboard-teacher")` The first step is to sign up for the training course, which will likely be held over Zoom and chunked into 3-4 hour segments across 2-3 days. You can access the training materials [here](https://drive.google.com/drive/folders/13ohFt3D0EJ5PDbMaWTxnHH-hwA7G0IvY). @@ -48,7 +50,7 @@ The training course is an interactive introduction to applying evidence-based te
-## Technical Exam `r fontawesome::fa("laptop-code")` +### Technical Exam `r fontawesome::fa("laptop-code")` The technical exam assesses your proficiency in whatever topic for which you are attempting to become a certified instructor. Currently there are options to become a certified instructor in [tidyverse](https://www.tidyverse.org/) and [shiny](https://shiny.rstudio.com/), and each has its own accompanying technical exam. @@ -56,39 +58,31 @@ I took the tidyverse exam, which, broadly speaking, consists of a series of live As many others have suggested, a great way to prepare for this exam is to work through the exercises [R for Data Science](https://r4ds.had.co.nz/), particularly for topics that feel rusty to you, and review the community-contributed [solutions](https://jrnold.github.io/r4ds-exercise-solutions/). -::: {.note} +
I highly recommend going through these sample exams from the RStudio Education Blog start to finish to get a sense of what you might need to review. - [Sample Tidyverse Exam 1](https://education.rstudio.com/blog/2020/02/instructor-certification-exams/#tidyverse-certification-exam) \| [solutions](https://marlycormar.github.io/tidyverse_sample_exam/sample_exam_sols/sols.html) - [Sample Tidyverse Exam 2](https://education.rstudio.com/blog/2020/08/more-example-exams/#tidyverse-exam) \| [solutions](https://tidyverse-exam-v2-solutions.netlify.app/) -::: +

-## Teaching Exam `r fontawesome::fa("user-graduate")` + +### Teaching Exam `r fontawesome::fa("user-graduate")` The first certification exam assesses pedagogical skills related to teaching data science with R and requires giving a 15-minute demonstration lesson on a topic of your choice followed by a series of applied questions, which will likely involve creating formative assessments on unseen material (e.g. multiple choice questions and fill-in-the-blank coding exercises), developing concept maps on data science topics and giving feedback on example teaching based on pedagogical theory. -::: {.note} +
There are also sample teaching exams available. - [Sample Teaching Exam 1](https://education.rstudio.com/blog/2020/02/instructor-certification-exams/#teaching-exam) - [Sample Teaching Exam 2](https://education.rstudio.com/blog/2020/08/more-example-exams/#teaching-exam) -::: - -### Demonstration Lesson: Example -*Column-wise operations with `dplyr`: Old and New* +
-If you'd like to see an example of a demonstration lesson, below are the materials I created for this portion of the teaching exam. I used `penguins` from the [`{palmerpenguins}`](https://allisonhorst.github.io/palmerpenguins/) package as an example data set. (why? because penguins `r emo::ji("penguin")` `r emo::ji("penguin")` `r emo::ji("penguin")`). +### Example Lesson -::: {.github} -
You can find all of the materials for this lesson and the accompanying code on [Github](https://github.com/brendanhcullen/rstudio-instructor-certification). Feel free to share, adapt and re-use for your own teaching. -::: - -#### Slides `r fontawesome::fa("film")` - -I made heavy use of [Yihui Xie](https://yihui.org/en/about/)'s [`{xaringan}`](https://slides.yihui.org/xaringan/) `r emo::ji("package")`, [Garrick Aden-Buie](https://www.garrickadenbuie.com/)'s [`{xaringanExtra}`](https://pkg.garrickadenbuie.com/xaringanExtra/#/) `r emo::ji("package")`, and [Kelly Bodwin](https://www.kelly-bodwin.com/)'s [`{flair}`](https://kbodwin.github.io/flair/index.html) `r emo::ji("package")`, along with [Allison Horst](https://www.allisonhorst.com/)'s unbeatable [artwork](https://github.com/allisonhorst/stats-illustrations). For an excellent `{xaringan}` tutorial, I recommend you check out [these slides](https://arm.rbind.io/slides/xaringan.html#1), from the R Markdown whisperer herself, [Alison Hill](https://alison.rbind.io/). Note: you absolutely do not have to use `{xaringan}` to make your slides, and if your lesson includes more images than code, another method for delivering your slides might be better. +If you'd like to see an example of a demonstration lesson, below are the materials I created for this portion of the teaching exam. You can find all of the source code for this lesson on Github. Feel free to share, adapt and re-use for your own teaching. ```{r echo=FALSE} xaringanExtra::embed_xaringan( @@ -98,84 +92,22 @@ xaringanExtra::embed_xaringan( Full slides available [here](https://columnwise-operations-dplyr.netlify.app/). -
- -
❖ ❖ ❖
- -
- -#### Concept Map `r fontawesome::fa("sitemap")` - -```{r echo=FALSE, out.width="150%"} -knitr::include_graphics("columnwise-operations.png") -``` - -For other community-contributed data science concept maps you can use in your teaching and/or lesson prep, see [here](https://github.com/rstudio/concept-maps). - -
- -
❖ ❖ ❖
- -
- -#### Learner Persona `r fontawesome::fa("user")` - -```{r echo=FALSE} -knitr::include_graphics("learner_persona.png") -``` - -For a list of other example learner personas, see [here](https://rstudio-education.github.io/learner-personas/). - -
- -
❖ ❖ ❖
- -
- -#### Formative Assessment `r fontawesome::fa("user-edit")` - -I created [these interactive exercises](https://brendancullen.shinyapps.io/columnwise_operations_formative_assessment/) using the [`learnr`](https://rstudio.github.io/learnr/) package, which I highly recommend you check out. It's quite powerful and versatile. - -Here's a quick look. - -```{r echo=FALSE} -knitr::include_app("https://brendancullen.shinyapps.io/columnwise_operations_formative_assessment/", height = "500px") -``` - ------------------------------------------------------------------------ -# The *why* +## The *why* -Ok, this might all seem like quite a bit of time and effort. Why go to the trouble of doing this training? In a word, [Greg Wilson](https://third-bit.com/about/). +Why go to the trouble of doing this training? Here are a few reasons that come to mind. -Greg, who co-founded the [Software Carpentry](https://software-carpentry.org/), has over 35 years of experience in education in data science and software engineering, and it shows. He is now part of the [RStudio Education](https://education.rstudio.com/) team, where he runs the the instructor training and certification program. One of the reasons this program stands out is that it benefits from Greg's unique expertise and careful curation of decades of research on evidence-based teaching methods that he has translated into clear and actionable advice. I can guarantee that you will learn a LOT from him. - -Greg's most important [advice for teaching](https://third-bit.com/10rules/#teaching), in my opinion: - -> "Be kind: all else is details." - -**Now, here are some other reasons why you should do this training...** - -## Surge in online teaching `r fontawesome::fa("cloud")` +### Surge in online teaching `r fontawesome::fa("cloud")` Interest in data science education seems to be ever-increasing. The fact that COVID-19 has forced most education to go online might actually present an opportunity to meet this demand in a more scalable and (hopefully more accessible way that doesn't incur the traditional limitations of travel costs or room capacity. Of course, online education comes with a host of inherent challenges. The training course includes a [whole section](https://docs.google.com/presentation/d/1kbYaHv47Vt59JxqXF7U7pQl5XOwsctzpP740iVM7Bc8/edit#slide=id.g55ddde1eae_0_2) on this. I also recommend you check out this [RStudio webinar](https://rstudio.com/resources/webinars/teaching-online-at-short-notice/) and accompanying [blog post](https://education.rstudio.com/blog/2020/03/teaching-online-on-short-notice/) along with answers to some [frequently asked questions](https://education.rstudio.com/blog/2020/03/online-teaching-qa/) about teaching online. As online data science education is becoming increasingly the norm, it seems natural to assume that there will be a need for more certified instructors to meet the growing demand. -
- -
❖ ❖ ❖
- -
- -## Teaching resources galore `r fontawesome::fa("gem")` +### Teaching resources galore `r fontawesome::fa("gem")` Another great reason to become a certified instructor is that, as a data science educator, you have a huge and ever-increasing bank of resources at your disposal. What's more, as a certified instructor, you are eligible for free licenses to [RStudio Pro products](https://rstudio.com/products/) and a significant discount for [RStudio Cloud](https://rstudio.cloud/). Here are just some of the great teaching tools from RStudio and the \#rstats community. -::: {.bookmark} -
The [RStudio Education Blog](https://education.rstudio.com/blog/) is a `r emo::ji("gem")` TREASURE TROVE `r emo::ji("gem")` of resources. Add it to your bookmarks immediately. -::: - **Teaching with RStudio Cloud** - [webinar](https://rstudio.com/resources/webinars/teaching-r-online-with-rstudio-cloud/) and accompanying [blog post](https://education.rstudio.com/blog/2020/04/teaching-with-rstudio-cloud-q-a/), courtesy of [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) @@ -204,87 +136,30 @@ Another great reason to become a certified instructor is that, as a data science - a [book-in-progress](https://rstudio4edu.github.io/rstudio4edu-book/), courtesy of [Desirée De Leon](https://desiree.rbind.io/) and [Alison Hill](https://alison.rbind.io/). This is in a category of its own because it's an absolute gold mine. -
- -
❖ ❖ ❖
- -
- -## Tried and tested `r fontawesome::fa("comments")` +### Tried and tested `r fontawesome::fa("comments")` The instructor training program started back in February 2019 and [as of August 2020](https://education.rstudio.com/blog/2020/08/august-2020-instructors/) there are almost 150 certified tidyverse instructors and 20 shiny instructors. This means that the program has gone through multiple iterations and has made data-driven improvements based on [feedback from participants](https://education.rstudio.com/blog/2020/07/instructor-certification-findings/) -- especially in the realm of supporting online teaching in the aftermath of COVID-19. So you can rest assured that, while it is still a relatively new program, all the kinks have been worked out. -Plus, I'm sure that the content and structure of the training will continue to adapt to the needs and priorities of the community, and you might even be lucky enough to catch a special guest presentation. For example... - -
- - - -```{=html} - -``` -
- -
- -
❖ ❖ ❖
- -
- -## A focus on inclusivity `r fontawesome::fa("hands-helping")` +### A focus on inclusivity `r fontawesome::fa("hands-helping")` The focus of this training is not technical competency -- it's how be an effective teacher. One of the most critical components of teaching effectively is to be inclusive of all learners, regardless of race, religion, sexual orientation, gender identity, disability, etc. The [\#rstats learning community](https://twitter.com/R4DScommunity) is known for being welcoming and inclusive, so it's no surprise that the training course emphasizes these values as well. What I appreciate most about this aspect of the training is that it will challenge you to think about questions and hypothetical scenarios to which there are no easy answers. -However, it is extremely important to be pushed out of your comfort zone to consciously and proactively reflect on how you will confront issues such as systemic racism and institutionalized violence against BIPOC communities, sexism and a deeply ingrained culture of sexual harassment. These issues will inevitably arise in one form or another in your classroom or teaching setting, and it's absolutely necessary that we confront these challenges now more than ever. Check out [this slide](https://docs.google.com/presentation/d/1uYQCbs88aao7Ho4d4mUfYi6hOXhgHWV6noR_-jOaE50/edit#slide=id.g56df7927dc_0_1) and [this talk](https://www.youtube.com/watch?v=EhNisFJPfrs) on effective allyship when you get a chance. +However, it is important to be pushed out of your comfort zone to consciously and proactively reflect on how you will confront issues such as systemic racism and institutionalized violence against BIPOC communities, sexism and a deeply ingrained culture of sexual harassment. These issues will inevitably arise in one form or another in your classroom or teaching setting, and it's necessary that we confront these challenges now more than ever. Check out [this slide](https://docs.google.com/presentation/d/1uYQCbs88aao7Ho4d4mUfYi6hOXhgHWV6noR_-jOaE50/edit#slide=id.g56df7927dc_0_1) and [this talk](https://www.youtube.com/watch?v=EhNisFJPfrs) on effective allyship when you get a chance. -::: {.book} -
For further reading on inclusivity and social justice in data science education, I recommend you read [this post](https://education.rstudio.com/blog/2020/06/native-classroom/) by [Nicole Thompson Gonzalez](http://www.nicolethompsongonzalez.com/) and [this one](https://medium.com/@yimregister/10-ways-to-integrate-social-justice-into-teaching-data-science-f48d13f2337c) by [Yim Register](http://students.washington.edu/yreg/). Also check out the amazing work that [JooYoung Seo](https://jooyoungseo.com/), the first blind RStudio Certified Instructor, has been doing to make data science tools [more accessible](https://education.rstudio.com/blog/2020/07/a11y-midterm/). -::: +
+For further reading on inclusivity and social justice in data science education, I recommend you read this post by Nicole Thompson Gonzalez. Also check out the work that JooYoung Seo has been doing to make data science tools more accessible. +
Another exciting feature is that the training materials are now [available in Spanish](https://drive.google.com/drive/folders/1qwTEMqoqphF9qu7f0lSCSTmikIf5chBi), courtesy of [Laura Acion](https://lacion.rbind.io/), and hopefully other languages soon, as interest in the training seems to be growing around the world. A similar ongoing project to check out is [`glosario`](https://carpentries.github.io/glosario/), an open source glossary of data science terms translated in multiple languages that can be used for teaching (read more [here](https://education.rstudio.com/blog/2020/07/announcing-glosario/)). -
- -
❖ ❖ ❖
- -
- -## Community of practice `r fontawesome::fa("users")` +### Community of practice `r fontawesome::fa("users")` To extend the idea of including *everyone* who wants to learn data science, we must be active in building teaching communities that extend beyond just the walls of academic institutions. -RStudio's [mission](https://education.rstudio.com/teach/#:~:text=RStudio's%20mission%20is%20to%20equip,economy%20that%20rewards%20data%20literacy.&text=All%20of%20RStudio's%20resources%20are,materials%20in%20their%20own%20ways.) is to +RStudio's [mission](https://education.rstudio.com/teach/) is to > "equip everyone, regardless of means, to participate in a global economy that rewards data literacy." A more concrete goal, put forth by [Carl Howe](https://education.rstudio.com/trainers/people/howe+carl/), Director of Education at RStudio, is to train the [next million R users](https://rstudio.com/resources/rstudioconf-2019/the-next-million-r-users/). In becoming an RStudio certified instructor, you can better position yourself to actively participate in reaching this goal. But it's worth reflecting on the fact that teaching and learning doesn't happen in a vacuum -- this is where the idea of community comes in. In my opinion, the fact that R users around the world already have a strong sense of community will make it that much easier to welcome new learners into the fold and make it more likely that they themselves will start to train others one day. - -::: {.book} -
Read more about building a community of practice [here](https://teachtogether.tech/en/index.html#s:community). -::: - ------------------------------------------------------------------------- - -*P.S.* If you need yet another reason to do this training, you get a fancy certificate at the end. `r emo::ji("sparkles")` - -![](certificate.png) - ------------------------------------------------------------------------- - -# Get in touch - -Please feel free to [reach out](https://twitter.com/_bcullen) if you are thinking of participating in the training yourself and want to hear more from someone who's gone through it recently. I would be glad to chat any time! - -![](https://media.giphy.com/media/3o7btQsLqXMJAPu6Na/giphy.gif) diff --git a/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.markdown b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.markdown new file mode 100644 index 0000000..0575297 --- /dev/null +++ b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index.markdown @@ -0,0 +1,165 @@ +--- +title: Reflections on RStudio Instructor Training +layout: single +author: Brendan Cullen +date: '2020-09-03' +slug: [] +categories: [] +tags: + - data science + - education + - R +subtitle: '' +summary: "The 'what' and 'why' of RStudio Instructor Training and resources for those interested in pursuing it." +authors: [] +lastmod: '' +featured: no +image: + caption: 'Photo by oatawa on iStock' + focal_point: '' + preview_only: no +projects: [] +--- + + +
+ +
+
+ +A while back I wrote about how we [need more data science training](https://bcullen.rbind.io/post/2020-03-08-data-science-training-needs-in-grad-school/) as grad students in psychology and that one of the best ways for us to get this training is to [learn from each other](https://twitter.com/_bcullen/status/1237414725081653249). This is just one of many reasons why I'm so humbled and excited to have recently become an [RStudio Certified Instructor](https://education.rstudio.com/trainers/people/cullen+brendan/) in the tidyverse. + +I'm looking forward to start implementing and sharing what I learned with my fellow grad students, especially at the end of this month when I will be leading an introductory R workshop for the new cohort of first year PhD and master's students in my department. + +As a small way of paying it forward, I wanted to offer a reflection on what I think makes this training so unique and worthwhile along with a summary of what's involved and some resources for those who might be interested in knowing more. + +------------------------------------------------------------------------ + +## The *what* + +
+The best place the start is to read about the RStudio Instructor Training and Certification Program here. The RStudio Education Blog also has lots of helpful posts about the program. +
+ +The process boils down to three steps. + +### Training Course + +The first step is to sign up for the training course, which will likely be held over Zoom and chunked into 3-4 hour segments across 2-3 days. You can access the training materials [here](https://drive.google.com/drive/folders/13ohFt3D0EJ5PDbMaWTxnHH-hwA7G0IvY). + +The training course is an interactive introduction to applying evidence-based teaching methods to data science education, such as [learner personas](https://docs.google.com/presentation/d/1aOnX-B9XlAzkrlIeZa5db3_X2Dk8cS27k3klvPn1SQI/edit), [concept maps](https://docs.google.com/presentation/d/1k45SqyM-w4DtK7dmedeX7pk_r8B9Aq0FKKCxC04pTRM/edit), and [formative assessment](https://docs.google.com/presentation/d/1PBxBFpkB4w-C3_l2rWdGMtjxaxDeu8gVP0K0CHJfbdQ/edit) (i.e. short, diagnostic questions or exercises to figure out if learners are forming accurate mental models). The course also covers how to design teaching materials with [reverse instructional design](https://docs.google.com/presentation/d/1PBxBFpkB4w-C3_l2rWdGMtjxaxDeu8gVP0K0CHJfbdQ/edit#slide=id.g5501944768_0_197) that takes into account [cognitive load](https://docs.google.com/presentation/d/1t9QTkRfGP9WYQjiXoaVAuceFe3ySVe_wLT7j2MYC8bE/edit#slide=id.g39e398e252_0_14), [multiple learning strategies](https://docs.google.com/presentation/d/1bq599QkDdaWXmw-B8JM5jwdl5In9O-NTxLPT2iES0vY/edit#slide=id.g5479673425_0_87), and issues of [inclusivity and student motivation](https://docs.google.com/presentation/d/1uYQCbs88aao7Ho4d4mUfYi6hOXhgHWV6noR_-jOaE50/edit) in the classroom. + +
+ +### Technical Exam + +The technical exam assesses your proficiency in whatever topic for which you are attempting to become a certified instructor. Currently there are options to become a certified instructor in [tidyverse](https://www.tidyverse.org/) and [shiny](https://shiny.rstudio.com/), and each has its own accompanying technical exam. + +I took the tidyverse exam, which, broadly speaking, consists of a series of live coding challenges related to using core tidyverse packages for data cleaning and wrangling, data visualization, string manipulation, functional programming, basic statistical modeling, and creating reproducible documents with R Markdown. + +As many others have suggested, a great way to prepare for this exam is to work through the exercises [R for Data Science](https://r4ds.had.co.nz/), particularly for topics that feel rusty to you, and review the community-contributed [solutions](https://jrnold.github.io/r4ds-exercise-solutions/). + +
+I highly recommend going through these sample exams from the RStudio Education Blog start to finish to get a sense of what you might need to review. + +- [Sample Tidyverse Exam 1](https://education.rstudio.com/blog/2020/02/instructor-certification-exams/#tidyverse-certification-exam) \| [solutions](https://marlycormar.github.io/tidyverse_sample_exam/sample_exam_sols/sols.html) +- [Sample Tidyverse Exam 2](https://education.rstudio.com/blog/2020/08/more-example-exams/#tidyverse-exam) \| [solutions](https://tidyverse-exam-v2-solutions.netlify.app/) +
+ +
+ + +### Teaching Exam + +The first certification exam assesses pedagogical skills related to teaching data science with R and requires giving a 15-minute demonstration lesson on a topic of your choice followed by a series of applied questions, which will likely involve creating formative assessments on unseen material (e.g. multiple choice questions and fill-in-the-blank coding exercises), developing concept maps on data science topics and giving feedback on example teaching based on pedagogical theory. + +
+There are also sample teaching exams available. + +- [Sample Teaching Exam 1](https://education.rstudio.com/blog/2020/02/instructor-certification-exams/#teaching-exam) +- [Sample Teaching Exam 2](https://education.rstudio.com/blog/2020/08/more-example-exams/#teaching-exam) + +
+ +### Example Lesson + +If you'd like to see an example of a demonstration lesson, below are the materials I created for this portion of the teaching exam. You can find all of the source code for this lesson on Github. Feel free to share, adapt and re-use for your own teaching. + +
+ + +
+ +Full slides available [here](https://columnwise-operations-dplyr.netlify.app/). + +------------------------------------------------------------------------ + +## The *why* + +Why go to the trouble of doing this training? Here are a few reasons that come to mind. + +### Surge in online teaching + +Interest in data science education seems to be ever-increasing. The fact that COVID-19 has forced most education to go online might actually present an opportunity to meet this demand in a more scalable and (hopefully more accessible way that doesn't incur the traditional limitations of travel costs or room capacity. Of course, online education comes with a host of inherent challenges. The training course includes a [whole section](https://docs.google.com/presentation/d/1kbYaHv47Vt59JxqXF7U7pQl5XOwsctzpP740iVM7Bc8/edit#slide=id.g55ddde1eae_0_2) on this. I also recommend you check out this [RStudio webinar](https://rstudio.com/resources/webinars/teaching-online-at-short-notice/) and accompanying [blog post](https://education.rstudio.com/blog/2020/03/teaching-online-on-short-notice/) along with answers to some [frequently asked questions](https://education.rstudio.com/blog/2020/03/online-teaching-qa/) about teaching online. + +As online data science education is becoming increasingly the norm, it seems natural to assume that there will be a need for more certified instructors to meet the growing demand. + +### Teaching resources galore + +Another great reason to become a certified instructor is that, as a data science educator, you have a huge and ever-increasing bank of resources at your disposal. What's more, as a certified instructor, you are eligible for free licenses to [RStudio Pro products](https://rstudio.com/products/) and a significant discount for [RStudio Cloud](https://rstudio.cloud/). Here are just some of the great teaching tools from RStudio and the \#rstats community. + +**Teaching with RStudio Cloud** + +- [webinar](https://rstudio.com/resources/webinars/teaching-r-online-with-rstudio-cloud/) and accompanying [blog post](https://education.rstudio.com/blog/2020/04/teaching-with-rstudio-cloud-q-a/), courtesy of [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) + +**Interactive lessons with `learnr`** + +- [tutorial and demonstration](https://education.rstudio.com/blog/2020/05/learnr-for-remote/), courtesy of [Allison Horst](https://www.allisonhorst.com/) + +- [lessons learned](https://education.rstudio.com/blog/2020/06/summer-camp-hs/) from using `learnr` to teach high schoolers, courtesy of [Ezgi Karaesmen](https://www.ezgikaraesmen.com/) + +- [a deep dive](https://education.rstudio.com/blog/2020/07/learning-learnr/) into `learnr`, courtesy of [Nischal Shrestha](http://nischalshrestha.me/) + +- [{gradethis} package](https://rstudio-education.github.io/gradethis/) for easily grading `learnr` exercises + +**Openly licensed teaching materials** + +- [a thorough summary](https://education.rstudio.com/blog/2020/05/remote-roundup/) of recent online courses/workshops, courtesy of [Alison Hill](https://alison.rbind.io/) + +- [Data Science in a Box](https://datasciencebox.org/), courtesy of [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) + +- [STAT 545](https://stat545.com/), courtesy of [Jenny Bryan](https://jennybryan.org/about/) + +- [Many others](https://education.rstudio.com/teach/materials/#workshops), courtesy of the RStudio Education Team + +**rstudio4edu** + +- a [book-in-progress](https://rstudio4edu.github.io/rstudio4edu-book/), courtesy of [Desirée De Leon](https://desiree.rbind.io/) and [Alison Hill](https://alison.rbind.io/). This is in a category of its own because it's an absolute gold mine. + +### Tried and tested + +The instructor training program started back in February 2019 and [as of August 2020](https://education.rstudio.com/blog/2020/08/august-2020-instructors/) there are almost 150 certified tidyverse instructors and 20 shiny instructors. This means that the program has gone through multiple iterations and has made data-driven improvements based on [feedback from participants](https://education.rstudio.com/blog/2020/07/instructor-certification-findings/) -- especially in the realm of supporting online teaching in the aftermath of COVID-19. So you can rest assured that, while it is still a relatively new program, all the kinks have been worked out. + +### A focus on inclusivity + +The focus of this training is not technical competency -- it's how be an effective teacher. One of the most critical components of teaching effectively is to be inclusive of all learners, regardless of race, religion, sexual orientation, gender identity, disability, etc. + +The [\#rstats learning community](https://twitter.com/R4DScommunity) is known for being welcoming and inclusive, so it's no surprise that the training course emphasizes these values as well. What I appreciate most about this aspect of the training is that it will challenge you to think about questions and hypothetical scenarios to which there are no easy answers. + +However, it is important to be pushed out of your comfort zone to consciously and proactively reflect on how you will confront issues such as systemic racism and institutionalized violence against BIPOC communities, sexism and a deeply ingrained culture of sexual harassment. These issues will inevitably arise in one form or another in your classroom or teaching setting, and it's necessary that we confront these challenges now more than ever. Check out [this slide](https://docs.google.com/presentation/d/1uYQCbs88aao7Ho4d4mUfYi6hOXhgHWV6noR_-jOaE50/edit#slide=id.g56df7927dc_0_1) and [this talk](https://www.youtube.com/watch?v=EhNisFJPfrs) on effective allyship when you get a chance. + +
+For further reading on inclusivity and social justice in data science education, I recommend you read this post by Nicole Thompson Gonzalez. Also check out the work that JooYoung Seo has been doing to make data science tools more accessible. +
+ +Another exciting feature is that the training materials are now [available in Spanish](https://drive.google.com/drive/folders/1qwTEMqoqphF9qu7f0lSCSTmikIf5chBi), courtesy of [Laura Acion](https://lacion.rbind.io/), and hopefully other languages soon, as interest in the training seems to be growing around the world. A similar ongoing project to check out is [`glosario`](https://carpentries.github.io/glosario/), an open source glossary of data science terms translated in multiple languages that can be used for teaching (read more [here](https://education.rstudio.com/blog/2020/07/announcing-glosario/)). + +### Community of practice + +To extend the idea of including *everyone* who wants to learn data science, we must be active in building teaching communities that extend beyond just the walls of academic institutions. + +RStudio's [mission](https://education.rstudio.com/teach/) is to + +> "equip everyone, regardless of means, to participate in a global economy that rewards data literacy." + +A more concrete goal, put forth by [Carl Howe](https://education.rstudio.com/trainers/people/howe+carl/), Director of Education at RStudio, is to train the [next million R users](https://rstudio.com/resources/rstudioconf-2019/the-next-million-r-users/). In becoming an RStudio certified instructor, you can better position yourself to actively participate in reaching this goal. But it's worth reflecting on the fact that teaching and learning doesn't happen in a vacuum -- this is where the idea of community comes in. In my opinion, the fact that R users around the world already have a strong sense of community will make it that much easier to welcome new learners into the fold and make it more likely that they themselves will start to train others one day. diff --git a/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/fitvids/fitvids.min.js b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/fitvids/fitvids.min.js new file mode 100644 index 0000000..9c25d2d --- /dev/null +++ b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/fitvids/fitvids.min.js @@ -0,0 +1 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.fitvids=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o0?ignored.join():null;var selector=selectors.concat(custom).join();if(!hasLength(selector)){return}containers.forEach(function(container){var videos=queryAll(container,selector);videos.forEach(function(video){if(ignoredSelector&&video.matches(ignoredSelector)){return}wrap(video)})})};function queryAll(el,selector){if(typeof el==="string"){selector=el;el=document}return Array.prototype.slice.call(el.querySelectorAll(selector))}function toSelectorArray(input){if(typeof input==="string"){return input.split(",").map(trim).filter(hasLength)}else if(isArray(input)){return flatten(input.map(toSelectorArray).filter(hasLength))}return input||[]}function wrap(el){if(/fluid-width-video-wrapper/.test(el.parentNode.className)){return}var widthAttr=parseInt(el.getAttribute("width"),10);var heightAttr=parseInt(el.getAttribute("height"),10);var width=!isNaN(widthAttr)?widthAttr:el.clientWidth;var height=!isNaN(heightAttr)?heightAttr:el.clientHeight;var aspect=height/width;el.removeAttribute("width");el.removeAttribute("height");var wrapper=document.createElement("div");el.parentNode.insertBefore(wrapper,el);wrapper.className="fluid-width-video-wrapper";wrapper.style.paddingTop=aspect*100+"%";wrapper.appendChild(el)}function styles(){var div=document.createElement("div");div.innerHTML='

x

";return div.childNodes[1]}function hasLength(input){return input.length>0}function trim(str){return str.replace(/^\s+|\s+$/g,"")}function flatten(input){return[].concat.apply([],input)}function isObject(input){return Object.prototype.toString.call(input)==="[object Object]"}function isArray(input){return Object.prototype.toString.call(input)==="[object Array]"}},{}]},{},[1])(1)}); \ No newline at end of file diff --git a/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/header-attrs/header-attrs.js b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/header-attrs/header-attrs.js new file mode 100644 index 0000000..dd57d92 --- /dev/null +++ b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/index_files/header-attrs/header-attrs.js @@ -0,0 +1,12 @@ +// Pandoc 2.9 adds attributes on both header and div. We remove the former (to +// be compatible with the behavior of Pandoc < 2.8). +document.addEventListener('DOMContentLoaded', function(e) { + var hs = document.querySelectorAll("div.section[class*='level'] > :first-child"); + var i, h, a; + for (i = 0; i < hs.length; i++) { + h = hs[i]; + if (!/^h[1-6]$/i.test(h.tagName)) continue; // it should be a header h1-h6 + a = h.attributes; + while (a.length > 0) h.removeAttribute(a[0].name); + } +}); diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/learner_persona.png b/content/blog/2020-09-03-reflections-on-rstudio-instructor-training/learner_persona.png similarity index 100% rename from content/post/2020-09-03-reflections-on-rstudio-instructor-training/learner_persona.png rename to content/blog/2020-09-03-reflections-on-rstudio-instructor-training/learner_persona.png diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/countdown.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/countdown.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/countdown.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/countdown.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/data_sci_specialization.jpg b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/data_sci_specialization.jpg similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/data_sci_specialization.jpg rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/data_sci_specialization.jpg diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/extra_style.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/extra_style.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/extra_style.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/extra_style.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/featured.jpg b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/featured.jpg similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/featured.jpg rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/featured.jpg diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/flipbook.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/flipbook.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/flipbook.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/flipbook.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmd b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmarkdown similarity index 77% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmd rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmarkdown index ef71190..30c8902 100644 --- a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmd +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.Rmarkdown @@ -1,70 +1,64 @@ --- title: "Flattening the leaRning curve: Teaching R online during COVID-19" -author: Brendan Cullen -date: '2020-10-19' -slug: [] -categories: [] +subtitle: "" +summary: "Lessons learned from my first experience teaching an R bootcamp remotely & a collection of tools and resources I found useful" +date: 2020-10-19 +author: "Brendan Cullen" +draft: false +images: +series: tags: - - data science - - education - R -subtitle: '' -summary: 'Lessons learned from my first experience teaching an R bootcamp remotely & a collection of tools and resources I found useful' -authors: [] -lastmod: '2020-10-19T10:26:32-07:00' -featured: no -image: - caption: 'Photo by Martin Adams on Unsplash' - focal_point: '' - preview_only: no -projects: [] -disable_codefolding: false -codefolding_show: "hide" -codefolding_nobutton: false + - tidyverse + - education +categories: +layout: single --- +
+ +
+
+ ```{r echo=FALSE, message=FALSE} library(tidyverse) library(Manu) library(xaringanExtra) - -# enable panelset -use_panelset() ``` At this point, you’re probably familiar with the phrase “flatten the curve” — remember back in March when we were all talking about that? It was part of a critical public health messaging campaign aimed at slowing the spread of COVID-19 to prevent hospitals from becoming overwhelmed beyond their capacity. Based on how things are going, we really should *still* be talking about that. So allow me to unabashedly steal this catchphrase as a flawed metaphor for teaching and learning R during the era of this pandemic... It’s no secret that R has a significant leaRning curve — and, while it seems that more people than ever are now wanting to learn R, almost everyone is having to do it in an online format of some kind. For those who are used to a traditional in-person classroom environment, having a first introduction to R in an online format might make the leaRning curve even steeper (as I said, a flawed metaphor -- the concept of a "steep learning curve" is actually the [opposite](https://www.valamis.com/hub/learning-curve#steep-learning-curve) of what most people think, but we’ll run with it anyway). After recently teaching an introductory [R Bootcamp](https://uopsych-r-bootcamp-2020.netlify.app/) online, I've spent a lot of time thinking about strategies to lower the learning threshold and make it easier to conquer any potential fear of learning R -- to "flatten the leaRning curve", as it were. -:::reader +
For anyone who might be new to teaching R, teaching online, or both, the goal of this post is to share some valuable lessons I learned and resources I used during this online teaching experience. I hope it may be of some benefit for your own teaching. -::: +
-# Background +## Background Back in Fall 2018, the Department of Psychology at the University of Oregon started to offer a grad-student-led introductory R Bootcamp the week before the start of the new academic year. The bootcamp consists of three 3-4 hour sessions that take place over the course of a week. The idea behind the bootcamp is to give a first exposure to R to incoming students who have little to no background in it before being launched headfirst into using R to analyze data for their first year project and to complete labs and homework assignments for [PSY611](https://uopsych.github.io/psy611/), the first in a series of graduate statistics courses taught entirely in R. In addition, as I've [written about previously](/post/2020-03-08-data-science-training-needs-in-grad-school/index.html), current grad students, along with other members of the psychology department, have expressed a keen interest in developing a stronger foundation in skills such as basic programming, data wrangling, and data visualization. So the bootcamp also serves as an opportunity for existing R users to get a refresher and deeper dive into those topics for those who want it. -After spending lot of time thinking about how to improve the data science learning experience for my fellow grad students and having [recently become](https://bcullen.rbind.io/post/2020-09-03-reflections-on-rstudio-instructor-training/) an [RStudio Certified Instructor](https://education.rstudio.com/trainers/people/cullen+brendan/) in the tidyverse, it was my great privilege to be able to put all of this into action by leading the 3rd Annual UO Psych Bootcamp this year. `r emo::ji("partying_face")` +After spending lot of time thinking about how to improve the data science learning experience for my fellow grad students and having [recently become](https://bcullen.rbind.io/post/2020-09-03-reflections-on-rstudio-instructor-training/) an [RStudio Certified Instructor](https://education.rstudio.com/trainers/people/cullen+brendan/) in the tidyverse, it was my great privilege to be able to put all of this into action by leading the 3rd Annual UO Psych Bootcamp this year. -# The challenge +### The challenge However, I found myself facing a rather significant challenge. The R Bootcamp, like many intro R workshops, usually occurs in-person in a large room with a giant projector screen, coffee and snacks, and, most importantly, the ability to run over and look over someone's shoulder at their computer screen when they need help. Because of COVID-19, I needed to design and deliver a bootcamp for a large group of beginners (many using R for the very first time) entirely over a webcam. Moreover, I assumed that student motivation would be at an all-time low and feelings of anxiety and uncertainty would be at an all-time high -- especially for those about to start their graduate school journey entirely online, very much contrary to plan. There were a lot of horrible things going on in the world in September 2020, which marked 6 months into the COVID-19 pandemic in the U.S. -- people's loved ones were getting sick, the killing of innocent Black lives continued, a bitter presidential race reached full swing -- not to mention devastating wildfires that raged all along the west coast. (Of course, while I wish I could actually write about these events in the past tense, all of these problems continue). -So, how do you get people excited about learning R amidst all of *that*? Needless to say, this felt a little daunting `r emo::ji("fearful")`. Fortunately, though, there are people out there who are experts in this sort of thing who have graciously shared their resources and advice, and this helped me immensely to run a successful bootcamp. +So, how do you get people excited about learning R amidst all of *that*? Needless to say, this felt a little daunting. Fortunately, though, there are people out there who are experts in this sort of thing who have graciously shared their resources and advice, and this helped me immensely to run a successful bootcamp. -# Who attended? +### Who attended? 52 people registered for the bootcamp. While the majority of those who attended were incoming first-year psychology grad students, we also had a mix of more advanced grad students, undergrads, research assistants, lab managers, staff data analysts, and faculty members from a variety of departments/centers across the University, including the Departments of Psychology, Linguistics, Economics and the Center for Translational Neuroscience. -```{r, warning=FALSE, message=FALSE} -# import bootcamp registration data +```{r echo=FALSE, warning=FALSE, message=FALSE} +## import bootcamp registration data registration <- read_csv("uopsych_bootcamp_registration_deidentified.csv") -# clean data +## clean data plot_data <- registration %>% janitor::clean_names() %>% select(position = what_is_your_position_at_uo, @@ -79,7 +73,7 @@ plot_data <- registration %>% "I've used it to analyze data", "I use it often to analyze data"))) -# plot positions at UO +## plot positions at UO theme_set(theme_minimal(base_size = 15)) theme_update(legend.position = "none", plot.title.position = "plot", @@ -94,9 +88,10 @@ plot_data %>% labs(x = "", y = "Count", title = "Participants' roles at University of Oregon") ``` +

-```{r} -# plot prior experience +```{r echo=FALSE} +## plot prior experience plot_data %>% count(experience) %>% ggplot(aes(experience, n, fill = experience)) + @@ -106,9 +101,9 @@ plot_data %>% labs(x = "", y = "Count", title = "Participants' prior experience with R") ``` -# Logistics +### Logistics -## Zoom + Slack = `r emo::ji("ok_hand")` +#### Zoom + Slack = `r emo::ji("ok_hand")` We ran synchronous sessions live over Zoom. However, rather than use the Zoom chat for communicating with each other and asking questions, we used Slack. A few reasons for this: @@ -120,11 +115,11 @@ We ran synchronous sessions live over Zoom. However, rather than use the Zoom ch I was fortunate to have the very knowledgeable and talented [Cameron Kay](http://cameronstuartkay.com/) and [Cianna Bedford-Petersen](https://ciannabp.com/) as teaching assistants. Cam and Cianna remained on deck throughout the sessions to answer questions on Slack while we went through the material. We also decided that if a student ran into technical issues or felt completely lost, then one of the TA's would pull them into a breakout room on Zoom to offer one-on-one help. -## RStudio Cloud +#### RStudio Cloud For "Your Turn" exercises, an idea I stole from Alison Hill's excellent rstudio::conf(2020) [workshop](https://conf20-intro-ml.netlify.app/), we used [RStudio Cloud](https://rstudio.com/products/cloud/), a hosted version of the RStudio IDE available in the web browser. We did this to avoid issues with students installing RStudio on their local machines, as troubleshooting technical issues over Zoom in a large group is not something we felt prepared for. Using RStudio Cloud also allowed me to configure specific IDE settings and pre-load specific packages to allow students to initially avoid technical issues. Lastly, sharing a workspace on RStudio Cloud allowed each student to save their own copy of the projects containing the Your Turn exercises, which in turn made it possible for myself or the TA's to "peek" into a student's exercises and help them figure out where their errors were coming from. Overall it went really smoothly, and everyone who filled out the feedback survey said they had no issues using it. I highly recommend using this for your teaching, even if it's in-person. -## Blogdown site +#### Blogdown site To make the bootcamp materials more accessible and shareable, I decided to package them into a website, which I created using the [blogdown](https://github.com/rstudio/blogdown) package (see more on this [below](#ssn)). Organizing your teaching materials into a website has three clear advantages in my mind: @@ -132,7 +127,7 @@ To make the bootcamp materials more accessible and shareable, I decided to packa 2) A website is highly sustainable in the sense that it's easy for students to bookmark and refer back to over and over, and if you push changes to Github with continuous deployment (e.g. via [Netlify](https://www.netlify.com/)), students will always have access to the most updated materials. This avoids having to introduce Github and version control, which is a whole other beast to teach to beginners. -3) Websites are pretty and highly customizble `r emo::ji("sparkles")` +3) Websites are pretty and highly customizble `r emo::ji("link")` [uopsych-r-bootcamp-2020.netlify.app](https://uopsych-r-bootcamp-2020.netlify.app/) @@ -141,11 +136,10 @@ knitr::include_url("https://uopsych-r-bootcamp-2020.netlify.app/", height = "500 ``` -# Tools I learned {#tools} +### Tools I learned {#tools} -:::: {.panelset} - -### `xaringanExtra` {.panel} +{{< panelset class="tools" >}} +{{< panel name="`xaringanExtra`" >}} `r emo::ji("package")` [pkg.garrickadenbuie.com/xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/) @@ -155,27 +149,33 @@ knitr::include_url("https://uopsych-r-bootcamp-2020.netlify.app/", height = "500 `r emo::ji("book")` [Share again](https://pkg.garrickadenbuie.com/xaringanExtra/#/share-again) -![](share_again.mov) + `r emo::ji("book")` [Panelset](https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset) -![](panelset.mov) + `r emo::ji("book")` [Tile view](https://pkg.garrickadenbuie.com/xaringanExtra/#/tile-view) -![](tile_view.mov) + `r emo::ji("book")` [Extra styles](https://pkg.garrickadenbuie.com/xaringanExtra/#/extra-styles) -![](extra_style.mov) - -In case it still isn't obvious enough how much I love this package... - - + [Jump back up to see more tools](#tools) `r emo::ji("right_arrow_curving_up")` -### `flair` {.panel} +{{< /panel >}} + +{{< panel name="`flair`" >}} `r emo::ji("package")` [r-for-educators.github.io/flair](https://r-for-educators.github.io/flair/index.html) @@ -193,7 +193,9 @@ You can read more about other educational use cases for `flair` in this great [p [Jump back up to see more tools](#tools) `r emo::ji("right_arrow_curving_up")` -### `flipbookr` {.panel} +{{< /panel >}} + +{{< panel name="`flipbookr`" >}} `r emo::ji("package")` [evamaerey.github.io/flipbooks/about](https://evamaerey.github.io/flipbooks/about) @@ -201,27 +203,34 @@ You can read more about other educational use cases for `flair` in this great [p `{flipbookr}` is an amazing teaching tool -- it allows you to incrementally build up a plot line by line, which capitalizes on the "blink comparator" method. This means that students are able to easily map a specific change in code to a specific visual change in the corresponding plot output. Flipbooks are also great for demonstrating incremental changes in a data wrangling pipeline, and they're relatively easy to make! -![](flipbook.mov) + [Jump back up to see more tools](#tools) `r emo::ji("right_arrow_curving_up")` -### `countdown` {.panel} +{{< /panel >}} + +{{< panel name="`countdown`" >}} `r emo::ji("package")` [pkg.garrickadenbuie.com/countdown](https://pkg.garrickadenbuie.com/countdown/) [Garrick Aden-Buie](https://www.garrickadenbuie.com/) -`{coundown}` is another great gem from Garrick and allows you to put timers directly on your slides. This is really useful for timed "Your Turn" exercises or to make sure you stay on track with Q & A sessions or breaks. +`{countdown}` is another great gem from Garrick and allows you to put timers directly on your slides. This is really useful for timed "Your Turn" exercises or to make sure you stay on track with Q & A sessions or breaks. -![](countdown.mov) + [Jump back up to see more tools](#tools) `r emo::ji("right_arrow_curving_up")` -:::: +{{< /panel >}} +{{< /panelset >}} -# Resources I recommend +### Resources I recommend -## Sharing on short notice {#ssn} +#### Sharing on short notice {#ssn} [Alison Hill](https://alison.rbind.io/), [Desirée De Leon](https://desiree.rbind.io/) @@ -232,7 +241,7 @@ A super helpful webinar on how best to share your teaching materials online. - [share-blogdown template](https://github.com/apreshill/share-blogdown) - [blog post](https://education.rstudio.com/blog/2020/04/sharing-on-short-notice/) -## Teaching online on short notice +#### Teaching online on short notice [Greg Wilson](https://third-bit.com/) @@ -242,7 +251,7 @@ Concrete tips and advice on making the most of teaching via a webcam. There's a - [slides](https://docs.google.com/presentation/d/1rE5e2kSFNICNkBJ4iIIgd9eqACi62gxahknKLtw9Hzs/edit#slide=id.g55ddde1eae_0_2) - [blog post](https://education.rstudio.com/blog/2020/03/teaching-online-on-short-notice/) -## Teaching R online with RStudio Cloud +#### Teaching R online with RStudio Cloud [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) @@ -252,7 +261,7 @@ A very thorough and easy to follow walk-through of using RStudio Cloud for teach - [slides](https://mine-cetinkaya-rundel.github.io/rstudio-cloud-webinar/rstudio-cloud.html#1) - [blog post](https://education.rstudio.com/blog/2020/04/teaching-with-rstudio-cloud-q-a/) -## Teaching the tidyverse in 2020 +#### Teaching the tidyverse in 2020 [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) @@ -263,7 +272,7 @@ A series of blog posts describing a recommended order in which to teach tidyvers - [Part 3: Data wrangling and tidying](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-3-data-wrangling-and-tidying/) - [Part4: Part 4: When to purrr?](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-4-when-to-purrr/) -## Data science concept maps +#### Data science concept maps A growing list of concept maps related to data science topics in R. Great for planning your lessons and/or sharing in your slides to summarize topics, no matter how seemingly simple or complex. @@ -273,7 +282,7 @@ A growing list of concept maps related to data science topics in R. Great for pl - [google drive folder](https://docs.google.com/presentation/d/1ForBjP0pVhljBLuqOyYfyHw_1rrwJzpWW1ZHzCqAJpU/edit#slide=id.p) - [blog post](https://education.rstudio.com/blog/2020/09/concept-maps/) -## rstats artwork {#artwork} +#### rstats artwork {#artwork} [Allison Horst](https://www.allisonhorst.com/) @@ -282,7 +291,7 @@ A collection of mind-blowing art that makes it 1000% more fun to learn R. - [github repo](https://github.com/allisonhorst/stats-illustrations) - [interview with Allison Horst](https://www.dataquest.io/blog/making-learning-to-code-friendlier-with-art-allison-horst-interview/) -# The importance of encouragement & positivity +### The importance of encouragement & positivity The leaRning curve is no secret. I hadn't touched R before starting grad school in 2017, but I had heard whispers here and there that learning R is really difficult. But I think there's an element of self-fulfilling prophecy here. If you expect it to be impossible, then it will feel impossible. I more or less started my journey with that expectation. @@ -290,15 +299,15 @@ Things changed for me when I took my first course with [Daniel Anderson](https:/ It was very much with Daniel's model in mind that I found inspiration for making learning R feel more inviting and less daunting. Here are a few things that came to mind that can be abstracted to some general advice... -## Anticipate the challenge +#### Anticipate the challenge -Recognize the fact that learning R is *hard*. Don't pretend it's a walk in the park -- it isn't. But at the same time, emphasize that the investment of time it takes is worth it! And be sure to remind people of that more than once `r emo::ji("wink")`. +Recognize the fact that learning R is *hard*. Don't pretend it's a walk in the park -- it isn't. But at the same time, emphasize that the investment of time it takes is worth it! ```{r echo=FALSE} xaringanExtra::embed_xaringan("https://uopsych-r-bootcamp-2020.netlify.app/slides/00-slides.html#10") ``` -## Normalize errors & mistakes +#### Normalize errors & mistakes The first time someone uses R, error messages are one of the first things that they'll see. As we all know, this feels frustrating, especially as a beginner. So it makes sense to acknowledge that up front and discuss what error messages are and why they occur. As error messages go hand-in-hand with debugging, it's also a good idea to at least introduce that concept as well, without necessarily going into great depth since that's a whole other topic of it's own. As debugging is commonly considered part of ["what they forgot to teach you about R"](https://rstats.wtf/debugging-r-code.html), I'm sure I'm not alone in wishing that I had been introduced to debugging much earlier on in my R learning experience. @@ -312,12 +321,12 @@ xaringanExtra::embed_xaringan("https://uopsych-r-bootcamp-2020.netlify.app/slide Taking this one step further, it's a good idea to deliberately incorporate making mistakes into your own teaching and use error messages as a teachable moment. You can even use unintentional mistakes as teachable moments -- demonstrate for your students how you fix the mistake and invite them to give their thoughts and feedback. This not only makes your presentation less rehearsed, but it provides a really valuable "real-world" context for learning. -:::note -This idea is referred to as "positive error framing" -- and if you want to learn more about this topic in depth I recommend you check out [this section](https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1008090#sec011) from the recent article ["Ten quick tips for teaching with participatory live coding"](https://journals.plos.org/ploscompbiol/article?id=10.1371/journal.pcbi.1008090) (really you should read the whole article -- it's packed full of great advice). -::: +
+This idea is referred to as "positive error framing" -- and if you want to learn more about this topic in depth I recommend you check out this section from the recent article "Ten quick tips for teaching with participatory live coding". +
-## Make your materials friendly and inviting! +### Make your materials friendly and inviting! If your slides read like one long piece of dense help documentation, people are not going to feel inclined to engage with it. How do you make your materials more inviting and approachable? @@ -329,43 +338,17 @@ One of the most powerful tools out there, in my opinion, is the incredible artwo knitr::include_graphics("monster_support.jpg") ``` -Cute gifs never hurt either... +### A final thought - +No matter how long someone has been using R, it never hurts to remind them (yourself included) that a little time and effort can go a long way. -# Feedback - -I was really happy to see that people seemed to appreciate the positive learning atmosphere and, especially because this was only an introductory workshop, that this made them excited to learn more: - -:::quote - -`r emo::ji("writing_hand")` "I really appreciated the warm welcome/atmosphere the instructors set up- learning a new programming language can be frustrating, especially for a beginner, so I was really appreciative of the continuous encouragement throughout the bootcamp." - -*** -`r emo::ji("writing_hand")` "I really enjoyed how supportive and encouraging the facilitators were. I understood learning R was no easy endeavor but hearing about their experiences was encouraging for me. Also, I greatly appreciate all the amazing resources they have compiled for future use. I definitely plan to continue looking into it!" - -*** -`r emo::ji("writing_hand")` "I appreciated the facilitators' organization, support, encouragement, and instructional clarity. Thank you for providing this very warm and accessible introduction for an absolute first-time novice! It's encouraged me to take more steps into learning R." - -*** -`r emo::ji("writing_hand")` "I am now in my third year of struggling through R and this was the first presentation of material that really clicked for me. I frequently refer to the dplyr and ggplot presentations in my work and will continue to work my way through these exercises until I am truly fluent in these basics. THANK YOU" -::: - -So we did we flatten the leaRning curve? Only time will tell. But the most gratifying feedback, in my opinion, is that people who attended felt inspired to *keep learning* and continue riding the R roller coaster. That's really the best outcome I could have hoped for! - -```{r echo=FALSE} -knitr::include_graphics("r_rollercoaster.png") -``` - -# A final thought +
-In short, no matter how long someone has been using R, it never hurts to remind them (yourself included) that a little time and effort can go a long way. + -
-![](time_effort.gif){width="417"}
-# Acknowledgements +### Acknowledgements I owe a huge debt of gratitude to all the people who were instrumental in my initial experience of learning R: [Daniel Anderson](https://twitter.com/datalorax_), [Dani Cosme](https://twitter.com/danicosme), [Krista DeStasio](https://twitter.com/PsychNeurd), [Cory Costello](https://twitter.com/CostelloCK), [Jessica Kosie](https://twitter.com/JessKosie), and [Sara Weston](https://twitter.com/saraweston09), to name only a few. diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.markdown b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.markdown new file mode 100644 index 0000000..a1e2ef5 --- /dev/null +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index.markdown @@ -0,0 +1,476 @@ +--- +title: "Flattening the leaRning curve: Teaching R online during COVID-19" +subtitle: "" +summary: "Lessons learned from my first experience teaching an R bootcamp remotely & a collection of tools and resources I found useful" +date: 2020-10-19 +author: "Brendan Cullen" +draft: false +images: +series: +tags: + - R + - tidyverse + - education +categories: +layout: single +--- + + + + +
+ +
+
+ + + +At this point, you’re probably familiar with the phrase “flatten the curve” — remember back in March when we were all talking about that? It was part of a critical public health messaging campaign aimed at slowing the spread of COVID-19 to prevent hospitals from becoming overwhelmed beyond their capacity. Based on how things are going, we really should *still* be talking about that. So allow me to unabashedly steal this catchphrase as a flawed metaphor for teaching and learning R during the era of this pandemic... + +It’s no secret that R has a significant leaRning curve — and, while it seems that more people than ever are now wanting to learn R, almost everyone is having to do it in an online format of some kind. For those who are used to a traditional in-person classroom environment, having a first introduction to R in an online format might make the leaRning curve even steeper (as I said, a flawed metaphor -- the concept of a "steep learning curve" is actually the [opposite](https://www.valamis.com/hub/learning-curve#steep-learning-curve) of what most people think, but we’ll run with it anyway). After recently teaching an introductory [R Bootcamp](https://uopsych-r-bootcamp-2020.netlify.app/) online, I've spent a lot of time thinking about strategies to lower the learning threshold and make it easier to conquer any potential fear of learning R -- to "flatten the leaRning curve", as it were. + +
+For anyone who might be new to teaching R, teaching online, or both, the goal of this post is to share some valuable lessons I learned and resources I used during this online teaching experience. I hope it may be of some benefit for your own teaching. +
+ +## Background + +Back in Fall 2018, the Department of Psychology at the University of Oregon started to offer a grad-student-led introductory R Bootcamp the week before the start of the new academic year. The bootcamp consists of three 3-4 hour sessions that take place over the course of a week. The idea behind the bootcamp is to give a first exposure to R to incoming students who have little to no background in it before being launched headfirst into using R to analyze data for their first year project and to complete labs and homework assignments for [PSY611](https://uopsych.github.io/psy611/), the first in a series of graduate statistics courses taught entirely in R. + +In addition, as I've [written about previously](/post/2020-03-08-data-science-training-needs-in-grad-school/index.html), current grad students, along with other members of the psychology department, have expressed a keen interest in developing a stronger foundation in skills such as basic programming, data wrangling, and data visualization. So the bootcamp also serves as an opportunity for existing R users to get a refresher and deeper dive into those topics for those who want it. + +After spending lot of time thinking about how to improve the data science learning experience for my fellow grad students and having [recently become](https://bcullen.rbind.io/post/2020-09-03-reflections-on-rstudio-instructor-training/) an [RStudio Certified Instructor](https://education.rstudio.com/trainers/people/cullen+brendan/) in the tidyverse, it was my great privilege to be able to put all of this into action by leading the 3rd Annual UO Psych Bootcamp this year. + +### The challenge + +However, I found myself facing a rather significant challenge. The R Bootcamp, like many intro R workshops, usually occurs in-person in a large room with a giant projector screen, coffee and snacks, and, most importantly, the ability to run over and look over someone's shoulder at their computer screen when they need help. Because of COVID-19, I needed to design and deliver a bootcamp for a large group of beginners (many using R for the very first time) entirely over a webcam. + +Moreover, I assumed that student motivation would be at an all-time low and feelings of anxiety and uncertainty would be at an all-time high -- especially for those about to start their graduate school journey entirely online, very much contrary to plan. There were a lot of horrible things going on in the world in September 2020, which marked 6 months into the COVID-19 pandemic in the U.S. -- people's loved ones were getting sick, the killing of innocent Black lives continued, a bitter presidential race reached full swing -- not to mention devastating wildfires that raged all along the west coast. (Of course, while I wish I could actually write about these events in the past tense, all of these problems continue). + +So, how do you get people excited about learning R amidst all of *that*? Needless to say, this felt a little daunting. Fortunately, though, there are people out there who are experts in this sort of thing who have graciously shared their resources and advice, and this helped me immensely to run a successful bootcamp. + +### Who attended? + +52 people registered for the bootcamp. While the majority of those who attended were incoming first-year psychology grad students, we also had a mix of more advanced grad students, undergrads, research assistants, lab managers, staff data analysts, and faculty members from a variety of departments/centers across the University, including the Departments of Psychology, Linguistics, Economics and the Center for Translational Neuroscience. + + + +

+ + + +### Logistics + +#### Zoom + Slack = 👌 + +We ran synchronous sessions live over Zoom. However, rather than use the Zoom chat for communicating with each other and asking questions, we used Slack. A few reasons for this: + +1) this way people could continue to ask questions outside of the live sessions and a permanent and searchable record of questions and answers would be available for posterity + +2) The Zoom chat can get easily cluttered and doesn't easily allow you to make threads, which keep things more organized + +3) Slack has better emojis 🤓. + +I was fortunate to have the very knowledgeable and talented [Cameron Kay](http://cameronstuartkay.com/) and [Cianna Bedford-Petersen](https://ciannabp.com/) as teaching assistants. Cam and Cianna remained on deck throughout the sessions to answer questions on Slack while we went through the material. We also decided that if a student ran into technical issues or felt completely lost, then one of the TA's would pull them into a breakout room on Zoom to offer one-on-one help. + +#### RStudio Cloud + +For "Your Turn" exercises, an idea I stole from Alison Hill's excellent rstudio::conf(2020) [workshop](https://conf20-intro-ml.netlify.app/), we used [RStudio Cloud](https://rstudio.com/products/cloud/), a hosted version of the RStudio IDE available in the web browser. We did this to avoid issues with students installing RStudio on their local machines, as troubleshooting technical issues over Zoom in a large group is not something we felt prepared for. Using RStudio Cloud also allowed me to configure specific IDE settings and pre-load specific packages to allow students to initially avoid technical issues. Lastly, sharing a workspace on RStudio Cloud allowed each student to save their own copy of the projects containing the Your Turn exercises, which in turn made it possible for myself or the TA's to "peek" into a student's exercises and help them figure out where their errors were coming from. Overall it went really smoothly, and everyone who filled out the feedback survey said they had no issues using it. I highly recommend using this for your teaching, even if it's in-person. + +#### Blogdown site + +To make the bootcamp materials more accessible and shareable, I decided to package them into a website, which I created using the [blogdown](https://github.com/rstudio/blogdown) package (see more on this [below](#ssn)). Organizing your teaching materials into a website has three clear advantages in my mind: + +1) A website makes your materials easier to access and more shareable -- you send someone a single link they can access on their phone or computer, no need to download anything + +2) A website is highly sustainable in the sense that it's easy for students to bookmark and refer back to over and over, and if you push changes to Github with continuous deployment (e.g. via [Netlify](https://www.netlify.com/)), students will always have access to the most updated materials. This avoids having to introduce Github and version control, which is a whole other beast to teach to beginners. + +3) Websites are pretty and highly customizble + +🔗 [uopsych-r-bootcamp-2020.netlify.app](https://uopsych-r-bootcamp-2020.netlify.app/) + + + + +### Tools I learned {#tools} + +{{< panelset class="tools" >}} +{{< panel name="`xaringanExtra`" >}} + +📦 [pkg.garrickadenbuie.com/xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/) + + [Garrick Aden-Buie](https://www.garrickadenbuie.com/) + +`{xaringanExtra}` extends the functionality of the already amazing `{xaringan}` package by [Yihuie Xie](https://yihui.org/en/about/), and it has become one of my all-time favorite packages. Here are the features I use most often and *highly* recommend. + +📖 [Share again](https://pkg.garrickadenbuie.com/xaringanExtra/#/share-again) + + + +📖 [Panelset](https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset) + + + +📖 [Tile view](https://pkg.garrickadenbuie.com/xaringanExtra/#/tile-view) + + + +📖 [Extra styles](https://pkg.garrickadenbuie.com/xaringanExtra/#/extra-styles) + + + +[Jump back up to see more tools](#tools) ⤴️ + +{{< /panel >}} + +{{< panel name="`flair`" >}} + +📦 [r-for-educators.github.io/flair](https://r-for-educators.github.io/flair/index.html) + + [Kelly Bodwin](https://www.kelly-bodwin.com/) + +`{flair}` allows you to spice up your code with color-coding and dynamic syntax highlighting. One of the most useful applications is to match colors to concepts -- e.g. giving each argument of a function a unique color. I feel like I've only scratched the surface with `{flair}` and can't wait to use it more in my teaching going forward. + +Below is a demonstration of color-coding with `flair` to introduce `dplyr::filter()` and its arguments. + +
+ + +
+ +You can read more about other educational use cases for `flair` in this great [post](https://education.rstudio.com/blog/2020/05/flair/) on the RStudio Education Blog. + +[Jump back up to see more tools](#tools) ⤴️ + +{{< /panel >}} + +{{< panel name="`flipbookr`" >}} + +📦 [evamaerey.github.io/flipbooks/about](https://evamaerey.github.io/flipbooks/about) + + [Gina Reynolds](https://evangelinereynolds.netlify.app/) + +`{flipbookr}` is an amazing teaching tool -- it allows you to incrementally build up a plot line by line, which capitalizes on the "blink comparator" method. This means that students are able to easily map a specific change in code to a specific visual change in the corresponding plot output. Flipbooks are also great for demonstrating incremental changes in a data wrangling pipeline, and they're relatively easy to make! + + + +[Jump back up to see more tools](#tools) ⤴️ + +{{< /panel >}} + +{{< panel name="`countdown`" >}} + +📦 [pkg.garrickadenbuie.com/countdown](https://pkg.garrickadenbuie.com/countdown/) + + [Garrick Aden-Buie](https://www.garrickadenbuie.com/) + +`{countdown}` is another great gem from Garrick and allows you to put timers directly on your slides. This is really useful for timed "Your Turn" exercises or to make sure you stay on track with Q & A sessions or breaks. + + + +[Jump back up to see more tools](#tools) ⤴️ + +{{< /panel >}} +{{< /panelset >}} + +### Resources I recommend + +#### Sharing on short notice {#ssn} + + [Alison Hill](https://alison.rbind.io/), [Desirée De Leon](https://desiree.rbind.io/) + +A super helpful webinar on how best to share your teaching materials online. + +- [webinar](https://rstudio.com/resources/webinars/sharing-on-short-notice-how-to-get-your-materials-online-with-r-markdown/) +- [slides](https://rstudio-education.github.io/sharing-short-notice/) +- [share-blogdown template](https://github.com/apreshill/share-blogdown) +- [blog post](https://education.rstudio.com/blog/2020/04/sharing-on-short-notice/) + +#### Teaching online on short notice + + [Greg Wilson](https://third-bit.com/) + +Concrete tips and advice on making the most of teaching via a webcam. There's a ton of great stuff in here you wouldn't necessarily think of, including important advice on making your teaching accessible and inclusive in an online format. + +- [webinar](https://rstudio.com/resources/webinars/teaching-online-at-short-notice/) +- [slides](https://docs.google.com/presentation/d/1rE5e2kSFNICNkBJ4iIIgd9eqACi62gxahknKLtw9Hzs/edit#slide=id.g55ddde1eae_0_2) +- [blog post](https://education.rstudio.com/blog/2020/03/teaching-online-on-short-notice/) + +#### Teaching R online with RStudio Cloud + + [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) + +A very thorough and easy to follow walk-through of using RStudio Cloud for teaching, highlighting its most useful features. + +- [webinar](https://rstudio.com/resources/webinars/teaching-r-online-with-rstudio-cloud/) +- [slides](https://mine-cetinkaya-rundel.github.io/rstudio-cloud-webinar/rstudio-cloud.html#1) +- [blog post](https://education.rstudio.com/blog/2020/04/teaching-with-rstudio-cloud-q-a/) + +#### Teaching the tidyverse in 2020 + + [Mine Çetinkaya-Rundel](https://www2.stat.duke.edu/~mc301/) + +A series of blog posts describing a recommended order in which to teach tidyverse topics to beginners, including very recent tidyverse features that are useful for R users at all levels to learn + +- [Part 1: Getting started](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-1-getting-started/) +- [Part 2: Data visualization](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-2-data-visualisation/) +- [Part 3: Data wrangling and tidying](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-3-data-wrangling-and-tidying/) +- [Part4: Part 4: When to purrr?](https://education.rstudio.com/blog/2020/07/teaching-the-tidyverse-in-2020-part-4-when-to-purrr/) + +#### Data science concept maps + +A growing list of concept maps related to data science topics in R. Great for planning your lessons and/or sharing in your slides to summarize topics, no matter how seemingly simple or complex. + + Community contributors, curated by [Greg Wilson](https://third-bit.com/) + +- [github repo](https://github.com/rstudio/concept-maps) +- [google drive folder](https://docs.google.com/presentation/d/1ForBjP0pVhljBLuqOyYfyHw_1rrwJzpWW1ZHzCqAJpU/edit#slide=id.p) +- [blog post](https://education.rstudio.com/blog/2020/09/concept-maps/) + +#### rstats artwork {#artwork} + + [Allison Horst](https://www.allisonhorst.com/) + +A collection of mind-blowing art that makes it 1000% more fun to learn R. + +- [github repo](https://github.com/allisonhorst/stats-illustrations) +- [interview with Allison Horst](https://www.dataquest.io/blog/making-learning-to-code-friendlier-with-art-allison-horst-interview/) + +### The importance of encouragement & positivity + +The leaRning curve is no secret. I hadn't touched R before starting grad school in 2017, but I had heard whispers here and there that learning R is really difficult. But I think there's an element of self-fulfilling prophecy here. If you expect it to be impossible, then it will feel impossible. I more or less started my journey with that expectation. + +Things changed for me when I took my first course with [Daniel Anderson](https://twitter.com/datalorax_). Daniel has developed a fantastic 5-course [Data Science Specialization in Educational Leadership](https://education.uoregon.edu/data-science-specialization-educational-leadership) in the [College of Education](https://education.uoregon.edu/) at the University of Oregon, taught entirely in R, which ranges from the very basics of R to advanced machine learning with [tidymodels](https://www.tidymodels.org/) (see more info [here](data_sci_specialization.jpg)). Daniel's teaching completely changed the way I approached using and learning R, and it was largely on his recommendation that I joined #rstats Twitter (which was a game-changer). More importantly, Daniel modeled the kind of teacher I wanted to be -- clear, thorough, thoughtful, and above all else, kind and inclusive of everyone. + +It was very much with Daniel's model in mind that I found inspiration for making learning R feel more inviting and less daunting. Here are a few things that came to mind that can be abstracted to some general advice... + +#### Anticipate the challenge + +Recognize the fact that learning R is *hard*. Don't pretend it's a walk in the park -- it isn't. But at the same time, emphasize that the investment of time it takes is worth it! + +
+ + +
+ +#### Normalize errors & mistakes + +The first time someone uses R, error messages are one of the first things that they'll see. As we all know, this feels frustrating, especially as a beginner. So it makes sense to acknowledge that up front and discuss what error messages are and why they occur. As error messages go hand-in-hand with debugging, it's also a good idea to at least introduce that concept as well, without necessarily going into great depth since that's a whole other topic of it's own. As debugging is commonly considered part of ["what they forgot to teach you about R"](https://rstats.wtf/debugging-r-code.html), I'm sure I'm not alone in wishing that I had been introduced to debugging much earlier on in my R learning experience. + +While learning a systematic approach to debugging is important down the line, it's more important at first for beginners to understand that seeing lots of error messages at first is not a bad thing. It's worth spending some effort to convince your students that error messages should not be cause for discouragement or giving up. Simply put, error messages are part and parcel of programming. Sometimes they take a matter of seconds to fix, sometimes a matter of weeks, but everyone who uses R will regularly encounter error messages, no matter your level of experience. And when it really comes down to it, every error message is an opportunity to learn something! + +
+ + +
+ +
+ +Taking this one step further, it's a good idea to deliberately incorporate making mistakes into your own teaching and use error messages as a teachable moment. You can even use unintentional mistakes as teachable moments -- demonstrate for your students how you fix the mistake and invite them to give their thoughts and feedback. This not only makes your presentation less rehearsed, but it provides a really valuable "real-world" context for learning. + +
+This idea is referred to as "positive error framing" -- and if you want to learn more about this topic in depth I recommend you check out this section from the recent article "Ten quick tips for teaching with participatory live coding". +
+ + +### Make your materials friendly and inviting! + +If your slides read like one long piece of dense help documentation, people are not going to feel inclined to engage with it. How do you make your materials more inviting and approachable? + +One of the most powerful tools out there, in my opinion, is the incredible artwork by Allison Horst, RStudio's first [artist-in-residence](https://blog.rstudio.com/2019/11/18/artist-in-residence/) (see more [above](#artwork)). The bigger picture behind the artwork, in Allison's words: + +>"All of it is towards a goal of trying to make R, and data science in general, more approachable, welcoming, and engaging to diverse learners". + + + +### A final thought + +No matter how long someone has been using R, it never hurts to remind them (yourself included) that a little time and effort can go a long way. + +
+ + + +
+ +### Acknowledgements + +I owe a huge debt of gratitude to all the people who were instrumental in my initial experience of learning R: [Daniel Anderson](https://twitter.com/datalorax_), [Dani Cosme](https://twitter.com/danicosme), [Krista DeStasio](https://twitter.com/PsychNeurd), [Cory Costello](https://twitter.com/CostelloCK), [Jessica Kosie](https://twitter.com/JessKosie), and [Sara Weston](https://twitter.com/saraweston09), to name only a few. + +Thanks again to [Cameron Kay](https://twitter.com/cameronskay) and [Cianna Bedford-Petersen](https://twitter.com/ciannabp) for being such awesome TA's for the R Bootcamp. + +I also wouldn't know half of what I know about learning and teaching R if it weren't for the RStudio Education team -- in particular, [Alison Hill](https://twitter.com/apreshill), [Greg Wilson](https://twitter.com/gvwilson), [Desirée De Leon](https://twitter.com/dcossyle), [Mine Çetinkaya-Rundel](https://twitter.com/minebocek), and [Garrett Grolemund](https://twitter.com/StatGarrett). + +Artwork included in this post is by [Allison Horst](https://twitter.com/allison_horst). + +
Session Info + +``` +## ─ Session info ─────────────────────────────────────────────────────────────── +## setting value +## version R version 4.0.3 (2020-10-10) +## os macOS Catalina 10.15.7 +## system x86_64, darwin17.0 +## ui X11 +## language (EN) +## collate en_US.UTF-8 +## ctype en_US.UTF-8 +## tz America/Los_Angeles +## date 2021-12-01 +## +## ─ Packages ─────────────────────────────────────────────────────────────────── +## package * version date lib +## assertthat 0.2.1 2019-03-21 [1] +## backports 1.1.10 2020-09-15 [1] +## blob 1.2.1 2020-01-20 [1] +## blogdown 1.0.1 2021-01-11 [1] +## bookdown 0.21 2020-10-13 [1] +## broom 0.7.1 2020-10-02 [1] +## cellranger 1.1.0 2016-07-27 [1] +## cli 2.2.0 2020-11-20 [1] +## colorspace 2.0-0 2020-11-11 [1] +## crayon 1.3.4 2017-09-16 [1] +## DBI 1.1.0 2019-12-15 [1] +## dbplyr 1.4.4 2020-05-27 [1] +## digest 0.6.27 2020-10-24 [1] +## dplyr * 1.0.3 2021-01-15 [1] +## ellipsis 0.3.1 2020-05-15 [1] +## emo 0.0.0.9000 2020-11-04 [1] +## evaluate 0.14 2019-05-28 [1] +## fansi 0.4.2 2021-01-15 [1] +## farver 2.0.3 2020-01-16 [1] +## forcats * 0.5.0 2020-03-01 [1] +## fs 1.5.0 2020-07-31 [1] +## generics 0.1.0 2020-10-31 [1] +## ggplot2 * 3.3.3 2020-12-30 [1] +## glue 1.4.2 2020-08-27 [1] +## gtable 0.3.0 2019-03-25 [1] +## haven 2.3.1 2020-06-01 [1] +## highr 0.8 2019-03-20 [1] +## hms 0.5.3 2020-01-08 [1] +## htmltools 0.5.0 2020-06-16 [1] +## httr 1.4.2 2020-07-20 [1] +## janitor 2.0.1 2020-04-12 [1] +## jpeg 0.1-8.1 2019-10-24 [1] +## jsonlite 1.7.2 2020-12-09 [1] +## knitr 1.30 2020-09-22 [1] +## labeling 0.4.2 2020-10-20 [1] +## lifecycle 0.2.0 2020-03-06 [1] +## lubridate 1.7.9.2 2020-11-13 [1] +## magrittr 2.0.1 2020-11-17 [1] +## Manu * 0.0.1 2020-11-04 [1] +## modelr 0.1.8 2020-05-19 [1] +## munsell 0.5.0 2018-06-12 [1] +## pillar 1.4.7 2020-11-20 [1] +## pkgconfig 2.0.3 2019-09-22 [1] +## purrr * 0.3.4 2020-04-17 [1] +## R6 2.5.0 2020-10-28 [1] +## Rcpp 1.0.5 2020-07-06 [1] +## readr * 1.4.0 2020-10-05 [1] +## readxl 1.3.1 2019-03-13 [1] +## reprex 0.3.0 2019-05-16 [1] +## rlang 0.4.10 2020-12-30 [1] +## rmarkdown 2.6 2020-12-14 [1] +## rstudioapi 0.13 2020-11-12 [1] +## rvest 0.3.6 2020-07-25 [1] +## scales 1.1.1 2020-05-11 [1] +## sessioninfo 1.1.1 2018-11-05 [1] +## snakecase 0.11.0 2019-05-25 [1] +## stringi 1.5.3 2020-09-09 [1] +## stringr * 1.4.0 2019-02-10 [1] +## tibble * 3.0.5 2021-01-15 [1] +## tidyr * 1.1.2 2020-08-27 [1] +## tidyselect 1.1.0 2020-05-11 [1] +## tidyverse * 1.3.0 2019-11-21 [1] +## vctrs 0.3.6 2020-12-17 [1] +## withr 2.4.0 2021-01-16 [1] +## xaringanExtra * 0.2.4 2020-11-04 [1] +## xfun 0.20 2021-01-06 [1] +## xml2 1.3.2 2020-04-23 [1] +## yaml 2.2.1 2020-02-01 [1] +## source +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## Github (rstudio/blogdown@0f7f73f) +## CRAN (R 4.0.3) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.3) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## Github (hadley/emo@3f03b11) +## CRAN (R 4.0.1) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.3) +## Github (G-Thomson/Manu@a12062f) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## Github (gadenbuie/xaringanExtra@aebe20a) +## CRAN (R 4.0.3) +## CRAN (R 4.0.2) +## CRAN (R 4.0.2) +## +## [1] /Library/Frameworks/R.framework/Versions/4.0/Resources/library +``` +
+ diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-2-1.png b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-2-1.png new file mode 100644 index 0000000..1e896fd Binary files /dev/null and b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-2-1.png differ diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-3-1.png b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-3-1.png new file mode 100644 index 0000000..d54f107 Binary files /dev/null and b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/figure-html/unnamed-chunk-3-1.png differ diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/fitvids/fitvids.min.js b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/fitvids/fitvids.min.js new file mode 100644 index 0000000..9c25d2d --- /dev/null +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/fitvids/fitvids.min.js @@ -0,0 +1 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.fitvids=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o0?ignored.join():null;var selector=selectors.concat(custom).join();if(!hasLength(selector)){return}containers.forEach(function(container){var videos=queryAll(container,selector);videos.forEach(function(video){if(ignoredSelector&&video.matches(ignoredSelector)){return}wrap(video)})})};function queryAll(el,selector){if(typeof el==="string"){selector=el;el=document}return Array.prototype.slice.call(el.querySelectorAll(selector))}function toSelectorArray(input){if(typeof input==="string"){return input.split(",").map(trim).filter(hasLength)}else if(isArray(input)){return flatten(input.map(toSelectorArray).filter(hasLength))}return input||[]}function wrap(el){if(/fluid-width-video-wrapper/.test(el.parentNode.className)){return}var widthAttr=parseInt(el.getAttribute("width"),10);var heightAttr=parseInt(el.getAttribute("height"),10);var width=!isNaN(widthAttr)?widthAttr:el.clientWidth;var height=!isNaN(heightAttr)?heightAttr:el.clientHeight;var aspect=height/width;el.removeAttribute("width");el.removeAttribute("height");var wrapper=document.createElement("div");el.parentNode.insertBefore(wrapper,el);wrapper.className="fluid-width-video-wrapper";wrapper.style.paddingTop=aspect*100+"%";wrapper.appendChild(el)}function styles(){var div=document.createElement("div");div.innerHTML='

x

";return div.childNodes[1]}function hasLength(input){return input.length>0}function trim(str){return str.replace(/^\s+|\s+$/g,"")}function flatten(input){return[].concat.apply([],input)}function isObject(input){return Object.prototype.toString.call(input)==="[object Object]"}function isArray(input){return Object.prototype.toString.call(input)==="[object Array]"}},{}]},{},[1])(1)}); \ No newline at end of file diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/header-attrs/header-attrs.js b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/header-attrs/header-attrs.js new file mode 100644 index 0000000..dd57d92 --- /dev/null +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/header-attrs/header-attrs.js @@ -0,0 +1,12 @@ +// Pandoc 2.9 adds attributes on both header and div. We remove the former (to +// be compatible with the behavior of Pandoc < 2.8). +document.addEventListener('DOMContentLoaded', function(e) { + var hs = document.querySelectorAll("div.section[class*='level'] > :first-child"); + var i, h, a; + for (i = 0; i < hs.length; i++) { + h = hs[i]; + if (!/^h[1-6]$/i.test(h.tagName)) continue; // it should be a header h1-h6 + a = h.attributes; + while (a.length > 0) h.removeAttribute(a[0].name); + } +}); diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.css b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.css new file mode 100644 index 0000000..7436b60 --- /dev/null +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.css @@ -0,0 +1,112 @@ +/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */ + +.panelset { + width: 100%; + position: relative; + --panel-tabs-border-bottom: #ddd; + --panel-tab-foreground: currentColor; + --panel-tab-background: unset; + --panel-tab-active-foreground: currentColor; + --panel-tab-active-background: unset; + --panel-tab-hover-foreground: currentColor; + --panel-tab-hover-background: unset; + --panel-tab-active-border-color: currentColor; + --panel-tab-hover-border-color: currentColor; + --panel-tab-inactive-opacity: 0.5; + --panel-tab-font-family: inherit; +} + +.panelset * { + box-sizing: border-box; +} + +.panelset .panel-tabs { + display: -webkit-box; + display: flex; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-box-pack: start; + justify-content: start; + -webkit-box-align: center; + align-items: center; + overflow-y: visible; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0 0 2px 0; + box-shadow: inset 0 -2px 0px var(--panel-tabs-border-bottom); +} + +.panelset .panel-tabs * { + -webkit-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; +} + +.panelset .panel-tabs .panel-tab { + min-height: 50px; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + padding: 0.5em 1em; + font-family: var(--panel-tab-font-family); + opacity: var(--panel-tab-inactive-opacity); + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + color: var(--panel-tab-foreground); + background-color: var(--panel-tab-background); + list-style: none; + z-index: 5; +} + +.panelset .panel-tabs .panel-tab > a { + color: currentColor; + text-decoration: none; + border: none; +} + +.panelset .panel-tabs .panel-tab > a:focus { + outline: none; + text-decoration: none; + border: none; +} + +.panelset .panel-tabs .panel-tab > a:hover { + text-decoration: none; + border: none; +} + +.panelset .panel-tabs .panel-tab:hover { + border-bottom-color: var(--panel-tab-hover-border-color); + color: var(--panel-tab-hover-foreground); + background-color: var(--panel-tab-hover-background); + opacity: 1; + cursor: pointer; + z-index: 10; +} + +.panelset .panel-tabs .panel-tab:focus { + outline: none; + color: var(--panel-tab-hover-foreground); + border-bottom-color: var(--panel-tab-hover-border-color); + background-color: var(--panel-tab-hover-background); +} + +.panelset .panel-tabs .panel-tab.panel-tab-active { + border-top-color: var(--panel-tab-active-border-color); + color: var(--panel-tab-active-foreground); + background-color: var(--panel-tab-active-background); + opacity: 1; +} + +.panelset .panel { + display: none; +} + +.panelset .panel-active { + display: block; +} diff --git a/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.js b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.js new file mode 100644 index 0000000..80e773c --- /dev/null +++ b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/index_files/panelset/panelset.js @@ -0,0 +1,324 @@ +/* global slideshow */ +(function () { + const ready = function (fn) { + /* MIT License Copyright (c) 2016 Nuclei */ + /* https://github.com/nuclei/readyjs */ + const completed = () => { + document.removeEventListener('DOMContentLoaded', completed) + window.removeEventListener('load', completed) + fn() + } + if (document.readyState !== 'loading') { + setTimeout(fn) + } else { + document.addEventListener('DOMContentLoaded', completed) + window.addEventListener('load', completed) + } + } + + ready(function () { + [...document.querySelectorAll('.panel-name')] + .map(el => el.textContent.trim()) + + const panelIds = {} + + const uniquePanelId = (name) => { + name = encodeURIComponent(name.toLowerCase().replace(/[\s]/g, '-')) + if (Object.keys(panelIds).includes(name)) { + name += ++panelIds[name] + } else { + panelIds[name] = 1 + } + return name + } + + const identifyPanelName = (item) => { + let name = 'Panel' + + // If the item doesn't have a parent element, then we've already processed + // it, probably because we're in an Rmd, and it's been removed from the DOM + if (!item.parentElement) { + return + } + + // In R Markdown when header-attrs.js is present, we may have found a + // section header but the class attributes won't be duplicated on the tag + if ( + (item.tagName === 'SECTION' || item.classList.contains('section')) && + /^H[1-6]/.test(item.children[0].tagName) + ) { + name = item.children[0].textContent + item.classList.remove('panel-name') + item.removeChild(item.children[0]) + return name + } + + const nameDiv = item.querySelector('.panel-name') + if (!nameDiv) return name + + // In remarkjs the .panel-name span might be in a paragraph tag + // and if the

is empty, we'll remove it + if ( + nameDiv.tagName === 'SPAN' && + nameDiv.parentNode.tagName === 'P' && + nameDiv.textContent === nameDiv.parentNode.textContent + ) { + name = nameDiv.textContent + item.removeChild(nameDiv.parentNode) + return name + } + + // If none of the above, remove the nameDiv and return the name + name = nameDiv.textContent + nameDiv.parentNode.removeChild(nameDiv) + return name + } + + const processPanelItem = (item) => { + const name = identifyPanelName(item) + if (!name) { + return null + } + return { name, content: item.children, id: uniquePanelId(name) } + } + + const getCurrentPanelFromUrl = (panelset) => { + const params = new URLSearchParams(window.location.search) + return params.get(panelset) + } + + const reflowPanelSet = (panels, idx) => { + const res = document.createElement('div') + res.className = 'panelset' + res.id = 'panelset' + (idx > 0 ? idx : '') + const panelSelected = getCurrentPanelFromUrl(res.id) + + // create header row + const headerRow = document.createElement('ul') + headerRow.className = 'panel-tabs' + headerRow.setAttribute('role', 'tablist') + panels + .map((p, idx) => { + const panelHeaderItem = document.createElement('li') + panelHeaderItem.className = 'panel-tab' + panelHeaderItem.setAttribute('role', 'tab') + const thisPanelIsActive = panelSelected ? panelSelected === p.id : idx === 0 + if (thisPanelIsActive) { + panelHeaderItem.classList.add('panel-tab-active') + panelHeaderItem.setAttribute('aria-selected', true) + } + panelHeaderItem.tabIndex = 0 + panelHeaderItem.id = res.id + '_' + p.id // #panelsetid_panelid + + const panelHeaderLink = document.createElement('a') + panelHeaderLink.href = '?' + res.id + '=' + p.id + '#' + panelHeaderItem.id + panelHeaderLink.setAttribute('onclick', 'return false;') + panelHeaderLink.tabIndex = -1 // list item is tabable, not link + panelHeaderLink.innerHTML = p.name + panelHeaderLink.setAttribute('aria-controls', p.id) + + panelHeaderItem.appendChild(panelHeaderLink) + return panelHeaderItem + }) + .forEach(el => headerRow.appendChild(el)) + + res.appendChild(headerRow) + + panels + .map((p, idx) => { + const panelContent = document.createElement('section') + panelContent.className = 'panel' + panelContent.setAttribute('role', 'tabpanel') + const thisPanelIsActive = panelSelected ? panelSelected === p.id : idx === 0 + panelContent.classList.toggle('panel-active', thisPanelIsActive) + panelContent.id = p.id + panelContent.setAttribute('aria-labelledby', p.id) + Array.from(p.content).forEach(el => panelContent.appendChild(el)) + return panelContent + }) + .forEach(el => res.appendChild(el)) + + return res + } + + /* + * Update selected panel for panelset or delete panelset from query string + * + * @param panelset Panelset ID to update in the search params + * @param panel Panel ID of selected panel in panelset, or null to delete from search params + * @param params Current params object, or params from window.location.search + */ + function updateSearchParams (panelset, panel, params = new URLSearchParams(window.location.search)) { + if (panel) { + params.set(panelset, panel) + } else { + params.delete(panelset) + } + return params + } + + /* + * Update the URL to match params + */ + const updateUrl = (params) => { + if (typeof params === 'undefined') return + params = params.toString() ? ('?' + params.toString()) : '' + const { pathname, hash } = window.location + const uri = pathname + params + hash + window.history.replaceState(uri, '', uri) + } + + const togglePanel = (clicked) => { + if (clicked.nodeName.toUpperCase() === 'A') { + clicked = clicked.parentElement + } + if (!clicked.classList.contains('panel-tab')) return + if (clicked.classList.contains('panel-tab-active')) return + + const tabs = clicked.parentNode + .querySelectorAll('.panel-tab') + const panels = clicked.parentNode.parentNode + .querySelectorAll('.panel') + const panelTabClicked = clicked.children[0].getAttribute('aria-controls') + const panelClicked = clicked.parentNode.parentNode.id + + Array.from(tabs) + .forEach(t => { + t.classList.remove('panel-tab-active') + t.removeAttribute('aria-selected') + }) + Array.from(panels) + .forEach(p => { + const active = p.id === panelTabClicked + p.classList.toggle('panel-active', active) + // make inactive panels inaccessible by keyboard navigation + if (active) { + p.removeAttribute('tabIndex') + p.removeAttribute('aria-hidden') + } else { + p.setAttribute('tabIndex', -1) + p.setAttribute('aria-hidden', true) + } + }) + + clicked.classList.add('panel-tab-active') + clicked.setAttribute('aria-selected', true) + + // emit window resize event to trick html widgets into fitting to the panel width + window.dispatchEvent(new Event('resize')) + + // update query string + const params = updateSearchParams(panelClicked, panelTabClicked) + updateUrl(params) + } + + const initPanelSet = (panelset, idx) => { + let panels = Array.from(panelset.querySelectorAll('.panel')) + if (!panels.length && panelset.matches('.section[class*="level"]')) { + // we're in tabset-alike R Markdown + const panelsetLevel = [...panelset.classList] + .filter(s => s.match(/^level/))[0] + .replace('level', '') + + // move children that aren't inside a section up above the panelset + Array.from(panelset.children).forEach(function (el) { + if (el.matches('div.section[class*="level"]')) return + panelset.parentElement.insertBefore(el, panelset) + }) + + // panels are all .sections with .level + const panelLevel = +panelsetLevel + 1 + panels = Array.from(panelset.querySelectorAll(`.section.level${panelLevel}`)) + } + + if (!panels.length) return + + const contents = panels.map(processPanelItem).filter(o => o !== null) + const newPanelSet = reflowPanelSet(contents, idx) + panelset.parentNode.insertBefore(newPanelSet, panelset) + panelset.parentNode.removeChild(panelset) + + // click and touch events + const panelTabs = newPanelSet.querySelector('.panel-tabs'); + ['click', 'touchend'].forEach(eventType => { + panelTabs.addEventListener(eventType, function (ev) { + togglePanel(ev.target) + ev.stopPropagation() + }) + }) + panelTabs.addEventListener('touchmove', function (ev) { + ev.preventDefault() + }) + + // key events + newPanelSet + .querySelector('.panel-tabs') + .addEventListener('keydown', (ev) => { + const self = ev.currentTarget.querySelector('.panel-tab-active') + if (ev.code === 'Space' || ev.code === 'Enter') { + togglePanel(ev.target) + ev.stopPropagation() + } else if (ev.code === 'ArrowLeft' && self.previousSibling) { + togglePanel(self.previousSibling) + self.previousSibling.focus() + ev.stopPropagation() + } else if (ev.code === 'ArrowRight' && self.nextSibling) { + togglePanel(self.nextSibling) + self.nextSibling.focus() + ev.stopPropagation() + } + }) + + return panels + } + + // initialize panels + Array.from(document.querySelectorAll('.panelset')).map(initPanelSet) + + if (typeof slideshow !== 'undefined') { + const getVisibleActivePanelInfo = () => { + const slidePanels = document.querySelectorAll('.remark-visible .panel-tab-active') + + if (!slidePanels.length) return null + + return slidePanels.map(panel => { + return { + panel, + panelId: panel.children[0].getAttribute('aria-controls'), + panelSetId: panel.parentNode.parentNode.id + } + }) + } + + slideshow.on('hideSlide', slide => { + // clear focus if we had a panel-tab selected + document.activeElement.blur() + + // clear search query for panelsets in current slide + const params = [...document.querySelectorAll('.remark-visible .panelset')] + .reduce(function (params, panelset) { + return updateSearchParams(panelset.id, null, params) + }, new URLSearchParams(window.location.search)) + + updateUrl(params) + }) + + slideshow.on('afterShowSlide', slide => { + const slidePanels = getVisibleActivePanelInfo() + + if (slidePanels) { + // only first panel gets focus + slidePanels[0].panel.focus() + // but still update the url to reflect all active panels + const params = slidePanels.reduce( + function (params, { panelId, panelSetId }) { + return updateSearchParams(panelSetId, panelId, params) + }, + new URLSearchParams(window.location.search) + ) + updateUrl(params) + } + }) + } + }) +})() diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/monster_support.jpg b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/monster_support.jpg similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/monster_support.jpg rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/monster_support.jpg diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/panelset.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/panelset.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/panelset.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/panelset.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/r_rollercoaster.png b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/r_rollercoaster.png similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/r_rollercoaster.png rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/r_rollercoaster.png diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/share_again.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/share_again.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/share_again.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/share_again.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/tile_view.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/tile_view.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/tile_view.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/tile_view.mov diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/time_effort.gif b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/time_effort.gif similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/time_effort.gif rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/time_effort.gif diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/uopsych_bootcamp_registration_deidentified.csv b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/uopsych_bootcamp_registration_deidentified.csv similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/uopsych_bootcamp_registration_deidentified.csv rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/uopsych_bootcamp_registration_deidentified.csv diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo.mp4 b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo.mp4 similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo.mp4 rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo.mp4 diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo1.mov b/content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo1.mov similarity index 100% rename from content/post/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo1.mov rename to content/blog/2020-10-19-teaching-an-r-bootcamp-remotely/xaringan_demo1.mov diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 0000000..68ed5ac --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,38 @@ +--- +title: Blog +description: | +author: "Brendan Cullen" +show_post_thumbnail: true +thumbnail_left: false # for list-sidebar only +show_author_byline: false +show_post_date: true +# for listing page layout +layout: list # list, list-sidebar, list-grid + +# for list-sidebar layout +sidebar: + title: My blog + description: | + My musings about R. + + Check out the _index.md file in the /blog folder + to edit this content. + author: "The R Markdown Team @RStudio" + text_link_label: Subscribe via RSS + text_link_url: /index.xml + show_sidebar_adunit: false # show ad container + +# set up common front matter for all pages inside blog/ +cascade: + author: "Brendan Cullen" + show_author_byline: true + show_post_date: true + show_comments: false # see site config to choose Disqus or Utterances + # for single-sidebar layout + sidebar: + text_link_label: View recent posts + text_link_url: /blog/ + show_sidebar_adunit: false # show ad container +--- + +** No content below YAML for the blog _index. This file provides front matter for the listing page layout and sidebar content. It is also a branch bundle, and all settings under `cascade` provide front matter for all pages inside blog/. You may still override any of these by changing them in a page's front matter.** diff --git a/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.Rmd b/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.Rmd deleted file mode 100644 index bef0dff..0000000 --- a/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.Rmd +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Data Science Training in Psychology -author: Brendan Cullen -date: '2020-03-08' -slug: [] -categories: [] -tags: - - data science - - education - - R - - grad school -subtitle: '' -summary: 'Reflections on the importance of data science training in psychology and how we might close training gaps for grad students.' -authors: [] -lastmod: '2020-03-08T21:38:45-07:00' -featured: no -image: - caption: 'Photo by Emile Perron on Unsplash' - focal_point: '' - preview_only: no -projects: [] ---- - -Psychology is generally considered a "soft" science, on the opposite end of the spectrum from the "hard" sciences of physics, chemistry, and biology. This often creates a misconception that psychology is somehow not as quantitative, computational, or rigorous, methodologically. To the contrary, psychology is in fact very "hard" (some might even say, ["the hardest"](https://thehardestscience.com/2009/03/14/making-progress-in-the-hardest-science/){target="_blank"}). Why? Because explaining human cognition and behavior is really difficult. People do not think and behave in predictable and consistent ways like atoms and molecules. - -Indeed, the combination of random variation ("noise") in how we humans respond to our environment on an given day/hour/minute, combined with the inherent challenge of proper sampling, reliable measurement and accurate model building makes data analysis for a psychologist no easy feat. Explaining variance in psychological data has required centuries of refining statistical methods and computational tools. Fortunately, today's scientists have access to open-source software like R and Python that have *vastly* enhanced our ability to work with data in a way that is more transparent and reproducible. As a result, the teaching of these tools is becoming increasingly more common in psychology graduate programs (and many other fields), particularly in statistics classes. - -*** - -# Graduate statistics - -The Department of Psychology at the University of Oregon requires first-year graduate students to take a 3-course series of classes on statistics and data analysis. (You can access the materials for these classes [here.](https://github.com/uopsych){target="_blank"}) As I'm sure used to be the case in psychology departments across many universities, the labs for these classes were originally taught in SPSS. However, thanks to the efforts of some hard-working graduate teaching assistants who served as lab instructors at the time, the labs eventually transitioned to being taught entirely in R. - -

- -
- -
-While learning R in first-year grad stats has immense benefits, it is also really challenging. This was certainly my experience, anyway. In addition to grappling with the dense conceptual material, learning a programming language and using it to do statistics felt really daunting since I had very little programming background before graduate school. And the reality is, given that many (myself included) tend to experience a large learning curve with programming, combined with the already hefty gradstats curriculum, there just isn't space in these classes to teach students much beyond the basics of R. - -*** - -# Training needs - -But the way things seem to be moving, it's becoming more common for many students to need more general data science skills in grad school. Current psychology grad students at UO (n = 28) were recently surveyed about the degree to which they perceive they will need different data science-related skills for their desired careers and how much training in those skills is available at UO to their knowledge. Specifically, they were asked, - -* On a scale of 0 ("Not at all") to 4 ("Essential"), how much do you NEED this skill for your desired career? - -* On a scale of 0 ("Not at all") to 4 ("Complete"), how much training is PROVIDED in this skill at your institution? - - -I created the plot below (using ggplot2) to visualize how much students report they need these skills compared to how much training they feel they already have. - -![](training_dotplot_se.png) - -Interestingly, the top two skills that students reported needing the most on average for their careers are data visualization and data wrangling. Fortunately, this was the first year (to my knowledge) that PSY611, the first course in the gradstats sequence, included entire labs devoted to [data visualization](https://uopsych.github.io/psy611/labs/lab-6.html){target="_blank"} and [data wrangling](https://uopsych.github.io/psy611/labs/lab-5.html){target="_blank"}. More good news is that other faculty in the psych department are starting to offer courses that focus more on these skills that students seem to need the most. For example, [Rob Chavez](https://twitter.com/robchavez){target="_blank"} has offered a fantastic seminar called [Data Science Methods in Psychology](https://robchavez.github.io/datascience_gallery/syllabus.html){target="_blank"} that covered a wide range of data science topics from [programming in R](https://robchavez.github.io/datascience_gallery/html_only/general_programming.html){target="_blank"} to [text processing](https://robchavez.github.io/datascience_gallery/html_only/text_processing.html){target="_blank"} to [package creation](https://robchavez.github.io/datascience_gallery/html_only/packages.html){target="_blank"} that ultimately turned into a great collection of student-created tutorials (all of which are available [here](https://robchavez.github.io/datascience_gallery/index.html){target="_blank"}). - -
- -
-
- -Among other crucial research skills like study design, data collection, and research ethics, the other most coveted technical skill seems to be *programming*. In fact, general programming skills seems to be where there is currently the biggest gap in training in our department. The graph below shows skills ranked in descending order by how large the gap is between how much training in those skills students need and how much they currently have. - -![](training_gaps.png) - -On the whole, it seems that that there are bigger training gaps for more general data science skills (e.g., programming in R and Python, data wrangling, data visualization). In contrast, the smallest gaps exist for more specialized skills like advanced statistics (e.g., computational modeling, network analysis, structural equation modeling) -- likely because our department has an entire class devoted to each of these topics. - -*** -# Learning Resources - -So, for the most part, it seems that grad students in our department want more training in general data science skills above and beyond the training they are currently receiving through coursework. Often what this means is that grad students end up teaching themselves (and each other) these skills. Some of my peers have made really incredible tutorials on new tools and methodologies they've recently learned. Sometimes students also attend specialized methods workshops and take really detailed notes that could greatly benefit others who want to learn the same kind of methods. My goal is to make it easier for people (both within our department and beyond) to find these resources. - -To that end, I am currently working with [Sara Weston](https://twitter.com/saraweston09){target="_blank"} to create and curate a searchable central repository of data science resources at UO that will house such student-created tutorials, workshop notes, and other data science products (e.g. R packages, shiny apps, etc.) that other students can benefit from. We are also planning to add resources from our department's data science and statistics classes (e.g. the gradstats sequence, multilevel modeling, network analysis, data science seminar, etc.). The hope is that making these resources easier to find and share by putting them all in one place will start to reduce some of the current gaps in data science training. The additional benefit is that students will be able to share their data science "side projects" more broadly, and it will be easier for people to know who they might be able to ask for help with learning certain topics when they need it. - ->This is a work in progress, so stay tuned for more details! - -*** - -# A final thought - -Reflecting on all this has brought home a thought that I think is worth sharing. I have come to realize that, **as grad students, one of the best resources we have access to during our time in grad school is *each other***. Personally, I have learned so much over the years from my [fellow lab members](https://sanlab.uoregon.edu/people/){target="_blank"}. Without them, I would not have conquered my fear of Github or felt inspired to learn more about R and other programming languages. Perhaps the most impactful benefit I've received from them, though, is their *encouragement* -- and that, in particular, is something I hope to pay forward as much as possible. - -We all enter grad school with different backgrounds and skill sets, and in so many situations the combination of our different strengths can lead to mutual benefit. So why not help each other out? - -
-![](https://media.giphy.com/media/phJ6eMRFYI6CQ/giphy.gif) -
diff --git a/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.html b/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.html deleted file mode 100644 index 7f2fcb1..0000000 --- a/content/post/2020-03-08-data-science-training-needs-in-grad-school/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Data Science Training in Psychology -author: Brendan Cullen -date: '2020-03-08' -slug: [] -categories: [] -tags: - - data science - - education - - R - - grad school -subtitle: '' -summary: 'Reflections on the importance of data science training in psychology and how we might close training gaps for grad students.' -authors: [] -lastmod: '2020-03-08T21:38:45-07:00' -featured: no -image: - caption: 'Photo by Emile Perron on Unsplash' - focal_point: '' - preview_only: no -projects: [] ---- - - - - - - -

Psychology is generally considered a “soft” science, on the opposite end of the spectrum from the “hard” sciences of physics, chemistry, and biology. This often creates a misconception that psychology is somehow not as quantitative, computational, or rigorous, methodologically. To the contrary, psychology is in fact very “hard” (some might even say, “the hardest”). Why? Because explaining human cognition and behavior is really difficult. People do not think and behave in predictable and consistent ways like atoms and molecules.

-

Indeed, the combination of random variation (“noise”) in how we humans respond to our environment on an given day/hour/minute, combined with the inherent challenge of proper sampling, reliable measurement and accurate model building makes data analysis for a psychologist no easy feat. Explaining variance in psychological data has required centuries of refining statistical methods and computational tools. Fortunately, today’s scientists have access to open-source software like R and Python that have vastly enhanced our ability to work with data in a way that is more transparent and reproducible. As a result, the teaching of these tools is becoming increasingly more common in psychology graduate programs (and many other fields), particularly in statistics classes.

-
-
-

Graduate statistics

-

The Department of Psychology at the University of Oregon requires first-year graduate students to take a 3-course series of classes on statistics and data analysis. (You can access the materials for these classes here.) As I’m sure used to be the case in psychology departments across many universities, the labs for these classes were originally taught in SPSS. However, thanks to the efforts of some hard-working graduate teaching assistants who served as lab instructors at the time, the labs eventually transitioned to being taught entirely in R.

-
- - -
-


-While learning R in first-year grad stats has immense benefits, it is also really challenging. This was certainly my experience, anyway. In addition to grappling with the dense conceptual material, learning a programming language and using it to do statistics felt really daunting since I had very little programming background before graduate school. And the reality is, given that many (myself included) tend to experience a large learning curve with programming, combined with the already hefty gradstats curriculum, there just isn’t space in these classes to teach students much beyond the basics of R.

-
-
-
-

Training needs

-

But the way things seem to be moving, it’s becoming more common for many students to need more general data science skills in grad school. Current psychology grad students at UO (n = 28) were recently surveyed about the degree to which they perceive they will need different data science-related skills for their desired careers and how much training in those skills is available at UO to their knowledge. Specifically, they were asked,

-
    -
  • On a scale of 0 (“Not at all”) to 4 (“Essential”), how much do you NEED this skill for your desired career?

  • -
  • On a scale of 0 (“Not at all”) to 4 (“Complete”), how much training is PROVIDED in this skill at your institution?

  • -
-

I created the plot below (using ggplot2) to visualize how much students report they need these skills compared to how much training they feel they already have.

-

-

Interestingly, the top two skills that students reported needing the most on average for their careers are data visualization and data wrangling. Fortunately, this was the first year (to my knowledge) that PSY611, the first course in the gradstats sequence, included entire labs devoted to data visualization and data wrangling. More good news is that other faculty in the psych department are starting to offer courses that focus more on these skills that students seem to need the most. For example, Rob Chavez has offered a fantastic seminar called Data Science Methods in Psychology that covered a wide range of data science topics from programming in R to text processing to package creation that ultimately turned into a great collection of student-created tutorials (all of which are available here).

-
- - -
-


-

Among other crucial research skills like study design, data collection, and research ethics, the other most coveted technical skill seems to be programming. In fact, general programming skills seems to be where there is currently the biggest gap in training in our department. The graph below shows skills ranked in descending order by how large the gap is between how much training in those skills students need and how much they currently have.

-

-

On the whole, it seems that that there are bigger training gaps for more general data science skills (e.g., programming in R and Python, data wrangling, data visualization). In contrast, the smallest gaps exist for more specialized skills like advanced statistics (e.g., computational modeling, network analysis, structural equation modeling) – likely because our department has an entire class devoted to each of these topics.

-
-
-
-

Learning Resources

-

So, for the most part, it seems that grad students in our department want more training in general data science skills above and beyond the training they are currently receiving through coursework. Often what this means is that grad students end up teaching themselves (and each other) these skills. Some of my peers have made really incredible tutorials on new tools and methodologies they’ve recently learned. Sometimes students also attend specialized methods workshops and take really detailed notes that could greatly benefit others who want to learn the same kind of methods. My goal is to make it easier for people (both within our department and beyond) to find these resources.

-

To that end, I am currently working with Sara Weston to create and curate a searchable central repository of data science resources at UO that will house such student-created tutorials, workshop notes, and other data science products (e.g. R packages, shiny apps, etc.) that other students can benefit from. We are also planning to add resources from our department’s data science and statistics classes (e.g. the gradstats sequence, multilevel modeling, network analysis, data science seminar, etc.). The hope is that making these resources easier to find and share by putting them all in one place will start to reduce some of the current gaps in data science training. The additional benefit is that students will be able to share their data science “side projects” more broadly, and it will be easier for people to know who they might be able to ask for help with learning certain topics when they need it.

-
-

This is a work in progress, so stay tuned for more details!

-
-
-
-
-

A final thought

-

Reflecting on all this has brought home a thought that I think is worth sharing. I have come to realize that, as grad students, one of the best resources we have access to during our time in grad school is each other. Personally, I have learned so much over the years from my fellow lab members. Without them, I would not have conquered my fear of Github or felt inspired to learn more about R and other programming languages. Perhaps the most impactful benefit I’ve received from them, though, is their encouragement – and that, in particular, is something I hope to pay forward as much as possible.

-

We all enter grad school with different backgrounds and skill sets, and in so many situations the combination of our different strengths can lead to mutual benefit. So why not help each other out?

-
- -
-
diff --git a/content/post/2020-03-08-one-size-rarely-fits-all/index.html b/content/post/2020-03-08-one-size-rarely-fits-all/index.html deleted file mode 100644 index 7f4fad2..0000000 --- a/content/post/2020-03-08-one-size-rarely-fits-all/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: One Size Rarely Fits All -author: Brendan Cullen -date: '2020-03-08' -slug: [] -categories: -tags: - - precision-medicine - - health - - psychology -subtitle: '' -summary: 'A case for a precision medicine approach to behavioral health in psychology' -authors: [] -lastmod: '2020-03-08T16:36:57-07:00' -featured: no -image: - caption: 'Source: Shutterstock / HelloRF Zcool' - focal_point: '' - preview_only: FALSE -projects: [] ---- - - - - - - -

Think about the last time you had a splitting headache and needed some quick relief. Which bottle did you reach for? Tylenol or Advil? Why? Maybe you think of yourself as a “Tylenol person” or an “Advil person” because one of these has worked for you before. Or maybe one always upsets your stomach. The point is that not everyone experiences the same pain relief from one pill. Some people prefer Tylenol and others Advil, but nobody quite knows why.

-

The same is true of psychological treatments—they don’t work the same way for all people. People differ in how they respond to treatments for depression, anxiety, addiction, and so forth. The lingo in the field is that there are individual differences in treatment effectiveness. Why? Because, to state the obvious, no two people are exactly alike. And that fact poses a problem for the study of these treatments. Researchers test psychological treatments the same way they test drugs like Tylenol and Advil—using randomized controlled trials (RCTs). People are assigned at random to either one group, which receives a treatment, or another group, which does not. RCTs are an excellent way to assess the differences between the groups on average. The group difference indicates how well the treatment works. The problem is that researchers tend to treat people who differ from their group’s average as mere statistical fluctuations—“noise” in the signal.

-

The drawback of group-to-group comparisons is that they hide person-to-person differences that may be important. For example, even when one group does a lot better than another on average, there may still be many people in the first group who do not improve at all. Or maybe some people in the first group get worse even though their group got better overall. Instead of only thinking at the “group” level, we need to pay more attention to person-to-person differences. This will help us learn why treatments work only for some individuals and not others.

-

How do we learn for whom psychological treatments will work? There are three main things we need to know:

-
-

1) How does the treatment work?

-

At this point, there is strong evidence that Tylenol is an effective painkiller. But, even after decades of research, we still don’t fully understand how Tylenol relieves pain. Similarly, though we know that many psychological treatments are effective (at least for some people), we do not know how these treatments work. For example, researchers don’t know which parts of the brain are changed by most treatments. If we knew more specifics about how a treatment worked, we could improve it. We could focus our efforts on the parts of the treatment that make people better and remove the parts that don’t seem as important. And here’s the bonus: If we knew how treatments worked, that would help us learn for whom they work. Imagine we knew that a treatment reduced depression by decreasing self-criticism. In other words, a reduction in self-criticism is the one and only active ingredient in this treatment. If so, then people who criticize themselves a lot would be good candidates to benefit most from this treatment.

-
-
-

2) What are the unique causes of the problem for a given person?

-

To predict whether someone would benefit from a given treatment, we need to know more about the special factors underlying that person’s problem. In terms of pain, Tylenol is usually the better option for headache pain, and Advil is a good bet for inflammation. Similarly, a psychological treatment will work for a given person only if it addresses whatever caused the problem in the first place. Consider two people who both experience severe anxiety, but for different reasons. If genetic factors cause one person’s anxiety while past trauma is the main source of the other person’s anxiety, then these two individuals will likely need different types of treatment.

-
-
-

3) How does the treatment mesh with a person’s unique characteristics?

-

Like all drugs, Tylenol and Advil have side effects. And it turns out that they have different side effects depending on whether somebody is at risk for heart disease. So, people who have experienced a heart attack, for example, must carefully choose which pill to take when they have a headache. Similarly, whether or not a psychological treatment will work for somebody might depend on that person’s age, gender, or life history, to name just a few examples. The success of many treatments also depends on how severe a person’s problem is to begin with. Consider again the example of a treatment for depression that works on average for a group of people. Perhaps this treatment works best for people who are severely depressed because it focuses on a symptom that is more common in those people. A different treatment, which also works on average, might consistently decrease depression in mildly depressed people but not work at all for severely depressed people.

-
-
-

The bottom line

-

With answers to these three questions, researchers can begin to tailor psychological treatments to the unique needs of different people. We know that a given treatment will not work, at least not equally well, for every person. But being able to predict at the outset who will benefit and who won’t could save a lot of time and money. Rather than treating individual differences as “noise,” we can use them to glean potentially important information. If we can better understand why some people benefit from treatment while others don’t, we can make treatments more effective for more people. Eventually, this will allow more people to live healthier lives.

-
-

Note. I originally wrote this piece for Psychology Today. See the original post here.

-
-
diff --git a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.html b/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.html deleted file mode 100644 index d22bd6b..0000000 --- a/content/post/2020-06-02-tidymodels-decision-tree-learning-in-r/index.html +++ /dev/null @@ -1,1212 +0,0 @@ ---- -title: 'Tidymodels: Decision Tree Learning in R' -author: Cianna Bedford-Petersen, Christopher Loan & Brendan Cullen -date: '2020-06-02' -slug: [] -categories: [] -tags: [] -subtitle: 'Cianna Bedford-Petersen, Christopher Loan & Brendan Cullen' -summary: 'An overview and worked example of tree-based machine learning methods in R using `tidymodels`' -authors: [] -lastmod: '2020-06-02T10:57:23-07:00' -featured: no -image: - caption: 'Image by Ilona Ilyés from Pixabay' - focal_point: '' - preview_only: FALSE -projects: [] -disable_codefolding: false -codefolding_show: "show" -codefolding_nobutton: false ---- - - - - - - -

RStudio has recently released a cohesive suite of packages for modelling and machine learning, called {tidymodels}. The successor to Max Kuhn’s {caret} package, {tidymodels} allows for a tidy approach to your data from start to finish. We’re going to walk through the basics for getting off the ground with {tidymodels} and demonstrate its application to three different tree-based methods for predicting student test scores. For further information about the package, you can visit https://www.tidymodels.org/.

-
-

Setup

-

Load both the {tidyverse} and {tidymodels} packages into your environment. We’ll also load in the {skimr} package to help us with some descriptives for our data and a host of other packages that will be required to run our machine learning models.

-
library(tidymodels) 
-library(tidyverse) # manipulating data
-library(skimr) # data visualization
-library(baguette) # bagged trees
-library(future) # parallel processing & decrease computation time
-library(xgboost) # boosted trees
-
-
-

Import the data

-

We use simulated data which approximates reading and math scores for ~189,000 3rd-8th grade students in Oregon public schools see this Kaggle page for details. For the purpose of demonstration, we’ll be sampling 1% of the data with sample_frac() to keep computer processing time manageable. All school IDs in the data are real, so we can use that information to link the data with other sources. Specifically, we’re also going to pull in some data on student enrollment in free and reduced lunch from the National Center for Education Statistics and some ethnicity data from the Oregon Department of Education.

-
set.seed(100)
-
-# import data and perform initial cleaning
-# initial cleaning steps include: 
-# *recode NA's for lang_cd and ayp_lep to more meaningful values
-# *remove vars with entirely missing data
-# Note: the data is called 'train.csv', but we will actually further split this into its own training and testing data
-
-dat <- read_csv(here::here("static", "data", "train.csv")) %>% 
-  select(-classification) %>% # remove this variable because it's redundant with `score`
-  mutate(lang_cd = ifelse(is.na(lang_cd), "E", lang_cd), 
-         ayp_lep = ifelse(is.na(ayp_lep), "G", ayp_lep)) %>% 
-  sample_frac(.01) %>% # sample 1% of the data to reduce run time
-  janitor::remove_empty(c("rows", "cols")) %>% 
-  drop_na() %>% 
-  select_if(~length(unique(.x)) > 1)
-
-# import fall membership report ethcnicity data and do some basic cleaning and renaming
-sheets <- readxl::excel_sheets(here::here("static", "data", "fallmembershipreport_20192020.xlsx"))
-
-ode_schools <- readxl::read_xlsx(here::here("static", "data", "fallmembershipreport_20192020.xlsx"),
-                                 sheet = sheets[4])
-
-ethnicities <- ode_schools %>%
-  select(attnd_schl_inst_id = `Attending School ID`,
-         attnd_dist_inst_id = `Attending District Institution ID`,
-         sch_name = `School Name`,
-         contains("%")) %>%
-  janitor::clean_names()
-
-names(ethnicities) <- gsub("x2019_20_percent", "p", names(ethnicities))
-
-# join ethnicity data with original dataset
-dat <- left_join(dat, ethnicities)
-
-# import and tidy free and reduced lunch data 
-frl <- rio::import("https://nces.ed.gov/ccd/Data/zip/ccd_sch_033_1718_l_1a_083118.zip",
-              setclass = "tbl_df")  %>% 
-  janitor::clean_names()  %>% 
-  filter(st == "OR")  %>%
-  select(ncessch, lunch_program, student_count)  %>% 
-  mutate(student_count = replace_na(student_count, 0))  %>% 
-  pivot_wider(names_from = lunch_program,
-              values_from = student_count)  %>% 
-  janitor::clean_names()  %>% 
-  mutate(ncessch = as.double(ncessch))
-
-# import student counts for each school across grades
-stu_counts <- rio::import("https://github.com/datalorax/ach-gap-variability/raw/master/data/achievement-gaps-geocoded.csv", setclass = "tbl_df")  %>% 
-  filter(state == "OR" & year == 1718)  %>% 
-  count(ncessch, wt = n)  %>% 
-  mutate(ncessch = as.double(ncessch))
-
-# join frl and stu_counts data
-frl <- left_join(frl, stu_counts)
-
-# add frl data to train data
-dat <- left_join(dat, frl)
-

After loading in our three datasets, we’ll join them together to make one cohesive data set to use for modelling. After joining, the data contains both student-level variables (e.g. gender, ethnicity, enrollment in special education/talented and gifted programs, etc.) and district-level variables (e.g. school longitude and latitude, proportion of students who qualify for free and reduced-price lunch, etc.), all of which will be included for each 3 of our {tidymodels} tree-based examples.

-

For a more complete description of the variables, you can download the data dictionary here.

-
-
-

Explore the data

-

We’ll use the skim() function from {skimr} to take a closer look at our variables. Many numeric predictors are clearly non-normal (see histograms below), but this is no problem as tree-based methods are robust to non-normality.

-
dat %>% 
-  select(-contains("id"), -ncessch, -missing, -not_applicable) %>%  # remove ID and irrelevant variables
-  mutate(tst_dt = lubridate::as_date(lubridate::mdy_hms(tst_dt))) %>% # covert test date to date
-  modify_if(is.character, as.factor) %>%  # convert character vars to factors
-  skim() %>% 
-  select(-starts_with("numeric.p")) # remove quartiles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 1: Data summary
NamePiped data
Number of rows1857
Number of columns41
_______________________
Column type frequency:
Date1
factor25
numeric15
________________________
Group variablesNone
-

Variable type: Date

- - - - - - - - - - - - - - - - - - - - - - - -
skim_variablen_missingcomplete_rateminmaxmediann_unique
tst_dt012018-03-162018-06-072018-05-1847
-

Variable type: factor

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
skim_variablen_missingcomplete_rateorderedn_uniquetop_counts
gndr01FALSE2M: 939, F: 918
ethnic_cd01FALSE7W: 1151, H: 458, M: 100, A: 79
tst_bnch01FALSE6G6: 343, 1B: 330, G4: 304, G7: 304
migrant_ed_fg01FALSE2N: 1793, Y: 64
ind_ed_fg01FALSE2N: 1842, Y: 15
sp_ed_fg01FALSE2N: 1614, Y: 243
tag_ed_fg01FALSE2N: 1759, Y: 98
econ_dsvntg01FALSE2Y: 1100, N: 757
ayp_lep01FALSE10G: 1471, F: 164, Y: 72, E: 58
stay_in_dist01FALSE2Y: 1811, N: 46
stay_in_schl01FALSE2Y: 1803, N: 54
dist_sped01FALSE2N: 1846, Y: 11
trgt_assist_fg01FALSE3N: 1773, Y: 83, y: 1
ayp_schl_partic01FALSE2Y: 1846, N: 11
ayp_dist_prfrm01FALSE2Y: 1803, N: 54
ayp_schl_prfrm01FALSE2Y: 1785, N: 72
rc_schl_partic01FALSE2Y: 1846, N: 11
rc_dist_prfrm01FALSE2Y: 1803, N: 54
rc_schl_prfrm01FALSE2Y: 1785, N: 72
lang_cd01FALSE2E: 1815, S: 42
tst_atmpt_fg01FALSE2Y: 1853, P: 4
grp_rpt_schl_partic01FALSE2Y: 1846, N: 11
grp_rpt_dist_prfrm01FALSE2Y: 1845, N: 12
grp_rpt_schl_prfrm01FALSE2Y: 1834, N: 23
sch_name11FALSE699Hig: 14, Jud: 14, Hou: 13, Fiv: 11
-

Variable type: numeric

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
skim_variablen_missingcomplete_ratemeansdhist
enrl_grd015.441.69▇▃▅▃▃
score012495.34115.19▁▁▂▇▁
lat0144.790.99▂▁▂▅▇
lon01-122.511.16▅▇▁▁▁
p_american_indian_alaska_native110.010.06▇▁▁▁▁
p_asian110.040.07▇▁▁▁▁
p_native_hawaiian_pacific_islander110.010.01▇▁▁▁▁
p_black_african_american110.020.04▇▁▁▁▁
p_hispanic_latino110.250.18▇▅▂▁▁
p_white110.600.20▁▃▅▇▅
p_multiracial110.060.03▇▆▁▁▁
free_lunch_qualified01231.23147.55▇▇▃▁▁
reduced_price_lunch_qualified0139.8624.77▆▇▃▁▁
no_category_codes01271.09165.44▆▇▃▁▁
n01816.07536.55▇▃▂▁▁
-

While most of our predictors are categorical, we can use {corrplot} to better visualize the relationships among the numeric variables.

-
dat %>% 
-  select(-contains("id"), -ncessch, -missing, -not_applicable) %>% 
-  select_if(is.numeric) %>% 
-  select(score, everything()) %>% 
-  cor(use = "complete.obs") %>% 
-  corrplot::corrplot()
-

-
-
-

Split data and resample

-

The first step of our analysis is to split our data into two separate sets: a “training” set and a “testing” set. The training set is used to train a model and, if desired, to adjust (i.e., “tune”) the model’s hyperparameters before evaluating its final performance on our test data. By allowing us to test a model on a new sample, we assess “out of sample” accuracy (i.e., unseen data-—what all predictive models are interested in) and limit overfitting to the training set. We can do this efficiently with the initial_split() function. This comes from the {rsample} package, which is part of the {tidymodels} package that we already loaded. Defaults put 75% of the data in the training set and 25% in the test set, but this can be adjusted with the prop argument. Then, we’ll extract the training data from our split object and assign it a name.

-

To further prevent over-fitting, we’ll resample our data using vfold_cv(). This function outputs k-fold cross-validated versions of our training data, where k = the number of times we resample (unsure why v- is used instead of k- here). By using k = 10 data sets, we get a better estimate of the model’s out-of-sample accuracy. On top of decreasing bias from over-fitting, this is essential when tuning hyperparameters (though we plan to apply defaults and not tune here, for brevity). Though our use of 10-fold cross validation is both frequently used and effective, it should be noted that other methods (e.g., bootstrap resampling) or other k-values are sometimes used to accomplish the same goal.

-
# split the data
-split <- initial_split(dat)
-
-# extract the training data
-train <- training(split)
-
-# resample the data with 10-fold cross-validation (10-fold by default)
-cv <- vfold_cv(train)
-
-
-

Pre-processing

-

Before we add in our data to the model, we’re going to set up an object that pre-processes our data. This is called a recipe. To create a recipe, you’ll first specify a formula for your model, indicating which variable is your outcome and which are your predictors. Using ~. here will indicate that we want to use all variables other than score as predictors. Then, we can specify a series of pre-processing steps for our data that directs our recipe to assign our variables a role or performs feature engineering steps. Pre-processing may be sound uncommon, but if you’ve ever used lm() (or several other R functions) you’ve done some of this by simply calling the function (e.g., automatic dummy-coding to handle categorical data). This is beneficial because it gives the analyst more control, despite adding complexity to the process.

-

A complete list of possible pre-processing steps can be found here: https://www.tidymodels.org/find/recipes/

-
rec <- recipe(score ~ ., train) %>% 
-  step_mutate(tst_dt = as.numeric(lubridate::mdy_hms(tst_dt))) %>% # convert `test date` variable to a date 
-  update_role(contains("id"), ncessch, new_role = "id vars") %>% # declare ID variables
-  step_nzv(all_predictors(), freq_cut = 0, unique_cut = 0) %>% # remove variables with zero variances
-  step_novel(all_nominal()) %>% # prepares test data to handle previously unseen factor levels 
-  step_unknown(all_nominal()) %>% # categorizes missing categorical data (NA's) as `unknown`
-  step_medianimpute(all_numeric(), -all_outcomes(), -has_role("id vars"))  %>% # replaces missing numeric observations with the median
-  step_dummy(all_nominal(), -has_role("id vars")) # dummy codes categorical variables
-
-
-

Create a model

-

The last step before bringing in our data is to specify our model. This will call upon functions from the {parsnip} package, which standardizes language for specifying a multitude of statistical models. There are a few core elements that you will need to specify for each model

-
-

The type of model

-

This indicates what type of model you choose to fit, each of which will be a different function. We’ll be focusing on decision tree methods using bag_tree(), random_forest(), and boost_tree(). A full list of models can be found here https://www.tidymodels.org/find/parsnip/

-
-
-

The engine

-

set_engine() calls the package to support the model you specified above.

-
-
-

The mode

-

set_mode() indicates the type of prediction you’d like to use in your model, you’ll choose between regression and classification. Since we are looking to predict student scores, which is a continuous predictor, we’ll be choosing regression.

-
-
-

The arguments

-

set_args() allows you to set values for various parameters for your model, each model type will have a specific set of parameters that can be altered. For these parameters, you can either set a particular value or you can use the tune function to search for the optimal value of each parameter. Tuning requires a few extra steps, so we will leave the default arguments for clarity. For more information on tuning check out https://tune.tidymodels.org/.

-
-
-
-

Create a workflow

-

Up to this point we’ve been setting up a lot of individual elements and now it is time to combine them to create a cohesive framework, called a workflow, so we can run our desired models. First, we’ll use the workflow() command and then we’ll pulling the recipe and model we already created. The next section shows three examples of specifying models and creating a workflow for different decision tree methods.

-
-
-

Model Examples

-
-

Bagged trees

-

A bagged tree approach creates multiple subsets of data from the training set which are randomly chosen with replacement. Each subset of data is used to train a given decision tree. In the end, we have an ensemble of different models. The predictions from all the different trees are averaged together, giving us a stronger prediction than one tree could independently.

-
-

Specify model

-
set.seed(100)
-mod_bag <- bag_tree() %>%
-  set_mode("regression") %>%
-  set_engine("rpart", times = 10) # 10 bootstrap resamples
-
-
-

Create workflow

-
wflow_bag <- workflow() %>% 
-  add_recipe(rec) %>%
-  add_model(mod_bag)
-
-
-

Fit the model

-
set.seed(100)
-plan(multisession)
-
-fit_bag <- fit_resamples(
-  wflow_bag,
-  cv,
-  metrics = metric_set(rmse, rsq),
-  control = control_resamples(verbose = TRUE,
-                              save_pred = TRUE,
-                              extract = function(x) extract_model(x)))
-
-
-

Visualize

-

The plot below shows the root nodes from a bagged tree made of 100 trees (10 folds x 10 bootstrapped resamples). Root nodes are the 1st node in a decision tree, and they are determined by which variable best optimizes a loss function (e.g., minimizes mean square error [MSE] for continuous outcomes or Gini Index for categorical outcomes). Put roughly, the most common root nodes can be thought of as the most “important” predictors.

-
# extract roots
-bag_roots <-  function(x){
-  x %>% 
-  select(.extracts) %>% 
-  unnest(cols = c(.extracts)) %>% 
-  mutate(models = map(.extracts,
-                  ~.x$model_df)) %>% 
-  select(-.extracts) %>% 
-  unnest(cols = c(models)) %>% 
-  mutate(root = map_chr(model,
-                     ~as.character(.x$fit$frame[1, 1]))) %>%
-  select(root)  
-}
-
-# plot
-bag_roots(fit_bag) %>% 
-  ggplot(mapping = aes(x = fct_rev(fct_infreq(root)))) + 
-  geom_bar() + 
-  coord_flip() + 
-  labs(x = "root", y = "count")
-

-
-
-
-

Random forest

-

Random forest is similar to bagged tree methodology but goes one step further. In addition to taking random subsets of data, the model also draws a random selection of features. Instead of utilizing all features, the random subset of features allows more predictors to be eligible root nodes. This is particularly useful for handling high dimensionality data (e.g., have more variables than participants/cases).

-
-

Specify the model

-
set.seed(100)
-mod_rf <-rand_forest() %>%
-  set_engine("ranger",
-             num.threads = parallel::detectCores(), 
-             importance = "permutation", 
-             verbose = TRUE) %>% 
-  set_mode("regression") %>% 
-  set_args(trees = 1000)
-
-
-

Create workflow

-
wflow_rf <- workflow() %>% 
-  add_model(mod_rf) %>% 
-  add_recipe(rec)
-
-
-

Fit the model

-
set.seed(100)
-plan(multisession)
-
-fit_rf <- fit_resamples(
-  wflow_rf,
-  cv,
-  metrics = metric_set(rmse, rsq),
-  control = control_resamples(verbose = TRUE,
-                              save_pred = TRUE,
-                              extract = function(x) x)
-)
-
-
-

Visualize

-

The plot below shows the root nodes from a random forest with 1000 trees (specified using set_args(trees = 1000) in the parsnip model object).

-
# extract roots
-rf_tree_roots <- function(x){
-  map_chr(1:1000, 
-           ~ranger::treeInfo(x, tree = .)[1, "splitvarName"])
-}
-
-rf_roots <- function(x){
-  x %>% 
-  select(.extracts) %>% 
-  unnest(cols = c(.extracts)) %>% 
-  mutate(fit = map(.extracts,
-                   ~.x$fit$fit$fit),
-         oob_rmse = map_dbl(fit,
-                         ~sqrt(.x$prediction.error)),
-         roots = map(fit, 
-                        ~rf_tree_roots(.))
-         ) %>% 
-  select(roots) %>% 
-  unnest(cols = c(roots))
-}
-
-# plot
-rf_roots(fit_rf) %>% 
-  group_by(roots) %>% 
-  count() %>% 
-  arrange(desc(n)) %>% 
-  filter(n > 75) %>% 
-  ggplot(aes(fct_reorder(roots, n), n)) +
-           geom_col() + 
-           coord_flip() + 
-  labs(x = "root", y = "count")
-

-
-
-
-

Boosted trees

-

Boosted trees, like bagged trees, are an ensemble model. Instead of applying successive models to resampled data and pooling estimates, boosted trees fit the next tree to the residuals (i.e., error term) of the prior tree. The goal is to minimize residual error through multiple trees, and is typically done with fairly “shallow” decision tree (i.e., 1-6 splits in each tree). Though each model is only slightly improving the error rate, the sequential use of many shallow trees makes computationally efficient (i.e. reduced run time) and highly accurate predictions.

-
-

Specify the model

-
mod_boost <- boost_tree() %>% 
-  set_engine("xgboost", nthreads = parallel::detectCores()) %>% 
-  set_mode("regression")
-
-
-

Create workflow

-
wflow_boost <- workflow() %>% 
-  add_recipe(rec) %>% 
-  add_model(mod_boost)
-
-
-

Fit the model

-
set.seed(100)
-plan(multisession)
-
-fit_boost <- fit_resamples(
-  wflow_boost, 
-  cv,
-  metrics = metric_set(rmse, rsq),
-  control = control_resamples(verbose = TRUE,
-                              save_pred = TRUE)
-)
-
-
-

Visualize

-

One of the few downfalls of {tidymodels} is its (current) inability to plot these tree-based models. For the past two models, it was simpler to extract root nodes and plot them, but their interpretation (as we’re fitting to residuals instead of data sets) are not straightforward. For that reason, we don’t have any pretty plots here. Instead, we’ll skip to evaluating the metrics of all models.

-
-
-
-
-

Evaluate metrics

-

After running these three models, it’s time to evaluate their performance. We can do this with tune::collect_metrics(). The table below shows the estimate of the out-of-sample performance for each of our 3 models.

-
collect_metrics(fit_bag) %>% 
-  bind_rows(collect_metrics(fit_rf)) %>%
-  bind_rows(collect_metrics(fit_boost)) %>% 
-  filter(.metric == "rmse") %>% 
-  mutate(model = c("bag", "rf", "boost")) %>% 
-  select(model, everything()) %>% 
-  knitr::kable()
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
model.metric.estimatormeannstd_err
bagrmsestandard98.42890102.504904
rfrmsestandard95.20828103.466279
boostrmsestandard95.35888102.764773
-

Here, we are faced with a common problem in the machine learning world: choosing between models that perform similarly (see overlapping standard errors). Whether we would prefer random forests or bagged trees may depend on computational efficiency (i.e., time) or other factors. In practice, tuning several hyperparameters may have made one model clearly preferable over the others, but in our case - relying on all defaults - we would probably have similar performance with both models on a new data set and would prefer random forest or boosted tree models for their efficiency.

-
-
-

Out-of-sample performance

-

The final step is to apply each trained model to our test data using last_fit().

-
# bagged trees
-final_fit_bag <- last_fit(
-  wflow_bag,
-  split = split
-)
-
-# random forest
-final_fit_rf <- last_fit(
-  wflow_rf,
-  split = split
-)
-
-# boosted trees
-final_fit_boost <- last_fit(
-  wflow_boost,
-  split = split
-)
-

The table below shows the actual out-of-sample performance for each of our 3 models.

-
# show performance on test data
-collect_metrics(final_fit_bag) %>% 
-  bind_rows(collect_metrics(final_fit_rf)) %>%
-  bind_rows(collect_metrics(final_fit_boost)) %>% 
-  filter(.metric == "rmse") %>% 
-  mutate(model = c("bag", "rf", "boost")) %>% 
-  select(model, everything()) %>% 
-  knitr::kable()
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
model.metric.estimator.estimate
bagrmsestandard93.36504
rfrmsestandard91.18114
boostrmsestandard94.22609
-

After applying our 3 trained models to the unseen test data, it looks like random forest is the winner since it has the lowest RMSE. In this example, we only used 1% of the data to train these models, which could make it difficult to meaningfully compare their performance. However, the random forest model also results in the best out-of-sample prediction (RMSE = 83.47) when using all of the available data, which we did for the Kaggle competition.

-
-

Session Info

-
## ─ Session info ───────────────────────────────────────────────────────────────
-##  setting  value                       
-##  version  R version 3.6.2 (2019-12-12)
-##  os       macOS Catalina 10.15.6      
-##  system   x86_64, darwin15.6.0        
-##  ui       X11                         
-##  language (EN)                        
-##  collate  en_US.UTF-8                 
-##  ctype    en_US.UTF-8                 
-##  tz       America/Los_Angeles         
-##  date     2020-10-26                  
-## 
-## ─ Packages ───────────────────────────────────────────────────────────────────
-##  package       * version    date       lib
-##  assertthat      0.2.1      2019-03-21 [1]
-##  backports       1.1.10     2020-09-15 [1]
-##  baguette      * 0.0.1      2020-04-14 [1]
-##  base64enc       0.1-3      2015-07-28 [1]
-##  bayesplot       1.7.1      2019-12-01 [1]
-##  blogdown        0.17       2019-11-13 [1]
-##  bookdown        0.21       2020-10-13 [1]
-##  boot            1.3-24     2019-12-20 [1]
-##  broom         * 0.5.5      2020-02-29 [1]
-##  C50             0.1.3      2020-01-13 [1]
-##  callr           3.5.1      2020-10-13 [1]
-##  cellranger      1.1.0      2016-07-27 [1]
-##  class           7.3-15     2019-01-01 [2]
-##  cli             2.1.0      2020-10-12 [1]
-##  codetools       0.2-16     2018-12-24 [2]
-##  colorspace      1.4-1      2019-03-18 [1]
-##  colourpicker    1.0        2017-09-27 [1]
-##  corrplot        0.84       2017-10-16 [1]
-##  crayon          1.3.4      2017-09-16 [1]
-##  crosstalk       1.1.0.1    2020-03-13 [1]
-##  Cubist          0.2.3      2020-01-10 [1]
-##  data.table      1.12.8     2019-12-09 [1]
-##  DBI             1.1.0      2019-12-15 [1]
-##  dbplyr          1.4.2      2019-06-17 [1]
-##  dials         * 0.0.8.9000 2020-07-23 [1]
-##  DiceDesign      1.8-1      2019-07-31 [1]
-##  digest          0.6.27     2020-10-24 [1]
-##  dplyr         * 1.0.2      2020-08-18 [1]
-##  DT              0.16       2020-10-13 [1]
-##  dygraphs        1.1.1.6    2018-07-11 [1]
-##  earth           5.1.2      2019-11-09 [1]
-##  ellipsis        0.3.1      2020-05-15 [1]
-##  evaluate        0.14       2019-05-28 [1]
-##  fansi           0.4.1      2020-01-08 [1]
-##  farver          2.0.3      2020-01-16 [1]
-##  fastmap         1.0.1      2019-10-08 [1]
-##  forcats       * 0.4.0      2019-02-17 [1]
-##  foreach         1.5.0      2020-03-30 [1]
-##  Formula         1.2-3      2018-05-03 [1]
-##  fs              1.3.1      2019-05-06 [1]
-##  furrr           0.1.0      2018-05-16 [1]
-##  future        * 1.18.0     2020-07-09 [1]
-##  generics        0.0.2      2018-11-29 [1]
-##  ggplot2       * 3.3.2      2020-06-19 [1]
-##  ggridges        0.5.2      2020-01-12 [1]
-##  globals         0.12.5     2019-12-07 [1]
-##  glue            1.4.2      2020-08-27 [1]
-##  gower           0.2.2      2020-06-23 [1]
-##  GPfit           1.0-8      2019-02-08 [1]
-##  gridExtra       2.3        2017-09-09 [1]
-##  gtable          0.3.0      2019-03-25 [1]
-##  gtools          3.8.1      2018-06-26 [1]
-##  hardhat         0.1.4      2020-07-02 [1]
-##  haven           2.2.0      2019-11-08 [1]
-##  highr           0.8        2019-03-20 [1]
-##  hms             0.5.3      2020-01-08 [1]
-##  htmltools       0.5.0      2020-06-16 [1]
-##  htmlwidgets     1.5.2      2020-10-03 [1]
-##  httpuv          1.5.4      2020-06-06 [1]
-##  httr            1.4.2      2020-07-20 [1]
-##  igraph          1.2.4.2    2019-11-27 [1]
-##  infer         * 0.5.1      2019-11-19 [1]
-##  inline          0.3.15     2018-05-18 [1]
-##  inum            1.0-1      2019-04-25 [1]
-##  ipred           0.9-9      2019-04-28 [1]
-##  iterators       1.0.12     2019-07-26 [1]
-##  janeaustenr     0.1.5      2017-06-10 [1]
-##  jsonlite        1.7.1      2020-09-07 [1]
-##  knitr           1.30       2020-09-22 [1]
-##  labeling        0.4.2      2020-10-20 [1]
-##  later           1.1.0.1    2020-06-05 [1]
-##  lattice         0.20-38    2018-11-04 [2]
-##  lava            1.6.7      2020-03-05 [1]
-##  lhs             1.0.2      2020-04-13 [1]
-##  libcoin         1.0-5      2019-08-27 [1]
-##  lifecycle       0.2.0      2020-03-06 [1]
-##  listenv         0.8.0      2019-12-05 [1]
-##  lme4            1.1-21     2019-03-05 [1]
-##  loo             2.2.0      2019-12-19 [1]
-##  lubridate       1.7.9      2020-06-08 [1]
-##  magrittr        1.5        2014-11-22 [1]
-##  markdown        1.1        2019-08-07 [1]
-##  MASS            7.3-51.4   2019-03-31 [2]
-##  Matrix          1.2-18     2019-11-27 [2]
-##  matrixStats     0.56.0     2020-03-13 [1]
-##  mime            0.9        2020-02-04 [1]
-##  miniUI          0.1.1.1    2018-05-18 [1]
-##  minqa           1.2.4      2014-10-09 [1]
-##  modelr          0.1.6      2020-02-22 [1]
-##  munsell         0.5.0      2018-06-12 [1]
-##  mvtnorm         1.1-0      2020-02-24 [1]
-##  nlme            3.1-142    2019-11-07 [2]
-##  nloptr          1.2.2.1    2020-03-11 [1]
-##  nnet            7.3-12     2016-02-02 [2]
-##  parsnip       * 0.1.2.9000 2020-07-17 [1]
-##  partykit        1.2-7      2020-03-06 [1]
-##  pillar          1.4.6      2020-07-10 [1]
-##  pkgbuild        1.1.0      2020-07-13 [1]
-##  pkgconfig       2.0.3      2019-09-22 [1]
-##  plotmo          3.5.7      2020-04-15 [1]
-##  plotrix         3.7-8      2020-04-16 [1]
-##  plyr            1.8.6      2020-03-03 [1]
-##  prettyunits     1.1.1      2020-01-24 [1]
-##  pROC            1.16.2     2020-03-19 [1]
-##  processx        3.4.4      2020-09-03 [1]
-##  prodlim         2019.11.13 2019-11-17 [1]
-##  promises        1.1.1      2020-06-09 [1]
-##  ps              1.4.0      2020-10-07 [1]
-##  purrr         * 0.3.4      2020-04-17 [1]
-##  R6              2.4.1      2019-11-12 [1]
-##  ranger          0.12.1     2020-01-10 [1]
-##  Rcpp            1.0.5      2020-07-06 [1]
-##  readr         * 1.3.1      2018-12-21 [1]
-##  readxl          1.3.1      2019-03-13 [1]
-##  recipes       * 0.1.13     2020-06-23 [1]
-##  repr            1.1.0      2020-01-28 [1]
-##  reprex          0.3.0      2019-05-16 [1]
-##  reshape2        1.4.3      2017-12-11 [1]
-##  rlang           0.4.8      2020-10-08 [1]
-##  rmarkdown       2.5        2020-10-21 [1]
-##  rpart           4.1-15     2019-04-12 [1]
-##  rsample       * 0.0.7      2020-06-04 [1]
-##  rsconnect       0.8.16     2019-12-13 [1]
-##  rstan           2.19.3     2020-02-11 [1]
-##  rstanarm        2.19.2     2019-10-03 [1]
-##  rstantools      2.0.0      2019-09-15 [1]
-##  rstudioapi      0.11       2020-02-07 [1]
-##  rvest           0.3.5      2019-11-08 [1]
-##  scales        * 1.1.1      2020-05-11 [1]
-##  sessioninfo     1.1.1      2018-11-05 [1]
-##  shiny           1.5.0      2020-06-23 [1]
-##  shinyjs         1.1        2020-01-13 [1]
-##  shinystan       2.5.0      2018-05-01 [1]
-##  shinythemes     1.1.2      2018-11-06 [1]
-##  skimr         * 2.1.1      2020-04-16 [1]
-##  SnowballC       0.6.0      2019-01-15 [1]
-##  StanHeaders     2.21.0-1   2020-01-19 [1]
-##  stringi         1.5.3      2020-09-09 [1]
-##  stringr       * 1.4.0      2019-02-10 [1]
-##  survival        3.1-8      2019-12-03 [2]
-##  TeachingDemos   2.12       2020-04-07 [1]
-##  threejs         0.3.3      2020-01-21 [1]
-##  tibble        * 3.0.4      2020-10-12 [1]
-##  tidymodels    * 0.1.0      2020-02-16 [1]
-##  tidyposterior   0.0.2      2018-11-15 [1]
-##  tidypredict     0.4.5      2020-02-10 [1]
-##  tidyr         * 1.1.0      2020-05-20 [1]
-##  tidyselect      1.1.0      2020-05-11 [1]
-##  tidytext        0.2.3      2020-03-04 [1]
-##  tidyverse     * 1.3.0      2019-11-21 [1]
-##  timeDate        3043.102   2018-02-21 [1]
-##  tokenizers      0.2.1      2018-03-29 [1]
-##  tune          * 0.1.1.9000 2020-07-23 [1]
-##  vctrs           0.3.4      2020-08-29 [1]
-##  withr           2.3.0      2020-09-22 [1]
-##  workflows     * 0.1.2.9000 2020-07-23 [1]
-##  xfun            0.18       2020-09-29 [1]
-##  xgboost       * 0.90.0.2   2019-08-01 [1]
-##  xml2            1.2.2      2019-08-09 [1]
-##  xtable          1.8-4      2019-04-21 [1]
-##  xts             0.12-0     2020-01-19 [1]
-##  yaml            2.2.1      2020-02-01 [1]
-##  yardstick     * 0.0.7      2020-07-13 [1]
-##  zoo             1.8-7      2020-01-10 [1]
-##  source                               
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  Github (tidymodels/dials@fbea0c2)    
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  Github (tidymodels/parsnip@de6e9cd)  
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  Github (tidymodels/tune@8c280fd)     
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.2)                       
-##  Github (tidymodels/workflows@d4cbe41)
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.0)                       
-##  CRAN (R 3.6.2)                       
-##  CRAN (R 3.6.0)                       
-## 
-## [1] /Users/bcullen/Library/R/3.6/library
-## [2] /Library/Frameworks/R.framework/Versions/3.6/Resources/library
-
-
diff --git a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.html b/content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.html deleted file mode 100644 index 1697aae..0000000 --- a/content/post/2020-09-03-reflections-on-rstudio-instructor-training/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Reflections on RStudio Instructor Training -author: Brendan Cullen -date: '2020-09-03' -slug: [] -categories: [] -tags: - - data science - - education - - R -subtitle: 'tl;dr You should definitely look into it.' -summary: "The 'what' and 'why' of RStudio Instructor Training and resources for those interested in pursuing it." -authors: [] -lastmod: '2020-09-03T21:28:31-07:00' -featured: no -image: - caption: 'Photo by oatawa on iStock' - focal_point: '' - preview_only: no -projects: [] -output: - blogdown::html_page: - toc: TRUE - toc_depth: 4 ---- - - - - - - - - -

A while back I wrote about how we need more data science training as grad students in psychology and that one of the best ways for us to get this training is to learn from each other. This is just one of many reasons why I’m so humbled and excited to have recently become an RStudio Certified Instructor in the tidyverse.

-

I’m looking forward to start implementing and sharing what I learned with my fellow grad students, especially at the end of this month when I will be leading an introductory R workshop for the new cohort of first year PhD and master’s students in my department.

-

As a small way of paying it forward, I wanted to offer a reflection on what I think makes this training so unique and worthwhile along with a summary of what’s involved and some resources for those who might be interested in knowing more.

-
-
-

The what

-
-


The best place the start is to read about the RStudio Instructor Training and Certification Program here. The RStudio Education Blog also has lots of helpful posts about the program.

-
-

The process boils down to three steps.

-
-

Training Course

-

The first step is to sign up for the training course, which will likely be held over Zoom and chunked into 3-4 hour segments across 2-3 days. You can access the training materials here.

-

The training course is an interactive introduction to applying evidence-based teaching methods to data science education, such as learner personas, concept maps, and formative assessment (i.e. short, diagnostic questions or exercises to figure out if learners are forming accurate mental models). The course also covers how to design teaching materials with reverse instructional design that takes into account cognitive load, multiple learning strategies, and issues of inclusivity and student motivation in the classroom.

-


-
-
-

Technical Exam

-

The technical exam assesses your proficiency in whatever topic for which you are attempting to become a certified instructor. Currently there are options to become a certified instructor in tidyverse and shiny, and each has its own accompanying technical exam.

-

I took the tidyverse exam, which, broadly speaking, consists of a series of live coding challenges related to using core tidyverse packages for data cleaning and wrangling, data visualization, string manipulation, functional programming, basic statistical modeling, and creating reproducible documents with R Markdown.

-

As many others have suggested, a great way to prepare for this exam is to work through the exercises R for Data Science, particularly for topics that feel rusty to you, and review the community-contributed solutions.

-
-

I highly recommend going through these sample exams from the RStudio Education Blog start to finish to get a sense of what you might need to review.

- -
-


-
-
-

Teaching Exam

-

The first certification exam assesses pedagogical skills related to teaching data science with R and requires giving a 15-minute demonstration lesson on a topic of your choice followed by a series of applied questions, which will likely involve creating formative assessments on unseen material (e.g. multiple choice questions and fill-in-the-blank coding exercises), developing concept maps on data science topics and giving feedback on example teaching based on pedagogical theory.

-
-

There are also sample teaching exams available.

- -
-
-

Demonstration Lesson: Example

-

Column-wise operations with dplyr: Old and New

-

If you’d like to see an example of a demonstration lesson, below are the materials I created for this portion of the teaching exam. I used penguins from the {palmerpenguins} package as an example data set. (why? because penguins 🐧 🐧 🐧).

-
-


You can find all of the materials for this lesson and the accompanying code on Github. Feel free to share, adapt and re-use for your own teaching.

-
-
-

Slides

-

I made heavy use of Yihui Xie’s {xaringan} 📦, Garrick Aden-Buie’s {xaringanExtra} 📦, and Kelly Bodwin’s {flair} 📦, along with Allison Horst’s unbeatable artwork. For an excellent {xaringan} tutorial, I recommend you check out these slides, from the R Markdown whisperer herself, Alison Hill. Note: you absolutely do not have to use {xaringan} to make your slides, and if your lesson includes more images than code, another method for delivering your slides might be better.

-
- - -
-

Full slides available here.

-
-


❖ ❖ ❖

-
-
-
-

Concept Map

-

-

For other community-contributed data science concept maps you can use in your teaching and/or lesson prep, see here.

-
-


❖ ❖ ❖

-
-
-
-

Learner Persona

-

-

For a list of other example learner personas, see here.

-
-


❖ ❖ ❖

-
-
-
-

Formative Assessment

-

I created these interactive exercises using the learnr package, which I highly recommend you check out. It’s quite powerful and versatile.

-

Here’s a quick look.

- -
-
-
-
-
-
-

The why

-

Ok, this might all seem like quite a bit of time and effort. Why go to the trouble of doing this training? In a word, Greg Wilson.

-

Greg, who co-founded the Software Carpentry, has over 35 years of experience in education in data science and software engineering, and it shows. He is now part of the RStudio Education team, where he runs the the instructor training and certification program. One of the reasons this program stands out is that it benefits from Greg’s unique expertise and careful curation of decades of research on evidence-based teaching methods that he has translated into clear and actionable advice. I can guarantee that you will learn a LOT from him.

-

Greg’s most important advice for teaching, in my opinion:

-
-

“Be kind: all else is details.”

-
-

Now, here are some other reasons why you should do this training…

-
-

Surge in online teaching

-

Interest in data science education seems to be ever-increasing. The fact that COVID-19 has forced most education to go online might actually present an opportunity to meet this demand in a more scalable and (hopefully more accessible way that doesn’t incur the traditional limitations of travel costs or room capacity. Of course, online education comes with a host of inherent challenges. The training course includes a whole section on this. I also recommend you check out this RStudio webinar and accompanying blog post along with answers to some frequently asked questions about teaching online.

-

As online data science education is becoming increasingly the norm, it seems natural to assume that there will be a need for more certified instructors to meet the growing demand.

-
-


❖ ❖ ❖

-
-
-
-

Teaching resources galore

-

Another great reason to become a certified instructor is that, as a data science educator, you have a huge and ever-increasing bank of resources at your disposal. What’s more, as a certified instructor, you are eligible for free licenses to RStudio Pro products and a significant discount for RStudio Cloud. Here are just some of the great teaching tools from RStudio and the #rstats community.

-
-


The RStudio Education Blog is a 💎 TREASURE TROVE 💎 of resources. Add it to your bookmarks immediately.

-
-

Teaching with RStudio Cloud

- -

Interactive lessons with learnr

- -

Openly licensed teaching materials

- -

rstudio4edu

- -
-


❖ ❖ ❖

-
-
-
-

Tried and tested

-

The instructor training program started back in February 2019 and as of August 2020 there are almost 150 certified tidyverse instructors and 20 shiny instructors. This means that the program has gone through multiple iterations and has made data-driven improvements based on feedback from participants – especially in the realm of supporting online teaching in the aftermath of COVID-19. So you can rest assured that, while it is still a relatively new program, all the kinks have been worked out.

-

Plus, I’m sure that the content and structure of the training will continue to adapt to the needs and priorities of the community, and you might even be lucky enough to catch a special guest presentation. For example…

-
- - -
-
-


❖ ❖ ❖

-
-
-
-

A focus on inclusivity

-

The focus of this training is not technical competency – it’s how be an effective teacher. One of the most critical components of teaching effectively is to be inclusive of all learners, regardless of race, religion, sexual orientation, gender identity, disability, etc.

-

The #rstats learning community is known for being welcoming and inclusive, so it’s no surprise that the training course emphasizes these values as well. What I appreciate most about this aspect of the training is that it will challenge you to think about questions and hypothetical scenarios to which there are no easy answers.

-

However, it is extremely important to be pushed out of your comfort zone to consciously and proactively reflect on how you will confront issues such as systemic racism and institutionalized violence against BIPOC communities, sexism and a deeply ingrained culture of sexual harassment. These issues will inevitably arise in one form or another in your classroom or teaching setting, and it’s absolutely necessary that we confront these challenges now more than ever. Check out this slide and this talk on effective allyship when you get a chance.

-
-


For further reading on inclusivity and social justice in data science education, I recommend you read this post by Nicole Thompson Gonzalez and this one by Yim Register. Also check out the amazing work that JooYoung Seo, the first blind RStudio Certified Instructor, has been doing to make data science tools more accessible.

-
-

Another exciting feature is that the training materials are now available in Spanish, courtesy of Laura Acion, and hopefully other languages soon, as interest in the training seems to be growing around the world. A similar ongoing project to check out is glosario, an open source glossary of data science terms translated in multiple languages that can be used for teaching (read more here).

-
-


❖ ❖ ❖

-
-
-
-

Community of practice

-

To extend the idea of including everyone who wants to learn data science, we must be active in building teaching communities that extend beyond just the walls of academic institutions.

-

RStudio’s mission is to

-
-

“equip everyone, regardless of means, to participate in a global economy that rewards data literacy.”

-
-

A more concrete goal, put forth by Carl Howe, Director of Education at RStudio, is to train the next million R users. In becoming an RStudio certified instructor, you can better position yourself to actively participate in reaching this goal. But it’s worth reflecting on the fact that teaching and learning doesn’t happen in a vacuum – this is where the idea of community comes in. In my opinion, the fact that R users around the world already have a strong sense of community will make it that much easier to welcome new learners into the fold and make it more likely that they themselves will start to train others one day.

-
-


Read more about building a community of practice here.

-
-
-

P.S. If you need yet another reason to do this training, you get a fancy certificate at the end. ✨

-

-
-
-
-
-

Get in touch

-

Please feel free to reach out if you are thinking of participating in the training yourself and want to hear more from someone who’s gone through it recently. I would be glad to chat any time!

-

-
diff --git a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.html b/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.html deleted file mode 100644 index 88f1b83..0000000 --- a/content/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.html +++ /dev/null @@ -1,480 +0,0 @@ ---- -title: "Flattening the leaRning curve: Teaching R online during COVID-19" -author: Brendan Cullen -date: '2020-10-19' -slug: [] -categories: [] -tags: - - data science - - education - - R -subtitle: '' -summary: 'Lessons learned from my first experience teaching an R bootcamp remotely & a collection of tools and resources I found useful' -authors: [] -lastmod: '2020-10-19T10:26:32-07:00' -featured: no -image: - caption: 'Photo by Martin Adams on Unsplash' - focal_point: '' - preview_only: no -projects: [] -disable_codefolding: false -codefolding_show: "hide" -codefolding_nobutton: false ---- - - - - - - - - - -

At this point, you’re probably familiar with the phrase “flatten the curve” — remember back in March when we were all talking about that? It was part of a critical public health messaging campaign aimed at slowing the spread of COVID-19 to prevent hospitals from becoming overwhelmed beyond their capacity. Based on how things are going, we really should still be talking about that. So allow me to unabashedly steal this catchphrase as a flawed metaphor for teaching and learning R during the era of this pandemic…

-

It’s no secret that R has a significant leaRning curve — and, while it seems that more people than ever are now wanting to learn R, almost everyone is having to do it in an online format of some kind. For those who are used to a traditional in-person classroom environment, having a first introduction to R in an online format might make the leaRning curve even steeper (as I said, a flawed metaphor – the concept of a “steep learning curve” is actually the opposite of what most people think, but we’ll run with it anyway). After recently teaching an introductory R Bootcamp online, I’ve spent a lot of time thinking about strategies to lower the learning threshold and make it easier to conquer any potential fear of learning R – to “flatten the leaRning curve”, as it were.

-
-

For anyone who might be new to teaching R, teaching online, or both, the goal of this post is to share some valuable lessons I learned and resources I used during this online teaching experience. I hope it may be of some benefit for your own teaching.

-
-
-

Background

-

Back in Fall 2018, the Department of Psychology at the University of Oregon started to offer a grad-student-led introductory R Bootcamp the week before the start of the new academic year. The bootcamp consists of three 3-4 hour sessions that take place over the course of a week. The idea behind the bootcamp is to give a first exposure to R to incoming students who have little to no background in it before being launched headfirst into using R to analyze data for their first year project and to complete labs and homework assignments for PSY611, the first in a series of graduate statistics courses taught entirely in R.

-

In addition, as I’ve written about previously, current grad students, along with other members of the psychology department, have expressed a keen interest in developing a stronger foundation in skills such as basic programming, data wrangling, and data visualization. So the bootcamp also serves as an opportunity for existing R users to get a refresher and deeper dive into those topics for those who want it.

-

After spending lot of time thinking about how to improve the data science learning experience for my fellow grad students and having recently become an RStudio Certified Instructor in the tidyverse, it was my great privilege to be able to put all of this into action by leading the 3rd Annual UO Psych Bootcamp this year. 🥳

-
-
-

The challenge

-

However, I found myself facing a rather significant challenge. The R Bootcamp, like many intro R workshops, usually occurs in-person in a large room with a giant projector screen, coffee and snacks, and, most importantly, the ability to run over and look over someone’s shoulder at their computer screen when they need help. Because of COVID-19, I needed to design and deliver a bootcamp for a large group of beginners (many using R for the very first time) entirely over a webcam.

-

Moreover, I assumed that student motivation would be at an all-time low and feelings of anxiety and uncertainty would be at an all-time high – especially for those about to start their graduate school journey entirely online, very much contrary to plan. There were a lot of horrible things going on in the world in September 2020, which marked 6 months into the COVID-19 pandemic in the U.S. – people’s loved ones were getting sick, the killing of innocent Black lives continued, a bitter presidential race reached full swing – not to mention devastating wildfires that raged all along the west coast. (Of course, while I wish I could actually write about these events in the past tense, all of these problems continue).

-

So, how do you get people excited about learning R amidst all of that? Needless to say, this felt a little daunting 😨. Fortunately, though, there are people out there who are experts in this sort of thing who have graciously shared their resources and advice, and this helped me immensely to run a successful bootcamp.

-
-
-

Who attended?

-

52 people registered for the bootcamp. While the majority of those who attended were incoming first-year psychology grad students, we also had a mix of more advanced grad students, undergrads, research assistants, lab managers, staff data analysts, and faculty members from a variety of departments/centers across the University, including the Departments of Psychology, Linguistics, Economics and the Center for Translational Neuroscience.

-
# import bootcamp registration data 
-registration <- read_csv("uopsych_bootcamp_registration_deidentified.csv")
-
-# clean data
-plot_data <- registration %>% 
-  janitor::clean_names() %>% 
-  select(position = what_is_your_position_at_uo,
-         experience = do_you_have_any_experience_in_r_no_experience_is_required) %>%
-  mutate(position = factor(case_when(position %in% c("Undergraduate", "Undergraduate student") ~ "Undergrad Student", 
-                                     position %in% c("RA", "Lab Manager", "Data Analyst") ~ "Research Staff",
-                              TRUE ~ as.character(position))),
-         experience = factor(experience, levels = c(
-           "I've never heard of it",
-           "I've heard of it but have never used it",
-           "I've opened it before",
-           "I've used it to analyze data",
-           "I use it often to analyze data")))
-
-# plot positions at UO
-theme_set(theme_minimal(base_size = 15)) 
-theme_update(legend.position = "none", 
-          plot.title.position = "plot",
-          panel.grid.minor.y = element_blank())
-
-plot_data %>% 
-  count(position) %>% 
-  ggplot(aes(fct_reorder(position, n), n, fill = position)) + 
-  geom_col() +
-  coord_flip() + 
-  scale_fill_manual(values = get_pal("Kotare")) + 
-  labs(x = "", y = "Count", title = "Participants' roles at University of Oregon")
-

-
# plot prior experience 
-plot_data %>% 
-  count(experience) %>% 
-  ggplot(aes(experience, n, fill = experience)) + 
-  geom_col() +
-  coord_flip() + 
-  scale_fill_manual(values = get_pal("Kaka"))  + 
-  labs(x = "", y = "Count", title = "Participants' prior experience with R")
-

-
-
-

Logistics

-
-

Zoom + Slack = 👌

-

We ran synchronous sessions live over Zoom. However, rather than use the Zoom chat for communicating with each other and asking questions, we used Slack. A few reasons for this:

-
    -
  1. this way people could continue to ask questions outside of the live sessions and a permanent and searchable record of questions and answers would be available for posterity

  2. -
  3. The Zoom chat can get easily cluttered and doesn’t easily allow you to make threads, which keep things more organized

  4. -
  5. Slack has better emojis 🤓.

  6. -
-

I was fortunate to have the very knowledgeable and talented Cameron Kay and Cianna Bedford-Petersen as teaching assistants. Cam and Cianna remained on deck throughout the sessions to answer questions on Slack while we went through the material. We also decided that if a student ran into technical issues or felt completely lost, then one of the TA’s would pull them into a breakout room on Zoom to offer one-on-one help.

-
-
-

RStudio Cloud

-

For “Your Turn” exercises, an idea I stole from Alison Hill’s excellent rstudio::conf(2020) workshop, we used RStudio Cloud, a hosted version of the RStudio IDE available in the web browser. We did this to avoid issues with students installing RStudio on their local machines, as troubleshooting technical issues over Zoom in a large group is not something we felt prepared for. Using RStudio Cloud also allowed me to configure specific IDE settings and pre-load specific packages to allow students to initially avoid technical issues. Lastly, sharing a workspace on RStudio Cloud allowed each student to save their own copy of the projects containing the Your Turn exercises, which in turn made it possible for myself or the TA’s to “peek” into a student’s exercises and help them figure out where their errors were coming from. Overall it went really smoothly, and everyone who filled out the feedback survey said they had no issues using it. I highly recommend using this for your teaching, even if it’s in-person.

-
-
-

Blogdown site

-

To make the bootcamp materials more accessible and shareable, I decided to package them into a website, which I created using the blogdown package (see more on this below). Organizing your teaching materials into a website has three clear advantages in my mind:

-
    -
  1. A website makes your materials easier to access and more shareable – you send someone a single link they can access on their phone or computer, no need to download anything

  2. -
  3. A website is highly sustainable in the sense that it’s easy for students to bookmark and refer back to over and over, and if you push changes to Github with continuous deployment (e.g. via Netlify), students will always have access to the most updated materials. This avoids having to introduce Github and version control, which is a whole other beast to teach to beginners.

  4. -
  5. Websites are pretty and highly customizble ✨

  6. -
-

🔗 uopsych-r-bootcamp-2020.netlify.app

- -
-
-
-

Tools I learned

-
-
-

xaringanExtra

-

📦 pkg.garrickadenbuie.com/xaringanExtra

-

Garrick Aden-Buie

-

{xaringanExtra} extends the functionality of the already amazing {xaringan} package by Yihuie Xie, and it has become one of my all-time favorite packages. Here are the features I use most often and highly recommend.

-

📖 Share again

-

-

📖 Panelset

-

-

📖 Tile view

-

-

📖 Extra styles

-

-

In case it still isn’t obvious enough how much I love this package…

- - -

Jump back up to see more tools ⤴️

-
-
-

flair

-

📦 r-for-educators.github.io/flair

-

Kelly Bodwin

-

{flair} allows you to spice up your code with color-coding and dynamic syntax highlighting. One of the most useful applications is to match colors to concepts – e.g. giving each argument of a function a unique color. I feel like I’ve only scratched the surface with {flair} and can’t wait to use it more in my teaching going forward.

-

Below is a demonstration of color-coding with flair to introduce dplyr::filter() and its arguments.

-
- - -
-

You can read more about other educational use cases for flair in this great post on the RStudio Education Blog.

-

Jump back up to see more tools ⤴️

-
-
-

flipbookr

-

📦 evamaerey.github.io/flipbooks/about

-

Gina Reynolds

-

{flipbookr} is an amazing teaching tool – it allows you to incrementally build up a plot line by line, which capitalizes on the “blink comparator” method. This means that students are able to easily map a specific change in code to a specific visual change in the corresponding plot output. Flipbooks are also great for demonstrating incremental changes in a data wrangling pipeline, and they’re relatively easy to make!

-

-

Jump back up to see more tools ⤴️

-
-
-

countdown

-

📦 pkg.garrickadenbuie.com/countdown

-

Garrick Aden-Buie

-

{coundown} is another great gem from Garrick and allows you to put timers directly on your slides. This is really useful for timed “Your Turn” exercises or to make sure you stay on track with Q & A sessions or breaks.

-

-

Jump back up to see more tools ⤴️

-
-
-
-
-

Resources I recommend

-
-

Sharing on short notice

-

Alison Hill, Desirée De Leon

-

A super helpful webinar on how best to share your teaching materials online.

- -
-
-

Teaching online on short notice

-

Greg Wilson

-

Concrete tips and advice on making the most of teaching via a webcam. There’s a ton of great stuff in here you wouldn’t necessarily think of, including important advice on making your teaching accessible and inclusive in an online format.

- -
-
-

Teaching R online with RStudio Cloud

-

Mine Çetinkaya-Rundel

-

A very thorough and easy to follow walk-through of using RStudio Cloud for teaching, highlighting its most useful features.

- -
-
-

Teaching the tidyverse in 2020

-

Mine Çetinkaya-Rundel

-

A series of blog posts describing a recommended order in which to teach tidyverse topics to beginners, including very recent tidyverse features that are useful for R users at all levels to learn

- -
-
-

Data science concept maps

-

A growing list of concept maps related to data science topics in R. Great for planning your lessons and/or sharing in your slides to summarize topics, no matter how seemingly simple or complex.

-

Community contributors, curated by Greg Wilson

- -
-
-

rstats artwork

-

Allison Horst

-

A collection of mind-blowing art that makes it 1000% more fun to learn R.

- -
-
-
-

The importance of encouragement & positivity

-

The leaRning curve is no secret. I hadn’t touched R before starting grad school in 2017, but I had heard whispers here and there that learning R is really difficult. But I think there’s an element of self-fulfilling prophecy here. If you expect it to be impossible, then it will feel impossible. I more or less started my journey with that expectation.

-

Things changed for me when I took my first course with Daniel Anderson. Daniel has developed a fantastic 5-course Data Science Specialization in Educational Leadership in the College of Education at the University of Oregon, taught entirely in R, which ranges from the very basics of R to advanced machine learning with tidymodels (see more info here). Daniel’s teaching completely changed the way I approached using and learning R, and it was largely on his recommendation that I joined #rstats Twitter (which was a game-changer). More importantly, Daniel modeled the kind of teacher I wanted to be – clear, thorough, thoughtful, and above all else, kind and inclusive of everyone.

-

It was very much with Daniel’s model in mind that I found inspiration for making learning R feel more inviting and less daunting. Here are a few things that came to mind that can be abstracted to some general advice…

-
-

Anticipate the challenge

-

Recognize the fact that learning R is hard. Don’t pretend it’s a walk in the park – it isn’t. But at the same time, emphasize that the investment of time it takes is worth it! And be sure to remind people of that more than once 😉.

-
- - -
-
-
-

Normalize errors & mistakes

-

The first time someone uses R, error messages are one of the first things that they’ll see. As we all know, this feels frustrating, especially as a beginner. So it makes sense to acknowledge that up front and discuss what error messages are and why they occur. As error messages go hand-in-hand with debugging, it’s also a good idea to at least introduce that concept as well, without necessarily going into great depth since that’s a whole other topic of it’s own. As debugging is commonly considered part of “what they forgot to teach you about R”, I’m sure I’m not alone in wishing that I had been introduced to debugging much earlier on in my R learning experience.

-

While learning a systematic approach to debugging is important down the line, it’s more important at first for beginners to understand that seeing lots of error messages at first is not a bad thing. It’s worth spending some effort to convince your students that error messages should not be cause for discouragement or giving up. Simply put, error messages are part and parcel of programming. Sometimes they take a matter of seconds to fix, sometimes a matter of weeks, but everyone who uses R will regularly encounter error messages, no matter your level of experience. And when it really comes down to it, every error message is an opportunity to learn something!

-
- - -
-


-

Taking this one step further, it’s a good idea to deliberately incorporate making mistakes into your own teaching and use error messages as a teachable moment. You can even use unintentional mistakes as teachable moments – demonstrate for your students how you fix the mistake and invite them to give their thoughts and feedback. This not only makes your presentation less rehearsed, but it provides a really valuable “real-world” context for learning.

-
-

This idea is referred to as “positive error framing” – and if you want to learn more about this topic in depth I recommend you check out this section from the recent article “Ten quick tips for teaching with participatory live coding” (really you should read the whole article – it’s packed full of great advice).

-
-
-
-

Make your materials friendly and inviting!

-

If your slides read like one long piece of dense help documentation, people are not going to feel inclined to engage with it. How do you make your materials more inviting and approachable?

-

One of the most powerful tools out there, in my opinion, is the incredible artwork by Allison Horst, RStudio’s first artist-in-residence (see more above). The bigger picture behind the artwork, in Allison’s words:

-
-

“All of it is towards a goal of trying to make R, and data science in general, more approachable, welcoming, and engaging to diverse learners”.

-
-

-

Cute gifs never hurt either…

- - -
-
-
-

Feedback

-

I was really happy to see that people seemed to appreciate the positive learning atmosphere and, especially because this was only an introductory workshop, that this made them excited to learn more:

-
-

✍️ “I really appreciated the warm welcome/atmosphere the instructors set up- learning a new programming language can be frustrating, especially for a beginner, so I was really appreciative of the continuous encouragement throughout the bootcamp.”

-
-

✍️ “I really enjoyed how supportive and encouraging the facilitators were. I understood learning R was no easy endeavor but hearing about their experiences was encouraging for me. Also, I greatly appreciate all the amazing resources they have compiled for future use. I definitely plan to continue looking into it!”

-
-

✍️ “I appreciated the facilitators’ organization, support, encouragement, and instructional clarity. Thank you for providing this very warm and accessible introduction for an absolute first-time novice! It’s encouraged me to take more steps into learning R.”

-
-

✍️ “I am now in my third year of struggling through R and this was the first presentation of material that really clicked for me. I frequently refer to the dplyr and ggplot presentations in my work and will continue to work my way through these exercises until I am truly fluent in these basics. THANK YOU”

-
-

So we did we flatten the leaRning curve? Only time will tell. But the most gratifying feedback, in my opinion, is that people who attended felt inspired to keep learning and continue riding the R roller coaster. That’s really the best outcome I could have hoped for!

-

-
-
-

A final thought

-

In short, no matter how long someone has been using R, it never hurts to remind them (yourself included) that a little time and effort can go a long way.

-
- -
-
-
-

Acknowledgements

-

I owe a huge debt of gratitude to all the people who were instrumental in my initial experience of learning R: Daniel Anderson, Dani Cosme, Krista DeStasio, Cory Costello, Jessica Kosie, and Sara Weston, to name only a few.

-

Thanks again to Cameron Kay and Cianna Bedford-Petersen for being such awesome TA’s for the R Bootcamp.

-

I also wouldn’t know half of what I know about learning and teaching R if it weren’t for the RStudio Education team – in particular, Alison Hill, Greg Wilson, Desirée De Leon, Mine Çetinkaya-Rundel, and Garrett Grolemund.

-

Artwork included in this post is by Allison Horst.

-
-

Session Info

-
## ─ Session info ───────────────────────────────────────────────────────────────
-##  setting  value                       
-##  version  R version 3.6.2 (2019-12-12)
-##  os       macOS Catalina 10.15.6      
-##  system   x86_64, darwin15.6.0        
-##  ui       X11                         
-##  language (EN)                        
-##  collate  en_US.UTF-8                 
-##  ctype    en_US.UTF-8                 
-##  tz       America/Los_Angeles         
-##  date     2020-11-01                  
-## 
-## ─ Packages ───────────────────────────────────────────────────────────────────
-##  package       * version    date       lib
-##  assertthat      0.2.1      2019-03-21 [1]
-##  backports       1.1.10     2020-09-15 [1]
-##  blogdown        0.17       2019-11-13 [1]
-##  bookdown        0.21       2020-10-13 [1]
-##  broom           0.5.5      2020-02-29 [1]
-##  cellranger      1.1.0      2016-07-27 [1]
-##  cli             2.1.0      2020-10-12 [1]
-##  colorspace      1.4-1      2019-03-18 [1]
-##  crayon          1.3.4      2017-09-16 [1]
-##  DBI             1.1.0      2019-12-15 [1]
-##  dbplyr          1.4.2      2019-06-17 [1]
-##  digest          0.6.27     2020-10-24 [1]
-##  dplyr         * 1.0.2      2020-08-18 [1]
-##  ellipsis        0.3.1      2020-05-15 [1]
-##  emo             0.0.0.9000 2020-08-26 [1]
-##  evaluate        0.14       2019-05-28 [1]
-##  fansi           0.4.1      2020-01-08 [1]
-##  farver          2.0.3      2020-01-16 [1]
-##  forcats       * 0.4.0      2019-02-17 [1]
-##  fs              1.3.1      2019-05-06 [1]
-##  generics        0.0.2      2018-11-29 [1]
-##  ggplot2       * 3.3.2      2020-06-19 [1]
-##  glue            1.4.2      2020-08-27 [1]
-##  gtable          0.3.0      2019-03-25 [1]
-##  haven           2.2.0      2019-11-08 [1]
-##  highr           0.8        2019-03-20 [1]
-##  hms             0.5.3      2020-01-08 [1]
-##  htmltools       0.5.0      2020-06-16 [1]
-##  httr            1.4.2      2020-07-20 [1]
-##  janitor         1.2.1      2020-01-22 [1]
-##  jpeg            0.1-8.1    2019-10-24 [1]
-##  jsonlite        1.7.1      2020-09-07 [1]
-##  knitr           1.30       2020-09-22 [1]
-##  labeling        0.4.2      2020-10-20 [1]
-##  lattice         0.20-38    2018-11-04 [2]
-##  lifecycle       0.2.0      2020-03-06 [1]
-##  lubridate       1.7.9      2020-06-08 [1]
-##  magrittr        1.5        2014-11-22 [1]
-##  Manu          * 0.0.1      2020-10-20 [1]
-##  modelr          0.1.6      2020-02-22 [1]
-##  munsell         0.5.0      2018-06-12 [1]
-##  nlme            3.1-142    2019-11-07 [2]
-##  pillar          1.4.6      2020-07-10 [1]
-##  pkgconfig       2.0.3      2019-09-22 [1]
-##  png             0.1-7      2013-12-03 [1]
-##  purrr         * 0.3.4      2020-04-17 [1]
-##  R6              2.4.1      2019-11-12 [1]
-##  Rcpp            1.0.5      2020-07-06 [1]
-##  readr         * 1.3.1      2018-12-21 [1]
-##  readxl          1.3.1      2019-03-13 [1]
-##  reprex          0.3.0      2019-05-16 [1]
-##  rlang           0.4.8      2020-10-08 [1]
-##  rmarkdown       2.5        2020-10-21 [1]
-##  rstudioapi      0.11       2020-02-07 [1]
-##  rvest           0.3.5      2019-11-08 [1]
-##  scales          1.1.1      2020-05-11 [1]
-##  sessioninfo     1.1.1      2018-11-05 [1]
-##  snakecase       0.11.0     2019-05-25 [1]
-##  stringi         1.5.3      2020-09-09 [1]
-##  stringr       * 1.4.0      2019-02-10 [1]
-##  tibble        * 3.0.4      2020-10-12 [1]
-##  tidyr         * 1.1.0      2020-05-20 [1]
-##  tidyselect      1.1.0      2020-05-11 [1]
-##  tidyverse     * 1.3.0      2019-11-21 [1]
-##  vctrs           0.3.4      2020-08-29 [1]
-##  withr           2.3.0      2020-09-22 [1]
-##  xaringanExtra * 0.2.1      2020-08-23 [1]
-##  xfun            0.18       2020-09-29 [1]
-##  xml2            1.2.2      2019-08-09 [1]
-##  yaml            2.2.1      2020-02-01 [1]
-##  source                                  
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  Github (hadley/emo@3f03b11)             
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  Github (G-Thomson/Manu@c5aa932)         
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.2)                          
-##  Github (gadenbuie/xaringanExtra@f85b70a)
-##  CRAN (R 3.6.2)                          
-##  CRAN (R 3.6.0)                          
-##  CRAN (R 3.6.0)                          
-## 
-## [1] /Users/bcullen/Library/R/3.6/library
-## [2] /Library/Frameworks/R.framework/Versions/3.6/Resources/library
-
-
diff --git a/content/post/_index.md b/content/post/_index.md deleted file mode 100644 index e92d4a0..0000000 --- a/content/post/_index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -header: - caption: "" - image: "" -title: Posts -view: 2 ---- - -
\ No newline at end of file diff --git a/content/project/_index.md b/content/project/_index.md new file mode 100644 index 0000000..c7e1d06 --- /dev/null +++ b/content/project/_index.md @@ -0,0 +1,35 @@ +--- +title: Projects +description: "" +author: "" +show_post_thumbnail: true +show_author_byline: false +show_post_date: false +# for listing page layout +layout: list-grid # list, list-sidebar, list-grid + +# for list-sidebar layout +sidebar: + title: A Sidebar for Your Projects + description: | + Projects can be anything! + Check out the _index.md file in the /project folder + to edit this content. + author: "The R Markdown Team @RStudio" + text_link_label: "" + text_link_url: "" + show_sidebar_adunit: false # show ad container + +# set up common front matter for all individual pages inside project/ +cascade: + show_author_byline: false + show_post_date: false + show_comments: false # see site config to choose Disqus or Utterances + # for single-sidebar layout only + sidebar: + text_link_label: View all projects + text_link_url: /project/ + show_sidebar_adunit: true # show ad container +--- + +** No content for the project index. This file provides front matter for the blog including the layout and boolean options. ** diff --git a/content/project/data-science-specialization/eds_specialization.jpg b/content/project/data-science-specialization/eds_specialization.jpg new file mode 100644 index 0000000..f9c488c Binary files /dev/null and b/content/project/data-science-specialization/eds_specialization.jpg differ diff --git a/content/project/data-science-specialization/featured.png b/content/project/data-science-specialization/featured.png new file mode 100644 index 0000000..004ceb4 Binary files /dev/null and b/content/project/data-science-specialization/featured.png differ diff --git a/content/project/data-science-specialization/index.md b/content/project/data-science-specialization/index.md new file mode 100644 index 0000000..3b3fe60 --- /dev/null +++ b/content/project/data-science-specialization/index.md @@ -0,0 +1,48 @@ +--- +title: "Data Science Specialization in Educational Leadership" +summary: "A 5-course Data Science Specialization in Educational Leadership I completed at the University of Oregon." +date: 2021-11-11 +author: "" +draft: false +tags: +categories: +# layout options: single or single-sidebar +layout: single +links: +- icon: info-circle + icon_pack: fas + name: More info + url: https://education.uoregon.edu/specialization-educational-data-science +- icon: github + icon_pack: fab + name: Course repos + url: https://github.com/uo-datasci-specialization +--- + +As part of my graduate training at the University of Oregon, I completed a Data Science Specialization in Educational Leadership, taught by [Daniel Anderson](https://www.datalorax.com/). + +Here are a few samples of the projects I worked on: + +### Flexdashboard + +A flexdashboard that visualizes data from the Big Cities Health Inventory: +https://brendanhcullen.github.io/data-viz-dashboard/ + +### Shiny dashboard + +A shiny dashboard that visualizes k-means clustering: +https://kdestasio.shinyapps.io/fpr_final_project/ + +### R package + +An R package for interfacing with data from the Devaluation study in UO SAN Lab: +https://uosan.github.io/devaluation/ + +___ + +
+ +
+ + + diff --git a/content/project/data-viz-dashboard/featured.png b/content/project/data-viz-dashboard/featured.png deleted file mode 100644 index 8b6092d..0000000 Binary files a/content/project/data-viz-dashboard/featured.png and /dev/null differ diff --git a/content/project/data-viz-dashboard/index.md b/content/project/data-viz-dashboard/index.md deleted file mode 100644 index 887334f..0000000 --- a/content/project/data-viz-dashboard/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -date: "2020-04-24" -external_link: https://brendanhcullen.github.io/data-viz-dashboard/ -image: - caption: - focal_point: Smart -summary: A flexdashboard that visualizes data from the Big Cities Health Inventory. -tags: -- data viz -- R - -title: Data Vizualization Dashboard ---- - diff --git a/content/project/devaluation/featured.png b/content/project/devaluation/featured.png index e4f6cd7..0501204 100644 Binary files a/content/project/devaluation/featured.png and b/content/project/devaluation/featured.png differ diff --git a/content/project/devaluation/index.md b/content/project/devaluation/index.md index 8b82bc5..30f97bf 100644 --- a/content/project/devaluation/index.md +++ b/content/project/devaluation/index.md @@ -11,11 +11,19 @@ links: icon_pack: fas name: More info url: https://ctn.uoregon.edu/projects/healthy-eating-study - +- icon: r-project + icon_pack: fab + name: R package + url: https://uosan.github.io/devaluation/ tags: - neuroscience - health - machine learning --- -This project is a large-scale randomized-control trial that investigates the efficacy and mechanisms of a healthy eating invention. Specifically, the RCT compares a cognitive reappraisal training, in which participants change the way they think about unhealthy food, to a behavioral response training, in which participants modify their physical motor responses to food stimuli to train neural inhibitory control circuits. Currently, I am working on developing a precision medicine analysis pipeline around a series of additional measures that have been added to this parent R01 as part of the National Center for Biotechnology Information’s [ADOPT Project](https://www.nhlbi.nih.gov/science/adopt) (Accumulating Data to Optimally Predict Obesity Treatment). The ADOPT project aims to solve the precision medicine problem for obesity treatment by identifying core measures assessing a range of behavioral, biological, environmental, and psychosocial factors that contribute to obesity. My role in this project is to develop the analytical infrastructure to create and validate composites of low-cost, easily administered individual difference measures that moderate response to the healthy eating interventions in terms of both magnitude and timing. +
+ +
+
+ +This project is a large-scale randomized-control trial that investigates the efficacy and mechanisms of a healthy eating invention. Specifically, the RCT compares a cognitive reappraisal training, in which participants change the way they think about unhealthy food, to a behavioral response training, in which participants modify their physical motor responses to food stimuli to train neural inhibitory control circuits. I helped co-design the cognitive reappraisal intervention, and created an automated workflow for daily backup of fMRI data via a high performance computing cluster. \ No newline at end of file diff --git a/content/project/devaluation/logo.png b/content/project/devaluation/logo.png new file mode 100644 index 0000000..e4f6cd7 Binary files /dev/null and b/content/project/devaluation/logo.png differ diff --git a/content/project/first-year-project/featured.png b/content/project/first-year-project/featured.png index 38eebf3..f88a8d5 100644 Binary files a/content/project/first-year-project/featured.png and b/content/project/first-year-project/featured.png differ diff --git a/content/project/first-year-project/index.md b/content/project/first-year-project/index.md index abc64ba..c66c0ec 100644 --- a/content/project/first-year-project/index.md +++ b/content/project/first-year-project/index.md @@ -10,11 +10,11 @@ links: - icon: file-pdf icon_pack: fas name: Pre-print - url: preprint.pdf + url: project/first-year-project/preprint.pdf - icon: image icon_pack: fas name: Poster - url: poster.pdf + url: project/first-year-project/poster.pdf - icon: link icon_pack: fa name: Pre-registration @@ -25,7 +25,6 @@ tags: - health - R --- +![](pattern_expression.png) Health-risking behaviors (HRBs), e.g., excessive consumption of alcohol, tobacco, drugs and energy-dense food, contribute to long-term health problems, particularly among individuals who experienced early life adversity (EA). Though traditional executive control tasks are commonly assumed to be relevant for predicting real-world HRBs, recent work has called into question the ecological and predictive validity of these tasks. This study explores the predictive validity of cognitive and affective neural measures derived from a more passive cue reactivity task in a community sample of adults with self-control problems and a history of early adversity. We extracted trial-level estimates of whole-brain expression of canonical “inhibitory control” and “craving” patterns while participants viewed images of personally relevant health-risking substances during the cue reactivity task. Statistical modeling showed that greater trial-level expression of the “craving” and “inhibitory control” patterns predicted higher and lower desire ratings, respectively, for cue reactivity stimuli. However, only “craving” pattern expression predicted measures of real-world craving in daily life. Taken together, these results suggest that, among individuals with self-control problems, the real-world predictive validity of passive neural measures of affective processes may be superior to that of neural measures of executive control. - ->For more details, see the [pre-print](preprint.pdf) and [poster](poster.pdf). \ No newline at end of file diff --git a/content/project/first-year-project/pattern_expression.png b/content/project/first-year-project/pattern_expression.png new file mode 100644 index 0000000..0d360d2 Binary files /dev/null and b/content/project/first-year-project/pattern_expression.png differ diff --git a/content/project/k-means-clustering-dashboard/featured.png b/content/project/k-means-clustering-dashboard/featured.png deleted file mode 100644 index 183d0f9..0000000 Binary files a/content/project/k-means-clustering-dashboard/featured.png and /dev/null differ diff --git a/content/project/k-means-clustering-dashboard/index.md b/content/project/k-means-clustering-dashboard/index.md deleted file mode 100644 index df6e883..0000000 --- a/content/project/k-means-clustering-dashboard/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -date: "2020-03-26" -external_link: https://kdestasio.shinyapps.io/fpr_final_project/ -image: - caption: - focal_point: Smart -summary: A shiny dashboard that visualizes k-means clustering -tags: -- data viz -- R - -title: K-means Clustering Shiny Dashboard ---- - diff --git a/content/project/personality-diabetes/featured.jpg b/content/project/personality-diabetes/featured.jpg deleted file mode 100644 index 7a61723..0000000 Binary files a/content/project/personality-diabetes/featured.jpg and /dev/null differ diff --git a/content/project/personality-diabetes/featured.png b/content/project/personality-diabetes/featured.png new file mode 100644 index 0000000..a4830ae Binary files /dev/null and b/content/project/personality-diabetes/featured.png differ diff --git a/content/project/personality-diabetes/index.md b/content/project/personality-diabetes/index.md index caee6fd..6fbf1a6 100644 --- a/content/project/personality-diabetes/index.md +++ b/content/project/personality-diabetes/index.md @@ -1,6 +1,6 @@ --- title: Predicting diabetes status from personality -summary: A machine learning project +summary: A machine learning project exploring the relationship between diabetes and personality abstract: "" date: "2020-04-24T00:00:00Z" image: @@ -15,11 +15,16 @@ links: icon_pack: fas name: Pre-registration url: https://osf.io/nqs8e/ - +- icon: info-circle + icon_pack: fas + name: SAPA Project + url: https://www.sapa-project.org/ + tags: - machine learning - health - R --- +![](model_performance.png) Prior research suggests that diabetes is both a cause and consequence of various health behaviors and thus has complex links to personality. This study investigates the utility of personality in predicting diabetes status (Type 1, Type 2 or none) using a subset of items from the Synthetic Aperture Personality Assessment (SAPA) Project (N ≈ 645,000). We estimate the classification accuracy of various personality measures, including low- and high-dimensional data, using supervised machine learning techniques, e.g. random forests, support vector machines and neural networks. Results are compared across machine learning models and dimensionality of personality predictors. This project involves the automated generation of executable R scripts using non-standard evaluation within a tidyverse framework, allowing for parallel processing on high-performance computing clusters. This analysis informs the extent to which personality measurement could be applied in clinical contexts related to diabetes. \ No newline at end of file diff --git a/content/project/personality-diabetes/model_performance.png b/content/project/personality-diabetes/model_performance.png new file mode 100644 index 0000000..09bc0f8 Binary files /dev/null and b/content/project/personality-diabetes/model_performance.png differ diff --git a/content/project/rstudio-instructor-certification/certificate.jpeg b/content/project/rstudio-instructor-certification/certificate.jpeg new file mode 100644 index 0000000..b345a83 Binary files /dev/null and b/content/project/rstudio-instructor-certification/certificate.jpeg differ diff --git a/content/project/rstudio-instructor-certification/featured.jpg b/content/project/rstudio-instructor-certification/featured.jpg deleted file mode 100644 index 25492b4..0000000 Binary files a/content/project/rstudio-instructor-certification/featured.jpg and /dev/null differ diff --git a/content/project/rstudio-instructor-certification/featured.png b/content/project/rstudio-instructor-certification/featured.png new file mode 100644 index 0000000..c53fe7c Binary files /dev/null and b/content/project/rstudio-instructor-certification/featured.png differ diff --git a/content/project/rstudio-instructor-certification/index.md b/content/project/rstudio-instructor-certification/index.md index abef6e0..ee6a093 100644 --- a/content/project/rstudio-instructor-certification/index.md +++ b/content/project/rstudio-instructor-certification/index.md @@ -7,24 +7,29 @@ image: caption: focal_point: Smart links: -- icon: address-card +- icon: book icon_pack: fas - name: Trainer Directory - url: https://education.rstudio.com/trainers/people/cullen+brendan/ + name: Blog post + url: /post/2020-09-03-reflections-on-rstudio-instructor-training/index.html - icon: github icon_pack: fab - name: Demonstration Lesson Repo + name: Demo Lesson Repo url: https://github.com/brendanhcullen/rstudio-instructor-certification -- icon: book +- icon: file-code icon_pack: fas - name: Blog post - url: /post/2020-09-03-reflections-on-rstudio-instructor-training/index.html + name: Sample exam solutions + url: https://tidyverse-exam-v2-solutions.netlify.app/ +- icon: address-card + icon_pack: fas + name: Trainer Directory + url: https://education.rstudio.com/trainers/people/cullen+brendan/ tags: - R - education --- +![](certificate.jpeg) I recently went through RStudio's [Instructor Training and Certification Program](https://education.rstudio.com/trainers/), and I am now an RStudio Certified Instructor in the [tidyverse](https://www.tidyverse.org/). You can read more details in the links above. -If you'd like to hire me to lead a workshop or training for your group, please don't hesitate to [reach out](mailto:bcullen@uoregon.edu). I would love to hear from you! \ No newline at end of file +If you'd like to hire me to lead a workshop or training for your group, please don't hesitate to [reach out](mailto:bcullen@uoregon.edu). I would love to hear from you! diff --git a/content/project/tidyverse-sample-exam-solutions/featured.png b/content/project/tidyverse-sample-exam-solutions/featured.png deleted file mode 100644 index 0942b2a..0000000 Binary files a/content/project/tidyverse-sample-exam-solutions/featured.png and /dev/null differ diff --git a/content/project/tidyverse-sample-exam-solutions/index.md b/content/project/tidyverse-sample-exam-solutions/index.md deleted file mode 100644 index 4431e8d..0000000 --- a/content/project/tidyverse-sample-exam-solutions/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -date: "2020-09-10" -external_link: https://tidyverse-exam-v2-solutions.netlify.app/ -image: - caption: - focal_point: Smart -summary: A solution guide to the sample tidyverse exam v2.0 for the RStudio Instructor Training and Certification Program. -tags: -- R -- education - -title: Tidyverse Sample Exam 2.0 Solutions ---- - diff --git a/content/project/uopsych-r-bootcamp/featured.jpg b/content/project/uopsych-r-bootcamp/featured.jpg index fbc8e97..854bb1a 100644 Binary files a/content/project/uopsych-r-bootcamp/featured.jpg and b/content/project/uopsych-r-bootcamp/featured.jpg differ diff --git a/content/project/uopsych-r-bootcamp/index.md b/content/project/uopsych-r-bootcamp/index.md index 698348b..527c973 100644 --- a/content/project/uopsych-r-bootcamp/index.md +++ b/content/project/uopsych-r-bootcamp/index.md @@ -1,5 +1,5 @@ --- -title: UO Psych R Bootcamp 2020 +title: UO Psych R Bootcamp summary: Materials from a 3-day bootcamp that introduces new learners to R, RStudio and the tidyverse. abstract: "" date: "2020-10-06T00:00:00Z" @@ -9,11 +9,19 @@ image: links: - icon: link icon_pack: fas - name: Bootcamp Website + name: 2021 Bootcamp Website + url: https://uopsych-r-bootcamp-2021.netlify.app/ +- icon: github + icon_pack: fab + name: 2021 Github Repo + url: https://github.com/uopsych/summeR-bootcamp-2021 +- icon: link + icon_pack: fas + name: 2020 Bootcamp Website url: https://uopsych-r-bootcamp-2020.netlify.app/ - icon: github icon_pack: fab - name: Github Repo + name: 2020 Github Repo url: https://github.com/uopsych/summeR-bootcamp-2020 - icon: book icon_pack: fas @@ -25,30 +33,38 @@ tags: - education --- -I organized and taught a 3-day introductory R Bootcamp for my fellow ducks in the Department of Psychology at the University of Oregon in September 2020. We had we had a fantastic mix of participants, including incoming PhD and master's students, current grad students, undergrads, research staff, and faculty, with over 40 people attending each day. Thanks so much to everyone who participated! :duck: +I organized and taught a 3-day introductory R Bootcamp for the Department of Psychology at the University of Oregon. We had we had a fantastic mix of participants, including incoming PhD and master's students, current grad students, undergrads, research staff, and faculty. Thanks so much to everyone who participated! + +The materials have been designed such that you should be able to work through the slides and exercises at your own pace if you were not able to attend the bootcamp sessions. All materials are available on the bootcamp website: https://uopsych-r-bootcamp-2021.netlify.app/ -The materials have been designed such that you should be able to work through the slides and exercises at your own pace if you were not able to attend the bootcamp sessions. All materials are available on the bootcamp website: https://uopsych-r-bootcamp-2020.netlify.app/ +
+ +
*** This bootcamp gives a gentle introduction to R and RStudio, transforming and visualizing data with the tidyverse, and the basics of R Markdown. It assumes no prior experience with R or any other programming language and is designed to get learners up and running with the most widely useful tools for reproducible data analysis in R while emphasizing best practices for writing code and organizing project-oriented workflows. -It also contains a curated list of resources for each topic for those who want more opportunities for further learning and practice, as well as a collection of more generally useful [resources](https://uopsych-r-bootcamp-2020.netlify.app/resources/) for learning R. +It also contains a curated list of resources for each topic for those who want more opportunities for further learning and practice, as well as a collection of more generally useful [resources](https://uopsych-r-bootcamp-2021.netlify.app/resources/) for learning R. Specific topics include: -1. [Basics of R & RStudio](https://uopsych-r-bootcamp-2020.netlify.app/post/01-r-basics/) -2. [Data Types & Structures](https://uopsych-r-bootcamp-2020.netlify.app/post/02-data-types) -3. [Functions & Debugging](https://uopsych-r-bootcamp-2020.netlify.app/post/03-functions/) -4. [Introduction to the Tidyverse](https://uopsych-r-bootcamp-2020.netlify.app/post/04-intro-tidyverse/) -5. [Importing Data & Project-oriented Workflows](https://uopsych-r-bootcamp-2020.netlify.app/post/05-importing-workflows/) -6. [Data Visualization with {ggplot2}](https://uopsych-r-bootcamp-2020.netlify.app/post/06-ggplot2/) -7. [Data Wrangling with {dplyr}](https://uopsych-r-bootcamp-2020.netlify.app/post/07-dplyr/) -8. [Data Tidying with {tidyr}](https://uopsych-r-bootcamp-2020.netlify.app/post/08-tidyr/) -9. [Reproducible Reporting with R Markdown](https://uopsych-r-bootcamp-2020.netlify.app/post/09-rmarkdown/) +1. [Basics of R & RStudio](https://uopsych-r-bootcamp-2021.netlify.app/post/01-r-basics/) +2. [Data Types & Structures](https://uopsych-r-bootcamp-2021.netlify.app/post/02-data-types) +3. [Functions & Debugging](https://uopsych-r-bootcamp-2021.netlify.app/post/03-functions/) +4. [Introduction to the Tidyverse](https://uopsych-r-bootcamp-2021.netlify.app/post/04-intro-tidyverse/) +5. [Importing Data & Project-oriented Workflows](https://uopsych-r-bootcamp-2021.netlify.app/post/05-importing-workflows/) +6. [Data Visualization with ggplot2](https://uopsych-r-bootcamp-2021.netlify.app/post/06-ggplot2/) +7. [Data Wrangling with dplyr](https://uopsych-r-bootcamp-2021.netlify.app/post/07-dplyr/) +8. [Data Tidying with tidyr](https://uopsych-r-bootcamp-2021.netlify.app/post/08-tidyr/) +9. [Reproducible Reporting with R Markdown](https://uopsych-r-bootcamp-2021.netlify.app/post/09-rmarkdown/) *** -This work is [licensed](https://github.com/uopsych/summeR-bootcamp-2020/blob/master/LICENSE.md) under a Creative Commons Attribution 4.0 International License. Please feel free to share and/or adapt and re-use any of the [materials](https://github.com/uopsych/summeR-bootcamp-2020) for your own teaching! +This work is [licensed](https://github.com/uopsych/summeR-bootcamp-2021/blob/main/LICENSE.md) under a Creative Commons Attribution 4.0 International License. Please feel free to share and/or adapt and re-use any of the [materials](https://github.com/uopsych/summeR-bootcamp-2021) for your own teaching! -You can read more about the bootcamp in this [blog post](/post/2020-10-19-teaching-an-r-bootcamp-remotely/index.html). \ No newline at end of file +You can read more about the bootcamp in this [blog post](/blog/2020-10-19-teaching-an-r-bootcamp-remotely/). \ No newline at end of file diff --git a/content/project_landing/index.md b/content/project_landing/index.md deleted file mode 100644 index 218eb4a..0000000 --- a/content/project_landing/index.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "Projects" # Add a page title. -summary: "Hello!" # Add a page description. -date: "2019-01-01T00:00:00Z" # Add today's date. -type: "widget_page" # Page type is a Widget Page ---- \ No newline at end of file diff --git a/content/project_landing/projects.md b/content/project_landing/projects.md deleted file mode 100644 index 926f86d..0000000 --- a/content/project_landing/projects.md +++ /dev/null @@ -1,96 +0,0 @@ -+++ -# A Projects section created with the Portfolio widget. -widget = "portfolio" # See https://sourcethemes.com/academic/docs/page-builder/ -headless = true # This file represents a page section. -active = true # Activate this widget? true/false -weight = 65 # Order that this section will appear. - -title = "Projects" -subtitle = "An assortment of different projects I have worked on during my time in graduate school. Wherever possible, I have shared the code for each of these projects on [Github](https://github.com/brendanhcullen) -- any comments, pull requests, or feedback of any kind are more than welcome!" - - -[content] - # Page type to display. E.g. project. - page_type = "project" - - # Filter toolbar (optional). - # Add or remove as many filters (`[[content.filter_button]]` instances) as you like. - # To show all items, set `tag` to "*". - # To filter by a specific tag, set `tag` to an existing tag name. - # To remove toolbar, delete/comment all instances of `[[content.filter_button]]` below. - - # Default filter index (e.g. 0 corresponds to the first `[[filter_button]]` instance below). - filter_default = 0 - - [[content.filter_button]] - name = "All" - tag = "*" - - [[content.filter_button]] - name = "R" - tag = "R" - - [[content.filter_button]] - name = "education" - tag = "education" - - [[content.filter_button]] - name = "data viz" - tag = "data viz" - - [[content.filter_button]] - name = "neuroscience" - tag = "neuroscience" - - - [[content.filter_button]] - name = "health" - tag = "health" - - - [[content.filter_button]] - name = "machine learning" - tag = "machine learning" - -[design] - # Choose how many columns the section has. Valid values: 1 or 2. - columns = "2" - - # Toggle between the various page layout types. - # 1 = List - # 2 = Compact - # 3 = Card - # 5 = Showcase - view = 3 - - # For Showcase view, flip alternate rows? - flip_alt_rows = false - -[design.background] - # Apply a background color, gradient, or image. - # Uncomment (by removing `#`) an option to apply it. - # Choose a light or dark text color by setting `text_color_light`. - # Any HTML color name or Hex value is valid. - - # Background color. - # color = "navy" - - # Background gradient. - # gradient_start = "DeepSkyBlue" - # gradient_end = "SkyBlue" - - # Background image. - # image = "background.jpg" # Name of image in `static/img/`. - # image_darken = 0.6 # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque. - - # Text color (true=light or false=dark). - # text_color_light = true - -[advanced] - # Custom CSS. - css_style = "" - - # CSS class. - css_class = "" -+++ - diff --git a/content/talk/2020-wisely/featured.jpg b/content/talk/2020-wisely/featured.jpg new file mode 100644 index 0000000..82774f4 Binary files /dev/null and b/content/talk/2020-wisely/featured.jpg differ diff --git a/content/talk/2020-wisely/index.md b/content/talk/2020-wisely/index.md new file mode 100644 index 0000000..3019d31 --- /dev/null +++ b/content/talk/2020-wisely/index.md @@ -0,0 +1,43 @@ +--- +title: 'Using R more "wisely": Column-wise & row-wise operations with dplyr' +draft: false +event: 'R Ladies Algiers' +event_url: https://www.meetup.com/rladies-algiers/events/274647307/ +location: +summary: "Workshop for R-Ladies Algiers on column-wise and row-wise operations with dplyr for more efficient data wrangling and summarizing." + +# Talk start and end times. +# End time can optionally be hidden by prefixing the line with `#`. +date: "2020-11-24T09:30:00Z" +date_end: +all_day: false +publishdate: +categories: + - workshop +tags: + - dplyr +lastmod: +featured: no +image: + focal_point: 'center' + preview_only: no +projects: [] +links: +- icon: door-open + icon_pack: fas + name: slides + url: https://dplyr-wisely.netlify.app/ +- icon: github + icon_pack: fab + name: materials + url: https://github.com/brendanhcullen/wisely +--- + +
+ +
+ diff --git a/content/talk/_index.md b/content/talk/_index.md index ee3a735..49289a9 100644 --- a/content/talk/_index.md +++ b/content/talk/_index.md @@ -1,7 +1,25 @@ --- -header: - caption: "" - image: "" -title: Recent & Upcoming Talks -view: 2 +title: Talks & Workshops +description: +author: "Brendan Cullen" +show_post_thumbnail: true +thumbnail_left: false +show_author_byline: false +show_post_date: true +show_post_time: false +# for listing page layout +layout: list # list, list-sidebar + +# set up common front matter for all pages inside blog/ +cascade: + author: "Brendan Cullen" + show_author_byline: false + show_post_date: true + show_post_time: false + show_comments: false # see site config to choose Disqus or Utterances + # for single-sidebar layout + sidebar: + text_link_label: View recent events + text_link_url: /talk/ + show_sidebar_adunit: false # show ad container --- diff --git a/content/talk/example/featured.jpg b/content/talk/example/featured.jpg deleted file mode 100644 index 7b16c3c..0000000 Binary files a/content/talk/example/featured.jpg and /dev/null differ diff --git a/content/talk/example/index.md b/content/talk/example/index.md deleted file mode 100644 index 07c39d9..0000000 --- a/content/talk/example/index.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -abstract: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellusac - convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac - faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien - eu, pulvinar tempor diam. -address: - city: Stanford - country: United States - postcode: "94305" - region: CA - street: 450 Serra Mall -all_day: false -authors: [] -date: "2030-06-01T13:00:00Z" -date_end: "2030-06-01T15:00:00Z" -event: Academic Theme Conference -event_url: https://example.org -featured: false -image: - caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/bzdhc5b3Bxs)' - focal_point: Right -links: -- icon: twitter - icon_pack: fab - name: Follow - url: https://twitter.com/georgecushen -location: Source Themes HQ -math: true -projects: -- internal-project -publishDate: "2017-01-01T00:00:00Z" -slides: example -summary: An example talk using Academic's Markdown slides feature. -tags: [] -title: Example Talk -url_code: "" -url_pdf: "" -url_slides: "" -url_video: "" ---- - -{{% alert note %}} -Click on the **Slides** button above to view the built-in slides feature. -{{% /alert %}} - -Slides can be added in a few ways: - -- **Create** slides using Academic's [*Slides*](https://sourcethemes.com/academic/docs/managing-content/#create-slides) feature and link using `slides` parameter in the front matter of the talk file -- **Upload** an existing slide deck to `static/` and link using `url_slides` parameter in the front matter of the talk file -- **Embed** your slides (e.g. Google Slides) or presentation video on this page using [shortcodes](https://sourcethemes.com/academic/docs/writing-markdown-latex/). - -Further talk details can easily be added to this page using *Markdown* and $\rm \LaTeX$ math code. diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml new file mode 100644 index 0000000..3672f5a --- /dev/null +++ b/layouts/_default/rss.xml @@ -0,0 +1,47 @@ +{{- $pctx := . -}} +{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}} +{{- $pages := slice -}} + +{{- if $.IsHome -}} +{{- $pages = $pctx.RegularPages -}} + +{{- else if $.IsSection -}} +{{- $pages = .RegularPagesRecursive -}} + +{{- else -}} +{{- $pages = $pctx.Pages -}} +{{- end -}} + +{{- $limit := .Site.Config.Services.RSS.Limit -}} +{{- if ge $limit 1 -}} +{{- $pages = $pages | first $limit -}} +{{- end -}} +{{- printf "" | safeHTML }} + + + {{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }} + {{ .Permalink }} + Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }} + Hugo -- gohugo.io{{ with .Site.LanguageCode }} + {{.}}{{end}}{{ with .Site.Author.email }} + {{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}}{{ with .Site.Author.email }} + {{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}}{{ with .Site.Copyright }} + {{.}}{{end}}{{ if not .Date.IsZero }} + {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}{{ end }} + {{- with .OutputFormats.Get "RSS" -}} + {{ printf "" .Permalink .MediaType | safeHTML }} + {{- end -}} + {{ range $pages.ByDate.Reverse }} + + {{ .Title }} + {{ .Permalink }} + {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} + {{ with .Site.Author.email }}{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}{{end}} + {{ .Permalink }} + {{ .Content | html }} + + {{ end }} + + + + diff --git a/layouts/blog/single-sidebar.html b/layouts/blog/single-sidebar.html new file mode 100644 index 0000000..4dda3f8 --- /dev/null +++ b/layouts/blog/single-sidebar.html @@ -0,0 +1,35 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} + {{ if .Params.links }} +
+ {{ partial "shared/btn-links.html" . }} +
+ {{ end }} +
+
+ {{ .Content }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+ +{{ end }} diff --git a/layouts/partials/shared/event-details.html b/layouts/partials/shared/event-details.html new file mode 100644 index 0000000..c7ba1e4 --- /dev/null +++ b/layouts/partials/shared/event-details.html @@ -0,0 +1,43 @@ +
+ {{ with .Params.excerpt }} +
+

Abstract

+
+
+

{{ . }}

+
+ {{ end }} + {{ if .Date }} +
+

Date

+
+
+

{{ partial "shared/date-range.html" . }}

+
+
+

Time

+
+
+

{{ partial "shared/time-range.html" . }}

+
+ {{ end }} + {{ with .Params.location }} +
+

Location

+
+
+

{{ . }}

+
+ {{ end }} + {{ if .Params.event }} +
+

Event

+
+
+

+ {{ with .Params.event_url }}{{ end }} + {{ .Params.event }}{{ if .Params.event_url }}{{ end }} +

+
+ {{ end }} +
diff --git a/layouts/partials/shared/post-details.html b/layouts/partials/shared/post-details.html new file mode 100644 index 0000000..66feb37 --- /dev/null +++ b/layouts/partials/shared/post-details.html @@ -0,0 +1,35 @@ + +
+
+
Posted on:
+
{{ .PublishDate.Format "January 2, 2006" }}
+
+
+
Length:
+
{{ .ReadingTime }} minute read, {{ .WordCount }} words
+
+ {{ with .Params.categories }} +
+
Categories:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} + {{ with .Params.series }} +
+
Series:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} + {{ with .Params.tags }} +
+
Tags:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} +
+
See Also:
+ {{ range first 3 ( where ( where .Site.Pages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags ) "Permalink" "!=" .Permalink ) }} +
{{ .Title }}
+ {{ end }} +
+
diff --git a/layouts/partials/shared/post-pagination.html b/layouts/partials/shared/post-pagination.html new file mode 100644 index 0000000..166de0c --- /dev/null +++ b/layouts/partials/shared/post-pagination.html @@ -0,0 +1,10 @@ +
+ {{ with .NextInSection }} + + {{ end }} + {{ with .PrevInSection }} + + {{ end }} +
diff --git a/layouts/partials/shared/post-toc.html b/layouts/partials/shared/post-toc.html new file mode 100644 index 0000000..bd860af --- /dev/null +++ b/layouts/partials/shared/post-toc.html @@ -0,0 +1,12 @@ +{{ $page := . }} +{{ $page_toc_label := .Params.sidebar.text_contents_label | default "On this page" }} + +{{ $headers := findRE "" $page.Content }} +{{- $has_headers := ge (len $headers) 1 -}} +{{- if $has_headers -}} + + +{{ end }} diff --git a/layouts/partials/shared/sidebar/sidebar-image.html b/layouts/partials/shared/sidebar/sidebar-image.html new file mode 100644 index 0000000..d9a7ede --- /dev/null +++ b/layouts/partials/shared/sidebar/sidebar-image.html @@ -0,0 +1,15 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} + + +{{ $branch := ($section.Resources.ByType "image").GetMatch "*sidebar*" }} + +{{ $leaf := ($page.Resources.ByType "image").GetMatch "*sidebar*" }} + +{{ $thumbnail := $leaf | default $branch }} + +{{ $first := (.FirstSection.Resources.ByType "image").GetMatch "*sidebar*" }} +{{ $thumbnail := cond (eq $thumbnail nil) $first $thumbnail }} +{{ with $thumbnail }} + +{{ end }} diff --git a/layouts/partials/shared/summary-compact.html b/layouts/partials/shared/summary-compact.html new file mode 100644 index 0000000..f513394 --- /dev/null +++ b/layouts/partials/shared/summary-compact.html @@ -0,0 +1,90 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} + +
+ + + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ + {{ if .Params.show_post_date }}

{{ partial "shared/date-range.html" . }}

{{ end }} + {{ if .Params.show_post_time }} + +

+ {{ partial "shared/time-range.html" . }} +

+ {{ end }} + {{ if .Params.event }} + +

{{ .Params.event }} {{ with .Params.location }}/ {{ . }}{{ end }}

+ {{ else if .Params.location }} + +

{{ .Params.location }}

+ {{ end }} +
+ {{ if .Params.show_author_byline }} +

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

+ {{ end }} + {{ if .Params.links }} +

+ {{ partial "shared/btn-links.html" . }} +

+ {{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ {{ if $root.Params.show_post_date }}

{{ partial "shared/date-range.html" . }}

{{ end }} + {{ if .Params.event }} + +

{{ .Params.event }} {{ with .Params.location }}/ {{ . }}{{ end }}

+ {{ else if .Params.location }} + +

{{ .Params.location }}

+ {{ end }} +
+ {{ if $root.Params.show_author_byline }} +

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

+ {{ end }} +
+ {{ end }} + +
diff --git a/layouts/partials/shared/summary-grid.html b/layouts/partials/shared/summary-grid.html new file mode 100644 index 0000000..a659755 --- /dev/null +++ b/layouts/partials/shared/summary-grid.html @@ -0,0 +1,31 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} + +
+ + {{ if $root.Params.show_post_thumbnail }} +
+ + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ {{ end }} +
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} + {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} + + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
diff --git a/layouts/partials/shared/summary-li.html b/layouts/partials/shared/summary-li.html new file mode 100644 index 0000000..92a3c23 --- /dev/null +++ b/layouts/partials/shared/summary-li.html @@ -0,0 +1,59 @@ + diff --git a/layouts/partials/shared/summary-section.html b/layouts/partials/shared/summary-section.html new file mode 100644 index 0000000..9898c4c --- /dev/null +++ b/layouts/partials/shared/summary-section.html @@ -0,0 +1,73 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} +
+ + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ with .Params.excerpt }}

{{ . | markdownify | emojify }}

{{ end }} + {{ if .Pages }} + +

In this section:

+
    + {{ range .RegularPages.ByWeight }} +
  • {{ .Title }}{{ with .Params.subtitle }}: {{ . | markdownify }}{{ end }}

  • + {{ end }} +
+ {{ end }} +
+ + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ with .Params.excerpt }}

{{ . | markdownify | emojify }}

{{ end }} + {{ if .Pages }} + +

In this section:

+
    + {{ range .RegularPages.ByWeight }} +
  • {{ .Title }}{{ with .Params.subtitle }}: {{ . | markdownify }}{{ end }}

  • + {{ end }} +
+ {{ end }} +
+ {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ end }} +
diff --git a/layouts/partials/shared/summary.html b/layouts/partials/shared/summary.html new file mode 100644 index 0000000..58bf292 --- /dev/null +++ b/layouts/partials/shared/summary.html @@ -0,0 +1,57 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} +
+ + + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ if .Params.excerpt }}

{{ .Params.excerpt | markdownify }}{{ else }}{{ .Summary | markdownify }}

{{ end }} +
+ + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ if .Params.excerpt }}

{{ .Params.excerpt | markdownify }}{{ else }}{{ .Summary | markdownify }}

{{ end }} +
+ {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ end }} +
diff --git a/layouts/partials/sidebar-scaffold.html b/layouts/partials/sidebar-scaffold.html new file mode 100644 index 0000000..9c11636 --- /dev/null +++ b/layouts/partials/sidebar-scaffold.html @@ -0,0 +1,13 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $is_root := eq .CurrentSection .FirstSection }} + +{{ partial "shared/sidebar/sidebar-image.html" $page }} + +
+ {{ partial "shared/sidebar/sidebar-header.html" $section }} + {{ partial "shared/sidebar/sidebar-link.html" .Params.sidebar }} +
+ +{{ partial "shared/sidebar/sidebar-adunit.html" .Params.sidebar }} + diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html new file mode 100644 index 0000000..9712fbd --- /dev/null +++ b/layouts/shortcodes/alert.html @@ -0,0 +1,5 @@ +
+
+ {{ .Inner | markdownify | emojify }} +
+
diff --git a/layouts/shortcodes/diagram.html b/layouts/shortcodes/diagram.html new file mode 100644 index 0000000..33fdc82 --- /dev/null +++ b/layouts/shortcodes/diagram.html @@ -0,0 +1,3 @@ +
+ {{- safeHTML .Inner -}} +
\ No newline at end of file diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html new file mode 100644 index 0000000..eff1c44 --- /dev/null +++ b/layouts/shortcodes/figure.html @@ -0,0 +1,36 @@ +{{/* Enable image to be loaded from local page dir or media library at `static/img/`. */}} +{{ $image_src := .Get "src" }} +{{ if .Get "library" }} + {{ $image_src = printf "img/%s" $image_src | relURL }} +{{ end }} + +{{/* Disallow user from opening image in the lightbox? */}} +{{ $lightbox := eq (.Get "lightbox" | default "true") "true" }} + +{{/* Get lightbox group for showing multiple images in a lightbox. */}} +{{ $group := .Get "lightbox-group" | default "" }} + +{{/* Get caption. Support legacy `title` option. */}} +{{ $caption := .Get "title" | default (.Get "caption") | default "" }} + + + +{{ if $lightbox }} + +{{ else if .Get "link"}} + +{{ end -}} + +{{ with .Get + +{{- if or $lightbox (.Get "link") }}{{ end }} + +{{ if $caption }} + {{/* Localize the figure numbering (if enabled). */}} + {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }} + + {{ $caption | markdownify | emojify }} + +{{ end }} + + diff --git a/layouts/shortcodes/fragment.html b/layouts/shortcodes/fragment.html new file mode 100644 index 0000000..312208b --- /dev/null +++ b/layouts/shortcodes/fragment.html @@ -0,0 +1,3 @@ + + {{ .Inner }} + \ No newline at end of file diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html new file mode 100644 index 0000000..dc8bc55 --- /dev/null +++ b/layouts/shortcodes/gallery.html @@ -0,0 +1,56 @@ +{{/* Get album folder or default to `gallery/`. */}} +{{ $album := "" }} +{{ with .Get "album" }}{{ $album = . }}{{else}}{{ $album = "gallery" }}{{end}} + +{{/* Set image path and page bundle that images are associated with. */}} +{{ $album_path := "" }} +{{ $resource_page := "" }} +{{ if eq .Page.Parent.Type "widget_page" }} + {{ $album_path = printf "%s/%s/*" (path.Base (path.Split .Page.Path).Dir) $album }} + {{ $resource_page = $.Page.Parent }} +{{ else }} + {{ $album_path = printf "%s/*" $album }} + {{ $resource_page = $.Page }} +{{ end }} + + \ No newline at end of file diff --git a/layouts/shortcodes/gdocs.html b/layouts/shortcodes/gdocs.html new file mode 100644 index 0000000..aa3ad33 --- /dev/null +++ b/layouts/shortcodes/gdocs.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/layouts/shortcodes/hl.html b/layouts/shortcodes/hl.html new file mode 100644 index 0000000..f56cb01 --- /dev/null +++ b/layouts/shortcodes/hl.html @@ -0,0 +1 @@ +{{ .Inner | markdownify | emojify }} \ No newline at end of file diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html new file mode 100644 index 0000000..38541ab --- /dev/null +++ b/layouts/shortcodes/icon.html @@ -0,0 +1,10 @@ +{{- if (.Get "name") -}} + {{- $icon := .Get "name" -}} + {{- $pack := or (.Get "pack") "fas" -}} + {{- $pack_prefix := $pack -}} + {{- if in (slice "fab" "fas" "far" "fal") $pack -}} + {{- $pack_prefix = "fa" -}} + {{- end -}} + {{- $padding_right := (.Get "padding_right") | default 1 -}}{{/* Defaulting to 1 prevents no spacing when minimizing HTML. */}} + +{{- end -}} \ No newline at end of file diff --git a/layouts/shortcodes/list_categories.html b/layouts/shortcodes/list_categories.html new file mode 100644 index 0000000..7bbf986 --- /dev/null +++ b/layouts/shortcodes/list_categories.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/layouts/shortcodes/list_tags.html b/layouts/shortcodes/list_tags.html new file mode 100644 index 0000000..4384812 --- /dev/null +++ b/layouts/shortcodes/list_tags.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/layouts/shortcodes/mention.html b/layouts/shortcodes/mention.html new file mode 100644 index 0000000..1ac5410 --- /dev/null +++ b/layouts/shortcodes/mention.html @@ -0,0 +1,10 @@ +{{- $username := .Get 0 -}} +{{- $username_url := $username | anchorize -}} +{{- $taxonomy := "authors" -}} +{{- $profile_page := site.GetPage (printf "/%s/%s" $taxonomy $username_url) -}} +{{- $name := $profile_page.Params.name | default ($username|markdownify) -}} +{{- with $profile_page -}} + {{$name}} +{{- else -}} + {{- $name -}} +{{- end -}} diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html new file mode 100644 index 0000000..d3bced6 --- /dev/null +++ b/layouts/shortcodes/slide.html @@ -0,0 +1,6 @@ +{{ $non_data_attributes := slice "id" "class" }} +
diff --git a/layouts/shortcodes/speaker_note.html b/layouts/shortcodes/speaker_note.html new file mode 100644 index 0000000..e2b7210 --- /dev/null +++ b/layouts/shortcodes/speaker_note.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/layouts/shortcodes/spoiler.html b/layouts/shortcodes/spoiler.html new file mode 100644 index 0000000..6d617ed --- /dev/null +++ b/layouts/shortcodes/spoiler.html @@ -0,0 +1,13 @@ +{{- $id := printf "spoiler-%d" .Ordinal -}} +
+

+ +

+
+
+ {{ .Inner | markdownify | emojify }} +
+
+
\ No newline at end of file diff --git a/layouts/shortcodes/staticref.html b/layouts/shortcodes/staticref.html new file mode 100644 index 0000000..c6e99f4 --- /dev/null +++ b/layouts/shortcodes/staticref.html @@ -0,0 +1 @@ +{{ .Inner }} \ No newline at end of file diff --git a/layouts/shortcodes/toc.html b/layouts/shortcodes/toc.html new file mode 100644 index 0000000..31dd72c --- /dev/null +++ b/layouts/shortcodes/toc.html @@ -0,0 +1,2 @@ +

{{ i18n "table_of_contents" }}

+{{ $.Page.TableOfContents }} diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html new file mode 100644 index 0000000..f6019f1 --- /dev/null +++ b/layouts/shortcodes/video.html @@ -0,0 +1,27 @@ +{{/* Enable video to be loaded from local page dir or media library at `static/img/`. */}} +{{ $path := "" }} +{{ $root_dir := "" }} +{{ if .Get "library" }} + {{ $path = "img/" }} + {{ $root_dir = "static/" }} +{{ end }} + +{{ $video := printf "%s%s" $path (.Get "src") }} +{{ $video_type := strings.TrimPrefix "." (path.Ext (.Get "src")) }} +{{ if .Get "library" }} + {{ $video = $video | relURL }} +{{ end }} + +{{ $poster := printf "%s%s%s" $path (substr (.Get "src") 0 -4) ".jpg" }} +{{ $has_poster := fileExists (printf "%s%s" $root_dir $poster) }} +{{ if and $has_poster (.Get "library") }} + {{ $poster = $poster | relURL }} +{{ else if $has_poster }} + {{ $poster = $poster }} +{{ else }} + {{ $poster = "" }} +{{ end }} + + \ No newline at end of file diff --git a/netlify.toml b/netlify.toml index eb16429..db4ca6f 100644 --- a/netlify.toml +++ b/netlify.toml @@ -2,10 +2,10 @@ publish = "public" command = "hugo" [context.production.environment] - HUGO_VERSION = "0.74.3" + HUGO_VERSION = "0.89.1" HUGO_ENV = "production" HUGO_ENABLEGITINFO = "true" [context.branch-deploy.environment] - HUGO_VERSION = "0.74.3" + HUGO_VERSION = "0.89.1" [context.deploy-preview.environment] - HUGO_VERSION = "0.74.3" \ No newline at end of file + HUGO_VERSION = "0.89.1" \ No newline at end of file diff --git a/static/img/bonsai.ico b/static/img/bonsai.ico new file mode 100644 index 0000000..f454cc6 Binary files /dev/null and b/static/img/bonsai.ico differ diff --git a/assets/images/icon.png b/static/img/bonsai.png similarity index 100% rename from assets/images/icon.png rename to static/img/bonsai.png diff --git a/themes/hugo-apero/.gitignore b/themes/hugo-apero/.gitignore new file mode 100644 index 0000000..0224f63 --- /dev/null +++ b/themes/hugo-apero/.gitignore @@ -0,0 +1,7 @@ +.Rproj.user +.Rhistory +.RData +.Ruserdata +.DS_Store +exampleSite/public/ +exampleSite/resources/ \ No newline at end of file diff --git a/themes/hugo-apero/LICENSE.md b/themes/hugo-apero/LICENSE.md new file mode 100644 index 0000000..0fb847e --- /dev/null +++ b/themes/hugo-apero/LICENSE.md @@ -0,0 +1,395 @@ +Attribution 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution 4.0 International Public License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution 4.0 International Public License ("Public License"). To the +extent this Public License may be interpreted as a contract, You are +granted the Licensed Rights in consideration of Your acceptance of +these terms and conditions, and the Licensor grants You such rights in +consideration of benefits the Licensor receives from making the +Licensed Material available under these terms and conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + d. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + e. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + f. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + g. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + h. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + i. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + j. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + k. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part; and + + b. produce, reproduce, and Share Adapted Material. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the Licensed + Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + 4. If You Share Adapted Material You produce, the Adapter's + License You apply must not prevent recipients of the Adapted + Material from complying with this Public License. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material; and + + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + + +======================================================================= + +Creative Commons is not a party to its public +licenses. Notwithstanding, Creative Commons may elect to apply one of +its public licenses to material it publishes and in those instances +will be considered the “Licensor.” The text of the Creative Commons +public licenses is dedicated to the public domain under the CC0 Public +Domain Dedication. Except for the limited purpose of indicating that +material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the +public licenses. + +Creative Commons may be contacted at creativecommons.org. diff --git a/themes/hugo-apero/README.md b/themes/hugo-apero/README.md new file mode 100644 index 0000000..27f61d8 --- /dev/null +++ b/themes/hugo-apero/README.md @@ -0,0 +1 @@ +# hugo-apero \ No newline at end of file diff --git a/themes/hugo-apero/archetypes/blog/featured.jpg b/themes/hugo-apero/archetypes/blog/featured.jpg new file mode 100644 index 0000000..22f5cda Binary files /dev/null and b/themes/hugo-apero/archetypes/blog/featured.jpg differ diff --git a/themes/hugo-apero/archetypes/blog/index.md b/themes/hugo-apero/archetypes/blog/index.md new file mode 100644 index 0000000..3ec7092 --- /dev/null +++ b/themes/hugo-apero/archetypes/blog/index.md @@ -0,0 +1,12 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +subtitle: "" +excerpt: "" +date: {{ .Date }} +author: "" +draft: true +series: +tags: +categories: +layout: single # single or single-sidebar +--- diff --git a/themes/hugo-apero/archetypes/default.md b/themes/hugo-apero/archetypes/default.md new file mode 100644 index 0000000..29346c2 --- /dev/null +++ b/themes/hugo-apero/archetypes/default.md @@ -0,0 +1,5 @@ +--- +title: {{ replace .Name "-" " " | title }} +date: {{ .Date }} +draft: true +--- diff --git a/themes/hugo-apero/archetypes/form.md b/themes/hugo-apero/archetypes/form.md new file mode 100644 index 0000000..e093038 --- /dev/null +++ b/themes/hugo-apero/archetypes/form.md @@ -0,0 +1,14 @@ +--- +title: {{ replace .Name "-" " " | title }} +name: {{ replace .Name "-" " " | title }} Form +description: +date: {{ .Date }} +draft: true +url: {{ replace .Name "-" " " | lower }} +type: form +layout: split-right # split-right or split-left +submit_button_label: Send +show_social_links: true # specify social accounts in site config +show_poweredby_formspree: true +formspree_form_id: # your form's endpoint, see integration tab +--- diff --git a/themes/hugo-apero/archetypes/page.md b/themes/hugo-apero/archetypes/page.md new file mode 100644 index 0000000..c7cd969 --- /dev/null +++ b/themes/hugo-apero/archetypes/page.md @@ -0,0 +1,9 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +description: +date: {{ .Date }} +draft: false +# layout options are standard (default) or wide-body +layout: standard +show_title_as_headline: false +--- diff --git a/themes/hugo-apero/archetypes/project/featured.jpg b/themes/hugo-apero/archetypes/project/featured.jpg new file mode 100644 index 0000000..22f5cda Binary files /dev/null and b/themes/hugo-apero/archetypes/project/featured.jpg differ diff --git a/themes/hugo-apero/archetypes/project/index.md b/themes/hugo-apero/archetypes/project/index.md new file mode 100644 index 0000000..24d4c3b --- /dev/null +++ b/themes/hugo-apero/archetypes/project/index.md @@ -0,0 +1,17 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +subtitle: "" +excerpt: "" +date: {{ .Date }} +author: "" +draft: true +series: +tags: +categories: +layout: single # single or single-sidebar +links: +- icon: door-open + icon_pack: fas + name: website + url: / +--- diff --git a/themes/hugo-apero/archetypes/talk/featured.jpg b/themes/hugo-apero/archetypes/talk/featured.jpg new file mode 100644 index 0000000..22f5cda Binary files /dev/null and b/themes/hugo-apero/archetypes/talk/featured.jpg differ diff --git a/themes/hugo-apero/archetypes/talk/index.md b/themes/hugo-apero/archetypes/talk/index.md new file mode 100644 index 0000000..99d4259 --- /dev/null +++ b/themes/hugo-apero/archetypes/talk/index.md @@ -0,0 +1,19 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +subtitle: "" +excerpt: "" +date: {{ .Date }} +date_end: {{ .Date }} +author: "" +location: "Online" +draft: true +series: +tags: +categories: +layout: single # single or single-sidebar +links: +- icon: door-open + icon_pack: fas + name: website + url: / +--- diff --git a/themes/hugo-apero/assets/academicons/academicons.scss b/themes/hugo-apero/assets/academicons/academicons.scss new file mode 100755 index 0000000..20eb2fa --- /dev/null +++ b/themes/hugo-apero/assets/academicons/academicons.scss @@ -0,0 +1,535 @@ +/* + * Academicons 1.9.1 by James Walsh (https://github.com/jpswalsh) and Katja Bercic (https://github.com/katjabercic) + * Fonts generated using FontForge - https://fontforge.org + * Square icons designed to be used alongside Font Awesome square icons - https://fortawesome.github.io/Font-Awesome/ + * Licenses - Font: SIL OFL 1.1, CSS: MIT License + */ +@font-face { + font-family: 'Academicons'; + font-style: normal; + font-weight: 400; + font-display: block; + src:url('#{$fa-font-path}/academicons.eot'); + src:url('#{$fa-font-path}/academicons.eot') format('embedded-opentype'), + url('#{$fa-font-path}/academicons.ttf') format('truetype'), + url('#{$fa-font-path}/academicons.woff') format('woff'), + url('#{$fa-font-path}/academicons.svg') format('svg'); +} +.ai { + font-family: 'Academicons'; + font-weight: 400; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; +} +.ai-academia:before { + content: "\e9af"; +} +.ai-academia-square:before { + content: "\e93d"; +} +.ai-acclaim:before { + content: "\e92e"; +} +.ai-acclaim-square:before { + content: "\e93a"; +} +.ai-acm:before { + content: "\e93c"; +} +.ai-acm-square:before { + content: "\e95d"; +} +.ai-acmdl:before { + content: "\e96a"; +} +.ai-acmdl-square:before { + content: "\e9d3"; +} +.ai-ads:before { + content: "\e9cb"; +} +.ai-ads-square:before { + content: "\e94a"; +} +.ai-africarxiv:before { + content: "\e91b"; +} +.ai-africarxiv-square:before { + content: "\e90b"; +} +.ai-arxiv:before { + content: "\e974"; +} +.ai-arxiv-square:before { + content: "\e9a6"; +} +.ai-biorxiv:before { + content: "\e9a2"; +} +.ai-biorxiv-square:before { + content: "\e98b"; +} +.ai-ceur:before { + content: "\e96d"; +} +.ai-ceur-square:before { + content: "\e92f"; +} +.ai-ciencia-vitae:before { + content: "\e912"; +} +.ai-ciencia-vitae-square:before { + content: "\e913"; +} +.ai-closed-access:before { + content: "\e942"; +} +.ai-closed-access-square:before { + content: "\e943"; +} +.ai-conversation:before { + content: "\e94c"; +} +.ai-conversation-square:before { + content: "\e915"; +} +.ai-coursera:before { + content: "\e95f"; +} +.ai-coursera-square:before { + content: "\e97f"; +} +.ai-crossref:before { + content: "\e918"; +} +.ai-crossref-square:before { + content: "\e919"; +} +.ai-cv:before { + content: "\e9a5"; +} +.ai-cv-square:before { + content: "\e90a"; +} +.ai-datacite:before { + content: "\e91c"; +} +.ai-datacite-square:before { + content: "\e91d"; +} +.ai-dataverse:before { + content: "\e9f7"; +} +.ai-dataverse-square:before { + content: "\e9e4"; +} +.ai-dblp:before { + content: "\e94f"; +} +.ai-dblp-square:before { + content: "\e93f"; +} +.ai-depsy:before { + content: "\e97a"; +} +.ai-depsy-square:before { + content: "\e94b"; +} +.ai-doi:before { + content: "\e97e"; +} +.ai-doi-square:before { + content: "\e98f"; +} +.ai-dryad:before { + content: "\e97c"; +} +.ai-dryad-square:before { + content: "\e98c"; +} +.ai-elsevier:before { + content: "\e961"; +} +.ai-elsevier-square:before { + content: "\e910"; +} +.ai-figshare:before { + content: "\e981"; +} +.ai-figshare-square:before { + content: "\e9e7"; +} +.ai-google-scholar:before { + content: "\e9d4"; +} +.ai-google-scholar-square:before { + content: "\e9f9"; +} +.ai-hal:before { + content: "\e92c"; +} +.ai-hal-square:before { + content: "\e92d"; +} +.ai-hypothesis:before { + content: "\e95a"; +} +.ai-hypothesis-square:before { + content: "\e95b"; +} +.ai-ideas-repec:before { + content: "\e9ed"; +} +.ai-ideas-repec-square:before { + content: "\e9f8"; +} +.ai-ieee:before { + content: "\e929"; +} +.ai-ieee-square:before { + content: "\e9b9"; +} +.ai-impactstory:before { + content: "\e9cf"; +} +.ai-impactstory-square:before { + content: "\e9aa"; +} +.ai-inaturalist:before { + content: "\e900"; +} +.ai-inaturalist-square:before { + content: "\e901"; +} +.ai-inpn:before { + content: "\e902"; +} +.ai-inpn-square:before { + content: "\e903"; +} +.ai-inspire:before { + content: "\e9e9"; +} +.ai-inspire-square:before { + content: "\e9fe"; +} +.ai-isidore:before { + content: "\e936"; +} +.ai-isidore-square:before { + content: "\e954"; +} +.ai-jstor:before { + content: "\e938"; +} +.ai-jstor-square:before { + content: "\e944"; +} +.ai-lattes:before { + content: "\e9b3"; +} +.ai-lattes-square:before { + content: "\e99c"; +} +.ai-mathoverflow:before { + content: "\e9f6"; +} +.ai-mathoverflow-square:before { + content: "\e97b"; +} +.ai-mendeley:before { + content: "\e9f0"; +} +.ai-mendeley-square:before { + content: "\e9f3"; +} +.ai-moodle:before { + content: "\e907"; +} +.ai-moodle-square:before { + content: "\e908"; +} +.ai-nakala:before { + content: "\e940"; +} +.ai-nakala-square:before { + content: "\e941"; +} +.ai-obp:before { + content: "\e92a"; +} +.ai-obp-square:before { + content: "\e92b"; +} +.ai-open-access:before { + content: "\e939"; +} +.ai-open-access-square:before { + content: "\e9f4"; +} +.ai-open-data:before { + content: "\e966"; +} +.ai-open-data-square:before { + content: "\e967"; +} +.ai-open-materials:before { + content: "\e968"; +} +.ai-open-materials-square:before { + content: "\e969"; +} +.ai-openedition:before { + content: "\e946"; +} +.ai-openedition-square:before { + content: "\e947"; +} +.ai-orcid:before { + content: "\e9d9"; +} +.ai-orcid-square:before { + content: "\e9c3"; +} +.ai-osf:before { + content: "\e9ef"; +} +.ai-osf-square:before { + content: "\e931"; +} +.ai-overleaf:before { + content: "\e914"; +} +.ai-overleaf-square:before { + content: "\e98d"; +} +.ai-philpapers:before { + content: "\e98a"; +} +.ai-philpapers-square:before { + content: "\e96f"; +} +.ai-piazza:before { + content: "\e99a"; +} +.ai-piazza-square:before { + content: "\e90c"; +} +.ai-preregistered:before { + content: "\e906"; +} +.ai-preregistered-square:before { + content: "\e96b"; +} +.ai-protocols:before { + content: "\e952"; +} +.ai-protocols-square:before { + content: "\e953"; +} +.ai-psyarxiv:before { + content: "\e90e"; +} +.ai-psyarxiv-square:before { + content: "\e90f"; +} +.ai-publons:before { + content: "\e937"; +} +.ai-publons-square:before { + content: "\e94e"; +} +.ai-pubmed:before { + content: "\e99f"; +} +.ai-pubmed-square:before { + content: "\e97d"; +} +.ai-pubpeer:before { + content: "\e922"; +} +.ai-pubpeer-square:before { + content: "\e923"; +} +.ai-researcherid:before { + content: "\e91a"; +} +.ai-researcherid-square:before { + content: "\e95c"; +} +.ai-researchgate:before { + content: "\e95e"; +} +.ai-researchgate-square:before { + content: "\e99e"; +} +.ai-ror:before { + content: "\e948"; +} +.ai-ror-square:before { + content: "\e949"; +} +.ai-sci-hub:before { + content: "\e959"; +} +.ai-sci-hub-square:before { + content: "\e905"; +} +.ai-scirate:before { + content: "\e98e"; +} +.ai-scirate-square:before { + content: "\e99d"; +} +.ai-scopus:before { + content: "\e91e"; +} +.ai-scopus-square:before { + content: "\e91f"; +} +.ai-semantic-scholar:before { + content: "\e96e"; +} +.ai-semantic-scholar-square:before { + content: "\e96c"; +} +.ai-springer:before { + content: "\e928"; +} +.ai-springer-square:before { + content: "\e99b"; +} +.ai-ssrn:before { + content: "\e916"; +} +.ai-ssrn-square:before { + content: "\e917"; +} +.ai-stackoverflow:before { + content: "\e920"; +} +.ai-stackoverflow-square:before { + content: "\e921"; +} +.ai-zenodo:before { + content: "\e911"; +} +.ai-zotero:before { + content: "\e962"; +} +.ai-zotero-square:before { + content: "\e932"; +} +/* Duplication of the FontAwesome style classes using 'ai' in place of 'fa'. */ +.ai-lg { + font-size: 1.33333em; + line-height: 0.75em; + vertical-align: -.0667em; +} +.ai-xs { + font-size: .75em; +} +.ai-sm { + font-size: .875em; +} + +.ai-1x { + font-size: 1em; +} +.ai-2x { + font-size: 2em; +} +.ai-3x { + font-size: 3em; +} +.ai-4x { + font-size: 4em; +} +.ai-5x { + font-size: 5em; +} +.ai-6x { + font-size: 6em; +} +.ai-7x { + font-size: 7em; +} +.ai-8x { + font-size: 8em; +} +.ai-9x { + font-size: 9em; +} +.ai-10x { + font-size: 10em; +} + +.ai-fw { + text-align: center; + width: 1.25em; +} + +.ai-ul { + list-style-type: none; + margin-left: 2.5em; + padding-left: 0; +} +.ai-ul > li { + position: relative; +} +.ai-li { + left: -2em; + position: absolute; + text-align: center; + width: 2em; + line-height: inherit; +} + +.ai-border { +border: solid 0.08em #eee; +border-radius: .1em; + padding: .2em .25em .15em; +} + +.ai-pull-left { + float: left; +} +.ai-pull-right { + float: right; +} +.ai.ai-pull-left { + margin-right: .3em; +} +.ai.ai-pull-right { + margin-right: .3em; +} + +.ai-stack { + display: inline-block; + height: 2em; + line-height: 2em; + position: relative; + vertical-align: middle; + width: 2.5em; +} +.ai-stack-1x, +.ai-stack-2x { + left: 0; + position: absolute; + text-align: center; + width: 100%; +} +.ai-stack-1x { + line-height: inherit; +} +.ai-stack-2x { + font-size: 2em; +} +.ai-inverse { + color: #fff; +} diff --git a/themes/hugo-apero/assets/academicons/package.json b/themes/hugo-apero/assets/academicons/package.json new file mode 100755 index 0000000..bb0e3ab --- /dev/null +++ b/themes/hugo-apero/assets/academicons/package.json @@ -0,0 +1,23 @@ +{ + "name": "academicons", + "version": "1.9.1", + "description": "Academicons is a specialist icon font for academics. It contains icons for websites and organisations related to academia that are often missing from mainstream font packages. It can be used by itself, but its primary purpose is to be used as a supplementary package alongside a larger icon set. Go [here](http://jpswalsh.github.io/academicons) to view the full icon set along with instructions for their use.", + "main": "css/academicons.css", + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/jpswalsh/academicons.git" + }, + "keywords": [], + "author": "James Walsh", + "license": "OFL-1.1", + "bugs": { + "url": "https://github.com/jpswalsh/academicons/issues" + }, + "homepage": "https://jpswalsh.github.io/academicons/" +} diff --git a/themes/hugo-apero/assets/base.scss b/themes/hugo-apero/assets/base.scss new file mode 100644 index 0000000..b797d09 --- /dev/null +++ b/themes/hugo-apero/assets/base.scss @@ -0,0 +1,18 @@ +// color variables based on tachyons classes +// set default color options +$siteBgColor: "near-white" ; +$sidebarBgColor: "light-gray" ; +$textColor: "near-black" ; +$sidebarTextColor: "dark-gray" ; +$headlineColor: "black" ; +$headingColor: "near-black" ; +$bodyLinkColor: "blue" ; +$navLinkColor: "near-black" ; +$navBgColor: "near-black" ; +$sidebarLinkColor: "near-black" ; +$footerTextColor: "silver" ; +$buttonTextColor: "near-white" ; +$buttonBgColor: "black" ; +$buttonHoverTextColor: "white" ; +$buttonHoverBgColor: "blue" ; +$borderColor: "moon-gray" ; diff --git a/themes/hugo-apero/assets/custom-fonts.scss b/themes/hugo-apero/assets/custom-fonts.scss new file mode 100644 index 0000000..96b9180 --- /dev/null +++ b/themes/hugo-apero/assets/custom-fonts.scss @@ -0,0 +1,161 @@ +/* fraunces-regular - latin */ +@font-face { + font-family: 'Fraunces'; + font-style: normal; + font-weight: 400; + src: local(''), + url('#{$font-path}/Fraunces9ptSoft-Thin.woff2') format('woff2'); +} + +/* fraunces-italic - latin */ +@font-face { + font-family: 'Fraunces'; + font-style: italic; + font-weight: 400; + src: local(''), + url('#{$font-path}/Fraunces9ptSoft-ThinItalic.woff2') format('woff2'); +} + +/* Metropolis-regular - latin */ +@font-face { + font-family: 'Metropolis'; + font-style: normal; + font-weight: 400; + src: local(''), + url('#{$font-path}/Metropolis-Light.woff2') format('woff2'), + url('#{$font-path}/Metropolis-Light.woff') format('woff'); +} + +/* Metropolis-italic - latin */ +@font-face { + font-family: 'Metropolis'; + font-style: italic; + font-weight: 400; + src: local(''), + url('#{$font-path}/Metropolis-LightItalic.woff2') format('woff2'), + url('#{$font-path}/Metropolis-LightItalic.woff') format('woff'); +} + +/* bitter-300 - latin */ +@font-face { + font-family: 'Bitter'; + font-style: normal; + font-weight: 300; + src: local(''), + url('#{$font-path}/bitter-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/bitter-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* bitter-300italic - latin */ +@font-face { + font-family: 'Bitter'; + font-style: italic; + font-weight: 300; + src: local(''), + url('#{$font-path}/bitter-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/bitter-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + + +/* commissioner-regular - latin */ +@font-face { + font-family: 'Commissioner'; + font-style: normal; + font-weight: 400; + src: local(''), + url('#{$font-path}/Commissioner-Light.woff2') format('woff2'); +} + +/* commissioner-italic - latin */ +@font-face { + font-family: 'Commissioner'; + font-style: italic; + font-weight: 400; + src: local(''), + url('#{$font-path}/Commissioner-LightItalic.woff2') format('woff2'); +} + +/* eb-garamond-regular - latin */ +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 400; + src: local(''), + url('#{$font-path}/eb-garamond-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/eb-garamond-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* eb-garamond-600 - latin */ +@font-face { + font-family: 'EB Garamond'; + font-style: normal; + font-weight: 600; + src: local(''), + url('#{$font-path}/eb-garamond-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/eb-garamond-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* eb-garamond-italic - latin */ +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 400; + src: local(''), + url('#{$font-path}/eb-garamond-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/eb-garamond-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* eb-garamond-600italic - latin */ +@font-face { + font-family: 'EB Garamond'; + font-style: italic; + font-weight: 600; + src: local(''), + url('#{$font-path}/eb-garamond-v14-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('#{$font-path}/eb-garamond-v14-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 400; + src: local(''), + url('#{$font-path}/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'), + url('#{$font-path}/Atkinson-Hyperlegible-Regular-102.woff2') format('woff'); +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 400; + src: local(''), + url('#{$font-path}/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'), + url('#{$font-path}/Atkinson-Hyperlegible-Italic-102.woff2') format('woff'); +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: normal; + font-weight: 700; + src: local(''), + url('#{$font-path}/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'), + url('#{$font-path}/Atkinson-Hyperlegible-Bold-102.woff2') format('woff'); +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + font-style: italic; + font-weight: 700; + src: local(''), + url('#{$font-path}/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'), + url('#{$font-path}/Atkinson-Hyperlegible-BoldItalic-102.woff2') format('woff'); +} + + +// create custom font classes +.custom-text-font { font-family: $customtextFontFamily; } +.custom-heading-font { font-family: $customheadingFontFamily; } + +// override variables used in main with new custom class slugs +$textFontFamily: custom-text-font; +$headingFontFamily: custom-heading-font; \ No newline at end of file diff --git a/themes/hugo-apero/assets/custom.scss b/themes/hugo-apero/assets/custom.scss new file mode 100644 index 0000000..41edf8e --- /dev/null +++ b/themes/hugo-apero/assets/custom.scss @@ -0,0 +1 @@ +// Override this file to add your own SCSS styling. \ No newline at end of file diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_animated.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_animated.scss new file mode 100644 index 0000000..7c7c0e1 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_animated.scss @@ -0,0 +1,20 @@ +// Animated Icons +// -------------------------- + +.#{$fa-css-prefix}-spin { + animation: fa-spin 2s infinite linear; +} + +.#{$fa-css-prefix}-pulse { + animation: fa-spin 1s infinite steps(8); +} + +@keyframes fa-spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_bordered-pulled.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_bordered-pulled.scss new file mode 100644 index 0000000..c8c4274 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_bordered-pulled.scss @@ -0,0 +1,20 @@ +// Bordered & Pulled +// ------------------------- + +.#{$fa-css-prefix}-border { + border: solid .08em $fa-border-color; + border-radius: .1em; + padding: .2em .25em .15em; +} + +.#{$fa-css-prefix}-pull-left { float: left; } +.#{$fa-css-prefix}-pull-right { float: right; } + +.#{$fa-css-prefix}, +.fas, +.far, +.fal, +.fab { + &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } + &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_core.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_core.scss new file mode 100644 index 0000000..cbd4cf7 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_core.scss @@ -0,0 +1,21 @@ +// Base Class Definition +// ------------------------- + +.#{$fa-css-prefix}, +.fas, +.far, +.fal, +.fad, +.fab { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; +} + +%fa-icon { + @include fa-icon; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_fixed-width.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_fixed-width.scss new file mode 100644 index 0000000..970641f --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_fixed-width.scss @@ -0,0 +1,6 @@ +// Fixed Width Icons +// ------------------------- +.#{$fa-css-prefix}-fw { + text-align: center; + width: $fa-fw-width; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_icons.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_icons.scss new file mode 100644 index 0000000..598cfc9 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_icons.scss @@ -0,0 +1,1462 @@ +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen +readers do not read off random characters that represent icons */ + +.#{$fa-css-prefix}-500px:before { content: fa-content($fa-var-500px); } +.#{$fa-css-prefix}-accessible-icon:before { content: fa-content($fa-var-accessible-icon); } +.#{$fa-css-prefix}-accusoft:before { content: fa-content($fa-var-accusoft); } +.#{$fa-css-prefix}-acquisitions-incorporated:before { content: fa-content($fa-var-acquisitions-incorporated); } +.#{$fa-css-prefix}-ad:before { content: fa-content($fa-var-ad); } +.#{$fa-css-prefix}-address-book:before { content: fa-content($fa-var-address-book); } +.#{$fa-css-prefix}-address-card:before { content: fa-content($fa-var-address-card); } +.#{$fa-css-prefix}-adjust:before { content: fa-content($fa-var-adjust); } +.#{$fa-css-prefix}-adn:before { content: fa-content($fa-var-adn); } +.#{$fa-css-prefix}-adversal:before { content: fa-content($fa-var-adversal); } +.#{$fa-css-prefix}-affiliatetheme:before { content: fa-content($fa-var-affiliatetheme); } +.#{$fa-css-prefix}-air-freshener:before { content: fa-content($fa-var-air-freshener); } +.#{$fa-css-prefix}-airbnb:before { content: fa-content($fa-var-airbnb); } +.#{$fa-css-prefix}-algolia:before { content: fa-content($fa-var-algolia); } +.#{$fa-css-prefix}-align-center:before { content: fa-content($fa-var-align-center); } +.#{$fa-css-prefix}-align-justify:before { content: fa-content($fa-var-align-justify); } +.#{$fa-css-prefix}-align-left:before { content: fa-content($fa-var-align-left); } +.#{$fa-css-prefix}-align-right:before { content: fa-content($fa-var-align-right); } +.#{$fa-css-prefix}-alipay:before { content: fa-content($fa-var-alipay); } +.#{$fa-css-prefix}-allergies:before { content: fa-content($fa-var-allergies); } +.#{$fa-css-prefix}-amazon:before { content: fa-content($fa-var-amazon); } +.#{$fa-css-prefix}-amazon-pay:before { content: fa-content($fa-var-amazon-pay); } +.#{$fa-css-prefix}-ambulance:before { content: fa-content($fa-var-ambulance); } +.#{$fa-css-prefix}-american-sign-language-interpreting:before { content: fa-content($fa-var-american-sign-language-interpreting); } +.#{$fa-css-prefix}-amilia:before { content: fa-content($fa-var-amilia); } +.#{$fa-css-prefix}-anchor:before { content: fa-content($fa-var-anchor); } +.#{$fa-css-prefix}-android:before { content: fa-content($fa-var-android); } +.#{$fa-css-prefix}-angellist:before { content: fa-content($fa-var-angellist); } +.#{$fa-css-prefix}-angle-double-down:before { content: fa-content($fa-var-angle-double-down); } +.#{$fa-css-prefix}-angle-double-left:before { content: fa-content($fa-var-angle-double-left); } +.#{$fa-css-prefix}-angle-double-right:before { content: fa-content($fa-var-angle-double-right); } +.#{$fa-css-prefix}-angle-double-up:before { content: fa-content($fa-var-angle-double-up); } +.#{$fa-css-prefix}-angle-down:before { content: fa-content($fa-var-angle-down); } +.#{$fa-css-prefix}-angle-left:before { content: fa-content($fa-var-angle-left); } +.#{$fa-css-prefix}-angle-right:before { content: fa-content($fa-var-angle-right); } +.#{$fa-css-prefix}-angle-up:before { content: fa-content($fa-var-angle-up); } +.#{$fa-css-prefix}-angry:before { content: fa-content($fa-var-angry); } +.#{$fa-css-prefix}-angrycreative:before { content: fa-content($fa-var-angrycreative); } +.#{$fa-css-prefix}-angular:before { content: fa-content($fa-var-angular); } +.#{$fa-css-prefix}-ankh:before { content: fa-content($fa-var-ankh); } +.#{$fa-css-prefix}-app-store:before { content: fa-content($fa-var-app-store); } +.#{$fa-css-prefix}-app-store-ios:before { content: fa-content($fa-var-app-store-ios); } +.#{$fa-css-prefix}-apper:before { content: fa-content($fa-var-apper); } +.#{$fa-css-prefix}-apple:before { content: fa-content($fa-var-apple); } +.#{$fa-css-prefix}-apple-alt:before { content: fa-content($fa-var-apple-alt); } +.#{$fa-css-prefix}-apple-pay:before { content: fa-content($fa-var-apple-pay); } +.#{$fa-css-prefix}-archive:before { content: fa-content($fa-var-archive); } +.#{$fa-css-prefix}-archway:before { content: fa-content($fa-var-archway); } +.#{$fa-css-prefix}-arrow-alt-circle-down:before { content: fa-content($fa-var-arrow-alt-circle-down); } +.#{$fa-css-prefix}-arrow-alt-circle-left:before { content: fa-content($fa-var-arrow-alt-circle-left); } +.#{$fa-css-prefix}-arrow-alt-circle-right:before { content: fa-content($fa-var-arrow-alt-circle-right); } +.#{$fa-css-prefix}-arrow-alt-circle-up:before { content: fa-content($fa-var-arrow-alt-circle-up); } +.#{$fa-css-prefix}-arrow-circle-down:before { content: fa-content($fa-var-arrow-circle-down); } +.#{$fa-css-prefix}-arrow-circle-left:before { content: fa-content($fa-var-arrow-circle-left); } +.#{$fa-css-prefix}-arrow-circle-right:before { content: fa-content($fa-var-arrow-circle-right); } +.#{$fa-css-prefix}-arrow-circle-up:before { content: fa-content($fa-var-arrow-circle-up); } +.#{$fa-css-prefix}-arrow-down:before { content: fa-content($fa-var-arrow-down); } +.#{$fa-css-prefix}-arrow-left:before { content: fa-content($fa-var-arrow-left); } +.#{$fa-css-prefix}-arrow-right:before { content: fa-content($fa-var-arrow-right); } +.#{$fa-css-prefix}-arrow-up:before { content: fa-content($fa-var-arrow-up); } +.#{$fa-css-prefix}-arrows-alt:before { content: fa-content($fa-var-arrows-alt); } +.#{$fa-css-prefix}-arrows-alt-h:before { content: fa-content($fa-var-arrows-alt-h); } +.#{$fa-css-prefix}-arrows-alt-v:before { content: fa-content($fa-var-arrows-alt-v); } +.#{$fa-css-prefix}-artstation:before { content: fa-content($fa-var-artstation); } +.#{$fa-css-prefix}-assistive-listening-systems:before { content: fa-content($fa-var-assistive-listening-systems); } +.#{$fa-css-prefix}-asterisk:before { content: fa-content($fa-var-asterisk); } +.#{$fa-css-prefix}-asymmetrik:before { content: fa-content($fa-var-asymmetrik); } +.#{$fa-css-prefix}-at:before { content: fa-content($fa-var-at); } +.#{$fa-css-prefix}-atlas:before { content: fa-content($fa-var-atlas); } +.#{$fa-css-prefix}-atlassian:before { content: fa-content($fa-var-atlassian); } +.#{$fa-css-prefix}-atom:before { content: fa-content($fa-var-atom); } +.#{$fa-css-prefix}-audible:before { content: fa-content($fa-var-audible); } +.#{$fa-css-prefix}-audio-description:before { content: fa-content($fa-var-audio-description); } +.#{$fa-css-prefix}-autoprefixer:before { content: fa-content($fa-var-autoprefixer); } +.#{$fa-css-prefix}-avianex:before { content: fa-content($fa-var-avianex); } +.#{$fa-css-prefix}-aviato:before { content: fa-content($fa-var-aviato); } +.#{$fa-css-prefix}-award:before { content: fa-content($fa-var-award); } +.#{$fa-css-prefix}-aws:before { content: fa-content($fa-var-aws); } +.#{$fa-css-prefix}-baby:before { content: fa-content($fa-var-baby); } +.#{$fa-css-prefix}-baby-carriage:before { content: fa-content($fa-var-baby-carriage); } +.#{$fa-css-prefix}-backspace:before { content: fa-content($fa-var-backspace); } +.#{$fa-css-prefix}-backward:before { content: fa-content($fa-var-backward); } +.#{$fa-css-prefix}-bacon:before { content: fa-content($fa-var-bacon); } +.#{$fa-css-prefix}-bacteria:before { content: fa-content($fa-var-bacteria); } +.#{$fa-css-prefix}-bacterium:before { content: fa-content($fa-var-bacterium); } +.#{$fa-css-prefix}-bahai:before { content: fa-content($fa-var-bahai); } +.#{$fa-css-prefix}-balance-scale:before { content: fa-content($fa-var-balance-scale); } +.#{$fa-css-prefix}-balance-scale-left:before { content: fa-content($fa-var-balance-scale-left); } +.#{$fa-css-prefix}-balance-scale-right:before { content: fa-content($fa-var-balance-scale-right); } +.#{$fa-css-prefix}-ban:before { content: fa-content($fa-var-ban); } +.#{$fa-css-prefix}-band-aid:before { content: fa-content($fa-var-band-aid); } +.#{$fa-css-prefix}-bandcamp:before { content: fa-content($fa-var-bandcamp); } +.#{$fa-css-prefix}-barcode:before { content: fa-content($fa-var-barcode); } +.#{$fa-css-prefix}-bars:before { content: fa-content($fa-var-bars); } +.#{$fa-css-prefix}-baseball-ball:before { content: fa-content($fa-var-baseball-ball); } +.#{$fa-css-prefix}-basketball-ball:before { content: fa-content($fa-var-basketball-ball); } +.#{$fa-css-prefix}-bath:before { content: fa-content($fa-var-bath); } +.#{$fa-css-prefix}-battery-empty:before { content: fa-content($fa-var-battery-empty); } +.#{$fa-css-prefix}-battery-full:before { content: fa-content($fa-var-battery-full); } +.#{$fa-css-prefix}-battery-half:before { content: fa-content($fa-var-battery-half); } +.#{$fa-css-prefix}-battery-quarter:before { content: fa-content($fa-var-battery-quarter); } +.#{$fa-css-prefix}-battery-three-quarters:before { content: fa-content($fa-var-battery-three-quarters); } +.#{$fa-css-prefix}-battle-net:before { content: fa-content($fa-var-battle-net); } +.#{$fa-css-prefix}-bed:before { content: fa-content($fa-var-bed); } +.#{$fa-css-prefix}-beer:before { content: fa-content($fa-var-beer); } +.#{$fa-css-prefix}-behance:before { content: fa-content($fa-var-behance); } +.#{$fa-css-prefix}-behance-square:before { content: fa-content($fa-var-behance-square); } +.#{$fa-css-prefix}-bell:before { content: fa-content($fa-var-bell); } +.#{$fa-css-prefix}-bell-slash:before { content: fa-content($fa-var-bell-slash); } +.#{$fa-css-prefix}-bezier-curve:before { content: fa-content($fa-var-bezier-curve); } +.#{$fa-css-prefix}-bible:before { content: fa-content($fa-var-bible); } +.#{$fa-css-prefix}-bicycle:before { content: fa-content($fa-var-bicycle); } +.#{$fa-css-prefix}-biking:before { content: fa-content($fa-var-biking); } +.#{$fa-css-prefix}-bimobject:before { content: fa-content($fa-var-bimobject); } +.#{$fa-css-prefix}-binoculars:before { content: fa-content($fa-var-binoculars); } +.#{$fa-css-prefix}-biohazard:before { content: fa-content($fa-var-biohazard); } +.#{$fa-css-prefix}-birthday-cake:before { content: fa-content($fa-var-birthday-cake); } +.#{$fa-css-prefix}-bitbucket:before { content: fa-content($fa-var-bitbucket); } +.#{$fa-css-prefix}-bitcoin:before { content: fa-content($fa-var-bitcoin); } +.#{$fa-css-prefix}-bity:before { content: fa-content($fa-var-bity); } +.#{$fa-css-prefix}-black-tie:before { content: fa-content($fa-var-black-tie); } +.#{$fa-css-prefix}-blackberry:before { content: fa-content($fa-var-blackberry); } +.#{$fa-css-prefix}-blender:before { content: fa-content($fa-var-blender); } +.#{$fa-css-prefix}-blender-phone:before { content: fa-content($fa-var-blender-phone); } +.#{$fa-css-prefix}-blind:before { content: fa-content($fa-var-blind); } +.#{$fa-css-prefix}-blog:before { content: fa-content($fa-var-blog); } +.#{$fa-css-prefix}-blogger:before { content: fa-content($fa-var-blogger); } +.#{$fa-css-prefix}-blogger-b:before { content: fa-content($fa-var-blogger-b); } +.#{$fa-css-prefix}-bluetooth:before { content: fa-content($fa-var-bluetooth); } +.#{$fa-css-prefix}-bluetooth-b:before { content: fa-content($fa-var-bluetooth-b); } +.#{$fa-css-prefix}-bold:before { content: fa-content($fa-var-bold); } +.#{$fa-css-prefix}-bolt:before { content: fa-content($fa-var-bolt); } +.#{$fa-css-prefix}-bomb:before { content: fa-content($fa-var-bomb); } +.#{$fa-css-prefix}-bone:before { content: fa-content($fa-var-bone); } +.#{$fa-css-prefix}-bong:before { content: fa-content($fa-var-bong); } +.#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); } +.#{$fa-css-prefix}-book-dead:before { content: fa-content($fa-var-book-dead); } +.#{$fa-css-prefix}-book-medical:before { content: fa-content($fa-var-book-medical); } +.#{$fa-css-prefix}-book-open:before { content: fa-content($fa-var-book-open); } +.#{$fa-css-prefix}-book-reader:before { content: fa-content($fa-var-book-reader); } +.#{$fa-css-prefix}-bookmark:before { content: fa-content($fa-var-bookmark); } +.#{$fa-css-prefix}-bootstrap:before { content: fa-content($fa-var-bootstrap); } +.#{$fa-css-prefix}-border-all:before { content: fa-content($fa-var-border-all); } +.#{$fa-css-prefix}-border-none:before { content: fa-content($fa-var-border-none); } +.#{$fa-css-prefix}-border-style:before { content: fa-content($fa-var-border-style); } +.#{$fa-css-prefix}-bowling-ball:before { content: fa-content($fa-var-bowling-ball); } +.#{$fa-css-prefix}-box:before { content: fa-content($fa-var-box); } +.#{$fa-css-prefix}-box-open:before { content: fa-content($fa-var-box-open); } +.#{$fa-css-prefix}-box-tissue:before { content: fa-content($fa-var-box-tissue); } +.#{$fa-css-prefix}-boxes:before { content: fa-content($fa-var-boxes); } +.#{$fa-css-prefix}-braille:before { content: fa-content($fa-var-braille); } +.#{$fa-css-prefix}-brain:before { content: fa-content($fa-var-brain); } +.#{$fa-css-prefix}-bread-slice:before { content: fa-content($fa-var-bread-slice); } +.#{$fa-css-prefix}-briefcase:before { content: fa-content($fa-var-briefcase); } +.#{$fa-css-prefix}-briefcase-medical:before { content: fa-content($fa-var-briefcase-medical); } +.#{$fa-css-prefix}-broadcast-tower:before { content: fa-content($fa-var-broadcast-tower); } +.#{$fa-css-prefix}-broom:before { content: fa-content($fa-var-broom); } +.#{$fa-css-prefix}-brush:before { content: fa-content($fa-var-brush); } +.#{$fa-css-prefix}-btc:before { content: fa-content($fa-var-btc); } +.#{$fa-css-prefix}-buffer:before { content: fa-content($fa-var-buffer); } +.#{$fa-css-prefix}-bug:before { content: fa-content($fa-var-bug); } +.#{$fa-css-prefix}-building:before { content: fa-content($fa-var-building); } +.#{$fa-css-prefix}-bullhorn:before { content: fa-content($fa-var-bullhorn); } +.#{$fa-css-prefix}-bullseye:before { content: fa-content($fa-var-bullseye); } +.#{$fa-css-prefix}-burn:before { content: fa-content($fa-var-burn); } +.#{$fa-css-prefix}-buromobelexperte:before { content: fa-content($fa-var-buromobelexperte); } +.#{$fa-css-prefix}-bus:before { content: fa-content($fa-var-bus); } +.#{$fa-css-prefix}-bus-alt:before { content: fa-content($fa-var-bus-alt); } +.#{$fa-css-prefix}-business-time:before { content: fa-content($fa-var-business-time); } +.#{$fa-css-prefix}-buy-n-large:before { content: fa-content($fa-var-buy-n-large); } +.#{$fa-css-prefix}-buysellads:before { content: fa-content($fa-var-buysellads); } +.#{$fa-css-prefix}-calculator:before { content: fa-content($fa-var-calculator); } +.#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); } +.#{$fa-css-prefix}-calendar-alt:before { content: fa-content($fa-var-calendar-alt); } +.#{$fa-css-prefix}-calendar-check:before { content: fa-content($fa-var-calendar-check); } +.#{$fa-css-prefix}-calendar-day:before { content: fa-content($fa-var-calendar-day); } +.#{$fa-css-prefix}-calendar-minus:before { content: fa-content($fa-var-calendar-minus); } +.#{$fa-css-prefix}-calendar-plus:before { content: fa-content($fa-var-calendar-plus); } +.#{$fa-css-prefix}-calendar-times:before { content: fa-content($fa-var-calendar-times); } +.#{$fa-css-prefix}-calendar-week:before { content: fa-content($fa-var-calendar-week); } +.#{$fa-css-prefix}-camera:before { content: fa-content($fa-var-camera); } +.#{$fa-css-prefix}-camera-retro:before { content: fa-content($fa-var-camera-retro); } +.#{$fa-css-prefix}-campground:before { content: fa-content($fa-var-campground); } +.#{$fa-css-prefix}-canadian-maple-leaf:before { content: fa-content($fa-var-canadian-maple-leaf); } +.#{$fa-css-prefix}-candy-cane:before { content: fa-content($fa-var-candy-cane); } +.#{$fa-css-prefix}-cannabis:before { content: fa-content($fa-var-cannabis); } +.#{$fa-css-prefix}-capsules:before { content: fa-content($fa-var-capsules); } +.#{$fa-css-prefix}-car:before { content: fa-content($fa-var-car); } +.#{$fa-css-prefix}-car-alt:before { content: fa-content($fa-var-car-alt); } +.#{$fa-css-prefix}-car-battery:before { content: fa-content($fa-var-car-battery); } +.#{$fa-css-prefix}-car-crash:before { content: fa-content($fa-var-car-crash); } +.#{$fa-css-prefix}-car-side:before { content: fa-content($fa-var-car-side); } +.#{$fa-css-prefix}-caravan:before { content: fa-content($fa-var-caravan); } +.#{$fa-css-prefix}-caret-down:before { content: fa-content($fa-var-caret-down); } +.#{$fa-css-prefix}-caret-left:before { content: fa-content($fa-var-caret-left); } +.#{$fa-css-prefix}-caret-right:before { content: fa-content($fa-var-caret-right); } +.#{$fa-css-prefix}-caret-square-down:before { content: fa-content($fa-var-caret-square-down); } +.#{$fa-css-prefix}-caret-square-left:before { content: fa-content($fa-var-caret-square-left); } +.#{$fa-css-prefix}-caret-square-right:before { content: fa-content($fa-var-caret-square-right); } +.#{$fa-css-prefix}-caret-square-up:before { content: fa-content($fa-var-caret-square-up); } +.#{$fa-css-prefix}-caret-up:before { content: fa-content($fa-var-caret-up); } +.#{$fa-css-prefix}-carrot:before { content: fa-content($fa-var-carrot); } +.#{$fa-css-prefix}-cart-arrow-down:before { content: fa-content($fa-var-cart-arrow-down); } +.#{$fa-css-prefix}-cart-plus:before { content: fa-content($fa-var-cart-plus); } +.#{$fa-css-prefix}-cash-register:before { content: fa-content($fa-var-cash-register); } +.#{$fa-css-prefix}-cat:before { content: fa-content($fa-var-cat); } +.#{$fa-css-prefix}-cc-amazon-pay:before { content: fa-content($fa-var-cc-amazon-pay); } +.#{$fa-css-prefix}-cc-amex:before { content: fa-content($fa-var-cc-amex); } +.#{$fa-css-prefix}-cc-apple-pay:before { content: fa-content($fa-var-cc-apple-pay); } +.#{$fa-css-prefix}-cc-diners-club:before { content: fa-content($fa-var-cc-diners-club); } +.#{$fa-css-prefix}-cc-discover:before { content: fa-content($fa-var-cc-discover); } +.#{$fa-css-prefix}-cc-jcb:before { content: fa-content($fa-var-cc-jcb); } +.#{$fa-css-prefix}-cc-mastercard:before { content: fa-content($fa-var-cc-mastercard); } +.#{$fa-css-prefix}-cc-paypal:before { content: fa-content($fa-var-cc-paypal); } +.#{$fa-css-prefix}-cc-stripe:before { content: fa-content($fa-var-cc-stripe); } +.#{$fa-css-prefix}-cc-visa:before { content: fa-content($fa-var-cc-visa); } +.#{$fa-css-prefix}-centercode:before { content: fa-content($fa-var-centercode); } +.#{$fa-css-prefix}-centos:before { content: fa-content($fa-var-centos); } +.#{$fa-css-prefix}-certificate:before { content: fa-content($fa-var-certificate); } +.#{$fa-css-prefix}-chair:before { content: fa-content($fa-var-chair); } +.#{$fa-css-prefix}-chalkboard:before { content: fa-content($fa-var-chalkboard); } +.#{$fa-css-prefix}-chalkboard-teacher:before { content: fa-content($fa-var-chalkboard-teacher); } +.#{$fa-css-prefix}-charging-station:before { content: fa-content($fa-var-charging-station); } +.#{$fa-css-prefix}-chart-area:before { content: fa-content($fa-var-chart-area); } +.#{$fa-css-prefix}-chart-bar:before { content: fa-content($fa-var-chart-bar); } +.#{$fa-css-prefix}-chart-line:before { content: fa-content($fa-var-chart-line); } +.#{$fa-css-prefix}-chart-pie:before { content: fa-content($fa-var-chart-pie); } +.#{$fa-css-prefix}-check:before { content: fa-content($fa-var-check); } +.#{$fa-css-prefix}-check-circle:before { content: fa-content($fa-var-check-circle); } +.#{$fa-css-prefix}-check-double:before { content: fa-content($fa-var-check-double); } +.#{$fa-css-prefix}-check-square:before { content: fa-content($fa-var-check-square); } +.#{$fa-css-prefix}-cheese:before { content: fa-content($fa-var-cheese); } +.#{$fa-css-prefix}-chess:before { content: fa-content($fa-var-chess); } +.#{$fa-css-prefix}-chess-bishop:before { content: fa-content($fa-var-chess-bishop); } +.#{$fa-css-prefix}-chess-board:before { content: fa-content($fa-var-chess-board); } +.#{$fa-css-prefix}-chess-king:before { content: fa-content($fa-var-chess-king); } +.#{$fa-css-prefix}-chess-knight:before { content: fa-content($fa-var-chess-knight); } +.#{$fa-css-prefix}-chess-pawn:before { content: fa-content($fa-var-chess-pawn); } +.#{$fa-css-prefix}-chess-queen:before { content: fa-content($fa-var-chess-queen); } +.#{$fa-css-prefix}-chess-rook:before { content: fa-content($fa-var-chess-rook); } +.#{$fa-css-prefix}-chevron-circle-down:before { content: fa-content($fa-var-chevron-circle-down); } +.#{$fa-css-prefix}-chevron-circle-left:before { content: fa-content($fa-var-chevron-circle-left); } +.#{$fa-css-prefix}-chevron-circle-right:before { content: fa-content($fa-var-chevron-circle-right); } +.#{$fa-css-prefix}-chevron-circle-up:before { content: fa-content($fa-var-chevron-circle-up); } +.#{$fa-css-prefix}-chevron-down:before { content: fa-content($fa-var-chevron-down); } +.#{$fa-css-prefix}-chevron-left:before { content: fa-content($fa-var-chevron-left); } +.#{$fa-css-prefix}-chevron-right:before { content: fa-content($fa-var-chevron-right); } +.#{$fa-css-prefix}-chevron-up:before { content: fa-content($fa-var-chevron-up); } +.#{$fa-css-prefix}-child:before { content: fa-content($fa-var-child); } +.#{$fa-css-prefix}-chrome:before { content: fa-content($fa-var-chrome); } +.#{$fa-css-prefix}-chromecast:before { content: fa-content($fa-var-chromecast); } +.#{$fa-css-prefix}-church:before { content: fa-content($fa-var-church); } +.#{$fa-css-prefix}-circle:before { content: fa-content($fa-var-circle); } +.#{$fa-css-prefix}-circle-notch:before { content: fa-content($fa-var-circle-notch); } +.#{$fa-css-prefix}-city:before { content: fa-content($fa-var-city); } +.#{$fa-css-prefix}-clinic-medical:before { content: fa-content($fa-var-clinic-medical); } +.#{$fa-css-prefix}-clipboard:before { content: fa-content($fa-var-clipboard); } +.#{$fa-css-prefix}-clipboard-check:before { content: fa-content($fa-var-clipboard-check); } +.#{$fa-css-prefix}-clipboard-list:before { content: fa-content($fa-var-clipboard-list); } +.#{$fa-css-prefix}-clock:before { content: fa-content($fa-var-clock); } +.#{$fa-css-prefix}-clone:before { content: fa-content($fa-var-clone); } +.#{$fa-css-prefix}-closed-captioning:before { content: fa-content($fa-var-closed-captioning); } +.#{$fa-css-prefix}-cloud:before { content: fa-content($fa-var-cloud); } +.#{$fa-css-prefix}-cloud-download-alt:before { content: fa-content($fa-var-cloud-download-alt); } +.#{$fa-css-prefix}-cloud-meatball:before { content: fa-content($fa-var-cloud-meatball); } +.#{$fa-css-prefix}-cloud-moon:before { content: fa-content($fa-var-cloud-moon); } +.#{$fa-css-prefix}-cloud-moon-rain:before { content: fa-content($fa-var-cloud-moon-rain); } +.#{$fa-css-prefix}-cloud-rain:before { content: fa-content($fa-var-cloud-rain); } +.#{$fa-css-prefix}-cloud-showers-heavy:before { content: fa-content($fa-var-cloud-showers-heavy); } +.#{$fa-css-prefix}-cloud-sun:before { content: fa-content($fa-var-cloud-sun); } +.#{$fa-css-prefix}-cloud-sun-rain:before { content: fa-content($fa-var-cloud-sun-rain); } +.#{$fa-css-prefix}-cloud-upload-alt:before { content: fa-content($fa-var-cloud-upload-alt); } +.#{$fa-css-prefix}-cloudflare:before { content: fa-content($fa-var-cloudflare); } +.#{$fa-css-prefix}-cloudscale:before { content: fa-content($fa-var-cloudscale); } +.#{$fa-css-prefix}-cloudsmith:before { content: fa-content($fa-var-cloudsmith); } +.#{$fa-css-prefix}-cloudversify:before { content: fa-content($fa-var-cloudversify); } +.#{$fa-css-prefix}-cocktail:before { content: fa-content($fa-var-cocktail); } +.#{$fa-css-prefix}-code:before { content: fa-content($fa-var-code); } +.#{$fa-css-prefix}-code-branch:before { content: fa-content($fa-var-code-branch); } +.#{$fa-css-prefix}-codepen:before { content: fa-content($fa-var-codepen); } +.#{$fa-css-prefix}-codiepie:before { content: fa-content($fa-var-codiepie); } +.#{$fa-css-prefix}-coffee:before { content: fa-content($fa-var-coffee); } +.#{$fa-css-prefix}-cog:before { content: fa-content($fa-var-cog); } +.#{$fa-css-prefix}-cogs:before { content: fa-content($fa-var-cogs); } +.#{$fa-css-prefix}-coins:before { content: fa-content($fa-var-coins); } +.#{$fa-css-prefix}-columns:before { content: fa-content($fa-var-columns); } +.#{$fa-css-prefix}-comment:before { content: fa-content($fa-var-comment); } +.#{$fa-css-prefix}-comment-alt:before { content: fa-content($fa-var-comment-alt); } +.#{$fa-css-prefix}-comment-dollar:before { content: fa-content($fa-var-comment-dollar); } +.#{$fa-css-prefix}-comment-dots:before { content: fa-content($fa-var-comment-dots); } +.#{$fa-css-prefix}-comment-medical:before { content: fa-content($fa-var-comment-medical); } +.#{$fa-css-prefix}-comment-slash:before { content: fa-content($fa-var-comment-slash); } +.#{$fa-css-prefix}-comments:before { content: fa-content($fa-var-comments); } +.#{$fa-css-prefix}-comments-dollar:before { content: fa-content($fa-var-comments-dollar); } +.#{$fa-css-prefix}-compact-disc:before { content: fa-content($fa-var-compact-disc); } +.#{$fa-css-prefix}-compass:before { content: fa-content($fa-var-compass); } +.#{$fa-css-prefix}-compress:before { content: fa-content($fa-var-compress); } +.#{$fa-css-prefix}-compress-alt:before { content: fa-content($fa-var-compress-alt); } +.#{$fa-css-prefix}-compress-arrows-alt:before { content: fa-content($fa-var-compress-arrows-alt); } +.#{$fa-css-prefix}-concierge-bell:before { content: fa-content($fa-var-concierge-bell); } +.#{$fa-css-prefix}-confluence:before { content: fa-content($fa-var-confluence); } +.#{$fa-css-prefix}-connectdevelop:before { content: fa-content($fa-var-connectdevelop); } +.#{$fa-css-prefix}-contao:before { content: fa-content($fa-var-contao); } +.#{$fa-css-prefix}-cookie:before { content: fa-content($fa-var-cookie); } +.#{$fa-css-prefix}-cookie-bite:before { content: fa-content($fa-var-cookie-bite); } +.#{$fa-css-prefix}-copy:before { content: fa-content($fa-var-copy); } +.#{$fa-css-prefix}-copyright:before { content: fa-content($fa-var-copyright); } +.#{$fa-css-prefix}-cotton-bureau:before { content: fa-content($fa-var-cotton-bureau); } +.#{$fa-css-prefix}-couch:before { content: fa-content($fa-var-couch); } +.#{$fa-css-prefix}-cpanel:before { content: fa-content($fa-var-cpanel); } +.#{$fa-css-prefix}-creative-commons:before { content: fa-content($fa-var-creative-commons); } +.#{$fa-css-prefix}-creative-commons-by:before { content: fa-content($fa-var-creative-commons-by); } +.#{$fa-css-prefix}-creative-commons-nc:before { content: fa-content($fa-var-creative-commons-nc); } +.#{$fa-css-prefix}-creative-commons-nc-eu:before { content: fa-content($fa-var-creative-commons-nc-eu); } +.#{$fa-css-prefix}-creative-commons-nc-jp:before { content: fa-content($fa-var-creative-commons-nc-jp); } +.#{$fa-css-prefix}-creative-commons-nd:before { content: fa-content($fa-var-creative-commons-nd); } +.#{$fa-css-prefix}-creative-commons-pd:before { content: fa-content($fa-var-creative-commons-pd); } +.#{$fa-css-prefix}-creative-commons-pd-alt:before { content: fa-content($fa-var-creative-commons-pd-alt); } +.#{$fa-css-prefix}-creative-commons-remix:before { content: fa-content($fa-var-creative-commons-remix); } +.#{$fa-css-prefix}-creative-commons-sa:before { content: fa-content($fa-var-creative-commons-sa); } +.#{$fa-css-prefix}-creative-commons-sampling:before { content: fa-content($fa-var-creative-commons-sampling); } +.#{$fa-css-prefix}-creative-commons-sampling-plus:before { content: fa-content($fa-var-creative-commons-sampling-plus); } +.#{$fa-css-prefix}-creative-commons-share:before { content: fa-content($fa-var-creative-commons-share); } +.#{$fa-css-prefix}-creative-commons-zero:before { content: fa-content($fa-var-creative-commons-zero); } +.#{$fa-css-prefix}-credit-card:before { content: fa-content($fa-var-credit-card); } +.#{$fa-css-prefix}-critical-role:before { content: fa-content($fa-var-critical-role); } +.#{$fa-css-prefix}-crop:before { content: fa-content($fa-var-crop); } +.#{$fa-css-prefix}-crop-alt:before { content: fa-content($fa-var-crop-alt); } +.#{$fa-css-prefix}-cross:before { content: fa-content($fa-var-cross); } +.#{$fa-css-prefix}-crosshairs:before { content: fa-content($fa-var-crosshairs); } +.#{$fa-css-prefix}-crow:before { content: fa-content($fa-var-crow); } +.#{$fa-css-prefix}-crown:before { content: fa-content($fa-var-crown); } +.#{$fa-css-prefix}-crutch:before { content: fa-content($fa-var-crutch); } +.#{$fa-css-prefix}-css3:before { content: fa-content($fa-var-css3); } +.#{$fa-css-prefix}-css3-alt:before { content: fa-content($fa-var-css3-alt); } +.#{$fa-css-prefix}-cube:before { content: fa-content($fa-var-cube); } +.#{$fa-css-prefix}-cubes:before { content: fa-content($fa-var-cubes); } +.#{$fa-css-prefix}-cut:before { content: fa-content($fa-var-cut); } +.#{$fa-css-prefix}-cuttlefish:before { content: fa-content($fa-var-cuttlefish); } +.#{$fa-css-prefix}-d-and-d:before { content: fa-content($fa-var-d-and-d); } +.#{$fa-css-prefix}-d-and-d-beyond:before { content: fa-content($fa-var-d-and-d-beyond); } +.#{$fa-css-prefix}-dailymotion:before { content: fa-content($fa-var-dailymotion); } +.#{$fa-css-prefix}-dashcube:before { content: fa-content($fa-var-dashcube); } +.#{$fa-css-prefix}-database:before { content: fa-content($fa-var-database); } +.#{$fa-css-prefix}-deaf:before { content: fa-content($fa-var-deaf); } +.#{$fa-css-prefix}-deezer:before { content: fa-content($fa-var-deezer); } +.#{$fa-css-prefix}-delicious:before { content: fa-content($fa-var-delicious); } +.#{$fa-css-prefix}-democrat:before { content: fa-content($fa-var-democrat); } +.#{$fa-css-prefix}-deploydog:before { content: fa-content($fa-var-deploydog); } +.#{$fa-css-prefix}-deskpro:before { content: fa-content($fa-var-deskpro); } +.#{$fa-css-prefix}-desktop:before { content: fa-content($fa-var-desktop); } +.#{$fa-css-prefix}-dev:before { content: fa-content($fa-var-dev); } +.#{$fa-css-prefix}-deviantart:before { content: fa-content($fa-var-deviantart); } +.#{$fa-css-prefix}-dharmachakra:before { content: fa-content($fa-var-dharmachakra); } +.#{$fa-css-prefix}-dhl:before { content: fa-content($fa-var-dhl); } +.#{$fa-css-prefix}-diagnoses:before { content: fa-content($fa-var-diagnoses); } +.#{$fa-css-prefix}-diaspora:before { content: fa-content($fa-var-diaspora); } +.#{$fa-css-prefix}-dice:before { content: fa-content($fa-var-dice); } +.#{$fa-css-prefix}-dice-d20:before { content: fa-content($fa-var-dice-d20); } +.#{$fa-css-prefix}-dice-d6:before { content: fa-content($fa-var-dice-d6); } +.#{$fa-css-prefix}-dice-five:before { content: fa-content($fa-var-dice-five); } +.#{$fa-css-prefix}-dice-four:before { content: fa-content($fa-var-dice-four); } +.#{$fa-css-prefix}-dice-one:before { content: fa-content($fa-var-dice-one); } +.#{$fa-css-prefix}-dice-six:before { content: fa-content($fa-var-dice-six); } +.#{$fa-css-prefix}-dice-three:before { content: fa-content($fa-var-dice-three); } +.#{$fa-css-prefix}-dice-two:before { content: fa-content($fa-var-dice-two); } +.#{$fa-css-prefix}-digg:before { content: fa-content($fa-var-digg); } +.#{$fa-css-prefix}-digital-ocean:before { content: fa-content($fa-var-digital-ocean); } +.#{$fa-css-prefix}-digital-tachograph:before { content: fa-content($fa-var-digital-tachograph); } +.#{$fa-css-prefix}-directions:before { content: fa-content($fa-var-directions); } +.#{$fa-css-prefix}-discord:before { content: fa-content($fa-var-discord); } +.#{$fa-css-prefix}-discourse:before { content: fa-content($fa-var-discourse); } +.#{$fa-css-prefix}-disease:before { content: fa-content($fa-var-disease); } +.#{$fa-css-prefix}-divide:before { content: fa-content($fa-var-divide); } +.#{$fa-css-prefix}-dizzy:before { content: fa-content($fa-var-dizzy); } +.#{$fa-css-prefix}-dna:before { content: fa-content($fa-var-dna); } +.#{$fa-css-prefix}-dochub:before { content: fa-content($fa-var-dochub); } +.#{$fa-css-prefix}-docker:before { content: fa-content($fa-var-docker); } +.#{$fa-css-prefix}-dog:before { content: fa-content($fa-var-dog); } +.#{$fa-css-prefix}-dollar-sign:before { content: fa-content($fa-var-dollar-sign); } +.#{$fa-css-prefix}-dolly:before { content: fa-content($fa-var-dolly); } +.#{$fa-css-prefix}-dolly-flatbed:before { content: fa-content($fa-var-dolly-flatbed); } +.#{$fa-css-prefix}-donate:before { content: fa-content($fa-var-donate); } +.#{$fa-css-prefix}-door-closed:before { content: fa-content($fa-var-door-closed); } +.#{$fa-css-prefix}-door-open:before { content: fa-content($fa-var-door-open); } +.#{$fa-css-prefix}-dot-circle:before { content: fa-content($fa-var-dot-circle); } +.#{$fa-css-prefix}-dove:before { content: fa-content($fa-var-dove); } +.#{$fa-css-prefix}-download:before { content: fa-content($fa-var-download); } +.#{$fa-css-prefix}-draft2digital:before { content: fa-content($fa-var-draft2digital); } +.#{$fa-css-prefix}-drafting-compass:before { content: fa-content($fa-var-drafting-compass); } +.#{$fa-css-prefix}-dragon:before { content: fa-content($fa-var-dragon); } +.#{$fa-css-prefix}-draw-polygon:before { content: fa-content($fa-var-draw-polygon); } +.#{$fa-css-prefix}-dribbble:before { content: fa-content($fa-var-dribbble); } +.#{$fa-css-prefix}-dribbble-square:before { content: fa-content($fa-var-dribbble-square); } +.#{$fa-css-prefix}-dropbox:before { content: fa-content($fa-var-dropbox); } +.#{$fa-css-prefix}-drum:before { content: fa-content($fa-var-drum); } +.#{$fa-css-prefix}-drum-steelpan:before { content: fa-content($fa-var-drum-steelpan); } +.#{$fa-css-prefix}-drumstick-bite:before { content: fa-content($fa-var-drumstick-bite); } +.#{$fa-css-prefix}-drupal:before { content: fa-content($fa-var-drupal); } +.#{$fa-css-prefix}-dumbbell:before { content: fa-content($fa-var-dumbbell); } +.#{$fa-css-prefix}-dumpster:before { content: fa-content($fa-var-dumpster); } +.#{$fa-css-prefix}-dumpster-fire:before { content: fa-content($fa-var-dumpster-fire); } +.#{$fa-css-prefix}-dungeon:before { content: fa-content($fa-var-dungeon); } +.#{$fa-css-prefix}-dyalog:before { content: fa-content($fa-var-dyalog); } +.#{$fa-css-prefix}-earlybirds:before { content: fa-content($fa-var-earlybirds); } +.#{$fa-css-prefix}-ebay:before { content: fa-content($fa-var-ebay); } +.#{$fa-css-prefix}-edge:before { content: fa-content($fa-var-edge); } +.#{$fa-css-prefix}-edge-legacy:before { content: fa-content($fa-var-edge-legacy); } +.#{$fa-css-prefix}-edit:before { content: fa-content($fa-var-edit); } +.#{$fa-css-prefix}-egg:before { content: fa-content($fa-var-egg); } +.#{$fa-css-prefix}-eject:before { content: fa-content($fa-var-eject); } +.#{$fa-css-prefix}-elementor:before { content: fa-content($fa-var-elementor); } +.#{$fa-css-prefix}-ellipsis-h:before { content: fa-content($fa-var-ellipsis-h); } +.#{$fa-css-prefix}-ellipsis-v:before { content: fa-content($fa-var-ellipsis-v); } +.#{$fa-css-prefix}-ello:before { content: fa-content($fa-var-ello); } +.#{$fa-css-prefix}-ember:before { content: fa-content($fa-var-ember); } +.#{$fa-css-prefix}-empire:before { content: fa-content($fa-var-empire); } +.#{$fa-css-prefix}-envelope:before { content: fa-content($fa-var-envelope); } +.#{$fa-css-prefix}-envelope-open:before { content: fa-content($fa-var-envelope-open); } +.#{$fa-css-prefix}-envelope-open-text:before { content: fa-content($fa-var-envelope-open-text); } +.#{$fa-css-prefix}-envelope-square:before { content: fa-content($fa-var-envelope-square); } +.#{$fa-css-prefix}-envira:before { content: fa-content($fa-var-envira); } +.#{$fa-css-prefix}-equals:before { content: fa-content($fa-var-equals); } +.#{$fa-css-prefix}-eraser:before { content: fa-content($fa-var-eraser); } +.#{$fa-css-prefix}-erlang:before { content: fa-content($fa-var-erlang); } +.#{$fa-css-prefix}-ethereum:before { content: fa-content($fa-var-ethereum); } +.#{$fa-css-prefix}-ethernet:before { content: fa-content($fa-var-ethernet); } +.#{$fa-css-prefix}-etsy:before { content: fa-content($fa-var-etsy); } +.#{$fa-css-prefix}-euro-sign:before { content: fa-content($fa-var-euro-sign); } +.#{$fa-css-prefix}-evernote:before { content: fa-content($fa-var-evernote); } +.#{$fa-css-prefix}-exchange-alt:before { content: fa-content($fa-var-exchange-alt); } +.#{$fa-css-prefix}-exclamation:before { content: fa-content($fa-var-exclamation); } +.#{$fa-css-prefix}-exclamation-circle:before { content: fa-content($fa-var-exclamation-circle); } +.#{$fa-css-prefix}-exclamation-triangle:before { content: fa-content($fa-var-exclamation-triangle); } +.#{$fa-css-prefix}-expand:before { content: fa-content($fa-var-expand); } +.#{$fa-css-prefix}-expand-alt:before { content: fa-content($fa-var-expand-alt); } +.#{$fa-css-prefix}-expand-arrows-alt:before { content: fa-content($fa-var-expand-arrows-alt); } +.#{$fa-css-prefix}-expeditedssl:before { content: fa-content($fa-var-expeditedssl); } +.#{$fa-css-prefix}-external-link-alt:before { content: fa-content($fa-var-external-link-alt); } +.#{$fa-css-prefix}-external-link-square-alt:before { content: fa-content($fa-var-external-link-square-alt); } +.#{$fa-css-prefix}-eye:before { content: fa-content($fa-var-eye); } +.#{$fa-css-prefix}-eye-dropper:before { content: fa-content($fa-var-eye-dropper); } +.#{$fa-css-prefix}-eye-slash:before { content: fa-content($fa-var-eye-slash); } +.#{$fa-css-prefix}-facebook:before { content: fa-content($fa-var-facebook); } +.#{$fa-css-prefix}-facebook-f:before { content: fa-content($fa-var-facebook-f); } +.#{$fa-css-prefix}-facebook-messenger:before { content: fa-content($fa-var-facebook-messenger); } +.#{$fa-css-prefix}-facebook-square:before { content: fa-content($fa-var-facebook-square); } +.#{$fa-css-prefix}-fan:before { content: fa-content($fa-var-fan); } +.#{$fa-css-prefix}-fantasy-flight-games:before { content: fa-content($fa-var-fantasy-flight-games); } +.#{$fa-css-prefix}-fast-backward:before { content: fa-content($fa-var-fast-backward); } +.#{$fa-css-prefix}-fast-forward:before { content: fa-content($fa-var-fast-forward); } +.#{$fa-css-prefix}-faucet:before { content: fa-content($fa-var-faucet); } +.#{$fa-css-prefix}-fax:before { content: fa-content($fa-var-fax); } +.#{$fa-css-prefix}-feather:before { content: fa-content($fa-var-feather); } +.#{$fa-css-prefix}-feather-alt:before { content: fa-content($fa-var-feather-alt); } +.#{$fa-css-prefix}-fedex:before { content: fa-content($fa-var-fedex); } +.#{$fa-css-prefix}-fedora:before { content: fa-content($fa-var-fedora); } +.#{$fa-css-prefix}-female:before { content: fa-content($fa-var-female); } +.#{$fa-css-prefix}-fighter-jet:before { content: fa-content($fa-var-fighter-jet); } +.#{$fa-css-prefix}-figma:before { content: fa-content($fa-var-figma); } +.#{$fa-css-prefix}-file:before { content: fa-content($fa-var-file); } +.#{$fa-css-prefix}-file-alt:before { content: fa-content($fa-var-file-alt); } +.#{$fa-css-prefix}-file-archive:before { content: fa-content($fa-var-file-archive); } +.#{$fa-css-prefix}-file-audio:before { content: fa-content($fa-var-file-audio); } +.#{$fa-css-prefix}-file-code:before { content: fa-content($fa-var-file-code); } +.#{$fa-css-prefix}-file-contract:before { content: fa-content($fa-var-file-contract); } +.#{$fa-css-prefix}-file-csv:before { content: fa-content($fa-var-file-csv); } +.#{$fa-css-prefix}-file-download:before { content: fa-content($fa-var-file-download); } +.#{$fa-css-prefix}-file-excel:before { content: fa-content($fa-var-file-excel); } +.#{$fa-css-prefix}-file-export:before { content: fa-content($fa-var-file-export); } +.#{$fa-css-prefix}-file-image:before { content: fa-content($fa-var-file-image); } +.#{$fa-css-prefix}-file-import:before { content: fa-content($fa-var-file-import); } +.#{$fa-css-prefix}-file-invoice:before { content: fa-content($fa-var-file-invoice); } +.#{$fa-css-prefix}-file-invoice-dollar:before { content: fa-content($fa-var-file-invoice-dollar); } +.#{$fa-css-prefix}-file-medical:before { content: fa-content($fa-var-file-medical); } +.#{$fa-css-prefix}-file-medical-alt:before { content: fa-content($fa-var-file-medical-alt); } +.#{$fa-css-prefix}-file-pdf:before { content: fa-content($fa-var-file-pdf); } +.#{$fa-css-prefix}-file-powerpoint:before { content: fa-content($fa-var-file-powerpoint); } +.#{$fa-css-prefix}-file-prescription:before { content: fa-content($fa-var-file-prescription); } +.#{$fa-css-prefix}-file-signature:before { content: fa-content($fa-var-file-signature); } +.#{$fa-css-prefix}-file-upload:before { content: fa-content($fa-var-file-upload); } +.#{$fa-css-prefix}-file-video:before { content: fa-content($fa-var-file-video); } +.#{$fa-css-prefix}-file-word:before { content: fa-content($fa-var-file-word); } +.#{$fa-css-prefix}-fill:before { content: fa-content($fa-var-fill); } +.#{$fa-css-prefix}-fill-drip:before { content: fa-content($fa-var-fill-drip); } +.#{$fa-css-prefix}-film:before { content: fa-content($fa-var-film); } +.#{$fa-css-prefix}-filter:before { content: fa-content($fa-var-filter); } +.#{$fa-css-prefix}-fingerprint:before { content: fa-content($fa-var-fingerprint); } +.#{$fa-css-prefix}-fire:before { content: fa-content($fa-var-fire); } +.#{$fa-css-prefix}-fire-alt:before { content: fa-content($fa-var-fire-alt); } +.#{$fa-css-prefix}-fire-extinguisher:before { content: fa-content($fa-var-fire-extinguisher); } +.#{$fa-css-prefix}-firefox:before { content: fa-content($fa-var-firefox); } +.#{$fa-css-prefix}-firefox-browser:before { content: fa-content($fa-var-firefox-browser); } +.#{$fa-css-prefix}-first-aid:before { content: fa-content($fa-var-first-aid); } +.#{$fa-css-prefix}-first-order:before { content: fa-content($fa-var-first-order); } +.#{$fa-css-prefix}-first-order-alt:before { content: fa-content($fa-var-first-order-alt); } +.#{$fa-css-prefix}-firstdraft:before { content: fa-content($fa-var-firstdraft); } +.#{$fa-css-prefix}-fish:before { content: fa-content($fa-var-fish); } +.#{$fa-css-prefix}-fist-raised:before { content: fa-content($fa-var-fist-raised); } +.#{$fa-css-prefix}-flag:before { content: fa-content($fa-var-flag); } +.#{$fa-css-prefix}-flag-checkered:before { content: fa-content($fa-var-flag-checkered); } +.#{$fa-css-prefix}-flag-usa:before { content: fa-content($fa-var-flag-usa); } +.#{$fa-css-prefix}-flask:before { content: fa-content($fa-var-flask); } +.#{$fa-css-prefix}-flickr:before { content: fa-content($fa-var-flickr); } +.#{$fa-css-prefix}-flipboard:before { content: fa-content($fa-var-flipboard); } +.#{$fa-css-prefix}-flushed:before { content: fa-content($fa-var-flushed); } +.#{$fa-css-prefix}-fly:before { content: fa-content($fa-var-fly); } +.#{$fa-css-prefix}-folder:before { content: fa-content($fa-var-folder); } +.#{$fa-css-prefix}-folder-minus:before { content: fa-content($fa-var-folder-minus); } +.#{$fa-css-prefix}-folder-open:before { content: fa-content($fa-var-folder-open); } +.#{$fa-css-prefix}-folder-plus:before { content: fa-content($fa-var-folder-plus); } +.#{$fa-css-prefix}-font:before { content: fa-content($fa-var-font); } +.#{$fa-css-prefix}-font-awesome:before { content: fa-content($fa-var-font-awesome); } +.#{$fa-css-prefix}-font-awesome-alt:before { content: fa-content($fa-var-font-awesome-alt); } +.#{$fa-css-prefix}-font-awesome-flag:before { content: fa-content($fa-var-font-awesome-flag); } +.#{$fa-css-prefix}-font-awesome-logo-full:before { content: fa-content($fa-var-font-awesome-logo-full); } +.#{$fa-css-prefix}-fonticons:before { content: fa-content($fa-var-fonticons); } +.#{$fa-css-prefix}-fonticons-fi:before { content: fa-content($fa-var-fonticons-fi); } +.#{$fa-css-prefix}-football-ball:before { content: fa-content($fa-var-football-ball); } +.#{$fa-css-prefix}-fort-awesome:before { content: fa-content($fa-var-fort-awesome); } +.#{$fa-css-prefix}-fort-awesome-alt:before { content: fa-content($fa-var-fort-awesome-alt); } +.#{$fa-css-prefix}-forumbee:before { content: fa-content($fa-var-forumbee); } +.#{$fa-css-prefix}-forward:before { content: fa-content($fa-var-forward); } +.#{$fa-css-prefix}-foursquare:before { content: fa-content($fa-var-foursquare); } +.#{$fa-css-prefix}-free-code-camp:before { content: fa-content($fa-var-free-code-camp); } +.#{$fa-css-prefix}-freebsd:before { content: fa-content($fa-var-freebsd); } +.#{$fa-css-prefix}-frog:before { content: fa-content($fa-var-frog); } +.#{$fa-css-prefix}-frown:before { content: fa-content($fa-var-frown); } +.#{$fa-css-prefix}-frown-open:before { content: fa-content($fa-var-frown-open); } +.#{$fa-css-prefix}-fulcrum:before { content: fa-content($fa-var-fulcrum); } +.#{$fa-css-prefix}-funnel-dollar:before { content: fa-content($fa-var-funnel-dollar); } +.#{$fa-css-prefix}-futbol:before { content: fa-content($fa-var-futbol); } +.#{$fa-css-prefix}-galactic-republic:before { content: fa-content($fa-var-galactic-republic); } +.#{$fa-css-prefix}-galactic-senate:before { content: fa-content($fa-var-galactic-senate); } +.#{$fa-css-prefix}-gamepad:before { content: fa-content($fa-var-gamepad); } +.#{$fa-css-prefix}-gas-pump:before { content: fa-content($fa-var-gas-pump); } +.#{$fa-css-prefix}-gavel:before { content: fa-content($fa-var-gavel); } +.#{$fa-css-prefix}-gem:before { content: fa-content($fa-var-gem); } +.#{$fa-css-prefix}-genderless:before { content: fa-content($fa-var-genderless); } +.#{$fa-css-prefix}-get-pocket:before { content: fa-content($fa-var-get-pocket); } +.#{$fa-css-prefix}-gg:before { content: fa-content($fa-var-gg); } +.#{$fa-css-prefix}-gg-circle:before { content: fa-content($fa-var-gg-circle); } +.#{$fa-css-prefix}-ghost:before { content: fa-content($fa-var-ghost); } +.#{$fa-css-prefix}-gift:before { content: fa-content($fa-var-gift); } +.#{$fa-css-prefix}-gifts:before { content: fa-content($fa-var-gifts); } +.#{$fa-css-prefix}-git:before { content: fa-content($fa-var-git); } +.#{$fa-css-prefix}-git-alt:before { content: fa-content($fa-var-git-alt); } +.#{$fa-css-prefix}-git-square:before { content: fa-content($fa-var-git-square); } +.#{$fa-css-prefix}-github:before { content: fa-content($fa-var-github); } +.#{$fa-css-prefix}-github-alt:before { content: fa-content($fa-var-github-alt); } +.#{$fa-css-prefix}-github-square:before { content: fa-content($fa-var-github-square); } +.#{$fa-css-prefix}-gitkraken:before { content: fa-content($fa-var-gitkraken); } +.#{$fa-css-prefix}-gitlab:before { content: fa-content($fa-var-gitlab); } +.#{$fa-css-prefix}-gitter:before { content: fa-content($fa-var-gitter); } +.#{$fa-css-prefix}-glass-cheers:before { content: fa-content($fa-var-glass-cheers); } +.#{$fa-css-prefix}-glass-martini:before { content: fa-content($fa-var-glass-martini); } +.#{$fa-css-prefix}-glass-martini-alt:before { content: fa-content($fa-var-glass-martini-alt); } +.#{$fa-css-prefix}-glass-whiskey:before { content: fa-content($fa-var-glass-whiskey); } +.#{$fa-css-prefix}-glasses:before { content: fa-content($fa-var-glasses); } +.#{$fa-css-prefix}-glide:before { content: fa-content($fa-var-glide); } +.#{$fa-css-prefix}-glide-g:before { content: fa-content($fa-var-glide-g); } +.#{$fa-css-prefix}-globe:before { content: fa-content($fa-var-globe); } +.#{$fa-css-prefix}-globe-africa:before { content: fa-content($fa-var-globe-africa); } +.#{$fa-css-prefix}-globe-americas:before { content: fa-content($fa-var-globe-americas); } +.#{$fa-css-prefix}-globe-asia:before { content: fa-content($fa-var-globe-asia); } +.#{$fa-css-prefix}-globe-europe:before { content: fa-content($fa-var-globe-europe); } +.#{$fa-css-prefix}-gofore:before { content: fa-content($fa-var-gofore); } +.#{$fa-css-prefix}-golf-ball:before { content: fa-content($fa-var-golf-ball); } +.#{$fa-css-prefix}-goodreads:before { content: fa-content($fa-var-goodreads); } +.#{$fa-css-prefix}-goodreads-g:before { content: fa-content($fa-var-goodreads-g); } +.#{$fa-css-prefix}-google:before { content: fa-content($fa-var-google); } +.#{$fa-css-prefix}-google-drive:before { content: fa-content($fa-var-google-drive); } +.#{$fa-css-prefix}-google-pay:before { content: fa-content($fa-var-google-pay); } +.#{$fa-css-prefix}-google-play:before { content: fa-content($fa-var-google-play); } +.#{$fa-css-prefix}-google-plus:before { content: fa-content($fa-var-google-plus); } +.#{$fa-css-prefix}-google-plus-g:before { content: fa-content($fa-var-google-plus-g); } +.#{$fa-css-prefix}-google-plus-square:before { content: fa-content($fa-var-google-plus-square); } +.#{$fa-css-prefix}-google-wallet:before { content: fa-content($fa-var-google-wallet); } +.#{$fa-css-prefix}-gopuram:before { content: fa-content($fa-var-gopuram); } +.#{$fa-css-prefix}-graduation-cap:before { content: fa-content($fa-var-graduation-cap); } +.#{$fa-css-prefix}-gratipay:before { content: fa-content($fa-var-gratipay); } +.#{$fa-css-prefix}-grav:before { content: fa-content($fa-var-grav); } +.#{$fa-css-prefix}-greater-than:before { content: fa-content($fa-var-greater-than); } +.#{$fa-css-prefix}-greater-than-equal:before { content: fa-content($fa-var-greater-than-equal); } +.#{$fa-css-prefix}-grimace:before { content: fa-content($fa-var-grimace); } +.#{$fa-css-prefix}-grin:before { content: fa-content($fa-var-grin); } +.#{$fa-css-prefix}-grin-alt:before { content: fa-content($fa-var-grin-alt); } +.#{$fa-css-prefix}-grin-beam:before { content: fa-content($fa-var-grin-beam); } +.#{$fa-css-prefix}-grin-beam-sweat:before { content: fa-content($fa-var-grin-beam-sweat); } +.#{$fa-css-prefix}-grin-hearts:before { content: fa-content($fa-var-grin-hearts); } +.#{$fa-css-prefix}-grin-squint:before { content: fa-content($fa-var-grin-squint); } +.#{$fa-css-prefix}-grin-squint-tears:before { content: fa-content($fa-var-grin-squint-tears); } +.#{$fa-css-prefix}-grin-stars:before { content: fa-content($fa-var-grin-stars); } +.#{$fa-css-prefix}-grin-tears:before { content: fa-content($fa-var-grin-tears); } +.#{$fa-css-prefix}-grin-tongue:before { content: fa-content($fa-var-grin-tongue); } +.#{$fa-css-prefix}-grin-tongue-squint:before { content: fa-content($fa-var-grin-tongue-squint); } +.#{$fa-css-prefix}-grin-tongue-wink:before { content: fa-content($fa-var-grin-tongue-wink); } +.#{$fa-css-prefix}-grin-wink:before { content: fa-content($fa-var-grin-wink); } +.#{$fa-css-prefix}-grip-horizontal:before { content: fa-content($fa-var-grip-horizontal); } +.#{$fa-css-prefix}-grip-lines:before { content: fa-content($fa-var-grip-lines); } +.#{$fa-css-prefix}-grip-lines-vertical:before { content: fa-content($fa-var-grip-lines-vertical); } +.#{$fa-css-prefix}-grip-vertical:before { content: fa-content($fa-var-grip-vertical); } +.#{$fa-css-prefix}-gripfire:before { content: fa-content($fa-var-gripfire); } +.#{$fa-css-prefix}-grunt:before { content: fa-content($fa-var-grunt); } +.#{$fa-css-prefix}-guilded:before { content: fa-content($fa-var-guilded); } +.#{$fa-css-prefix}-guitar:before { content: fa-content($fa-var-guitar); } +.#{$fa-css-prefix}-gulp:before { content: fa-content($fa-var-gulp); } +.#{$fa-css-prefix}-h-square:before { content: fa-content($fa-var-h-square); } +.#{$fa-css-prefix}-hacker-news:before { content: fa-content($fa-var-hacker-news); } +.#{$fa-css-prefix}-hacker-news-square:before { content: fa-content($fa-var-hacker-news-square); } +.#{$fa-css-prefix}-hackerrank:before { content: fa-content($fa-var-hackerrank); } +.#{$fa-css-prefix}-hamburger:before { content: fa-content($fa-var-hamburger); } +.#{$fa-css-prefix}-hammer:before { content: fa-content($fa-var-hammer); } +.#{$fa-css-prefix}-hamsa:before { content: fa-content($fa-var-hamsa); } +.#{$fa-css-prefix}-hand-holding:before { content: fa-content($fa-var-hand-holding); } +.#{$fa-css-prefix}-hand-holding-heart:before { content: fa-content($fa-var-hand-holding-heart); } +.#{$fa-css-prefix}-hand-holding-medical:before { content: fa-content($fa-var-hand-holding-medical); } +.#{$fa-css-prefix}-hand-holding-usd:before { content: fa-content($fa-var-hand-holding-usd); } +.#{$fa-css-prefix}-hand-holding-water:before { content: fa-content($fa-var-hand-holding-water); } +.#{$fa-css-prefix}-hand-lizard:before { content: fa-content($fa-var-hand-lizard); } +.#{$fa-css-prefix}-hand-middle-finger:before { content: fa-content($fa-var-hand-middle-finger); } +.#{$fa-css-prefix}-hand-paper:before { content: fa-content($fa-var-hand-paper); } +.#{$fa-css-prefix}-hand-peace:before { content: fa-content($fa-var-hand-peace); } +.#{$fa-css-prefix}-hand-point-down:before { content: fa-content($fa-var-hand-point-down); } +.#{$fa-css-prefix}-hand-point-left:before { content: fa-content($fa-var-hand-point-left); } +.#{$fa-css-prefix}-hand-point-right:before { content: fa-content($fa-var-hand-point-right); } +.#{$fa-css-prefix}-hand-point-up:before { content: fa-content($fa-var-hand-point-up); } +.#{$fa-css-prefix}-hand-pointer:before { content: fa-content($fa-var-hand-pointer); } +.#{$fa-css-prefix}-hand-rock:before { content: fa-content($fa-var-hand-rock); } +.#{$fa-css-prefix}-hand-scissors:before { content: fa-content($fa-var-hand-scissors); } +.#{$fa-css-prefix}-hand-sparkles:before { content: fa-content($fa-var-hand-sparkles); } +.#{$fa-css-prefix}-hand-spock:before { content: fa-content($fa-var-hand-spock); } +.#{$fa-css-prefix}-hands:before { content: fa-content($fa-var-hands); } +.#{$fa-css-prefix}-hands-helping:before { content: fa-content($fa-var-hands-helping); } +.#{$fa-css-prefix}-hands-wash:before { content: fa-content($fa-var-hands-wash); } +.#{$fa-css-prefix}-handshake:before { content: fa-content($fa-var-handshake); } +.#{$fa-css-prefix}-handshake-alt-slash:before { content: fa-content($fa-var-handshake-alt-slash); } +.#{$fa-css-prefix}-handshake-slash:before { content: fa-content($fa-var-handshake-slash); } +.#{$fa-css-prefix}-hanukiah:before { content: fa-content($fa-var-hanukiah); } +.#{$fa-css-prefix}-hard-hat:before { content: fa-content($fa-var-hard-hat); } +.#{$fa-css-prefix}-hashtag:before { content: fa-content($fa-var-hashtag); } +.#{$fa-css-prefix}-hat-cowboy:before { content: fa-content($fa-var-hat-cowboy); } +.#{$fa-css-prefix}-hat-cowboy-side:before { content: fa-content($fa-var-hat-cowboy-side); } +.#{$fa-css-prefix}-hat-wizard:before { content: fa-content($fa-var-hat-wizard); } +.#{$fa-css-prefix}-hdd:before { content: fa-content($fa-var-hdd); } +.#{$fa-css-prefix}-head-side-cough:before { content: fa-content($fa-var-head-side-cough); } +.#{$fa-css-prefix}-head-side-cough-slash:before { content: fa-content($fa-var-head-side-cough-slash); } +.#{$fa-css-prefix}-head-side-mask:before { content: fa-content($fa-var-head-side-mask); } +.#{$fa-css-prefix}-head-side-virus:before { content: fa-content($fa-var-head-side-virus); } +.#{$fa-css-prefix}-heading:before { content: fa-content($fa-var-heading); } +.#{$fa-css-prefix}-headphones:before { content: fa-content($fa-var-headphones); } +.#{$fa-css-prefix}-headphones-alt:before { content: fa-content($fa-var-headphones-alt); } +.#{$fa-css-prefix}-headset:before { content: fa-content($fa-var-headset); } +.#{$fa-css-prefix}-heart:before { content: fa-content($fa-var-heart); } +.#{$fa-css-prefix}-heart-broken:before { content: fa-content($fa-var-heart-broken); } +.#{$fa-css-prefix}-heartbeat:before { content: fa-content($fa-var-heartbeat); } +.#{$fa-css-prefix}-helicopter:before { content: fa-content($fa-var-helicopter); } +.#{$fa-css-prefix}-highlighter:before { content: fa-content($fa-var-highlighter); } +.#{$fa-css-prefix}-hiking:before { content: fa-content($fa-var-hiking); } +.#{$fa-css-prefix}-hippo:before { content: fa-content($fa-var-hippo); } +.#{$fa-css-prefix}-hips:before { content: fa-content($fa-var-hips); } +.#{$fa-css-prefix}-hire-a-helper:before { content: fa-content($fa-var-hire-a-helper); } +.#{$fa-css-prefix}-history:before { content: fa-content($fa-var-history); } +.#{$fa-css-prefix}-hive:before { content: fa-content($fa-var-hive); } +.#{$fa-css-prefix}-hockey-puck:before { content: fa-content($fa-var-hockey-puck); } +.#{$fa-css-prefix}-holly-berry:before { content: fa-content($fa-var-holly-berry); } +.#{$fa-css-prefix}-home:before { content: fa-content($fa-var-home); } +.#{$fa-css-prefix}-hooli:before { content: fa-content($fa-var-hooli); } +.#{$fa-css-prefix}-hornbill:before { content: fa-content($fa-var-hornbill); } +.#{$fa-css-prefix}-horse:before { content: fa-content($fa-var-horse); } +.#{$fa-css-prefix}-horse-head:before { content: fa-content($fa-var-horse-head); } +.#{$fa-css-prefix}-hospital:before { content: fa-content($fa-var-hospital); } +.#{$fa-css-prefix}-hospital-alt:before { content: fa-content($fa-var-hospital-alt); } +.#{$fa-css-prefix}-hospital-symbol:before { content: fa-content($fa-var-hospital-symbol); } +.#{$fa-css-prefix}-hospital-user:before { content: fa-content($fa-var-hospital-user); } +.#{$fa-css-prefix}-hot-tub:before { content: fa-content($fa-var-hot-tub); } +.#{$fa-css-prefix}-hotdog:before { content: fa-content($fa-var-hotdog); } +.#{$fa-css-prefix}-hotel:before { content: fa-content($fa-var-hotel); } +.#{$fa-css-prefix}-hotjar:before { content: fa-content($fa-var-hotjar); } +.#{$fa-css-prefix}-hourglass:before { content: fa-content($fa-var-hourglass); } +.#{$fa-css-prefix}-hourglass-end:before { content: fa-content($fa-var-hourglass-end); } +.#{$fa-css-prefix}-hourglass-half:before { content: fa-content($fa-var-hourglass-half); } +.#{$fa-css-prefix}-hourglass-start:before { content: fa-content($fa-var-hourglass-start); } +.#{$fa-css-prefix}-house-damage:before { content: fa-content($fa-var-house-damage); } +.#{$fa-css-prefix}-house-user:before { content: fa-content($fa-var-house-user); } +.#{$fa-css-prefix}-houzz:before { content: fa-content($fa-var-houzz); } +.#{$fa-css-prefix}-hryvnia:before { content: fa-content($fa-var-hryvnia); } +.#{$fa-css-prefix}-html5:before { content: fa-content($fa-var-html5); } +.#{$fa-css-prefix}-hubspot:before { content: fa-content($fa-var-hubspot); } +.#{$fa-css-prefix}-i-cursor:before { content: fa-content($fa-var-i-cursor); } +.#{$fa-css-prefix}-ice-cream:before { content: fa-content($fa-var-ice-cream); } +.#{$fa-css-prefix}-icicles:before { content: fa-content($fa-var-icicles); } +.#{$fa-css-prefix}-icons:before { content: fa-content($fa-var-icons); } +.#{$fa-css-prefix}-id-badge:before { content: fa-content($fa-var-id-badge); } +.#{$fa-css-prefix}-id-card:before { content: fa-content($fa-var-id-card); } +.#{$fa-css-prefix}-id-card-alt:before { content: fa-content($fa-var-id-card-alt); } +.#{$fa-css-prefix}-ideal:before { content: fa-content($fa-var-ideal); } +.#{$fa-css-prefix}-igloo:before { content: fa-content($fa-var-igloo); } +.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); } +.#{$fa-css-prefix}-images:before { content: fa-content($fa-var-images); } +.#{$fa-css-prefix}-imdb:before { content: fa-content($fa-var-imdb); } +.#{$fa-css-prefix}-inbox:before { content: fa-content($fa-var-inbox); } +.#{$fa-css-prefix}-indent:before { content: fa-content($fa-var-indent); } +.#{$fa-css-prefix}-industry:before { content: fa-content($fa-var-industry); } +.#{$fa-css-prefix}-infinity:before { content: fa-content($fa-var-infinity); } +.#{$fa-css-prefix}-info:before { content: fa-content($fa-var-info); } +.#{$fa-css-prefix}-info-circle:before { content: fa-content($fa-var-info-circle); } +.#{$fa-css-prefix}-innosoft:before { content: fa-content($fa-var-innosoft); } +.#{$fa-css-prefix}-instagram:before { content: fa-content($fa-var-instagram); } +.#{$fa-css-prefix}-instagram-square:before { content: fa-content($fa-var-instagram-square); } +.#{$fa-css-prefix}-instalod:before { content: fa-content($fa-var-instalod); } +.#{$fa-css-prefix}-intercom:before { content: fa-content($fa-var-intercom); } +.#{$fa-css-prefix}-internet-explorer:before { content: fa-content($fa-var-internet-explorer); } +.#{$fa-css-prefix}-invision:before { content: fa-content($fa-var-invision); } +.#{$fa-css-prefix}-ioxhost:before { content: fa-content($fa-var-ioxhost); } +.#{$fa-css-prefix}-italic:before { content: fa-content($fa-var-italic); } +.#{$fa-css-prefix}-itch-io:before { content: fa-content($fa-var-itch-io); } +.#{$fa-css-prefix}-itunes:before { content: fa-content($fa-var-itunes); } +.#{$fa-css-prefix}-itunes-note:before { content: fa-content($fa-var-itunes-note); } +.#{$fa-css-prefix}-java:before { content: fa-content($fa-var-java); } +.#{$fa-css-prefix}-jedi:before { content: fa-content($fa-var-jedi); } +.#{$fa-css-prefix}-jedi-order:before { content: fa-content($fa-var-jedi-order); } +.#{$fa-css-prefix}-jenkins:before { content: fa-content($fa-var-jenkins); } +.#{$fa-css-prefix}-jira:before { content: fa-content($fa-var-jira); } +.#{$fa-css-prefix}-joget:before { content: fa-content($fa-var-joget); } +.#{$fa-css-prefix}-joint:before { content: fa-content($fa-var-joint); } +.#{$fa-css-prefix}-joomla:before { content: fa-content($fa-var-joomla); } +.#{$fa-css-prefix}-journal-whills:before { content: fa-content($fa-var-journal-whills); } +.#{$fa-css-prefix}-js:before { content: fa-content($fa-var-js); } +.#{$fa-css-prefix}-js-square:before { content: fa-content($fa-var-js-square); } +.#{$fa-css-prefix}-jsfiddle:before { content: fa-content($fa-var-jsfiddle); } +.#{$fa-css-prefix}-kaaba:before { content: fa-content($fa-var-kaaba); } +.#{$fa-css-prefix}-kaggle:before { content: fa-content($fa-var-kaggle); } +.#{$fa-css-prefix}-key:before { content: fa-content($fa-var-key); } +.#{$fa-css-prefix}-keybase:before { content: fa-content($fa-var-keybase); } +.#{$fa-css-prefix}-keyboard:before { content: fa-content($fa-var-keyboard); } +.#{$fa-css-prefix}-keycdn:before { content: fa-content($fa-var-keycdn); } +.#{$fa-css-prefix}-khanda:before { content: fa-content($fa-var-khanda); } +.#{$fa-css-prefix}-kickstarter:before { content: fa-content($fa-var-kickstarter); } +.#{$fa-css-prefix}-kickstarter-k:before { content: fa-content($fa-var-kickstarter-k); } +.#{$fa-css-prefix}-kiss:before { content: fa-content($fa-var-kiss); } +.#{$fa-css-prefix}-kiss-beam:before { content: fa-content($fa-var-kiss-beam); } +.#{$fa-css-prefix}-kiss-wink-heart:before { content: fa-content($fa-var-kiss-wink-heart); } +.#{$fa-css-prefix}-kiwi-bird:before { content: fa-content($fa-var-kiwi-bird); } +.#{$fa-css-prefix}-korvue:before { content: fa-content($fa-var-korvue); } +.#{$fa-css-prefix}-landmark:before { content: fa-content($fa-var-landmark); } +.#{$fa-css-prefix}-language:before { content: fa-content($fa-var-language); } +.#{$fa-css-prefix}-laptop:before { content: fa-content($fa-var-laptop); } +.#{$fa-css-prefix}-laptop-code:before { content: fa-content($fa-var-laptop-code); } +.#{$fa-css-prefix}-laptop-house:before { content: fa-content($fa-var-laptop-house); } +.#{$fa-css-prefix}-laptop-medical:before { content: fa-content($fa-var-laptop-medical); } +.#{$fa-css-prefix}-laravel:before { content: fa-content($fa-var-laravel); } +.#{$fa-css-prefix}-lastfm:before { content: fa-content($fa-var-lastfm); } +.#{$fa-css-prefix}-lastfm-square:before { content: fa-content($fa-var-lastfm-square); } +.#{$fa-css-prefix}-laugh:before { content: fa-content($fa-var-laugh); } +.#{$fa-css-prefix}-laugh-beam:before { content: fa-content($fa-var-laugh-beam); } +.#{$fa-css-prefix}-laugh-squint:before { content: fa-content($fa-var-laugh-squint); } +.#{$fa-css-prefix}-laugh-wink:before { content: fa-content($fa-var-laugh-wink); } +.#{$fa-css-prefix}-layer-group:before { content: fa-content($fa-var-layer-group); } +.#{$fa-css-prefix}-leaf:before { content: fa-content($fa-var-leaf); } +.#{$fa-css-prefix}-leanpub:before { content: fa-content($fa-var-leanpub); } +.#{$fa-css-prefix}-lemon:before { content: fa-content($fa-var-lemon); } +.#{$fa-css-prefix}-less:before { content: fa-content($fa-var-less); } +.#{$fa-css-prefix}-less-than:before { content: fa-content($fa-var-less-than); } +.#{$fa-css-prefix}-less-than-equal:before { content: fa-content($fa-var-less-than-equal); } +.#{$fa-css-prefix}-level-down-alt:before { content: fa-content($fa-var-level-down-alt); } +.#{$fa-css-prefix}-level-up-alt:before { content: fa-content($fa-var-level-up-alt); } +.#{$fa-css-prefix}-life-ring:before { content: fa-content($fa-var-life-ring); } +.#{$fa-css-prefix}-lightbulb:before { content: fa-content($fa-var-lightbulb); } +.#{$fa-css-prefix}-line:before { content: fa-content($fa-var-line); } +.#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); } +.#{$fa-css-prefix}-linkedin:before { content: fa-content($fa-var-linkedin); } +.#{$fa-css-prefix}-linkedin-in:before { content: fa-content($fa-var-linkedin-in); } +.#{$fa-css-prefix}-linode:before { content: fa-content($fa-var-linode); } +.#{$fa-css-prefix}-linux:before { content: fa-content($fa-var-linux); } +.#{$fa-css-prefix}-lira-sign:before { content: fa-content($fa-var-lira-sign); } +.#{$fa-css-prefix}-list:before { content: fa-content($fa-var-list); } +.#{$fa-css-prefix}-list-alt:before { content: fa-content($fa-var-list-alt); } +.#{$fa-css-prefix}-list-ol:before { content: fa-content($fa-var-list-ol); } +.#{$fa-css-prefix}-list-ul:before { content: fa-content($fa-var-list-ul); } +.#{$fa-css-prefix}-location-arrow:before { content: fa-content($fa-var-location-arrow); } +.#{$fa-css-prefix}-lock:before { content: fa-content($fa-var-lock); } +.#{$fa-css-prefix}-lock-open:before { content: fa-content($fa-var-lock-open); } +.#{$fa-css-prefix}-long-arrow-alt-down:before { content: fa-content($fa-var-long-arrow-alt-down); } +.#{$fa-css-prefix}-long-arrow-alt-left:before { content: fa-content($fa-var-long-arrow-alt-left); } +.#{$fa-css-prefix}-long-arrow-alt-right:before { content: fa-content($fa-var-long-arrow-alt-right); } +.#{$fa-css-prefix}-long-arrow-alt-up:before { content: fa-content($fa-var-long-arrow-alt-up); } +.#{$fa-css-prefix}-low-vision:before { content: fa-content($fa-var-low-vision); } +.#{$fa-css-prefix}-luggage-cart:before { content: fa-content($fa-var-luggage-cart); } +.#{$fa-css-prefix}-lungs:before { content: fa-content($fa-var-lungs); } +.#{$fa-css-prefix}-lungs-virus:before { content: fa-content($fa-var-lungs-virus); } +.#{$fa-css-prefix}-lyft:before { content: fa-content($fa-var-lyft); } +.#{$fa-css-prefix}-magento:before { content: fa-content($fa-var-magento); } +.#{$fa-css-prefix}-magic:before { content: fa-content($fa-var-magic); } +.#{$fa-css-prefix}-magnet:before { content: fa-content($fa-var-magnet); } +.#{$fa-css-prefix}-mail-bulk:before { content: fa-content($fa-var-mail-bulk); } +.#{$fa-css-prefix}-mailchimp:before { content: fa-content($fa-var-mailchimp); } +.#{$fa-css-prefix}-male:before { content: fa-content($fa-var-male); } +.#{$fa-css-prefix}-mandalorian:before { content: fa-content($fa-var-mandalorian); } +.#{$fa-css-prefix}-map:before { content: fa-content($fa-var-map); } +.#{$fa-css-prefix}-map-marked:before { content: fa-content($fa-var-map-marked); } +.#{$fa-css-prefix}-map-marked-alt:before { content: fa-content($fa-var-map-marked-alt); } +.#{$fa-css-prefix}-map-marker:before { content: fa-content($fa-var-map-marker); } +.#{$fa-css-prefix}-map-marker-alt:before { content: fa-content($fa-var-map-marker-alt); } +.#{$fa-css-prefix}-map-pin:before { content: fa-content($fa-var-map-pin); } +.#{$fa-css-prefix}-map-signs:before { content: fa-content($fa-var-map-signs); } +.#{$fa-css-prefix}-markdown:before { content: fa-content($fa-var-markdown); } +.#{$fa-css-prefix}-marker:before { content: fa-content($fa-var-marker); } +.#{$fa-css-prefix}-mars:before { content: fa-content($fa-var-mars); } +.#{$fa-css-prefix}-mars-double:before { content: fa-content($fa-var-mars-double); } +.#{$fa-css-prefix}-mars-stroke:before { content: fa-content($fa-var-mars-stroke); } +.#{$fa-css-prefix}-mars-stroke-h:before { content: fa-content($fa-var-mars-stroke-h); } +.#{$fa-css-prefix}-mars-stroke-v:before { content: fa-content($fa-var-mars-stroke-v); } +.#{$fa-css-prefix}-mask:before { content: fa-content($fa-var-mask); } +.#{$fa-css-prefix}-mastodon:before { content: fa-content($fa-var-mastodon); } +.#{$fa-css-prefix}-maxcdn:before { content: fa-content($fa-var-maxcdn); } +.#{$fa-css-prefix}-mdb:before { content: fa-content($fa-var-mdb); } +.#{$fa-css-prefix}-medal:before { content: fa-content($fa-var-medal); } +.#{$fa-css-prefix}-medapps:before { content: fa-content($fa-var-medapps); } +.#{$fa-css-prefix}-medium:before { content: fa-content($fa-var-medium); } +.#{$fa-css-prefix}-medium-m:before { content: fa-content($fa-var-medium-m); } +.#{$fa-css-prefix}-medkit:before { content: fa-content($fa-var-medkit); } +.#{$fa-css-prefix}-medrt:before { content: fa-content($fa-var-medrt); } +.#{$fa-css-prefix}-meetup:before { content: fa-content($fa-var-meetup); } +.#{$fa-css-prefix}-megaport:before { content: fa-content($fa-var-megaport); } +.#{$fa-css-prefix}-meh:before { content: fa-content($fa-var-meh); } +.#{$fa-css-prefix}-meh-blank:before { content: fa-content($fa-var-meh-blank); } +.#{$fa-css-prefix}-meh-rolling-eyes:before { content: fa-content($fa-var-meh-rolling-eyes); } +.#{$fa-css-prefix}-memory:before { content: fa-content($fa-var-memory); } +.#{$fa-css-prefix}-mendeley:before { content: fa-content($fa-var-mendeley); } +.#{$fa-css-prefix}-menorah:before { content: fa-content($fa-var-menorah); } +.#{$fa-css-prefix}-mercury:before { content: fa-content($fa-var-mercury); } +.#{$fa-css-prefix}-meteor:before { content: fa-content($fa-var-meteor); } +.#{$fa-css-prefix}-microblog:before { content: fa-content($fa-var-microblog); } +.#{$fa-css-prefix}-microchip:before { content: fa-content($fa-var-microchip); } +.#{$fa-css-prefix}-microphone:before { content: fa-content($fa-var-microphone); } +.#{$fa-css-prefix}-microphone-alt:before { content: fa-content($fa-var-microphone-alt); } +.#{$fa-css-prefix}-microphone-alt-slash:before { content: fa-content($fa-var-microphone-alt-slash); } +.#{$fa-css-prefix}-microphone-slash:before { content: fa-content($fa-var-microphone-slash); } +.#{$fa-css-prefix}-microscope:before { content: fa-content($fa-var-microscope); } +.#{$fa-css-prefix}-microsoft:before { content: fa-content($fa-var-microsoft); } +.#{$fa-css-prefix}-minus:before { content: fa-content($fa-var-minus); } +.#{$fa-css-prefix}-minus-circle:before { content: fa-content($fa-var-minus-circle); } +.#{$fa-css-prefix}-minus-square:before { content: fa-content($fa-var-minus-square); } +.#{$fa-css-prefix}-mitten:before { content: fa-content($fa-var-mitten); } +.#{$fa-css-prefix}-mix:before { content: fa-content($fa-var-mix); } +.#{$fa-css-prefix}-mixcloud:before { content: fa-content($fa-var-mixcloud); } +.#{$fa-css-prefix}-mixer:before { content: fa-content($fa-var-mixer); } +.#{$fa-css-prefix}-mizuni:before { content: fa-content($fa-var-mizuni); } +.#{$fa-css-prefix}-mobile:before { content: fa-content($fa-var-mobile); } +.#{$fa-css-prefix}-mobile-alt:before { content: fa-content($fa-var-mobile-alt); } +.#{$fa-css-prefix}-modx:before { content: fa-content($fa-var-modx); } +.#{$fa-css-prefix}-monero:before { content: fa-content($fa-var-monero); } +.#{$fa-css-prefix}-money-bill:before { content: fa-content($fa-var-money-bill); } +.#{$fa-css-prefix}-money-bill-alt:before { content: fa-content($fa-var-money-bill-alt); } +.#{$fa-css-prefix}-money-bill-wave:before { content: fa-content($fa-var-money-bill-wave); } +.#{$fa-css-prefix}-money-bill-wave-alt:before { content: fa-content($fa-var-money-bill-wave-alt); } +.#{$fa-css-prefix}-money-check:before { content: fa-content($fa-var-money-check); } +.#{$fa-css-prefix}-money-check-alt:before { content: fa-content($fa-var-money-check-alt); } +.#{$fa-css-prefix}-monument:before { content: fa-content($fa-var-monument); } +.#{$fa-css-prefix}-moon:before { content: fa-content($fa-var-moon); } +.#{$fa-css-prefix}-mortar-pestle:before { content: fa-content($fa-var-mortar-pestle); } +.#{$fa-css-prefix}-mosque:before { content: fa-content($fa-var-mosque); } +.#{$fa-css-prefix}-motorcycle:before { content: fa-content($fa-var-motorcycle); } +.#{$fa-css-prefix}-mountain:before { content: fa-content($fa-var-mountain); } +.#{$fa-css-prefix}-mouse:before { content: fa-content($fa-var-mouse); } +.#{$fa-css-prefix}-mouse-pointer:before { content: fa-content($fa-var-mouse-pointer); } +.#{$fa-css-prefix}-mug-hot:before { content: fa-content($fa-var-mug-hot); } +.#{$fa-css-prefix}-music:before { content: fa-content($fa-var-music); } +.#{$fa-css-prefix}-napster:before { content: fa-content($fa-var-napster); } +.#{$fa-css-prefix}-neos:before { content: fa-content($fa-var-neos); } +.#{$fa-css-prefix}-network-wired:before { content: fa-content($fa-var-network-wired); } +.#{$fa-css-prefix}-neuter:before { content: fa-content($fa-var-neuter); } +.#{$fa-css-prefix}-newspaper:before { content: fa-content($fa-var-newspaper); } +.#{$fa-css-prefix}-nimblr:before { content: fa-content($fa-var-nimblr); } +.#{$fa-css-prefix}-node:before { content: fa-content($fa-var-node); } +.#{$fa-css-prefix}-node-js:before { content: fa-content($fa-var-node-js); } +.#{$fa-css-prefix}-not-equal:before { content: fa-content($fa-var-not-equal); } +.#{$fa-css-prefix}-notes-medical:before { content: fa-content($fa-var-notes-medical); } +.#{$fa-css-prefix}-npm:before { content: fa-content($fa-var-npm); } +.#{$fa-css-prefix}-ns8:before { content: fa-content($fa-var-ns8); } +.#{$fa-css-prefix}-nutritionix:before { content: fa-content($fa-var-nutritionix); } +.#{$fa-css-prefix}-object-group:before { content: fa-content($fa-var-object-group); } +.#{$fa-css-prefix}-object-ungroup:before { content: fa-content($fa-var-object-ungroup); } +.#{$fa-css-prefix}-octopus-deploy:before { content: fa-content($fa-var-octopus-deploy); } +.#{$fa-css-prefix}-odnoklassniki:before { content: fa-content($fa-var-odnoklassniki); } +.#{$fa-css-prefix}-odnoklassniki-square:before { content: fa-content($fa-var-odnoklassniki-square); } +.#{$fa-css-prefix}-oil-can:before { content: fa-content($fa-var-oil-can); } +.#{$fa-css-prefix}-old-republic:before { content: fa-content($fa-var-old-republic); } +.#{$fa-css-prefix}-om:before { content: fa-content($fa-var-om); } +.#{$fa-css-prefix}-opencart:before { content: fa-content($fa-var-opencart); } +.#{$fa-css-prefix}-openid:before { content: fa-content($fa-var-openid); } +.#{$fa-css-prefix}-opera:before { content: fa-content($fa-var-opera); } +.#{$fa-css-prefix}-optin-monster:before { content: fa-content($fa-var-optin-monster); } +.#{$fa-css-prefix}-orcid:before { content: fa-content($fa-var-orcid); } +.#{$fa-css-prefix}-osi:before { content: fa-content($fa-var-osi); } +.#{$fa-css-prefix}-otter:before { content: fa-content($fa-var-otter); } +.#{$fa-css-prefix}-outdent:before { content: fa-content($fa-var-outdent); } +.#{$fa-css-prefix}-page4:before { content: fa-content($fa-var-page4); } +.#{$fa-css-prefix}-pagelines:before { content: fa-content($fa-var-pagelines); } +.#{$fa-css-prefix}-pager:before { content: fa-content($fa-var-pager); } +.#{$fa-css-prefix}-paint-brush:before { content: fa-content($fa-var-paint-brush); } +.#{$fa-css-prefix}-paint-roller:before { content: fa-content($fa-var-paint-roller); } +.#{$fa-css-prefix}-palette:before { content: fa-content($fa-var-palette); } +.#{$fa-css-prefix}-palfed:before { content: fa-content($fa-var-palfed); } +.#{$fa-css-prefix}-pallet:before { content: fa-content($fa-var-pallet); } +.#{$fa-css-prefix}-paper-plane:before { content: fa-content($fa-var-paper-plane); } +.#{$fa-css-prefix}-paperclip:before { content: fa-content($fa-var-paperclip); } +.#{$fa-css-prefix}-parachute-box:before { content: fa-content($fa-var-parachute-box); } +.#{$fa-css-prefix}-paragraph:before { content: fa-content($fa-var-paragraph); } +.#{$fa-css-prefix}-parking:before { content: fa-content($fa-var-parking); } +.#{$fa-css-prefix}-passport:before { content: fa-content($fa-var-passport); } +.#{$fa-css-prefix}-pastafarianism:before { content: fa-content($fa-var-pastafarianism); } +.#{$fa-css-prefix}-paste:before { content: fa-content($fa-var-paste); } +.#{$fa-css-prefix}-patreon:before { content: fa-content($fa-var-patreon); } +.#{$fa-css-prefix}-pause:before { content: fa-content($fa-var-pause); } +.#{$fa-css-prefix}-pause-circle:before { content: fa-content($fa-var-pause-circle); } +.#{$fa-css-prefix}-paw:before { content: fa-content($fa-var-paw); } +.#{$fa-css-prefix}-paypal:before { content: fa-content($fa-var-paypal); } +.#{$fa-css-prefix}-peace:before { content: fa-content($fa-var-peace); } +.#{$fa-css-prefix}-pen:before { content: fa-content($fa-var-pen); } +.#{$fa-css-prefix}-pen-alt:before { content: fa-content($fa-var-pen-alt); } +.#{$fa-css-prefix}-pen-fancy:before { content: fa-content($fa-var-pen-fancy); } +.#{$fa-css-prefix}-pen-nib:before { content: fa-content($fa-var-pen-nib); } +.#{$fa-css-prefix}-pen-square:before { content: fa-content($fa-var-pen-square); } +.#{$fa-css-prefix}-pencil-alt:before { content: fa-content($fa-var-pencil-alt); } +.#{$fa-css-prefix}-pencil-ruler:before { content: fa-content($fa-var-pencil-ruler); } +.#{$fa-css-prefix}-penny-arcade:before { content: fa-content($fa-var-penny-arcade); } +.#{$fa-css-prefix}-people-arrows:before { content: fa-content($fa-var-people-arrows); } +.#{$fa-css-prefix}-people-carry:before { content: fa-content($fa-var-people-carry); } +.#{$fa-css-prefix}-pepper-hot:before { content: fa-content($fa-var-pepper-hot); } +.#{$fa-css-prefix}-perbyte:before { content: fa-content($fa-var-perbyte); } +.#{$fa-css-prefix}-percent:before { content: fa-content($fa-var-percent); } +.#{$fa-css-prefix}-percentage:before { content: fa-content($fa-var-percentage); } +.#{$fa-css-prefix}-periscope:before { content: fa-content($fa-var-periscope); } +.#{$fa-css-prefix}-person-booth:before { content: fa-content($fa-var-person-booth); } +.#{$fa-css-prefix}-phabricator:before { content: fa-content($fa-var-phabricator); } +.#{$fa-css-prefix}-phoenix-framework:before { content: fa-content($fa-var-phoenix-framework); } +.#{$fa-css-prefix}-phoenix-squadron:before { content: fa-content($fa-var-phoenix-squadron); } +.#{$fa-css-prefix}-phone:before { content: fa-content($fa-var-phone); } +.#{$fa-css-prefix}-phone-alt:before { content: fa-content($fa-var-phone-alt); } +.#{$fa-css-prefix}-phone-slash:before { content: fa-content($fa-var-phone-slash); } +.#{$fa-css-prefix}-phone-square:before { content: fa-content($fa-var-phone-square); } +.#{$fa-css-prefix}-phone-square-alt:before { content: fa-content($fa-var-phone-square-alt); } +.#{$fa-css-prefix}-phone-volume:before { content: fa-content($fa-var-phone-volume); } +.#{$fa-css-prefix}-photo-video:before { content: fa-content($fa-var-photo-video); } +.#{$fa-css-prefix}-php:before { content: fa-content($fa-var-php); } +.#{$fa-css-prefix}-pied-piper:before { content: fa-content($fa-var-pied-piper); } +.#{$fa-css-prefix}-pied-piper-alt:before { content: fa-content($fa-var-pied-piper-alt); } +.#{$fa-css-prefix}-pied-piper-hat:before { content: fa-content($fa-var-pied-piper-hat); } +.#{$fa-css-prefix}-pied-piper-pp:before { content: fa-content($fa-var-pied-piper-pp); } +.#{$fa-css-prefix}-pied-piper-square:before { content: fa-content($fa-var-pied-piper-square); } +.#{$fa-css-prefix}-piggy-bank:before { content: fa-content($fa-var-piggy-bank); } +.#{$fa-css-prefix}-pills:before { content: fa-content($fa-var-pills); } +.#{$fa-css-prefix}-pinterest:before { content: fa-content($fa-var-pinterest); } +.#{$fa-css-prefix}-pinterest-p:before { content: fa-content($fa-var-pinterest-p); } +.#{$fa-css-prefix}-pinterest-square:before { content: fa-content($fa-var-pinterest-square); } +.#{$fa-css-prefix}-pizza-slice:before { content: fa-content($fa-var-pizza-slice); } +.#{$fa-css-prefix}-place-of-worship:before { content: fa-content($fa-var-place-of-worship); } +.#{$fa-css-prefix}-plane:before { content: fa-content($fa-var-plane); } +.#{$fa-css-prefix}-plane-arrival:before { content: fa-content($fa-var-plane-arrival); } +.#{$fa-css-prefix}-plane-departure:before { content: fa-content($fa-var-plane-departure); } +.#{$fa-css-prefix}-plane-slash:before { content: fa-content($fa-var-plane-slash); } +.#{$fa-css-prefix}-play:before { content: fa-content($fa-var-play); } +.#{$fa-css-prefix}-play-circle:before { content: fa-content($fa-var-play-circle); } +.#{$fa-css-prefix}-playstation:before { content: fa-content($fa-var-playstation); } +.#{$fa-css-prefix}-plug:before { content: fa-content($fa-var-plug); } +.#{$fa-css-prefix}-plus:before { content: fa-content($fa-var-plus); } +.#{$fa-css-prefix}-plus-circle:before { content: fa-content($fa-var-plus-circle); } +.#{$fa-css-prefix}-plus-square:before { content: fa-content($fa-var-plus-square); } +.#{$fa-css-prefix}-podcast:before { content: fa-content($fa-var-podcast); } +.#{$fa-css-prefix}-poll:before { content: fa-content($fa-var-poll); } +.#{$fa-css-prefix}-poll-h:before { content: fa-content($fa-var-poll-h); } +.#{$fa-css-prefix}-poo:before { content: fa-content($fa-var-poo); } +.#{$fa-css-prefix}-poo-storm:before { content: fa-content($fa-var-poo-storm); } +.#{$fa-css-prefix}-poop:before { content: fa-content($fa-var-poop); } +.#{$fa-css-prefix}-portrait:before { content: fa-content($fa-var-portrait); } +.#{$fa-css-prefix}-pound-sign:before { content: fa-content($fa-var-pound-sign); } +.#{$fa-css-prefix}-power-off:before { content: fa-content($fa-var-power-off); } +.#{$fa-css-prefix}-pray:before { content: fa-content($fa-var-pray); } +.#{$fa-css-prefix}-praying-hands:before { content: fa-content($fa-var-praying-hands); } +.#{$fa-css-prefix}-prescription:before { content: fa-content($fa-var-prescription); } +.#{$fa-css-prefix}-prescription-bottle:before { content: fa-content($fa-var-prescription-bottle); } +.#{$fa-css-prefix}-prescription-bottle-alt:before { content: fa-content($fa-var-prescription-bottle-alt); } +.#{$fa-css-prefix}-print:before { content: fa-content($fa-var-print); } +.#{$fa-css-prefix}-procedures:before { content: fa-content($fa-var-procedures); } +.#{$fa-css-prefix}-product-hunt:before { content: fa-content($fa-var-product-hunt); } +.#{$fa-css-prefix}-project-diagram:before { content: fa-content($fa-var-project-diagram); } +.#{$fa-css-prefix}-pump-medical:before { content: fa-content($fa-var-pump-medical); } +.#{$fa-css-prefix}-pump-soap:before { content: fa-content($fa-var-pump-soap); } +.#{$fa-css-prefix}-pushed:before { content: fa-content($fa-var-pushed); } +.#{$fa-css-prefix}-puzzle-piece:before { content: fa-content($fa-var-puzzle-piece); } +.#{$fa-css-prefix}-python:before { content: fa-content($fa-var-python); } +.#{$fa-css-prefix}-qq:before { content: fa-content($fa-var-qq); } +.#{$fa-css-prefix}-qrcode:before { content: fa-content($fa-var-qrcode); } +.#{$fa-css-prefix}-question:before { content: fa-content($fa-var-question); } +.#{$fa-css-prefix}-question-circle:before { content: fa-content($fa-var-question-circle); } +.#{$fa-css-prefix}-quidditch:before { content: fa-content($fa-var-quidditch); } +.#{$fa-css-prefix}-quinscape:before { content: fa-content($fa-var-quinscape); } +.#{$fa-css-prefix}-quora:before { content: fa-content($fa-var-quora); } +.#{$fa-css-prefix}-quote-left:before { content: fa-content($fa-var-quote-left); } +.#{$fa-css-prefix}-quote-right:before { content: fa-content($fa-var-quote-right); } +.#{$fa-css-prefix}-quran:before { content: fa-content($fa-var-quran); } +.#{$fa-css-prefix}-r-project:before { content: fa-content($fa-var-r-project); } +.#{$fa-css-prefix}-radiation:before { content: fa-content($fa-var-radiation); } +.#{$fa-css-prefix}-radiation-alt:before { content: fa-content($fa-var-radiation-alt); } +.#{$fa-css-prefix}-rainbow:before { content: fa-content($fa-var-rainbow); } +.#{$fa-css-prefix}-random:before { content: fa-content($fa-var-random); } +.#{$fa-css-prefix}-raspberry-pi:before { content: fa-content($fa-var-raspberry-pi); } +.#{$fa-css-prefix}-ravelry:before { content: fa-content($fa-var-ravelry); } +.#{$fa-css-prefix}-react:before { content: fa-content($fa-var-react); } +.#{$fa-css-prefix}-reacteurope:before { content: fa-content($fa-var-reacteurope); } +.#{$fa-css-prefix}-readme:before { content: fa-content($fa-var-readme); } +.#{$fa-css-prefix}-rebel:before { content: fa-content($fa-var-rebel); } +.#{$fa-css-prefix}-receipt:before { content: fa-content($fa-var-receipt); } +.#{$fa-css-prefix}-record-vinyl:before { content: fa-content($fa-var-record-vinyl); } +.#{$fa-css-prefix}-recycle:before { content: fa-content($fa-var-recycle); } +.#{$fa-css-prefix}-red-river:before { content: fa-content($fa-var-red-river); } +.#{$fa-css-prefix}-reddit:before { content: fa-content($fa-var-reddit); } +.#{$fa-css-prefix}-reddit-alien:before { content: fa-content($fa-var-reddit-alien); } +.#{$fa-css-prefix}-reddit-square:before { content: fa-content($fa-var-reddit-square); } +.#{$fa-css-prefix}-redhat:before { content: fa-content($fa-var-redhat); } +.#{$fa-css-prefix}-redo:before { content: fa-content($fa-var-redo); } +.#{$fa-css-prefix}-redo-alt:before { content: fa-content($fa-var-redo-alt); } +.#{$fa-css-prefix}-registered:before { content: fa-content($fa-var-registered); } +.#{$fa-css-prefix}-remove-format:before { content: fa-content($fa-var-remove-format); } +.#{$fa-css-prefix}-renren:before { content: fa-content($fa-var-renren); } +.#{$fa-css-prefix}-reply:before { content: fa-content($fa-var-reply); } +.#{$fa-css-prefix}-reply-all:before { content: fa-content($fa-var-reply-all); } +.#{$fa-css-prefix}-replyd:before { content: fa-content($fa-var-replyd); } +.#{$fa-css-prefix}-republican:before { content: fa-content($fa-var-republican); } +.#{$fa-css-prefix}-researchgate:before { content: fa-content($fa-var-researchgate); } +.#{$fa-css-prefix}-resolving:before { content: fa-content($fa-var-resolving); } +.#{$fa-css-prefix}-restroom:before { content: fa-content($fa-var-restroom); } +.#{$fa-css-prefix}-retweet:before { content: fa-content($fa-var-retweet); } +.#{$fa-css-prefix}-rev:before { content: fa-content($fa-var-rev); } +.#{$fa-css-prefix}-ribbon:before { content: fa-content($fa-var-ribbon); } +.#{$fa-css-prefix}-ring:before { content: fa-content($fa-var-ring); } +.#{$fa-css-prefix}-road:before { content: fa-content($fa-var-road); } +.#{$fa-css-prefix}-robot:before { content: fa-content($fa-var-robot); } +.#{$fa-css-prefix}-rocket:before { content: fa-content($fa-var-rocket); } +.#{$fa-css-prefix}-rocketchat:before { content: fa-content($fa-var-rocketchat); } +.#{$fa-css-prefix}-rockrms:before { content: fa-content($fa-var-rockrms); } +.#{$fa-css-prefix}-route:before { content: fa-content($fa-var-route); } +.#{$fa-css-prefix}-rss:before { content: fa-content($fa-var-rss); } +.#{$fa-css-prefix}-rss-square:before { content: fa-content($fa-var-rss-square); } +.#{$fa-css-prefix}-ruble-sign:before { content: fa-content($fa-var-ruble-sign); } +.#{$fa-css-prefix}-ruler:before { content: fa-content($fa-var-ruler); } +.#{$fa-css-prefix}-ruler-combined:before { content: fa-content($fa-var-ruler-combined); } +.#{$fa-css-prefix}-ruler-horizontal:before { content: fa-content($fa-var-ruler-horizontal); } +.#{$fa-css-prefix}-ruler-vertical:before { content: fa-content($fa-var-ruler-vertical); } +.#{$fa-css-prefix}-running:before { content: fa-content($fa-var-running); } +.#{$fa-css-prefix}-rupee-sign:before { content: fa-content($fa-var-rupee-sign); } +.#{$fa-css-prefix}-rust:before { content: fa-content($fa-var-rust); } +.#{$fa-css-prefix}-sad-cry:before { content: fa-content($fa-var-sad-cry); } +.#{$fa-css-prefix}-sad-tear:before { content: fa-content($fa-var-sad-tear); } +.#{$fa-css-prefix}-safari:before { content: fa-content($fa-var-safari); } +.#{$fa-css-prefix}-salesforce:before { content: fa-content($fa-var-salesforce); } +.#{$fa-css-prefix}-sass:before { content: fa-content($fa-var-sass); } +.#{$fa-css-prefix}-satellite:before { content: fa-content($fa-var-satellite); } +.#{$fa-css-prefix}-satellite-dish:before { content: fa-content($fa-var-satellite-dish); } +.#{$fa-css-prefix}-save:before { content: fa-content($fa-var-save); } +.#{$fa-css-prefix}-schlix:before { content: fa-content($fa-var-schlix); } +.#{$fa-css-prefix}-school:before { content: fa-content($fa-var-school); } +.#{$fa-css-prefix}-screwdriver:before { content: fa-content($fa-var-screwdriver); } +.#{$fa-css-prefix}-scribd:before { content: fa-content($fa-var-scribd); } +.#{$fa-css-prefix}-scroll:before { content: fa-content($fa-var-scroll); } +.#{$fa-css-prefix}-sd-card:before { content: fa-content($fa-var-sd-card); } +.#{$fa-css-prefix}-search:before { content: fa-content($fa-var-search); } +.#{$fa-css-prefix}-search-dollar:before { content: fa-content($fa-var-search-dollar); } +.#{$fa-css-prefix}-search-location:before { content: fa-content($fa-var-search-location); } +.#{$fa-css-prefix}-search-minus:before { content: fa-content($fa-var-search-minus); } +.#{$fa-css-prefix}-search-plus:before { content: fa-content($fa-var-search-plus); } +.#{$fa-css-prefix}-searchengin:before { content: fa-content($fa-var-searchengin); } +.#{$fa-css-prefix}-seedling:before { content: fa-content($fa-var-seedling); } +.#{$fa-css-prefix}-sellcast:before { content: fa-content($fa-var-sellcast); } +.#{$fa-css-prefix}-sellsy:before { content: fa-content($fa-var-sellsy); } +.#{$fa-css-prefix}-server:before { content: fa-content($fa-var-server); } +.#{$fa-css-prefix}-servicestack:before { content: fa-content($fa-var-servicestack); } +.#{$fa-css-prefix}-shapes:before { content: fa-content($fa-var-shapes); } +.#{$fa-css-prefix}-share:before { content: fa-content($fa-var-share); } +.#{$fa-css-prefix}-share-alt:before { content: fa-content($fa-var-share-alt); } +.#{$fa-css-prefix}-share-alt-square:before { content: fa-content($fa-var-share-alt-square); } +.#{$fa-css-prefix}-share-square:before { content: fa-content($fa-var-share-square); } +.#{$fa-css-prefix}-shekel-sign:before { content: fa-content($fa-var-shekel-sign); } +.#{$fa-css-prefix}-shield-alt:before { content: fa-content($fa-var-shield-alt); } +.#{$fa-css-prefix}-shield-virus:before { content: fa-content($fa-var-shield-virus); } +.#{$fa-css-prefix}-ship:before { content: fa-content($fa-var-ship); } +.#{$fa-css-prefix}-shipping-fast:before { content: fa-content($fa-var-shipping-fast); } +.#{$fa-css-prefix}-shirtsinbulk:before { content: fa-content($fa-var-shirtsinbulk); } +.#{$fa-css-prefix}-shoe-prints:before { content: fa-content($fa-var-shoe-prints); } +.#{$fa-css-prefix}-shopify:before { content: fa-content($fa-var-shopify); } +.#{$fa-css-prefix}-shopping-bag:before { content: fa-content($fa-var-shopping-bag); } +.#{$fa-css-prefix}-shopping-basket:before { content: fa-content($fa-var-shopping-basket); } +.#{$fa-css-prefix}-shopping-cart:before { content: fa-content($fa-var-shopping-cart); } +.#{$fa-css-prefix}-shopware:before { content: fa-content($fa-var-shopware); } +.#{$fa-css-prefix}-shower:before { content: fa-content($fa-var-shower); } +.#{$fa-css-prefix}-shuttle-van:before { content: fa-content($fa-var-shuttle-van); } +.#{$fa-css-prefix}-sign:before { content: fa-content($fa-var-sign); } +.#{$fa-css-prefix}-sign-in-alt:before { content: fa-content($fa-var-sign-in-alt); } +.#{$fa-css-prefix}-sign-language:before { content: fa-content($fa-var-sign-language); } +.#{$fa-css-prefix}-sign-out-alt:before { content: fa-content($fa-var-sign-out-alt); } +.#{$fa-css-prefix}-signal:before { content: fa-content($fa-var-signal); } +.#{$fa-css-prefix}-signature:before { content: fa-content($fa-var-signature); } +.#{$fa-css-prefix}-sim-card:before { content: fa-content($fa-var-sim-card); } +.#{$fa-css-prefix}-simplybuilt:before { content: fa-content($fa-var-simplybuilt); } +.#{$fa-css-prefix}-sink:before { content: fa-content($fa-var-sink); } +.#{$fa-css-prefix}-sistrix:before { content: fa-content($fa-var-sistrix); } +.#{$fa-css-prefix}-sitemap:before { content: fa-content($fa-var-sitemap); } +.#{$fa-css-prefix}-sith:before { content: fa-content($fa-var-sith); } +.#{$fa-css-prefix}-skating:before { content: fa-content($fa-var-skating); } +.#{$fa-css-prefix}-sketch:before { content: fa-content($fa-var-sketch); } +.#{$fa-css-prefix}-skiing:before { content: fa-content($fa-var-skiing); } +.#{$fa-css-prefix}-skiing-nordic:before { content: fa-content($fa-var-skiing-nordic); } +.#{$fa-css-prefix}-skull:before { content: fa-content($fa-var-skull); } +.#{$fa-css-prefix}-skull-crossbones:before { content: fa-content($fa-var-skull-crossbones); } +.#{$fa-css-prefix}-skyatlas:before { content: fa-content($fa-var-skyatlas); } +.#{$fa-css-prefix}-skype:before { content: fa-content($fa-var-skype); } +.#{$fa-css-prefix}-slack:before { content: fa-content($fa-var-slack); } +.#{$fa-css-prefix}-slack-hash:before { content: fa-content($fa-var-slack-hash); } +.#{$fa-css-prefix}-slash:before { content: fa-content($fa-var-slash); } +.#{$fa-css-prefix}-sleigh:before { content: fa-content($fa-var-sleigh); } +.#{$fa-css-prefix}-sliders-h:before { content: fa-content($fa-var-sliders-h); } +.#{$fa-css-prefix}-slideshare:before { content: fa-content($fa-var-slideshare); } +.#{$fa-css-prefix}-smile:before { content: fa-content($fa-var-smile); } +.#{$fa-css-prefix}-smile-beam:before { content: fa-content($fa-var-smile-beam); } +.#{$fa-css-prefix}-smile-wink:before { content: fa-content($fa-var-smile-wink); } +.#{$fa-css-prefix}-smog:before { content: fa-content($fa-var-smog); } +.#{$fa-css-prefix}-smoking:before { content: fa-content($fa-var-smoking); } +.#{$fa-css-prefix}-smoking-ban:before { content: fa-content($fa-var-smoking-ban); } +.#{$fa-css-prefix}-sms:before { content: fa-content($fa-var-sms); } +.#{$fa-css-prefix}-snapchat:before { content: fa-content($fa-var-snapchat); } +.#{$fa-css-prefix}-snapchat-ghost:before { content: fa-content($fa-var-snapchat-ghost); } +.#{$fa-css-prefix}-snapchat-square:before { content: fa-content($fa-var-snapchat-square); } +.#{$fa-css-prefix}-snowboarding:before { content: fa-content($fa-var-snowboarding); } +.#{$fa-css-prefix}-snowflake:before { content: fa-content($fa-var-snowflake); } +.#{$fa-css-prefix}-snowman:before { content: fa-content($fa-var-snowman); } +.#{$fa-css-prefix}-snowplow:before { content: fa-content($fa-var-snowplow); } +.#{$fa-css-prefix}-soap:before { content: fa-content($fa-var-soap); } +.#{$fa-css-prefix}-socks:before { content: fa-content($fa-var-socks); } +.#{$fa-css-prefix}-solar-panel:before { content: fa-content($fa-var-solar-panel); } +.#{$fa-css-prefix}-sort:before { content: fa-content($fa-var-sort); } +.#{$fa-css-prefix}-sort-alpha-down:before { content: fa-content($fa-var-sort-alpha-down); } +.#{$fa-css-prefix}-sort-alpha-down-alt:before { content: fa-content($fa-var-sort-alpha-down-alt); } +.#{$fa-css-prefix}-sort-alpha-up:before { content: fa-content($fa-var-sort-alpha-up); } +.#{$fa-css-prefix}-sort-alpha-up-alt:before { content: fa-content($fa-var-sort-alpha-up-alt); } +.#{$fa-css-prefix}-sort-amount-down:before { content: fa-content($fa-var-sort-amount-down); } +.#{$fa-css-prefix}-sort-amount-down-alt:before { content: fa-content($fa-var-sort-amount-down-alt); } +.#{$fa-css-prefix}-sort-amount-up:before { content: fa-content($fa-var-sort-amount-up); } +.#{$fa-css-prefix}-sort-amount-up-alt:before { content: fa-content($fa-var-sort-amount-up-alt); } +.#{$fa-css-prefix}-sort-down:before { content: fa-content($fa-var-sort-down); } +.#{$fa-css-prefix}-sort-numeric-down:before { content: fa-content($fa-var-sort-numeric-down); } +.#{$fa-css-prefix}-sort-numeric-down-alt:before { content: fa-content($fa-var-sort-numeric-down-alt); } +.#{$fa-css-prefix}-sort-numeric-up:before { content: fa-content($fa-var-sort-numeric-up); } +.#{$fa-css-prefix}-sort-numeric-up-alt:before { content: fa-content($fa-var-sort-numeric-up-alt); } +.#{$fa-css-prefix}-sort-up:before { content: fa-content($fa-var-sort-up); } +.#{$fa-css-prefix}-soundcloud:before { content: fa-content($fa-var-soundcloud); } +.#{$fa-css-prefix}-sourcetree:before { content: fa-content($fa-var-sourcetree); } +.#{$fa-css-prefix}-spa:before { content: fa-content($fa-var-spa); } +.#{$fa-css-prefix}-space-shuttle:before { content: fa-content($fa-var-space-shuttle); } +.#{$fa-css-prefix}-speakap:before { content: fa-content($fa-var-speakap); } +.#{$fa-css-prefix}-speaker-deck:before { content: fa-content($fa-var-speaker-deck); } +.#{$fa-css-prefix}-spell-check:before { content: fa-content($fa-var-spell-check); } +.#{$fa-css-prefix}-spider:before { content: fa-content($fa-var-spider); } +.#{$fa-css-prefix}-spinner:before { content: fa-content($fa-var-spinner); } +.#{$fa-css-prefix}-splotch:before { content: fa-content($fa-var-splotch); } +.#{$fa-css-prefix}-spotify:before { content: fa-content($fa-var-spotify); } +.#{$fa-css-prefix}-spray-can:before { content: fa-content($fa-var-spray-can); } +.#{$fa-css-prefix}-square:before { content: fa-content($fa-var-square); } +.#{$fa-css-prefix}-square-full:before { content: fa-content($fa-var-square-full); } +.#{$fa-css-prefix}-square-root-alt:before { content: fa-content($fa-var-square-root-alt); } +.#{$fa-css-prefix}-squarespace:before { content: fa-content($fa-var-squarespace); } +.#{$fa-css-prefix}-stack-exchange:before { content: fa-content($fa-var-stack-exchange); } +.#{$fa-css-prefix}-stack-overflow:before { content: fa-content($fa-var-stack-overflow); } +.#{$fa-css-prefix}-stackpath:before { content: fa-content($fa-var-stackpath); } +.#{$fa-css-prefix}-stamp:before { content: fa-content($fa-var-stamp); } +.#{$fa-css-prefix}-star:before { content: fa-content($fa-var-star); } +.#{$fa-css-prefix}-star-and-crescent:before { content: fa-content($fa-var-star-and-crescent); } +.#{$fa-css-prefix}-star-half:before { content: fa-content($fa-var-star-half); } +.#{$fa-css-prefix}-star-half-alt:before { content: fa-content($fa-var-star-half-alt); } +.#{$fa-css-prefix}-star-of-david:before { content: fa-content($fa-var-star-of-david); } +.#{$fa-css-prefix}-star-of-life:before { content: fa-content($fa-var-star-of-life); } +.#{$fa-css-prefix}-staylinked:before { content: fa-content($fa-var-staylinked); } +.#{$fa-css-prefix}-steam:before { content: fa-content($fa-var-steam); } +.#{$fa-css-prefix}-steam-square:before { content: fa-content($fa-var-steam-square); } +.#{$fa-css-prefix}-steam-symbol:before { content: fa-content($fa-var-steam-symbol); } +.#{$fa-css-prefix}-step-backward:before { content: fa-content($fa-var-step-backward); } +.#{$fa-css-prefix}-step-forward:before { content: fa-content($fa-var-step-forward); } +.#{$fa-css-prefix}-stethoscope:before { content: fa-content($fa-var-stethoscope); } +.#{$fa-css-prefix}-sticker-mule:before { content: fa-content($fa-var-sticker-mule); } +.#{$fa-css-prefix}-sticky-note:before { content: fa-content($fa-var-sticky-note); } +.#{$fa-css-prefix}-stop:before { content: fa-content($fa-var-stop); } +.#{$fa-css-prefix}-stop-circle:before { content: fa-content($fa-var-stop-circle); } +.#{$fa-css-prefix}-stopwatch:before { content: fa-content($fa-var-stopwatch); } +.#{$fa-css-prefix}-stopwatch-20:before { content: fa-content($fa-var-stopwatch-20); } +.#{$fa-css-prefix}-store:before { content: fa-content($fa-var-store); } +.#{$fa-css-prefix}-store-alt:before { content: fa-content($fa-var-store-alt); } +.#{$fa-css-prefix}-store-alt-slash:before { content: fa-content($fa-var-store-alt-slash); } +.#{$fa-css-prefix}-store-slash:before { content: fa-content($fa-var-store-slash); } +.#{$fa-css-prefix}-strava:before { content: fa-content($fa-var-strava); } +.#{$fa-css-prefix}-stream:before { content: fa-content($fa-var-stream); } +.#{$fa-css-prefix}-street-view:before { content: fa-content($fa-var-street-view); } +.#{$fa-css-prefix}-strikethrough:before { content: fa-content($fa-var-strikethrough); } +.#{$fa-css-prefix}-stripe:before { content: fa-content($fa-var-stripe); } +.#{$fa-css-prefix}-stripe-s:before { content: fa-content($fa-var-stripe-s); } +.#{$fa-css-prefix}-stroopwafel:before { content: fa-content($fa-var-stroopwafel); } +.#{$fa-css-prefix}-studiovinari:before { content: fa-content($fa-var-studiovinari); } +.#{$fa-css-prefix}-stumbleupon:before { content: fa-content($fa-var-stumbleupon); } +.#{$fa-css-prefix}-stumbleupon-circle:before { content: fa-content($fa-var-stumbleupon-circle); } +.#{$fa-css-prefix}-subscript:before { content: fa-content($fa-var-subscript); } +.#{$fa-css-prefix}-subway:before { content: fa-content($fa-var-subway); } +.#{$fa-css-prefix}-suitcase:before { content: fa-content($fa-var-suitcase); } +.#{$fa-css-prefix}-suitcase-rolling:before { content: fa-content($fa-var-suitcase-rolling); } +.#{$fa-css-prefix}-sun:before { content: fa-content($fa-var-sun); } +.#{$fa-css-prefix}-superpowers:before { content: fa-content($fa-var-superpowers); } +.#{$fa-css-prefix}-superscript:before { content: fa-content($fa-var-superscript); } +.#{$fa-css-prefix}-supple:before { content: fa-content($fa-var-supple); } +.#{$fa-css-prefix}-surprise:before { content: fa-content($fa-var-surprise); } +.#{$fa-css-prefix}-suse:before { content: fa-content($fa-var-suse); } +.#{$fa-css-prefix}-swatchbook:before { content: fa-content($fa-var-swatchbook); } +.#{$fa-css-prefix}-swift:before { content: fa-content($fa-var-swift); } +.#{$fa-css-prefix}-swimmer:before { content: fa-content($fa-var-swimmer); } +.#{$fa-css-prefix}-swimming-pool:before { content: fa-content($fa-var-swimming-pool); } +.#{$fa-css-prefix}-symfony:before { content: fa-content($fa-var-symfony); } +.#{$fa-css-prefix}-synagogue:before { content: fa-content($fa-var-synagogue); } +.#{$fa-css-prefix}-sync:before { content: fa-content($fa-var-sync); } +.#{$fa-css-prefix}-sync-alt:before { content: fa-content($fa-var-sync-alt); } +.#{$fa-css-prefix}-syringe:before { content: fa-content($fa-var-syringe); } +.#{$fa-css-prefix}-table:before { content: fa-content($fa-var-table); } +.#{$fa-css-prefix}-table-tennis:before { content: fa-content($fa-var-table-tennis); } +.#{$fa-css-prefix}-tablet:before { content: fa-content($fa-var-tablet); } +.#{$fa-css-prefix}-tablet-alt:before { content: fa-content($fa-var-tablet-alt); } +.#{$fa-css-prefix}-tablets:before { content: fa-content($fa-var-tablets); } +.#{$fa-css-prefix}-tachometer-alt:before { content: fa-content($fa-var-tachometer-alt); } +.#{$fa-css-prefix}-tag:before { content: fa-content($fa-var-tag); } +.#{$fa-css-prefix}-tags:before { content: fa-content($fa-var-tags); } +.#{$fa-css-prefix}-tape:before { content: fa-content($fa-var-tape); } +.#{$fa-css-prefix}-tasks:before { content: fa-content($fa-var-tasks); } +.#{$fa-css-prefix}-taxi:before { content: fa-content($fa-var-taxi); } +.#{$fa-css-prefix}-teamspeak:before { content: fa-content($fa-var-teamspeak); } +.#{$fa-css-prefix}-teeth:before { content: fa-content($fa-var-teeth); } +.#{$fa-css-prefix}-teeth-open:before { content: fa-content($fa-var-teeth-open); } +.#{$fa-css-prefix}-telegram:before { content: fa-content($fa-var-telegram); } +.#{$fa-css-prefix}-telegram-plane:before { content: fa-content($fa-var-telegram-plane); } +.#{$fa-css-prefix}-temperature-high:before { content: fa-content($fa-var-temperature-high); } +.#{$fa-css-prefix}-temperature-low:before { content: fa-content($fa-var-temperature-low); } +.#{$fa-css-prefix}-tencent-weibo:before { content: fa-content($fa-var-tencent-weibo); } +.#{$fa-css-prefix}-tenge:before { content: fa-content($fa-var-tenge); } +.#{$fa-css-prefix}-terminal:before { content: fa-content($fa-var-terminal); } +.#{$fa-css-prefix}-text-height:before { content: fa-content($fa-var-text-height); } +.#{$fa-css-prefix}-text-width:before { content: fa-content($fa-var-text-width); } +.#{$fa-css-prefix}-th:before { content: fa-content($fa-var-th); } +.#{$fa-css-prefix}-th-large:before { content: fa-content($fa-var-th-large); } +.#{$fa-css-prefix}-th-list:before { content: fa-content($fa-var-th-list); } +.#{$fa-css-prefix}-the-red-yeti:before { content: fa-content($fa-var-the-red-yeti); } +.#{$fa-css-prefix}-theater-masks:before { content: fa-content($fa-var-theater-masks); } +.#{$fa-css-prefix}-themeco:before { content: fa-content($fa-var-themeco); } +.#{$fa-css-prefix}-themeisle:before { content: fa-content($fa-var-themeisle); } +.#{$fa-css-prefix}-thermometer:before { content: fa-content($fa-var-thermometer); } +.#{$fa-css-prefix}-thermometer-empty:before { content: fa-content($fa-var-thermometer-empty); } +.#{$fa-css-prefix}-thermometer-full:before { content: fa-content($fa-var-thermometer-full); } +.#{$fa-css-prefix}-thermometer-half:before { content: fa-content($fa-var-thermometer-half); } +.#{$fa-css-prefix}-thermometer-quarter:before { content: fa-content($fa-var-thermometer-quarter); } +.#{$fa-css-prefix}-thermometer-three-quarters:before { content: fa-content($fa-var-thermometer-three-quarters); } +.#{$fa-css-prefix}-think-peaks:before { content: fa-content($fa-var-think-peaks); } +.#{$fa-css-prefix}-thumbs-down:before { content: fa-content($fa-var-thumbs-down); } +.#{$fa-css-prefix}-thumbs-up:before { content: fa-content($fa-var-thumbs-up); } +.#{$fa-css-prefix}-thumbtack:before { content: fa-content($fa-var-thumbtack); } +.#{$fa-css-prefix}-ticket-alt:before { content: fa-content($fa-var-ticket-alt); } +.#{$fa-css-prefix}-tiktok:before { content: fa-content($fa-var-tiktok); } +.#{$fa-css-prefix}-times:before { content: fa-content($fa-var-times); } +.#{$fa-css-prefix}-times-circle:before { content: fa-content($fa-var-times-circle); } +.#{$fa-css-prefix}-tint:before { content: fa-content($fa-var-tint); } +.#{$fa-css-prefix}-tint-slash:before { content: fa-content($fa-var-tint-slash); } +.#{$fa-css-prefix}-tired:before { content: fa-content($fa-var-tired); } +.#{$fa-css-prefix}-toggle-off:before { content: fa-content($fa-var-toggle-off); } +.#{$fa-css-prefix}-toggle-on:before { content: fa-content($fa-var-toggle-on); } +.#{$fa-css-prefix}-toilet:before { content: fa-content($fa-var-toilet); } +.#{$fa-css-prefix}-toilet-paper:before { content: fa-content($fa-var-toilet-paper); } +.#{$fa-css-prefix}-toilet-paper-slash:before { content: fa-content($fa-var-toilet-paper-slash); } +.#{$fa-css-prefix}-toolbox:before { content: fa-content($fa-var-toolbox); } +.#{$fa-css-prefix}-tools:before { content: fa-content($fa-var-tools); } +.#{$fa-css-prefix}-tooth:before { content: fa-content($fa-var-tooth); } +.#{$fa-css-prefix}-torah:before { content: fa-content($fa-var-torah); } +.#{$fa-css-prefix}-torii-gate:before { content: fa-content($fa-var-torii-gate); } +.#{$fa-css-prefix}-tractor:before { content: fa-content($fa-var-tractor); } +.#{$fa-css-prefix}-trade-federation:before { content: fa-content($fa-var-trade-federation); } +.#{$fa-css-prefix}-trademark:before { content: fa-content($fa-var-trademark); } +.#{$fa-css-prefix}-traffic-light:before { content: fa-content($fa-var-traffic-light); } +.#{$fa-css-prefix}-trailer:before { content: fa-content($fa-var-trailer); } +.#{$fa-css-prefix}-train:before { content: fa-content($fa-var-train); } +.#{$fa-css-prefix}-tram:before { content: fa-content($fa-var-tram); } +.#{$fa-css-prefix}-transgender:before { content: fa-content($fa-var-transgender); } +.#{$fa-css-prefix}-transgender-alt:before { content: fa-content($fa-var-transgender-alt); } +.#{$fa-css-prefix}-trash:before { content: fa-content($fa-var-trash); } +.#{$fa-css-prefix}-trash-alt:before { content: fa-content($fa-var-trash-alt); } +.#{$fa-css-prefix}-trash-restore:before { content: fa-content($fa-var-trash-restore); } +.#{$fa-css-prefix}-trash-restore-alt:before { content: fa-content($fa-var-trash-restore-alt); } +.#{$fa-css-prefix}-tree:before { content: fa-content($fa-var-tree); } +.#{$fa-css-prefix}-trello:before { content: fa-content($fa-var-trello); } +.#{$fa-css-prefix}-tripadvisor:before { content: fa-content($fa-var-tripadvisor); } +.#{$fa-css-prefix}-trophy:before { content: fa-content($fa-var-trophy); } +.#{$fa-css-prefix}-truck:before { content: fa-content($fa-var-truck); } +.#{$fa-css-prefix}-truck-loading:before { content: fa-content($fa-var-truck-loading); } +.#{$fa-css-prefix}-truck-monster:before { content: fa-content($fa-var-truck-monster); } +.#{$fa-css-prefix}-truck-moving:before { content: fa-content($fa-var-truck-moving); } +.#{$fa-css-prefix}-truck-pickup:before { content: fa-content($fa-var-truck-pickup); } +.#{$fa-css-prefix}-tshirt:before { content: fa-content($fa-var-tshirt); } +.#{$fa-css-prefix}-tty:before { content: fa-content($fa-var-tty); } +.#{$fa-css-prefix}-tumblr:before { content: fa-content($fa-var-tumblr); } +.#{$fa-css-prefix}-tumblr-square:before { content: fa-content($fa-var-tumblr-square); } +.#{$fa-css-prefix}-tv:before { content: fa-content($fa-var-tv); } +.#{$fa-css-prefix}-twitch:before { content: fa-content($fa-var-twitch); } +.#{$fa-css-prefix}-twitter:before { content: fa-content($fa-var-twitter); } +.#{$fa-css-prefix}-twitter-square:before { content: fa-content($fa-var-twitter-square); } +.#{$fa-css-prefix}-typo3:before { content: fa-content($fa-var-typo3); } +.#{$fa-css-prefix}-uber:before { content: fa-content($fa-var-uber); } +.#{$fa-css-prefix}-ubuntu:before { content: fa-content($fa-var-ubuntu); } +.#{$fa-css-prefix}-uikit:before { content: fa-content($fa-var-uikit); } +.#{$fa-css-prefix}-umbraco:before { content: fa-content($fa-var-umbraco); } +.#{$fa-css-prefix}-umbrella:before { content: fa-content($fa-var-umbrella); } +.#{$fa-css-prefix}-umbrella-beach:before { content: fa-content($fa-var-umbrella-beach); } +.#{$fa-css-prefix}-uncharted:before { content: fa-content($fa-var-uncharted); } +.#{$fa-css-prefix}-underline:before { content: fa-content($fa-var-underline); } +.#{$fa-css-prefix}-undo:before { content: fa-content($fa-var-undo); } +.#{$fa-css-prefix}-undo-alt:before { content: fa-content($fa-var-undo-alt); } +.#{$fa-css-prefix}-uniregistry:before { content: fa-content($fa-var-uniregistry); } +.#{$fa-css-prefix}-unity:before { content: fa-content($fa-var-unity); } +.#{$fa-css-prefix}-universal-access:before { content: fa-content($fa-var-universal-access); } +.#{$fa-css-prefix}-university:before { content: fa-content($fa-var-university); } +.#{$fa-css-prefix}-unlink:before { content: fa-content($fa-var-unlink); } +.#{$fa-css-prefix}-unlock:before { content: fa-content($fa-var-unlock); } +.#{$fa-css-prefix}-unlock-alt:before { content: fa-content($fa-var-unlock-alt); } +.#{$fa-css-prefix}-unsplash:before { content: fa-content($fa-var-unsplash); } +.#{$fa-css-prefix}-untappd:before { content: fa-content($fa-var-untappd); } +.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-upload); } +.#{$fa-css-prefix}-ups:before { content: fa-content($fa-var-ups); } +.#{$fa-css-prefix}-usb:before { content: fa-content($fa-var-usb); } +.#{$fa-css-prefix}-user:before { content: fa-content($fa-var-user); } +.#{$fa-css-prefix}-user-alt:before { content: fa-content($fa-var-user-alt); } +.#{$fa-css-prefix}-user-alt-slash:before { content: fa-content($fa-var-user-alt-slash); } +.#{$fa-css-prefix}-user-astronaut:before { content: fa-content($fa-var-user-astronaut); } +.#{$fa-css-prefix}-user-check:before { content: fa-content($fa-var-user-check); } +.#{$fa-css-prefix}-user-circle:before { content: fa-content($fa-var-user-circle); } +.#{$fa-css-prefix}-user-clock:before { content: fa-content($fa-var-user-clock); } +.#{$fa-css-prefix}-user-cog:before { content: fa-content($fa-var-user-cog); } +.#{$fa-css-prefix}-user-edit:before { content: fa-content($fa-var-user-edit); } +.#{$fa-css-prefix}-user-friends:before { content: fa-content($fa-var-user-friends); } +.#{$fa-css-prefix}-user-graduate:before { content: fa-content($fa-var-user-graduate); } +.#{$fa-css-prefix}-user-injured:before { content: fa-content($fa-var-user-injured); } +.#{$fa-css-prefix}-user-lock:before { content: fa-content($fa-var-user-lock); } +.#{$fa-css-prefix}-user-md:before { content: fa-content($fa-var-user-md); } +.#{$fa-css-prefix}-user-minus:before { content: fa-content($fa-var-user-minus); } +.#{$fa-css-prefix}-user-ninja:before { content: fa-content($fa-var-user-ninja); } +.#{$fa-css-prefix}-user-nurse:before { content: fa-content($fa-var-user-nurse); } +.#{$fa-css-prefix}-user-plus:before { content: fa-content($fa-var-user-plus); } +.#{$fa-css-prefix}-user-secret:before { content: fa-content($fa-var-user-secret); } +.#{$fa-css-prefix}-user-shield:before { content: fa-content($fa-var-user-shield); } +.#{$fa-css-prefix}-user-slash:before { content: fa-content($fa-var-user-slash); } +.#{$fa-css-prefix}-user-tag:before { content: fa-content($fa-var-user-tag); } +.#{$fa-css-prefix}-user-tie:before { content: fa-content($fa-var-user-tie); } +.#{$fa-css-prefix}-user-times:before { content: fa-content($fa-var-user-times); } +.#{$fa-css-prefix}-users:before { content: fa-content($fa-var-users); } +.#{$fa-css-prefix}-users-cog:before { content: fa-content($fa-var-users-cog); } +.#{$fa-css-prefix}-users-slash:before { content: fa-content($fa-var-users-slash); } +.#{$fa-css-prefix}-usps:before { content: fa-content($fa-var-usps); } +.#{$fa-css-prefix}-ussunnah:before { content: fa-content($fa-var-ussunnah); } +.#{$fa-css-prefix}-utensil-spoon:before { content: fa-content($fa-var-utensil-spoon); } +.#{$fa-css-prefix}-utensils:before { content: fa-content($fa-var-utensils); } +.#{$fa-css-prefix}-vaadin:before { content: fa-content($fa-var-vaadin); } +.#{$fa-css-prefix}-vector-square:before { content: fa-content($fa-var-vector-square); } +.#{$fa-css-prefix}-venus:before { content: fa-content($fa-var-venus); } +.#{$fa-css-prefix}-venus-double:before { content: fa-content($fa-var-venus-double); } +.#{$fa-css-prefix}-venus-mars:before { content: fa-content($fa-var-venus-mars); } +.#{$fa-css-prefix}-vest:before { content: fa-content($fa-var-vest); } +.#{$fa-css-prefix}-vest-patches:before { content: fa-content($fa-var-vest-patches); } +.#{$fa-css-prefix}-viacoin:before { content: fa-content($fa-var-viacoin); } +.#{$fa-css-prefix}-viadeo:before { content: fa-content($fa-var-viadeo); } +.#{$fa-css-prefix}-viadeo-square:before { content: fa-content($fa-var-viadeo-square); } +.#{$fa-css-prefix}-vial:before { content: fa-content($fa-var-vial); } +.#{$fa-css-prefix}-vials:before { content: fa-content($fa-var-vials); } +.#{$fa-css-prefix}-viber:before { content: fa-content($fa-var-viber); } +.#{$fa-css-prefix}-video:before { content: fa-content($fa-var-video); } +.#{$fa-css-prefix}-video-slash:before { content: fa-content($fa-var-video-slash); } +.#{$fa-css-prefix}-vihara:before { content: fa-content($fa-var-vihara); } +.#{$fa-css-prefix}-vimeo:before { content: fa-content($fa-var-vimeo); } +.#{$fa-css-prefix}-vimeo-square:before { content: fa-content($fa-var-vimeo-square); } +.#{$fa-css-prefix}-vimeo-v:before { content: fa-content($fa-var-vimeo-v); } +.#{$fa-css-prefix}-vine:before { content: fa-content($fa-var-vine); } +.#{$fa-css-prefix}-virus:before { content: fa-content($fa-var-virus); } +.#{$fa-css-prefix}-virus-slash:before { content: fa-content($fa-var-virus-slash); } +.#{$fa-css-prefix}-viruses:before { content: fa-content($fa-var-viruses); } +.#{$fa-css-prefix}-vk:before { content: fa-content($fa-var-vk); } +.#{$fa-css-prefix}-vnv:before { content: fa-content($fa-var-vnv); } +.#{$fa-css-prefix}-voicemail:before { content: fa-content($fa-var-voicemail); } +.#{$fa-css-prefix}-volleyball-ball:before { content: fa-content($fa-var-volleyball-ball); } +.#{$fa-css-prefix}-volume-down:before { content: fa-content($fa-var-volume-down); } +.#{$fa-css-prefix}-volume-mute:before { content: fa-content($fa-var-volume-mute); } +.#{$fa-css-prefix}-volume-off:before { content: fa-content($fa-var-volume-off); } +.#{$fa-css-prefix}-volume-up:before { content: fa-content($fa-var-volume-up); } +.#{$fa-css-prefix}-vote-yea:before { content: fa-content($fa-var-vote-yea); } +.#{$fa-css-prefix}-vr-cardboard:before { content: fa-content($fa-var-vr-cardboard); } +.#{$fa-css-prefix}-vuejs:before { content: fa-content($fa-var-vuejs); } +.#{$fa-css-prefix}-walking:before { content: fa-content($fa-var-walking); } +.#{$fa-css-prefix}-wallet:before { content: fa-content($fa-var-wallet); } +.#{$fa-css-prefix}-warehouse:before { content: fa-content($fa-var-warehouse); } +.#{$fa-css-prefix}-watchman-monitoring:before { content: fa-content($fa-var-watchman-monitoring); } +.#{$fa-css-prefix}-water:before { content: fa-content($fa-var-water); } +.#{$fa-css-prefix}-wave-square:before { content: fa-content($fa-var-wave-square); } +.#{$fa-css-prefix}-waze:before { content: fa-content($fa-var-waze); } +.#{$fa-css-prefix}-weebly:before { content: fa-content($fa-var-weebly); } +.#{$fa-css-prefix}-weibo:before { content: fa-content($fa-var-weibo); } +.#{$fa-css-prefix}-weight:before { content: fa-content($fa-var-weight); } +.#{$fa-css-prefix}-weight-hanging:before { content: fa-content($fa-var-weight-hanging); } +.#{$fa-css-prefix}-weixin:before { content: fa-content($fa-var-weixin); } +.#{$fa-css-prefix}-whatsapp:before { content: fa-content($fa-var-whatsapp); } +.#{$fa-css-prefix}-whatsapp-square:before { content: fa-content($fa-var-whatsapp-square); } +.#{$fa-css-prefix}-wheelchair:before { content: fa-content($fa-var-wheelchair); } +.#{$fa-css-prefix}-whmcs:before { content: fa-content($fa-var-whmcs); } +.#{$fa-css-prefix}-wifi:before { content: fa-content($fa-var-wifi); } +.#{$fa-css-prefix}-wikipedia-w:before { content: fa-content($fa-var-wikipedia-w); } +.#{$fa-css-prefix}-wind:before { content: fa-content($fa-var-wind); } +.#{$fa-css-prefix}-window-close:before { content: fa-content($fa-var-window-close); } +.#{$fa-css-prefix}-window-maximize:before { content: fa-content($fa-var-window-maximize); } +.#{$fa-css-prefix}-window-minimize:before { content: fa-content($fa-var-window-minimize); } +.#{$fa-css-prefix}-window-restore:before { content: fa-content($fa-var-window-restore); } +.#{$fa-css-prefix}-windows:before { content: fa-content($fa-var-windows); } +.#{$fa-css-prefix}-wine-bottle:before { content: fa-content($fa-var-wine-bottle); } +.#{$fa-css-prefix}-wine-glass:before { content: fa-content($fa-var-wine-glass); } +.#{$fa-css-prefix}-wine-glass-alt:before { content: fa-content($fa-var-wine-glass-alt); } +.#{$fa-css-prefix}-wix:before { content: fa-content($fa-var-wix); } +.#{$fa-css-prefix}-wizards-of-the-coast:before { content: fa-content($fa-var-wizards-of-the-coast); } +.#{$fa-css-prefix}-wodu:before { content: fa-content($fa-var-wodu); } +.#{$fa-css-prefix}-wolf-pack-battalion:before { content: fa-content($fa-var-wolf-pack-battalion); } +.#{$fa-css-prefix}-won-sign:before { content: fa-content($fa-var-won-sign); } +.#{$fa-css-prefix}-wordpress:before { content: fa-content($fa-var-wordpress); } +.#{$fa-css-prefix}-wordpress-simple:before { content: fa-content($fa-var-wordpress-simple); } +.#{$fa-css-prefix}-wpbeginner:before { content: fa-content($fa-var-wpbeginner); } +.#{$fa-css-prefix}-wpexplorer:before { content: fa-content($fa-var-wpexplorer); } +.#{$fa-css-prefix}-wpforms:before { content: fa-content($fa-var-wpforms); } +.#{$fa-css-prefix}-wpressr:before { content: fa-content($fa-var-wpressr); } +.#{$fa-css-prefix}-wrench:before { content: fa-content($fa-var-wrench); } +.#{$fa-css-prefix}-x-ray:before { content: fa-content($fa-var-x-ray); } +.#{$fa-css-prefix}-xbox:before { content: fa-content($fa-var-xbox); } +.#{$fa-css-prefix}-xing:before { content: fa-content($fa-var-xing); } +.#{$fa-css-prefix}-xing-square:before { content: fa-content($fa-var-xing-square); } +.#{$fa-css-prefix}-y-combinator:before { content: fa-content($fa-var-y-combinator); } +.#{$fa-css-prefix}-yahoo:before { content: fa-content($fa-var-yahoo); } +.#{$fa-css-prefix}-yammer:before { content: fa-content($fa-var-yammer); } +.#{$fa-css-prefix}-yandex:before { content: fa-content($fa-var-yandex); } +.#{$fa-css-prefix}-yandex-international:before { content: fa-content($fa-var-yandex-international); } +.#{$fa-css-prefix}-yarn:before { content: fa-content($fa-var-yarn); } +.#{$fa-css-prefix}-yelp:before { content: fa-content($fa-var-yelp); } +.#{$fa-css-prefix}-yen-sign:before { content: fa-content($fa-var-yen-sign); } +.#{$fa-css-prefix}-yin-yang:before { content: fa-content($fa-var-yin-yang); } +.#{$fa-css-prefix}-yoast:before { content: fa-content($fa-var-yoast); } +.#{$fa-css-prefix}-youtube:before { content: fa-content($fa-var-youtube); } +.#{$fa-css-prefix}-youtube-square:before { content: fa-content($fa-var-youtube-square); } +.#{$fa-css-prefix}-zhihu:before { content: fa-content($fa-var-zhihu); } diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_larger.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_larger.scss new file mode 100644 index 0000000..27c2ad5 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_larger.scss @@ -0,0 +1,23 @@ +// Icon Sizes +// ------------------------- + +// makes the font 33% larger relative to the icon container +.#{$fa-css-prefix}-lg { + font-size: (4em / 3); + line-height: (3em / 4); + vertical-align: -.0667em; +} + +.#{$fa-css-prefix}-xs { + font-size: .75em; +} + +.#{$fa-css-prefix}-sm { + font-size: .875em; +} + +@for $i from 1 through 10 { + .#{$fa-css-prefix}-#{$i}x { + font-size: $i * 1em; + } +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_list.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_list.scss new file mode 100644 index 0000000..8ebf333 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_list.scss @@ -0,0 +1,18 @@ +// List Icons +// ------------------------- + +.#{$fa-css-prefix}-ul { + list-style-type: none; + margin-left: $fa-li-width * 5/4; + padding-left: 0; + + > li { position: relative; } +} + +.#{$fa-css-prefix}-li { + left: -$fa-li-width; + position: absolute; + text-align: center; + width: $fa-li-width; + line-height: inherit; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_mixins.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_mixins.scss new file mode 100644 index 0000000..55baeeb --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_mixins.scss @@ -0,0 +1,56 @@ +// Mixins +// -------------------------- + +@mixin fa-icon { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: inline-block; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; +} + +@mixin fa-icon-rotate($degrees, $rotation) { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; + transform: rotate($degrees); +} + +@mixin fa-icon-flip($horiz, $vert, $rotation) { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; + transform: scale($horiz, $vert); +} + + +// Only display content to screen readers. A la Bootstrap 4. +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +@mixin sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// +// Credit: HTML5 Boilerplate + +@mixin sr-only-focusable { + &:active, + &:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + } +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_rotated-flipped.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_rotated-flipped.scss new file mode 100644 index 0000000..164d972 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_rotated-flipped.scss @@ -0,0 +1,24 @@ +// Rotated & Flipped Icons +// ------------------------- + +.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } +.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } +.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } + +.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } +.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } +.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); } + +// Hook for IE8-9 +// ------------------------- + +:root { + .#{$fa-css-prefix}-rotate-90, + .#{$fa-css-prefix}-rotate-180, + .#{$fa-css-prefix}-rotate-270, + .#{$fa-css-prefix}-flip-horizontal, + .#{$fa-css-prefix}-flip-vertical, + .#{$fa-css-prefix}-flip-both { + filter: none; + } +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_screen-reader.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_screen-reader.scss new file mode 100644 index 0000000..5d0ab26 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_screen-reader.scss @@ -0,0 +1,5 @@ +// Screen Readers +// ------------------------- + +.sr-only { @include sr-only; } +.sr-only-focusable { @include sr-only-focusable; } diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_shims.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_shims.scss new file mode 100644 index 0000000..d175344 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_shims.scss @@ -0,0 +1,2066 @@ +.#{$fa-css-prefix}.#{$fa-css-prefix}-glass:before { content: fa-content($fa-var-glass-martini); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-meetup { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-o:before { content: fa-content($fa-var-star); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-remove:before { content: fa-content($fa-var-times); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-close:before { content: fa-content($fa-var-times); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gear:before { content: fa-content($fa-var-cog); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-trash-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-trash-o:before { content: fa-content($fa-var-trash-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-o:before { content: fa-content($fa-var-file); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-clock-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-clock-o:before { content: fa-content($fa-var-clock); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-down { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-down:before { content: fa-content($fa-var-arrow-alt-circle-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-up { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-up:before { content: fa-content($fa-var-arrow-alt-circle-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-play-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-play-circle-o:before { content: fa-content($fa-var-play-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-repeat:before { content: fa-content($fa-var-redo); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rotate-right:before { content: fa-content($fa-var-redo); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-list-alt { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dedent:before { content: fa-content($fa-var-outdent); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-video-camera:before { content: fa-content($fa-var-video); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-picture-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-picture-o:before { content: fa-content($fa-var-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-photo { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-photo:before { content: fa-content($fa-var-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-image { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pencil:before { content: fa-content($fa-var-pencil-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-map-marker:before { content: fa-content($fa-var-map-marker-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pencil-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-pencil-square-o:before { content: fa-content($fa-var-edit); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-share-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-share-square-o:before { content: fa-content($fa-var-share-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-check-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-check-square-o:before { content: fa-content($fa-var-check-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrows:before { content: fa-content($fa-var-arrows-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-times-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-times-circle-o:before { content: fa-content($fa-var-times-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-check-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-check-circle-o:before { content: fa-content($fa-var-check-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mail-forward:before { content: fa-content($fa-var-share); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-expand:before { content: fa-content($fa-var-expand-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-compress:before { content: fa-content($fa-var-compress-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-eye { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-eye-slash { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrows-v:before { content: fa-content($fa-var-arrows-alt-v); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrows-h:before { content: fa-content($fa-var-arrows-alt-h); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bar-chart { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bar-chart:before { content: fa-content($fa-var-chart-bar); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bar-chart-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bar-chart-o:before { content: fa-content($fa-var-chart-bar); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-twitter-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gears:before { content: fa-content($fa-var-cogs); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thumbs-o-up { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-thumbs-o-up:before { content: fa-content($fa-var-thumbs-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thumbs-o-down { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-thumbs-o-down:before { content: fa-content($fa-var-thumbs-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-heart-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-heart-o:before { content: fa-content($fa-var-heart); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sign-out:before { content: fa-content($fa-var-sign-out-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-linkedin-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-linkedin-square:before { content: fa-content($fa-var-linkedin); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thumb-tack:before { content: fa-content($fa-var-thumbtack); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-external-link:before { content: fa-content($fa-var-external-link-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sign-in:before { content: fa-content($fa-var-sign-in-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-github-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-lemon-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-lemon-o:before { content: fa-content($fa-var-lemon); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-square-o:before { content: fa-content($fa-var-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bookmark-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bookmark-o:before { content: fa-content($fa-var-bookmark); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-twitter { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook:before { content: fa-content($fa-var-facebook-f); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook-f { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook-f:before { content: fa-content($fa-var-facebook-f); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-github { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-credit-card { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-feed:before { content: fa-content($fa-var-rss); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hdd-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hdd-o:before { content: fa-content($fa-var-hdd); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-right { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-right:before { content: fa-content($fa-var-hand-point-right); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-left { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-left:before { content: fa-content($fa-var-hand-point-left); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-up { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-up:before { content: fa-content($fa-var-hand-point-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-down { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-o-down:before { content: fa-content($fa-var-hand-point-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrows-alt:before { content: fa-content($fa-var-expand-arrows-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-group:before { content: fa-content($fa-var-users); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-chain:before { content: fa-content($fa-var-link); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-scissors:before { content: fa-content($fa-var-cut); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-files-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-files-o:before { content: fa-content($fa-var-copy); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-floppy-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-floppy-o:before { content: fa-content($fa-var-save); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-navicon:before { content: fa-content($fa-var-bars); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-reorder:before { content: fa-content($fa-var-bars); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pinterest { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pinterest-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus:before { content: fa-content($fa-var-google-plus-g); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-money { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-money:before { content: fa-content($fa-var-money-bill-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-unsorted:before { content: fa-content($fa-var-sort); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-desc:before { content: fa-content($fa-var-sort-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-asc:before { content: fa-content($fa-var-sort-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-linkedin { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-linkedin:before { content: fa-content($fa-var-linkedin-in); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rotate-left:before { content: fa-content($fa-var-undo); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-legal:before { content: fa-content($fa-var-gavel); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tachometer:before { content: fa-content($fa-var-tachometer-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dashboard:before { content: fa-content($fa-var-tachometer-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-comment-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-comment-o:before { content: fa-content($fa-var-comment); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-comments-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-comments-o:before { content: fa-content($fa-var-comments); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-flash:before { content: fa-content($fa-var-bolt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-clipboard { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-paste { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-paste:before { content: fa-content($fa-var-clipboard); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-lightbulb-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-lightbulb-o:before { content: fa-content($fa-var-lightbulb); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-exchange:before { content: fa-content($fa-var-exchange-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cloud-download:before { content: fa-content($fa-var-cloud-download-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cloud-upload:before { content: fa-content($fa-var-cloud-upload-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bell-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bell-o:before { content: fa-content($fa-var-bell); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cutlery:before { content: fa-content($fa-var-utensils); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-text-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-text-o:before { content: fa-content($fa-var-file-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-building-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-building-o:before { content: fa-content($fa-var-building); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hospital-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hospital-o:before { content: fa-content($fa-var-hospital); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tablet:before { content: fa-content($fa-var-tablet-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mobile:before { content: fa-content($fa-var-mobile-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mobile-phone:before { content: fa-content($fa-var-mobile-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-circle-o:before { content: fa-content($fa-var-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mail-reply:before { content: fa-content($fa-var-reply); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-github-alt { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-folder-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-folder-o:before { content: fa-content($fa-var-folder); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-folder-open-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-folder-open-o:before { content: fa-content($fa-var-folder-open); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-smile-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-smile-o:before { content: fa-content($fa-var-smile); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-frown-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-frown-o:before { content: fa-content($fa-var-frown); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-meh-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-meh-o:before { content: fa-content($fa-var-meh); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-keyboard-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-keyboard-o:before { content: fa-content($fa-var-keyboard); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-flag-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-flag-o:before { content: fa-content($fa-var-flag); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mail-reply-all:before { content: fa-content($fa-var-reply-all); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-o:before { content: fa-content($fa-var-star-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-empty { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-empty:before { content: fa-content($fa-var-star-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-full { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-star-half-full:before { content: fa-content($fa-var-star-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-code-fork:before { content: fa-content($fa-var-code-branch); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-chain-broken:before { content: fa-content($fa-var-unlink); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-shield:before { content: fa-content($fa-var-shield-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-o:before { content: fa-content($fa-var-calendar); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-maxcdn { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-html5 { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-css3 { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ticket:before { content: fa-content($fa-var-ticket-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-minus-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-minus-square-o:before { content: fa-content($fa-var-minus-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-level-up:before { content: fa-content($fa-var-level-up-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-level-down:before { content: fa-content($fa-var-level-down-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pencil-square:before { content: fa-content($fa-var-pen-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-external-link-square:before { content: fa-content($fa-var-external-link-square-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-compass { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-down { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-down:before { content: fa-content($fa-var-caret-square-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-down { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-down:before { content: fa-content($fa-var-caret-square-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-up { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-up:before { content: fa-content($fa-var-caret-square-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-up { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-up:before { content: fa-content($fa-var-caret-square-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-right { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-right:before { content: fa-content($fa-var-caret-square-right); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-right { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-right:before { content: fa-content($fa-var-caret-square-right); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-eur:before { content: fa-content($fa-var-euro-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-euro:before { content: fa-content($fa-var-euro-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gbp:before { content: fa-content($fa-var-pound-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-usd:before { content: fa-content($fa-var-dollar-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dollar:before { content: fa-content($fa-var-dollar-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-inr:before { content: fa-content($fa-var-rupee-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rupee:before { content: fa-content($fa-var-rupee-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-jpy:before { content: fa-content($fa-var-yen-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cny:before { content: fa-content($fa-var-yen-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rmb:before { content: fa-content($fa-var-yen-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yen:before { content: fa-content($fa-var-yen-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rub:before { content: fa-content($fa-var-ruble-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ruble:before { content: fa-content($fa-var-ruble-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rouble:before { content: fa-content($fa-var-ruble-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-krw:before { content: fa-content($fa-var-won-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-won:before { content: fa-content($fa-var-won-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-btc { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bitcoin { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bitcoin:before { content: fa-content($fa-var-btc); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-text:before { content: fa-content($fa-var-file-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-alpha-asc:before { content: fa-content($fa-var-sort-alpha-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-alpha-desc:before { content: fa-content($fa-var-sort-alpha-down-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-amount-asc:before { content: fa-content($fa-var-sort-amount-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-amount-desc:before { content: fa-content($fa-var-sort-amount-down-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-numeric-asc:before { content: fa-content($fa-var-sort-numeric-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sort-numeric-desc:before { content: fa-content($fa-var-sort-numeric-down-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-youtube-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-youtube { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-xing { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-xing-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-youtube-play { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-youtube-play:before { content: fa-content($fa-var-youtube); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dropbox { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-stack-overflow { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-instagram { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-flickr { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-adn { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bitbucket { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bitbucket-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bitbucket-square:before { content: fa-content($fa-var-bitbucket); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tumblr { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tumblr-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-long-arrow-down:before { content: fa-content($fa-var-long-arrow-alt-down); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-long-arrow-up:before { content: fa-content($fa-var-long-arrow-alt-up); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-long-arrow-left:before { content: fa-content($fa-var-long-arrow-alt-left); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-long-arrow-right:before { content: fa-content($fa-var-long-arrow-alt-right); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-apple { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-windows { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-android { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-linux { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dribbble { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-skype { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-foursquare { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-trello { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gratipay { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gittip { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-gittip:before { content: fa-content($fa-var-gratipay); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sun-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-sun-o:before { content: fa-content($fa-var-sun); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-moon-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-moon-o:before { content: fa-content($fa-var-moon); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vk { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-weibo { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-renren { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pagelines { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-stack-exchange { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-right { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-right:before { content: fa-content($fa-var-arrow-alt-circle-right); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-left { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-arrow-circle-o-left:before { content: fa-content($fa-var-arrow-alt-circle-left); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-left { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-caret-square-o-left:before { content: fa-content($fa-var-caret-square-left); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-left { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-toggle-left:before { content: fa-content($fa-var-caret-square-left); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dot-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-dot-circle-o:before { content: fa-content($fa-var-dot-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vimeo-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-try:before { content: fa-content($fa-var-lira-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-turkish-lira:before { content: fa-content($fa-var-lira-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-plus-square-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-plus-square-o:before { content: fa-content($fa-var-plus-square); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-slack { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wordpress { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-openid { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-institution:before { content: fa-content($fa-var-university); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bank:before { content: fa-content($fa-var-university); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mortar-board:before { content: fa-content($fa-var-graduation-cap); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yahoo { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-reddit { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-reddit-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-stumbleupon-circle { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-stumbleupon { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-delicious { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-digg { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pied-piper-pp { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pied-piper-alt { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-drupal { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-joomla { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-spoon:before { content: fa-content($fa-var-utensil-spoon); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-behance { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-behance-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-steam { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-steam-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-automobile:before { content: fa-content($fa-var-car); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-envelope-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-envelope-o:before { content: fa-content($fa-var-envelope); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-spotify { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-deviantart { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-soundcloud { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-pdf-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-pdf-o:before { content: fa-content($fa-var-file-pdf); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-word-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-word-o:before { content: fa-content($fa-var-file-word); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-excel-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-excel-o:before { content: fa-content($fa-var-file-excel); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-powerpoint-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-powerpoint-o:before { content: fa-content($fa-var-file-powerpoint); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-image-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-image-o:before { content: fa-content($fa-var-file-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-photo-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-photo-o:before { content: fa-content($fa-var-file-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-picture-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-picture-o:before { content: fa-content($fa-var-file-image); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-archive-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-archive-o:before { content: fa-content($fa-var-file-archive); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-zip-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-zip-o:before { content: fa-content($fa-var-file-archive); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-audio-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-audio-o:before { content: fa-content($fa-var-file-audio); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-sound-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-sound-o:before { content: fa-content($fa-var-file-audio); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-video-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-video-o:before { content: fa-content($fa-var-file-video); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-movie-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-movie-o:before { content: fa-content($fa-var-file-video); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-code-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-file-code-o:before { content: fa-content($fa-var-file-code); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vine { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-codepen { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-jsfiddle { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-ring { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-bouy { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-bouy:before { content: fa-content($fa-var-life-ring); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-buoy { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-buoy:before { content: fa-content($fa-var-life-ring); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-saver { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-life-saver:before { content: fa-content($fa-var-life-ring); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-support { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-support:before { content: fa-content($fa-var-life-ring); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-circle-o-notch:before { content: fa-content($fa-var-circle-notch); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-rebel { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ra { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-ra:before { content: fa-content($fa-var-rebel); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-resistance { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-resistance:before { content: fa-content($fa-var-rebel); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-empire { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ge { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-ge:before { content: fa-content($fa-var-empire); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-git-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-git { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hacker-news { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-y-combinator-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-y-combinator-square:before { content: fa-content($fa-var-hacker-news); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yc-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-yc-square:before { content: fa-content($fa-var-hacker-news); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tencent-weibo { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-qq { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-weixin { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wechat { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-wechat:before { content: fa-content($fa-var-weixin); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-send:before { content: fa-content($fa-var-paper-plane); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-paper-plane-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-paper-plane-o:before { content: fa-content($fa-var-paper-plane); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-send-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-send-o:before { content: fa-content($fa-var-paper-plane); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-circle-thin { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-circle-thin:before { content: fa-content($fa-var-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-header:before { content: fa-content($fa-var-heading); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sliders:before { content: fa-content($fa-var-sliders-h); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-futbol-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-futbol-o:before { content: fa-content($fa-var-futbol); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-soccer-ball-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-soccer-ball-o:before { content: fa-content($fa-var-futbol); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-slideshare { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-twitch { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yelp { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-newspaper-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-newspaper-o:before { content: fa-content($fa-var-newspaper); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-paypal { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-wallet { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-visa { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-mastercard { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-discover { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-amex { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-paypal { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-stripe { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bell-slash-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-bell-slash-o:before { content: fa-content($fa-var-bell-slash); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-trash:before { content: fa-content($fa-var-trash-alt); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-copyright { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-eyedropper:before { content: fa-content($fa-var-eye-dropper); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-area-chart:before { content: fa-content($fa-var-chart-area); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pie-chart:before { content: fa-content($fa-var-chart-pie); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-line-chart:before { content: fa-content($fa-var-chart-line); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-lastfm { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-lastfm-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ioxhost { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-angellist { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc:before { content: fa-content($fa-var-closed-captioning); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ils:before { content: fa-content($fa-var-shekel-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-shekel:before { content: fa-content($fa-var-shekel-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sheqel:before { content: fa-content($fa-var-shekel-sign); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-meanpath { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-meanpath:before { content: fa-content($fa-var-font-awesome); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-buysellads { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-connectdevelop { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-dashcube { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-forumbee { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-leanpub { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sellsy { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-shirtsinbulk { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-simplybuilt { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-skyatlas { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-diamond { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-diamond:before { content: fa-content($fa-var-gem); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-intersex:before { content: fa-content($fa-var-transgender); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook-official { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-facebook-official:before { content: fa-content($fa-var-facebook); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pinterest-p { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-whatsapp { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hotel:before { content: fa-content($fa-var-bed); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-viacoin { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-medium { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-y-combinator { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yc { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-yc:before { content: fa-content($fa-var-y-combinator); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-optin-monster { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-opencart { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-expeditedssl { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery-4:before { content: fa-content($fa-var-battery-full); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery:before { content: fa-content($fa-var-battery-full); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery-3:before { content: fa-content($fa-var-battery-three-quarters); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery-2:before { content: fa-content($fa-var-battery-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery-1:before { content: fa-content($fa-var-battery-quarter); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-battery-0:before { content: fa-content($fa-var-battery-empty); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-object-group { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-object-ungroup { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-sticky-note-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-sticky-note-o:before { content: fa-content($fa-var-sticky-note); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-jcb { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cc-diners-club { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-clone { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hourglass-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hourglass-o:before { content: fa-content($fa-var-hourglass); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hourglass-1:before { content: fa-content($fa-var-hourglass-start); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hourglass-2:before { content: fa-content($fa-var-hourglass-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hourglass-3:before { content: fa-content($fa-var-hourglass-end); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-rock-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-rock-o:before { content: fa-content($fa-var-hand-rock); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-grab-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-grab-o:before { content: fa-content($fa-var-hand-rock); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-paper-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-paper-o:before { content: fa-content($fa-var-hand-paper); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-stop-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-stop-o:before { content: fa-content($fa-var-hand-paper); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-scissors-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-scissors-o:before { content: fa-content($fa-var-hand-scissors); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-lizard-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-lizard-o:before { content: fa-content($fa-var-hand-lizard); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-spock-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-spock-o:before { content: fa-content($fa-var-hand-spock); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-pointer-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-pointer-o:before { content: fa-content($fa-var-hand-pointer); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-peace-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-hand-peace-o:before { content: fa-content($fa-var-hand-peace); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-registered { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-creative-commons { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gg { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gg-circle { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-tripadvisor { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-odnoklassniki { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-odnoklassniki-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-get-pocket { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wikipedia-w { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-safari { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-chrome { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-firefox { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-opera { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-internet-explorer { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-television:before { content: fa-content($fa-var-tv); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-contao { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-500px { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-amazon { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-plus-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-plus-o:before { content: fa-content($fa-var-calendar-plus); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-minus-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-minus-o:before { content: fa-content($fa-var-calendar-minus); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-times-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-times-o:before { content: fa-content($fa-var-calendar-times); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-check-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-calendar-check-o:before { content: fa-content($fa-var-calendar-check); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-map-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-map-o:before { content: fa-content($fa-var-map); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-commenting:before { content: fa-content($fa-var-comment-dots); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-commenting-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-commenting-o:before { content: fa-content($fa-var-comment-dots); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-houzz { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vimeo { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-vimeo:before { content: fa-content($fa-var-vimeo-v); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-black-tie { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-fonticons { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-reddit-alien { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-edge { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-credit-card-alt:before { content: fa-content($fa-var-credit-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-codiepie { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-modx { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-fort-awesome { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-usb { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-product-hunt { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-mixcloud { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-scribd { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pause-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-pause-circle-o:before { content: fa-content($fa-var-pause-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-stop-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-stop-circle-o:before { content: fa-content($fa-var-stop-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bluetooth { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bluetooth-b { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-gitlab { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wpbeginner { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wpforms { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-envira { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wheelchair-alt { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-wheelchair-alt:before { content: fa-content($fa-var-accessible-icon); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-question-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-question-circle-o:before { content: fa-content($fa-var-question-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-volume-control-phone:before { content: fa-content($fa-var-phone-volume); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-asl-interpreting:before { content: fa-content($fa-var-american-sign-language-interpreting); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-deafness:before { content: fa-content($fa-var-deaf); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-hard-of-hearing:before { content: fa-content($fa-var-deaf); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-glide { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-glide-g { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-signing:before { content: fa-content($fa-var-sign-language); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-viadeo { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-viadeo-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-snapchat { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-snapchat-ghost { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-snapchat-square { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-pied-piper { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-first-order { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-yoast { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-themeisle { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus-official { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus-official:before { content: fa-content($fa-var-google-plus); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus-circle { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-google-plus-circle:before { content: fa-content($fa-var-google-plus); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-font-awesome { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-fa { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-fa:before { content: fa-content($fa-var-font-awesome); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-handshake-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-handshake-o:before { content: fa-content($fa-var-handshake); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-envelope-open-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-envelope-open-o:before { content: fa-content($fa-var-envelope-open); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-linode { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-address-book-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-address-book-o:before { content: fa-content($fa-var-address-book); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vcard:before { content: fa-content($fa-var-address-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-address-card-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-address-card-o:before { content: fa-content($fa-var-address-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-vcard-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-vcard-o:before { content: fa-content($fa-var-address-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-user-circle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-user-circle-o:before { content: fa-content($fa-var-user-circle); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-user-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-user-o:before { content: fa-content($fa-var-user); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-id-badge { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-drivers-license:before { content: fa-content($fa-var-id-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-id-card-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-id-card-o:before { content: fa-content($fa-var-id-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-drivers-license-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-drivers-license-o:before { content: fa-content($fa-var-id-card); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-quora { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-free-code-camp { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-telegram { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer-4:before { content: fa-content($fa-var-thermometer-full); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer:before { content: fa-content($fa-var-thermometer-full); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer-3:before { content: fa-content($fa-var-thermometer-three-quarters); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer-2:before { content: fa-content($fa-var-thermometer-half); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer-1:before { content: fa-content($fa-var-thermometer-quarter); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-thermometer-0:before { content: fa-content($fa-var-thermometer-empty); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bathtub:before { content: fa-content($fa-var-bath); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-s15:before { content: fa-content($fa-var-bath); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-window-maximize { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-window-restore { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-times-rectangle:before { content: fa-content($fa-var-window-close); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-window-close-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-window-close-o:before { content: fa-content($fa-var-window-close); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-times-rectangle-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-times-rectangle-o:before { content: fa-content($fa-var-window-close); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-bandcamp { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-grav { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-etsy { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-imdb { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-ravelry { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-eercast { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-eercast:before { content: fa-content($fa-var-sellcast); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-snowflake-o { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} +.#{$fa-css-prefix}.#{$fa-css-prefix}-snowflake-o:before { content: fa-content($fa-var-snowflake); } + +.#{$fa-css-prefix}.#{$fa-css-prefix}-superpowers { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-wpexplorer { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} + +.#{$fa-css-prefix}.#{$fa-css-prefix}-cab:before { content: fa-content($fa-var-taxi); } + diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_stacked.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_stacked.scss new file mode 100644 index 0000000..ae7ef4e --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_stacked.scss @@ -0,0 +1,31 @@ +// Stacked Icons +// ------------------------- + +.#{$fa-css-prefix}-stack { + display: inline-block; + height: 2em; + line-height: 2em; + position: relative; + vertical-align: middle; + width: ($fa-fw-width*2); +} + +.#{$fa-css-prefix}-stack-1x, +.#{$fa-css-prefix}-stack-2x { + left: 0; + position: absolute; + text-align: center; + width: 100%; +} + +.#{$fa-css-prefix}-stack-1x { + line-height: inherit; +} + +.#{$fa-css-prefix}-stack-2x { + font-size: 2em; +} + +.#{$fa-css-prefix}-inverse { + color: $fa-inverse; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_variables.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_variables.scss new file mode 100644 index 0000000..4ffaf8e --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/_variables.scss @@ -0,0 +1,1479 @@ +// Variables +// -------------------------- + +$fa-font-path: "../webfonts" !default; +$fa-font-size-base: 16px !default; +$fa-font-display: block !default; +$fa-css-prefix: fa !default; +$fa-version: "5.15.1" !default; +$fa-border-color: #eee !default; +$fa-inverse: #fff !default; +$fa-li-width: 2em !default; +$fa-fw-width: (20em / 16); +$fa-primary-opacity: 1 !default; +$fa-secondary-opacity: .4 !default; + +// Convenience function used to set content property +@function fa-content($fa-var) { + @return unquote("\"#{ $fa-var }\""); +} + +$fa-var-500px: \f26e; +$fa-var-accessible-icon: \f368; +$fa-var-accusoft: \f369; +$fa-var-acquisitions-incorporated: \f6af; +$fa-var-ad: \f641; +$fa-var-address-book: \f2b9; +$fa-var-address-card: \f2bb; +$fa-var-adjust: \f042; +$fa-var-adn: \f170; +$fa-var-adversal: \f36a; +$fa-var-affiliatetheme: \f36b; +$fa-var-air-freshener: \f5d0; +$fa-var-airbnb: \f834; +$fa-var-algolia: \f36c; +$fa-var-align-center: \f037; +$fa-var-align-justify: \f039; +$fa-var-align-left: \f036; +$fa-var-align-right: \f038; +$fa-var-alipay: \f642; +$fa-var-allergies: \f461; +$fa-var-amazon: \f270; +$fa-var-amazon-pay: \f42c; +$fa-var-ambulance: \f0f9; +$fa-var-american-sign-language-interpreting: \f2a3; +$fa-var-amilia: \f36d; +$fa-var-anchor: \f13d; +$fa-var-android: \f17b; +$fa-var-angellist: \f209; +$fa-var-angle-double-down: \f103; +$fa-var-angle-double-left: \f100; +$fa-var-angle-double-right: \f101; +$fa-var-angle-double-up: \f102; +$fa-var-angle-down: \f107; +$fa-var-angle-left: \f104; +$fa-var-angle-right: \f105; +$fa-var-angle-up: \f106; +$fa-var-angry: \f556; +$fa-var-angrycreative: \f36e; +$fa-var-angular: \f420; +$fa-var-ankh: \f644; +$fa-var-app-store: \f36f; +$fa-var-app-store-ios: \f370; +$fa-var-apper: \f371; +$fa-var-apple: \f179; +$fa-var-apple-alt: \f5d1; +$fa-var-apple-pay: \f415; +$fa-var-archive: \f187; +$fa-var-archway: \f557; +$fa-var-arrow-alt-circle-down: \f358; +$fa-var-arrow-alt-circle-left: \f359; +$fa-var-arrow-alt-circle-right: \f35a; +$fa-var-arrow-alt-circle-up: \f35b; +$fa-var-arrow-circle-down: \f0ab; +$fa-var-arrow-circle-left: \f0a8; +$fa-var-arrow-circle-right: \f0a9; +$fa-var-arrow-circle-up: \f0aa; +$fa-var-arrow-down: \f063; +$fa-var-arrow-left: \f060; +$fa-var-arrow-right: \f061; +$fa-var-arrow-up: \f062; +$fa-var-arrows-alt: \f0b2; +$fa-var-arrows-alt-h: \f337; +$fa-var-arrows-alt-v: \f338; +$fa-var-artstation: \f77a; +$fa-var-assistive-listening-systems: \f2a2; +$fa-var-asterisk: \f069; +$fa-var-asymmetrik: \f372; +$fa-var-at: \f1fa; +$fa-var-atlas: \f558; +$fa-var-atlassian: \f77b; +$fa-var-atom: \f5d2; +$fa-var-audible: \f373; +$fa-var-audio-description: \f29e; +$fa-var-autoprefixer: \f41c; +$fa-var-avianex: \f374; +$fa-var-aviato: \f421; +$fa-var-award: \f559; +$fa-var-aws: \f375; +$fa-var-baby: \f77c; +$fa-var-baby-carriage: \f77d; +$fa-var-backspace: \f55a; +$fa-var-backward: \f04a; +$fa-var-bacon: \f7e5; +$fa-var-bacteria: \e059; +$fa-var-bacterium: \e05a; +$fa-var-bahai: \f666; +$fa-var-balance-scale: \f24e; +$fa-var-balance-scale-left: \f515; +$fa-var-balance-scale-right: \f516; +$fa-var-ban: \f05e; +$fa-var-band-aid: \f462; +$fa-var-bandcamp: \f2d5; +$fa-var-barcode: \f02a; +$fa-var-bars: \f0c9; +$fa-var-baseball-ball: \f433; +$fa-var-basketball-ball: \f434; +$fa-var-bath: \f2cd; +$fa-var-battery-empty: \f244; +$fa-var-battery-full: \f240; +$fa-var-battery-half: \f242; +$fa-var-battery-quarter: \f243; +$fa-var-battery-three-quarters: \f241; +$fa-var-battle-net: \f835; +$fa-var-bed: \f236; +$fa-var-beer: \f0fc; +$fa-var-behance: \f1b4; +$fa-var-behance-square: \f1b5; +$fa-var-bell: \f0f3; +$fa-var-bell-slash: \f1f6; +$fa-var-bezier-curve: \f55b; +$fa-var-bible: \f647; +$fa-var-bicycle: \f206; +$fa-var-biking: \f84a; +$fa-var-bimobject: \f378; +$fa-var-binoculars: \f1e5; +$fa-var-biohazard: \f780; +$fa-var-birthday-cake: \f1fd; +$fa-var-bitbucket: \f171; +$fa-var-bitcoin: \f379; +$fa-var-bity: \f37a; +$fa-var-black-tie: \f27e; +$fa-var-blackberry: \f37b; +$fa-var-blender: \f517; +$fa-var-blender-phone: \f6b6; +$fa-var-blind: \f29d; +$fa-var-blog: \f781; +$fa-var-blogger: \f37c; +$fa-var-blogger-b: \f37d; +$fa-var-bluetooth: \f293; +$fa-var-bluetooth-b: \f294; +$fa-var-bold: \f032; +$fa-var-bolt: \f0e7; +$fa-var-bomb: \f1e2; +$fa-var-bone: \f5d7; +$fa-var-bong: \f55c; +$fa-var-book: \f02d; +$fa-var-book-dead: \f6b7; +$fa-var-book-medical: \f7e6; +$fa-var-book-open: \f518; +$fa-var-book-reader: \f5da; +$fa-var-bookmark: \f02e; +$fa-var-bootstrap: \f836; +$fa-var-border-all: \f84c; +$fa-var-border-none: \f850; +$fa-var-border-style: \f853; +$fa-var-bowling-ball: \f436; +$fa-var-box: \f466; +$fa-var-box-open: \f49e; +$fa-var-box-tissue: \e05b; +$fa-var-boxes: \f468; +$fa-var-braille: \f2a1; +$fa-var-brain: \f5dc; +$fa-var-bread-slice: \f7ec; +$fa-var-briefcase: \f0b1; +$fa-var-briefcase-medical: \f469; +$fa-var-broadcast-tower: \f519; +$fa-var-broom: \f51a; +$fa-var-brush: \f55d; +$fa-var-btc: \f15a; +$fa-var-buffer: \f837; +$fa-var-bug: \f188; +$fa-var-building: \f1ad; +$fa-var-bullhorn: \f0a1; +$fa-var-bullseye: \f140; +$fa-var-burn: \f46a; +$fa-var-buromobelexperte: \f37f; +$fa-var-bus: \f207; +$fa-var-bus-alt: \f55e; +$fa-var-business-time: \f64a; +$fa-var-buy-n-large: \f8a6; +$fa-var-buysellads: \f20d; +$fa-var-calculator: \f1ec; +$fa-var-calendar: \f133; +$fa-var-calendar-alt: \f073; +$fa-var-calendar-check: \f274; +$fa-var-calendar-day: \f783; +$fa-var-calendar-minus: \f272; +$fa-var-calendar-plus: \f271; +$fa-var-calendar-times: \f273; +$fa-var-calendar-week: \f784; +$fa-var-camera: \f030; +$fa-var-camera-retro: \f083; +$fa-var-campground: \f6bb; +$fa-var-canadian-maple-leaf: \f785; +$fa-var-candy-cane: \f786; +$fa-var-cannabis: \f55f; +$fa-var-capsules: \f46b; +$fa-var-car: \f1b9; +$fa-var-car-alt: \f5de; +$fa-var-car-battery: \f5df; +$fa-var-car-crash: \f5e1; +$fa-var-car-side: \f5e4; +$fa-var-caravan: \f8ff; +$fa-var-caret-down: \f0d7; +$fa-var-caret-left: \f0d9; +$fa-var-caret-right: \f0da; +$fa-var-caret-square-down: \f150; +$fa-var-caret-square-left: \f191; +$fa-var-caret-square-right: \f152; +$fa-var-caret-square-up: \f151; +$fa-var-caret-up: \f0d8; +$fa-var-carrot: \f787; +$fa-var-cart-arrow-down: \f218; +$fa-var-cart-plus: \f217; +$fa-var-cash-register: \f788; +$fa-var-cat: \f6be; +$fa-var-cc-amazon-pay: \f42d; +$fa-var-cc-amex: \f1f3; +$fa-var-cc-apple-pay: \f416; +$fa-var-cc-diners-club: \f24c; +$fa-var-cc-discover: \f1f2; +$fa-var-cc-jcb: \f24b; +$fa-var-cc-mastercard: \f1f1; +$fa-var-cc-paypal: \f1f4; +$fa-var-cc-stripe: \f1f5; +$fa-var-cc-visa: \f1f0; +$fa-var-centercode: \f380; +$fa-var-centos: \f789; +$fa-var-certificate: \f0a3; +$fa-var-chair: \f6c0; +$fa-var-chalkboard: \f51b; +$fa-var-chalkboard-teacher: \f51c; +$fa-var-charging-station: \f5e7; +$fa-var-chart-area: \f1fe; +$fa-var-chart-bar: \f080; +$fa-var-chart-line: \f201; +$fa-var-chart-pie: \f200; +$fa-var-check: \f00c; +$fa-var-check-circle: \f058; +$fa-var-check-double: \f560; +$fa-var-check-square: \f14a; +$fa-var-cheese: \f7ef; +$fa-var-chess: \f439; +$fa-var-chess-bishop: \f43a; +$fa-var-chess-board: \f43c; +$fa-var-chess-king: \f43f; +$fa-var-chess-knight: \f441; +$fa-var-chess-pawn: \f443; +$fa-var-chess-queen: \f445; +$fa-var-chess-rook: \f447; +$fa-var-chevron-circle-down: \f13a; +$fa-var-chevron-circle-left: \f137; +$fa-var-chevron-circle-right: \f138; +$fa-var-chevron-circle-up: \f139; +$fa-var-chevron-down: \f078; +$fa-var-chevron-left: \f053; +$fa-var-chevron-right: \f054; +$fa-var-chevron-up: \f077; +$fa-var-child: \f1ae; +$fa-var-chrome: \f268; +$fa-var-chromecast: \f838; +$fa-var-church: \f51d; +$fa-var-circle: \f111; +$fa-var-circle-notch: \f1ce; +$fa-var-city: \f64f; +$fa-var-clinic-medical: \f7f2; +$fa-var-clipboard: \f328; +$fa-var-clipboard-check: \f46c; +$fa-var-clipboard-list: \f46d; +$fa-var-clock: \f017; +$fa-var-clone: \f24d; +$fa-var-closed-captioning: \f20a; +$fa-var-cloud: \f0c2; +$fa-var-cloud-download-alt: \f381; +$fa-var-cloud-meatball: \f73b; +$fa-var-cloud-moon: \f6c3; +$fa-var-cloud-moon-rain: \f73c; +$fa-var-cloud-rain: \f73d; +$fa-var-cloud-showers-heavy: \f740; +$fa-var-cloud-sun: \f6c4; +$fa-var-cloud-sun-rain: \f743; +$fa-var-cloud-upload-alt: \f382; +$fa-var-cloudflare: \e07d; +$fa-var-cloudscale: \f383; +$fa-var-cloudsmith: \f384; +$fa-var-cloudversify: \f385; +$fa-var-cocktail: \f561; +$fa-var-code: \f121; +$fa-var-code-branch: \f126; +$fa-var-codepen: \f1cb; +$fa-var-codiepie: \f284; +$fa-var-coffee: \f0f4; +$fa-var-cog: \f013; +$fa-var-cogs: \f085; +$fa-var-coins: \f51e; +$fa-var-columns: \f0db; +$fa-var-comment: \f075; +$fa-var-comment-alt: \f27a; +$fa-var-comment-dollar: \f651; +$fa-var-comment-dots: \f4ad; +$fa-var-comment-medical: \f7f5; +$fa-var-comment-slash: \f4b3; +$fa-var-comments: \f086; +$fa-var-comments-dollar: \f653; +$fa-var-compact-disc: \f51f; +$fa-var-compass: \f14e; +$fa-var-compress: \f066; +$fa-var-compress-alt: \f422; +$fa-var-compress-arrows-alt: \f78c; +$fa-var-concierge-bell: \f562; +$fa-var-confluence: \f78d; +$fa-var-connectdevelop: \f20e; +$fa-var-contao: \f26d; +$fa-var-cookie: \f563; +$fa-var-cookie-bite: \f564; +$fa-var-copy: \f0c5; +$fa-var-copyright: \f1f9; +$fa-var-cotton-bureau: \f89e; +$fa-var-couch: \f4b8; +$fa-var-cpanel: \f388; +$fa-var-creative-commons: \f25e; +$fa-var-creative-commons-by: \f4e7; +$fa-var-creative-commons-nc: \f4e8; +$fa-var-creative-commons-nc-eu: \f4e9; +$fa-var-creative-commons-nc-jp: \f4ea; +$fa-var-creative-commons-nd: \f4eb; +$fa-var-creative-commons-pd: \f4ec; +$fa-var-creative-commons-pd-alt: \f4ed; +$fa-var-creative-commons-remix: \f4ee; +$fa-var-creative-commons-sa: \f4ef; +$fa-var-creative-commons-sampling: \f4f0; +$fa-var-creative-commons-sampling-plus: \f4f1; +$fa-var-creative-commons-share: \f4f2; +$fa-var-creative-commons-zero: \f4f3; +$fa-var-credit-card: \f09d; +$fa-var-critical-role: \f6c9; +$fa-var-crop: \f125; +$fa-var-crop-alt: \f565; +$fa-var-cross: \f654; +$fa-var-crosshairs: \f05b; +$fa-var-crow: \f520; +$fa-var-crown: \f521; +$fa-var-crutch: \f7f7; +$fa-var-css3: \f13c; +$fa-var-css3-alt: \f38b; +$fa-var-cube: \f1b2; +$fa-var-cubes: \f1b3; +$fa-var-cut: \f0c4; +$fa-var-cuttlefish: \f38c; +$fa-var-d-and-d: \f38d; +$fa-var-d-and-d-beyond: \f6ca; +$fa-var-dailymotion: \e052; +$fa-var-dashcube: \f210; +$fa-var-database: \f1c0; +$fa-var-deaf: \f2a4; +$fa-var-deezer: \e077; +$fa-var-delicious: \f1a5; +$fa-var-democrat: \f747; +$fa-var-deploydog: \f38e; +$fa-var-deskpro: \f38f; +$fa-var-desktop: \f108; +$fa-var-dev: \f6cc; +$fa-var-deviantart: \f1bd; +$fa-var-dharmachakra: \f655; +$fa-var-dhl: \f790; +$fa-var-diagnoses: \f470; +$fa-var-diaspora: \f791; +$fa-var-dice: \f522; +$fa-var-dice-d20: \f6cf; +$fa-var-dice-d6: \f6d1; +$fa-var-dice-five: \f523; +$fa-var-dice-four: \f524; +$fa-var-dice-one: \f525; +$fa-var-dice-six: \f526; +$fa-var-dice-three: \f527; +$fa-var-dice-two: \f528; +$fa-var-digg: \f1a6; +$fa-var-digital-ocean: \f391; +$fa-var-digital-tachograph: \f566; +$fa-var-directions: \f5eb; +$fa-var-discord: \f392; +$fa-var-discourse: \f393; +$fa-var-disease: \f7fa; +$fa-var-divide: \f529; +$fa-var-dizzy: \f567; +$fa-var-dna: \f471; +$fa-var-dochub: \f394; +$fa-var-docker: \f395; +$fa-var-dog: \f6d3; +$fa-var-dollar-sign: \f155; +$fa-var-dolly: \f472; +$fa-var-dolly-flatbed: \f474; +$fa-var-donate: \f4b9; +$fa-var-door-closed: \f52a; +$fa-var-door-open: \f52b; +$fa-var-dot-circle: \f192; +$fa-var-dove: \f4ba; +$fa-var-download: \f019; +$fa-var-draft2digital: \f396; +$fa-var-drafting-compass: \f568; +$fa-var-dragon: \f6d5; +$fa-var-draw-polygon: \f5ee; +$fa-var-dribbble: \f17d; +$fa-var-dribbble-square: \f397; +$fa-var-dropbox: \f16b; +$fa-var-drum: \f569; +$fa-var-drum-steelpan: \f56a; +$fa-var-drumstick-bite: \f6d7; +$fa-var-drupal: \f1a9; +$fa-var-dumbbell: \f44b; +$fa-var-dumpster: \f793; +$fa-var-dumpster-fire: \f794; +$fa-var-dungeon: \f6d9; +$fa-var-dyalog: \f399; +$fa-var-earlybirds: \f39a; +$fa-var-ebay: \f4f4; +$fa-var-edge: \f282; +$fa-var-edge-legacy: \e078; +$fa-var-edit: \f044; +$fa-var-egg: \f7fb; +$fa-var-eject: \f052; +$fa-var-elementor: \f430; +$fa-var-ellipsis-h: \f141; +$fa-var-ellipsis-v: \f142; +$fa-var-ello: \f5f1; +$fa-var-ember: \f423; +$fa-var-empire: \f1d1; +$fa-var-envelope: \f0e0; +$fa-var-envelope-open: \f2b6; +$fa-var-envelope-open-text: \f658; +$fa-var-envelope-square: \f199; +$fa-var-envira: \f299; +$fa-var-equals: \f52c; +$fa-var-eraser: \f12d; +$fa-var-erlang: \f39d; +$fa-var-ethereum: \f42e; +$fa-var-ethernet: \f796; +$fa-var-etsy: \f2d7; +$fa-var-euro-sign: \f153; +$fa-var-evernote: \f839; +$fa-var-exchange-alt: \f362; +$fa-var-exclamation: \f12a; +$fa-var-exclamation-circle: \f06a; +$fa-var-exclamation-triangle: \f071; +$fa-var-expand: \f065; +$fa-var-expand-alt: \f424; +$fa-var-expand-arrows-alt: \f31e; +$fa-var-expeditedssl: \f23e; +$fa-var-external-link-alt: \f35d; +$fa-var-external-link-square-alt: \f360; +$fa-var-eye: \f06e; +$fa-var-eye-dropper: \f1fb; +$fa-var-eye-slash: \f070; +$fa-var-facebook: \f09a; +$fa-var-facebook-f: \f39e; +$fa-var-facebook-messenger: \f39f; +$fa-var-facebook-square: \f082; +$fa-var-fan: \f863; +$fa-var-fantasy-flight-games: \f6dc; +$fa-var-fast-backward: \f049; +$fa-var-fast-forward: \f050; +$fa-var-faucet: \e005; +$fa-var-fax: \f1ac; +$fa-var-feather: \f52d; +$fa-var-feather-alt: \f56b; +$fa-var-fedex: \f797; +$fa-var-fedora: \f798; +$fa-var-female: \f182; +$fa-var-fighter-jet: \f0fb; +$fa-var-figma: \f799; +$fa-var-file: \f15b; +$fa-var-file-alt: \f15c; +$fa-var-file-archive: \f1c6; +$fa-var-file-audio: \f1c7; +$fa-var-file-code: \f1c9; +$fa-var-file-contract: \f56c; +$fa-var-file-csv: \f6dd; +$fa-var-file-download: \f56d; +$fa-var-file-excel: \f1c3; +$fa-var-file-export: \f56e; +$fa-var-file-image: \f1c5; +$fa-var-file-import: \f56f; +$fa-var-file-invoice: \f570; +$fa-var-file-invoice-dollar: \f571; +$fa-var-file-medical: \f477; +$fa-var-file-medical-alt: \f478; +$fa-var-file-pdf: \f1c1; +$fa-var-file-powerpoint: \f1c4; +$fa-var-file-prescription: \f572; +$fa-var-file-signature: \f573; +$fa-var-file-upload: \f574; +$fa-var-file-video: \f1c8; +$fa-var-file-word: \f1c2; +$fa-var-fill: \f575; +$fa-var-fill-drip: \f576; +$fa-var-film: \f008; +$fa-var-filter: \f0b0; +$fa-var-fingerprint: \f577; +$fa-var-fire: \f06d; +$fa-var-fire-alt: \f7e4; +$fa-var-fire-extinguisher: \f134; +$fa-var-firefox: \f269; +$fa-var-firefox-browser: \e007; +$fa-var-first-aid: \f479; +$fa-var-first-order: \f2b0; +$fa-var-first-order-alt: \f50a; +$fa-var-firstdraft: \f3a1; +$fa-var-fish: \f578; +$fa-var-fist-raised: \f6de; +$fa-var-flag: \f024; +$fa-var-flag-checkered: \f11e; +$fa-var-flag-usa: \f74d; +$fa-var-flask: \f0c3; +$fa-var-flickr: \f16e; +$fa-var-flipboard: \f44d; +$fa-var-flushed: \f579; +$fa-var-fly: \f417; +$fa-var-folder: \f07b; +$fa-var-folder-minus: \f65d; +$fa-var-folder-open: \f07c; +$fa-var-folder-plus: \f65e; +$fa-var-font: \f031; +$fa-var-font-awesome: \f2b4; +$fa-var-font-awesome-alt: \f35c; +$fa-var-font-awesome-flag: \f425; +$fa-var-font-awesome-logo-full: \f4e6; +$fa-var-fonticons: \f280; +$fa-var-fonticons-fi: \f3a2; +$fa-var-football-ball: \f44e; +$fa-var-fort-awesome: \f286; +$fa-var-fort-awesome-alt: \f3a3; +$fa-var-forumbee: \f211; +$fa-var-forward: \f04e; +$fa-var-foursquare: \f180; +$fa-var-free-code-camp: \f2c5; +$fa-var-freebsd: \f3a4; +$fa-var-frog: \f52e; +$fa-var-frown: \f119; +$fa-var-frown-open: \f57a; +$fa-var-fulcrum: \f50b; +$fa-var-funnel-dollar: \f662; +$fa-var-futbol: \f1e3; +$fa-var-galactic-republic: \f50c; +$fa-var-galactic-senate: \f50d; +$fa-var-gamepad: \f11b; +$fa-var-gas-pump: \f52f; +$fa-var-gavel: \f0e3; +$fa-var-gem: \f3a5; +$fa-var-genderless: \f22d; +$fa-var-get-pocket: \f265; +$fa-var-gg: \f260; +$fa-var-gg-circle: \f261; +$fa-var-ghost: \f6e2; +$fa-var-gift: \f06b; +$fa-var-gifts: \f79c; +$fa-var-git: \f1d3; +$fa-var-git-alt: \f841; +$fa-var-git-square: \f1d2; +$fa-var-github: \f09b; +$fa-var-github-alt: \f113; +$fa-var-github-square: \f092; +$fa-var-gitkraken: \f3a6; +$fa-var-gitlab: \f296; +$fa-var-gitter: \f426; +$fa-var-glass-cheers: \f79f; +$fa-var-glass-martini: \f000; +$fa-var-glass-martini-alt: \f57b; +$fa-var-glass-whiskey: \f7a0; +$fa-var-glasses: \f530; +$fa-var-glide: \f2a5; +$fa-var-glide-g: \f2a6; +$fa-var-globe: \f0ac; +$fa-var-globe-africa: \f57c; +$fa-var-globe-americas: \f57d; +$fa-var-globe-asia: \f57e; +$fa-var-globe-europe: \f7a2; +$fa-var-gofore: \f3a7; +$fa-var-golf-ball: \f450; +$fa-var-goodreads: \f3a8; +$fa-var-goodreads-g: \f3a9; +$fa-var-google: \f1a0; +$fa-var-google-drive: \f3aa; +$fa-var-google-pay: \e079; +$fa-var-google-play: \f3ab; +$fa-var-google-plus: \f2b3; +$fa-var-google-plus-g: \f0d5; +$fa-var-google-plus-square: \f0d4; +$fa-var-google-wallet: \f1ee; +$fa-var-gopuram: \f664; +$fa-var-graduation-cap: \f19d; +$fa-var-gratipay: \f184; +$fa-var-grav: \f2d6; +$fa-var-greater-than: \f531; +$fa-var-greater-than-equal: \f532; +$fa-var-grimace: \f57f; +$fa-var-grin: \f580; +$fa-var-grin-alt: \f581; +$fa-var-grin-beam: \f582; +$fa-var-grin-beam-sweat: \f583; +$fa-var-grin-hearts: \f584; +$fa-var-grin-squint: \f585; +$fa-var-grin-squint-tears: \f586; +$fa-var-grin-stars: \f587; +$fa-var-grin-tears: \f588; +$fa-var-grin-tongue: \f589; +$fa-var-grin-tongue-squint: \f58a; +$fa-var-grin-tongue-wink: \f58b; +$fa-var-grin-wink: \f58c; +$fa-var-grip-horizontal: \f58d; +$fa-var-grip-lines: \f7a4; +$fa-var-grip-lines-vertical: \f7a5; +$fa-var-grip-vertical: \f58e; +$fa-var-gripfire: \f3ac; +$fa-var-grunt: \f3ad; +$fa-var-guilded: \e07e; +$fa-var-guitar: \f7a6; +$fa-var-gulp: \f3ae; +$fa-var-h-square: \f0fd; +$fa-var-hacker-news: \f1d4; +$fa-var-hacker-news-square: \f3af; +$fa-var-hackerrank: \f5f7; +$fa-var-hamburger: \f805; +$fa-var-hammer: \f6e3; +$fa-var-hamsa: \f665; +$fa-var-hand-holding: \f4bd; +$fa-var-hand-holding-heart: \f4be; +$fa-var-hand-holding-medical: \e05c; +$fa-var-hand-holding-usd: \f4c0; +$fa-var-hand-holding-water: \f4c1; +$fa-var-hand-lizard: \f258; +$fa-var-hand-middle-finger: \f806; +$fa-var-hand-paper: \f256; +$fa-var-hand-peace: \f25b; +$fa-var-hand-point-down: \f0a7; +$fa-var-hand-point-left: \f0a5; +$fa-var-hand-point-right: \f0a4; +$fa-var-hand-point-up: \f0a6; +$fa-var-hand-pointer: \f25a; +$fa-var-hand-rock: \f255; +$fa-var-hand-scissors: \f257; +$fa-var-hand-sparkles: \e05d; +$fa-var-hand-spock: \f259; +$fa-var-hands: \f4c2; +$fa-var-hands-helping: \f4c4; +$fa-var-hands-wash: \e05e; +$fa-var-handshake: \f2b5; +$fa-var-handshake-alt-slash: \e05f; +$fa-var-handshake-slash: \e060; +$fa-var-hanukiah: \f6e6; +$fa-var-hard-hat: \f807; +$fa-var-hashtag: \f292; +$fa-var-hat-cowboy: \f8c0; +$fa-var-hat-cowboy-side: \f8c1; +$fa-var-hat-wizard: \f6e8; +$fa-var-hdd: \f0a0; +$fa-var-head-side-cough: \e061; +$fa-var-head-side-cough-slash: \e062; +$fa-var-head-side-mask: \e063; +$fa-var-head-side-virus: \e064; +$fa-var-heading: \f1dc; +$fa-var-headphones: \f025; +$fa-var-headphones-alt: \f58f; +$fa-var-headset: \f590; +$fa-var-heart: \f004; +$fa-var-heart-broken: \f7a9; +$fa-var-heartbeat: \f21e; +$fa-var-helicopter: \f533; +$fa-var-highlighter: \f591; +$fa-var-hiking: \f6ec; +$fa-var-hippo: \f6ed; +$fa-var-hips: \f452; +$fa-var-hire-a-helper: \f3b0; +$fa-var-history: \f1da; +$fa-var-hive: \e07f; +$fa-var-hockey-puck: \f453; +$fa-var-holly-berry: \f7aa; +$fa-var-home: \f015; +$fa-var-hooli: \f427; +$fa-var-hornbill: \f592; +$fa-var-horse: \f6f0; +$fa-var-horse-head: \f7ab; +$fa-var-hospital: \f0f8; +$fa-var-hospital-alt: \f47d; +$fa-var-hospital-symbol: \f47e; +$fa-var-hospital-user: \f80d; +$fa-var-hot-tub: \f593; +$fa-var-hotdog: \f80f; +$fa-var-hotel: \f594; +$fa-var-hotjar: \f3b1; +$fa-var-hourglass: \f254; +$fa-var-hourglass-end: \f253; +$fa-var-hourglass-half: \f252; +$fa-var-hourglass-start: \f251; +$fa-var-house-damage: \f6f1; +$fa-var-house-user: \e065; +$fa-var-houzz: \f27c; +$fa-var-hryvnia: \f6f2; +$fa-var-html5: \f13b; +$fa-var-hubspot: \f3b2; +$fa-var-i-cursor: \f246; +$fa-var-ice-cream: \f810; +$fa-var-icicles: \f7ad; +$fa-var-icons: \f86d; +$fa-var-id-badge: \f2c1; +$fa-var-id-card: \f2c2; +$fa-var-id-card-alt: \f47f; +$fa-var-ideal: \e013; +$fa-var-igloo: \f7ae; +$fa-var-image: \f03e; +$fa-var-images: \f302; +$fa-var-imdb: \f2d8; +$fa-var-inbox: \f01c; +$fa-var-indent: \f03c; +$fa-var-industry: \f275; +$fa-var-infinity: \f534; +$fa-var-info: \f129; +$fa-var-info-circle: \f05a; +$fa-var-innosoft: \e080; +$fa-var-instagram: \f16d; +$fa-var-instagram-square: \e055; +$fa-var-instalod: \e081; +$fa-var-intercom: \f7af; +$fa-var-internet-explorer: \f26b; +$fa-var-invision: \f7b0; +$fa-var-ioxhost: \f208; +$fa-var-italic: \f033; +$fa-var-itch-io: \f83a; +$fa-var-itunes: \f3b4; +$fa-var-itunes-note: \f3b5; +$fa-var-java: \f4e4; +$fa-var-jedi: \f669; +$fa-var-jedi-order: \f50e; +$fa-var-jenkins: \f3b6; +$fa-var-jira: \f7b1; +$fa-var-joget: \f3b7; +$fa-var-joint: \f595; +$fa-var-joomla: \f1aa; +$fa-var-journal-whills: \f66a; +$fa-var-js: \f3b8; +$fa-var-js-square: \f3b9; +$fa-var-jsfiddle: \f1cc; +$fa-var-kaaba: \f66b; +$fa-var-kaggle: \f5fa; +$fa-var-key: \f084; +$fa-var-keybase: \f4f5; +$fa-var-keyboard: \f11c; +$fa-var-keycdn: \f3ba; +$fa-var-khanda: \f66d; +$fa-var-kickstarter: \f3bb; +$fa-var-kickstarter-k: \f3bc; +$fa-var-kiss: \f596; +$fa-var-kiss-beam: \f597; +$fa-var-kiss-wink-heart: \f598; +$fa-var-kiwi-bird: \f535; +$fa-var-korvue: \f42f; +$fa-var-landmark: \f66f; +$fa-var-language: \f1ab; +$fa-var-laptop: \f109; +$fa-var-laptop-code: \f5fc; +$fa-var-laptop-house: \e066; +$fa-var-laptop-medical: \f812; +$fa-var-laravel: \f3bd; +$fa-var-lastfm: \f202; +$fa-var-lastfm-square: \f203; +$fa-var-laugh: \f599; +$fa-var-laugh-beam: \f59a; +$fa-var-laugh-squint: \f59b; +$fa-var-laugh-wink: \f59c; +$fa-var-layer-group: \f5fd; +$fa-var-leaf: \f06c; +$fa-var-leanpub: \f212; +$fa-var-lemon: \f094; +$fa-var-less: \f41d; +$fa-var-less-than: \f536; +$fa-var-less-than-equal: \f537; +$fa-var-level-down-alt: \f3be; +$fa-var-level-up-alt: \f3bf; +$fa-var-life-ring: \f1cd; +$fa-var-lightbulb: \f0eb; +$fa-var-line: \f3c0; +$fa-var-link: \f0c1; +$fa-var-linkedin: \f08c; +$fa-var-linkedin-in: \f0e1; +$fa-var-linode: \f2b8; +$fa-var-linux: \f17c; +$fa-var-lira-sign: \f195; +$fa-var-list: \f03a; +$fa-var-list-alt: \f022; +$fa-var-list-ol: \f0cb; +$fa-var-list-ul: \f0ca; +$fa-var-location-arrow: \f124; +$fa-var-lock: \f023; +$fa-var-lock-open: \f3c1; +$fa-var-long-arrow-alt-down: \f309; +$fa-var-long-arrow-alt-left: \f30a; +$fa-var-long-arrow-alt-right: \f30b; +$fa-var-long-arrow-alt-up: \f30c; +$fa-var-low-vision: \f2a8; +$fa-var-luggage-cart: \f59d; +$fa-var-lungs: \f604; +$fa-var-lungs-virus: \e067; +$fa-var-lyft: \f3c3; +$fa-var-magento: \f3c4; +$fa-var-magic: \f0d0; +$fa-var-magnet: \f076; +$fa-var-mail-bulk: \f674; +$fa-var-mailchimp: \f59e; +$fa-var-male: \f183; +$fa-var-mandalorian: \f50f; +$fa-var-map: \f279; +$fa-var-map-marked: \f59f; +$fa-var-map-marked-alt: \f5a0; +$fa-var-map-marker: \f041; +$fa-var-map-marker-alt: \f3c5; +$fa-var-map-pin: \f276; +$fa-var-map-signs: \f277; +$fa-var-markdown: \f60f; +$fa-var-marker: \f5a1; +$fa-var-mars: \f222; +$fa-var-mars-double: \f227; +$fa-var-mars-stroke: \f229; +$fa-var-mars-stroke-h: \f22b; +$fa-var-mars-stroke-v: \f22a; +$fa-var-mask: \f6fa; +$fa-var-mastodon: \f4f6; +$fa-var-maxcdn: \f136; +$fa-var-mdb: \f8ca; +$fa-var-medal: \f5a2; +$fa-var-medapps: \f3c6; +$fa-var-medium: \f23a; +$fa-var-medium-m: \f3c7; +$fa-var-medkit: \f0fa; +$fa-var-medrt: \f3c8; +$fa-var-meetup: \f2e0; +$fa-var-megaport: \f5a3; +$fa-var-meh: \f11a; +$fa-var-meh-blank: \f5a4; +$fa-var-meh-rolling-eyes: \f5a5; +$fa-var-memory: \f538; +$fa-var-mendeley: \f7b3; +$fa-var-menorah: \f676; +$fa-var-mercury: \f223; +$fa-var-meteor: \f753; +$fa-var-microblog: \e01a; +$fa-var-microchip: \f2db; +$fa-var-microphone: \f130; +$fa-var-microphone-alt: \f3c9; +$fa-var-microphone-alt-slash: \f539; +$fa-var-microphone-slash: \f131; +$fa-var-microscope: \f610; +$fa-var-microsoft: \f3ca; +$fa-var-minus: \f068; +$fa-var-minus-circle: \f056; +$fa-var-minus-square: \f146; +$fa-var-mitten: \f7b5; +$fa-var-mix: \f3cb; +$fa-var-mixcloud: \f289; +$fa-var-mixer: \e056; +$fa-var-mizuni: \f3cc; +$fa-var-mobile: \f10b; +$fa-var-mobile-alt: \f3cd; +$fa-var-modx: \f285; +$fa-var-monero: \f3d0; +$fa-var-money-bill: \f0d6; +$fa-var-money-bill-alt: \f3d1; +$fa-var-money-bill-wave: \f53a; +$fa-var-money-bill-wave-alt: \f53b; +$fa-var-money-check: \f53c; +$fa-var-money-check-alt: \f53d; +$fa-var-monument: \f5a6; +$fa-var-moon: \f186; +$fa-var-mortar-pestle: \f5a7; +$fa-var-mosque: \f678; +$fa-var-motorcycle: \f21c; +$fa-var-mountain: \f6fc; +$fa-var-mouse: \f8cc; +$fa-var-mouse-pointer: \f245; +$fa-var-mug-hot: \f7b6; +$fa-var-music: \f001; +$fa-var-napster: \f3d2; +$fa-var-neos: \f612; +$fa-var-network-wired: \f6ff; +$fa-var-neuter: \f22c; +$fa-var-newspaper: \f1ea; +$fa-var-nimblr: \f5a8; +$fa-var-node: \f419; +$fa-var-node-js: \f3d3; +$fa-var-not-equal: \f53e; +$fa-var-notes-medical: \f481; +$fa-var-npm: \f3d4; +$fa-var-ns8: \f3d5; +$fa-var-nutritionix: \f3d6; +$fa-var-object-group: \f247; +$fa-var-object-ungroup: \f248; +$fa-var-octopus-deploy: \e082; +$fa-var-odnoklassniki: \f263; +$fa-var-odnoklassniki-square: \f264; +$fa-var-oil-can: \f613; +$fa-var-old-republic: \f510; +$fa-var-om: \f679; +$fa-var-opencart: \f23d; +$fa-var-openid: \f19b; +$fa-var-opera: \f26a; +$fa-var-optin-monster: \f23c; +$fa-var-orcid: \f8d2; +$fa-var-osi: \f41a; +$fa-var-otter: \f700; +$fa-var-outdent: \f03b; +$fa-var-page4: \f3d7; +$fa-var-pagelines: \f18c; +$fa-var-pager: \f815; +$fa-var-paint-brush: \f1fc; +$fa-var-paint-roller: \f5aa; +$fa-var-palette: \f53f; +$fa-var-palfed: \f3d8; +$fa-var-pallet: \f482; +$fa-var-paper-plane: \f1d8; +$fa-var-paperclip: \f0c6; +$fa-var-parachute-box: \f4cd; +$fa-var-paragraph: \f1dd; +$fa-var-parking: \f540; +$fa-var-passport: \f5ab; +$fa-var-pastafarianism: \f67b; +$fa-var-paste: \f0ea; +$fa-var-patreon: \f3d9; +$fa-var-pause: \f04c; +$fa-var-pause-circle: \f28b; +$fa-var-paw: \f1b0; +$fa-var-paypal: \f1ed; +$fa-var-peace: \f67c; +$fa-var-pen: \f304; +$fa-var-pen-alt: \f305; +$fa-var-pen-fancy: \f5ac; +$fa-var-pen-nib: \f5ad; +$fa-var-pen-square: \f14b; +$fa-var-pencil-alt: \f303; +$fa-var-pencil-ruler: \f5ae; +$fa-var-penny-arcade: \f704; +$fa-var-people-arrows: \e068; +$fa-var-people-carry: \f4ce; +$fa-var-pepper-hot: \f816; +$fa-var-perbyte: \e083; +$fa-var-percent: \f295; +$fa-var-percentage: \f541; +$fa-var-periscope: \f3da; +$fa-var-person-booth: \f756; +$fa-var-phabricator: \f3db; +$fa-var-phoenix-framework: \f3dc; +$fa-var-phoenix-squadron: \f511; +$fa-var-phone: \f095; +$fa-var-phone-alt: \f879; +$fa-var-phone-slash: \f3dd; +$fa-var-phone-square: \f098; +$fa-var-phone-square-alt: \f87b; +$fa-var-phone-volume: \f2a0; +$fa-var-photo-video: \f87c; +$fa-var-php: \f457; +$fa-var-pied-piper: \f2ae; +$fa-var-pied-piper-alt: \f1a8; +$fa-var-pied-piper-hat: \f4e5; +$fa-var-pied-piper-pp: \f1a7; +$fa-var-pied-piper-square: \e01e; +$fa-var-piggy-bank: \f4d3; +$fa-var-pills: \f484; +$fa-var-pinterest: \f0d2; +$fa-var-pinterest-p: \f231; +$fa-var-pinterest-square: \f0d3; +$fa-var-pizza-slice: \f818; +$fa-var-place-of-worship: \f67f; +$fa-var-plane: \f072; +$fa-var-plane-arrival: \f5af; +$fa-var-plane-departure: \f5b0; +$fa-var-plane-slash: \e069; +$fa-var-play: \f04b; +$fa-var-play-circle: \f144; +$fa-var-playstation: \f3df; +$fa-var-plug: \f1e6; +$fa-var-plus: \f067; +$fa-var-plus-circle: \f055; +$fa-var-plus-square: \f0fe; +$fa-var-podcast: \f2ce; +$fa-var-poll: \f681; +$fa-var-poll-h: \f682; +$fa-var-poo: \f2fe; +$fa-var-poo-storm: \f75a; +$fa-var-poop: \f619; +$fa-var-portrait: \f3e0; +$fa-var-pound-sign: \f154; +$fa-var-power-off: \f011; +$fa-var-pray: \f683; +$fa-var-praying-hands: \f684; +$fa-var-prescription: \f5b1; +$fa-var-prescription-bottle: \f485; +$fa-var-prescription-bottle-alt: \f486; +$fa-var-print: \f02f; +$fa-var-procedures: \f487; +$fa-var-product-hunt: \f288; +$fa-var-project-diagram: \f542; +$fa-var-pump-medical: \e06a; +$fa-var-pump-soap: \e06b; +$fa-var-pushed: \f3e1; +$fa-var-puzzle-piece: \f12e; +$fa-var-python: \f3e2; +$fa-var-qq: \f1d6; +$fa-var-qrcode: \f029; +$fa-var-question: \f128; +$fa-var-question-circle: \f059; +$fa-var-quidditch: \f458; +$fa-var-quinscape: \f459; +$fa-var-quora: \f2c4; +$fa-var-quote-left: \f10d; +$fa-var-quote-right: \f10e; +$fa-var-quran: \f687; +$fa-var-r-project: \f4f7; +$fa-var-radiation: \f7b9; +$fa-var-radiation-alt: \f7ba; +$fa-var-rainbow: \f75b; +$fa-var-random: \f074; +$fa-var-raspberry-pi: \f7bb; +$fa-var-ravelry: \f2d9; +$fa-var-react: \f41b; +$fa-var-reacteurope: \f75d; +$fa-var-readme: \f4d5; +$fa-var-rebel: \f1d0; +$fa-var-receipt: \f543; +$fa-var-record-vinyl: \f8d9; +$fa-var-recycle: \f1b8; +$fa-var-red-river: \f3e3; +$fa-var-reddit: \f1a1; +$fa-var-reddit-alien: \f281; +$fa-var-reddit-square: \f1a2; +$fa-var-redhat: \f7bc; +$fa-var-redo: \f01e; +$fa-var-redo-alt: \f2f9; +$fa-var-registered: \f25d; +$fa-var-remove-format: \f87d; +$fa-var-renren: \f18b; +$fa-var-reply: \f3e5; +$fa-var-reply-all: \f122; +$fa-var-replyd: \f3e6; +$fa-var-republican: \f75e; +$fa-var-researchgate: \f4f8; +$fa-var-resolving: \f3e7; +$fa-var-restroom: \f7bd; +$fa-var-retweet: \f079; +$fa-var-rev: \f5b2; +$fa-var-ribbon: \f4d6; +$fa-var-ring: \f70b; +$fa-var-road: \f018; +$fa-var-robot: \f544; +$fa-var-rocket: \f135; +$fa-var-rocketchat: \f3e8; +$fa-var-rockrms: \f3e9; +$fa-var-route: \f4d7; +$fa-var-rss: \f09e; +$fa-var-rss-square: \f143; +$fa-var-ruble-sign: \f158; +$fa-var-ruler: \f545; +$fa-var-ruler-combined: \f546; +$fa-var-ruler-horizontal: \f547; +$fa-var-ruler-vertical: \f548; +$fa-var-running: \f70c; +$fa-var-rupee-sign: \f156; +$fa-var-rust: \e07a; +$fa-var-sad-cry: \f5b3; +$fa-var-sad-tear: \f5b4; +$fa-var-safari: \f267; +$fa-var-salesforce: \f83b; +$fa-var-sass: \f41e; +$fa-var-satellite: \f7bf; +$fa-var-satellite-dish: \f7c0; +$fa-var-save: \f0c7; +$fa-var-schlix: \f3ea; +$fa-var-school: \f549; +$fa-var-screwdriver: \f54a; +$fa-var-scribd: \f28a; +$fa-var-scroll: \f70e; +$fa-var-sd-card: \f7c2; +$fa-var-search: \f002; +$fa-var-search-dollar: \f688; +$fa-var-search-location: \f689; +$fa-var-search-minus: \f010; +$fa-var-search-plus: \f00e; +$fa-var-searchengin: \f3eb; +$fa-var-seedling: \f4d8; +$fa-var-sellcast: \f2da; +$fa-var-sellsy: \f213; +$fa-var-server: \f233; +$fa-var-servicestack: \f3ec; +$fa-var-shapes: \f61f; +$fa-var-share: \f064; +$fa-var-share-alt: \f1e0; +$fa-var-share-alt-square: \f1e1; +$fa-var-share-square: \f14d; +$fa-var-shekel-sign: \f20b; +$fa-var-shield-alt: \f3ed; +$fa-var-shield-virus: \e06c; +$fa-var-ship: \f21a; +$fa-var-shipping-fast: \f48b; +$fa-var-shirtsinbulk: \f214; +$fa-var-shoe-prints: \f54b; +$fa-var-shopify: \e057; +$fa-var-shopping-bag: \f290; +$fa-var-shopping-basket: \f291; +$fa-var-shopping-cart: \f07a; +$fa-var-shopware: \f5b5; +$fa-var-shower: \f2cc; +$fa-var-shuttle-van: \f5b6; +$fa-var-sign: \f4d9; +$fa-var-sign-in-alt: \f2f6; +$fa-var-sign-language: \f2a7; +$fa-var-sign-out-alt: \f2f5; +$fa-var-signal: \f012; +$fa-var-signature: \f5b7; +$fa-var-sim-card: \f7c4; +$fa-var-simplybuilt: \f215; +$fa-var-sink: \e06d; +$fa-var-sistrix: \f3ee; +$fa-var-sitemap: \f0e8; +$fa-var-sith: \f512; +$fa-var-skating: \f7c5; +$fa-var-sketch: \f7c6; +$fa-var-skiing: \f7c9; +$fa-var-skiing-nordic: \f7ca; +$fa-var-skull: \f54c; +$fa-var-skull-crossbones: \f714; +$fa-var-skyatlas: \f216; +$fa-var-skype: \f17e; +$fa-var-slack: \f198; +$fa-var-slack-hash: \f3ef; +$fa-var-slash: \f715; +$fa-var-sleigh: \f7cc; +$fa-var-sliders-h: \f1de; +$fa-var-slideshare: \f1e7; +$fa-var-smile: \f118; +$fa-var-smile-beam: \f5b8; +$fa-var-smile-wink: \f4da; +$fa-var-smog: \f75f; +$fa-var-smoking: \f48d; +$fa-var-smoking-ban: \f54d; +$fa-var-sms: \f7cd; +$fa-var-snapchat: \f2ab; +$fa-var-snapchat-ghost: \f2ac; +$fa-var-snapchat-square: \f2ad; +$fa-var-snowboarding: \f7ce; +$fa-var-snowflake: \f2dc; +$fa-var-snowman: \f7d0; +$fa-var-snowplow: \f7d2; +$fa-var-soap: \e06e; +$fa-var-socks: \f696; +$fa-var-solar-panel: \f5ba; +$fa-var-sort: \f0dc; +$fa-var-sort-alpha-down: \f15d; +$fa-var-sort-alpha-down-alt: \f881; +$fa-var-sort-alpha-up: \f15e; +$fa-var-sort-alpha-up-alt: \f882; +$fa-var-sort-amount-down: \f160; +$fa-var-sort-amount-down-alt: \f884; +$fa-var-sort-amount-up: \f161; +$fa-var-sort-amount-up-alt: \f885; +$fa-var-sort-down: \f0dd; +$fa-var-sort-numeric-down: \f162; +$fa-var-sort-numeric-down-alt: \f886; +$fa-var-sort-numeric-up: \f163; +$fa-var-sort-numeric-up-alt: \f887; +$fa-var-sort-up: \f0de; +$fa-var-soundcloud: \f1be; +$fa-var-sourcetree: \f7d3; +$fa-var-spa: \f5bb; +$fa-var-space-shuttle: \f197; +$fa-var-speakap: \f3f3; +$fa-var-speaker-deck: \f83c; +$fa-var-spell-check: \f891; +$fa-var-spider: \f717; +$fa-var-spinner: \f110; +$fa-var-splotch: \f5bc; +$fa-var-spotify: \f1bc; +$fa-var-spray-can: \f5bd; +$fa-var-square: \f0c8; +$fa-var-square-full: \f45c; +$fa-var-square-root-alt: \f698; +$fa-var-squarespace: \f5be; +$fa-var-stack-exchange: \f18d; +$fa-var-stack-overflow: \f16c; +$fa-var-stackpath: \f842; +$fa-var-stamp: \f5bf; +$fa-var-star: \f005; +$fa-var-star-and-crescent: \f699; +$fa-var-star-half: \f089; +$fa-var-star-half-alt: \f5c0; +$fa-var-star-of-david: \f69a; +$fa-var-star-of-life: \f621; +$fa-var-staylinked: \f3f5; +$fa-var-steam: \f1b6; +$fa-var-steam-square: \f1b7; +$fa-var-steam-symbol: \f3f6; +$fa-var-step-backward: \f048; +$fa-var-step-forward: \f051; +$fa-var-stethoscope: \f0f1; +$fa-var-sticker-mule: \f3f7; +$fa-var-sticky-note: \f249; +$fa-var-stop: \f04d; +$fa-var-stop-circle: \f28d; +$fa-var-stopwatch: \f2f2; +$fa-var-stopwatch-20: \e06f; +$fa-var-store: \f54e; +$fa-var-store-alt: \f54f; +$fa-var-store-alt-slash: \e070; +$fa-var-store-slash: \e071; +$fa-var-strava: \f428; +$fa-var-stream: \f550; +$fa-var-street-view: \f21d; +$fa-var-strikethrough: \f0cc; +$fa-var-stripe: \f429; +$fa-var-stripe-s: \f42a; +$fa-var-stroopwafel: \f551; +$fa-var-studiovinari: \f3f8; +$fa-var-stumbleupon: \f1a4; +$fa-var-stumbleupon-circle: \f1a3; +$fa-var-subscript: \f12c; +$fa-var-subway: \f239; +$fa-var-suitcase: \f0f2; +$fa-var-suitcase-rolling: \f5c1; +$fa-var-sun: \f185; +$fa-var-superpowers: \f2dd; +$fa-var-superscript: \f12b; +$fa-var-supple: \f3f9; +$fa-var-surprise: \f5c2; +$fa-var-suse: \f7d6; +$fa-var-swatchbook: \f5c3; +$fa-var-swift: \f8e1; +$fa-var-swimmer: \f5c4; +$fa-var-swimming-pool: \f5c5; +$fa-var-symfony: \f83d; +$fa-var-synagogue: \f69b; +$fa-var-sync: \f021; +$fa-var-sync-alt: \f2f1; +$fa-var-syringe: \f48e; +$fa-var-table: \f0ce; +$fa-var-table-tennis: \f45d; +$fa-var-tablet: \f10a; +$fa-var-tablet-alt: \f3fa; +$fa-var-tablets: \f490; +$fa-var-tachometer-alt: \f3fd; +$fa-var-tag: \f02b; +$fa-var-tags: \f02c; +$fa-var-tape: \f4db; +$fa-var-tasks: \f0ae; +$fa-var-taxi: \f1ba; +$fa-var-teamspeak: \f4f9; +$fa-var-teeth: \f62e; +$fa-var-teeth-open: \f62f; +$fa-var-telegram: \f2c6; +$fa-var-telegram-plane: \f3fe; +$fa-var-temperature-high: \f769; +$fa-var-temperature-low: \f76b; +$fa-var-tencent-weibo: \f1d5; +$fa-var-tenge: \f7d7; +$fa-var-terminal: \f120; +$fa-var-text-height: \f034; +$fa-var-text-width: \f035; +$fa-var-th: \f00a; +$fa-var-th-large: \f009; +$fa-var-th-list: \f00b; +$fa-var-the-red-yeti: \f69d; +$fa-var-theater-masks: \f630; +$fa-var-themeco: \f5c6; +$fa-var-themeisle: \f2b2; +$fa-var-thermometer: \f491; +$fa-var-thermometer-empty: \f2cb; +$fa-var-thermometer-full: \f2c7; +$fa-var-thermometer-half: \f2c9; +$fa-var-thermometer-quarter: \f2ca; +$fa-var-thermometer-three-quarters: \f2c8; +$fa-var-think-peaks: \f731; +$fa-var-thumbs-down: \f165; +$fa-var-thumbs-up: \f164; +$fa-var-thumbtack: \f08d; +$fa-var-ticket-alt: \f3ff; +$fa-var-tiktok: \e07b; +$fa-var-times: \f00d; +$fa-var-times-circle: \f057; +$fa-var-tint: \f043; +$fa-var-tint-slash: \f5c7; +$fa-var-tired: \f5c8; +$fa-var-toggle-off: \f204; +$fa-var-toggle-on: \f205; +$fa-var-toilet: \f7d8; +$fa-var-toilet-paper: \f71e; +$fa-var-toilet-paper-slash: \e072; +$fa-var-toolbox: \f552; +$fa-var-tools: \f7d9; +$fa-var-tooth: \f5c9; +$fa-var-torah: \f6a0; +$fa-var-torii-gate: \f6a1; +$fa-var-tractor: \f722; +$fa-var-trade-federation: \f513; +$fa-var-trademark: \f25c; +$fa-var-traffic-light: \f637; +$fa-var-trailer: \e041; +$fa-var-train: \f238; +$fa-var-tram: \f7da; +$fa-var-transgender: \f224; +$fa-var-transgender-alt: \f225; +$fa-var-trash: \f1f8; +$fa-var-trash-alt: \f2ed; +$fa-var-trash-restore: \f829; +$fa-var-trash-restore-alt: \f82a; +$fa-var-tree: \f1bb; +$fa-var-trello: \f181; +$fa-var-tripadvisor: \f262; +$fa-var-trophy: \f091; +$fa-var-truck: \f0d1; +$fa-var-truck-loading: \f4de; +$fa-var-truck-monster: \f63b; +$fa-var-truck-moving: \f4df; +$fa-var-truck-pickup: \f63c; +$fa-var-tshirt: \f553; +$fa-var-tty: \f1e4; +$fa-var-tumblr: \f173; +$fa-var-tumblr-square: \f174; +$fa-var-tv: \f26c; +$fa-var-twitch: \f1e8; +$fa-var-twitter: \f099; +$fa-var-twitter-square: \f081; +$fa-var-typo3: \f42b; +$fa-var-uber: \f402; +$fa-var-ubuntu: \f7df; +$fa-var-uikit: \f403; +$fa-var-umbraco: \f8e8; +$fa-var-umbrella: \f0e9; +$fa-var-umbrella-beach: \f5ca; +$fa-var-uncharted: \e084; +$fa-var-underline: \f0cd; +$fa-var-undo: \f0e2; +$fa-var-undo-alt: \f2ea; +$fa-var-uniregistry: \f404; +$fa-var-unity: \e049; +$fa-var-universal-access: \f29a; +$fa-var-university: \f19c; +$fa-var-unlink: \f127; +$fa-var-unlock: \f09c; +$fa-var-unlock-alt: \f13e; +$fa-var-unsplash: \e07c; +$fa-var-untappd: \f405; +$fa-var-upload: \f093; +$fa-var-ups: \f7e0; +$fa-var-usb: \f287; +$fa-var-user: \f007; +$fa-var-user-alt: \f406; +$fa-var-user-alt-slash: \f4fa; +$fa-var-user-astronaut: \f4fb; +$fa-var-user-check: \f4fc; +$fa-var-user-circle: \f2bd; +$fa-var-user-clock: \f4fd; +$fa-var-user-cog: \f4fe; +$fa-var-user-edit: \f4ff; +$fa-var-user-friends: \f500; +$fa-var-user-graduate: \f501; +$fa-var-user-injured: \f728; +$fa-var-user-lock: \f502; +$fa-var-user-md: \f0f0; +$fa-var-user-minus: \f503; +$fa-var-user-ninja: \f504; +$fa-var-user-nurse: \f82f; +$fa-var-user-plus: \f234; +$fa-var-user-secret: \f21b; +$fa-var-user-shield: \f505; +$fa-var-user-slash: \f506; +$fa-var-user-tag: \f507; +$fa-var-user-tie: \f508; +$fa-var-user-times: \f235; +$fa-var-users: \f0c0; +$fa-var-users-cog: \f509; +$fa-var-users-slash: \e073; +$fa-var-usps: \f7e1; +$fa-var-ussunnah: \f407; +$fa-var-utensil-spoon: \f2e5; +$fa-var-utensils: \f2e7; +$fa-var-vaadin: \f408; +$fa-var-vector-square: \f5cb; +$fa-var-venus: \f221; +$fa-var-venus-double: \f226; +$fa-var-venus-mars: \f228; +$fa-var-vest: \e085; +$fa-var-vest-patches: \e086; +$fa-var-viacoin: \f237; +$fa-var-viadeo: \f2a9; +$fa-var-viadeo-square: \f2aa; +$fa-var-vial: \f492; +$fa-var-vials: \f493; +$fa-var-viber: \f409; +$fa-var-video: \f03d; +$fa-var-video-slash: \f4e2; +$fa-var-vihara: \f6a7; +$fa-var-vimeo: \f40a; +$fa-var-vimeo-square: \f194; +$fa-var-vimeo-v: \f27d; +$fa-var-vine: \f1ca; +$fa-var-virus: \e074; +$fa-var-virus-slash: \e075; +$fa-var-viruses: \e076; +$fa-var-vk: \f189; +$fa-var-vnv: \f40b; +$fa-var-voicemail: \f897; +$fa-var-volleyball-ball: \f45f; +$fa-var-volume-down: \f027; +$fa-var-volume-mute: \f6a9; +$fa-var-volume-off: \f026; +$fa-var-volume-up: \f028; +$fa-var-vote-yea: \f772; +$fa-var-vr-cardboard: \f729; +$fa-var-vuejs: \f41f; +$fa-var-walking: \f554; +$fa-var-wallet: \f555; +$fa-var-warehouse: \f494; +$fa-var-watchman-monitoring: \e087; +$fa-var-water: \f773; +$fa-var-wave-square: \f83e; +$fa-var-waze: \f83f; +$fa-var-weebly: \f5cc; +$fa-var-weibo: \f18a; +$fa-var-weight: \f496; +$fa-var-weight-hanging: \f5cd; +$fa-var-weixin: \f1d7; +$fa-var-whatsapp: \f232; +$fa-var-whatsapp-square: \f40c; +$fa-var-wheelchair: \f193; +$fa-var-whmcs: \f40d; +$fa-var-wifi: \f1eb; +$fa-var-wikipedia-w: \f266; +$fa-var-wind: \f72e; +$fa-var-window-close: \f410; +$fa-var-window-maximize: \f2d0; +$fa-var-window-minimize: \f2d1; +$fa-var-window-restore: \f2d2; +$fa-var-windows: \f17a; +$fa-var-wine-bottle: \f72f; +$fa-var-wine-glass: \f4e3; +$fa-var-wine-glass-alt: \f5ce; +$fa-var-wix: \f5cf; +$fa-var-wizards-of-the-coast: \f730; +$fa-var-wodu: \e088; +$fa-var-wolf-pack-battalion: \f514; +$fa-var-won-sign: \f159; +$fa-var-wordpress: \f19a; +$fa-var-wordpress-simple: \f411; +$fa-var-wpbeginner: \f297; +$fa-var-wpexplorer: \f2de; +$fa-var-wpforms: \f298; +$fa-var-wpressr: \f3e4; +$fa-var-wrench: \f0ad; +$fa-var-x-ray: \f497; +$fa-var-xbox: \f412; +$fa-var-xing: \f168; +$fa-var-xing-square: \f169; +$fa-var-y-combinator: \f23b; +$fa-var-yahoo: \f19e; +$fa-var-yammer: \f840; +$fa-var-yandex: \f413; +$fa-var-yandex-international: \f414; +$fa-var-yarn: \f7e3; +$fa-var-yelp: \f1e9; +$fa-var-yen-sign: \f157; +$fa-var-yin-yang: \f6ad; +$fa-var-yoast: \f2b1; +$fa-var-youtube: \f167; +$fa-var-youtube-square: \f431; +$fa-var-zhihu: \f63f; diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/brands.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/brands.scss new file mode 100644 index 0000000..1ae31b7 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/brands.scss @@ -0,0 +1,23 @@ +/*! + * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +@import 'variables'; + +@font-face { + font-family: 'Font Awesome 5 Brands'; + font-style: normal; + font-weight: 400; + font-display: $fa-font-display; + src: url('#{$fa-font-path}/fa-brands-400.eot'); + src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'), + url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), + url('#{$fa-font-path}/fa-brands-400.woff') format('woff'), + url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'), + url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg'); +} + +.fab { + font-family: 'Font Awesome 5 Brands'; + font-weight: 400; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/fontawesome.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/fontawesome.scss new file mode 100644 index 0000000..da89a60 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/fontawesome.scss @@ -0,0 +1,16 @@ +/*! + * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +@import 'variables'; +@import 'mixins'; +@import 'core'; +@import 'larger'; +@import 'fixed-width'; +@import 'list'; +@import 'bordered-pulled'; +@import 'animated'; +@import 'rotated-flipped'; +@import 'stacked'; +@import 'icons'; +@import 'screen-reader'; diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/regular.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/regular.scss new file mode 100644 index 0000000..1e78860 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/regular.scss @@ -0,0 +1,23 @@ +/*! + * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +@import 'variables'; + +@font-face { + font-family: 'Font Awesome 5 Free'; + font-style: normal; + font-weight: 400; + font-display: $fa-font-display; + src: url('#{$fa-font-path}/fa-regular-400.eot'); + src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'), + url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), + url('#{$fa-font-path}/fa-regular-400.woff') format('woff'), + url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'), + url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg'); +} + +.far { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/solid.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/solid.scss new file mode 100644 index 0000000..980b066 --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/solid.scss @@ -0,0 +1,24 @@ +/*! + * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +@import 'variables'; + +@font-face { + font-family: 'Font Awesome 5 Free'; + font-style: normal; + font-weight: 900; + font-display: $fa-font-display; + src: url('#{$fa-font-path}/fa-solid-900.eot'); + src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'), + url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), + url('#{$fa-font-path}/fa-solid-900.woff') format('woff'), + url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'), + url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg'); +} + +.fa, +.fas { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; +} diff --git a/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/v4-shims.scss b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/v4-shims.scss new file mode 100644 index 0000000..d04702a --- /dev/null +++ b/themes/hugo-apero/assets/fontawesome-free-5.15.1-web/scss/v4-shims.scss @@ -0,0 +1,6 @@ +/*! + * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +@import 'variables'; +@import 'shims'; diff --git a/themes/hugo-apero/assets/headroom.scss b/themes/hugo-apero/assets/headroom.scss new file mode 100644 index 0000000..9187d24 --- /dev/null +++ b/themes/hugo-apero/assets/headroom.scss @@ -0,0 +1,16 @@ +.headroom { + will-change: transform; + transition: transform 200ms linear; + @extend .bg-#{$siteBgColor}; + opacity: 0.9; +} +.headroom--pinned { + transform: translateY(0%); +} +.headroom--unpinned { + transform: translateY(-100%); +} +.header--fixed { + position: sticky; + top: 0; +} \ No newline at end of file diff --git a/themes/hugo-apero/assets/hex-colors.scss b/themes/hugo-apero/assets/hex-colors.scss new file mode 100644 index 0000000..f9cf0b3 --- /dev/null +++ b/themes/hugo-apero/assets/hex-colors.scss @@ -0,0 +1,16 @@ +// set custom hex colors +$siteBgColorCustom: #e3e3da; +$sidebarBgColorCustom: #dbdbd2; +$textColorCustom: #666260; +$sidebarTextColorCustom: #666260; +$headlineColorCustom: #103742; +$headingColorCustom: #103742; +$bodyLinkColorCustom: #c4001a; +$navLinkColorCustom: #c4001a; +$sidebarLinkColorCustom: #c4001a; +$footerTextColorCustom: #918f8d; +$buttonTextColorCustom: #f7f7f4; +$buttonHoverTextColorCustom: #f9f9f8; +$buttonBgColorCustom: #103742; +$buttonHoverBgColorCustom: #c4001a; +$borderColorCustom: #c4beb9; diff --git a/themes/hugo-apero/assets/js/headroom.js b/themes/hugo-apero/assets/js/headroom.js new file mode 100644 index 0000000..58836a2 --- /dev/null +++ b/themes/hugo-apero/assets/js/headroom.js @@ -0,0 +1,7 @@ +/*! + * headroom.js v0.12.0 - Give your page some headroom. Hide your header until you need it + * Copyright (c) 2020 Nick Williams - http://wicky.nillia.ms/headroom.js + * License: MIT + */ + +!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).Headroom=n()}(this,function(){"use strict";function t(){return"undefined"!=typeof window}function d(t){return function(t){return t&&t.document&&function(t){return 9===t.nodeType}(t.document)}(t)?function(t){var n=t.document,o=n.body,s=n.documentElement;return{scrollHeight:function(){return Math.max(o.scrollHeight,s.scrollHeight,o.offsetHeight,s.offsetHeight,o.clientHeight,s.clientHeight)},height:function(){return t.innerHeight||s.clientHeight||o.clientHeight},scrollY:function(){return void 0!==t.pageYOffset?t.pageYOffset:(s||o.parentNode||o).scrollTop}}}(t):function(t){return{scrollHeight:function(){return Math.max(t.scrollHeight,t.offsetHeight,t.clientHeight)},height:function(){return Math.max(t.offsetHeight,t.clientHeight)},scrollY:function(){return t.scrollTop}}}(t)}function n(t,s,e){var n,o=function(){var n=!1;try{var t={get passive(){n=!0}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){n=!1}return n}(),i=!1,r=d(t),l=r.scrollY(),a={};function c(){var t=Math.round(r.scrollY()),n=r.height(),o=r.scrollHeight();a.scrollY=t,a.lastScrollY=l,a.direction=ls.tolerance[a.direction],e(a),l=t,i=!1}function h(){i||(i=!0,n=requestAnimationFrame(c))}var u=!!o&&{passive:!0,capture:!1};return t.addEventListener("scroll",h,u),c(),{destroy:function(){cancelAnimationFrame(n),t.removeEventListener("scroll",h,u)}}}function o(t){return t===Object(t)?t:{down:t,up:t}}function s(t,n){n=n||{},Object.assign(this,s.options,n),this.classes=Object.assign({},s.options.classes,n.classes),this.elem=t,this.tolerance=o(this.tolerance),this.offset=o(this.offset),this.initialised=!1,this.frozen=!1}return s.prototype={constructor:s,init:function(){return s.cutsTheMustard&&!this.initialised&&(this.addClass("initial"),this.initialised=!0,setTimeout(function(t){t.scrollTracker=n(t.scroller,{offset:t.offset,tolerance:t.tolerance},t.update.bind(t))},100,this)),this},destroy:function(){this.initialised=!1,Object.keys(this.classes).forEach(this.removeClass,this),this.scrollTracker.destroy()},unpin:function(){!this.hasClass("pinned")&&this.hasClass("unpinned")||(this.addClass("unpinned"),this.removeClass("pinned"),this.onUnpin&&this.onUnpin.call(this))},pin:function(){this.hasClass("unpinned")&&(this.addClass("pinned"),this.removeClass("unpinned"),this.onPin&&this.onPin.call(this))},freeze:function(){this.frozen=!0,this.addClass("frozen")},unfreeze:function(){this.frozen=!1,this.removeClass("frozen")},top:function(){this.hasClass("top")||(this.addClass("top"),this.removeClass("notTop"),this.onTop&&this.onTop.call(this))},notTop:function(){this.hasClass("notTop")||(this.addClass("notTop"),this.removeClass("top"),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){this.hasClass("bottom")||(this.addClass("bottom"),this.removeClass("notBottom"),this.onBottom&&this.onBottom.call(this))},notBottom:function(){this.hasClass("notBottom")||(this.addClass("notBottom"),this.removeClass("bottom"),this.onNotBottom&&this.onNotBottom.call(this))},shouldUnpin:function(t){return"down"===t.direction&&!t.top&&t.toleranceExceeded},shouldPin:function(t){return"up"===t.direction&&t.toleranceExceeded||t.top},addClass:function(t){this.elem.classList.add.apply(this.elem.classList,this.classes[t].split(" "))},removeClass:function(t){this.elem.classList.remove.apply(this.elem.classList,this.classes[t].split(" "))},hasClass:function(t){return this.classes[t].split(" ").every(function(t){return this.classList.contains(t)},this.elem)},update:function(t){t.isOutOfBounds||!0!==this.frozen&&(t.top?this.top():this.notTop(),t.bottom?this.bottom():this.notBottom(),this.shouldUnpin(t)?this.unpin():this.shouldPin(t)&&this.pin())}},s.options={tolerance:{up:0,down:0},offset:0,scroller:t()?window:null,classes:{frozen:"headroom--frozen",pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},s.cutsTheMustard=!!(t()&&function(){}.bind&&"classList"in document.documentElement&&Object.assign&&Object.keys&&requestAnimationFrame),s}); \ No newline at end of file diff --git a/themes/hugo-apero/assets/js/main.js b/themes/hugo-apero/assets/js/main.js new file mode 100644 index 0000000..d716950 --- /dev/null +++ b/themes/hugo-apero/assets/js/main.js @@ -0,0 +1,24 @@ +// first import. +import Headroom from 'js/headroom'; + +document.addEventListener('DOMContentLoaded', function() { + // grab the header element. + const Header = document.querySelector("header"); + + // construct an instance of Headroom, passing the header elemen. + const headroom = new Headroom(Header, { + offset: 0, + tolerance: { + up: 0, + down: 0 + }, + classes: { + initial: "header--fixed", + top: "top", + notTop: "not-top" + } + }); + + // initialise + headroom.init(); +}); diff --git a/themes/hugo-apero/assets/js/panelset.js b/themes/hugo-apero/assets/js/panelset.js new file mode 100644 index 0000000..dd41a33 --- /dev/null +++ b/themes/hugo-apero/assets/js/panelset.js @@ -0,0 +1,326 @@ +/* global slideshow */ +/* https://github.com/gadenbuie/xaringanExtra/blob/93429efefb268a4df2f43935304a8f781f73ece8/inst/panelset/panelset.js +*/ +(function () { + const ready = function (fn) { + /* MIT License Copyright (c) 2016 Nuclei */ + /* https://github.com/nuclei/readyjs */ + const completed = () => { + document.removeEventListener('DOMContentLoaded', completed) + window.removeEventListener('load', completed) + fn() + } + if (document.readyState !== 'loading') { + setTimeout(fn) + } else { + document.addEventListener('DOMContentLoaded', completed) + window.addEventListener('load', completed) + } + } + + ready(function () { + [...document.querySelectorAll('.panel-name')] + .map(el => el.textContent.trim()) + + const panelIds = {} + + const uniquePanelId = (name) => { + name = encodeURIComponent(name.toLowerCase().replace(/[\s]/g, '-')) + if (Object.keys(panelIds).includes(name)) { + name += ++panelIds[name] + } else { + panelIds[name] = 1 + } + return name + } + + const identifyPanelName = (item) => { + let name = 'Panel' + + // If the item doesn't have a parent element, then we've already processed + // it, probably because we're in an Rmd, and it's been removed from the DOM + if (!item.parentElement) { + return + } + + // In R Markdown when header-attrs.js is present, we may have found a + // section header but the class attributes won't be duplicated on the tag + if ( + (item.tagName === 'SECTION' || item.classList.contains('section')) && + /^H[1-6]/.test(item.children[0].tagName) + ) { + name = item.children[0].textContent + item.classList.remove('panel-name') + item.removeChild(item.children[0]) + return name + } + + const nameDiv = item.querySelector('.panel-name') + if (!nameDiv) return name + + // In remarkjs the .panel-name span might be in a paragraph tag + // and if the

is empty, we'll remove it + if ( + nameDiv.tagName === 'SPAN' && + nameDiv.parentNode.tagName === 'P' && + nameDiv.textContent === nameDiv.parentNode.textContent + ) { + name = nameDiv.textContent + item.removeChild(nameDiv.parentNode) + return name + } + + // If none of the above, remove the nameDiv and return the name + name = nameDiv.textContent + nameDiv.parentNode.removeChild(nameDiv) + return name + } + + const processPanelItem = (item) => { + const name = identifyPanelName(item) + if (!name) { + return null + } + return { name, content: item.children, id: uniquePanelId(name) } + } + + const getCurrentPanelFromUrl = (panelset) => { + const params = new URLSearchParams(window.location.search) + return params.get(panelset) + } + + const reflowPanelSet = (panels, idx) => { + const res = document.createElement('div') + res.className = 'panelset' + res.id = 'panelset' + (idx > 0 ? idx : '') + const panelSelected = getCurrentPanelFromUrl(res.id) + + // create header row + const headerRow = document.createElement('ul') + headerRow.className = 'panel-tabs' + headerRow.setAttribute('role', 'tablist') + panels + .map((p, idx) => { + const panelHeaderItem = document.createElement('li') + panelHeaderItem.className = 'panel-tab' + panelHeaderItem.setAttribute('role', 'tab') + const thisPanelIsActive = panelSelected ? panelSelected === p.id : idx === 0 + if (thisPanelIsActive) { + panelHeaderItem.classList.add('panel-tab-active') + panelHeaderItem.setAttribute('aria-selected', true) + } + panelHeaderItem.tabIndex = 0 + panelHeaderItem.id = res.id + '_' + p.id // #panelsetid_panelid + + const panelHeaderLink = document.createElement('a') + panelHeaderLink.href = '?' + res.id + '=' + p.id + '#' + panelHeaderItem.id + panelHeaderLink.setAttribute('onclick', 'return false;') + panelHeaderLink.tabIndex = -1 // list item is tabable, not link + panelHeaderLink.innerHTML = p.name + panelHeaderLink.setAttribute('aria-controls', p.id) + + panelHeaderItem.appendChild(panelHeaderLink) + return panelHeaderItem + }) + .forEach(el => headerRow.appendChild(el)) + + res.appendChild(headerRow) + + panels + .map((p, idx) => { + const panelContent = document.createElement('section') + panelContent.className = 'panel' + panelContent.setAttribute('role', 'tabpanel') + const thisPanelIsActive = panelSelected ? panelSelected === p.id : idx === 0 + panelContent.classList.toggle('panel-active', thisPanelIsActive) + panelContent.id = p.id + panelContent.setAttribute('aria-labelledby', p.id) + Array.from(p.content).forEach(el => panelContent.appendChild(el)) + return panelContent + }) + .forEach(el => res.appendChild(el)) + + return res + } + + /* + * Update selected panel for panelset or delete panelset from query string + * + * @param panelset Panelset ID to update in the search params + * @param panel Panel ID of selected panel in panelset, or null to delete from search params + * @param params Current params object, or params from window.location.search + */ + function updateSearchParams (panelset, panel, params = new URLSearchParams(window.location.search)) { + if (panel) { + params.set(panelset, panel) + } else { + params.delete(panelset) + } + return params + } + + /* + * Update the URL to match params + */ + const updateUrl = (params) => { + if (typeof params === 'undefined') return + params = params.toString() ? ('?' + params.toString()) : '' + const { pathname, hash } = window.location + const uri = pathname + params + hash + window.history.replaceState(uri, '', uri) + } + + const togglePanel = (clicked) => { + if (clicked.nodeName.toUpperCase() === 'A') { + clicked = clicked.parentElement + } + if (!clicked.classList.contains('panel-tab')) return + if (clicked.classList.contains('panel-tab-active')) return + + const tabs = clicked.parentNode + .querySelectorAll('.panel-tab') + const panels = clicked.parentNode.parentNode + .querySelectorAll('.panel') + const panelTabClicked = clicked.children[0].getAttribute('aria-controls') + const panelClicked = clicked.parentNode.parentNode.id + + Array.from(tabs) + .forEach(t => { + t.classList.remove('panel-tab-active') + t.removeAttribute('aria-selected') + }) + Array.from(panels) + .forEach(p => { + const active = p.id === panelTabClicked + p.classList.toggle('panel-active', active) + // make inactive panels inaccessible by keyboard navigation + if (active) { + p.removeAttribute('tabIndex') + p.removeAttribute('aria-hidden') + } else { + p.setAttribute('tabIndex', -1) + p.setAttribute('aria-hidden', true) + } + }) + + clicked.classList.add('panel-tab-active') + clicked.setAttribute('aria-selected', true) + + // emit window resize event to trick html widgets into fitting to the panel width + window.dispatchEvent(new Event('resize')) + + // update query string + const params = updateSearchParams(panelClicked, panelTabClicked) + updateUrl(params) + } + + const initPanelSet = (panelset, idx) => { + let panels = Array.from(panelset.querySelectorAll('.panel')) + if (!panels.length && panelset.matches('.section[class*="level"]')) { + // we're in tabset-alike R Markdown + const panelsetLevel = [...panelset.classList] + .filter(s => s.match(/^level/))[0] + .replace('level', '') + + // move children that aren't inside a section up above the panelset + Array.from(panelset.children).forEach(function (el) { + if (el.matches('div.section[class*="level"]')) return + panelset.parentElement.insertBefore(el, panelset) + }) + + // panels are all .sections with .level + const panelLevel = +panelsetLevel + 1 + panels = Array.from(panelset.querySelectorAll(`.section.level${panelLevel}`)) + } + + if (!panels.length) return + + const contents = panels.map(processPanelItem).filter(o => o !== null) + const newPanelSet = reflowPanelSet(contents, idx) + panelset.parentNode.insertBefore(newPanelSet, panelset) + panelset.parentNode.removeChild(panelset) + + // click and touch events + const panelTabs = newPanelSet.querySelector('.panel-tabs'); + ['click', 'touchend'].forEach(eventType => { + panelTabs.addEventListener(eventType, function (ev) { + togglePanel(ev.target) + ev.stopPropagation() + }) + }) + panelTabs.addEventListener('touchmove', function (ev) { + ev.preventDefault() + }) + + // key events + newPanelSet + .querySelector('.panel-tabs') + .addEventListener('keydown', (ev) => { + const self = ev.currentTarget.querySelector('.panel-tab-active') + if (ev.code === 'Space' || ev.code === 'Enter') { + togglePanel(ev.target) + ev.stopPropagation() + } else if (ev.code === 'ArrowLeft' && self.previousSibling) { + togglePanel(self.previousSibling) + self.previousSibling.focus() + ev.stopPropagation() + } else if (ev.code === 'ArrowRight' && self.nextSibling) { + togglePanel(self.nextSibling) + self.nextSibling.focus() + ev.stopPropagation() + } + }) + + return panels + } + + // initialize panels + Array.from(document.querySelectorAll('.panelset')).map(initPanelSet) + + if (typeof slideshow !== 'undefined') { + const getVisibleActivePanelInfo = () => { + const slidePanels = document.querySelectorAll('.remark-visible .panel-tab-active') + + if (!slidePanels.length) return null + + return slidePanels.map(panel => { + return { + panel, + panelId: panel.children[0].getAttribute('aria-controls'), + panelSetId: panel.parentNode.parentNode.id + } + }) + } + + slideshow.on('hideSlide', slide => { + // clear focus if we had a panel-tab selected + document.activeElement.blur() + + // clear search query for panelsets in current slide + const params = [...document.querySelectorAll('.remark-visible .panelset')] + .reduce(function (params, panelset) { + return updateSearchParams(panelset.id, null, params) + }, new URLSearchParams(window.location.search)) + + updateUrl(params) + }) + + slideshow.on('afterShowSlide', slide => { + const slidePanels = getVisibleActivePanelInfo() + + if (slidePanels) { + // only first panel gets focus + slidePanels[0].panel.focus() + // but still update the url to reflect all active panels + const params = slidePanels.reduce( + function (params, { panelId, panelSetId }) { + return updateSearchParams(panelSetId, panelId, params) + }, + new URLSearchParams(window.location.search) + ) + updateUrl(params) + } + }) + } + }) +})() \ No newline at end of file diff --git a/themes/hugo-apero/assets/jsconfig.json b/themes/hugo-apero/assets/jsconfig.json new file mode 100644 index 0000000..377218c --- /dev/null +++ b/themes/hugo-apero/assets/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "*": [ + "*" + ] + } + } +} \ No newline at end of file diff --git a/themes/hugo-apero/assets/named-colors.scss b/themes/hugo-apero/assets/named-colors.scss new file mode 100644 index 0000000..fabcb7a --- /dev/null +++ b/themes/hugo-apero/assets/named-colors.scss @@ -0,0 +1,18 @@ +// override colors to customize +// basic color options: use only color names as shown in the +// "Color Palette" section of http://tachyons.io/docs/themes/skins/ +$siteBgColor: "near-white" ; +$sidebarBgColor: "light-gray" ; +$textColor: "dark-gray" ; +$sidebarTextColor: "mid-gray" ; +$headlineColor: "dark-pink" ; +$headingColor: "near-black" ; +$bodyLinkColor: "blue" ; +$navLinkColor: "near-black" ; +$sidebarLinkColor: "near-black" ; +$footerTextColor: "silver" ; +$buttonTextColor: "near-white" ; +$buttonBgColor: "black" ; +$buttonHoverTextColor: "white" ; +$buttonHoverBgColor: "blue" ; +$borderColor: "moon-gray" ; diff --git a/themes/hugo-apero/assets/panelset.scss b/themes/hugo-apero/assets/panelset.scss new file mode 100644 index 0000000..f53b849 --- /dev/null +++ b/themes/hugo-apero/assets/panelset.scss @@ -0,0 +1,113 @@ +/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */ + +.post-body { + .panelset { + @extend .mw-100, .relative, .pv3; + --panel-tabs-border-bottom: currentColor; + --panel-tab-foreground: currentColor; + --panel-tab-background: unset; + --panel-tab-active-foreground: currentColor; + --panel-tab-active-background: unset; + --panel-tab-hover-foreground: currentColor; + --panel-tab-hover-background: unset; + --panel-tab-active-border-color: currentColor; + --panel-tab-hover-border-color: currentColor; + --panel-tab-inactive-opacity: 0.5; + --panel-tab-font-family: inherit; + } + + .panelset * { + box-sizing: border-box; + } + + .panelset .panel-tabs { + display: -webkit-box; + display: flex; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-box-pack: start; + justify-content: start; + -webkit-box-align: center; + align-items: center; + overflow-y: visible; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding: 0 0 2px 0; + box-shadow: inset 0 -1px 0px var(--panel-tabs-border-bottom); + } + + .panelset .panel-tabs * { + -webkit-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; + } + + .panelset .panel-tabs .panel-tab { + min-height: 50px; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + padding: 0.5em 1em; + font-family: var(--panel-tab-font-family); + opacity: var(--panel-tab-inactive-opacity); + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + margin-bottom: -2px; + color: var(--panel-tab-foreground); + background-color: var(--panel-tab-background); + list-style: none; + z-index: 5; + } + + .panelset .panel-tabs .panel-tab > a { + color: currentColor; + text-decoration: none; + border: none; + } + + .panelset .panel-tabs .panel-tab > a:focus { + outline: none; + text-decoration: none; + border: none; + } + + .panelset .panel-tabs .panel-tab > a:hover { + text-decoration: none; + border: none; + } + + .panelset .panel-tabs .panel-tab:hover { + border-bottom-color: var(--panel-tab-hover-border-color); + color: var(--panel-tab-hover-foreground); + background-color: var(--panel-tab-hover-background); + opacity: 1; + cursor: pointer; + z-index: 10; + } + + .panelset .panel-tabs .panel-tab:focus { + outline: none; + color: var(--panel-tab-hover-foreground); + border-bottom-color: var(--panel-tab-hover-border-color); + background-color: var(--panel-tab-hover-background); + } + + .panelset .panel-tabs .panel-tab.panel-tab-active { + border-top-color: var(--panel-tab-active-border-color); + color: var(--panel-tab-active-foreground); + background-color: var(--panel-tab-active-background); + opacity: 1; + } + + .panelset .panel { + display: none; + } + + .panelset .panel-active { + display: block; + } +} \ No newline at end of file diff --git a/themes/hugo-apero/assets/scaffold.scss b/themes/hugo-apero/assets/scaffold.scss new file mode 100644 index 0000000..ab05772 --- /dev/null +++ b/themes/hugo-apero/assets/scaffold.scss @@ -0,0 +1,535 @@ +// variables based on tachyons classes +// set font family options from config with defaults +$textFontFamily: {{ site.Params.textFontFamily | default "sans-serif" }}; +$headingFontFamily: {{ site.Params.headingFontFamily | default "sans-serif" }}; + +// use custom fonts +$customtextFontFamily: {{ site.Params.customtextFontFamily | default site.Params.textFontFamily }}; +$customheadingFontFamily: {{ site.Params.customheadingFontFamily | default site.Params.headingFontFamily }}; +$font-path: '{{ "fonts" | relURL }}'; +@import 'custom-fonts'; + +// base color scheme +@import 'base'; + +// custom color themes +// one of: forest / grayscale / peach / plum / poppy / sky / violet / water +// precedence: Params.theme > .Params.custom_colors +// custom colors may either be named tachyons color or hex codes +{{ $themes := (slice "forest" "grayscale" "peach" "plum" "poppy" "sky" "violet" "water") }} +{{ if site.Params.theme }} + {{ if in $themes site.Params.theme }} + @import '{{ printf "theme/%s" site.Params.theme }}'; + @import 'theme/set-theme'; + {{ else }} + {{ errorf "Selected theme '%s' is not one of the options." site.Params.theme }} + {{ end }} +{{ else if site.Params.custom_theme }} + {{ $custom_file := (printf "%s/%s" "assets" site.Params.custom_theme ) }} + // detect if hex in user-provided filename + {{ $hex_colors := in site.Params.custom_theme "hex" }} + // detect if user-provided filename exists in assets + {{ if (fileExists (printf "%s.%s" $custom_file "scss")) -}} + {{ if not $hex_colors }} + // named colors can just be used + @import '{{ site.Params.custom_theme }}'; + {{ else }} + // hex colors need set-theme too + @import '{{ site.Params.custom_theme }}'; + @import 'theme/set-theme'; + {{ end }} + {{ else }} + {{ errorf "Could not find custom color theme named '%s' in assets/ folder." site.Params.custom_theme }} + {{ end }} +{{ end }} + +// learn about Tachyons http://tachyons.io +@import 'tachyons'; + +// learn about headroom.js https://wicky.nillia.ms/headroom.js/ +@import 'headroom'; + +// add support for panelset from xaringanExtra package +// written by Garrick Aden-Buie +@import 'panelset'; + +// apply tachyons font family and color options from config +body { + @extend .bg-#{$siteBgColor}, .#{$textFontFamily}, .#{$textColor}; +} +h1, h2, h3, h4, h5, h6 { + @extend .#{$headingFontFamily}, .#{$headingColor}; +} +.f-headline, +.f-subheadline { + @extend .#{$headlineColor} ; + + &-ns, &-m, &-l { + @extend .#{$headlineColor} ; + } +} +.site-brand, +.site-links a, +.site-header .social-icon-links a, +.site-footer .site-copyright a, +.site-footer .social-icon-links a, +.page-main a.link { + @extend .#{$navLinkColor}; +} +.page-main a:not(.link), +.page-main .social-icon-links a { + @extend .#{$bodyLinkColor}; +} +.page-sidebar { + @extend .bg-#{$sidebarBgColor}, .#{$sidebarTextColor}; +} +.page-sidebar a:not(.link) { + @extend .#{$sidebarLinkColor}; +} +.site-footer { + @extend .#{$footerTextColor}; +} + +// apply tachyons classes to blog post and single page markdown +.post-body, +.page-body { + + h1, h2, h3, h4, h5, h6 { @extend .lh-title ; } + h1 { @extend .f1 ; } + h2 { @extend .f2 ; } + h3 { @extend .f3 ; } + h4 { @extend .f4 ; } + h5 { @extend .f5 ; } + h6 { @extend .f6 ; } + + > p { @extend .lh-copy ; } + + > p > code { + @extend .f6, .ph1, .bg-white-50 ; + } + + blockquote { + @extend .ml0, .pl3, .bl, .bw2, .measure-wide, .b--#{$borderColor} ; + + p, cite { @extend .lh-copy ; } + cite { @extend .f6, .i ; } + } + + ul:not(.panel-tabs), ol, dl { @extend .measure-wide, .lh-copy ; } + > dl dt { @extend .pl3, .b, .mb2 ; } + + hr { @extend .mv4, .ba, .b--#{$borderColor} ; } + + > table { + @extend .collapse, .mv4, .w-100, .ba, .bw1, .b--#{$borderColor} ; + + tbody tr { @extend .stripe-dark ; } + th { @extend .pa3, .f7, .fw7, .ttu, .tl, .v-btm ; } + td { @extend .pa3, .f6, .v-top ; } + } + + > .footnotes { + @extend .f7 ; + + ol { @extend .mw-100 ; } + } + + details { + @extend .mt4 ; + } +} + +// apply tachyons classes to blog lists +.blog-content { + article { @extend .b--#{$borderColor} ; } + .group-content { @extend .b--#{$borderColor} ; } +} +.list-sidebar { + article:first-of-type { + @extend .mt4-l ; + } +} + +// make the ad unit sticky and pad details +.page-sidebar { + .ad-unit { + @extend .bg-#{$sidebarBgColor}, .top-0; + position: -webkit-sticky; + position: sticky; + } + details { + @extend .ph4, .mv4 ; + } +} + +// SHORTCODES +// apply tachyons classes to highlight shortcode (and markdown codefence) +.highlight { @extend .f6, .lh-copy ; } + +// apply tachyons classes to figure shortcode +figure { + @extend .mr0, .ml0 ; + + figcaption p, + figcaption h4 { + @extend .f7 ; + } + figcaption p { + @extend .fw4, .mv1 ; + } +} + +// FORMS +form { + @extend .mb4 ; + + legend { + @extend .ph0, .mh0, .fw6, .clip ; + } + fieldset { + @extend .f5, .measure-wide, .ba, .bw0, .b--transparent, .pa0, .mv3, .mh0 ; + } + label { + @extend .db, .f6, .lh-copy ; + } + select, + [type="text"], + [type="email"] { + @extend .input-reset, .pa3, .mt2, .mb3, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ; + } + [type="button"], + [type="reset"], + [type="submit"] { + @extend .input-reset, .ph4, .pv3, .mb3, .f6, .ttu, .tracked, .b, .bw1, .br0, .b--transparent, .link, .pointer, .bg-animate, .#{$buttonTextColor}, .hover-#{$buttonHoverTextColor}, .bg-#{$buttonBgColor}, .hover-bg-#{$buttonHoverBgColor} ; + } + input[type="radio"], + input[type="checkbox"] { + @extend .mv2, .mh1 ; + } + textarea { + @extend .input-reset, .pa3, .mt2, .mb3, .mh0, .lh-copy, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ; + } + select:focus, + textarea:focus, + [type="text"]:focus, + [type="email"]:focus { + @extend .bg-white-50 ; + } +} + +// home page action jackson +.home { + .action.button { + @extend .input-reset, .ph4, .pv3, .mb3, .f6, .ttu, .tracked, .b, .bw1, .br0, .link, .pointer, .bg-animate, .b--transparent, .#{$headlineColor}, .bg-#{$sidebarBgColor}, .hover-bg-#{$buttonHoverBgColor} ; + } + a.action.button:hover { + @extend .#{$buttonTextColor}; + } + .action.text { + @extend .db, .mb4, .ttu, .tracked, .b, .link ; + } +} + +// CSS GRID SCAFFOLD +.grid-container { + @extend .w-100 ; + + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-rows: repeat(3, auto); + grid-auto-flow: dense; + grid-gap: 0px; + margin: 0px auto; + max-width: 1440px; +} +.site-header { + grid-column: 1 / 7; +} +.page-main { + grid-column: 1 / 7; +} +.site-footer { + grid-column: 1 / 7; +} + +.list-sidebar { + .page-main { + grid-column: 3 / 7; + } + .page-sidebar { + grid-column: 1 / 3; + } +} +.single-sidebar { + .page-main { + grid-column: 1 / 5; + } + .page-sidebar { + grid-column: 5 / 7; + } +} +.single-series { + .page-sidebar { + grid-column: 1 / 3; + } + .page-main { + grid-column: 3 / 7; + } + +} + +// SCAFFOLD MEDIA QUERY +@media screen and (max-width: 768px) { + .site-header { + order: 1; + } + .page-main { + order: 2; + } + .page-sidebar { + order: 3; + } + .site-footer { + order: 4; + } + .list-sidebar { + .page-main, + .page-sidebar { + grid-column: 1 / 7; + } + .page-main { + order: 3; + } + .page-sidebar { + order: 2; + } + } + .single-sidebar { + .page-main, + .page-sidebar { + grid-column: 1 / 7; + } + } + .single-series { + .page-main, + .page-sidebar { + grid-column: 1 / 7; + } + .page-main { + order: 3; + } + .page-sidebar { + order: 2; + } + } +} + +// anchor links +a > svg.anchor-symbol { + color: transparent; + margin-left: .5rem; + fill: $black-40; + height: 22px; +} + +a > svg.anchor-symbol:hover { + fill: $black-60; + transition: fill 0.3s ease; +} + +/*----NAV LINK HOVER ANIMATION -----*/ +/* from Desiree: https://github.com/dcossyleon/blogdown_desiree/blob/master/assets/scss/custom.scss */ + +/* stroke */ + +.site-links a, +.site-links a:after, +.site-links a:before { + transition: all .5s; +} + +.site-links a { + position: relative; +} + +.site-links a:after { + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 0%; + content: '.'; /* make invisible, dot beneath links */ + color: transparent; + height: .08em; + pointer-events: none; + @extend .bg-#{$navBgColor}; +} + +.site-links a:hover:after { + width: 85%; +} + +.site-links a.active:after { + width: 85%; + color: transparent; + @extend .bg-#{$navBgColor}; + height: .08em; +} + +// TOCs + +// Position page and series TOC + +nav#TableOfContents ul, +nav#SeriesTableOfContents ul, +nav#SectionTableOfContents ul { + @extend .list, .pa0; +} + +nav#TableOfContents ul li, +nav#SeriesTableOfContents ul li, +nav#SectionTableOfContents ul li { + @extend .lh-copy, .pl2, .pv1; +} + +details#PageTableOfContents { + @extend .mt3, .pl2, .pr0, .ml0, .mr2, .w-50, .dn, .db-l; + summary { + @extend .mb3, .f5, .fw7, .pl2, .ttu, .tracked, .#{$sidebarLinkColor}; + } +} + +// stickies should make room for headroom to peek down +.sticky { + position: -webkit-sticky; + position: sticky; + @extend .static-l, .top-0-l, .pt5; +} + +.about-sidebar { + @extend .self-start, .sticky, .bg-#{$sidebarBgColor}, .#{$sidebarTextColor}; + height: 100vh; +} +.about-sidebar a:not(.link) { + @extend .#{$sidebarLinkColor}; +} + +@media screen and (max-width: 768px) { + .about-sidebar { + order: 1; + } +} + +audio { + filter: sepia(0%) saturate(0%) grayscale(1) contrast(99%) invert(100%); + width: 8rem; + height: 2rem; +} +.controls button:hover, +.controls button:focus { + @extend .o-10; +} + +// apply tachyons classes to about page lists and collections +.featured-content h5, +.featured-content article, +.post-header h2 { + @extend .b--#{$borderColor} ; +} + +// button links in single page headers + listing page footers +.post-header a.btn-links, +article footer a.btn-links { + @extend .fw4, .ph3, .pv2, .mb3, .f6, .ttu, .tracked, .b, .br0, .link, .pointer, .bg-animate, .#{$headingColor}, .hover-#{$buttonHoverTextColor}, .bg-transparent, .hover-bg-#{$buttonHoverBgColor}; +} + +// dividers for talks +.middot-divider::after { + content: '\00B7'; + @extend .mh1, .#{$headingColor}; +} + +// Responsive table to hold event details + +.event-details { + .first-column { + @extend .fl, .w-100, .pv2, .w-25-ns; + .row-label { + @extend .f-subheadline, .f5, .fw2, .ttu, .tracked, .pa0, .ma0, .lh-copy; + } + } + .second-column { + @extend .fl, .w-100, .pv2, .w-75-ns; + .row-details { + @extend .f5, .measure, .lh-copy, .mv0; + } + } +} + +// Series + collections table of contents + +details#PageTableOfContents nav#TableOfContents ul li:hover { + @extend .bg-#{$siteBgColor}; +} + +nav#SectionTableOfContents ul li, +nav#SeriesTableOfContents ul li { + @extend .pl2, .bl, .bw1, .b--transparent; + &.active { + @extend .pl3, .bg-#{$siteBgColor}, .bl, .b--#{$borderColor}, .bw1; + } + &:not(.active) { + @extend .pl3, .dim, .bl, .bw1, .b--transparent; + } + &:hover:not(.active) a { + @extend .#{$headlineColor}, .b--#{$borderColor}; + } +} + +nav#SectionTableOfContents ul details { + @extend .pv1, .mv0, .pr0; + padding-left: 1.25rem; + &.active { + @extend .b--#{$borderColor}, .bl, .bw1, .pl3; + } + summary { + @extend .#{$sidebarLinkColor}, .pb2; + } + li { + @extend .pl0; + &.active { + @extend .pl3, .bg-#{$siteBgColor}, .bl, .b--transparent, .bw1; + } + } +} + +.list-sidebar ul li::marker, +.list ul li::marker{ + @extend .#{$headingColor}, .f5; +} + +// Style code +pre { + @extend .pre, .br1, .pa3, .bg-transparent, .overflow-x-auto, .overflow-y-hidden; + border: 1px solid #ebebeb; +} + +pre code span { + font-weight: normal !important; +} + +html, body { + scroll-padding-top: 73px; +} + +// Fontawesome icons +$fa-font-path: '{{ "webfonts" | relURL }}'; +@import "fontawesome-free-5.15.1-web/scss/fontawesome.scss"; +@import "fontawesome-free-5.15.1-web/scss/solid.scss"; +@import "fontawesome-free-5.15.1-web/scss/regular.scss"; +@import "fontawesome-free-5.15.1-web/scss/brands.scss"; +@import "academicons/academicons.scss"; + +// import a custom css file in assets +@import "custom"; diff --git a/themes/hugo-apero/assets/scss/_aspect-ratios.scss b/themes/hugo-apero/assets/scss/_aspect-ratios.scss new file mode 100644 index 0000000..045ee28 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_aspect-ratios.scss @@ -0,0 +1,142 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + ASPECT RATIOS + +*/ + +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *

+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} + +.aspect-ratio--16x9 { padding-bottom: 56.25%; } +.aspect-ratio--9x16 { padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { padding-bottom: 75%; } +.aspect-ratio--3x4 { padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { padding-bottom: 66.6%; } +.aspect-ratio--4x6 { padding-bottom: 150%; } + +.aspect-ratio--8x5 { padding-bottom: 62.5%; } +.aspect-ratio--5x8 { padding-bottom: 160%; } + +.aspect-ratio--7x5 { padding-bottom: 71.42%; } +.aspect-ratio--5x7 { padding-bottom: 140%; } + +.aspect-ratio--1x1 { padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +@media #{$breakpoint-not-small}{ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media #{$breakpoint-medium}{ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media #{$breakpoint-large}{ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} diff --git a/themes/hugo-apero/assets/scss/_background-position.scss b/themes/hugo-apero/assets/scss/_background-position.scss new file mode 100644 index 0000000..e07c417 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_background-position.scss @@ -0,0 +1,133 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media #{$breakpoint-not-small} { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media #{$breakpoint-medium} { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media #{$breakpoint-large} { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} diff --git a/themes/hugo-apero/assets/scss/_background-size.scss b/themes/hugo-apero/assets/scss/_background-size.scss new file mode 100644 index 0000000..2badb00 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_background-size.scss @@ -0,0 +1,41 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Often used in combination with background image set as an inline style + on an html element. +*/ + + .cover { background-size: cover!important; } + .contain { background-size: contain!important; } + +@media #{$breakpoint-not-small} { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} + +@media #{$breakpoint-medium} { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} + +@media #{$breakpoint-large} { + .cover-l { background-size: cover!important; } + .contain-l { background-size: contain!important; } +} diff --git a/themes/hugo-apero/assets/scss/_border-colors.scss b/themes/hugo-apero/assets/scss/_border-colors.scss new file mode 100644 index 0000000..3109951 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_border-colors.scss @@ -0,0 +1,93 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ + +.b--black { border-color: $black; } +.b--near-black { border-color: $near-black; } +.b--dark-gray { border-color: $dark-gray; } +.b--mid-gray { border-color: $mid-gray; } +.b--gray { border-color: $gray; } +.b--silver { border-color: $silver; } +.b--light-silver { border-color: $light-silver; } +.b--moon-gray { border-color: $moon-gray; } +.b--light-gray { border-color: $light-gray; } +.b--near-white { border-color: $near-white; } +.b--white { border-color: $white; } + +.b--white-90 { border-color: $white-90; } +.b--white-80 { border-color: $white-80; } +.b--white-70 { border-color: $white-70; } +.b--white-60 { border-color: $white-60; } +.b--white-50 { border-color: $white-50; } +.b--white-40 { border-color: $white-40; } +.b--white-30 { border-color: $white-30; } +.b--white-20 { border-color: $white-20; } +.b--white-10 { border-color: $white-10; } +.b--white-05 { border-color: $white-05; } +.b--white-025 { border-color: $white-025; } +.b--white-0125 { border-color: $white-0125; } + +.b--black-90 { border-color: $black-90; } +.b--black-80 { border-color: $black-80; } +.b--black-70 { border-color: $black-70; } +.b--black-60 { border-color: $black-60; } +.b--black-50 { border-color: $black-50; } +.b--black-40 { border-color: $black-40; } +.b--black-30 { border-color: $black-30; } +.b--black-20 { border-color: $black-20; } +.b--black-10 { border-color: $black-10; } +.b--black-05 { border-color: $black-05; } +.b--black-025 { border-color: $black-025; } +.b--black-0125 { border-color: $black-0125; } + +.b--dark-red { border-color: $dark-red; } +.b--red { border-color: $red; } +.b--light-red { border-color: $light-red; } +.b--orange { border-color: $orange; } +.b--gold { border-color: $gold; } +.b--yellow { border-color: $yellow; } +.b--light-yellow { border-color: $light-yellow; } +.b--purple { border-color: $purple; } +.b--light-purple { border-color: $light-purple; } +.b--dark-pink { border-color: $dark-pink; } +.b--hot-pink { border-color: $hot-pink; } +.b--pink { border-color: $pink; } +.b--light-pink { border-color: $light-pink; } +.b--dark-green { border-color: $dark-green; } +.b--green { border-color: $green; } +.b--light-green { border-color: $light-green; } +.b--navy { border-color: $navy; } +.b--dark-blue { border-color: $dark-blue; } +.b--blue { border-color: $blue; } +.b--light-blue { border-color: $light-blue; } +.b--lightest-blue { border-color: $lightest-blue; } +.b--washed-blue { border-color: $washed-blue; } +.b--washed-green { border-color: $washed-green; } +.b--washed-yellow { border-color: $washed-yellow; } +.b--washed-red { border-color: $washed-red; } + +.b--transparent { border-color: $transparent; } +.b--inherit { border-color: inherit; } diff --git a/themes/hugo-apero/assets/scss/_border-radius.scss b/themes/hugo-apero/assets/scss/_border-radius.scss new file mode 100644 index 0000000..5bedc84 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_border-radius.scss @@ -0,0 +1,134 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + .br0 { border-radius: $border-radius-none } + .br1 { border-radius: $border-radius-1; } + .br2 { border-radius: $border-radius-2; } + .br3 { border-radius: $border-radius-3; } + .br4 { border-radius: $border-radius-4; } + .br-100 { border-radius: $border-radius-circle; } + .br-pill { border-radius: $border-radius-pill; } + .br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + +@media #{$breakpoint-not-small} { + .br0-ns { border-radius: $border-radius-none } + .br1-ns { border-radius: $border-radius-1; } + .br2-ns { border-radius: $border-radius-2; } + .br3-ns { border-radius: $border-radius-3; } + .br4-ns { border-radius: $border-radius-4; } + .br-100-ns { border-radius: $border-radius-circle; } + .br-pill-ns { border-radius: $border-radius-pill; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media #{$breakpoint-medium} { + .br0-m { border-radius: $border-radius-none } + .br1-m { border-radius: $border-radius-1; } + .br2-m { border-radius: $border-radius-2; } + .br3-m { border-radius: $border-radius-3; } + .br4-m { border-radius: $border-radius-4; } + .br-100-m { border-radius: $border-radius-circle; } + .br-pill-m { border-radius: $border-radius-pill; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media #{$breakpoint-large} { + .br0-l { border-radius: $border-radius-none } + .br1-l { border-radius: $border-radius-1; } + .br2-l { border-radius: $border-radius-2; } + .br3-l { border-radius: $border-radius-3; } + .br4-l { border-radius: $border-radius-4; } + .br-100-l { border-radius: $border-radius-circle; } + .br-pill-l { border-radius: $border-radius-pill; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/themes/hugo-apero/assets/scss/_border-style.scss b/themes/hugo-apero/assets/scss/_border-style.scss new file mode 100644 index 0000000..3239417 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_border-style.scss @@ -0,0 +1,55 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.b--dotted { border-style: dotted; } +.b--dashed { border-style: dashed; } +.b--solid { border-style: solid; } +.b--none { border-style: none; } + +@media #{$breakpoint-not-small} { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} + +@media #{$breakpoint-medium} { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} + +@media #{$breakpoint-large} { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } +} diff --git a/themes/hugo-apero/assets/scss/_border-widths.scss b/themes/hugo-apero/assets/scss/_border-widths.scss new file mode 100644 index 0000000..26b9efa --- /dev/null +++ b/themes/hugo-apero/assets/scss/_border-widths.scss @@ -0,0 +1,81 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.bw0 { border-width: $border-width-none; } +.bw1 { border-width: $border-width-1; } +.bw2 { border-width: $border-width-2; } +.bw3 { border-width: $border-width-3; } +.bw4 { border-width: $border-width-4; } +.bw5 { border-width: $border-width-5; } + +/* Resets */ +.bt-0 { border-top-width: $border-width-none } +.br-0 { border-right-width: $border-width-none } +.bb-0 { border-bottom-width: $border-width-none } +.bl-0 { border-left-width: $border-width-none } + +@media #{$breakpoint-not-small} { + .bw0-ns { border-width: $border-width-none; } + .bw1-ns { border-width: $border-width-1; } + .bw2-ns { border-width: $border-width-2; } + .bw3-ns { border-width: $border-width-3; } + .bw4-ns { border-width: $border-width-4; } + .bw5-ns { border-width: $border-width-5; } + .bt-0-ns { border-top-width: $border-width-none } + .br-0-ns { border-right-width: $border-width-none } + .bb-0-ns { border-bottom-width: $border-width-none } + .bl-0-ns { border-left-width: $border-width-none } +} + +@media #{$breakpoint-medium} { + .bw0-m { border-width: $border-width-none; } + .bw1-m { border-width: $border-width-1; } + .bw2-m { border-width: $border-width-2; } + .bw3-m { border-width: $border-width-3; } + .bw4-m { border-width: $border-width-4; } + .bw5-m { border-width: $border-width-5; } + .bt-0-m { border-top-width: $border-width-none } + .br-0-m { border-right-width: $border-width-none } + .bb-0-m { border-bottom-width: $border-width-none } + .bl-0-m { border-left-width: $border-width-none } +} + +@media #{$breakpoint-large} { + .bw0-l { border-width: $border-width-none; } + .bw1-l { border-width: $border-width-1; } + .bw2-l { border-width: $border-width-2; } + .bw3-l { border-width: $border-width-3; } + .bw4-l { border-width: $border-width-4; } + .bw5-l { border-width: $border-width-5; } + .bt-0-l { border-top-width: $border-width-none } + .br-0-l { border-right-width: $border-width-none } + .bb-0-l { border-bottom-width: $border-width-none } + .bl-0-l { border-left-width: $border-width-none } +} diff --git a/themes/hugo-apero/assets/scss/_borders.scss b/themes/hugo-apero/assets/scss/_borders.scss new file mode 100644 index 0000000..7632c32 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_borders.scss @@ -0,0 +1,65 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + .ba { border-style: solid; border-width: 1px; } + .bt { border-top-style: solid; border-top-width: 1px; } + .br { border-right-style: solid; border-right-width: 1px; } + .bb { border-bottom-style: solid; border-bottom-width: 1px; } + .bl { border-left-style: solid; border-left-width: 1px; } + .bn { border-style: none; border-width: 0; } + + +@media #{$breakpoint-not-small} { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } +} + +@media #{$breakpoint-medium} { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } +} + +@media #{$breakpoint-large} { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } +} + diff --git a/themes/hugo-apero/assets/scss/_box-shadow.scss b/themes/hugo-apero/assets/scss/_box-shadow.scss new file mode 100644 index 0000000..bce77d3 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_box-shadow.scss @@ -0,0 +1,48 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.shadow-1 { box-shadow: $box-shadow-1; } +.shadow-2 { box-shadow: $box-shadow-2; } +.shadow-3 { box-shadow: $box-shadow-3; } +.shadow-4 { box-shadow: $box-shadow-4; } +.shadow-5 { box-shadow: $box-shadow-5; } + +@media #{$breakpoint-not-small} { + .shadow-1-ns { box-shadow: $box-shadow-1; } + .shadow-2-ns { box-shadow: $box-shadow-2; } + .shadow-3-ns { box-shadow: $box-shadow-3; } + .shadow-4-ns { box-shadow: $box-shadow-4; } + .shadow-5-ns { box-shadow: $box-shadow-5; } +} + +@media #{$breakpoint-medium} { + .shadow-1-m { box-shadow: $box-shadow-1; } + .shadow-2-m { box-shadow: $box-shadow-2; } + .shadow-3-m { box-shadow: $box-shadow-3; } + .shadow-4-m { box-shadow: $box-shadow-4; } + .shadow-5-m { box-shadow: $box-shadow-5; } +} + +@media #{$breakpoint-large} { + .shadow-1-l { box-shadow: $box-shadow-1; } + .shadow-2-l { box-shadow: $box-shadow-2; } + .shadow-3-l { box-shadow: $box-shadow-3; } + .shadow-4-l { box-shadow: $box-shadow-4; } + .shadow-5-l { box-shadow: $box-shadow-5; } +} diff --git a/themes/hugo-apero/assets/scss/_box-sizing.scss b/themes/hugo-apero/assets/scss/_box-sizing.scss new file mode 100644 index 0000000..d9262e5 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_box-sizing.scss @@ -0,0 +1,49 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + BOX SIZING + +*/ + +html, +body, +div, +article, +section, +main, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} diff --git a/themes/hugo-apero/assets/scss/_clears.scss b/themes/hugo-apero/assets/scss/_clears.scss new file mode 100644 index 0000000..d4c2fc3 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_clears.scss @@ -0,0 +1,47 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ + +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { content: " "; display: table; } +.cf:after { clear: both; } +.cf { *zoom: 1; } + +.cl { clear: left; } +.cr { clear: right; } +.cb { clear: both; } +.cn { clear: none; } + +@media #{$breakpoint-not-small} { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media #{$breakpoint-medium} { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media #{$breakpoint-large} { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} diff --git a/themes/hugo-apero/assets/scss/_code.scss b/themes/hugo-apero/assets/scss/_code.scss new file mode 100644 index 0000000..81f105f --- /dev/null +++ b/themes/hugo-apero/assets/scss/_code.scss @@ -0,0 +1,18 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + CODE + +*/ + +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} diff --git a/themes/hugo-apero/assets/scss/_coordinates.scss b/themes/hugo-apero/assets/scss/_coordinates.scss new file mode 100644 index 0000000..eaae523 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_coordinates.scss @@ -0,0 +1,153 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.top-0 { top: 0; } +.right-0 { right: 0; } +.bottom-0 { bottom: 0; } +.left-0 { left: 0; } + +.top-1 { top: 1rem; } +.right-1 { right: 1rem; } +.bottom-1 { bottom: 1rem; } +.left-1 { left: 1rem; } + +.top-2 { top: 2rem; } +.right-2 { right: 2rem; } +.bottom-2 { bottom: 2rem; } +.left-2 { left: 2rem; } + +.top--1 { top: -1rem; } +.right--1 { right: -1rem; } +.bottom--1 { bottom: -1rem; } +.left--1 { left: -1rem; } + +.top--2 { top: -2rem; } +.right--2 { right: -2rem; } +.bottom--2 { bottom: -2rem; } +.left--2 { left: -2rem; } + + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media #{$breakpoint-not-small} { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media #{$breakpoint-medium} { + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media #{$breakpoint-large} { + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} diff --git a/themes/hugo-apero/assets/scss/_debug-children.scss b/themes/hugo-apero/assets/scss/_debug-children.scss new file mode 100644 index 0000000..c22dd49 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_debug-children.scss @@ -0,0 +1,21 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + DEBUG CHILDREN + Docs: http://tachyons.io/docs/debug/ + + Just add the debug class to any element to see outlines on its + children. + +*/ + +.debug * { outline: 1px solid gold; } +.debug-white * { outline: 1px solid white; } +.debug-black * { outline: 1px solid black; } + diff --git a/themes/hugo-apero/assets/scss/_debug-grid.scss b/themes/hugo-apero/assets/scss/_debug-grid.scss new file mode 100644 index 0000000..b5f8dd3 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_debug-grid.scss @@ -0,0 +1,33 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + DEBUG GRID + http://tachyons.io/docs/debug-grid/ + + Can be useful for debugging layout issues + or helping to make sure things line up perfectly. + Just tack one of these classes onto a parent element. + +*/ + +.debug-grid { + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; +} + +.debug-grid-16 { + background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; +} + +.debug-grid-8-solid { + background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; +} + +.debug-grid-16-solid { + background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; +} diff --git a/themes/hugo-apero/assets/scss/_debug.scss b/themes/hugo-apero/assets/scss/_debug.scss new file mode 100644 index 0000000..a267894 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_debug.scss @@ -0,0 +1,127 @@ + +// Converted Variables + + +// Custom Media Query Variables + + + +body { outline: 1px solid #2980B9!important; } +article { outline: 1px solid #3498DB!important; } +nav { outline: 1px solid #0088C3!important; } +aside { outline: 1px solid #33A0CE!important; } +section { outline: 1px solid #66B8DA!important; } +header { outline: 1px solid #99CFE7!important; } +footer { outline: 1px solid #CCE7F3!important; } +h1 { outline: 1px solid #162544!important; } +h2 { outline: 1px solid #314E6E!important; } +h3 { outline: 1px solid #3E5E85!important; } +h4 { outline: 1px solid #449BAF!important; } +h5 { outline: 1px solid #C7D1CB!important; } +h6 { outline: 1px solid #4371D0!important; } +main { outline: 1px solid #2F4F90!important; } +address { outline: 1px solid #1A2C51!important; } +div { outline: 1px solid #036CDB!important; } + + +p { outline: 1px solid #AC050B!important; } +hr { outline: 1px solid #FF063F!important; } +pre { outline: 1px solid #850440!important; } +blockquote { outline: 1px solid #F1B8E7!important; } +ol { outline: 1px solid #FF050C!important; } +ul { outline: 1px solid #D90416!important; } +li { outline: 1px solid #D90416!important; } +dl { outline: 1px solid #FD3427!important; } +dt { outline: 1px solid #FF0043!important; } +dd { outline: 1px solid #E80174!important; } +figure { outline: 1px solid #FF00BB!important; } +figcaption { outline: 1px solid #BF0032!important; } + + + +table { outline: 1px solid #00CC99!important; } +caption { outline: 1px solid #37FFC4!important; } +thead { outline: 1px solid #98DACA!important; } +tbody { outline: 1px solid #64A7A0!important; } +tfoot { outline: 1px solid #22746B!important; } +tr { outline: 1px solid #86C0B2!important; } +th { outline: 1px solid #A1E7D6!important; } +td { outline: 1px solid #3F5A54!important; } +col { outline: 1px solid #6C9A8F!important; } +colgroup { outline: 1px solid #6C9A9D!important; } + + +button { outline: 1px solid #DA8301!important; } +datalist { outline: 1px solid #C06000!important; } +fieldset { outline: 1px solid #D95100!important; } +form { outline: 1px solid #D23600!important; } +input { outline: 1px solid #FCA600!important; } +keygen { outline: 1px solid #B31E00!important; } +label { outline: 1px solid #EE8900!important; } +legend { outline: 1px solid #DE6D00!important; } +meter { outline: 1px solid #E8630C!important; } +optgroup { outline: 1px solid #B33600!important; } +option { outline: 1px solid #FF8A00!important; } +output { outline: 1px solid #FF9619!important; } +progress { outline: 1px solid #E57C00!important; } +select { outline: 1px solid #E26E0F!important; } +textarea { outline: 1px solid #CC5400!important; } + + + +details { outline: 1px solid #33848F!important; } +summary { outline: 1px solid #60A1A6!important; } +command { outline: 1px solid #438DA1!important; } +menu { outline: 1px solid #449DA6!important; } + + + +del { outline: 1px solid #BF0000!important; } +ins { outline: 1px solid #400000!important; } + + + +img { outline: 1px solid #22746B!important; } +iframe { outline: 1px solid #64A7A0!important; } +embed { outline: 1px solid #98DACA!important; } +object { outline: 1px solid #00CC99!important; } +param { outline: 1px solid #37FFC4!important; } +video { outline: 1px solid #6EE866!important; } +audio { outline: 1px solid #027353!important; } +source { outline: 1px solid #012426!important; } +canvas { outline: 1px solid #A2F570!important; } +track { outline: 1px solid #59A600!important; } +map { outline: 1px solid #7BE500!important; } +area { outline: 1px solid #305900!important; } + + + +a { outline: 1px solid #FF62AB!important; } +em { outline: 1px solid #800B41!important; } +strong { outline: 1px solid #FF1583!important; } +i { outline: 1px solid #803156!important; } +b { outline: 1px solid #CC1169!important; } +u { outline: 1px solid #FF0430!important; } +s { outline: 1px solid #F805E3!important; } +small { outline: 1px solid #D107B2!important; } +abbr { outline: 1px solid #4A0263!important; } +q { outline: 1px solid #240018!important; } +cite { outline: 1px solid #64003C!important; } +dfn { outline: 1px solid #B4005A!important; } +sub { outline: 1px solid #DBA0C8!important; } +sup { outline: 1px solid #CC0256!important; } +time { outline: 1px solid #D6606D!important; } +code { outline: 1px solid #E04251!important; } +kbd { outline: 1px solid #5E001F!important; } +samp { outline: 1px solid #9C0033!important; } +var { outline: 1px solid #D90047!important; } +mark { outline: 1px solid #FF0053!important; } +bdi { outline: 1px solid #BF3668!important; } +bdo { outline: 1px solid #6F1400!important; } +ruby { outline: 1px solid #FF7B93!important; } +rt { outline: 1px solid #FF2F54!important; } +rp { outline: 1px solid #803E49!important; } +span { outline: 1px solid #CC2643!important; } +br { outline: 1px solid #DB687D!important; } +wbr { outline: 1px solid #DB175B!important; } + diff --git a/themes/hugo-apero/assets/scss/_debug_children.scss b/themes/hugo-apero/assets/scss/_debug_children.scss new file mode 100644 index 0000000..5c1f931 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_debug_children.scss @@ -0,0 +1,18 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + DEBUG CHILDREN + + Just add the debug class to any element to see outlines on its + children. + +*/ + +.debug * { outline: 1px solid gold; } + diff --git a/themes/hugo-apero/assets/scss/_display.scss b/themes/hugo-apero/assets/scss/_display.scss new file mode 100644 index 0000000..6c75ed2 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_display.scss @@ -0,0 +1,111 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + tr = table-row + tcol = table-column + tcolg = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.dn { display: none; } +.di { display: inline; } +.db { display: block; } +.dib { display: inline-block; } +.dit { display: inline-table; } +.dt { display: table; } +.dtc { display: table-cell; } +.dt-row { display: table-row; } +.dt-row-group { display: table-row-group; } +.dt-column { display: table-column; } +.dt-column-group { display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ +.dt--fixed { + table-layout: fixed; + width: 100%; +} + +@media #{$breakpoint-not-small} { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} + +@media #{$breakpoint-medium} { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} + +@media #{$breakpoint-large} { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} + diff --git a/themes/hugo-apero/assets/scss/_flexbox.scss b/themes/hugo-apero/assets/scss/_flexbox.scss new file mode 100644 index 0000000..4556cfc --- /dev/null +++ b/themes/hugo-apero/assets/scss/_flexbox.scss @@ -0,0 +1,257 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.flex { display: flex; } +.inline-flex { display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ +.flex-auto { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { flex: none; } + +.flex-column { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } +.flex-wrap-reverse { flex-wrap: wrap-reverse; } +.flex-column-reverse { flex-direction: column-reverse; } +.flex-row-reverse { flex-direction: row-reverse; } + +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.items-center { align-items: center; } +.items-baseline { align-items: baseline; } +.items-stretch { align-items: stretch; } + +.self-start { align-self: flex-start; } +.self-end { align-self: flex-end; } +.self-center { align-self: center; } +.self-baseline { align-self: baseline; } +.self-stretch { align-self: stretch; } + +.justify-start { justify-content: flex-start; } +.justify-end { justify-content: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-around { justify-content: space-around; } + +.content-start { align-content: flex-start; } +.content-end { align-content: flex-end; } +.content-center { align-content: center; } +.content-between { align-content: space-between; } +.content-around { align-content: space-around; } +.content-stretch { align-content: stretch; } + +.order-0 { order: 0; } +.order-1 { order: 1; } +.order-2 { order: 2; } +.order-3 { order: 3; } +.order-4 { order: 4; } +.order-5 { order: 5; } +.order-6 { order: 6; } +.order-7 { order: 7; } +.order-8 { order: 8; } +.order-last { order: 99999; } + +.flex-grow-0 { flex-grow: 0; } +.flex-grow-1 { flex-grow: 1; } + +.flex-shrink-0 { flex-shrink: 0; } +.flex-shrink-1 { flex-shrink: 1; } + +@media #{$breakpoint-not-small} { + .flex-ns { display: flex; } + .inline-flex-ns { display: inline-flex; } + .flex-auto-ns { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { flex: none; } + .flex-column-ns { flex-direction: column; } + .flex-row-ns { flex-direction: row; } + .flex-wrap-ns { flex-wrap: wrap; } + .flex-nowrap-ns { flex-wrap: nowrap; } + .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { flex-direction: column-reverse; } + .flex-row-reverse-ns { flex-direction: row-reverse; } + .items-start-ns { align-items: flex-start; } + .items-end-ns { align-items: flex-end; } + .items-center-ns { align-items: center; } + .items-baseline-ns { align-items: baseline; } + .items-stretch-ns { align-items: stretch; } + + .self-start-ns { align-self: flex-start; } + .self-end-ns { align-self: flex-end; } + .self-center-ns { align-self: center; } + .self-baseline-ns { align-self: baseline; } + .self-stretch-ns { align-self: stretch; } + + .justify-start-ns { justify-content: flex-start; } + .justify-end-ns { justify-content: flex-end; } + .justify-center-ns { justify-content: center; } + .justify-between-ns { justify-content: space-between; } + .justify-around-ns { justify-content: space-around; } + + .content-start-ns { align-content: flex-start; } + .content-end-ns { align-content: flex-end; } + .content-center-ns { align-content: center; } + .content-between-ns { align-content: space-between; } + .content-around-ns { align-content: space-around; } + .content-stretch-ns { align-content: stretch; } + + .order-0-ns { order: 0; } + .order-1-ns { order: 1; } + .order-2-ns { order: 2; } + .order-3-ns { order: 3; } + .order-4-ns { order: 4; } + .order-5-ns { order: 5; } + .order-6-ns { order: 6; } + .order-7-ns { order: 7; } + .order-8-ns { order: 8; } + .order-last-ns { order: 99999; } + + .flex-grow-0-ns { flex-grow: 0; } + .flex-grow-1-ns { flex-grow: 1; } + + .flex-shrink-0-ns { flex-shrink: 0; } + .flex-shrink-1-ns { flex-shrink: 1; } +} +@media #{$breakpoint-medium} { + .flex-m { display: flex; } + .inline-flex-m { display: inline-flex; } + .flex-auto-m { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { flex: none; } + .flex-column-m { flex-direction: column; } + .flex-row-m { flex-direction: row; } + .flex-wrap-m { flex-wrap: wrap; } + .flex-nowrap-m { flex-wrap: nowrap; } + .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } + .flex-column-reverse-m { flex-direction: column-reverse; } + .flex-row-reverse-m { flex-direction: row-reverse; } + .items-start-m { align-items: flex-start; } + .items-end-m { align-items: flex-end; } + .items-center-m { align-items: center; } + .items-baseline-m { align-items: baseline; } + .items-stretch-m { align-items: stretch; } + + .self-start-m { align-self: flex-start; } + .self-end-m { align-self: flex-end; } + .self-center-m { align-self: center; } + .self-baseline-m { align-self: baseline; } + .self-stretch-m { align-self: stretch; } + + .justify-start-m { justify-content: flex-start; } + .justify-end-m { justify-content: flex-end; } + .justify-center-m { justify-content: center; } + .justify-between-m { justify-content: space-between; } + .justify-around-m { justify-content: space-around; } + + .content-start-m { align-content: flex-start; } + .content-end-m { align-content: flex-end; } + .content-center-m { align-content: center; } + .content-between-m { align-content: space-between; } + .content-around-m { align-content: space-around; } + .content-stretch-m { align-content: stretch; } + + .order-0-m { order: 0; } + .order-1-m { order: 1; } + .order-2-m { order: 2; } + .order-3-m { order: 3; } + .order-4-m { order: 4; } + .order-5-m { order: 5; } + .order-6-m { order: 6; } + .order-7-m { order: 7; } + .order-8-m { order: 8; } + .order-last-m { order: 99999; } + + .flex-grow-0-m { flex-grow: 0; } + .flex-grow-1-m { flex-grow: 1; } + + .flex-shrink-0-m { flex-shrink: 0; } + .flex-shrink-1-m { flex-shrink: 1; } +} + +@media #{$breakpoint-large} { + .flex-l { display: flex; } + .inline-flex-l { display: inline-flex; } + .flex-auto-l { + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { flex: none; } + .flex-column-l { flex-direction: column; } + .flex-row-l { flex-direction: row; } + .flex-wrap-l { flex-wrap: wrap; } + .flex-nowrap-l { flex-wrap: nowrap; } + .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } + .flex-column-reverse-l { flex-direction: column-reverse; } + .flex-row-reverse-l { flex-direction: row-reverse; } + + .items-start-l { align-items: flex-start; } + .items-end-l { align-items: flex-end; } + .items-center-l { align-items: center; } + .items-baseline-l { align-items: baseline; } + .items-stretch-l { align-items: stretch; } + + .self-start-l { align-self: flex-start; } + .self-end-l { align-self: flex-end; } + .self-center-l { align-self: center; } + .self-baseline-l { align-self: baseline; } + .self-stretch-l { align-self: stretch; } + + .justify-start-l { justify-content: flex-start; } + .justify-end-l { justify-content: flex-end; } + .justify-center-l { justify-content: center; } + .justify-between-l { justify-content: space-between; } + .justify-around-l { justify-content: space-around; } + + .content-start-l { align-content: flex-start; } + .content-end-l { align-content: flex-end; } + .content-center-l { align-content: center; } + .content-between-l { align-content: space-between; } + .content-around-l { align-content: space-around; } + .content-stretch-l { align-content: stretch; } + + .order-0-l { order: 0; } + .order-1-l { order: 1; } + .order-2-l { order: 2; } + .order-3-l { order: 3; } + .order-4-l { order: 4; } + .order-5-l { order: 5; } + .order-6-l { order: 6; } + .order-7-l { order: 7; } + .order-8-l { order: 8; } + .order-last-l { order: 99999; } + + .flex-grow-0-l { flex-grow: 0; } + .flex-grow-1-l { flex-grow: 1; } + + .flex-shrink-0-l { flex-shrink: 0; } + .flex-shrink-1-l { flex-shrink: 1; } +} diff --git a/themes/hugo-apero/assets/scss/_floats.scss b/themes/hugo-apero/assets/scss/_floats.scss new file mode 100644 index 0000000..e2bb8ba --- /dev/null +++ b/themes/hugo-apero/assets/scss/_floats.scss @@ -0,0 +1,56 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + + +.fl { float: left; _display: inline; } +.fr { float: right; _display: inline; } +.fn { float: none; } + +@media #{$breakpoint-not-small} { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} + +@media #{$breakpoint-medium} { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} + +@media #{$breakpoint-large} { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} diff --git a/themes/hugo-apero/assets/scss/_font-family.scss b/themes/hugo-apero/assets/scss/_font-family.scss new file mode 100644 index 0000000..499d4fc --- /dev/null +++ b/themes/hugo-apero/assets/scss/_font-family.scss @@ -0,0 +1,99 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + +*/ + + +.sans-serif { + font-family: $sans-serif; +} + +.serif { + font-family: $serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ +code, .code { + font-family: Consolas, + monaco, + monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + + +/* Sans-Serif Typefaces */ + +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} + +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} + + +/* Serif Typefaces */ + +.athelas { + font-family: athelas, + georgia, + serif; +} + +.georgia { + font-family: georgia, + serif; +} + +.times { + font-family: times, + serif; +} + +.bodoni { + font-family: "Bodoni MT", + serif; +} + +.calisto { + font-family: "Calisto MT", + serif; +} + +.garamond { + font-family: garamond, + serif; +} + +.baskerville { + font-family: baskerville, + serif; +} + diff --git a/themes/hugo-apero/assets/scss/_font-style.scss b/themes/hugo-apero/assets/scss/_font-style.scss new file mode 100644 index 0000000..2082389 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_font-style.scss @@ -0,0 +1,36 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.i { font-style: italic; } +.fs-normal { font-style: normal; } + +@media #{$breakpoint-not-small} { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media #{$breakpoint-medium} { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media #{$breakpoint-large} { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} diff --git a/themes/hugo-apero/assets/scss/_font-weight.scss b/themes/hugo-apero/assets/scss/_font-weight.scss new file mode 100644 index 0000000..498b159 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_font-weight.scss @@ -0,0 +1,87 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.normal { font-weight: normal; } +.b { font-weight: bold; } +.fw1 { font-weight: 100; } +.fw2 { font-weight: 200; } +.fw3 { font-weight: 300; } +.fw4 { font-weight: 400; } +.fw5 { font-weight: 500; } +.fw6 { font-weight: 600; } +.fw7 { font-weight: 700; } +.fw8 { font-weight: 800; } +.fw9 { font-weight: 900; } + + +@media #{$breakpoint-not-small} { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } +} + +@media #{$breakpoint-medium} { + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } +} + +@media #{$breakpoint-large} { + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } +} diff --git a/themes/hugo-apero/assets/scss/_forms.scss b/themes/hugo-apero/assets/scss/_forms.scss new file mode 100644 index 0000000..d768b2e --- /dev/null +++ b/themes/hugo-apero/assets/scss/_forms.scss @@ -0,0 +1,23 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + FORMS + +*/ + +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/themes/hugo-apero/assets/scss/_gradients.scss b/themes/hugo-apero/assets/scss/_gradients.scss new file mode 100644 index 0000000..057690e --- /dev/null +++ b/themes/hugo-apero/assets/scss/_gradients.scss @@ -0,0 +1,29 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + GRADIENTS + + +*/ + +.gradient-blue { + background-image: linear-gradient(#4570B0, #0081C2); +} + +.gradient-blue-reversed { + background-image: linear-gradient(#0081C2, #4570B0); +} + +.gradient-light-blue { + background-image: linear-gradient(#76D3FE, #008AE0); +} + +.gradient-light-blue-reversed { + background-image: linear-gradient(#008AE0, #76D3FE); +} diff --git a/themes/hugo-apero/assets/scss/_heights.scss b/themes/hugo-apero/assets/scss/_heights.scss new file mode 100644 index 0000000..a32afa3 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_heights.scss @@ -0,0 +1,131 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Height Scale */ + +.h1 { height: $height-1; } +.h2 { height: $height-2; } +.h3 { height: $height-3; } +.h4 { height: $height-4; } +.h5 { height: $height-5; } + +/* Height Percentages - Based off of height of parent */ + +.h-25 { height: 25%; } +.h-50 { height: 50%; } +.h-75 { height: 75%; } +.h-100 { height: 100%; } + +.min-h-100 { min-height: 100%; } + +/* Screen Height Percentage */ + +.vh-25 { height: 25vh; } +.vh-50 { height: 50vh; } +.vh-75 { height: 75vh; } +.vh-100 { height: 100vh; } + +.min-vh-100 { min-height: 100vh; } + + +/* String Properties */ + +.h-auto { height: auto; } +.h-inherit { height: inherit; } + +@media #{$breakpoint-not-small} { + .h1-ns { height: $height-1; } + .h2-ns { height: $height-2; } + .h3-ns { height: $height-3; } + .h4-ns { height: $height-4; } + .h5-ns { height: $height-5; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} + +@media #{$breakpoint-medium} { + .h1-m { height: $height-1; } + .h2-m { height: $height-2; } + .h3-m { height: $height-3; } + .h4-m { height: $height-4; } + .h5-m { height: $height-5; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} + +@media #{$breakpoint-large} { + .h1-l { height: $height-1; } + .h2-l { height: $height-2; } + .h3-l { height: $height-3; } + .h4-l { height: $height-4; } + .h5-l { height: $height-5; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} diff --git a/themes/hugo-apero/assets/scss/_hovers.scss b/themes/hugo-apero/assets/scss/_hovers.scss new file mode 100644 index 0000000..3e6fca6 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_hovers.scss @@ -0,0 +1,166 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + +*/ + +/* + + Dim element on hover by adding the dim class. + +*/ +.dim { + opacity: 1; + transition: opacity .15s ease-in; +} +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity .15s ease-in; +} +.dim:active { + opacity: .8; transition: opacity .15s ease-out; +} + +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ +.glow { + transition: opacity .15s ease-in; +} +.glow:hover, +.glow:focus { + opacity: 1; + transition: opacity .15s ease-in; +} + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ + +.hide-child .child { + opacity: 0; + transition: opacity .15s ease-in; +} +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: opacity .15s ease-in; +} + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ + +.grow { + -moz-osx-font-smoothing: grayscale; + backface-visibility: hidden; + transform: translateZ(0); + transition: transform 0.25s ease-out; +} + +.grow:hover, +.grow:focus { + transform: scale(1.05); +} + +.grow:active { + transform: scale(.90); +} + +.grow-large { + -moz-osx-font-smoothing: grayscale; + backface-visibility: hidden; + transform: translateZ(0); + transition: transform .25s ease-in-out; +} + +.grow-large:hover, +.grow-large:focus { + transform: scale(1.2); +} + +.grow-large:active { + transform: scale(.95); +} + +/* Add pointer on hover */ + +.pointer:hover { + cursor: pointer; +} + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ + +.shadow-hover { + cursor: pointer; + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover::after { + content: ''; + box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; +} + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ + +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; +} diff --git a/themes/hugo-apero/assets/scss/_images.scss b/themes/hugo-apero/assets/scss/_images.scss new file mode 100644 index 0000000..8804f1a --- /dev/null +++ b/themes/hugo-apero/assets/scss/_images.scss @@ -0,0 +1,18 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ + +/* Responsive images! */ + +img { max-width: 100%; } + diff --git a/themes/hugo-apero/assets/scss/_letter-spacing.scss b/themes/hugo-apero/assets/scss/_letter-spacing.scss new file mode 100644 index 0000000..fb99b96 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_letter-spacing.scss @@ -0,0 +1,40 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tracked { letter-spacing: $letter-spacing-1; } +.tracked-tight { letter-spacing: $letter-spacing-tight; } +.tracked-mega { letter-spacing: $letter-spacing-2; } + +@media #{$breakpoint-not-small} { + .tracked-ns { letter-spacing: $letter-spacing-1; } + .tracked-tight-ns { letter-spacing: $letter-spacing-tight; } + .tracked-mega-ns { letter-spacing: $letter-spacing-2; } +} + +@media #{$breakpoint-medium} { + .tracked-m { letter-spacing: $letter-spacing-1; } + .tracked-tight-m { letter-spacing: $letter-spacing-tight; } + .tracked-mega-m { letter-spacing: $letter-spacing-2; } +} + +@media #{$breakpoint-large} { + .tracked-l { letter-spacing: $letter-spacing-1; } + .tracked-tight-l { letter-spacing: $letter-spacing-tight; } + .tracked-mega-l { letter-spacing: $letter-spacing-2; } +} diff --git a/themes/hugo-apero/assets/scss/_line-height.scss b/themes/hugo-apero/assets/scss/_line-height.scss new file mode 100644 index 0000000..5fd9c02 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_line-height.scss @@ -0,0 +1,41 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + .lh-solid { line-height: $line-height-solid; } + .lh-title { line-height: $line-height-title; } + .lh-copy { line-height: $line-height-copy; } + +@media #{$breakpoint-not-small} { + .lh-solid-ns { line-height: $line-height-solid; } + .lh-title-ns { line-height: $line-height-title; } + .lh-copy-ns { line-height: $line-height-copy; } +} + +@media #{$breakpoint-medium} { + .lh-solid-m { line-height: $line-height-solid; } + .lh-title-m { line-height: $line-height-title; } + .lh-copy-m { line-height: $line-height-copy; } +} + +@media #{$breakpoint-large} { + .lh-solid-l { line-height: $line-height-solid; } + .lh-title-l { line-height: $line-height-title; } + .lh-copy-l { line-height: $line-height-copy; } +} + diff --git a/themes/hugo-apero/assets/scss/_links.scss b/themes/hugo-apero/assets/scss/_links.scss new file mode 100644 index 0000000..19d674b --- /dev/null +++ b/themes/hugo-apero/assets/scss/_links.scss @@ -0,0 +1,34 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ + +.link { + text-decoration: none; + transition: color .15s ease-in; +} + +.link:link, +.link:visited { + transition: color .15s ease-in; +} +.link:hover { + transition: color .15s ease-in; +} +.link:active { + transition: color .15s ease-in; +} +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} + diff --git a/themes/hugo-apero/assets/scss/_lists.scss b/themes/hugo-apero/assets/scss/_lists.scss new file mode 100644 index 0000000..6d89d15 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_lists.scss @@ -0,0 +1,15 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + +*/ + +.list { list-style-type: none; } diff --git a/themes/hugo-apero/assets/scss/_max-widths.scss b/themes/hugo-apero/assets/scss/_max-widths.scss new file mode 100644 index 0000000..7b7f91d --- /dev/null +++ b/themes/hugo-apero/assets/scss/_max-widths.scss @@ -0,0 +1,105 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Max Width Percentages */ + +.mw-100 { max-width: 100%; } + +/* Max Width Scale */ + +.mw1 { max-width: $max-width-1; } +.mw2 { max-width: $max-width-2; } +.mw3 { max-width: $max-width-3; } +.mw4 { max-width: $max-width-4; } +.mw5 { max-width: $max-width-5; } +.mw6 { max-width: $max-width-6; } +.mw7 { max-width: $max-width-7; } +.mw8 { max-width: $max-width-8; } +.mw9 { max-width: $max-width-9; } + +/* Max Width String Properties */ + +.mw-none { max-width: none; } + +@media #{$breakpoint-not-small} { + .mw-100-ns { max-width: 100%; } + + .mw1-ns { max-width: $max-width-1; } + .mw2-ns { max-width: $max-width-2; } + .mw3-ns { max-width: $max-width-3; } + .mw4-ns { max-width: $max-width-4; } + .mw5-ns { max-width: $max-width-5; } + .mw6-ns { max-width: $max-width-6; } + .mw7-ns { max-width: $max-width-7; } + .mw8-ns { max-width: $max-width-8; } + .mw9-ns { max-width: $max-width-9; } + + .mw-none-ns { max-width: none; } +} + +@media #{$breakpoint-medium} { + .mw-100-m { max-width: 100%; } + + .mw1-m { max-width: $max-width-1; } + .mw2-m { max-width: $max-width-2; } + .mw3-m { max-width: $max-width-3; } + .mw4-m { max-width: $max-width-4; } + .mw5-m { max-width: $max-width-5; } + .mw6-m { max-width: $max-width-6; } + .mw7-m { max-width: $max-width-7; } + .mw8-m { max-width: $max-width-8; } + .mw9-m { max-width: $max-width-9; } + + .mw-none-m { max-width: none; } +} + +@media #{$breakpoint-large} { + .mw-100-l { max-width: 100%; } + + .mw1-l { max-width: $max-width-1; } + .mw2-l { max-width: $max-width-2; } + .mw3-l { max-width: $max-width-3; } + .mw4-l { max-width: $max-width-4; } + .mw5-l { max-width: $max-width-5; } + .mw6-l { max-width: $max-width-6; } + .mw7-l { max-width: $max-width-7; } + .mw8-l { max-width: $max-width-8; } + .mw9-l { max-width: $max-width-9; } + + .mw-none-l { max-width: none; } +} diff --git a/themes/hugo-apero/assets/scss/_module-template.scss b/themes/hugo-apero/assets/scss/_module-template.scss new file mode 100644 index 0000000..4523d44 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_module-template.scss @@ -0,0 +1,29 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + MODULE NAME + + Use this scaffolding to create or extend your own modules with tachyons + style architecture. + +*/ + + +@media #{$breakpoint-not-small} { + +} + +@media #{$breakpoint-medium} { + +} + +@media #{$breakpoint-large} { + +} + diff --git a/themes/hugo-apero/assets/scss/_negative-margins.scss b/themes/hugo-apero/assets/scss/_negative-margins.scss new file mode 100644 index 0000000..225edb0 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_negative-margins.scss @@ -0,0 +1,205 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + + +.na1 { margin: -$spacing-extra-small; } +.na2 { margin: -$spacing-small; } +.na3 { margin: -$spacing-medium; } +.na4 { margin: -$spacing-large; } +.na5 { margin: -$spacing-extra-large; } +.na6 { margin: -$spacing-extra-extra-large; } +.na7 { margin: -$spacing-extra-extra-extra-large; } + +.nl1 { margin-left: -$spacing-extra-small; } +.nl2 { margin-left: -$spacing-small; } +.nl3 { margin-left: -$spacing-medium; } +.nl4 { margin-left: -$spacing-large; } +.nl5 { margin-left: -$spacing-extra-large; } +.nl6 { margin-left: -$spacing-extra-extra-large; } +.nl7 { margin-left: -$spacing-extra-extra-extra-large; } + +.nr1 { margin-right: -$spacing-extra-small; } +.nr2 { margin-right: -$spacing-small; } +.nr3 { margin-right: -$spacing-medium; } +.nr4 { margin-right: -$spacing-large; } +.nr5 { margin-right: -$spacing-extra-large; } +.nr6 { margin-right: -$spacing-extra-extra-large; } +.nr7 { margin-right: -$spacing-extra-extra-extra-large; } + +.nb1 { margin-bottom: -$spacing-extra-small; } +.nb2 { margin-bottom: -$spacing-small; } +.nb3 { margin-bottom: -$spacing-medium; } +.nb4 { margin-bottom: -$spacing-large; } +.nb5 { margin-bottom: -$spacing-extra-large; } +.nb6 { margin-bottom: -$spacing-extra-extra-large; } +.nb7 { margin-bottom: -$spacing-extra-extra-extra-large; } + +.nt1 { margin-top: -$spacing-extra-small; } +.nt2 { margin-top: -$spacing-small; } +.nt3 { margin-top: -$spacing-medium; } +.nt4 { margin-top: -$spacing-large; } +.nt5 { margin-top: -$spacing-extra-large; } +.nt6 { margin-top: -$spacing-extra-extra-large; } +.nt7 { margin-top: -$spacing-extra-extra-extra-large; } + +@media #{$breakpoint-not-small} { + + .na1-ns { margin: -$spacing-extra-small; } + .na2-ns { margin: -$spacing-small; } + .na3-ns { margin: -$spacing-medium; } + .na4-ns { margin: -$spacing-large; } + .na5-ns { margin: -$spacing-extra-large; } + .na6-ns { margin: -$spacing-extra-extra-large; } + .na7-ns { margin: -$spacing-extra-extra-extra-large; } + + .nl1-ns { margin-left: -$spacing-extra-small; } + .nl2-ns { margin-left: -$spacing-small; } + .nl3-ns { margin-left: -$spacing-medium; } + .nl4-ns { margin-left: -$spacing-large; } + .nl5-ns { margin-left: -$spacing-extra-large; } + .nl6-ns { margin-left: -$spacing-extra-extra-large; } + .nl7-ns { margin-left: -$spacing-extra-extra-extra-large; } + + .nr1-ns { margin-right: -$spacing-extra-small; } + .nr2-ns { margin-right: -$spacing-small; } + .nr3-ns { margin-right: -$spacing-medium; } + .nr4-ns { margin-right: -$spacing-large; } + .nr5-ns { margin-right: -$spacing-extra-large; } + .nr6-ns { margin-right: -$spacing-extra-extra-large; } + .nr7-ns { margin-right: -$spacing-extra-extra-extra-large; } + + .nb1-ns { margin-bottom: -$spacing-extra-small; } + .nb2-ns { margin-bottom: -$spacing-small; } + .nb3-ns { margin-bottom: -$spacing-medium; } + .nb4-ns { margin-bottom: -$spacing-large; } + .nb5-ns { margin-bottom: -$spacing-extra-large; } + .nb6-ns { margin-bottom: -$spacing-extra-extra-large; } + .nb7-ns { margin-bottom: -$spacing-extra-extra-extra-large; } + + .nt1-ns { margin-top: -$spacing-extra-small; } + .nt2-ns { margin-top: -$spacing-small; } + .nt3-ns { margin-top: -$spacing-medium; } + .nt4-ns { margin-top: -$spacing-large; } + .nt5-ns { margin-top: -$spacing-extra-large; } + .nt6-ns { margin-top: -$spacing-extra-extra-large; } + .nt7-ns { margin-top: -$spacing-extra-extra-extra-large; } + +} + +@media #{$breakpoint-medium} { + .na1-m { margin: -$spacing-extra-small; } + .na2-m { margin: -$spacing-small; } + .na3-m { margin: -$spacing-medium; } + .na4-m { margin: -$spacing-large; } + .na5-m { margin: -$spacing-extra-large; } + .na6-m { margin: -$spacing-extra-extra-large; } + .na7-m { margin: -$spacing-extra-extra-extra-large; } + + .nl1-m { margin-left: -$spacing-extra-small; } + .nl2-m { margin-left: -$spacing-small; } + .nl3-m { margin-left: -$spacing-medium; } + .nl4-m { margin-left: -$spacing-large; } + .nl5-m { margin-left: -$spacing-extra-large; } + .nl6-m { margin-left: -$spacing-extra-extra-large; } + .nl7-m { margin-left: -$spacing-extra-extra-extra-large; } + + .nr1-m { margin-right: -$spacing-extra-small; } + .nr2-m { margin-right: -$spacing-small; } + .nr3-m { margin-right: -$spacing-medium; } + .nr4-m { margin-right: -$spacing-large; } + .nr5-m { margin-right: -$spacing-extra-large; } + .nr6-m { margin-right: -$spacing-extra-extra-large; } + .nr7-m { margin-right: -$spacing-extra-extra-extra-large; } + + .nb1-m { margin-bottom: -$spacing-extra-small; } + .nb2-m { margin-bottom: -$spacing-small; } + .nb3-m { margin-bottom: -$spacing-medium; } + .nb4-m { margin-bottom: -$spacing-large; } + .nb5-m { margin-bottom: -$spacing-extra-large; } + .nb6-m { margin-bottom: -$spacing-extra-extra-large; } + .nb7-m { margin-bottom: -$spacing-extra-extra-extra-large; } + + .nt1-m { margin-top: -$spacing-extra-small; } + .nt2-m { margin-top: -$spacing-small; } + .nt3-m { margin-top: -$spacing-medium; } + .nt4-m { margin-top: -$spacing-large; } + .nt5-m { margin-top: -$spacing-extra-large; } + .nt6-m { margin-top: -$spacing-extra-extra-large; } + .nt7-m { margin-top: -$spacing-extra-extra-extra-large; } + +} + +@media #{$breakpoint-large} { + .na1-l { margin: -$spacing-extra-small; } + .na2-l { margin: -$spacing-small; } + .na3-l { margin: -$spacing-medium; } + .na4-l { margin: -$spacing-large; } + .na5-l { margin: -$spacing-extra-large; } + .na6-l { margin: -$spacing-extra-extra-large; } + .na7-l { margin: -$spacing-extra-extra-extra-large; } + + .nl1-l { margin-left: -$spacing-extra-small; } + .nl2-l { margin-left: -$spacing-small; } + .nl3-l { margin-left: -$spacing-medium; } + .nl4-l { margin-left: -$spacing-large; } + .nl5-l { margin-left: -$spacing-extra-large; } + .nl6-l { margin-left: -$spacing-extra-extra-large; } + .nl7-l { margin-left: -$spacing-extra-extra-extra-large; } + + .nr1-l { margin-right: -$spacing-extra-small; } + .nr2-l { margin-right: -$spacing-small; } + .nr3-l { margin-right: -$spacing-medium; } + .nr4-l { margin-right: -$spacing-large; } + .nr5-l { margin-right: -$spacing-extra-large; } + .nr6-l { margin-right: -$spacing-extra-extra-large; } + .nr7-l { margin-right: -$spacing-extra-extra-extra-large; } + + .nb1-l { margin-bottom: -$spacing-extra-small; } + .nb2-l { margin-bottom: -$spacing-small; } + .nb3-l { margin-bottom: -$spacing-medium; } + .nb4-l { margin-bottom: -$spacing-large; } + .nb5-l { margin-bottom: -$spacing-extra-large; } + .nb6-l { margin-bottom: -$spacing-extra-extra-large; } + .nb7-l { margin-bottom: -$spacing-extra-extra-extra-large; } + + .nt1-l { margin-top: -$spacing-extra-small; } + .nt2-l { margin-top: -$spacing-small; } + .nt3-l { margin-top: -$spacing-medium; } + .nt4-l { margin-top: -$spacing-large; } + .nt5-l { margin-top: -$spacing-extra-large; } + .nt6-l { margin-top: -$spacing-extra-extra-large; } + .nt7-l { margin-top: -$spacing-extra-extra-extra-large; } +} diff --git a/themes/hugo-apero/assets/scss/_nested.scss b/themes/hugo-apero/assets/scss/_nested.scss new file mode 100644 index 0000000..98db8a3 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_nested.scss @@ -0,0 +1,63 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ + +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: $line-height-copy; +} + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: $line-height-title; +} + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} + +.nested-copy-indent p+p { + text-indent: $letter-spacing-1; + margin-top: $spacing-none; + margin-bottom: $spacing-none; +} + +.nested-copy-seperator p+p { + margin-top: $spacing-copy-separator; +} + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} + +.nested-links a { + color: $blue; + transition: color .15s ease-in; +} + +.nested-links a:hover, +.nested-links a:focus { + color: $light-blue; + transition: color .15s ease-in; +} diff --git a/themes/hugo-apero/assets/scss/_normalize.scss b/themes/hugo-apero/assets/scss/_normalize.scss new file mode 100644 index 0000000..9808c4d --- /dev/null +++ b/themes/hugo-apero/assets/scss/_normalize.scss @@ -0,0 +1,454 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/themes/hugo-apero/assets/scss/_opacity.scss b/themes/hugo-apero/assets/scss/_opacity.scss new file mode 100644 index 0000000..1ab659c --- /dev/null +++ b/themes/hugo-apero/assets/scss/_opacity.scss @@ -0,0 +1,27 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ + +.o-100 { opacity: 1; } +.o-90 { opacity: .9; } +.o-80 { opacity: .8; } +.o-70 { opacity: .7; } +.o-60 { opacity: .6; } +.o-50 { opacity: .5; } +.o-40 { opacity: .4; } +.o-30 { opacity: .3; } +.o-20 { opacity: .2; } +.o-10 { opacity: .1; } +.o-05 { opacity: .05; } +.o-025 { opacity: .025; } +.o-0 { opacity: 0; } diff --git a/themes/hugo-apero/assets/scss/_outlines.scss b/themes/hugo-apero/assets/scss/_outlines.scss new file mode 100644 index 0000000..291fb91 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_outlines.scss @@ -0,0 +1,39 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.outline { outline: 1px solid; } +.outline-transparent { outline: 1px solid transparent; } +.outline-0 { outline: 0; } + +@media #{$breakpoint-not-small} { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } +} + +@media #{$breakpoint-medium} { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } +} + +@media #{$breakpoint-large} { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } +} diff --git a/themes/hugo-apero/assets/scss/_overflow.scss b/themes/hugo-apero/assets/scss/_overflow.scss new file mode 100644 index 0000000..78da66e --- /dev/null +++ b/themes/hugo-apero/assets/scss/_overflow.scss @@ -0,0 +1,82 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.overflow-visible { overflow: visible; } +.overflow-hidden { overflow: hidden; } +.overflow-scroll { overflow: scroll; } +.overflow-auto { overflow: auto; } + +.overflow-x-visible { overflow-x: visible; } +.overflow-x-hidden { overflow-x: hidden; } +.overflow-x-scroll { overflow-x: scroll; } +.overflow-x-auto { overflow-x: auto; } + +.overflow-y-visible { overflow-y: visible; } +.overflow-y-hidden { overflow-y: hidden; } +.overflow-y-scroll { overflow-y: scroll; } +.overflow-y-auto { overflow-y: auto; } + +@media #{$breakpoint-not-small} { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} + +@media #{$breakpoint-medium} { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} + +@media #{$breakpoint-large} { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } +} diff --git a/themes/hugo-apero/assets/scss/_position.scss b/themes/hugo-apero/assets/scss/_position.scss new file mode 100644 index 0000000..c41810c --- /dev/null +++ b/themes/hugo-apero/assets/scss/_position.scss @@ -0,0 +1,44 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.static { position: static; } +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } + +@media #{$breakpoint-not-small} { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } +} + +@media #{$breakpoint-medium} { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } +} + +@media #{$breakpoint-large} { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } +} diff --git a/themes/hugo-apero/assets/scss/_rotations.scss b/themes/hugo-apero/assets/scss/_rotations.scss new file mode 100644 index 0000000..acdfbdb --- /dev/null +++ b/themes/hugo-apero/assets/scss/_rotations.scss @@ -0,0 +1,50 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + ROTATIONS + +*/ + +.rotate-45 { transform: rotate(45deg); } +.rotate-90 { transform: rotate(90deg); } +.rotate-135 { transform: rotate(135deg); } +.rotate-180 { transform: rotate(180deg); } +.rotate-225 { transform: rotate(225deg); } +.rotate-270 { transform: rotate(270deg); } +.rotate-315 { transform: rotate(315deg); } + +@media #{$breakpoint-not-small}{ + .rotate-45-ns { transform: rotate(45deg); } + .rotate-90-ns { transform: rotate(90deg); } + .rotate-135-ns { transform: rotate(135deg); } + .rotate-180-ns { transform: rotate(180deg); } + .rotate-225-ns { transform: rotate(225deg); } + .rotate-270-ns { transform: rotate(270deg); } + .rotate-315-ns { transform: rotate(315deg); } +} + +@media #{$breakpoint-medium}{ + .rotate-45-m { transform: rotate(45deg); } + .rotate-90-m { transform: rotate(90deg); } + .rotate-135-m { transform: rotate(135deg); } + .rotate-180-m { transform: rotate(180deg); } + .rotate-225-m { transform: rotate(225deg); } + .rotate-270-m { transform: rotate(270deg); } + .rotate-315-m { transform: rotate(315deg); } +} + +@media #{$breakpoint-large}{ + .rotate-45-l { transform: rotate(45deg); } + .rotate-90-l { transform: rotate(90deg); } + .rotate-135-l { transform: rotate(135deg); } + .rotate-180-l { transform: rotate(180deg); } + .rotate-225-l { transform: rotate(225deg); } + .rotate-270-l { transform: rotate(270deg); } + .rotate-315-l { transform: rotate(315deg); } +} diff --git a/themes/hugo-apero/assets/scss/_skins-pseudo.scss b/themes/hugo-apero/assets/scss/_skins-pseudo.scss new file mode 100644 index 0000000..13beb71 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_skins-pseudo.scss @@ -0,0 +1,243 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ + +.hover-black:hover, +.hover-black:focus { color: $black; } +.hover-near-black:hover, +.hover-near-black:focus { color: $near-black; } +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: $dark-gray; } +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: $mid-gray; } +.hover-gray:hover, +.hover-gray:focus { color: $gray; } +.hover-silver:hover, +.hover-silver:focus { color: $silver; } +.hover-light-silver:hover, +.hover-light-silver:focus { color: $light-silver; } +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: $moon-gray; } +.hover-light-gray:hover, +.hover-light-gray:focus { color: $light-gray; } +.hover-near-white:hover, +.hover-near-white:focus { color: $near-white; } +.hover-white:hover, +.hover-white:focus { color: $white; } + +.hover-black-90:hover, +.hover-black-90:focus { color: $black-90; } +.hover-black-80:hover, +.hover-black-80:focus { color: $black-80; } +.hover-black-70:hover, +.hover-black-70:focus { color: $black-70; } +.hover-black-60:hover, +.hover-black-60:focus { color: $black-60; } +.hover-black-50:hover, +.hover-black-50:focus { color: $black-50; } +.hover-black-40:hover, +.hover-black-40:focus { color: $black-40; } +.hover-black-30:hover, +.hover-black-30:focus { color: $black-30; } +.hover-black-20:hover, +.hover-black-20:focus { color: $black-20; } +.hover-black-10:hover, +.hover-black-10:focus { color: $black-10; } +.hover-white-90:hover, +.hover-white-90:focus { color: $white-90; } +.hover-white-80:hover, +.hover-white-80:focus { color: $white-80; } +.hover-white-70:hover, +.hover-white-70:focus { color: $white-70; } +.hover-white-60:hover, +.hover-white-60:focus { color: $white-60; } +.hover-white-50:hover, +.hover-white-50:focus { color: $white-50; } +.hover-white-40:hover, +.hover-white-40:focus { color: $white-40; } +.hover-white-30:hover, +.hover-white-30:focus { color: $white-30; } +.hover-white-20:hover, +.hover-white-20:focus { color: $white-20; } +.hover-white-10:hover, +.hover-white-10:focus { color: $white-10; } +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } + +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: $black; } +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: $near-black; } +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: $dark-gray; } +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: $mid-gray; } +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: $gray; } +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: $silver; } +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: $light-silver; } +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: $moon-gray; } +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: $light-gray; } +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: $near-white; } +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: $white; } +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: $transparent; } + +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: $black-90; } +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: $black-80; } +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: $black-70; } +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: $black-60; } +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: $black-50; } +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: $black-40; } +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: $black-30; } +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: $black-20; } +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: $black-10; } +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: $white-90; } +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: $white-80; } +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: $white-70; } +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: $white-60; } +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: $white-50; } +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: $white-40; } +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: $white-30; } +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: $white-20; } +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: $white-10; } + +.hover-dark-red:hover, +.hover-dark-red:focus { color: $dark-red; } +.hover-red:hover, +.hover-red:focus { color: $red; } +.hover-light-red:hover, +.hover-light-red:focus { color: $light-red; } +.hover-orange:hover, +.hover-orange:focus { color: $orange; } +.hover-gold:hover, +.hover-gold:focus { color: $gold; } +.hover-yellow:hover, +.hover-yellow:focus { color: $yellow; } +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: $light-yellow; } +.hover-purple:hover, +.hover-purple:focus { color: $purple; } +.hover-light-purple:hover, +.hover-light-purple:focus { color: $light-purple; } +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: $dark-pink; } +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: $hot-pink; } +.hover-pink:hover, +.hover-pink:focus { color: $pink; } +.hover-light-pink:hover, +.hover-light-pink:focus { color: $light-pink; } +.hover-dark-green:hover, +.hover-dark-green:focus { color: $dark-green; } +.hover-green:hover, +.hover-green:focus { color: $green; } +.hover-light-green:hover, +.hover-light-green:focus { color: $light-green; } +.hover-navy:hover, +.hover-navy:focus { color: $navy; } +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: $dark-blue; } +.hover-blue:hover, +.hover-blue:focus { color: $blue; } +.hover-light-blue:hover, +.hover-light-blue:focus { color: $light-blue; } +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: $lightest-blue; } +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: $washed-blue; } +.hover-washed-green:hover, +.hover-washed-green:focus { color: $washed-green; } +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: $washed-yellow; } +.hover-washed-red:hover, +.hover-washed-red:focus { color: $washed-red; } + +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: $dark-red; } +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: $red; } +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: $light-red; } +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: $orange; } +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: $gold; } +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: $yellow; } +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: $light-yellow; } +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: $purple; } +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: $light-purple; } +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: $dark-pink; } +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: $hot-pink; } +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: $pink; } +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: $light-pink; } +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: $dark-green; } +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: $green; } +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: $light-green; } +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: $navy; } +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: $dark-blue; } +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: $blue; } +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: $light-blue; } +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: $lightest-blue; } +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: $washed-blue; } +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: $washed-green; } +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: $washed-yellow; } +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: $washed-red; } +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { background-color: inherit; } diff --git a/themes/hugo-apero/assets/scss/_skins.scss b/themes/hugo-apero/assets/scss/_skins.scss new file mode 100644 index 0000000..4db2096 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_skins.scss @@ -0,0 +1,143 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + +*/ + +/* Text colors */ + +.black-90 { color: $black-90; } +.black-80 { color: $black-80; } +.black-70 { color: $black-70; } +.black-60 { color: $black-60; } +.black-50 { color: $black-50; } +.black-40 { color: $black-40; } +.black-30 { color: $black-30; } +.black-20 { color: $black-20; } +.black-10 { color: $black-10; } +.black-05 { color: $black-05; } + +.white-90 { color: $white-90; } +.white-80 { color: $white-80; } +.white-70 { color: $white-70; } +.white-60 { color: $white-60; } +.white-50 { color: $white-50; } +.white-40 { color: $white-40; } +.white-30 { color: $white-30; } +.white-20 { color: $white-20; } +.white-10 { color: $white-10; } + +.black { color: $black; } +.near-black { color: $near-black; } +.dark-gray { color: $dark-gray; } +.mid-gray { color: $mid-gray; } +.gray { color: $gray; } +.silver { color: $silver; } +.light-silver { color: $light-silver; } +.moon-gray { color: $moon-gray; } +.light-gray { color: $light-gray; } +.near-white { color: $near-white; } +.white { color: $white; } + +.dark-red { color: $dark-red; } +.red { color: $red; } +.light-red { color: $light-red; } +.orange { color: $orange; } +.gold { color: $gold; } +.yellow { color: $yellow; } +.light-yellow { color: $light-yellow; } +.purple { color: $purple; } +.light-purple { color: $light-purple; } +.dark-pink { color: $dark-pink; } +.hot-pink { color: $hot-pink; } +.pink { color: $pink; } +.light-pink { color: $light-pink; } +.dark-green { color: $dark-green; } +.green { color: $green; } +.light-green { color: $light-green; } +.navy { color: $navy; } +.dark-blue { color: $dark-blue; } +.blue { color: $blue; } +.light-blue { color: $light-blue; } +.lightest-blue { color: $lightest-blue; } +.washed-blue { color: $washed-blue; } +.washed-green { color: $washed-green; } +.washed-yellow { color: $washed-yellow; } +.washed-red { color: $washed-red; } +.color-inherit { color: inherit; } + +.bg-black-90 { background-color: $black-90; } +.bg-black-80 { background-color: $black-80; } +.bg-black-70 { background-color: $black-70; } +.bg-black-60 { background-color: $black-60; } +.bg-black-50 { background-color: $black-50; } +.bg-black-40 { background-color: $black-40; } +.bg-black-30 { background-color: $black-30; } +.bg-black-20 { background-color: $black-20; } +.bg-black-10 { background-color: $black-10; } +.bg-black-05 { background-color: $black-05; } +.bg-white-90 { background-color: $white-90; } +.bg-white-80 { background-color: $white-80; } +.bg-white-70 { background-color: $white-70; } +.bg-white-60 { background-color: $white-60; } +.bg-white-50 { background-color: $white-50; } +.bg-white-40 { background-color: $white-40; } +.bg-white-30 { background-color: $white-30; } +.bg-white-20 { background-color: $white-20; } +.bg-white-10 { background-color: $white-10; } + + + +/* Background colors */ + +.bg-black { background-color: $black; } +.bg-near-black { background-color: $near-black; } +.bg-dark-gray { background-color: $dark-gray; } +.bg-mid-gray { background-color: $mid-gray; } +.bg-gray { background-color: $gray; } +.bg-silver { background-color: $silver; } +.bg-light-silver { background-color: $light-silver; } +.bg-moon-gray { background-color: $moon-gray; } +.bg-light-gray { background-color: $light-gray; } +.bg-near-white { background-color: $near-white; } +.bg-white { background-color: $white; } +.bg-transparent { background-color: $transparent; } + +.bg-dark-red { background-color: $dark-red; } +.bg-red { background-color: $red; } +.bg-light-red { background-color: $light-red; } +.bg-orange { background-color: $orange; } +.bg-gold { background-color: $gold; } +.bg-yellow { background-color: $yellow; } +.bg-light-yellow { background-color: $light-yellow; } +.bg-purple { background-color: $purple; } +.bg-light-purple { background-color: $light-purple; } +.bg-dark-pink { background-color: $dark-pink; } +.bg-hot-pink { background-color: $hot-pink; } +.bg-pink { background-color: $pink; } +.bg-light-pink { background-color: $light-pink; } +.bg-dark-green { background-color: $dark-green; } +.bg-green { background-color: $green; } +.bg-light-green { background-color: $light-green; } +.bg-navy { background-color: $navy; } +.bg-dark-blue { background-color: $dark-blue; } +.bg-blue { background-color: $blue; } +.bg-light-blue { background-color: $light-blue; } +.bg-lightest-blue { background-color: $lightest-blue; } +.bg-washed-blue { background-color: $washed-blue; } +.bg-washed-green { background-color: $washed-green; } +.bg-washed-yellow { background-color: $washed-yellow; } +.bg-washed-red { background-color: $washed-red; } +.bg-inherit { background-color: inherit; } diff --git a/themes/hugo-apero/assets/scss/_spacing.scss b/themes/hugo-apero/assets/scss/_spacing.scss new file mode 100644 index 0000000..6fdadc1 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_spacing.scss @@ -0,0 +1,947 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* Variables */ + +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +.pa0 { padding: $spacing-none; } +.pa1 { padding: $spacing-extra-small; } +.pa2 { padding: $spacing-small; } +.pa3 { padding: $spacing-medium; } +.pa4 { padding: $spacing-large; } +.pa5 { padding: $spacing-extra-large; } +.pa6 { padding: $spacing-extra-extra-large; } +.pa7 { padding: $spacing-extra-extra-extra-large; } + +.pl0 { padding-left: $spacing-none; } +.pl1 { padding-left: $spacing-extra-small; } +.pl2 { padding-left: $spacing-small; } +.pl3 { padding-left: $spacing-medium; } +.pl4 { padding-left: $spacing-large; } +.pl5 { padding-left: $spacing-extra-large; } +.pl6 { padding-left: $spacing-extra-extra-large; } +.pl7 { padding-left: $spacing-extra-extra-extra-large; } + +.pr0 { padding-right: $spacing-none; } +.pr1 { padding-right: $spacing-extra-small; } +.pr2 { padding-right: $spacing-small; } +.pr3 { padding-right: $spacing-medium; } +.pr4 { padding-right: $spacing-large; } +.pr5 { padding-right: $spacing-extra-large; } +.pr6 { padding-right: $spacing-extra-extra-large; } +.pr7 { padding-right: $spacing-extra-extra-extra-large; } + +.pb0 { padding-bottom: $spacing-none; } +.pb1 { padding-bottom: $spacing-extra-small; } +.pb2 { padding-bottom: $spacing-small; } +.pb3 { padding-bottom: $spacing-medium; } +.pb4 { padding-bottom: $spacing-large; } +.pb5 { padding-bottom: $spacing-extra-large; } +.pb6 { padding-bottom: $spacing-extra-extra-large; } +.pb7 { padding-bottom: $spacing-extra-extra-extra-large; } + +.pt0 { padding-top: $spacing-none; } +.pt1 { padding-top: $spacing-extra-small; } +.pt2 { padding-top: $spacing-small; } +.pt3 { padding-top: $spacing-medium; } +.pt4 { padding-top: $spacing-large; } +.pt5 { padding-top: $spacing-extra-large; } +.pt6 { padding-top: $spacing-extra-extra-large; } +.pt7 { padding-top: $spacing-extra-extra-extra-large; } + +.pv0 { + padding-top: $spacing-none; + padding-bottom: $spacing-none; +} +.pv1 { + padding-top: $spacing-extra-small; + padding-bottom: $spacing-extra-small; +} +.pv2 { + padding-top: $spacing-small; + padding-bottom: $spacing-small; +} +.pv3 { + padding-top: $spacing-medium; + padding-bottom: $spacing-medium; +} +.pv4 { + padding-top: $spacing-large; + padding-bottom: $spacing-large; +} +.pv5 { + padding-top: $spacing-extra-large; + padding-bottom: $spacing-extra-large; +} +.pv6 { + padding-top: $spacing-extra-extra-large; + padding-bottom: $spacing-extra-extra-large; +} + +.pv7 { + padding-top: $spacing-extra-extra-extra-large; + padding-bottom: $spacing-extra-extra-extra-large; +} + +.ph0 { + padding-left: $spacing-none; + padding-right: $spacing-none; +} + +.ph1 { + padding-left: $spacing-extra-small; + padding-right: $spacing-extra-small; +} + +.ph2 { + padding-left: $spacing-small; + padding-right: $spacing-small; +} + +.ph3 { + padding-left: $spacing-medium; + padding-right: $spacing-medium; +} + +.ph4 { + padding-left: $spacing-large; + padding-right: $spacing-large; +} + +.ph5 { + padding-left: $spacing-extra-large; + padding-right: $spacing-extra-large; +} + +.ph6 { + padding-left: $spacing-extra-extra-large; + padding-right: $spacing-extra-extra-large; +} + +.ph7 { + padding-left: $spacing-extra-extra-extra-large; + padding-right: $spacing-extra-extra-extra-large; +} + +.ma0 { margin: $spacing-none; } +.ma1 { margin: $spacing-extra-small; } +.ma2 { margin: $spacing-small; } +.ma3 { margin: $spacing-medium; } +.ma4 { margin: $spacing-large; } +.ma5 { margin: $spacing-extra-large; } +.ma6 { margin: $spacing-extra-extra-large; } +.ma7 { margin: $spacing-extra-extra-extra-large; } + +.ml0 { margin-left: $spacing-none; } +.ml1 { margin-left: $spacing-extra-small; } +.ml2 { margin-left: $spacing-small; } +.ml3 { margin-left: $spacing-medium; } +.ml4 { margin-left: $spacing-large; } +.ml5 { margin-left: $spacing-extra-large; } +.ml6 { margin-left: $spacing-extra-extra-large; } +.ml7 { margin-left: $spacing-extra-extra-extra-large; } + +.mr0 { margin-right: $spacing-none; } +.mr1 { margin-right: $spacing-extra-small; } +.mr2 { margin-right: $spacing-small; } +.mr3 { margin-right: $spacing-medium; } +.mr4 { margin-right: $spacing-large; } +.mr5 { margin-right: $spacing-extra-large; } +.mr6 { margin-right: $spacing-extra-extra-large; } +.mr7 { margin-right: $spacing-extra-extra-extra-large; } + +.mb0 { margin-bottom: $spacing-none; } +.mb1 { margin-bottom: $spacing-extra-small; } +.mb2 { margin-bottom: $spacing-small; } +.mb3 { margin-bottom: $spacing-medium; } +.mb4 { margin-bottom: $spacing-large; } +.mb5 { margin-bottom: $spacing-extra-large; } +.mb6 { margin-bottom: $spacing-extra-extra-large; } +.mb7 { margin-bottom: $spacing-extra-extra-extra-large; } + +.mt0 { margin-top: $spacing-none; } +.mt1 { margin-top: $spacing-extra-small; } +.mt2 { margin-top: $spacing-small; } +.mt3 { margin-top: $spacing-medium; } +.mt4 { margin-top: $spacing-large; } +.mt5 { margin-top: $spacing-extra-large; } +.mt6 { margin-top: $spacing-extra-extra-large; } +.mt7 { margin-top: $spacing-extra-extra-extra-large; } + +.mv0 { + margin-top: $spacing-none; + margin-bottom: $spacing-none; +} +.mv1 { + margin-top: $spacing-extra-small; + margin-bottom: $spacing-extra-small; +} +.mv2 { + margin-top: $spacing-small; + margin-bottom: $spacing-small; +} +.mv3 { + margin-top: $spacing-medium; + margin-bottom: $spacing-medium; +} +.mv4 { + margin-top: $spacing-large; + margin-bottom: $spacing-large; +} +.mv5 { + margin-top: $spacing-extra-large; + margin-bottom: $spacing-extra-large; +} +.mv6 { + margin-top: $spacing-extra-extra-large; + margin-bottom: $spacing-extra-extra-large; +} +.mv7 { + margin-top: $spacing-extra-extra-extra-large; + margin-bottom: $spacing-extra-extra-extra-large; +} + +.mh0 { + margin-left: $spacing-none; + margin-right: $spacing-none; +} +.mh1 { + margin-left: $spacing-extra-small; + margin-right: $spacing-extra-small; +} +.mh2 { + margin-left: $spacing-small; + margin-right: $spacing-small; +} +.mh3 { + margin-left: $spacing-medium; + margin-right: $spacing-medium; +} +.mh4 { + margin-left: $spacing-large; + margin-right: $spacing-large; +} +.mh5 { + margin-left: $spacing-extra-large; + margin-right: $spacing-extra-large; +} +.mh6 { + margin-left: $spacing-extra-extra-large; + margin-right: $spacing-extra-extra-large; +} +.mh7 { + margin-left: $spacing-extra-extra-extra-large; + margin-right: $spacing-extra-extra-extra-large; +} + +@media #{$breakpoint-not-small} { + .pa0-ns { padding: $spacing-none; } + .pa1-ns { padding: $spacing-extra-small; } + .pa2-ns { padding: $spacing-small; } + .pa3-ns { padding: $spacing-medium; } + .pa4-ns { padding: $spacing-large; } + .pa5-ns { padding: $spacing-extra-large; } + .pa6-ns { padding: $spacing-extra-extra-large; } + .pa7-ns { padding: $spacing-extra-extra-extra-large; } + + .pl0-ns { padding-left: $spacing-none; } + .pl1-ns { padding-left: $spacing-extra-small; } + .pl2-ns { padding-left: $spacing-small; } + .pl3-ns { padding-left: $spacing-medium; } + .pl4-ns { padding-left: $spacing-large; } + .pl5-ns { padding-left: $spacing-extra-large; } + .pl6-ns { padding-left: $spacing-extra-extra-large; } + .pl7-ns { padding-left: $spacing-extra-extra-extra-large; } + + .pr0-ns { padding-right: $spacing-none; } + .pr1-ns { padding-right: $spacing-extra-small; } + .pr2-ns { padding-right: $spacing-small; } + .pr3-ns { padding-right: $spacing-medium; } + .pr4-ns { padding-right: $spacing-large; } + .pr5-ns { padding-right: $spacing-extra-large; } + .pr6-ns { padding-right: $spacing-extra-extra-large; } + .pr7-ns { padding-right: $spacing-extra-extra-extra-large; } + + .pb0-ns { padding-bottom: $spacing-none; } + .pb1-ns { padding-bottom: $spacing-extra-small; } + .pb2-ns { padding-bottom: $spacing-small; } + .pb3-ns { padding-bottom: $spacing-medium; } + .pb4-ns { padding-bottom: $spacing-large; } + .pb5-ns { padding-bottom: $spacing-extra-large; } + .pb6-ns { padding-bottom: $spacing-extra-extra-large; } + .pb7-ns { padding-bottom: $spacing-extra-extra-extra-large; } + + .pt0-ns { padding-top: $spacing-none; } + .pt1-ns { padding-top: $spacing-extra-small; } + .pt2-ns { padding-top: $spacing-small; } + .pt3-ns { padding-top: $spacing-medium; } + .pt4-ns { padding-top: $spacing-large; } + .pt5-ns { padding-top: $spacing-extra-large; } + .pt6-ns { padding-top: $spacing-extra-extra-large; } + .pt7-ns { padding-top: $spacing-extra-extra-extra-large; } + + .pv0-ns { + padding-top: $spacing-none; + padding-bottom: $spacing-none; + } + .pv1-ns { + padding-top: $spacing-extra-small; + padding-bottom: $spacing-extra-small; + } + .pv2-ns { + padding-top: $spacing-small; + padding-bottom: $spacing-small; + } + .pv3-ns { + padding-top: $spacing-medium; + padding-bottom: $spacing-medium; + } + .pv4-ns { + padding-top: $spacing-large; + padding-bottom: $spacing-large; + } + .pv5-ns { + padding-top: $spacing-extra-large; + padding-bottom: $spacing-extra-large; + } + .pv6-ns { + padding-top: $spacing-extra-extra-large; + padding-bottom: $spacing-extra-extra-large; + } + .pv7-ns { + padding-top: $spacing-extra-extra-extra-large; + padding-bottom: $spacing-extra-extra-extra-large; + } + .ph0-ns { + padding-left: $spacing-none; + padding-right: $spacing-none; + } + .ph1-ns { + padding-left: $spacing-extra-small; + padding-right: $spacing-extra-small; + } + .ph2-ns { + padding-left: $spacing-small; + padding-right: $spacing-small; + } + .ph3-ns { + padding-left: $spacing-medium; + padding-right: $spacing-medium; + } + .ph4-ns { + padding-left: $spacing-large; + padding-right: $spacing-large; + } + .ph5-ns { + padding-left: $spacing-extra-large; + padding-right: $spacing-extra-large; + } + .ph6-ns { + padding-left: $spacing-extra-extra-large; + padding-right: $spacing-extra-extra-large; + } + .ph7-ns { + padding-left: $spacing-extra-extra-extra-large; + padding-right: $spacing-extra-extra-extra-large; + } + + .ma0-ns { margin: $spacing-none; } + .ma1-ns { margin: $spacing-extra-small; } + .ma2-ns { margin: $spacing-small; } + .ma3-ns { margin: $spacing-medium; } + .ma4-ns { margin: $spacing-large; } + .ma5-ns { margin: $spacing-extra-large; } + .ma6-ns { margin: $spacing-extra-extra-large; } + .ma7-ns { margin: $spacing-extra-extra-extra-large; } + + .ml0-ns { margin-left: $spacing-none; } + .ml1-ns { margin-left: $spacing-extra-small; } + .ml2-ns { margin-left: $spacing-small; } + .ml3-ns { margin-left: $spacing-medium; } + .ml4-ns { margin-left: $spacing-large; } + .ml5-ns { margin-left: $spacing-extra-large; } + .ml6-ns { margin-left: $spacing-extra-extra-large; } + .ml7-ns { margin-left: $spacing-extra-extra-extra-large; } + + .mr0-ns { margin-right: $spacing-none; } + .mr1-ns { margin-right: $spacing-extra-small; } + .mr2-ns { margin-right: $spacing-small; } + .mr3-ns { margin-right: $spacing-medium; } + .mr4-ns { margin-right: $spacing-large; } + .mr5-ns { margin-right: $spacing-extra-large; } + .mr6-ns { margin-right: $spacing-extra-extra-large; } + .mr7-ns { margin-right: $spacing-extra-extra-extra-large; } + + .mb0-ns { margin-bottom: $spacing-none; } + .mb1-ns { margin-bottom: $spacing-extra-small; } + .mb2-ns { margin-bottom: $spacing-small; } + .mb3-ns { margin-bottom: $spacing-medium; } + .mb4-ns { margin-bottom: $spacing-large; } + .mb5-ns { margin-bottom: $spacing-extra-large; } + .mb6-ns { margin-bottom: $spacing-extra-extra-large; } + .mb7-ns { margin-bottom: $spacing-extra-extra-extra-large; } + + .mt0-ns { margin-top: $spacing-none; } + .mt1-ns { margin-top: $spacing-extra-small; } + .mt2-ns { margin-top: $spacing-small; } + .mt3-ns { margin-top: $spacing-medium; } + .mt4-ns { margin-top: $spacing-large; } + .mt5-ns { margin-top: $spacing-extra-large; } + .mt6-ns { margin-top: $spacing-extra-extra-large; } + .mt7-ns { margin-top: $spacing-extra-extra-extra-large; } + + .mv0-ns { + margin-top: $spacing-none; + margin-bottom: $spacing-none; + } + .mv1-ns { + margin-top: $spacing-extra-small; + margin-bottom: $spacing-extra-small; + } + .mv2-ns { + margin-top: $spacing-small; + margin-bottom: $spacing-small; + } + .mv3-ns { + margin-top: $spacing-medium; + margin-bottom: $spacing-medium; + } + .mv4-ns { + margin-top: $spacing-large; + margin-bottom: $spacing-large; + } + .mv5-ns { + margin-top: $spacing-extra-large; + margin-bottom: $spacing-extra-large; + } + .mv6-ns { + margin-top: $spacing-extra-extra-large; + margin-bottom: $spacing-extra-extra-large; + } + .mv7-ns { + margin-top: $spacing-extra-extra-extra-large; + margin-bottom: $spacing-extra-extra-extra-large; + } + + .mh0-ns { + margin-left: $spacing-none; + margin-right: $spacing-none; + } + .mh1-ns { + margin-left: $spacing-extra-small; + margin-right: $spacing-extra-small; + } + .mh2-ns { + margin-left: $spacing-small; + margin-right: $spacing-small; + } + .mh3-ns { + margin-left: $spacing-medium; + margin-right: $spacing-medium; + } + .mh4-ns { + margin-left: $spacing-large; + margin-right: $spacing-large; + } + .mh5-ns { + margin-left: $spacing-extra-large; + margin-right: $spacing-extra-large; + } + .mh6-ns { + margin-left: $spacing-extra-extra-large; + margin-right: $spacing-extra-extra-large; + } + .mh7-ns { + margin-left: $spacing-extra-extra-extra-large; + margin-right: $spacing-extra-extra-extra-large; + } + +} + +@media #{$breakpoint-medium} { + .pa0-m { padding: $spacing-none; } + .pa1-m { padding: $spacing-extra-small; } + .pa2-m { padding: $spacing-small; } + .pa3-m { padding: $spacing-medium; } + .pa4-m { padding: $spacing-large; } + .pa5-m { padding: $spacing-extra-large; } + .pa6-m { padding: $spacing-extra-extra-large; } + .pa7-m { padding: $spacing-extra-extra-extra-large; } + + .pl0-m { padding-left: $spacing-none; } + .pl1-m { padding-left: $spacing-extra-small; } + .pl2-m { padding-left: $spacing-small; } + .pl3-m { padding-left: $spacing-medium; } + .pl4-m { padding-left: $spacing-large; } + .pl5-m { padding-left: $spacing-extra-large; } + .pl6-m { padding-left: $spacing-extra-extra-large; } + .pl7-m { padding-left: $spacing-extra-extra-extra-large; } + + .pr0-m { padding-right: $spacing-none; } + .pr1-m { padding-right: $spacing-extra-small; } + .pr2-m { padding-right: $spacing-small; } + .pr3-m { padding-right: $spacing-medium; } + .pr4-m { padding-right: $spacing-large; } + .pr5-m { padding-right: $spacing-extra-large; } + .pr6-m { padding-right: $spacing-extra-extra-large; } + .pr7-m { padding-right: $spacing-extra-extra-extra-large; } + + .pb0-m { padding-bottom: $spacing-none; } + .pb1-m { padding-bottom: $spacing-extra-small; } + .pb2-m { padding-bottom: $spacing-small; } + .pb3-m { padding-bottom: $spacing-medium; } + .pb4-m { padding-bottom: $spacing-large; } + .pb5-m { padding-bottom: $spacing-extra-large; } + .pb6-m { padding-bottom: $spacing-extra-extra-large; } + .pb7-m { padding-bottom: $spacing-extra-extra-extra-large; } + + .pt0-m { padding-top: $spacing-none; } + .pt1-m { padding-top: $spacing-extra-small; } + .pt2-m { padding-top: $spacing-small; } + .pt3-m { padding-top: $spacing-medium; } + .pt4-m { padding-top: $spacing-large; } + .pt5-m { padding-top: $spacing-extra-large; } + .pt6-m { padding-top: $spacing-extra-extra-large; } + .pt7-m { padding-top: $spacing-extra-extra-extra-large; } + + .pv0-m { + padding-top: $spacing-none; + padding-bottom: $spacing-none; + } + .pv1-m { + padding-top: $spacing-extra-small; + padding-bottom: $spacing-extra-small; + } + .pv2-m { + padding-top: $spacing-small; + padding-bottom: $spacing-small; + } + .pv3-m { + padding-top: $spacing-medium; + padding-bottom: $spacing-medium; + } + .pv4-m { + padding-top: $spacing-large; + padding-bottom: $spacing-large; + } + .pv5-m { + padding-top: $spacing-extra-large; + padding-bottom: $spacing-extra-large; + } + .pv6-m { + padding-top: $spacing-extra-extra-large; + padding-bottom: $spacing-extra-extra-large; + } + .pv7-m { + padding-top: $spacing-extra-extra-extra-large; + padding-bottom: $spacing-extra-extra-extra-large; + } + + .ph0-m { + padding-left: $spacing-none; + padding-right: $spacing-none; + } + .ph1-m { + padding-left: $spacing-extra-small; + padding-right: $spacing-extra-small; + } + .ph2-m { + padding-left: $spacing-small; + padding-right: $spacing-small; + } + .ph3-m { + padding-left: $spacing-medium; + padding-right: $spacing-medium; + } + .ph4-m { + padding-left: $spacing-large; + padding-right: $spacing-large; + } + .ph5-m { + padding-left: $spacing-extra-large; + padding-right: $spacing-extra-large; + } + .ph6-m { + padding-left: $spacing-extra-extra-large; + padding-right: $spacing-extra-extra-large; + } + .ph7-m { + padding-left: $spacing-extra-extra-extra-large; + padding-right: $spacing-extra-extra-extra-large; + } + + .ma0-m { margin: $spacing-none; } + .ma1-m { margin: $spacing-extra-small; } + .ma2-m { margin: $spacing-small; } + .ma3-m { margin: $spacing-medium; } + .ma4-m { margin: $spacing-large; } + .ma5-m { margin: $spacing-extra-large; } + .ma6-m { margin: $spacing-extra-extra-large; } + .ma7-m { margin: $spacing-extra-extra-extra-large; } + + .ml0-m { margin-left: $spacing-none; } + .ml1-m { margin-left: $spacing-extra-small; } + .ml2-m { margin-left: $spacing-small; } + .ml3-m { margin-left: $spacing-medium; } + .ml4-m { margin-left: $spacing-large; } + .ml5-m { margin-left: $spacing-extra-large; } + .ml6-m { margin-left: $spacing-extra-extra-large; } + .ml7-m { margin-left: $spacing-extra-extra-extra-large; } + + .mr0-m { margin-right: $spacing-none; } + .mr1-m { margin-right: $spacing-extra-small; } + .mr2-m { margin-right: $spacing-small; } + .mr3-m { margin-right: $spacing-medium; } + .mr4-m { margin-right: $spacing-large; } + .mr5-m { margin-right: $spacing-extra-large; } + .mr6-m { margin-right: $spacing-extra-extra-large; } + .mr7-m { margin-right: $spacing-extra-extra-extra-large; } + + .mb0-m { margin-bottom: $spacing-none; } + .mb1-m { margin-bottom: $spacing-extra-small; } + .mb2-m { margin-bottom: $spacing-small; } + .mb3-m { margin-bottom: $spacing-medium; } + .mb4-m { margin-bottom: $spacing-large; } + .mb5-m { margin-bottom: $spacing-extra-large; } + .mb6-m { margin-bottom: $spacing-extra-extra-large; } + .mb7-m { margin-bottom: $spacing-extra-extra-extra-large; } + + .mt0-m { margin-top: $spacing-none; } + .mt1-m { margin-top: $spacing-extra-small; } + .mt2-m { margin-top: $spacing-small; } + .mt3-m { margin-top: $spacing-medium; } + .mt4-m { margin-top: $spacing-large; } + .mt5-m { margin-top: $spacing-extra-large; } + .mt6-m { margin-top: $spacing-extra-extra-large; } + .mt7-m { margin-top: $spacing-extra-extra-extra-large; } + + .mv0-m { + margin-top: $spacing-none; + margin-bottom: $spacing-none; + } + .mv1-m { + margin-top: $spacing-extra-small; + margin-bottom: $spacing-extra-small; + } + .mv2-m { + margin-top: $spacing-small; + margin-bottom: $spacing-small; + } + .mv3-m { + margin-top: $spacing-medium; + margin-bottom: $spacing-medium; + } + .mv4-m { + margin-top: $spacing-large; + margin-bottom: $spacing-large; + } + .mv5-m { + margin-top: $spacing-extra-large; + margin-bottom: $spacing-extra-large; + } + .mv6-m { + margin-top: $spacing-extra-extra-large; + margin-bottom: $spacing-extra-extra-large; + } + .mv7-m { + margin-top: $spacing-extra-extra-extra-large; + margin-bottom: $spacing-extra-extra-extra-large; + } + + .mh0-m { + margin-left: $spacing-none; + margin-right: $spacing-none; + } + .mh1-m { + margin-left: $spacing-extra-small; + margin-right: $spacing-extra-small; + } + .mh2-m { + margin-left: $spacing-small; + margin-right: $spacing-small; + } + .mh3-m { + margin-left: $spacing-medium; + margin-right: $spacing-medium; + } + .mh4-m { + margin-left: $spacing-large; + margin-right: $spacing-large; + } + .mh5-m { + margin-left: $spacing-extra-large; + margin-right: $spacing-extra-large; + } + .mh6-m { + margin-left: $spacing-extra-extra-large; + margin-right: $spacing-extra-extra-large; + } + .mh7-m { + margin-left: $spacing-extra-extra-extra-large; + margin-right: $spacing-extra-extra-extra-large; + } + +} + +@media #{$breakpoint-large} { + .pa0-l { padding: $spacing-none; } + .pa1-l { padding: $spacing-extra-small; } + .pa2-l { padding: $spacing-small; } + .pa3-l { padding: $spacing-medium; } + .pa4-l { padding: $spacing-large; } + .pa5-l { padding: $spacing-extra-large; } + .pa6-l { padding: $spacing-extra-extra-large; } + .pa7-l { padding: $spacing-extra-extra-extra-large; } + + .pl0-l { padding-left: $spacing-none; } + .pl1-l { padding-left: $spacing-extra-small; } + .pl2-l { padding-left: $spacing-small; } + .pl3-l { padding-left: $spacing-medium; } + .pl4-l { padding-left: $spacing-large; } + .pl5-l { padding-left: $spacing-extra-large; } + .pl6-l { padding-left: $spacing-extra-extra-large; } + .pl7-l { padding-left: $spacing-extra-extra-extra-large; } + + .pr0-l { padding-right: $spacing-none; } + .pr1-l { padding-right: $spacing-extra-small; } + .pr2-l { padding-right: $spacing-small; } + .pr3-l { padding-right: $spacing-medium; } + .pr4-l { padding-right: $spacing-large; } + .pr5-l { padding-right: $spacing-extra-large; } + .pr6-l { padding-right: $spacing-extra-extra-large; } + .pr7-l { padding-right: $spacing-extra-extra-extra-large; } + + .pb0-l { padding-bottom: $spacing-none; } + .pb1-l { padding-bottom: $spacing-extra-small; } + .pb2-l { padding-bottom: $spacing-small; } + .pb3-l { padding-bottom: $spacing-medium; } + .pb4-l { padding-bottom: $spacing-large; } + .pb5-l { padding-bottom: $spacing-extra-large; } + .pb6-l { padding-bottom: $spacing-extra-extra-large; } + .pb7-l { padding-bottom: $spacing-extra-extra-extra-large; } + + .pt0-l { padding-top: $spacing-none; } + .pt1-l { padding-top: $spacing-extra-small; } + .pt2-l { padding-top: $spacing-small; } + .pt3-l { padding-top: $spacing-medium; } + .pt4-l { padding-top: $spacing-large; } + .pt5-l { padding-top: $spacing-extra-large; } + .pt6-l { padding-top: $spacing-extra-extra-large; } + .pt7-l { padding-top: $spacing-extra-extra-extra-large; } + + .pv0-l { + padding-top: $spacing-none; + padding-bottom: $spacing-none; + } + .pv1-l { + padding-top: $spacing-extra-small; + padding-bottom: $spacing-extra-small; + } + .pv2-l { + padding-top: $spacing-small; + padding-bottom: $spacing-small; + } + .pv3-l { + padding-top: $spacing-medium; + padding-bottom: $spacing-medium; + } + .pv4-l { + padding-top: $spacing-large; + padding-bottom: $spacing-large; + } + .pv5-l { + padding-top: $spacing-extra-large; + padding-bottom: $spacing-extra-large; + } + .pv6-l { + padding-top: $spacing-extra-extra-large; + padding-bottom: $spacing-extra-extra-large; + } + .pv7-l { + padding-top: $spacing-extra-extra-extra-large; + padding-bottom: $spacing-extra-extra-extra-large; + } + + .ph0-l { + padding-left: $spacing-none; + padding-right: $spacing-none; + } + .ph1-l { + padding-left: $spacing-extra-small; + padding-right: $spacing-extra-small; + } + .ph2-l { + padding-left: $spacing-small; + padding-right: $spacing-small; + } + .ph3-l { + padding-left: $spacing-medium; + padding-right: $spacing-medium; + } + .ph4-l { + padding-left: $spacing-large; + padding-right: $spacing-large; + } + .ph5-l { + padding-left: $spacing-extra-large; + padding-right: $spacing-extra-large; + } + .ph6-l { + padding-left: $spacing-extra-extra-large; + padding-right: $spacing-extra-extra-large; + } + .ph7-l { + padding-left: $spacing-extra-extra-extra-large; + padding-right: $spacing-extra-extra-extra-large; + } + + .ma0-l { margin: $spacing-none; } + .ma1-l { margin: $spacing-extra-small; } + .ma2-l { margin: $spacing-small; } + .ma3-l { margin: $spacing-medium; } + .ma4-l { margin: $spacing-large; } + .ma5-l { margin: $spacing-extra-large; } + .ma6-l { margin: $spacing-extra-extra-large; } + .ma7-l { margin: $spacing-extra-extra-extra-large; } + + .ml0-l { margin-left: $spacing-none; } + .ml1-l { margin-left: $spacing-extra-small; } + .ml2-l { margin-left: $spacing-small; } + .ml3-l { margin-left: $spacing-medium; } + .ml4-l { margin-left: $spacing-large; } + .ml5-l { margin-left: $spacing-extra-large; } + .ml6-l { margin-left: $spacing-extra-extra-large; } + .ml7-l { margin-left: $spacing-extra-extra-extra-large; } + + .mr0-l { margin-right: $spacing-none; } + .mr1-l { margin-right: $spacing-extra-small; } + .mr2-l { margin-right: $spacing-small; } + .mr3-l { margin-right: $spacing-medium; } + .mr4-l { margin-right: $spacing-large; } + .mr5-l { margin-right: $spacing-extra-large; } + .mr6-l { margin-right: $spacing-extra-extra-large; } + .mr7-l { margin-right: $spacing-extra-extra-extra-large; } + + .mb0-l { margin-bottom: $spacing-none; } + .mb1-l { margin-bottom: $spacing-extra-small; } + .mb2-l { margin-bottom: $spacing-small; } + .mb3-l { margin-bottom: $spacing-medium; } + .mb4-l { margin-bottom: $spacing-large; } + .mb5-l { margin-bottom: $spacing-extra-large; } + .mb6-l { margin-bottom: $spacing-extra-extra-large; } + .mb7-l { margin-bottom: $spacing-extra-extra-extra-large; } + + .mt0-l { margin-top: $spacing-none; } + .mt1-l { margin-top: $spacing-extra-small; } + .mt2-l { margin-top: $spacing-small; } + .mt3-l { margin-top: $spacing-medium; } + .mt4-l { margin-top: $spacing-large; } + .mt5-l { margin-top: $spacing-extra-large; } + .mt6-l { margin-top: $spacing-extra-extra-large; } + .mt7-l { margin-top: $spacing-extra-extra-extra-large; } + + .mv0-l { + margin-top: $spacing-none; + margin-bottom: $spacing-none; + } + .mv1-l { + margin-top: $spacing-extra-small; + margin-bottom: $spacing-extra-small; + } + .mv2-l { + margin-top: $spacing-small; + margin-bottom: $spacing-small; + } + .mv3-l { + margin-top: $spacing-medium; + margin-bottom: $spacing-medium; + } + .mv4-l { + margin-top: $spacing-large; + margin-bottom: $spacing-large; + } + .mv5-l { + margin-top: $spacing-extra-large; + margin-bottom: $spacing-extra-large; + } + .mv6-l { + margin-top: $spacing-extra-extra-large; + margin-bottom: $spacing-extra-extra-large; + } + .mv7-l { + margin-top: $spacing-extra-extra-extra-large; + margin-bottom: $spacing-extra-extra-extra-large; + } + + .mh0-l { + margin-left: $spacing-none; + margin-right: $spacing-none; + } + .mh1-l { + margin-left: $spacing-extra-small; + margin-right: $spacing-extra-small; + } + .mh2-l { + margin-left: $spacing-small; + margin-right: $spacing-small; + } + .mh3-l { + margin-left: $spacing-medium; + margin-right: $spacing-medium; + } + .mh4-l { + margin-left: $spacing-large; + margin-right: $spacing-large; + } + .mh5-l { + margin-left: $spacing-extra-large; + margin-right: $spacing-extra-large; + } + .mh6-l { + margin-left: $spacing-extra-extra-large; + margin-right: $spacing-extra-extra-large; + } + .mh7-l { + margin-left: $spacing-extra-extra-extra-large; + margin-right: $spacing-extra-extra-extra-large; + } +} diff --git a/themes/hugo-apero/assets/scss/_styles.scss b/themes/hugo-apero/assets/scss/_styles.scss new file mode 100644 index 0000000..7e121fb --- /dev/null +++ b/themes/hugo-apero/assets/scss/_styles.scss @@ -0,0 +1,15 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + STYLES + + Add custom styles here. + +*/ + diff --git a/themes/hugo-apero/assets/scss/_tables.scss b/themes/hugo-apero/assets/scss/_tables.scss new file mode 100644 index 0000000..ddc6164 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_tables.scss @@ -0,0 +1,42 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ + +.collapse { + border-collapse: collapse; + border-spacing: 0; +} + +.striped--light-silver:nth-child(odd) { + background-color: $light-silver; +} + +.striped--moon-gray:nth-child(odd) { + background-color: $moon-gray; +} + +.striped--light-gray:nth-child(odd) { + background-color: $light-gray; +} + +.striped--near-white:nth-child(odd) { + background-color: $near-white; +} + +.stripe-light:nth-child(odd) { + background-color: $white-10; +} + +.stripe-dark:nth-child(odd) { + background-color: $black-10; +} diff --git a/themes/hugo-apero/assets/scss/_text-align.scss b/themes/hugo-apero/assets/scss/_text-align.scss new file mode 100644 index 0000000..ccb1e36 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_text-align.scss @@ -0,0 +1,53 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tl { text-align: left; } +.tr { text-align: right; } +.tc { text-align: center; } +.tj { text-align: justify; } + +@media #{$breakpoint-not-small} { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} + +@media #{$breakpoint-medium} { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} + +@media #{$breakpoint-large} { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } +} diff --git a/themes/hugo-apero/assets/scss/_text-decoration.scss b/themes/hugo-apero/assets/scss/_text-decoration.scss new file mode 100644 index 0000000..d5dcf09 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_text-decoration.scss @@ -0,0 +1,42 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.strike { text-decoration: line-through; } +.underline { text-decoration: underline; } +.no-underline { text-decoration: none; } + + +@media #{$breakpoint-not-small} { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media #{$breakpoint-medium} { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media #{$breakpoint-large} { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} diff --git a/themes/hugo-apero/assets/scss/_text-transform.scss b/themes/hugo-apero/assets/scss/_text-transform.scss new file mode 100644 index 0000000..12c4c49 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_text-transform.scss @@ -0,0 +1,53 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ttc { text-transform: capitalize; } +.ttl { text-transform: lowercase; } +.ttu { text-transform: uppercase; } +.ttn { text-transform: none; } + +@media #{$breakpoint-not-small} { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} + +@media #{$breakpoint-medium} { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} + +@media #{$breakpoint-large} { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } +} diff --git a/themes/hugo-apero/assets/scss/_type-scale.scss b/themes/hugo-apero/assets/scss/_type-scale.scss new file mode 100644 index 0000000..447652f --- /dev/null +++ b/themes/hugo-apero/assets/scss/_type-scale.scss @@ -0,0 +1,102 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ + +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ + +.f-6, +.f-headline { + font-size: $font-size-headline; +} +.f-5, +.f-subheadline { + font-size: $font-size-subheadline; +} + + +/* Type Scale */ + + +.f1 { font-size: $font-size-1; } +.f2 { font-size: $font-size-2; } +.f3 { font-size: $font-size-3; } +.f4 { font-size: $font-size-4; } +.f5 { font-size: $font-size-5; } +.f6 { font-size: $font-size-6; } +.f7 { font-size: $font-size-7; } + +@media #{$breakpoint-not-small}{ + .f-6-ns, + .f-headline-ns { font-size: $font-size-headline; } + .f-5-ns, + .f-subheadline-ns { font-size: $font-size-subheadline; } + .f1-ns { font-size: $font-size-1; } + .f2-ns { font-size: $font-size-2; } + .f3-ns { font-size: $font-size-3; } + .f4-ns { font-size: $font-size-4; } + .f5-ns { font-size: $font-size-5; } + .f6-ns { font-size: $font-size-6; } + .f7-ns { font-size: $font-size-7; } +} + +@media #{$breakpoint-medium} { + .f-6-m, + .f-headline-m { font-size: $font-size-headline; } + .f-5-m, + .f-subheadline-m { font-size: $font-size-subheadline; } + .f1-m { font-size: $font-size-1; } + .f2-m { font-size: $font-size-2; } + .f3-m { font-size: $font-size-3; } + .f4-m { font-size: $font-size-4; } + .f5-m { font-size: $font-size-5; } + .f6-m { font-size: $font-size-6; } + .f7-m { font-size: $font-size-7; } +} + +@media #{$breakpoint-large} { + .f-6-l, + .f-headline-l { + font-size: $font-size-headline; + } + .f-5-l, + .f-subheadline-l { + font-size: $font-size-subheadline; + } + .f1-l { font-size: $font-size-1; } + .f2-l { font-size: $font-size-2; } + .f3-l { font-size: $font-size-3; } + .f4-l { font-size: $font-size-4; } + .f5-l { font-size: $font-size-5; } + .f6-l { font-size: $font-size-6; } + .f7-l { font-size: $font-size-7; } +} diff --git a/themes/hugo-apero/assets/scss/_typography.scss b/themes/hugo-apero/assets/scss/_typography.scss new file mode 100644 index 0000000..03e6655 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_typography.scss @@ -0,0 +1,129 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + + +/* Measure is limited to ~66 characters */ +.measure { + max-width: $measure; +} + +/* Measure is limited to ~80 characters */ +.measure-wide { + max-width: $measure-wide; +} + +/* Measure is limited to ~45 characters */ +.measure-narrow { + max-width: $measure-narrow; +} + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.small-caps { + font-variant: small-caps; +} + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media #{$breakpoint-not-small} { + .measure-ns { + max-width: $measure; + } + .measure-wide-ns { + max-width: $measure-wide; + } + .measure-narrow-ns { + max-width: $measure-narrow; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media #{$breakpoint-medium} { + .measure-m { + max-width: $measure; + } + .measure-wide-m { + max-width: $measure-wide; + } + .measure-narrow-m { + max-width: $measure-narrow; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media #{$breakpoint-large} { + .measure-l { + max-width: $measure; + } + .measure-wide-l { + max-width: $measure-wide; + } + .measure-narrow-l { + max-width: $measure-narrow; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/themes/hugo-apero/assets/scss/_utilities.scss b/themes/hugo-apero/assets/scss/_utilities.scss new file mode 100644 index 0000000..e2782fb --- /dev/null +++ b/themes/hugo-apero/assets/scss/_utilities.scss @@ -0,0 +1,57 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Equivalent to .overflow-y-scroll */ +.overflow-container { + overflow-y: scroll; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +.mr-auto { margin-right: auto; } +.ml-auto { margin-left: auto; } + +@media #{$breakpoint-not-small}{ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} + +@media #{$breakpoint-medium}{ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} + +@media #{$breakpoint-large}{ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} diff --git a/themes/hugo-apero/assets/scss/_variables.scss b/themes/hugo-apero/assets/scss/_variables.scss new file mode 100644 index 0000000..f3cad38 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_variables.scss @@ -0,0 +1,143 @@ + +// Converted Variables + +$sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default; +$serif: georgia, serif !default; +$code: consolas, monaco, monospace !default; +$font-size-headline: 6rem !default; +$font-size-subheadline: 5rem !default; +$font-size-1: 3rem !default; +$font-size-2: 2.25rem !default; +$font-size-3: 1.5rem !default; +$font-size-4: 1.25rem !default; +$font-size-5: 1rem !default; +$font-size-6: .875rem !default; +$font-size-7: .75rem !default; +$letter-spacing-tight: -.05em !default; +$letter-spacing-1: .1em !default; +$letter-spacing-2: .25em !default; +$line-height-solid: 1 !default; +$line-height-title: 1.25 !default; +$line-height-copy: 1.5 !default; +$measure: 30em !default; +$measure-narrow: 20em !default; +$measure-wide: 34em !default; +$spacing-none: 0 !default; +$spacing-extra-small: .25rem !default; +$spacing-small: .5rem !default; +$spacing-medium: 1rem !default; +$spacing-large: 2rem !default; +$spacing-extra-large: 4rem !default; +$spacing-extra-extra-large: 8rem !default; +$spacing-extra-extra-extra-large: 16rem !default; +$spacing-copy-separator: 1.5em !default; +$height-1: 1rem !default; +$height-2: 2rem !default; +$height-3: 4rem !default; +$height-4: 8rem !default; +$height-5: 16rem !default; +$width-1: 1rem !default; +$width-2: 2rem !default; +$width-3: 4rem !default; +$width-4: 8rem !default; +$width-5: 16rem !default; +$max-width-1: 1rem !default; +$max-width-2: 2rem !default; +$max-width-3: 4rem !default; +$max-width-4: 8rem !default; +$max-width-5: 16rem !default; +$max-width-6: 32rem !default; +$max-width-7: 48rem !default; +$max-width-8: 64rem !default; +$max-width-9: 96rem !default; +$border-radius-none: 0 !default; +$border-radius-1: .125rem !default; +$border-radius-2: .25rem !default; +$border-radius-3: .5rem !default; +$border-radius-4: 1rem !default; +$border-radius-circle: 100% !default; +$border-radius-pill: 9999px !default; +$border-width-none: 0 !default; +$border-width-1: .125rem !default; +$border-width-2: .25rem !default; +$border-width-3: .5rem !default; +$border-width-4: 1rem !default; +$border-width-5: 2rem !default; +$box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; +$box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default; +$box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; +$box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; +$box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; +$black: #000 !default; +$near-black: #111 !default; +$dark-gray: #333 !default; +$mid-gray: #555 !default; +$gray: #777 !default; +$silver: #999 !default; +$light-silver: #aaa !default; +$moon-gray: #ccc !default; +$light-gray: #eee !default; +$near-white: #f4f4f4 !default; +$white: #fff !default; +$transparent: transparent !default; +$black-90: rgba(0,0,0,.9) !default; +$black-80: rgba(0,0,0,.8) !default; +$black-70: rgba(0,0,0,.7) !default; +$black-60: rgba(0,0,0,.6) !default; +$black-50: rgba(0,0,0,.5) !default; +$black-40: rgba(0,0,0,.4) !default; +$black-30: rgba(0,0,0,.3) !default; +$black-20: rgba(0,0,0,.2) !default; +$black-10: rgba(0,0,0,.1) !default; +$black-05: rgba(0,0,0,.05) !default; +$black-025: rgba(0,0,0,.025) !default; +$black-0125: rgba(0,0,0,.0125) !default; +$white-90: rgba(255,255,255,.9) !default; +$white-80: rgba(255,255,255,.8) !default; +$white-70: rgba(255,255,255,.7) !default; +$white-60: rgba(255,255,255,.6) !default; +$white-50: rgba(255,255,255,.5) !default; +$white-40: rgba(255,255,255,.4) !default; +$white-30: rgba(255,255,255,.3) !default; +$white-20: rgba(255,255,255,.2) !default; +$white-10: rgba(255,255,255,.1) !default; +$white-05: rgba(255,255,255,.05) !default; +$white-025: rgba(255,255,255,.025) !default; +$white-0125: rgba(255,255,255,.0125) !default; +$dark-red: #e7040f !default; +$red: #ff4136 !default; +$light-red: #ff725c !default; +$orange: #ff6300 !default; +$gold: #ffb700 !default; +$yellow: #ffd700 !default; +$light-yellow: #fbf1a9 !default; +$purple: #5e2ca5 !default; +$light-purple: #a463f2 !default; +$dark-pink: #d5008f !default; +$hot-pink: #ff41b4 !default; +$pink: #ff80cc !default; +$light-pink: #ffa3d7 !default; +$dark-green: #137752 !default; +$green: #19a974 !default; +$light-green: #9eebcf !default; +$navy: #001b44 !default; +$dark-blue: #00449e !default; +$blue: #357edd !default; +$light-blue: #96ccff !default; +$lightest-blue: #cdecff !default; +$washed-blue: #f6fffe !default; +$washed-green: #e8fdf5 !default; +$washed-yellow: #fffceb !default; +$washed-red: #ffdfdf !default; + +// Custom Media Query Variables + +$breakpoint-not-small: 'screen and (min-width: 30em)' !default; +$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default; +$breakpoint-large: 'screen and (min-width: 60em)' !default; + +/* + + VARIABLES + +*/ diff --git a/themes/hugo-apero/assets/scss/_vertical-align.scss b/themes/hugo-apero/assets/scss/_vertical-align.scss new file mode 100644 index 0000000..e2fd616 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_vertical-align.scss @@ -0,0 +1,43 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.v-base { vertical-align: baseline; } +.v-mid { vertical-align: middle; } +.v-top { vertical-align: top; } +.v-btm { vertical-align: bottom; } + +@media #{$breakpoint-not-small} { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} + +@media #{$breakpoint-medium} { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} + +@media #{$breakpoint-large} { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} diff --git a/themes/hugo-apero/assets/scss/_visibility.scss b/themes/hugo-apero/assets/scss/_visibility.scss new file mode 100644 index 0000000..e020d53 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_visibility.scss @@ -0,0 +1,58 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ + +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} + +@media #{$breakpoint-not-small} { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media #{$breakpoint-medium} { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media #{$breakpoint-large} { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + diff --git a/themes/hugo-apero/assets/scss/_white-space.scss b/themes/hugo-apero/assets/scss/_white-space.scss new file mode 100644 index 0000000..31a79a5 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_white-space.scss @@ -0,0 +1,41 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + + +.ws-normal { white-space: normal; } +.nowrap { white-space: nowrap; } +.pre { white-space: pre; } + +@media #{$breakpoint-not-small} { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} + +@media #{$breakpoint-medium} { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} + +@media #{$breakpoint-large} { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} + diff --git a/themes/hugo-apero/assets/scss/_widths.scss b/themes/hugo-apero/assets/scss/_widths.scss new file mode 100644 index 0000000..abc4fc7 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_widths.scss @@ -0,0 +1,150 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +/* Width Scale */ + +.w1 { width: $width-1; } +.w2 { width: $width-2; } +.w3 { width: $width-3; } +.w4 { width: $width-4; } +.w5 { width: $width-5; } + +.w-10 { width: 10%; } +.w-20 { width: 20%; } +.w-25 { width: 25%; } +.w-30 { width: 30%; } +.w-33 { width: 33%; } +.w-34 { width: 34%; } +.w-40 { width: 40%; } +.w-50 { width: 50%; } +.w-60 { width: 60%; } +.w-70 { width: 70%; } +.w-75 { width: 75%; } +.w-80 { width: 80%; } +.w-90 { width: 90%; } +.w-100 { width: 100%; } + +.w-third { width: (100% / 3); } +.w-two-thirds { width: (100% / 1.5); } +.w-auto { width: auto; } + +@media #{$breakpoint-not-small} { + .w1-ns { width: $width-1; } + .w2-ns { width: $width-2; } + .w3-ns { width: $width-3; } + .w4-ns { width: $width-4; } + .w5-ns { width: $width-5; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: (100% / 3); } + .w-two-thirds-ns { width: (100% / 1.5); } + .w-auto-ns { width: auto; } +} + +@media #{$breakpoint-medium} { + .w1-m { width: $width-1; } + .w2-m { width: $width-2; } + .w3-m { width: $width-3; } + .w4-m { width: $width-4; } + .w5-m { width: $width-5; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: (100% / 3); } + .w-two-thirds-m { width: (100% / 1.5); } + .w-auto-m { width: auto; } +} + +@media #{$breakpoint-large} { + .w1-l { width: $width-1; } + .w2-l { width: $width-2; } + .w3-l { width: $width-3; } + .w4-l { width: $width-4; } + .w5-l { width: $width-5; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: (100% / 3); } + .w-two-thirds-l { width: (100% / 1.5); } + .w-auto-l { width: auto; } +} diff --git a/themes/hugo-apero/assets/scss/_word-break.scss b/themes/hugo-apero/assets/scss/_word-break.scss new file mode 100644 index 0000000..7068c86 --- /dev/null +++ b/themes/hugo-apero/assets/scss/_word-break.scss @@ -0,0 +1,43 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + WORD BREAK + + Base: + word = word-break + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.word-normal { word-break: normal; } +.word-wrap { word-break: break-all; } +.word-nowrap { word-break: keep-all; } + +@media #{$breakpoint-not-small} { + .word-normal-ns { word-break: normal; } + .word-wrap-ns { word-break: break-all; } + .word-nowrap-ns { word-break: keep-all; } +} + +@media #{$breakpoint-medium} { + .word-normal-m { word-break: normal; } + .word-wrap-m { word-break: break-all; } + .word-nowrap-m { word-break: keep-all; } +} + +@media #{$breakpoint-large} { + .word-normal-l { word-break: normal; } + .word-wrap-l { word-break: break-all; } + .word-nowrap-l { word-break: keep-all; } +} + diff --git a/themes/hugo-apero/assets/scss/_z-index.scss b/themes/hugo-apero/assets/scss/_z-index.scss new file mode 100644 index 0000000..5da41cd --- /dev/null +++ b/themes/hugo-apero/assets/scss/_z-index.scss @@ -0,0 +1,60 @@ + +// Converted Variables + + +// Custom Media Query Variables + + +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ + +.z-0 { z-index: 0; } +.z-1 { z-index: 1; } +.z-2 { z-index: 2; } +.z-3 { z-index: 3; } +.z-4 { z-index: 4; } +.z-5 { z-index: 5; } + +.z-999 { z-index: 999; } +.z-9999 { z-index: 9999; } + +.z-max { + z-index: 2147483647; +} + +.z-inherit { z-index: inherit; } +.z-initial { z-index: initial; } +.z-unset { z-index: unset; } + diff --git a/themes/hugo-apero/assets/tachyons.scss b/themes/hugo-apero/assets/tachyons.scss new file mode 100644 index 0000000..01d1fc7 --- /dev/null +++ b/themes/hugo-apero/assets/tachyons.scss @@ -0,0 +1,93 @@ +// ! TACHYONS v4.9.0 | http://tachyons.io + +// +// +// ________ ______ +// ___ __/_____ _________ /______ ______________________ +// __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ +// _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) +// /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ +// /____/ +// +// TABLE OF CONTENTS +// +// 1. External Library Includes +// - Normalize.css | http://normalize.css.github.io +// 2. Tachyons Modules +// 3. Variables +// - Media Queries +// - Colors +// 4. Debugging +// - Debug all +// - Debug children +// +// + + +// External Library Includes +@import 'scss/normalize'; + +// Variables +// Importing here will allow you to override any variables in the modules + +@import 'scss/variables'; + +// Debugging +@import 'scss/debug-children'; +@import 'scss/debug-grid'; + +// Uncomment out the line below to help debug layout issues +// @import 'scss/debug'; + +// Modules +@import 'scss/box-sizing'; +@import 'scss/aspect-ratios'; +@import 'scss/images'; +@import 'scss/background-size'; +@import 'scss/background-position'; +@import 'scss/outlines'; +@import 'scss/borders'; +@import 'scss/border-colors'; +@import 'scss/border-radius'; +@import 'scss/border-style'; +@import 'scss/border-widths'; +@import 'scss/box-shadow'; +@import 'scss/code'; +@import 'scss/coordinates'; +@import 'scss/clears'; +@import 'scss/display'; +@import 'scss/flexbox'; +@import 'scss/floats'; +@import 'scss/font-family'; +@import 'scss/font-style'; +@import 'scss/font-weight'; +@import 'scss/forms'; +@import 'scss/heights'; +@import 'scss/letter-spacing'; +@import 'scss/line-height'; +@import 'scss/links'; +@import 'scss/lists'; +@import 'scss/max-widths'; +@import 'scss/widths'; +@import 'scss/overflow'; +@import 'scss/position'; +@import 'scss/opacity'; +@import 'scss/rotations'; +@import 'scss/skins'; +@import 'scss/skins-pseudo'; +@import 'scss/spacing'; +@import 'scss/negative-margins'; +@import 'scss/tables'; +@import 'scss/text-decoration'; +@import 'scss/text-align'; +@import 'scss/text-transform'; +@import 'scss/type-scale'; +@import 'scss/typography'; +@import 'scss/utilities'; +@import 'scss/visibility'; +@import 'scss/white-space'; +@import 'scss/vertical-align'; +@import 'scss/hovers'; +@import 'scss/z-index'; +@import 'scss/nested'; +@import 'scss/styles'; diff --git a/themes/hugo-apero/assets/theme/forest.scss b/themes/hugo-apero/assets/theme/forest.scss new file mode 100644 index 0000000..078f840 --- /dev/null +++ b/themes/hugo-apero/assets/theme/forest.scss @@ -0,0 +1,21 @@ + +// set your custom colors here +$siteBgColorCustom: #F3F3EE; +$sidebarBgColorCustom: #ffff; +$textColorCustom: #17261E; +$sidebarTextColorCustom: #1F3329; + +$headlineColorCustom: #2F4C3E; +$headingColorCustom: #4A7862; + +$bodyLinkColorCustom: #4A7862; +$navLinkColorCustom: #497860; +$sidebarLinkColorCustom: #497961; + +$footerTextColorCustom: #4A7862; + +$buttonTextColorCustom: #FAF9F0; +$buttonHoverTextColorCustom: #FAF9F0; +$buttonBgColorCustom: #5D987B; +$buttonHoverBgColorCustom: #558B71; +$borderColorCustom: #DDDDCF; diff --git a/themes/hugo-apero/assets/theme/grayscale.scss b/themes/hugo-apero/assets/theme/grayscale.scss new file mode 100644 index 0000000..05d1f36 --- /dev/null +++ b/themes/hugo-apero/assets/theme/grayscale.scss @@ -0,0 +1,21 @@ + +// set your custom colors here +$siteBgColorCustom: #ffffff; +$sidebarBgColorCustom: #F8F9FA; +$textColorCustom: #666260; +$sidebarTextColorCustom: #495057; + +$headlineColorCustom: #343A40; +$headingColorCustom: #212529; + +$bodyLinkColorCustom: #6F777F; +$navLinkColorCustom: #495057; +$sidebarLinkColorCustom: #495057; + +$footerTextColorCustom: #6F777F; + +$buttonTextColorCustom: #F8F9FA; +$buttonHoverTextColorCustom: #ffffff; +$buttonBgColorCustom: #404040; +$buttonHoverBgColorCustom: #121417; +$borderColorCustom: #DEE2E6; diff --git a/themes/hugo-apero/assets/theme/peach.scss b/themes/hugo-apero/assets/theme/peach.scss new file mode 100644 index 0000000..3bbdfb8 --- /dev/null +++ b/themes/hugo-apero/assets/theme/peach.scss @@ -0,0 +1,21 @@ + +// set your custom colors here +$siteBgColorCustom: #fff7f5; +$sidebarBgColorCustom: #FEF0EC; +$textColorCustom: #3A0F03; +$sidebarTextColorCustom: #220D07; + +$headlineColorCustom: #932210; +$headingColorCustom: #ce3d15; + +$bodyLinkColorCustom: #BF4D31; +$navLinkColorCustom: #C54B29; +$sidebarLinkColorCustom: #741d06; + +$footerTextColorCustom: #747270; + +$buttonTextColorCustom: #FAF9F0; +$buttonHoverTextColorCustom: #FAF9F0; +$buttonBgColorCustom: #CE3D15; +$buttonHoverBgColorCustom: #BC4524; +$borderColorCustom: #FED0C3; diff --git a/themes/hugo-apero/assets/theme/plum.scss b/themes/hugo-apero/assets/theme/plum.scss new file mode 100644 index 0000000..888152b --- /dev/null +++ b/themes/hugo-apero/assets/theme/plum.scss @@ -0,0 +1,23 @@ + +// set your custom colors here +$siteBgColorCustom: #f6f7f9; // cultured +$sidebarBgColorCustom: #E8D9DB; // lavendar blush +$textColorCustom: #38383A; // onyx +$sidebarTextColorCustom: #020202; // black + +$headlineColorCustom: #414A37; // rifle green +$headingColorCustom: #5B0B15; // rosewood + +$bodyLinkColorCustom: #490910; // black bean +$navLinkColorCustom: #6D0D19; // persian plum +$sidebarLinkColorCustom: #414A37; // rifle green + +$footerTextColorCustom: #38383A; // onyx + +$buttonTextColorCustom: #F5F5F4; +$buttonHoverTextColorCustom: #F5F5F4; + +$buttonBgColorCustom: #6D0D19; // persian plum +$buttonHoverBgColorCustom: #490910; // black bean + +$borderColorCustom: #C4B1B2; // silver pink diff --git a/themes/hugo-apero/assets/theme/poppy.scss b/themes/hugo-apero/assets/theme/poppy.scss new file mode 100644 index 0000000..1929023 --- /dev/null +++ b/themes/hugo-apero/assets/theme/poppy.scss @@ -0,0 +1,21 @@ + +// set your custom colors here +$siteBgColorCustom: #FAF9F0; +$sidebarBgColorCustom: #F5F3E0; +$textColorCustom: #220D07; +$sidebarTextColorCustom: #220D07; + +$headlineColorCustom: #d35836f7; +$headingColorCustom: #BB4625; + +$bodyLinkColorCustom: #BC4524; +$navLinkColorCustom: #BC4524; +$sidebarLinkColorCustom: #BC4524; + +$footerTextColorCustom: #676565; + +$buttonTextColorCustom: #FAF9F0; +$buttonHoverTextColorCustom: #FAF9F0; +$buttonBgColorCustom: #E07A5F; +$buttonHoverBgColorCustom: #BC4524; +$borderColorCustom: #F0EDD1; diff --git a/themes/hugo-apero/assets/theme/set-theme.scss b/themes/hugo-apero/assets/theme/set-theme.scss new file mode 100644 index 0000000..a65c38b --- /dev/null +++ b/themes/hugo-apero/assets/theme/set-theme.scss @@ -0,0 +1,38 @@ +// ------------------------------ +// DO NOT EDIT BELOW THIS LINE + +// create custom color classes based on tachyons prefix when needed +.bg-custom-site-bg-color { background-color: $siteBgColorCustom; } +.bg-custom-sidebar-bg-color { background-color: $sidebarBgColorCustom; } +.custom-text-color { color: $textColorCustom; } +.custom-sidebar-text-color { color: $sidebarTextColorCustom; } +.custom-headline-color { color: $headlineColorCustom; } +.custom-heading-color { color: $headingColorCustom; } +.custom-body-link-color { color: $bodyLinkColorCustom; } +.custom-nav-link-color { color: $navLinkColorCustom; } +.bg-custom-nav-bg-color { background-color: $navLinkColorCustom; } +.custom-sidebar-link-color { color: $sidebarLinkColorCustom; } +.custom-footer-text-color { color: $footerTextColorCustom; } +.custom-button-text-color { color: $buttonTextColorCustom; } +.hover-custom-button-hover-text-color:hover { color: $buttonHoverTextColorCustom; } +.bg-custom-button-bg-color { background-color: $buttonBgColorCustom; } +.hover-bg-custom-button-hover-bg-color:hover { background-color: $buttonHoverBgColorCustom; } +.b--custom-border-color { border-color: $borderColorCustom; } + +// override variables used in main with new custom class slugs +$siteBgColor: custom-site-bg-color; +$sidebarBgColor: custom-sidebar-bg-color; +$textColor: custom-text-color; +$sidebarTextColor: custom-sidebar-text-color; +$headlineColor: custom-headline-color; +$headingColor: custom-heading-color; +$bodyLinkColor: custom-body-link-color; +$navLinkColor: custom-nav-link-color; +$navBgColor: custom-nav-bg-color; +$sidebarLinkColor: custom-sidebar-link-color; +$footerTextColor: custom-footer-text-color; +$buttonTextColor: custom-button-text-color; +$buttonHoverTextColor: custom-button-hover-text-color; +$buttonBgColor: custom-button-bg-color; +$buttonHoverBgColor: custom-button-hover-bg-color; +$borderColor: custom-border-color; diff --git a/themes/hugo-apero/assets/theme/sky.scss b/themes/hugo-apero/assets/theme/sky.scss new file mode 100644 index 0000000..fd36d99 --- /dev/null +++ b/themes/hugo-apero/assets/theme/sky.scss @@ -0,0 +1,18 @@ + +// set your custom colors here +$siteBgColorCustom: #f2f2f1; +$sidebarBgColorCustom: #FFFFFF; +$textColorCustom: #404040; +$sidebarTextColorCustom: #2c2857; +$headlineColorCustom: #516DB0; +$headingColorCustom: #516DB0; +$bodyLinkColorCustom: #2c2857; +$navLinkColorCustom: #516DB0; +$sidebarLinkColorCustom: #2c2857; +$footerTextColorCustom: #706E6C; +$buttonTextColorCustom: #FFFFFF; +$buttonHoverTextColorCustom: #FFFFFF; +$buttonBgColorCustom: #516DB0; +$buttonHoverBgColorCustom: #2c2857; +$borderColorCustom: #B4C0DD; + diff --git a/themes/hugo-apero/assets/theme/violet.scss b/themes/hugo-apero/assets/theme/violet.scss new file mode 100644 index 0000000..44d037b --- /dev/null +++ b/themes/hugo-apero/assets/theme/violet.scss @@ -0,0 +1,23 @@ + +// set your custom colors here +$siteBgColorCustom: #FCEEF1; +$sidebarBgColorCustom: #fff; +$textColorCustom: #22071E; +$sidebarTextColorCustom: #77186A; + +$headlineColorCustom: #77186A; +$headingColorCustom: #44074B; + +$bodyLinkColorCustom: #627354; +$navLinkColorCustom: #77186A; +$sidebarLinkColorCustom: #637354; + +$footerTextColorCustom: #706E6C; + +$buttonTextColorCustom: #F7F7F4; +$buttonHoverTextColorCustom: #F9F9F8; + +$buttonBgColorCustom: #899D78; +$buttonHoverBgColorCustom: #6F825E; + +$borderColorCustom: #F9DCE3; diff --git a/themes/hugo-apero/assets/theme/water.scss b/themes/hugo-apero/assets/theme/water.scss new file mode 100644 index 0000000..74b9044 --- /dev/null +++ b/themes/hugo-apero/assets/theme/water.scss @@ -0,0 +1,18 @@ + +// set your custom colors here +$siteBgColorCustom: #E3F0EE; +$sidebarBgColorCustom: #fff; +$textColorCustom: #2C2C2C; +$sidebarTextColorCustom: #22404C; +$headlineColorCustom: #22404C; +$headingColorCustom: #22404C; +$bodyLinkColorCustom: #107685; +$navLinkColorCustom: #2C2C2C; +$sidebarLinkColorCustom: #2c2857; +$footerTextColorCustom: #2C2C2C; +$buttonTextColorCustom: #fff; +$buttonHoverTextColorCustom: #fff; +$buttonBgColorCustom: #107685; +$buttonHoverBgColorCustom: #14303C; +$borderColorCustom: #76B0B9; + diff --git a/themes/hugo-apero/exampleSite/config.toml b/themes/hugo-apero/exampleSite/config.toml new file mode 100644 index 0000000..2e10ba2 --- /dev/null +++ b/themes/hugo-apero/exampleSite/config.toml @@ -0,0 +1,193 @@ +baseURL = "/" +theme = "hugo-apero" +languageCode = "en" +title = "Hugo Apéro" +author = "Alison Hill" +copyright = "" # set to override the auto generated copyright using org info and now year +googleAnalytics = "" +disqusShortname = "" # see params.utterances to use utterances instead of Disqus +metaDataFormat = "yaml" +footnoteReturnLinkContents = "↩" # ↩ +# set deliberately low for testing choose your preffered number based on the blog layout you've chosen +paginate = 5 +preserveTaxonomyNames = true +ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_cache$", "\\.knit\\.md$", "\\.utf8\\.md$"] +enableEmoji = true + +[markup] + defaultMarkdownHandler = "goldmark" + [markup.goldmark.renderer] + unsafe = true # Enable user to embed HTML snippets in Markdown content. + hardwraps = false + [markup.tableOfContents] + startLevel = 2 + endLevel = 2 + ordered = false + [markup.highlight] + # one of: https://xyproto.github.io/splash/docs/ + style = "github" + +[params] + orgName = "RStudio" + orgLocal = "Anywhere" + description = "A modern, beautiful, and easily configurable blog theme for Hugo." + favicon = "/img/favicon.ico" + logo = "/img/blogophonic-mark-dark.png" + mainSections = ["blog", "project", "talk"] + navallcaps = true + # show/hide social icons in site header & footer + # configure social icons and links below in [[params.social]] + socialInHeader = false + socialInFooter = true + # Default image for social sharing and search engines. + # Place image file in `static` folder and specify image name here. + sharing_image = "/img/papillons.jpg" + # Twitter username (without @). Used when a visitor shares your site on Twitter. + twitter = "apreshill" + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "sky" + + # or, leave theme empty & make your own palette + # see docs at https://hugo-apero.netlify.app/blog/color-themes/ + # the custom scss file must be in the assets/ folder + # add the filename name here, without extension + # to use hex colors instead of named tachyons colors, include "hex" in filename + custom_theme = "" + + # use an embedded font-family + # serif options: Fraunces / EB Garamond / Bitter + # sans-serif options: Commissioner / Atkinson Hyperlegible / Metropolis + # if you import your own fonts, name them here too + customtextFontFamily = "Commissioner" + customheadingFontFamily = "Fraunces" + # alternatively, leave empty and select basic font options: sans-serif or serif + # for more http://tachyons.io/docs/typography/font-family/ + textFontFamily = "sans-serif" + headingFontFamily = "sans-serif" + + # Configuration of https://utteranc.es/ for comments + [params.utterances] + use_utterances = true + repo_name = "apreshill/apero" + issue_term = "pathname" # url, pathname, or title + theme = "boxy-light" + label = "comments :crystal_ball:" + + # Configuration of math rendering + [params.math] + renderer = "katex" # one of "mathjax" / "katex" + + # Social icons may appear on homepage and in site header or footer + # Configure show/hide above - add as many as you like below + # Icon pack "fab" includes brand icons, see: https://fontawesome.com/icons?d=gallery&s=brands&m=free + # Icon pack "fas" includes solid icons, see: https://fontawesome.com/icons?d=gallery&s=solid&m=free + # Icon pack "far" includes regular icons, see: https://fontawesome.com/icons?d=gallery&s=regular&m=free + [[params.social]] + icon = "github" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://github.com/apreshill/apero" + [[params.social]] + icon = "facebook-square" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://www.facebook.com/hashtag/ap%C3%A9ro" + [[params.social]] + icon = "instagram" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://www.instagram.com/explore/tags/apero/" + [[params.social]] + icon = "twitter" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://twitter.com/hashtag/apéro" + [[params.social]] + icon = "impactstory" # icon name without the 'fa-' + icon_pack = "ai" + url = "https://impactstory.org/u/0000-0002-8082-1890" + [[params.social]] + icon = "orcid" # icon name without the 'fa-' + icon_pack = "ai" + url = "http://orcid.org/0000-0002-8082-1890" + [[params.social]] + icon = "rss" # icon name without the 'fa-' + icon_pack = "fas" + url = "/blog/index.xml" + +[taxonomies] + category = "categories" + series = "series" + tag = "tags" + +[menu] + # Configure header + [[menu.header]] + name = "About" + title = "About Blogophonic" + url = "/about/" + weight = 1 + [[menu.header]] + name = "Blog" + title = "Blog" + url = "/blog/" + weight = 2 + [[menu.header]] + name = "Projects" + title = "Project Portfolio" + url = "/project/" + weight = 3 + [[menu.header]] + name = "Talks" + title = "Talks" + url = "/talk/" + weight = 4 + [[menu.header]] + name = "A collection" + title = "A collection" + url = "/collection/" + weight = 5 + [[menu.header]] + name = "Elements" + title = "Element Page" + url = "/elements/" + weight = 6 + + # Configure footer + [[menu.footer]] + name = "License" + title = "License" + url = "/license/" + weight = 1 + [[menu.footer]] + name = "Contact" + title = "Contact form" + url = "/contact/" + weight = 2 + [[menu.footer]] + name = "Contributors" + title = "Contributors" + url = "/contributors/" + weight = 3 + +# see https://gohugo.io/about/hugo-and-gdpr/ +[privacy] + [privacy.disqus] + disable = false + [privacy.googleAnalytics] + disable = false + anonymizeIP = true + respectDoNotTrack = true + [privacy.instagram] + disable = false + simple = true + [privacy.twitter] + disable = false + enableDNT = true + simple = false + [privacy.vimeo] + disable = false + enableDNT = true + simple = true + [privacy.youtube] + disable = false + privacyEnhanced = true diff --git a/themes/hugo-apero/exampleSite/content/_index.md b/themes/hugo-apero/exampleSite/content/_index.md new file mode 100644 index 0000000..8df7b67 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/_index.md @@ -0,0 +1,18 @@ +--- +title: "Hugo Apéro" +subtitle: "A Hugo theme you'll want to hang out with" +description: "Sit down, relax, and get to know Hugo Apéro. Built on top of Blogophonic, we wanted to create a polished Hugo theme with the right features for a true personal website. We set out to create a theme that is a pleasure to learn, and one that helps others get to know you better. It is more than a blog, with flexible custom layouts that help you introduce yourself online." +images: + - img/revoir.jpg +image_left: true +text_align_left: false +show_social_links: true # specify social accounts in site config +show_action_link: true +action_link: /about +action_label: "Read More →" +action_type: text # text, button +type: home +--- + +** index doesn't contain a body, just front matter above. +See index.html in the layouts folder ** diff --git a/themes/hugo-apero/exampleSite/content/about/_index.md b/themes/hugo-apero/exampleSite/content/about/_index.md new file mode 100644 index 0000000..5e36847 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/about/_index.md @@ -0,0 +1,13 @@ +--- +title: "About" +description: | + A website template for Hugo developed by RStudio & Formspree and available for free. +show_header: true +sidebar_left: false +# Keep this! Do not edit. +cascade: + headless: true +--- + +** index doesn't contain a body, just front matter above. +See the header / main / sidebar folders to edit the index.md files ** diff --git a/themes/hugo-apero/exampleSite/content/about/header/index.md b/themes/hugo-apero/exampleSite/content/about/header/index.md new file mode 100644 index 0000000..ae1b90e --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/about/header/index.md @@ -0,0 +1,12 @@ +--- +## Configure header of page +text_align_right: false +show_title_as_headline: false +headline: | + Hi, my name is Hugo Apéro. Nice to meet you. +--- + + +I'm a Hugo theme you'll want to hang out with. :fr: + +The page you are reading is based on a markdown file- look in `content/about/` to edit. There, look inside the `header`, `main`, and `sidebar` folders to get started building your own "about" page. \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/about/main/index.md b/themes/hugo-apero/exampleSite/content/about/main/index.md new file mode 100644 index 0000000..dd1fca7 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/about/main/index.md @@ -0,0 +1,18 @@ +--- +## Configure page content in wide column +title: "Why apéro?" # leave blank to exclude +number_featured: 1 # pulling from mainSections in config.toml +use_featured: false # if false, use most recent by date +number_categories: 3 # set to zero to exclude +show_intro: true +intro: | + Apéro is a unique kind of casual get-together in French culture, when you gather with friends and get to know each other better over some apéritifs, snacks, and anything in between. A good apéro is one where you'd happily spend a few hours just hanging out. + + I hope this theme helps you create your own virtual apéro. A place where you and your site's visitors enjoy spending time, and one that helps folks get to know you better. +show_outro: true +outro: | + Sincere thanks to [Maëlle Salmon](https://masalmon.eu/) for her help naming this Hugo theme! +--- + +** index doesn't contain a body, just front matter above. +See about/list.html in the layouts folder ** \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/about/sidebar/audio.m4a b/themes/hugo-apero/exampleSite/content/about/sidebar/audio.m4a new file mode 100644 index 0000000..d0e0fb7 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/about/sidebar/audio.m4a differ diff --git a/themes/hugo-apero/exampleSite/content/about/sidebar/avatar.jpg b/themes/hugo-apero/exampleSite/content/about/sidebar/avatar.jpg new file mode 100644 index 0000000..7a45ab0 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/about/sidebar/avatar.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/about/sidebar/index.md b/themes/hugo-apero/exampleSite/content/about/sidebar/index.md new file mode 100644 index 0000000..962465d --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/about/sidebar/index.md @@ -0,0 +1,19 @@ +--- +## Configure sidebar content in narrow column +author: "Hugo Apéro" +role: "A Hugo theme" +avatar_shape: rounded # circle, square, rounded, leave blank to exclude +show_social_links: true # specify social accounts in site config +audio_link_label: "How to say my name" # leave blank to exclude +link_list_label: "Interests" # bookmarks, elsewhere, etc. +link_list: +- name: Paris + url: https://en.wikipedia.org/wiki/Paris +- name: Pastries + url: https://en.wikipedia.org/wiki/Pastry +- name: People + url: https://en.wikipedia.org/wiki/People +--- + +** index doesn't contain a body, just front matter above. +See about/list.html in the layouts folder ** \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/_index.md b/themes/hugo-apero/exampleSite/content/blog/_index.md new file mode 100644 index 0000000..64c1ebe --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/_index.md @@ -0,0 +1,42 @@ +--- +title: A Blog That Works +description: | + This is a fully featured blog that supports categories, + tags, series, and pagination. +author: "The R Markdown Team @RStudio" +show_post_thumbnail: true +thumbnail_left: true # for list-sidebar only +show_author_byline: true +show_post_date: true +# for listing page layout +layout: list-sidebar # list, list-sidebar, list-grid + +# for list-sidebar layout +sidebar: + title: A Sidebar for Your Thoughts + description: | + This is a fully featured blog that supports categories, + tags, series, and pagination. Even this sidebar offers + a ton of customizations. + + Check out the _index.md file in the /blog folder + to edit this content. + author: "The R Markdown Team @RStudio" + text_link_label: Subscribe via RSS + text_link_url: /index.xml + show_sidebar_adunit: true # show ad container + +# set up common front matter for all pages inside blog/ +cascade: + author: "The R Markdown Team @RStudio" + show_author_byline: true + show_post_date: true + show_comments: true # see site config to choose Disqus or Utterances + # for single-sidebar layout + sidebar: + text_link_label: View recent posts + text_link_url: /blog/ + show_sidebar_adunit: false # show ad container +--- + +** No content below YAML for the blog _index. This file provides front matter for the listing page layout and sidebar content. It is also a branch bundle, and all settings under `cascade` provide front matter for all pages inside blog/. You may still override any of these by changing them in a page's front matter.** diff --git a/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-featured.png b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-featured.png new file mode 100644 index 0000000..9469b9d Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-featured.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-screenshot.png b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-screenshot.png new file mode 100644 index 0000000..1b74fe7 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/built-in-contact-form-screenshot.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/formspree-logo.png b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/formspree-logo.png new file mode 100644 index 0000000..6b42767 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/formspree-logo.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/index.md b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/index.md new file mode 100644 index 0000000..db53b8e --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/built-in-contact-form/index.md @@ -0,0 +1,54 @@ +--- +title: "Built-in Contact Form" +subtitle: "Form to email feature powered by Formspree" +excerpt: "This theme has a form-to-email feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the form front matter." +date: 2019-07-01 +author: "Eric Anderson" +draft: false +tags: + - hugo-site +categories: + - Theme Features +# layout options: single, single-sidebar +layout: single +--- + +![Formspree Logo](formspree-logo.png) + +## [Formspree](https://formspree.io) makes it easy to receive submissions from HTML forms on your static website. + +--- + +### Functional Form + +This theme has a **form-to-email** feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the front matter of the form +(`/content/forms/contact.md`). Of course, the example shown below (`your@email.here`) must not be used. Please use your actual email address. + +```toml +# please replace with a valid Formspree form id or email address +formspree_form_id: your@email.here +``` + +Update that file and you're ready to begin receiving submissions. Just submit +the active form for the first time, and complete the email address verification +step with Formspree, and your contact form is live. The next time someone +fills it out, the submission will land in your inbox. + +### Multiple Layouts + +The files included with the theme have a contact page ready for copy/paste, or +you can type `hugo new forms/contact.md` and you're off to the races. There are two +layouts for `forms` – `split-right`, and `split-left` – you guessed it, one puts +the form on the right and the other on the left. You just fill out the front +matter, and the rest is automatic. + +```toml +# layout options: split-right or split-left +layout: split-right +``` + +![Contact Form Split Right Layout Screenshot](built-in-contact-form-screenshot.png) + +Both layouts display the page title and description opposite the form, and you +can also choose to show your social icon links if you have those configured in +the `config.toml` file. diff --git a/themes/hugo-apero/exampleSite/content/blog/color-themes/color-featured.png b/themes/hugo-apero/exampleSite/content/blog/color-themes/color-featured.png new file mode 100644 index 0000000..102ce99 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/color-themes/color-featured.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/color-themes/index.md b/themes/hugo-apero/exampleSite/content/blog/color-themes/index.md new file mode 100644 index 0000000..de54359 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/color-themes/index.md @@ -0,0 +1,162 @@ +--- +title: "Style your site colors" +subtitle: "Use a built-in color theme, or design your own with a Tachyons palette or your own hex codes." +excerpt: "This theme offers three ways to customize your site's colors. Use one of 8 built-in color themes, or style your own palette using named colors from the Tachyons design system. You may also bring your own hex codes to make fully custom color palette that is all your own." +date: 2021-01-27 +author: "Alison Hill & Eric Anderson" +draft: false +tags: + - style +categories: + - Theme Features +# layout options: single, single-sidebar +layout: single +--- + +You can totally customize your site's theme colors within minutes of +creating a new site. Read on to find out how, and decide which of the +three options meets your needs. + +## Use a color theme + +Hugo Apéro includes 8 built-in color themes that work "out of the box." +This means you can use a color theme to quickly customize the look of your site +without needing to write any CSS. You can select the color theme in your `config.toml` file. Scroll down to find: + +```toml +[params] + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "" +``` + +Type one of the options like `"peach"` inside the quotation marks. If you have a Hugo server started (i.e., by using `blogdown::serve_site()`), when you save the `config.toml` file, your site preview will immediately and automatically update with your new color theme. For example, let's choose `"peach"`! + +```toml +[params] + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "peach" +``` + +You should see: + +![Switching to the peach color theme](peach.png) + +If you select a theme that isn't one of the available options (like `"pecan"`), +you should see an error message print to your viewer pane in the RStudio IDE: + +```bash +Selected theme 'pecan' is not one of the options. +``` + +All of the color themes were designed to meet [WCAG 2.0 level AA requirements](https://webaim.org/articles/contrast/) for contrast ratios. + +## Use Tachyons named colors + +This theme uses [Tachyons](https://tachyons.io), a design system that allows you +to design gorgeous interfaces in the browser with little effort. + +![Tachyons Logo Script](tachyons-logo-script.png) + +We've leveraged the [accessible color +combinations](https://tachyons.io/docs/themes/skins/) included with Tachyons to +offer an easy way for you to setup your site using your favorite colors. Here are the steps: + ++ Create an `assets/` folder in the root of your website project (don't add it to your `themes/` directory!). + ++ Create a `.scss` file in the new `assets/` folder. + ++ Copy the code below for a full set of color parameters giving you control over the theme color scheme. For an option like `siteBgColor`, for example, you can type one of the predefined color names from Tachyons and save the file. Use only color names as shown in the "Color Palette" section of . + +```scss +// basic color options: use only color names as shown in the +// "Color Palette" section of https://tachyons.io/docs/themes/skins/ +$siteBgColor: "near-white" ; +$sidebarBgColor: "light-gray" ; +$textColor: "dark-gray" ; +$sidebarTextColor: "mid-gray" ; +$headlineColor: "dark-pink" ; +$headingColor: "near-black" ; +$bodyLinkColor: "blue" ; +$navLinkColor: "near-black" ; +$sidebarLinkColor: "near-black" ; +$footerTextColor: "silver" ; +$buttonTextColor: "near-white" ; +$buttonBgColor: "black" ; +$buttonHoverTextColor: "white" ; +$buttonHoverBgColor: "blue" ; +$borderColor: "moon-gray" ; +``` + +Two last steps- back in your `config.toml` file: + +1. Leave the theme blank (so `theme = ""` with empty quotes) in your `config.toml` file. + +1. Add the name of your theme file (minus the `.scss` extension) that you added to `assets/` as the `custom_theme`. + +Your final `config.toml` would look something like this: + +```toml +[params] + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "" + + # or, leave theme empty & make your own palette + # see docs at https://hugo-apero.netlify.app/blog/color-themes/ + # the custom scss file must be in the assets/ folder + # add the filename name here, without extension + # to use hex colors instead of named tachyons colors, include "hex" in filename + custom_theme = "named-colors" +``` + +## Bring your own hex codes + +Let's say you have a style guide to follow and `washed-blue` just won't cut the +mustard. There is a bypass of these +predefined colors built in, you just need to do *one very special extra step*. Follow the steps above for using named Tachyons colors, but then, add `hex` anywhere in the filename for your custom `.scss` (for example, you may name this file `hex-colors.scss`). If you include `hex` in the filename, you get to assign your own HEX codes, like this: + +```scss +// set custom hex colors +$siteBgColorCustom: #e3e3da; +$sidebarBgColorCustom: #dbdbd2; +$textColorCustom: #666260; +$sidebarTextColorCustom: #666260; +$headlineColorCustom: #103742; +$headingColorCustom: #103742; +$bodyLinkColorCustom: #c4001a; +$navLinkColorCustom: #c4001a; +$sidebarLinkColorCustom: #c4001a; +$footerTextColorCustom: #918f8d; +$buttonTextColorCustom: #f7f7f4; +$buttonHoverTextColorCustom: #f9f9f8; +$buttonBgColorCustom: #103742; +$buttonHoverBgColorCustom: #c4001a; +$borderColorCustom: #c4beb9; +``` + +After adding the name of your theme file (minus the `.scss` extension) that you added to `assets/` as the `custom_theme`, your final `config.toml` would look something like this: + +```toml +[params] + + # use a built-in color theme + # one of: forest / grayscale / peach / plum / + # poppy / sky / violet / water + theme = "" + + # or, leave theme empty & make your own palette + # see docs at https://hugo-apero.netlify.app/blog/color-themes/ + # the custom scss file must be in the assets/ folder + # add the filename name here, without extension + # to use hex colors instead of named tachyons colors, include "hex" in filename + custom_theme = "hex-colors" +``` + diff --git a/themes/hugo-apero/exampleSite/content/blog/color-themes/peach.png b/themes/hugo-apero/exampleSite/content/blog/color-themes/peach.png new file mode 100644 index 0000000..d1bc53c Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/color-themes/peach.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/color-themes/tachyons-logo-script.png b/themes/hugo-apero/exampleSite/content/blog/color-themes/tachyons-logo-script.png new file mode 100644 index 0000000..58a2645 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/color-themes/tachyons-logo-script.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-cover.png b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-cover.png new file mode 100644 index 0000000..36e7049 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-cover.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-featured.png b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-featured.png new file mode 100644 index 0000000..4226fdc Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/css-grid-featured.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/index.md b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/index.md new file mode 100644 index 0000000..9163803 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/css-grid-scaffold/index.md @@ -0,0 +1,56 @@ +--- +title: "CSS Grid Scaffold" +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2019-07-02 +author: "Eric Anderson" +draft: false +tags: +- hugo-site +categories: +- Theme Features +# layout options: single, single-sidebar +layout: single-sidebar +--- + +### “Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.” + +*— [Chris House, A Complete Guide to CSS Grid Layout](http://chris.house/blog/a-complete-guide-css-grid-layout/)* [^1] + +--- + +## Overview + +Since I began building websites in Y2K, I've lost count how many times the phrase "...there's got to be a better way to do this" has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid `TABLE`. + +Well, technology sure has come a long way since slicing up images to match the table-based layout that was just created in Dreamweaver. You'd be surprised (or maybe you wouldn't) how challenging the standard header, content, sidebar, footer layout could be to actually get right. + +{{< figure src="css-grid-cover.png" alt="Traditional right sidebar layout" caption="A visual example of the traditional right sidebar layout" >}} + +--- + +### ERMAHGERD + +A proper grid is what we always wanted, no ... _needed_ to build websites with a solid, unbreakable structure. And that's why I used it in this theme. I call this feature a "scaffold" because none of the _content_ is laid out on this grid. Only the main _structure_: consisting of the `header`, `footer`, `main`, `aside`, and `footer`. As you can tell by this quote from the [W3C](https://www.w3.org/TR/css-grid-1/) on the candidate recommendation itself, Grid is the perfect tool for the job: + +> ##### CSS Grid Layout Module +> +> This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. +> +> — _W3C_ + +## A happy ending + +CSS Grid is a total game changer, IMHO. Compared to the bottomless pit of despair that is the old way, the new way of building a site structure can be done in as little as 5 lines of CSS. Of course, it always takes more than that, but not much. I mean this is really the meat of the deal: + +```css +.grid-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, auto); +} +``` + +#### What an amazing time to be a web developer. Anyway, I hope you enjoy this "feature" that you'll probably never notice or even see. Maybe that's the best part of a good user interface – the hidden stuff that just works. + +[^1]: The original article cited here is now updated and maintained by the staff over at CSS-Tricks. Bookmark their version if you want to dive in and learn about CSS Grid: [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) diff --git a/themes/hugo-apero/exampleSite/content/blog/evergreen/featured.jpg b/themes/hugo-apero/exampleSite/content/blog/evergreen/featured.jpg new file mode 100644 index 0000000..b95f586 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/evergreen/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/evergreen/index.md b/themes/hugo-apero/exampleSite/content/blog/evergreen/index.md new file mode 100644 index 0000000..2d36891 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/evergreen/index.md @@ -0,0 +1,62 @@ +--- +title: "An evergreen post" +subtitle: "Testing" +excerpt: "Good stuff" +date: 2021-01-20 +author: "Alison Hill" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- evergreen +--- + +## Rendering mathematical equations + +Examples from the [mathjax demo](https://www.mathjax.org/#demo). +But they work with `katex` as well. + +### Rmarkdown + +In `.Rmarkdown` documents, you can use either + +``` +$a \ne 0$ +``` + +to get inline math: `\(a \ne 0\)`. +There is no conflict with using dollar symbols regularly, because `knitr` automatically escapes freestanding dollar symbols. + +And you can use + +``` +$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ +``` + +to get a math paragraph: + +$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ + +### md + +In `.md` documents, you can **not** use the single dollar syntax. +The double dollar syntax still gives you a math paragraph. + +``` +$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ +``` + +$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$ + +In order to get inline equations, use: + +``` +`\(a \ne 0\)` +or +\\(a \ne 0\\) +``` + +to get: `\(a \ne 0\)`. + + + diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/font-assets-css.png b/themes/hugo-apero/exampleSite/content/blog/fonts/font-assets-css.png new file mode 100644 index 0000000..ad3adf3 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/font-assets-css.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/font-config.png b/themes/hugo-apero/exampleSite/content/blog/fonts/font-config.png new file mode 100644 index 0000000..5deed67 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/font-config.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/font-static-files.png b/themes/hugo-apero/exampleSite/content/blog/fonts/font-static-files.png new file mode 100644 index 0000000..98748dc Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/font-static-files.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/fonts-featured.png b/themes/hugo-apero/exampleSite/content/blog/fonts/fonts-featured.png new file mode 100644 index 0000000..376a443 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/fonts-featured.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/hachi-font.png b/themes/hugo-apero/exampleSite/content/blog/fonts/hachi-font.png new file mode 100644 index 0000000..46edcf4 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/hachi-font.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/index.md b/themes/hugo-apero/exampleSite/content/blog/fonts/index.md new file mode 100644 index 0000000..8bd1ca4 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/fonts/index.md @@ -0,0 +1,165 @@ +--- +title: "Style your site typography" +subtitle: "Use an embedded font (no CSS required!), rely on system fonts reliably using Tachyons, or bring your own font files- your choice." +excerpt: "This theme offers three ways to customize your site's fonts. Choose from 6 embedded font options, including 3 serif and 3 sans-serif fonts, or rely on system fonts with reliable fallbacks using Tachyons. You may also bring your own font files (CSS required!)." +date: 2021-01-27 +author: "Alison Hill" +draft: false +tags: + - style +categories: + - Theme Features +# layout options: single, single-sidebar +layout: single +--- + +As with [color themes](../color-themes), you can completely customize your site's fonts within minutes of creating a new site. How you do it depends on how much control and customization you need. + +## Embedded fonts + +Hugo Apéro includes 6 embedded fonts that work "out of the box." We selected 3 serif and 3 sans-serif options that we thought looked good with this theme, in our humble opinions. All embedded fonts include [real italics](https://www.marksimonson.com/notebook/view/FakevsTrueItalics) so you may emphasize to your heart's content :heart:! How to choose? + +You may choose fonts for headings and body text in your site's `config.toml` file. Scroll down to find: + +```toml +[params] + + # use an embedded font-family + # serif options: Fraunces / EB Garamond / Bitter + # sans-serif options: Commissioner / Alegreya Sans / Metropolis + # if you import your own fonts, name them here too + customtextFontFamily = "Commissioner" + customheadingFontFamily = "Fraunces" +``` + +Here are the links to each font so you can see them in action: + +
Embedded font options
+ + + + + + + + + + + + + + + + + + + + + +
Serif optionsSans-serif options
FrauncesCommissioner
EB GaramondAlegreya Sans
BitterMetropolis
+ +## Use attractive system fonts + +Alternatively, you may want to use a system font, which you know will be rendered reliably across languages, operating systems, and browsers. Apéro uses [Tachyons](https://tachyons.io) to render beautiful system font stacks for your site, making it super simple to configure and blazing fast to load. The default choices are `sans-serif` or `serif`, and can be assigned to headings and body text, respectively. Additional options can be found in the [Tachyons Font Family Reference](https://tachyons.io/docs/typography/font-family/). Why use system fonts? + +> Relying on systems fonts greatly improves page performance and can also help your web application/site blend in with the user’s operating system. Readability is strongly linked to familiarity, so this helps create a more fluid reading experience, allowing your users to focus on your content. +> +> — [Tachyons typography docs](http://tachyons.io/docs/typography/font-family/) + +Here is a step-by-step, using the `config.toml` file: + ++ Leave both `customtextFontFamily` and `customheadingFontFamily` blank (with empty quotes, or comment out the line entirely). + ++ Just below those keys, select a `textFontFamily` and `headingFontFamily` from the options listed [here](http://tachyons.io/docs/typography/font-family/). All values are lower case, and exclude the `.` in front. + +```toml +[params] + + # use an embedded font-family + # serif options: Fraunces / EB Garamond / Bitter + # sans-serif options: Commissioner / Alegreya Sans / Metropolis + # if you import your own fonts, name them here too + customtextFontFamily = "" + customheadingFontFamily = "" + + # alternatively, leave empty and select basic font options: sans-serif or serif + # for more http://tachyons.io/docs/typography/font-family/ + textFontFamily = "sans-serif" + headingFontFamily = "serif" +``` + +For example, you may choose: +```toml + textFontFamily = "courier" + headingFontFamily = "baskerville" +``` + +And your site would look like: + +![](system-font.png) + +## Use a custom font + +Alright alright alright. So you still want to use your own fonts. You'll need to do a bit more work to get this working, but not too much. If you made it here, I'm going to hope that you know a bit more about [self-hosting fonts](https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/). + +Here are the steps: + ++ Create a `static/fonts/` folder, and add the actual font files you'd like to embed to that folder. To download Google fonts, there is a [popular app](https://google-webfonts-helper.herokuapp.com/fonts) to help you. Select a font, then download the zip file containing the font files you'll need to embed. + ++ Create an `assets/` folder in the root of your website project (don't add it to your `themes/` directory!). + ++ Create a file named `custom.scss` in the new `assets/` folder to define the [`@font-face` CSS rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) for each font/weight combination you downloaded. For example, here is a `custom.scss` that imports the [Nanum Myeongjo font](https://fonts.google.com/specimen/Nanum+Myeongjo). The [webfonts helper app](https://google-webfonts-helper.herokuapp.com/fonts) will help write your CSS for you (using `../fonts/` to customize the folder prefix correctly by default), like this: + +```scss +/* nanum-myeongjo-regular - latin */ +@font-face { + font-family: 'Nanum Myeongjo'; + font-style: normal; + font-weight: 400; + src: local(''), + url('../fonts/nanum-myeongjo-v15-latin-regular.woff2') format('woff2'), + url('../fonts/nanum-myeongjo-v15-latin-regular.woff') format('woff'); +} +``` + +Your final step is to go back to your `config.toml` file and add the `font-family` values for the font(s) you want to use to the `customtextFontFamily` and/or `customheadingFontFamily` keys. You can combine custom fonts with system fonts too. + +```toml +[params] + + # use an embedded font-family + # serif options: Fraunces / EB Garamond / Bitter + # sans-serif options: Commissioner / Alegreya Sans / Metropolis + # if you import your own fonts, name them here too + customtextFontFamily = "" + customheadingFontFamily = "Nanum Myeongjo" + + # alternatively, leave empty and select basic font options: sans-serif or serif + # for more http://tachyons.io/docs/typography/font-family/ + textFontFamily = "sans-serif" + headingFontFamily = "" +``` + +Here is what this could look like (thanks to workshop participant [Issac Lee](https://github.com/issactoast)!) + +![](isaac-font.png) + +If you do all this, you have my consent to delete the theme's `static/fonts/` folder that holds all the custom embedded fonts so you aren't carrying those unnecessary files around with your site (do not delete the `static/webfonts/` folder- that holds the [Font Awesome icons](https://fontawesome.com/)!). + +For example, let's examine the 3 commits necessary to make [this magic](https://google-webfonts-helper.herokuapp.com/fonts/hachi-maru-pop?subsets=latin) happen: + +### Commit #1 + +![](font-static-files.png) + +### Commit #2 + +![](font-assets-css.png) + +### Commit #3 + +![](font-config.png) + +### Final result + +![](hachi-font.png) \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/isaac-font.png b/themes/hugo-apero/exampleSite/content/blog/fonts/isaac-font.png new file mode 100644 index 0000000..c1ac3f4 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/isaac-font.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/system-font.png b/themes/hugo-apero/exampleSite/content/blog/fonts/system-font.png new file mode 100644 index 0000000..f5609f4 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/system-font.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/fonts/tachyons-logo-script.png b/themes/hugo-apero/exampleSite/content/blog/fonts/tachyons-logo-script.png new file mode 100644 index 0000000..58a2645 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/fonts/tachyons-logo-script.png differ diff --git a/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.Rmarkdown b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.Rmarkdown new file mode 100644 index 0000000..8552b5f --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.Rmarkdown @@ -0,0 +1,33 @@ +--- +title: "An Rmarkdown post" +subtitle: "" +excerpt: "testing the excerpt field" +date: 2020-12-30 +author: "Alison Hill" +draft: false +images: +series: +tags: +categories: +layout: single +--- + + +## Air quality + +```{r} +with(airquality, boxplot(Temp ~ Month)) +``` + + +```{r} +with(airquality, plot(Ozone ~ Temp)) +``` + +```{r} +mlev <- levels(with(airquality, as.factor(Month))) +with(airquality, plot(Ozone ~ Temp, + pch = as.numeric(mlev), + col = mlev)) +``` + diff --git a/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.html b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.html new file mode 100644 index 0000000..3590609 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.html @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + +An Rmarkdown post + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+

Air quality

+
with(airquality, boxplot(Temp ~ Month))
+

+
with(airquality, plot(Ozone ~ Temp))
+

+
mlev <- levels(with(airquality, as.factor(Month)))
+with(airquality, plot(Ozone ~ Temp, 
+                      pch = as.numeric(mlev), 
+                      col = mlev))
+

+
+ + + + +
+ + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.markdown b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.markdown new file mode 100644 index 0000000..d16dca9 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/rmarkdown/index.markdown @@ -0,0 +1,42 @@ +--- +title: "An Rmarkdown post" +subtitle: "" +excerpt: "testing the excerpt field" +date: 2020-12-30 +author: "Alison Hill" +draft: false +images: +series: +tags: +categories: +layout: single +--- + + +## Air quality + + +```r +with(airquality, boxplot(Temp ~ Month)) +``` + + + + + +```r +with(airquality, plot(Ozone ~ Temp)) +``` + + + + +```r +mlev <- levels(with(airquality, as.factor(Month))) +with(airquality, plot(Ozone ~ Temp, + pch = as.numeric(mlev), + col = mlev)) +``` + + + diff --git a/themes/hugo-apero/exampleSite/content/blog/seedling/featured.jpg b/themes/hugo-apero/exampleSite/content/blog/seedling/featured.jpg new file mode 100644 index 0000000..b319027 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/seedling/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/seedling/index.md b/themes/hugo-apero/exampleSite/content/blog/seedling/index.md new file mode 100644 index 0000000..f0c669a --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/seedling/index.md @@ -0,0 +1,72 @@ +--- +title: "Using panelsets" +subtitle: "How to add panelsets in plain markdown posts." +excerpt: "Add tabbed sections to your posts." +date: 2021-01-02 +author: "Alison Hill" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- Theme features +--- + +Courtesy of panelset.js by Garrick Aden-Buie, from his xaringanExtra package: https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset + +For example, this panelset: + +{{< panelset class="greetings" >}} +{{< panel name="Hello! :wave:" >}} + hello +{{< /panel >}} +{{< panel name="Goodbye :dash:" >}} + goodbye +{{< /panel >}} +{{< /panelset >}} + +Was created by combining this theme's `panelset` and `panel` shortcodes: + +```go +{{}} +{{}} + hello +{{}} +{{}} + goodbye +{{}} +{{}} +``` + + +You could also revert to HTML as well. For example, this panelset: + + +
+
+
Question
+ +

Which came first: the :chicken: or the :egg:?

+
+
+
Answer :hatching_chick:
+ +

Team :egg: FTW!

+
+
+ +Was created with this HTML code: + +```html +
+
+
Question
+ +

Which came first: the :chicken: or the :egg:?

+
+
+
Answer :hatching_chick:
+ +

Team :egg: FTW!

+
+
+``` \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/sidebar-listing.jpg b/themes/hugo-apero/exampleSite/content/blog/sidebar-listing.jpg new file mode 100644 index 0000000..043295e Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/sidebar-listing.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/social/featured.jpg b/themes/hugo-apero/exampleSite/content/blog/social/featured.jpg new file mode 100644 index 0000000..f43193a Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/social/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/social/index.md b/themes/hugo-apero/exampleSite/content/blog/social/index.md new file mode 100644 index 0000000..49115ea --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/social/index.md @@ -0,0 +1,98 @@ +--- +title: "Set up your social" +subtitle: "Social icons may appear on several pages throughout your site. Learn how to set them up, and control where they show up." +excerpt: "This theme offers built-in Font Awesome icons for organizing your collection of social accounts and their links. Use icons to help visitors find you wherever you want to be found, and learn how to show or hide them in your site's header, footer, homepage, about page, and contact form." +date: 2021-01-28 +author: "Alison Hill & Eric Anderson" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- Theme Features +--- + +There are five places where you can choose to show social icons. Here is the tl;dr: + ++ site header (set in `config.toml`), ++ site footer (set in `config.toml`), ++ [homepage](/) (set in `content/_index.md`), ++ [about page](/about) in the sidebar (set in `content/about/sidebar/index.md`), and ++ [contact page](/contact) (set in `content/form/contact.md`). + +Read on to learn how to set up your social icons, and how to show/hide them. + +## Configure social + +Wherever you end up wanting to show your social icons, you'll need to start by setting up the links in your site `config.toml` file. Open that up and scroll down to the `[[params.social]]` section. The start of it looks like this: + +```toml +[params] + + + # Social icons may appear on your site header, footer, and other pages + # Add as many icons as you like below + # Icon pack "fab" includes brand icons, see: https://fontawesome.com/icons?d=gallery&s=brands&m=free + # Icon pack "fas" includes solid icons, see: https://fontawesome.com/icons?d=gallery&s=solid&m=free + # Icon pack "far" includes regular icons, see: https://fontawesome.com/icons?d=gallery&s=regular&m=free + [[params.social]] + icon = "github" # icon name without the 'fa-' + icon_pack = "fab" + url = "https://github.com/apreshill/apero" + [[params.social]] +``` + +For each link, you'll need to start a new portion that begins with `[[params.social]]`. Then, pick your `icon` and `icon_pack` from the [Font Awesome](https://fontawesome.com/) free icon library: + ++ Icon pack "fab" includes [brand icons](https://fontawesome.com/icons?d=gallery&s=brands&m=free) + ++ Icon pack "fas" includes [solid icons](https://fontawesome.com/icons?d=gallery&s=solid&m=free) + ++ Icon pack "far" includes [regular icons](https://fontawesome.com/icons?d=gallery&s=regular&m=free) + +Finally, add the `url` that you would like users to go to when they click on that icon. All external links (i.e., those that start with `http`) will open in a new tab (that is, `target="_blank"`); relative links to pages within the site will open in the same window. + +Now you should be all set to show/hide your social icons. Each of these will pull the social icons and urls from the settings you just created in your site configuration file. + +## Show social in site header and footer + +Let's start with the header and footer, as those are site-wide. Open up your site `config.toml` file again and scroll down to the `[params]` section (it is actually :up: from where you configured these icons): + +```toml +[params] + + + # show/hide social icons in site header & footer + # configure social icons and links below in [[params.social]] + socialInHeader = false + socialInFooter = true +``` + +That was easy! + +## Show social in homepage + +Open up `content/_index.md`. That file's YAML controls what you see on the homepage. Set `show_social_links` like so: + +```yaml +show_social_links: true # specify social accounts in site config +``` + +If you set this to `true` to show the icons on the homepage, your social icons in the footer will not show up even when you set `socialInFooter = true`, so as not to litter your site with too many icons. + +## Show social in about page sidebar + +Open up `content/about/sidebar/index.md`. That file's YAML controls what you see in the sidebar on the about page. Set `show_social_links` like so: + +```yaml +show_social_links: true # specify social accounts in site config +``` + +## Show social in contact page + +You may use the YAML for your contact page (located in `content/form/contact.md`): + +```yaml +--- +show_social_links: true # specify social accounts in site config +--- +``` diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/01-spoonful.md b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/01-spoonful.md new file mode 100644 index 0000000..74ed72b --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/01-spoonful.md @@ -0,0 +1,25 @@ +--- +title: "A first post" +weight: 1 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-01 +draft: false +--- + +{{< here >}} + + +## does this work? + +### or this? + +--- + +Let's start. + +## beginning + +## middle + +## end \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/index.md b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/index.md new file mode 100644 index 0000000..3a1a8ad --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/index.md @@ -0,0 +1,23 @@ +--- +title: "A second post" +weight: 2 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-02 +draft: false +--- + +{{< here >}} + + +## part 2! + +### does this work? + +--- + +## now for some very cool things + +## more + +## get ready! \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/sidebar-inverse.jpg b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/sidebar-inverse.jpg new file mode 100644 index 0000000..4e1e2ef Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/02-spoonful/sidebar-inverse.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/featured-photo.jpg b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/featured-photo.jpg new file mode 100644 index 0000000..da4ff9c Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/featured-photo.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.Rmarkdown b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.Rmarkdown new file mode 100644 index 0000000..dbc7b47 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.Rmarkdown @@ -0,0 +1,19 @@ +--- +title: "A third post" +weight: 3 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-03 +draft: false +--- + +{{< here >}} + + +## are you still here? + +### does this work? + +--- + +## final stretch! \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.html b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.html new file mode 100644 index 0000000..720859a --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.html @@ -0,0 +1,255 @@ + + + + + + + + + + + + + + +A third post + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +

{{< here >}}

+
+

are you still here?

+
+

does this work?

+
+
+
+
+

final stretch!

+
+ + + + +
+ + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.markdown b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.markdown new file mode 100644 index 0000000..c7a3469 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/03-spoonful/index.markdown @@ -0,0 +1,19 @@ +--- +title: "A third post" +weight: 3 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-03 +draft: false +--- + +{{< here >}} + + +## are you still here? + +### does this work? + +--- + +## final stretch! diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/_index.md b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/_index.md new file mode 100644 index 0000000..22a7698 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/_index.md @@ -0,0 +1,46 @@ +--- +title: A Spoonful of Hugo +description: | + A forking fun new feature for series. +author: Alison Hill +show_post_thumbnail: false +show_author_byline: true +show_post_date: true +# for series listing page layout +layout: list-sidebar # list, list-sidebar, list-grid + +# for list-sidebar layout +sidebar: + title: A Spoonful of Hugo + author: Alison Hill + description: | + A forking fun new feature for series. + Even this sidebar offers a ton of customizations! + + Check out the _index.md file in the /blog/spoonful-series + folder to edit this content. + text_link_label: "" + text_link_url: "" + show_sidebar_adunit: false # show ad container + +# set up common front matter for all individual pages in series +cascade: + layout: single-series # for a series, do not change + series: A Spoonful of Hugo # name your series + author: Alison Hill + show_author_byline: true + show_post_date: true + sidebar: + text_link_label: "" + text_link_url: "" + show_sidebar_adunit: false # show ad container + text_series_label: "In this series" + text_contents_label: "On this page" + tags: + - hugo-site + categories: + - Theme Features + - R +--- + +** No content below YAML for the series _index. This file is a leaf bundle, and provides settings for the listing page layout and sidebar content.** \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/blog/spoonful-series/sidebar-featured.jpg b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/sidebar-featured.jpg new file mode 100644 index 0000000..b5b5186 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/blog/spoonful-series/sidebar-featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/collection/_index.md b/themes/hugo-apero/exampleSite/content/collection/_index.md new file mode 100644 index 0000000..4a19b9a --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/_index.md @@ -0,0 +1,33 @@ +--- +title: "Create a Collection" +subtitle: "A collection, minus the blog." +description: | + Sometimes you want a souped-up series- a bundle of related pages + meant to be read in sequence. This section is like a blog series, + minus the blog. +author: Alison Hill +show_post_thumbnail: true +thumbnail_left: false # for list-sidebar only +show_author_byline: false +show_post_date: false +# for listing page layout +layout: list-sidebar # list, list-sidebar + +# set up common front matter for all individual pages in series +cascade: + layout: single-series + sidebar: + title: "Create a Collection" + author: Alison Hill + description: | + Sometimes you want a souped-up series- a bundle of related pages + meant to be read in sequence. This section is like a blog series, + minus the blog. + show_author_byline: true + show_post_date: true + text_link_label: "" + text_link_url: "" + show_sidebar_adunit: true # show ad container, first page only + text_series_label: "Outline" + text_contents_label: "On this page" +--- diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/01-github/index.md b/themes/hugo-apero/exampleSite/content/collection/day01/01-github/index.md new file mode 100644 index 0000000..0de9bc1 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day01/01-github/index.md @@ -0,0 +1,31 @@ +--- +title: "A GitHub profile" +weight: 1 +subtitle: "Put your best foot forward, first." +excerpt: "You can share information about yourself with the community on GitHub by creating a profile README. GitHub shows your profile README at the top of your profile page." +date: 2021-01-01 +draft: false +links: +- icon: door-open + icon_pack: fas + name: website + url: https://bakeoff.netlify.com/ +- icon: github + icon_pack: fab + name: code + url: https://github.com/apreshill/bakeoff +--- + +## Profile + +https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/personalizing-your-profile + +## Pin projects to profile + +https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/pinning-items-to-your-profile + +## Profile README + +This is new! Let's do it: + +https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/02-postcards/index.md b/themes/hugo-apero/exampleSite/content/collection/day01/02-postcards/index.md new file mode 100644 index 0000000..96394c5 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day01/02-postcards/index.md @@ -0,0 +1,135 @@ +--- +title: "A postcard" +weight: 2 +subtitle: "Write and send a single postcard." +excerpt: "In this block, we'll use the postcards package to make a single 'about' home page with only R Markdown." +date: 2021-01-02 +--- + +## Pre-requisites + +First, make sure you have the latest version of the postcards package installed from CRAN: + +``` +install.packages("postcards") +``` + +Restart your R session. If you use RStudio, use the menu item *Session > Restart R* or the associated keyboard shortcut: + ++ Ctrl + Shift + F10 (Windows and Linux) or ++ Command + Shift + F10 (Mac OS). + +``` +packageVersion("postcards") +[1] ‘0.2.0’ +``` + +## Create GitHub repo + +Online. + +## Clone GitHub repo + +``` +usethis::create_from_github("https://github.com/apreshill/global-postcard.git") +``` + +:sparkles: Commit & Push! :sparkles: + +You should be committing these files: + ++ `*.Rproj` + ++ `.gitignore` + +## Create a postcard {#templates} + +Inside your current postcards project, use the R console: + +``` +library(postcards) +``` + +Then you could run (wait- don't do this yet!): + +``` +create_postcard() +``` + +But you could also pick one of four templates: + +1. `"jolla"` () [the default] + +1. `"jolla-blue"` () + +1. `"trestles"` () + +1. `"onofre"` () + +``` +create_postcard(template = "jolla") #default +create_postcard(template = "jolla-blue") +create_postcard(template = "trestles") +create_postcard(template = "onofre") +``` + + + +## Anatomy of a postcard + +YAML, body, name is index- this is special + +:sparkles: Commit & Push! :sparkles: + +You should be committing these files: + ++ `index.Rmd` + ++ `*.jpg` + +But! There is no `.html` file (yet...) + + +## Knit the postcard + +Knit button or + +``` +rmarkdown::render("index.Rmd") +``` + +What is new in your Git pane? + +:sparkles: Commit & Push! :sparkles: + +You should be committing this files: + ++ `index.html` + +(You may get a warning in RStudio IDE that this file is too big- go right ahead) + +## Publish a postcard + +Easy: + ++ Push, publish to GitHub pages +https://docs.github.com/en/github/working-with-github-pages/creating-a-github-pages-site#creating-your-site + +Medium: + +``` +> use_github_pages(branch = "main", path = "/") +✓ Setting active project to '/Users/alison/rscratch/global-postcard' +✓ Activating GitHub Pages for 'apreshill/global-postcard' +✓ GitHub Pages is publishing from: +● URL: 'https://apreshill.github.io/global-postcard/' +● Branch: 'main' +● Path: '/' +``` + +## Share your postcard! + +Add it to your repository details + diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/index.md b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/index.md new file mode 100644 index 0000000..05010d5 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/index.md @@ -0,0 +1,138 @@ +--- +title: "A distill site" +weight: 3 +subtitle: "Using the distill & postcards packages to build a personal website with R Markdown." +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-02 +draft: false +--- + +## Pre-requisites + +First, make sure you have the latest version of the distill package installed from CRAN: + + install.packages("distill") + +Restart your R session. If you use RStudio, use the menu item *Session \> Restart R* or the associated keyboard shortcut: + +- Ctrl + Shift + F10 (Windows and Linux) or +- Command + Shift + F10 (Mac OS). + +```{=html} + +``` + packageVersion("distill") + [1] ‘1.2’ + +## Create GitHub repo + +Online. + +## Clone GitHub repo + + usethis::create_from_github("https://github.com/apreshill/global-distill.git") + +:sparkles: Commit & Push! :sparkles: + +You should be committing these files: + +- `*.Rproj` + +- `.gitignore` + +## Create a new distill site + +Inside your current distill project, use the R console: + + library(distill) + +Let's start with a simple website: + + create_website(dir = ".", title = "global-distill", gh_pages = TRUE) + +Now, let's commit all these new files and push to GitHub. + +## Build site + +Please *close* the RStudio IDE and re-open it. Look in your Git pane, you should see a single file has changed: + +
+ + + +
+ +Let's look at the diff: + +
+ + + +
+ +Let's go ahead and commit this file before we start adding to our site. + +You should see: + +![RStudio build site tab](https://rstudio-education.github.io/sharing-short-notice/images/screenshots/build-site.png) + +## Add a postcard + +Docs: + +Now, delete your `about.Rmd` (trust me!). We'll create a new one with the postcards package. + +``` +create_article(file = "about", # future name of .Rmd file + template = "jolla", # name of template + package = "postcards") +``` + +[Reminder: templates]({{< ref "/02-postcards#templates" >}} "Postcards templates") + + +## Site navigation + +`_site.yml` + +## Theme + +Docs: + + distill::create_theme("apreshill") + +Remember your `_site.yml` file? Add the theme line there: + +``` {.yaml} +name: "Alison Hill" +title: "Personal website of Dr. Alison Hill" +description: | + This is my personal website. +output_dir: "docs" +theme: apreshill.css +navbar: + right: + - text: "Home" + href: index.html + - text: "About" + href: about.html +output: distill::distill_article +``` + +## Publish a distill site + +Easy: + +- Push, publish to GitHub pages + +Medium: + +``` +> use_github_pages(branch = "main", path = "/docs") +✓ Setting active project to '/Users/alison/rscratch/global-distill' +✓ Activating GitHub Pages for 'apreshill/global-distill' +✓ GitHub Pages is publishing from: +● URL: 'https://apreshill.github.io/global-distill/' +● Branch: 'main' +● Path: '/docs' +``` diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-diff.png b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-diff.png new file mode 100644 index 0000000..58e5107 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-diff.png differ diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-git.png b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-git.png new file mode 100644 index 0000000..0f94fe0 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/day01/03-distill/rproj-git.png differ diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/_index.md b/themes/hugo-apero/exampleSite/content/collection/day01/_index.md new file mode 100644 index 0000000..47de850 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day01/_index.md @@ -0,0 +1,19 @@ +--- +title: "Day 01" +# list or single layouts are possible +layout: single-series # list, list-sidebar, single-series +show_post_thumbnail: true +weight: 2 +publishDate: 2021-01-22 +date: 2021-01-25 +subtitle: "All about Day 01 of 'Introduce Yourself Online'." +description: | + Our first day together is all about building and publishing. +excerpt: +author: Alison Hill +show_post_thumbnail: true +show_author_byline: false +show_post_date: false +--- + +If you choose `layout: single-series`, you can add markdown text here and it will be the landing page for this nested subsection. \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/collection/day01/featured.jpg b/themes/hugo-apero/exampleSite/content/collection/day01/featured.jpg new file mode 100644 index 0000000..90a176e Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/day01/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/collection/day02/01-netlify/index.md b/themes/hugo-apero/exampleSite/content/collection/day02/01-netlify/index.md new file mode 100644 index 0000000..71c1381 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day02/01-netlify/index.md @@ -0,0 +1,15 @@ +--- +title: "Netlify" +weight: 1 +subtitle: "Using Netlify to deploy." +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-02 +draft: false +--- + + +So far, we've been leveraging GitHub Pages for publishing. This works great, but for blogdown we'll start using Netlify. Let's start *RIGHT NOW* with a site we've already built and published. + +## Pre-requisites + +Pick either your postcards site, or your distill site from day 01. Refresh your memory- which repository was it again? \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/collection/day02/02-blogdown/index.md b/themes/hugo-apero/exampleSite/content/collection/day02/02-blogdown/index.md new file mode 100644 index 0000000..70fdf96 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day02/02-blogdown/index.md @@ -0,0 +1,66 @@ +--- +title: "Using blogdown" +weight: 2 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-01 +--- + + +## Pre-requisites + +First, make sure you have the latest version of the blogdown package installed from CRAN: + +``` +install.packages("blogdoown") +``` + +Restart your R session. If you use RStudio, use the menu item *Session > Restart R* or the associated keyboard shortcut: + ++ Ctrl + Shift + F10 (Windows and Linux) or ++ Command + Shift + F10 (Mac OS). + +``` +packageVersion("blogdown") +[1] ‘1.0’ +``` + +## Create GitHub repo + +Online. + +## Clone GitHub repo + +``` +usethis::create_from_github("https://github.com/apreshill/global-blogdown.git") +``` + +:sparkles: Commit & Push! :sparkles: + +You should be committing these files: + ++ `*.Rproj` + ++ `.gitignore` + +## Create a new blogdown site + +We'll be using a new Hugo theme that I made for us! + +Inside your current blogdown project, use the R console: + +``` +library(blogdown) +``` + +Let's start with making the website with the theme: + +``` +new_site(dir = ".", theme = "apreshill/blogophonic") +``` + +## Configure your site + +The first stop on this tour of your site is the `config.yaml` file. + + diff --git a/themes/hugo-apero/exampleSite/content/collection/day02/03-blogdown/index.md b/themes/hugo-apero/exampleSite/content/collection/day02/03-blogdown/index.md new file mode 100644 index 0000000..2bfecc5 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day02/03-blogdown/index.md @@ -0,0 +1,24 @@ +--- +title: "Warm woolen mittens" +layout: single-series +weight: 3 +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2021-01-02 +draft: false +--- + +{{< here >}} + + +## part 2! + +### does this work? + +--- + +## now for some very cool things + +## more + +## get ready! diff --git a/themes/hugo-apero/exampleSite/content/collection/day02/_index.md b/themes/hugo-apero/exampleSite/content/collection/day02/_index.md new file mode 100644 index 0000000..1f4ddb4 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/day02/_index.md @@ -0,0 +1,19 @@ +--- +title: "Day 02" +# list or single layouts are possible +layout: single-series # list, list-sidebar, single-series +show_post_thumbnail: true +weight: 3 +publishDate: 2021-01-22 +date: 2021-01-26 +subtitle: "All about Day 02 of 'Introduce Yourself Online'." +description: | + day two +excerpt: +author: Alison Hill +show_post_thumbnail: true +show_author_byline: false +show_post_date: false +--- + +If you choose `layout: single-series`, you can add markdown text here and it will be the landing page for this nested subsection. \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/collection/day02/featured.jpg b/themes/hugo-apero/exampleSite/content/collection/day02/featured.jpg new file mode 100644 index 0000000..bb4000d Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/day02/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/collection/featured-sidebar.jpg b/themes/hugo-apero/exampleSite/content/collection/featured-sidebar.jpg new file mode 100644 index 0000000..d86cd87 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/featured-sidebar.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/collection/prework/featured.jpg b/themes/hugo-apero/exampleSite/content/collection/prework/featured.jpg new file mode 100644 index 0000000..e4decfa Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/collection/prework/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/collection/prework/index.md b/themes/hugo-apero/exampleSite/content/collection/prework/index.md new file mode 100644 index 0000000..5672a51 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/collection/prework/index.md @@ -0,0 +1,71 @@ +--- +title: "Prework" +weight: 1 +subtitle: "" +excerpt: "How to prepare ahead of time." +date: 2021-01-01 +draft: false +--- + +Welcome to the [Introducing Yourself Online](/) workshop! We look forward to meeting you. Before attending the workshop, please complete the following prework. + +## Set up RStudio Cloud + +Sign up for a free RStudio Cloud account at https://rstudio.cloud/ before the workshop. I recommend logging in with an existing Google or GitHub account, if you have one (rather than creating a new account with another password you have to remember). I want you to be able to work from your own laptop in this workshop, but Cloud is an important back-up plan should you run into troubles. + +## Set up GitHub + +We will be using GitHub in this workshop for version control and publishing. Sign up for a free GitHub.com account at if you don't already have one. Also: + ++ Complete these [installation instructions](https://happygitwithr.com/install-intro.html). + ++ Test your connection between GitHub and RStudio following [these steps](https://happygitwithr.com/connect-intro.html). + ++ **NOTE:** We *strongly recommend* that if you are not already a fluent GitHub user you choose [HTTPS over SSH](https://happygitwithr.com/credential-caching.html). + +## Brush up on markdown + +Please complete this [10-minute interactive tutorial on Markdown](https://commonmark.org/help/tutorial/). + +## Installations + +Please bring a laptop that has the following installed: + ++ A recent version of R (>=3.6.0), which is available for free at https://cloud.r-project.org/ + ++ A recent version of RStudio Desktop (>=1.4), available for free ([RStudio Desktop Open Source License](https://www.rstudio.com/products/rstudio/download/#download)). Read up on the latest version [here](https://blog.rstudio.com/2021/01/19/announcing-rstudio-1-4/). + ++ The R packages we will use, which you can install by connecting to the internet, opening RStudio, and running at the command line: + + ```r + > install.packages(c("usethis", "remotes", "distill", + "postcards", "blogdown")) + ``` + + You'll also need to install the development version of the `rmarkdown` package: + + ```r + > remotes::install_github("rmarkdown") + ``` + +## Install Hugo + +To use blogdown, please install Hugo: +```r +> blogdown::install_hugo() +``` + +And ensure your current version is at least as high as: +```r +> hugo_version() +[1] ‘0.79.0’ +``` + +## Check pandoc + +The RStudio IDE bundles an updated version of pandoc- if you did install v1.4 of the IDE, you should be all set! + +```r +> rmarkdown::pandoc_version() +[1] ‘2.11.3’ +``` \ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/contributors.md b/themes/hugo-apero/exampleSite/content/contributors.md new file mode 100644 index 0000000..d57439e --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/contributors.md @@ -0,0 +1,27 @@ +--- +description: "Thank you to all the contributors!" +draft: false +layout: standard +show_title_as_headline: true +title: Contributors +--- + +Thank you to all the folks who have contributed both technical and creative skills to this project: + ++ [Desirée De Leon :giraffe:](http://desiree.rbind.io/) (designed 5 of the custom color themes, made illustrations for the workshop, and provided general aesthetic feedback along the way) + ++ [Garrick Aden-Buie :mage:](https://www.garrickadenbuie.com/) (debugged headroom.js and lent his panelset.js code to the theme) + ++ [Allison Horst :dog2:](https://www.allisonhorst.com/) (awesome illustrations of campfires, seedlings, and evergreens, as well as my R Markdown hedgehog mascot :hedgehog:) + ++ [Maëlle Salmon :fishing_pole_and_fish:](https://masalmon.eu/) (help with features, and naming the theme [Hugo Apéro](https://hugo-apero.netlify.app/)!) + ++ [Christophe Dervieux :crayon:](http://cderv.rbind.io/) (thinking through blogdown/Hugo intricacies and syntax highlighting) + ++ [Yihui Xie :martial_arts_uniform:](https://yihui.org/) (for the blogdown package, getting me hooked on Hugo, and helping me with layout code inspired by his many Hugo themes) + ++ [Athanasia Monika Mowinckel :purple_heart:](https://drmowinckels.io/) (for help finding :bug: and SASS support for making color themes work so much better :art:) + ++ [Jannik Buhr :otter:](https://jmbuhr.de) (enabling math rendering with mathjax and katex) + +And last but not least, Eric Anderson and the team at [Formspree](https://formspree.io/) for developing a Hugo theme with such great bones: diff --git a/themes/hugo-apero/exampleSite/content/elements/index.html b/themes/hugo-apero/exampleSite/content/elements/index.html new file mode 100644 index 0000000..2ef109a --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/elements/index.html @@ -0,0 +1,162 @@ +--- +title: Typography Styles & Element Examples +description: The "kitchen sink," if you will ... a page showing examples of type and page elements included in this template. +date: 2019-02-18T12:27:33-06:00 +draft: false +# layout options are standard (default) or wide-body +layout: wide-body +show_title_as_headline: true +--- + +
+
+
Font Sizes
+
+ + + + + + + + + + + + + + + + + + + + + + + +
AAAAAAAA
6rem
(96px)
5rem
(80px)
3rem
(48px)
2.25rem
(36px)
1.5rem
(24px)
1.25rem
(20px)
1rem
(16px)
.875rem
(14px)
+
+
Type Samples
+

Head­line

+

Sub­head­line

+

Level 1 Heading

+

One page to rule them all...well, not really. This page displays sample typography and page elements to illustrate their style. Things like headings and paragraphs showing the beautiful type scale, form elements, tabular data, and image layouts just to name a few.

+

Level 2 Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla tortor mauris condimentum nibh.

+

Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet.

+

Level 3 Heading

+

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo.

+

Level 4 Heading

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur.

+
More Type Samples
+
+

Discipline in typography is a prime virtue. Individuality must be secured by means that are rational. Distinction needs to be won by simplicity and restraint. It is equally true that these qualities need to be infused wiht a certain spirit and vitality, or they degenerate into dullness and mediocrity.

+ ―Stanley Morison +
+
    +
  • The first unordered list item
  • +
  • The second unordered list item
  • +
  • The third unordered list item
  • +
  • The fourth unordered list item
  • +
+
    +
  1. The first ordered list item
  2. +
  3. The second ordered list item
  4. +
  5. The third ordered list item
  6. +
  7. The fourth ordered list item
  8. +
+
+
Definition Term
+
The first definition description
+
The second definition description
+
The third definition description
+
The fourth definition description
+
+
+
+
Sample Forms
+
+
+ Sample Form + + + + + + + + +
+ +
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+
Sample Table
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRating
The Big Lebowski★★★★★
Pulp Fiction★★★★★
Fargo★★★★★
Intersellar★★★★☆
Dumb & Dumber★★★★☆
The Big White★★★★☆
+
Sample Highlight Shortcode
+ {{< highlight css >}}.grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, auto); + grid-auto-flow: dense; + grid-gap: 0px; + margin: 0px auto; + max-width: 1440px; +}{{< /highlight >}} +
Sample Figure Shortcode
+ {{< figure src="https://via.placeholder.com/1024x768/DDD/EEE?text=4:3" alt="A sample 4:3 ratio image" caption="This is an image caption provided through a figure shortcode using figcaption." >}} +
+
diff --git a/themes/hugo-apero/exampleSite/content/form/contact.md b/themes/hugo-apero/exampleSite/content/form/contact.md new file mode 100644 index 0000000..c2a91ff --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/form/contact.md @@ -0,0 +1,22 @@ +--- +title: Contact +name: Contact Us Form +description: "This template has a **contact-us** form built right in. All you need to do is add a valid recipient form-id to the front matter of this form page and you're ready to receive submissions." +date: 2019-02-25T13:38:41-06:00 +draft: false +url: contact +type: form +layout: split-right # split-right or split-left +submit_button_label: Send Message +show_social_links: true # specify social accounts in site config +show_poweredby_formspree: true +# From the Integration tab in Formspree where it says Your form's endpoint is: +# https://formspree.io/f/abcdefgh The id will be "abcdefgh"" +formspree_form_id: "id-from-formspree" +--- + +** Contact page don't contain a body, just the front matter above. +See form.html in the layouts folder. + +Formspree requires a (free) account and new form to be set up. The link is made on the final published url in the field: Restrict to Domain. It is possible to register up to 2 emails free and you can select which one you want the forms to go to within Formspree in the Settings tab. +** diff --git a/themes/hugo-apero/exampleSite/content/license.md b/themes/hugo-apero/exampleSite/content/license.md new file mode 100644 index 0000000..3a3f4fc --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/license.md @@ -0,0 +1,14 @@ +--- +title: "License" +description: The "kitchen sink," if you will ... a page showing examples of type and page elements included in this template. +draft: false +# layout options are standard (default) or wide-body +layout: standard +show_title_as_headline: true +--- + +My [blog posts](/post/) are released under a [Creative Commons Attribution-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-sa/4.0/). + +
+ +
\ No newline at end of file diff --git a/themes/hugo-apero/exampleSite/content/project/_index.md b/themes/hugo-apero/exampleSite/content/project/_index.md new file mode 100644 index 0000000..f2c71c9 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/project/_index.md @@ -0,0 +1,35 @@ +--- +title: A Project Portfolio To Grow +description: "Give your projects a place to live online." +author: "The R Markdown Team @RStudio" +show_post_thumbnail: true +show_author_byline: true +show_post_date: false +# for listing page layout +layout: list-grid # list, list-sidebar, list-grid + +# for list-sidebar layout +sidebar: + title: A Sidebar for Your Projects + description: | + Projects can be anything! + Check out the _index.md file in the /project folder + to edit this content. + author: "The R Markdown Team @RStudio" + text_link_label: "" + text_link_url: "" + show_sidebar_adunit: false # show ad container + +# set up common front matter for all individual pages inside project/ +cascade: + show_author_byline: true + show_post_date: true + show_comments: false # see site config to choose Disqus or Utterances + # for single-sidebar layout only + sidebar: + text_link_label: View all projects + text_link_url: /project/ + show_sidebar_adunit: true # show ad container +--- + +** No content for the project index. This file provides front matter for the blog including the layout and boolean options. ** diff --git a/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-screenshot.png b/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-screenshot.png new file mode 100644 index 0000000..1b74fe7 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-screenshot.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-thumbnail.png b/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-thumbnail.png new file mode 100644 index 0000000..9469b9d Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/bakeoff/built-in-contact-form-thumbnail.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/bakeoff/featured-hex.png b/themes/hugo-apero/exampleSite/content/project/bakeoff/featured-hex.png new file mode 100644 index 0000000..d00d742 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/bakeoff/featured-hex.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/bakeoff/formspree-logo.png b/themes/hugo-apero/exampleSite/content/project/bakeoff/formspree-logo.png new file mode 100644 index 0000000..6b42767 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/bakeoff/formspree-logo.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/bakeoff/index.md b/themes/hugo-apero/exampleSite/content/project/bakeoff/index.md new file mode 100644 index 0000000..8df1d29 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/project/bakeoff/index.md @@ -0,0 +1,64 @@ +--- +title: "Bakeoff" +subtitle: "An R Package" +excerpt: "This theme has a form-to-email feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the form front matter." +date: 2019-07-01 +author: "Eric Anderson" +draft: false +tags: + - hugo-site +categories: + - Theme Features + - R + - package +layout: single +links: +- icon: door-open + icon_pack: fas + name: website + url: https://bakeoff.netlify.com/ +- icon: github + icon_pack: fab + name: code + url: https://github.com/apreshill/bakeoff +--- + +![Formspree Logo](formspree-logo.png) + +## [Formspree](https://formspree.io) makes it easy to receive submissions from HTML forms on your static website. + +--- + +### Functional Form + +This theme has a **form-to-email** feature built in, thanks to the simple Formspree integration. All you need to activate the form is a valid recipient email address saved in the front matter of the form +(`/content/forms/contact.md`). Of course, the example shown below (`your@email.here`) must not be used. Please use your actual email address. + +```toml +# please replace with a valid Formspree form id or email address +formspree_form_id: your@email.here +``` + +Update that file and you're ready to begin receiving submissions. Just submit +the active form for the first time, and complete the email address verification +step with Formspree, and your contact form is live. The next time someone +fills it out, the submission will land in your inbox. + +### Multiple Layouts + +The files included with the theme have a contact page ready for copy/paste, or +you can type `hugo new forms/contact.md` and you're off to the races. There are two +layouts for `forms` – `split-right`, and `split-left` – you guessed it, one puts +the form on the right and the other on the left. You just fill out the front +matter, and the rest is automatic. + +```toml +# layout options: split-right or split-left +layout: split-right +``` + +![Contact Form Split Right Layout Screenshot](built-in-contact-form-screenshot.png) + +Both layouts display the page title and description opposite the form, and you +can also choose to show your social icon links if you have those configured in +the `config.toml` file. diff --git a/themes/hugo-apero/exampleSite/content/project/giraffes/featured-hex.png b/themes/hugo-apero/exampleSite/content/project/giraffes/featured-hex.png new file mode 100644 index 0000000..30b53d3 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/giraffes/featured-hex.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/giraffes/index.md b/themes/hugo-apero/exampleSite/content/project/giraffes/index.md new file mode 100644 index 0000000..73eaa8b --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/project/giraffes/index.md @@ -0,0 +1,125 @@ +--- +title: "Tachyons for Style" +subtitle: "A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light." +excerpt: "Building this static site generator theme was the first time I used an Atomic (or Functional) CSS system like Tachyons. It’s a design system that provides very small (which means fast) CSS modules that you can use in your HTML." +date: 2019-07-03 +author: "Eric Anderson" +draft: false +tags: + - hugo-site +categories: + - Theme Features + - R + - package +# layout options: single or single-sidebar +layout: single +--- + +![Tachyons Logo Script](tachyons-logo-script.png) + +## [Tachyons](http://tachyons.io) is a design system that allows you to design gorgeous interfaces in the browser with little effort. + +--- + +### Because Speed + +Building this static site generator theme was the first time I used an Atomic +(or Functional) CSS system like Tachyons. It's a design system that provides +very small (which means fast) CSS modules that you can use in your HTML. So, +rather than writing every line of CSS, you apply the style you need as you write +your HTML with easy to understand shorthand class names. This makes for a very +powerful way to style, in the browser, or while building a static site like this +one – since you can see every change with every save. **It's a joy to use.** + +In using this theme for your next static website project, you won't need to know +anything about Tachyons ... so, don't freak out. Even though I used it to style +the theme, you won't need to change a thing. BUT, if you do want to play around +with it, you can make massive changes very easily. Just familiarize yourself +with the [clear documentation on the design system](http://tachyons.io/docs/). +Once you dive in, you'll recognize all the classes I'm using in the markup. + +### BYOTachyons + +One of the best features of Tachyons is the exhaustive [component +library](https://www.tachyonstemplates.com/components/?selectedKind=AboutPages&selectedStory=AboutUs&full=0&down=0&left=1&panelRight=0) +contributed by the community. All those components are built to work with the +Tachyons classes, so they will work in this theme too! You can copy/paste +components in order to quickly block out a page, then fill in your content. + +### Taste the Rainbow + +We've leveraged the [accessible color +combinations](http://tachyons.io/docs/themes/skins/) included with Tachyons to +offer an easy way for you to setup your site using your favorite colors. In the +site configuration file (`config.toml`), there is a full set of color parameters +giving you control over the theme color scheme. For an option like `siteBgColor` +for example, you can just type one of the predefined color names from Tachyons +and save the file. You can totally customize the theme colors within minutes of +installing the theme. + +```toml +# basic color options: use only color names as shown in the +# "Color Palette" section of http://tachyons.io/docs/themes/skins/ +siteBgColor = "near-white" +sidebarBgColor = "light-gray" +headingColor = "black" +textColor = "dark-gray" +sidebarTextColor = "mid-gray" +bodyLinkColor = "blue" +navLinkColor = "near-black" +sidebarLinkColor = "near-black" +footerTextColor = "silver" +buttonTextColor = "near-white" +buttonBgColor = "black" +buttonHoverTextColor = "white" +buttonHoverBgColor = "blue" +borderColor = "moon-gray" +``` + +### Dig Deeper + +Let's say you have a style guide to follow and `washed-blue` just won't cut the +mustard. We built Blogophonic for you, too. There is a bypass of these +predefined colors built in, you just need to dig a little deeper. In the theme +assets, locate and open the main SCSS file (`/assets/main.scss`). After the +crazy looking variables you probably don't recognize and directly following the +Tachyons import (`@import 'tachyons';`) you'll see a comment that looks just +like this: + +```scss +// uncomment the import below to activate custom-colors +// add your own colors at the top of the imported file +// @import 'custom-colors'; +``` + +Once you uncomment the `custom-colors` import, it will look like this: + +```scss +// uncomment the import below to activate custom-colors +// add your own colors at the top of the imported file +@import "custom-colors"; +``` + +Save that change, and now the color options in the `config.toml` are no longer +active – they've been bypassed. To customize the colors, locate and open the +`custom-colors` file found in the theme assets (`/assets/custom-colors.scss`). +At the top of that file, you'll find a whole new set of variables for all the +same color options, but this time you get to assign your own HEX codes. + +```scss +// set your custom colors here +$siteBgColorCustom: #e3e3da; +$sidebarBgColorCustom: #dbdbd2; +$textColorCustom: #666260; +$sidebarTextColorCustom: #666260; +$headingColorCustom: #103742; +$bodyLinkColorCustom: #c4001a; +$navLinkColorCustom: #c4001a; +$sidebarLinkColorCustom: #c4001a; +$footerTextColorCustom: #918f8d; +$buttonTextColorCustom: #f7f7f4; +$buttonHoverTextColorCustom: #f9f9f8; +$buttonBgColorCustom: #103742; +$buttonHoverBgColorCustom: #c4001a; +$borderColorCustom: #c4beb9; +``` diff --git a/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-logo-script.png b/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-logo-script.png new file mode 100644 index 0000000..58a2645 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-logo-script.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-thumbnail.png b/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-thumbnail.png new file mode 100644 index 0000000..c638506 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/giraffes/tachyons-thumbnail.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-cover.png b/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-cover.png new file mode 100644 index 0000000..36e7049 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-cover.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-thumbnail.png b/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-thumbnail.png new file mode 100644 index 0000000..4226fdc Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/penguins/css-grid-thumbnail.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/penguins/featured-hex.png b/themes/hugo-apero/exampleSite/content/project/penguins/featured-hex.png new file mode 100644 index 0000000..4252836 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/penguins/featured-hex.png differ diff --git a/themes/hugo-apero/exampleSite/content/project/penguins/index.md b/themes/hugo-apero/exampleSite/content/project/penguins/index.md new file mode 100644 index 0000000..b724262 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/project/penguins/index.md @@ -0,0 +1,68 @@ +--- +title: "Palmer Penguins" +subtitle: "" +excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." +date: 2019-07-02 +author: "Eric Anderson" +featured: true +draft: false +tags: +- hugo-site +categories: +- Theme Features +- R +- package +# layout options: single or single-sidebar +layout: single-sidebar +links: +- icon: door-open + icon_pack: fas + name: website + url: https://allisonhorst.github.io/palmerpenguins/ +- icon: github + icon_pack: fab + name: code + url: https://github.com/allisonhorst/palmerpenguins/ +- icon: newspaper + icon_pack: far + name: Blog post + url: https://education.rstudio.com/blog/2020/07/palmerpenguins-cran/ +--- + +### “Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.” + +*— [Chris House, A Complete Guide to CSS Grid Layout](http://chris.house/blog/a-complete-guide-css-grid-layout/)* [^1] + +--- + +Since I began building websites in Y2K, I've lost count how many times the phrase "...there's got to be a better way to do this" has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid `TABLE`. + +Well, technology sure has come a long way since slicing up images to match the table-based layout that was just created in Dreamweaver. You'd be surprised (or maybe you wouldn't) how challenging the standard header, content, sidebar, footer layout could be to actually get right. + +{{< figure src="css-grid-cover.png" alt="Traditional right sidebar layout" caption="A visual example of the traditional right sidebar layout" >}} + +--- + +### ERMAHGERD + +A proper grid is what we always wanted, no ... _needed_ to build websites with a solid, unbreakable structure. And that's why I used it in this theme. I call this feature a "scaffold" because none of the _content_ is laid out on this grid. Only the main _structure_: consisting of the `header`, `footer`, `main`, `aside`, and `footer`. As you can tell by this quote from the [W3C](https://www.w3.org/TR/css-grid-1/) on the candidate recommendation itself, Grid is the perfect tool for the job: + +> ##### CSS Grid Layout Module +> +> This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. +> +> — _W3C_ + +CSS Grid is a total game changer, IMHO. Compared to the bottomless pit of despair that is the old way, the new way of building a site structure can be done in as little as 5 lines of CSS. Of course, it always takes more than that, but not much. I mean this is really the meat of the deal: + +```css +.grid-container { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, auto); +} +``` + +#### What an amazing time to be a web developer. Anyway, I hope you enjoy this "feature" that you'll probably never notice or even see. Maybe that's the best part of a good user interface – the hidden stuff that just works. + +[^1]: The original article cited here is now updated and maintained by the staff over at CSS-Tricks. Bookmark their version if you want to dive in and learn about CSS Grid: [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) diff --git a/themes/hugo-apero/exampleSite/content/project/sidebar-listing.jpg b/themes/hugo-apero/exampleSite/content/project/sidebar-listing.jpg new file mode 100644 index 0000000..aa153c5 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/project/sidebar-listing.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/talk/_index.md b/themes/hugo-apero/exampleSite/content/talk/_index.md new file mode 100644 index 0000000..5b2f29a --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/talk/_index.md @@ -0,0 +1,42 @@ +--- +title: Talks that Last +description: | + This is a list for your talks, workshops, or other events with a time, date, and place. +author: "The R Markdown Team @RStudio" +show_post_thumbnail: true +show_author_byline: true +show_post_date: true +show_post_time: true +# for listing page layout +layout: list # list, list-sidebar + +# for list-sidebar layout +sidebar: + title: Talks that Last + description: | + This is a list for your talks, workshops, or + other events with a time, date, and place. + Even this sidebar offers a ton of customizations. + + Check out the _index.md file in the /talk folder + to edit this content. + author: "The R Markdown Team @RStudio" + text_link_label: Subscribe via RSS + text_link_url: /talk/index.xml + show_sidebar_adunit: false # show ad container + +# set up common front matter for all pages inside blog/ +cascade: + author: "The R Markdown Team @RStudio" + show_author_byline: true + show_post_date: true + show_post_time: true + show_comments: false # see site config to choose Disqus or Utterances + # for single-sidebar layout + sidebar: + text_link_label: View recent talks + text_link_url: /talk/ + show_sidebar_adunit: false # show ad container +--- + +** No content below YAML for the talk _index. This file provides front matter for the listing page layout and sidebar content. It is also a branch bundle, and all settings under `cascade` provide front matter for all pages inside talk/. You may still override any of these by changing them in a page's front matter.** diff --git a/themes/hugo-apero/exampleSite/content/talk/campfire/featured.jpg b/themes/hugo-apero/exampleSite/content/talk/campfire/featured.jpg new file mode 100644 index 0000000..f43193a Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/talk/campfire/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/talk/campfire/index.md b/themes/hugo-apero/exampleSite/content/talk/campfire/index.md new file mode 100644 index 0000000..b440552 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/talk/campfire/index.md @@ -0,0 +1,29 @@ +--- +title: "A campfire" +subtitle: "Testing" +excerpt: "Here is a talk I gave on making awesome personal websites using Hugo, blogdown, GitHub, and Netlify." +date: 2021-01-12 +date_end: "2021-01-13" +featured: true +show_post_time: false +event: "rstudio::global(2021)" +event_url: https://global.rstudio.com +author: "Alison Hill" +location: "Sydney, Australia" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- workshop +links: +- icon: door-open + icon_pack: fas + name: website + url: https://bakeoff.netlify.com/ +- icon: github + icon_pack: fab + name: code + url: https://github.com/apreshill/bakeoff +--- + +I'm really excited to give this talk! Stay tuned for video and slides. diff --git a/themes/hugo-apero/exampleSite/content/talk/second-seedling/featured.jpg b/themes/hugo-apero/exampleSite/content/talk/second-seedling/featured.jpg new file mode 100644 index 0000000..b319027 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/talk/second-seedling/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/talk/second-seedling/index.md b/themes/hugo-apero/exampleSite/content/talk/second-seedling/index.md new file mode 100644 index 0000000..2365be2 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/talk/second-seedling/index.md @@ -0,0 +1,15 @@ +--- +title: "A seedling" +subtitle: "Testing" +excerpt: "Yet another idea" +date: 2021-01-01T14:15:59-06:00 +date_end: "2021-01-01T14:45:59-06:00" +author: "Alison Hill" +location: "Online" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- meetup +--- + diff --git a/themes/hugo-apero/exampleSite/content/talk/seedling/featured.jpg b/themes/hugo-apero/exampleSite/content/talk/seedling/featured.jpg new file mode 100644 index 0000000..b319027 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/talk/seedling/featured.jpg differ diff --git a/themes/hugo-apero/exampleSite/content/talk/seedling/index.md b/themes/hugo-apero/exampleSite/content/talk/seedling/index.md new file mode 100644 index 0000000..8018f98 --- /dev/null +++ b/themes/hugo-apero/exampleSite/content/talk/seedling/index.md @@ -0,0 +1,15 @@ +--- +title: "A seedling" +subtitle: "Testing" +excerpt: "Another idea" +date: 2020-01-13T14:15:59-06:00 +date_end: "2020-01-15T14:45:59-06:00" +author: "Alison Hill" +location: "Online" +draft: false +# layout options: single, single-sidebar +layout: single +categories: +- meetup +--- + diff --git a/themes/hugo-apero/exampleSite/content/talk/sidebar-listing.jpg b/themes/hugo-apero/exampleSite/content/talk/sidebar-listing.jpg new file mode 100644 index 0000000..49cc5d2 Binary files /dev/null and b/themes/hugo-apero/exampleSite/content/talk/sidebar-listing.jpg differ diff --git a/themes/hugo-apero/exampleSite/data/ads/formspree.yaml b/themes/hugo-apero/exampleSite/data/ads/formspree.yaml new file mode 100644 index 0000000..54873ac --- /dev/null +++ b/themes/hugo-apero/exampleSite/data/ads/formspree.yaml @@ -0,0 +1,4 @@ +title: Made by Formspree +body: > + Formspree is a form backend, API and email + service for HTML forms. It is the simplest way to collect form submissions on your static website. diff --git a/themes/hugo-apero/exampleSite/layouts/shortcodes/blogdown/postref.html b/themes/hugo-apero/exampleSite/layouts/shortcodes/blogdown/postref.html new file mode 100644 index 0000000..1b33d19 --- /dev/null +++ b/themes/hugo-apero/exampleSite/layouts/shortcodes/blogdown/postref.html @@ -0,0 +1 @@ +{{ if eq (getenv "BLOGDOWN_POST_RELREF") "true" }}{{ .Page.RelPermalink }}{{ else }}{{ .Page.Permalink }}{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/404.html b/themes/hugo-apero/layouts/404.html new file mode 100644 index 0000000..b6ed37c --- /dev/null +++ b/themes/hugo-apero/layouts/404.html @@ -0,0 +1,8 @@ +{{ define "main" }} +
+
+

404

+

Page not found

+
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/_default/_markup/render-heading.html b/themes/hugo-apero/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..d9e5925 --- /dev/null +++ b/themes/hugo-apero/layouts/_default/_markup/render-heading.html @@ -0,0 +1,14 @@ + + + + +{{ .Text | safeHTML }} + + {{- if or (eq .Level 2) (eq .Level 3) -}} + + {{- end -}} + + diff --git a/themes/hugo-apero/layouts/_default/_markup/render-link.html b/themes/hugo-apero/layouts/_default/_markup/render-link.html new file mode 100644 index 0000000..4ff0c2c --- /dev/null +++ b/themes/hugo-apero/layouts/_default/_markup/render-link.html @@ -0,0 +1,2 @@ +{{/* A Hugo Markdown render hook to parse links, opening external links in new tabs. */}} +{{ .Text | safeHTML }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/_default/baseof.html b/themes/hugo-apero/layouts/_default/baseof.html new file mode 100644 index 0000000..c7c00c0 --- /dev/null +++ b/themes/hugo-apero/layouts/_default/baseof.html @@ -0,0 +1,11 @@ + + + {{- partial "head.html" . -}} + +
+ {{- block "header" . }}{{- partial "header.html" . -}}{{- end }} + {{- block "main" . }}{{- end }} + {{- block "footer" . }}{{- partial "footer.html" . -}}{{- end }} +
+ + diff --git a/themes/hugo-apero/layouts/_default/list.html b/themes/hugo-apero/layouts/_default/list.html new file mode 100644 index 0000000..a5bf1b8 --- /dev/null +++ b/themes/hugo-apero/layouts/_default/list.html @@ -0,0 +1,18 @@ +{{ define "main" }} +
+
+

{{ .Title | markdownify }}

+ {{ with .Description }}

{{ . | markdownify }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}

{{ end }} +
+
+ {{ $caller := . }} + {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" .Section).ByDate.Reverse }} + {{ range $paginator.Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary" . }} + {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/_default/single.html b/themes/hugo-apero/layouts/_default/single.html new file mode 100644 index 0000000..4669db6 --- /dev/null +++ b/themes/hugo-apero/layouts/_default/single.html @@ -0,0 +1,32 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} + + {{ if .Params.links }} +
+ {{ partial "shared/btn-links.html" . }} +
+ {{ end }} + +
+
+ {{ .Content }} + {{ .Scratch.Set "details" "closed" }} + {{ partial "shared/post-details.html" . }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/about/list.html b/themes/hugo-apero/layouts/about/list.html new file mode 100644 index 0000000..afcb30f --- /dev/null +++ b/themes/hugo-apero/layouts/about/list.html @@ -0,0 +1,98 @@ +{{ define "main" }} +{{ $page := . }} +
+
+ + + {{ if .Params.show_header }} + {{ $header := printf "/%s/%s" .Section "header/index.md" }} + {{ with site.GetPage $header }} + + {{ end }} + {{ end }} + +
+ +
+ + + {{ $main := printf "/%s/%s" .Section "main/index.md" }} + {{ with site.GetPage $main }} +
+ {{ if $page.Params.show_header }} + {{ with .Title}} +

{{ . | markdownify }}

+ {{ end }} + {{ else }} + {{ with .Title }} +

{{ . | markdownify }}

+ {{ end }} + {{ end }} + {{ if .Params.show_intro }} +
{{ .Params.intro | markdownify }}
+ {{ end }} + {{ partial "shared/summary-li" . }} + {{ if .Params.show_outro }} +
{{ .Params.outro | markdownify }}
+ {{ end }} +
+ {{ end }} + + + {{ $sidebar := printf "/%s/%s" .Section "sidebar/index.md" }} + {{ $sidebar_pg := site.GetPage $sidebar }} + {{ with $sidebar_pg }} + +
+ {{ if .Params.avatar_shape }} + {{- $avatar := ($sidebar_pg.Resources.ByType "image").GetMatch "*avatar*" -}} + {{ $avatar_shape := .Params.avatar_shape | default "circle" }} + {{ with $avatar }} + avatar + {{ end }} + {{ end }} +

{{ .Params.author }}

+
{{ .Params.role | markdownify }}
+ {{ if .Params.show_social_links }} + + {{ end }} +
+ + {{ if .Params.audio_link_label }} + {{ $audio := ($sidebar_pg.Resources).GetMatch "*audio*" }} +
+

{{ .Params.audio_link_label }}

+

+ {{ with $audio }} + + {{ end }} +

+
+ {{ end }} + +
+
{{ .Params.link_list_label }}
+
    + {{ range .Params.link_list }} +
  • + {{ .name }} +
  • + {{ end }} +
+
+
+ {{ end }} + +
+
+
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/blog/list-grid.html b/themes/hugo-apero/layouts/blog/list-grid.html new file mode 100644 index 0000000..6b6dcbe --- /dev/null +++ b/themes/hugo-apero/layouts/blog/list-grid.html @@ -0,0 +1,18 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+

{{ .Title | markdownify }}

+

{{ .Description | markdownify }}

+ {{ if .Params.show_author_byline }}

{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}

{{ end }} +
+
+ {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "blog").ByDate.Reverse }} + {{ range $paginator.Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-grid" . }} + {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/blog/list-sidebar.html b/themes/hugo-apero/layouts/blog/list-sidebar.html new file mode 100644 index 0000000..362fec8 --- /dev/null +++ b/themes/hugo-apero/layouts/blog/list-sidebar.html @@ -0,0 +1,16 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+ {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "blog").ByDate.Reverse }} + {{ range $paginator.Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary" . }} + {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/blog/single-series.html b/themes/hugo-apero/layouts/blog/single-series.html new file mode 100644 index 0000000..9d88eee --- /dev/null +++ b/themes/hugo-apero/layouts/blog/single-series.html @@ -0,0 +1,30 @@ +{{ define "main" }} +{{ $page := . }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ .Content }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+ + + +{{ end }} diff --git a/themes/hugo-apero/layouts/blog/single-sidebar.html b/themes/hugo-apero/layouts/blog/single-sidebar.html new file mode 100644 index 0000000..895111d --- /dev/null +++ b/themes/hugo-apero/layouts/blog/single-sidebar.html @@ -0,0 +1,28 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ .Content }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/collection/list-sidebar.html b/themes/hugo-apero/layouts/collection/list-sidebar.html new file mode 100644 index 0000000..7ca80aa --- /dev/null +++ b/themes/hugo-apero/layouts/collection/list-sidebar.html @@ -0,0 +1,24 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+ {{ if not (eq .FirstSection .CurrentSection) }} + {{ partial "shared/breadcrumb.html" . }} + {{ end }} + {{ $paginator := .Paginate (where .Pages "Type" "collection").ByWeight }} + {{ range $paginator.Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-section.html" . }} + {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/collection/list.html b/themes/hugo-apero/layouts/collection/list.html new file mode 100644 index 0000000..66fb157 --- /dev/null +++ b/themes/hugo-apero/layouts/collection/list.html @@ -0,0 +1,21 @@ +{{ define "main" }} +
+
+ {{ if not (eq .FirstSection .CurrentSection) }} + {{ partial "shared/breadcrumb.html" . }} + {{ end }} +

{{ .Title | markdownify }}

+ {{ with .Description }}

{{ . | markdownify }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}

{{ end }} +
+
+ {{ $caller := . }} + {{ $paginator := .Paginate (where .Pages "Type" .Section).ByWeight }} + {{ range $paginator.Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-section" . }} + {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/collection/single-series.html b/themes/hugo-apero/layouts/collection/single-series.html new file mode 100644 index 0000000..5c38f9b --- /dev/null +++ b/themes/hugo-apero/layouts/collection/single-series.html @@ -0,0 +1,43 @@ +{{ define "main" }} +{{ $page := . }} +
+
+
+
+ {{ partial "shared/breadcrumb.html" . }} + {{ if .Pages }} +

{{ .Title }}

+ {{ with .Params.subtitle }}

{{ . }}

{{ end }} + {{ else }} +

{{ .Title }}

+ {{ with .Params.subtitle }}

{{ . }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} + {{ end }} + + {{ if .Params.links }} +
+ {{ partial "shared/btn-links.html" . }} +
+ {{ end }} + +
+
+ {{ .Content }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+ + + +{{ end }} diff --git a/themes/hugo-apero/layouts/form/split-left.html b/themes/hugo-apero/layouts/form/split-left.html new file mode 100644 index 0000000..16a9f5e --- /dev/null +++ b/themes/hugo-apero/layouts/form/split-left.html @@ -0,0 +1,20 @@ +{{ define "main" }} +
+
+
+
+ {{ partial "shared/contact-form.html" . }} +
+
+

{{ .Title }}

+

{{ .Description | markdownify }}

+ {{ if .Params.show_social_links }} +

+ {{ partial "shared/social-links.html" . }} +

+ {{ end }} +
+
+
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/form/split-right.html b/themes/hugo-apero/layouts/form/split-right.html new file mode 100644 index 0000000..6d42627 --- /dev/null +++ b/themes/hugo-apero/layouts/form/split-right.html @@ -0,0 +1,20 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+

{{ .Description | markdownify }}

+ {{ if .Params.show_social_links }} +

+ {{ partial "shared/social-links.html" . }} +

+ {{ end }} +
+
+ {{ partial "shared/contact-form.html" . }} +
+
+
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/index.html b/themes/hugo-apero/layouts/index.html new file mode 100644 index 0000000..610fbe2 --- /dev/null +++ b/themes/hugo-apero/layouts/index.html @@ -0,0 +1,21 @@ +{{ define "main" }} +{{ $page := . }} +
+
+
+
+ {{ with .Params.title }}

{{ . }}

{{ end }} + {{ with .Params.subtitle }}

{{ . }}

{{ end }} + {{ if .Params.show_social_links }}{{ partial "shared/social-links.html" . }}{{ end }} + {{ with .Params.description }}

{{ . | markdownify }}

{{ end }} + {{ if .Params.show_action_link }}{{ .Params.action_label | safeHTML }}{{ end }} +
+
+ {{ with .Params.images }} + {{ range first 1 . }}{{ end }} + {{ end }} +
+
+
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/page/standard.html b/themes/hugo-apero/layouts/page/standard.html new file mode 100644 index 0000000..7248ecc --- /dev/null +++ b/themes/hugo-apero/layouts/page/standard.html @@ -0,0 +1,8 @@ +{{ define "main" }} +
+
+ {{ if .Params.show_title_as_headline }}

{{ .Title }}

{{ end }} + {{ .Content }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/page/wide-body.html b/themes/hugo-apero/layouts/page/wide-body.html new file mode 100644 index 0000000..5662ce7 --- /dev/null +++ b/themes/hugo-apero/layouts/page/wide-body.html @@ -0,0 +1,8 @@ +{{ define "main" }} +
+
+ {{ if .Params.show_title_as_headline }}

{{ .Title }}

{{ end }} + {{ .Content }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/partials/footer.html b/themes/hugo-apero/layouts/partials/footer.html new file mode 100644 index 0000000..2bf8d46 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/footer.html @@ -0,0 +1,32 @@ +
+ + {{ with site.Params.math }} + {{ partial "shared/math-preprocess.html" }} + {{ with .renderer }} + {{ if eq . "mathjax" }} + {{ partial "shared/math-render-mathjax.html" }} + {{ end }} + {{ if eq . "katex" }} + {{ partial "shared/math-render-katex.html" }} + {{ end }} + {{ end }} + {{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/head.html b/themes/hugo-apero/layouts/partials/head.html new file mode 100644 index 0000000..b127043 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/head.html @@ -0,0 +1,19 @@ + + {{ partial "meta.html" . }} + {{ template "_internal/schema.html" . }} + {{ template "_internal/google_analytics_async.html" . }} + {{ `` | safeHTML }} + + + {{ range .AlternativeOutputFormats }} + {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} + {{ end }} + {{ $styles := resources.Get "scaffold.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} + + + {{ $panelsetJs := resources.Get "js/panelset.js" | js.Build "panelset.js" | minify | fingerprint }} + + + {{ $mainJs := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }} + + diff --git a/themes/hugo-apero/layouts/partials/header.html b/themes/hugo-apero/layouts/partials/header.html new file mode 100644 index 0000000..6cb52a4 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/header.html @@ -0,0 +1,21 @@ +{{ $page := . }} + diff --git a/themes/hugo-apero/layouts/partials/meta.html b/themes/hugo-apero/layouts/partials/meta.html new file mode 100644 index 0000000..dda697a --- /dev/null +++ b/themes/hugo-apero/layouts/partials/meta.html @@ -0,0 +1,74 @@ +{{ $permalink := .Permalink }} +{{ $page := . }} +{{ $section := $page.CurrentSection }} + + + + + +{{ hugo.Generator }} +{{ if .IsHome }}{{ .Title }}{{ else }}{{ .Page.Title }} | {{ site.Title }}{{ end }} + +{{ with site.Params.twitter }} + + +{{ end }} + + +{{- $site_card := printf "%s" site.Params.sharing_image | absURL }} + + +{{ $desc := "" }} +{{/* Generate page description. */}} + {{ if .Params.description }} + {{ $desc = .Params.description }} + {{ else if .Params.subtitle }} + {{ $desc = .Params.subtitle }} + {{ else if .Params.excerpt }} + {{ $desc = .Params.excerpt }} + {{ else }} + {{ $desc = site.Params.description }} + {{ end }} + + + + + + + + + + + + +{{/* If images are specified as list variable in section front matter. */}} +{{- with $.Params.images -}} + + {{- $image := (index . 0) -}} + {{- $image_link_absolute := (findRE "^/" $image) -}} + {{- if $image_link_absolute -}} + + {{- else -}} + + {{- end -}} + +{{ else -}} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $card := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*sidebar*" }} + {{- $card := cond (ne $card nil) $card $branch -}} + {{ with $card }} + + + + + {{ else }} + + + + {{ end }} +{{- end -}} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/attribution.html b/themes/hugo-apero/layouts/partials/shared/attribution.html new file mode 100644 index 0000000..c257fc3 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/attribution.html @@ -0,0 +1,2 @@ + +Based on Blogophonic by Formspree. \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/breadcrumb.html b/themes/hugo-apero/layouts/partials/shared/breadcrumb.html new file mode 100644 index 0000000..d66bde8 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/breadcrumb.html @@ -0,0 +1,17 @@ + + + +{{ define "breadcrumb" }} + {{ if .currentPage.Parent }} + {{ if ne .currentPage.Parent .IsHome }} + {{ template "breadcrumb" dict "currentPage" .currentPage.Parent }} + {{ end }} + {{ if eq .id .currentPage.UniqueID }} + {{ .currentPage.Title }} + {{ else }} + {{ .currentPage.Title }} > + {{ end }} +{{ end }} +{{ end }} diff --git a/themes/hugo-apero/layouts/partials/shared/btn-links.html b/themes/hugo-apero/layouts/partials/shared/btn-links.html new file mode 100644 index 0000000..571311f --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/btn-links.html @@ -0,0 +1,16 @@ +{{ range .Params.links }} + {{ $pack := or .icon_pack "fas" }} + {{ $pack_prefix := $pack }} + {{ if in (slice "fab" "fas" "far" "fal") $pack }} + {{ $pack_prefix = "fa" }} + {{ end }} + {{ $link := .url }} + {{ $scheme := (urls.Parse $link).Scheme }} + {{ $target := "" }} + {{ if not $scheme }} + {{ $link = .url | relLangURL }} + {{ else if in (slice "http" "https") $scheme }} + {{ $target = "target=\"_blank\" rel=\"noopener\"" }} + {{ end }} + {{ with .icon }}{{ end }}{{ .name }} +{{ end }} diff --git a/themes/hugo-apero/layouts/partials/shared/comments.html b/themes/hugo-apero/layouts/partials/shared/comments.html new file mode 100644 index 0000000..5afd2e8 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/comments.html @@ -0,0 +1,20 @@ +{{ if not site.Params.utterances.use_utterances }} +
+{{ template "_internal/disqus.html" . }} +
+ +{{ else if site.Params.utterances.use_utterances }} +
+ {{ with site.Params.utterances }} + + {{ end }} +
+{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/contact-form.html b/themes/hugo-apero/layouts/partials/shared/contact-form.html new file mode 100644 index 0000000..124645e --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/contact-form.html @@ -0,0 +1,14 @@ +
+
+ {{ .Params.Name }} + + + + + + + +
+ + {{ if .Params.show_poweredby_formspree }}Powered by Formspree{{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/shared/date-range.html b/themes/hugo-apero/layouts/partials/shared/date-range.html new file mode 100644 index 0000000..c04e90b --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/date-range.html @@ -0,0 +1,19 @@ +{{ $date := .Date }} +{{ $single_format := "January 2, 2006" }} +{{ $range_start_format := "January 2" }} +{{ $range_end_format := "2, 2006" }} + +{{ with .Params.date_end }} + + {{ if and (eq (time $date).Month (time .).Month) (eq (time $date).Day (time .).Day) }} + {{ (time $date).Format $single_format }} + + {{ else if eq (time $date).Month (time .).Month }} + {{ (time $date).Format $range_start_format }} – {{ (time .).Format $range_end_format }} + + {{ else }} + {{ (time $date).Format $range_start_format }} – {{ (time .).Format $single_format }} + {{ end }} +{{ else }} + {{ (time $date).Format $single_format }} +{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/event-details.html b/themes/hugo-apero/layouts/partials/shared/event-details.html new file mode 100644 index 0000000..dcee0f0 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/event-details.html @@ -0,0 +1,43 @@ +
+ {{ with .Params.excerpt }} +
+
Abstract
+
+
+

{{ . }}

+
+ {{ end }} + {{ if .Date }} +
+
Date
+
+
+

{{ partial "shared/date-range.html" . }}

+
+
+
Time
+
+
+

{{ partial "shared/time-range.html" . }}

+
+ {{ end }} + {{ with .Params.location }} +
+
Location
+
+
+

{{ . }}

+
+ {{ end }} + {{ if .Params.event }} +
+
Event
+
+
+

+ {{ with .Params.event_url }}{{ end }} + {{ .Params.event }}{{ if .Params.event_url }}{{ end }} +

+
+ {{ end }} +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/list-pagination.html b/themes/hugo-apero/layouts/partials/shared/list-pagination.html new file mode 100644 index 0000000..2032c3b --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/list-pagination.html @@ -0,0 +1,26 @@ +{{ $previous_label := "Newer" }} +{{ $next_label := "Older" }} +{{ $pag := $.Paginator }} +{{ if gt $pag.TotalPages 1 }} +
+
    +
  • + {{ if $pag.HasPrev }} + + {{ else }} + ← {{ $previous_label }} + {{ end }} +
  • +
  • + {{ $pag.PageNumber }} of {{ $pag.TotalPages }} +
  • +
  • + {{ if $pag.HasNext }} + + {{ else }} + {{ $next_label }} → + {{ end }} +
  • +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/partials/shared/math-preprocess.html b/themes/hugo-apero/layouts/partials/shared/math-preprocess.html new file mode 100644 index 0000000..430e6bf --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/math-preprocess.html @@ -0,0 +1,22 @@ + diff --git a/themes/hugo-apero/layouts/partials/shared/math-render-katex.html b/themes/hugo-apero/layouts/partials/shared/math-render-katex.html new file mode 100644 index 0000000..9fb7fdf --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/math-render-katex.html @@ -0,0 +1,5 @@ + + + + + diff --git a/themes/hugo-apero/layouts/partials/shared/math-render-mathjax.html b/themes/hugo-apero/layouts/partials/shared/math-render-mathjax.html new file mode 100644 index 0000000..85bf335 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/math-render-mathjax.html @@ -0,0 +1,3 @@ + + diff --git a/themes/hugo-apero/layouts/partials/shared/post-details.html b/themes/hugo-apero/layouts/partials/shared/post-details.html new file mode 100644 index 0000000..3641ed2 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/post-details.html @@ -0,0 +1,34 @@ +
+
+
Posted on:
+
{{ .PublishDate.Format "January 2, 2006" }}
+
+
+
Length:
+
{{ .ReadingTime }} minute read, {{ .WordCount }} words
+
+ {{ with .Params.categories }} +
+
Categories:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} + {{ with .Params.series }} +
+
Series:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} + {{ with .Params.tags }} +
+
Tags:
+
{{ range . }} {{ . }} {{ end }}
+
+ {{ end }} +
+
See Also:
+ {{ range first 3 ( where ( where .Site.Pages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags ) "Permalink" "!=" .Permalink ) }} +
{{ .Title }}
+ {{ end }} +
+
diff --git a/themes/hugo-apero/layouts/partials/shared/post-pagination.html b/themes/hugo-apero/layouts/partials/shared/post-pagination.html new file mode 100644 index 0000000..3d1a980 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/post-pagination.html @@ -0,0 +1,12 @@ +
+ {{/* To show older, use next */}} + {{ with .NextInSection }} + + {{ end }} + {{/* To show newer, use previous */}} + {{ with .PrevInSection }} + + {{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/shared/section-sidebar.html b/themes/hugo-apero/layouts/partials/shared/section-sidebar.html new file mode 100644 index 0000000..b7c9cee --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/section-sidebar.html @@ -0,0 +1,42 @@ +{{ $page := . }} +{{ $section := $page.FirstSection }} + +{{ $series_toc_label := .Params.sidebar.text_series_label | default "In this series" }} +{{ $page_toc_label := .Params.sidebar.text_contents_label | default "On this page" }} +
+
+

+ {{ $series_toc_label }}

+ +
+ {{ $headers := findRE "" $page.Content }} + {{- $has_headers := ge (len $headers) 1 -}} + {{- if $has_headers -}} +
+

{{ $page_toc_label }}

+
+ {{ $page.TableOfContents }} +
+
+ {{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/shared/series-sidebar.html b/themes/hugo-apero/layouts/partials/shared/series-sidebar.html new file mode 100644 index 0000000..7ba0f24 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/series-sidebar.html @@ -0,0 +1,29 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} + +{{ $series_toc_label := .Params.sidebar.text_series_label | default "In this series" }} +{{ $page_toc_label := .Params.sidebar.text_contents_label | default "On this page" }} +
+
+ {{ with $section }} +

{{ end }}{{ $series_toc_label }}

+ +
+ {{ $headers := findRE "" $page.Content }} + {{- $has_headers := ge (len $headers) 1 -}} + {{- if $has_headers -}} +
+

{{ $page_toc_label }}

+
+ {{ $page.TableOfContents }} +
+
+ {{ end }} +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/sidebar-scaffold.html b/themes/hugo-apero/layouts/partials/shared/sidebar-scaffold.html new file mode 100644 index 0000000..ca02eba --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/sidebar-scaffold.html @@ -0,0 +1,12 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $is_root := eq .CurrentSection .FirstSection }} + +{{ partial "shared/sidebar/sidebar-image.html" $page }} + +
+ {{ partial "shared/sidebar/sidebar-header.html" $section }} + {{ partial "shared/sidebar/sidebar-link.html" .Params.sidebar }} +
+ +{{ partial "shared/sidebar/sidebar-adunit.html" .Params.sidebar }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-adunit.html b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-adunit.html new file mode 100644 index 0000000..cc4a8fa --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-adunit.html @@ -0,0 +1,7 @@ +{{ if .show_sidebar_adunit }} +
+ {{ range site.Data.ads }} +

{{ .title }}{{ .body | markdownify }}

+ {{ end }} +
+{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-header.html b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-header.html new file mode 100644 index 0000000..13674e4 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-header.html @@ -0,0 +1,6 @@ + +{{ with .Params.sidebar }} + {{ with .title }}

{{ . | markdownify }}

{{ end }} + {{ with .description }}

{{ . | markdownify }}

{{ end }} + {{ with .author }}

Written by {{ . | markdownify }}

{{ end }} +{{ end }} diff --git a/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-image.html b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-image.html new file mode 100644 index 0000000..faed839 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-image.html @@ -0,0 +1,15 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} + + +{{ $branch := ($section.Resources.ByType "image").GetMatch "*sidebar*" }} + +{{ $leaf := ($page.Resources.ByType "image").GetMatch "*sidebar*" }} + +{{ $thumbnail := $leaf | default $branch }} + +{{ $first := (.FirstSection.Resources.ByType "image").GetMatch "*sidebar*" }} +{{ $thumbnail := cond (eq $thumbnail nil) $first $thumbnail }} +{{ with $thumbnail }} + +{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-link.html b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-link.html new file mode 100644 index 0000000..6d96602 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/sidebar/sidebar-link.html @@ -0,0 +1 @@ +{{ if .text_link_label }}{{ .text_link_label }}{{ end }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/social-links.html b/themes/hugo-apero/layouts/partials/shared/social-links.html new file mode 100644 index 0000000..d064ffd --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/social-links.html @@ -0,0 +1,21 @@ + diff --git a/themes/hugo-apero/layouts/partials/shared/summary-compact.html b/themes/hugo-apero/layouts/partials/shared/summary-compact.html new file mode 100644 index 0000000..a0b50c8 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/summary-compact.html @@ -0,0 +1,90 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} + +
+ + + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ + {{ if .Params.show_post_date }}

{{ partial "shared/date-range.html" . }}

{{ end }} + {{ if .Params.show_post_time }} + +

+ {{ partial "shared/time-range.html" . }} +

+ {{ end }} + {{ if .Params.event }} + +

{{ .Params.event }} {{ with .Params.location }}/ {{ . }}{{ end }}

+ {{ else if .Params.location }} + +

{{ .Params.location }}

+ {{ end }} +
+ {{ if .Params.show_author_byline }} +

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

+ {{ end }} + {{ if .Params.links }} +

+ {{ partial "shared/btn-links.html" . }} +

+ {{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ {{ if $root.Params.show_post_date }}

{{ partial "shared/date-range.html" . }}

{{ end }} + {{ if .Params.event }} + +

{{ .Params.event }} {{ with .Params.location }}/ {{ . }}{{ end }}

+ {{ else if .Params.location }} + +

{{ .Params.location }}

+ {{ end }} +
+ {{ if $root.Params.show_author_byline }} +

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

+ {{ end }} +
+ {{ end }} + +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/summary-grid.html b/themes/hugo-apero/layouts/partials/shared/summary-grid.html new file mode 100644 index 0000000..3d28702 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/summary-grid.html @@ -0,0 +1,31 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} + +
+ + {{ if $root.Params.show_post_thumbnail }} +
+ + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ {{ end }} +
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} + {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} + + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
diff --git a/themes/hugo-apero/layouts/partials/shared/summary-li.html b/themes/hugo-apero/layouts/partials/shared/summary-li.html new file mode 100644 index 0000000..5168782 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/summary-li.html @@ -0,0 +1,59 @@ + \ No newline at end of file diff --git a/themes/hugo-apero/layouts/partials/shared/summary-section.html b/themes/hugo-apero/layouts/partials/shared/summary-section.html new file mode 100644 index 0000000..7e2d567 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/summary-section.html @@ -0,0 +1,73 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} +
+ + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ with .Params.excerpt }}

{{ . | markdownify | emojify }}

{{ end }} + {{ if .Pages }} + +

In this section:

+
    + {{ range .RegularPages.ByWeight }} +
  • {{ .Title }}{{ with .Params.subtitle }}: {{ . | markdownify }}{{ end }}

  • + {{ end }} +
+ {{ end }} +
+ + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ with .Params.excerpt }}

{{ . | markdownify | emojify }}

{{ end }} + {{ if .Pages }} + +

In this section:

+
    + {{ range .RegularPages.ByWeight }} +
  • {{ .Title }}{{ with .Params.subtitle }}: {{ . | markdownify }}{{ end }}

  • + {{ end }} +
+ {{ end }} +
+ {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/shared/summary.html b/themes/hugo-apero/layouts/partials/shared/summary.html new file mode 100644 index 0000000..02f9be8 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/summary.html @@ -0,0 +1,58 @@ +{{ $page := . }} +{{ $section := $page.CurrentSection }} +{{ $root := .Scratch.Get "$root" }} +
+ + + {{ if $root.Params.show_post_thumbnail }} + + {{- $images := $page.Resources.ByType "image" -}} + {{ $leaf := $images.GetMatch "*feature*" }} + {{- $hex := $images.GetMatch "*hex*" -}} + {{- $thumbnail := cond (ne $hex nil) $hex $leaf -}} + + {{ $branch := ($section.Resources.ByType "image").GetMatch "*feature*" }} + {{- $thumbnail := cond (ne $thumbnail nil) $thumbnail $branch -}} +
+
+ + {{ with $thumbnail }} + + {{ end }} + +
+
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ + {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+
+ + + {{ else }} +
+
+

{{ .Title | markdownify }}

+ {{ range first 1 (.GetTerms "series") }} +

Series: {{ .LinkTitle }}

+ {{ end }} +
+ {{ $summary := cond (ne .Params.excerpt nil) .Params.excerpt .Summary }} + {{ with $summary }}

{{ . | markdownify | emojify }}

{{ end }} +
+ {{ if $root.Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if $root.Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} +
+
+ {{ end }} +
diff --git a/themes/hugo-apero/layouts/partials/shared/time-range.html b/themes/hugo-apero/layouts/partials/shared/time-range.html new file mode 100644 index 0000000..1ca1f20 --- /dev/null +++ b/themes/hugo-apero/layouts/partials/shared/time-range.html @@ -0,0 +1,14 @@ +{{ $start := time .Date }} +{{ $stop := "" }} +{{ $time_format := "3:04 PM" }} + +{{ with .Params.date_end }} + {{ $stop := time . }} + {{ if and (eq (time $start).Hour (time $stop).Hour) (eq (time $start).Minute (time $stop).Minute) }} + {{ (time $start).Format $time_format }} + {{ else }} + {{ (time $start).Format $time_format }} – {{ (time $stop).Format $time_format }} + {{ end }} +{{ else }} + {{ (time $start).Format $time_format }} +{{ end }} diff --git a/themes/hugo-apero/layouts/project/list-grid.html b/themes/hugo-apero/layouts/project/list-grid.html new file mode 100644 index 0000000..87023d1 --- /dev/null +++ b/themes/hugo-apero/layouts/project/list-grid.html @@ -0,0 +1,17 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+

{{ .Title }}

+

{{ .Description }}

+ {{ if .Params.show_author_byline }}

{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}

{{ end }} +
+
+ {{ $pages := (where .RegularPagesRecursive "Type" "project") }} + {{ range $pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-grid" . }} + {{ end }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/project/list-sidebar.html b/themes/hugo-apero/layouts/project/list-sidebar.html new file mode 100644 index 0000000..53f6c58 --- /dev/null +++ b/themes/hugo-apero/layouts/project/list-sidebar.html @@ -0,0 +1,15 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+ {{ $pages := (where .RegularPagesRecursive "Type" "project") }} + {{ range $pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary" . }} + {{ end }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/project/single-sidebar.html b/themes/hugo-apero/layouts/project/single-sidebar.html new file mode 100644 index 0000000..258aa79 --- /dev/null +++ b/themes/hugo-apero/layouts/project/single-sidebar.html @@ -0,0 +1,35 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} + + {{ if .Params.links }} +
+ {{ partial "shared/btn-links.html" . }} +
+ {{ end }} + +
+
+ {{ .Content }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/shortcodes/blogdown/postref.html b/themes/hugo-apero/layouts/shortcodes/blogdown/postref.html new file mode 100644 index 0000000..fd72134 --- /dev/null +++ b/themes/hugo-apero/layouts/shortcodes/blogdown/postref.html @@ -0,0 +1 @@ +{{ .Page.Permalink }} \ No newline at end of file diff --git a/themes/hugo-apero/layouts/shortcodes/here.html b/themes/hugo-apero/layouts/shortcodes/here.html new file mode 100644 index 0000000..c73fc3b --- /dev/null +++ b/themes/hugo-apero/layouts/shortcodes/here.html @@ -0,0 +1,50 @@ +
+ Hi, I'm the here-bot cat! +

Use me to find your way in your website.

+ +
+
Here I am:
+
{{ print "content/" .Page.File.Path }}
+
+ + + {{ $filePath := .Page.File.Path }} + {{ $RmdFile := (print .Page.File.Dir .Page.File.BaseFileName ".Rmarkdown") }} + {{ if (fileExists (print "content/" $RmdFile)) }} + {{ $.Scratch.Set "$filePath" $RmdFile }} + {{ else }} + {{ $RmdFile = (print .Page.File.Dir .Page.File.BaseFileName ".Rmd") }} + {{ if (fileExists (print "content/" $RmdFile)) }} + {{ $.Scratch.Set "$filePath" $RmdFile }} + {{ end }} + {{ end }} + {{ with .Scratch.Get "$filePath" }} +
+
Here is my R Markdown source file:
+
{{ . }}
+

You'll want to edit this file, then re-knit to see the changes take effect in your site preview.

+
+ {{ end }} + +

To remove me, delete this line inside that file: {{ print "{{< here >}}" }}

+ +
+
My content section is:
+
{{ .Page.Section }}
+
+ +
+
My layout is:
+
{{ .Page.Params.layout }}
+
+ + {{ with .Page.Resources.ByType "image" }} +
+
Images in this page bundle:
+ {{ range . }} +
{{ .RelPermalink }}
+ {{ end }} +
+ {{ end }} + +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/shortcodes/panel.html b/themes/hugo-apero/layouts/shortcodes/panel.html new file mode 100644 index 0000000..aa1dfc4 --- /dev/null +++ b/themes/hugo-apero/layouts/shortcodes/panel.html @@ -0,0 +1,5 @@ +
+
{{ .Get "name" | markdownify | emojify }}
+ + {{ with .Inner }}

{{ . | markdownify | emojify }}

{{ end }} +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/shortcodes/panelset.html b/themes/hugo-apero/layouts/shortcodes/panelset.html new file mode 100644 index 0000000..417a8fa --- /dev/null +++ b/themes/hugo-apero/layouts/shortcodes/panelset.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
\ No newline at end of file diff --git a/themes/hugo-apero/layouts/talk/list-sidebar.html b/themes/hugo-apero/layouts/talk/list-sidebar.html new file mode 100644 index 0000000..9dd075d --- /dev/null +++ b/themes/hugo-apero/layouts/talk/list-sidebar.html @@ -0,0 +1,23 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+ {{ $caller := . }} + {{ $paginator := .Paginate ((where .RegularPages "Type" .Section).GroupByDate "2006") }} + {{ range $paginator.PageGroups }} + +
+
{{ .Key | title }}
+ {{ range .Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-compact.html" . }} + {{ end }} +
+ {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+ +{{ end }} diff --git a/themes/hugo-apero/layouts/talk/list.html b/themes/hugo-apero/layouts/talk/list.html new file mode 100644 index 0000000..de3055d --- /dev/null +++ b/themes/hugo-apero/layouts/talk/list.html @@ -0,0 +1,24 @@ +{{ define "main" }} +
+
+

{{ .Title | markdownify }}

+ {{ with .Description }}

{{ . | markdownify }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}Written by {{ .Params.author }}{{ end }}

{{ end }} +
+
+ {{ $caller := . }} + {{ $paginator := .Paginate ((where .RegularPages "Type" "talk").GroupByDate "2006") }} + {{ range $paginator.PageGroups}} + +
+
{{ .Key | title }}
+ {{ range .Pages }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary-compact.html" . }} + {{ end }} +
+ {{ end }} + {{ partial "shared/list-pagination.html" . }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/talk/single.html b/themes/hugo-apero/layouts/talk/single.html new file mode 100644 index 0000000..3f9a46b --- /dev/null +++ b/themes/hugo-apero/layouts/talk/single.html @@ -0,0 +1,31 @@ +{{ define "main" }} +
+
+
+
+

{{ .Title }}

+ {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} + {{ if .Params.show_author_byline }}

{{ if .Params.author }}By {{ .Params.author }}{{ end }}{{ with .Params.categories }} in{{ range . }} {{ . }} {{ end }}{{ end }}

{{ end }} + {{ if .Params.show_post_date }}

{{ .PublishDate.Format "January 2, 2006" }}

{{ end }} + {{ if .Params.links }} +
+ {{ partial "shared/btn-links.html" . }} +
+ {{ end }} + {{ partial "shared/event-details.html" . }} +
+
+ {{ .Content }} + {{ .Scratch.Set "details" "closed" }} + {{ partial "shared/post-details.html" . }} +
+
+ {{ partial "shared/post-pagination.html" . }} +
+
+ {{ if .Params.show_comments }} + {{ partial "shared/comments.html" . }} + {{ end }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/taxonomy/taxonomy.html b/themes/hugo-apero/layouts/taxonomy/taxonomy.html new file mode 100644 index 0000000..ea493f8 --- /dev/null +++ b/themes/hugo-apero/layouts/taxonomy/taxonomy.html @@ -0,0 +1,15 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+

{{ .Title }}

+

{{ .Description | markdownify }}

+
+
+ {{ range .Pages.ByDate.Reverse }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary" . }} + {{ end }} +
+
+{{ end }} diff --git a/themes/hugo-apero/layouts/taxonomy/term.html b/themes/hugo-apero/layouts/taxonomy/term.html new file mode 100644 index 0000000..9d47a19 --- /dev/null +++ b/themes/hugo-apero/layouts/taxonomy/term.html @@ -0,0 +1,15 @@ +{{ define "main" }} +{{ $caller := . }} +
+
+

{{ .Title }}

+

{{ .Description | markdownify }}

+
+
+ {{ range .RegularPages.ByDate.Reverse }} + {{ .Scratch.Set "$root" $caller }} + {{ partial "shared/summary" . }} + {{ end }} +
+
+{{ end }} diff --git a/themes/hugo-apero/netlify.toml b/themes/hugo-apero/netlify.toml new file mode 100644 index 0000000..05ec506 --- /dev/null +++ b/themes/hugo-apero/netlify.toml @@ -0,0 +1,29 @@ +[build] + command = "hugo --gc --minify -b $URL --themesDir ../../" + base = "exampleSite/" + publish = "public/" + +[build.environment] + HUGO_THEME = "repo" + HUGO_VERSION = "0.80.0" + HUGO_ENABLEGITINFO = "true" + HUGO_BASEURL = "https://hugo-apero.netlify.app/" + +[context.production.environment] + HUGO_ENV = "production" + +[context.deploy-preview] + command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL --themesDir ../../" + +[context.branch-deploy] + command = "hugo --gc --minify -b $DEPLOY_PRIME_URL --themesDir ../../" + +[[headers]] + for = "*.webmanifest" + [headers.values] + Content-Type = "application/manifest+json; charset=UTF-8" + +[[headers]] + for = "index.xml" + [headers.values] + Content-Type = "application/rss+xml" \ No newline at end of file diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102.woff b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102.woff new file mode 100755 index 0000000..e7f8977 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102.woff differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102a.woff2 b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102a.woff2 new file mode 100755 index 0000000..19a58ea Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Bold-102a.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff new file mode 100755 index 0000000..d6421ac Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2 b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2 new file mode 100755 index 0000000..43f253e Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102.woff b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102.woff new file mode 100755 index 0000000..12d2d8c Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102.woff differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102a.woff2 b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102a.woff2 new file mode 100755 index 0000000..d35d3a7 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Italic-102a.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102.woff b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102.woff new file mode 100755 index 0000000..bbe09c5 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102.woff differ diff --git a/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102a.woff2 b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102a.woff2 new file mode 100755 index 0000000..99b3c6f Binary files /dev/null and b/themes/hugo-apero/static/fonts/Atkinson-Hyperlegible-Regular-102a.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Commissioner-Light.woff2 b/themes/hugo-apero/static/fonts/Commissioner-Light.woff2 new file mode 100755 index 0000000..70cfa2d Binary files /dev/null and b/themes/hugo-apero/static/fonts/Commissioner-Light.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Commissioner-LightItalic.woff2 b/themes/hugo-apero/static/fonts/Commissioner-LightItalic.woff2 new file mode 100755 index 0000000..5e2dc84 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Commissioner-LightItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Commissioner-Thin.woff2 b/themes/hugo-apero/static/fonts/Commissioner-Thin.woff2 new file mode 100755 index 0000000..a39fae5 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Commissioner-Thin.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Commissioner-ThinItalic.woff2 b/themes/hugo-apero/static/fonts/Commissioner-ThinItalic.woff2 new file mode 100755 index 0000000..69a33d1 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Commissioner-ThinItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Black.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Black.woff2 new file mode 100755 index 0000000..9354718 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Black.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-BlackItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-BlackItalic.woff2 new file mode 100755 index 0000000..e9a78d5 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-BlackItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Bold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Bold.woff2 new file mode 100755 index 0000000..ff0e4e4 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Bold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-BoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-BoldItalic.woff2 new file mode 100755 index 0000000..dc1e498 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-BoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Italic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Italic.woff2 new file mode 100755 index 0000000..d63736f Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Light.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Light.woff2 new file mode 100755 index 0000000..6e75fb9 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Light.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-LightItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-LightItalic.woff2 new file mode 100755 index 0000000..dac03a5 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-LightItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Regular.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Regular.woff2 new file mode 100755 index 0000000..ece824c Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Regular.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBold.woff2 new file mode 100755 index 0000000..fb65d84 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBoldItalic.woff2 new file mode 100755 index 0000000..cd54a29 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-SemiBoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-Thin.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-Thin.woff2 new file mode 100755 index 0000000..74c9e26 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-Thin.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9pt-ThinItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9pt-ThinItalic.woff2 new file mode 100755 index 0000000..88593ca Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9pt-ThinItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Black.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Black.woff2 new file mode 100755 index 0000000..1418c9e Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Black.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BlackItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BlackItalic.woff2 new file mode 100755 index 0000000..b3d5d4e Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BlackItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Bold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Bold.woff2 new file mode 100755 index 0000000..ca4f1fc Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Bold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BoldItalic.woff2 new file mode 100755 index 0000000..fea37e2 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-BoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Italic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Italic.woff2 new file mode 100755 index 0000000..7aeeb84 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Light.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Light.woff2 new file mode 100755 index 0000000..3bea55a Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Light.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-LightItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-LightItalic.woff2 new file mode 100755 index 0000000..13b70a3 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-LightItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Regular.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Regular.woff2 new file mode 100755 index 0000000..152694f Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Regular.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBold.woff2 new file mode 100755 index 0000000..25955d6 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBoldItalic.woff2 new file mode 100755 index 0000000..cba421d Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-SemiBoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Thin.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Thin.woff2 new file mode 100755 index 0000000..ba93861 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-Thin.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSoft-ThinItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-ThinItalic.woff2 new file mode 100755 index 0000000..55562c8 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSoft-ThinItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Black.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Black.woff2 new file mode 100755 index 0000000..117f13d Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Black.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BlackItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BlackItalic.woff2 new file mode 100755 index 0000000..ac26d08 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BlackItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Bold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Bold.woff2 new file mode 100755 index 0000000..1053182 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Bold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BoldItalic.woff2 new file mode 100755 index 0000000..9501519 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-BoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Italic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Italic.woff2 new file mode 100755 index 0000000..27ec3f1 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Light.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Light.woff2 new file mode 100755 index 0000000..e4000ba Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Light.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-LightItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-LightItalic.woff2 new file mode 100755 index 0000000..2efd620 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-LightItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Regular.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Regular.woff2 new file mode 100755 index 0000000..2804511 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Regular.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBold.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBold.woff2 new file mode 100755 index 0000000..ce9524d Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBold.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBoldItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBoldItalic.woff2 new file mode 100755 index 0000000..1984369 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-SemiBoldItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Thin.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Thin.woff2 new file mode 100755 index 0000000..9b73cab Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-Thin.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-ThinItalic.woff2 b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-ThinItalic.woff2 new file mode 100755 index 0000000..98d3537 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Fraunces9ptSuperSoft-ThinItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Metropolis-Light.woff b/themes/hugo-apero/static/fonts/Metropolis-Light.woff new file mode 100755 index 0000000..f3a84ef Binary files /dev/null and b/themes/hugo-apero/static/fonts/Metropolis-Light.woff differ diff --git a/themes/hugo-apero/static/fonts/Metropolis-Light.woff2 b/themes/hugo-apero/static/fonts/Metropolis-Light.woff2 new file mode 100755 index 0000000..f0ff6f3 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Metropolis-Light.woff2 differ diff --git a/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff b/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff new file mode 100755 index 0000000..ee72f2c Binary files /dev/null and b/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff differ diff --git a/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff2 b/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff2 new file mode 100755 index 0000000..3cbcc34 Binary files /dev/null and b/themes/hugo-apero/static/fonts/Metropolis-LightItalic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff b/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff new file mode 100644 index 0000000..0f02487 Binary files /dev/null and b/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff differ diff --git a/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff2 b/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff2 new file mode 100644 index 0000000..e6a64fe Binary files /dev/null and b/themes/hugo-apero/static/fonts/bitter-v16-latin-300.woff2 differ diff --git a/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff b/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff new file mode 100644 index 0000000..e69b465 Binary files /dev/null and b/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff differ diff --git a/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff2 b/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff2 new file mode 100644 index 0000000..06dff00 Binary files /dev/null and b/themes/hugo-apero/static/fonts/bitter-v16-latin-300italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff new file mode 100644 index 0000000..ffeffcb Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff2 b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff2 new file mode 100644 index 0000000..f6808c0 Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600.woff2 differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff new file mode 100644 index 0000000..2ca3ccf Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff2 b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff2 new file mode 100644 index 0000000..653d0d1 Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-600italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff new file mode 100644 index 0000000..c060336 Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff2 b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff2 new file mode 100644 index 0000000..350cdc3 Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-italic.woff2 differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff new file mode 100644 index 0000000..4172bd6 Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff differ diff --git a/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff2 b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff2 new file mode 100644 index 0000000..a2e607f Binary files /dev/null and b/themes/hugo-apero/static/fonts/eb-garamond-v14-latin-regular.woff2 differ diff --git a/themes/hugo-apero/static/img/arbre.jpg b/themes/hugo-apero/static/img/arbre.jpg new file mode 100644 index 0000000..043295e Binary files /dev/null and b/themes/hugo-apero/static/img/arbre.jpg differ diff --git a/themes/hugo-apero/static/img/avatar-right.jpg b/themes/hugo-apero/static/img/avatar-right.jpg new file mode 100644 index 0000000..aa153c5 Binary files /dev/null and b/themes/hugo-apero/static/img/avatar-right.jpg differ diff --git a/themes/hugo-apero/static/img/avatar.jpg b/themes/hugo-apero/static/img/avatar.jpg new file mode 100644 index 0000000..8359e1d Binary files /dev/null and b/themes/hugo-apero/static/img/avatar.jpg differ diff --git a/themes/hugo-apero/static/img/barbier.jpg b/themes/hugo-apero/static/img/barbier.jpg new file mode 100644 index 0000000..0e336ba Binary files /dev/null and b/themes/hugo-apero/static/img/barbier.jpg differ diff --git a/themes/hugo-apero/static/img/blogophonic-mark-dark.png b/themes/hugo-apero/static/img/blogophonic-mark-dark.png new file mode 100644 index 0000000..8b08701 Binary files /dev/null and b/themes/hugo-apero/static/img/blogophonic-mark-dark.png differ diff --git a/themes/hugo-apero/static/img/favicon.ico b/themes/hugo-apero/static/img/favicon.ico new file mode 100644 index 0000000..7a0fc90 Binary files /dev/null and b/themes/hugo-apero/static/img/favicon.ico differ diff --git a/themes/hugo-apero/static/img/papillons.jpg b/themes/hugo-apero/static/img/papillons.jpg new file mode 100644 index 0000000..b5cabf2 Binary files /dev/null and b/themes/hugo-apero/static/img/papillons.jpg differ diff --git a/themes/hugo-apero/static/img/revoir.jpg b/themes/hugo-apero/static/img/revoir.jpg new file mode 100644 index 0000000..fc997cd Binary files /dev/null and b/themes/hugo-apero/static/img/revoir.jpg differ diff --git a/themes/hugo-apero/static/img/screenshot.png b/themes/hugo-apero/static/img/screenshot.png new file mode 100644 index 0000000..850d25d Binary files /dev/null and b/themes/hugo-apero/static/img/screenshot.png differ diff --git a/themes/hugo-apero/static/img/unicorn-megaphone.png b/themes/hugo-apero/static/img/unicorn-megaphone.png new file mode 100644 index 0000000..8197b24 Binary files /dev/null and b/themes/hugo-apero/static/img/unicorn-megaphone.png differ diff --git a/themes/hugo-apero/static/webfonts/academicons.eot b/themes/hugo-apero/static/webfonts/academicons.eot new file mode 100755 index 0000000..fe6a97d Binary files /dev/null and b/themes/hugo-apero/static/webfonts/academicons.eot differ diff --git a/themes/hugo-apero/static/webfonts/academicons.svg b/themes/hugo-apero/static/webfonts/academicons.svg new file mode 100755 index 0000000..24cbbf4 --- /dev/null +++ b/themes/hugo-apero/static/webfonts/academicons.svg @@ -0,0 +1,1641 @@ + + + + + +Created by FontForge 20190801 at Sun Nov 29 17:06:25 2020 + By Nicolas + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/static/webfonts/academicons.ttf b/themes/hugo-apero/static/webfonts/academicons.ttf new file mode 100755 index 0000000..1b59b91 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/academicons.ttf differ diff --git a/themes/hugo-apero/static/webfonts/academicons.woff b/themes/hugo-apero/static/webfonts/academicons.woff new file mode 100755 index 0000000..c8cf33e Binary files /dev/null and b/themes/hugo-apero/static/webfonts/academicons.woff differ diff --git a/themes/hugo-apero/static/webfonts/fa-brands-400.eot b/themes/hugo-apero/static/webfonts/fa-brands-400.eot new file mode 100644 index 0000000..958684e Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-brands-400.eot differ diff --git a/themes/hugo-apero/static/webfonts/fa-brands-400.svg b/themes/hugo-apero/static/webfonts/fa-brands-400.svg new file mode 100644 index 0000000..2b7cf17 --- /dev/null +++ b/themes/hugo-apero/static/webfonts/fa-brands-400.svg @@ -0,0 +1,3717 @@ + + + + +Created by FontForge 20200314 at Mon Oct 5 09:50:45 2020 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/static/webfonts/fa-brands-400.ttf b/themes/hugo-apero/static/webfonts/fa-brands-400.ttf new file mode 100644 index 0000000..f071825 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-brands-400.ttf differ diff --git a/themes/hugo-apero/static/webfonts/fa-brands-400.woff b/themes/hugo-apero/static/webfonts/fa-brands-400.woff new file mode 100644 index 0000000..277ab65 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-brands-400.woff differ diff --git a/themes/hugo-apero/static/webfonts/fa-brands-400.woff2 b/themes/hugo-apero/static/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..47805d4 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-brands-400.woff2 differ diff --git a/themes/hugo-apero/static/webfonts/fa-regular-400.eot b/themes/hugo-apero/static/webfonts/fa-regular-400.eot new file mode 100644 index 0000000..bef9f72 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-regular-400.eot differ diff --git a/themes/hugo-apero/static/webfonts/fa-regular-400.svg b/themes/hugo-apero/static/webfonts/fa-regular-400.svg new file mode 100644 index 0000000..bccc256 --- /dev/null +++ b/themes/hugo-apero/static/webfonts/fa-regular-400.svg @@ -0,0 +1,801 @@ + + + + +Created by FontForge 20200314 at Mon Oct 5 09:50:45 2020 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/static/webfonts/fa-regular-400.ttf b/themes/hugo-apero/static/webfonts/fa-regular-400.ttf new file mode 100644 index 0000000..659527a Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-regular-400.ttf differ diff --git a/themes/hugo-apero/static/webfonts/fa-regular-400.woff b/themes/hugo-apero/static/webfonts/fa-regular-400.woff new file mode 100644 index 0000000..31f44b2 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-regular-400.woff differ diff --git a/themes/hugo-apero/static/webfonts/fa-regular-400.woff2 b/themes/hugo-apero/static/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..0332a9b Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-regular-400.woff2 differ diff --git a/themes/hugo-apero/static/webfonts/fa-solid-900.eot b/themes/hugo-apero/static/webfonts/fa-solid-900.eot new file mode 100644 index 0000000..5da4fa0 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-solid-900.eot differ diff --git a/themes/hugo-apero/static/webfonts/fa-solid-900.svg b/themes/hugo-apero/static/webfonts/fa-solid-900.svg new file mode 100644 index 0000000..313b311 --- /dev/null +++ b/themes/hugo-apero/static/webfonts/fa-solid-900.svg @@ -0,0 +1,5028 @@ + + + + +Created by FontForge 20200314 at Mon Oct 5 09:50:45 2020 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/themes/hugo-apero/static/webfonts/fa-solid-900.ttf b/themes/hugo-apero/static/webfonts/fa-solid-900.ttf new file mode 100644 index 0000000..e074608 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-solid-900.ttf differ diff --git a/themes/hugo-apero/static/webfonts/fa-solid-900.woff b/themes/hugo-apero/static/webfonts/fa-solid-900.woff new file mode 100644 index 0000000..ef6b447 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-solid-900.woff differ diff --git a/themes/hugo-apero/static/webfonts/fa-solid-900.woff2 b/themes/hugo-apero/static/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..120b300 Binary files /dev/null and b/themes/hugo-apero/static/webfonts/fa-solid-900.woff2 differ diff --git a/themes/hugo-apero/theme.toml b/themes/hugo-apero/theme.toml new file mode 100644 index 0000000..49a1feb --- /dev/null +++ b/themes/hugo-apero/theme.toml @@ -0,0 +1,19 @@ +name = "Apéro" +license = "CC-BY-4.0" +licenselink = "https://github.com/hugo-apero/hugo-apero/blob/master/LICENSE.md" +description = "A Hugo theme you'll want to hang out with." +homepage = "https://hugo-apero.netlify.app" +tags = ["blog", "personal", "portfolio", "responsive", "customizable"] +features = ["blog", "projects", "talks", "events", "collections", "contact form"] +min_version = "0.79.0" + +# If the theme has a single author +[author] + name = "Alison Hill" + homepage = "https://alison.rbind.io" + +# If porting an existing theme +[original] + author = "Formspree" + homepage = "https://blogophonic-hugo.netlify.app/" + repo = "https://github.com/formspree/blogophonic-hugo" \ No newline at end of file