├── .gitignore ├── LICENSE ├── README.md ├── archetypes ├── blog.md ├── default.md ├── form.md └── page.md ├── assets ├── custom-colors.scss ├── scaffold.scss ├── scss │ ├── _aspect-ratios.scss │ ├── _background-position.scss │ ├── _background-size.scss │ ├── _border-colors.scss │ ├── _border-radius.scss │ ├── _border-style.scss │ ├── _border-widths.scss │ ├── _borders.scss │ ├── _box-shadow.scss │ ├── _box-sizing.scss │ ├── _clears.scss │ ├── _code.scss │ ├── _coordinates.scss │ ├── _debug-children.scss │ ├── _debug-grid.scss │ ├── _debug.scss │ ├── _debug_children.scss │ ├── _display.scss │ ├── _flexbox.scss │ ├── _floats.scss │ ├── _font-family.scss │ ├── _font-style.scss │ ├── _font-weight.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _heights.scss │ ├── _hovers.scss │ ├── _images.scss │ ├── _letter-spacing.scss │ ├── _line-height.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _max-widths.scss │ ├── _module-template.scss │ ├── _negative-margins.scss │ ├── _nested.scss │ ├── _normalize.scss │ ├── _opacity.scss │ ├── _outlines.scss │ ├── _overflow.scss │ ├── _position.scss │ ├── _rotations.scss │ ├── _skins-pseudo.scss │ ├── _skins.scss │ ├── _spacing.scss │ ├── _styles.scss │ ├── _tables.scss │ ├── _text-align.scss │ ├── _text-decoration.scss │ ├── _text-transform.scss │ ├── _type-scale.scss │ ├── _typography.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── _vertical-align.scss │ ├── _visibility.scss │ ├── _white-space.scss │ ├── _widths.scss │ ├── _word-break.scss │ └── _z-index.scss └── tachyons.scss ├── config.toml ├── content ├── _index.md ├── about │ ├── assets │ │ ├── blogophonic-mark-dark.png │ │ ├── simple-icons.png │ │ ├── thumb-contact-form.png │ │ ├── thumb-css-grid.png │ │ └── thumb-tachyons.png │ └── index.html ├── blog │ ├── _index.md │ ├── assets │ │ ├── built-in-contact-form-feature.png │ │ ├── built-in-contact-form-thumbnail.png │ │ ├── css-grid-cover.png │ │ ├── css-grid-thumbnail.png │ │ ├── formspree-logo.png │ │ ├── tachyons-logo-script-feature.png │ │ └── tachyons-thumbnail.png │ ├── built-in-contact-form.md │ ├── css-grid-scaffold.md │ └── tachyons-for-style.md ├── elements │ └── index.html └── form │ └── contact.md ├── data ├── ads │ └── formspree.yaml ├── navigation.yaml └── sidebar_content.yaml ├── layouts ├── 404.html ├── _default │ ├── baseof.html │ ├── list.html │ └── single.html ├── blog │ ├── list-grid.html │ ├── list-sidebar.html │ ├── single-sidebar.html │ ├── summary-grid.html │ └── summary.html ├── form │ ├── split-left.html │ └── split-right.html ├── index.html ├── page │ ├── standard.html │ └── wide-body.html ├── partials │ ├── footer.html │ ├── head.html │ ├── header.html │ └── shared │ │ ├── attribution.html │ │ ├── contact-form.html │ │ ├── list-pagination.html │ │ ├── post-details.html │ │ ├── post-pagination.html │ │ ├── sidebar-content.html │ │ └── social-links.html └── taxonomy │ └── list.html └── static └── img ├── blogophonic-mark-dark.png ├── favicon.ico ├── screenshot.png └── unicorn-megaphone.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | public/ 3 | resources/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /archetypes/blog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | subtitle: "" 4 | excerpt: "" 5 | date: {{ .Date }} 6 | author: "" 7 | draft: true 8 | images: 9 | - # url to thumbnail image 10 | - # url to feature image 11 | series: 12 | tags: 13 | categories: 14 | layout: single # single or single-sidebar 15 | --- 16 | -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: {{ replace .Name "-" " " | title }} 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | -------------------------------------------------------------------------------- /archetypes/form.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: {{ replace .Name "-" " " | title }} 3 | name: {{ replace .Name "-" " " | title }} Form 4 | description: 5 | date: {{ .Date }} 6 | draft: true 7 | url: {{ replace .Name "-" " " | lower }} 8 | type: form 9 | layout: split-right # split-right or split-left 10 | submit_button_label: Send 11 | formspree_form_id: # your@email.here 12 | show_social_links: true # specify social accounts in site config 13 | show_poweredby_formspree: true 14 | --- 15 | -------------------------------------------------------------------------------- /archetypes/page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | description: 4 | date: {{ .Date }} 5 | draft: false 6 | # layout options are standard (default) or wide-body 7 | layout: standard 8 | show_title_as_headline: false 9 | --- 10 | -------------------------------------------------------------------------------- /assets/custom-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // set your custom colors here 3 | $siteBgColorCustom: #E3E3DA; 4 | $sidebarBgColorCustom: #DBDBD2; 5 | $textColorCustom: #666260; 6 | $sidebarTextColorCustom: #666260; 7 | $headlineColorCustom: #103742; 8 | $headingColorCustom: #103742; 9 | $bodyLinkColorCustom: #C4001A; 10 | $navLinkColorCustom: #C4001A; 11 | $sidebarLinkColorCustom: #C4001A; 12 | $footerTextColorCustom: #918F8D; 13 | $buttonTextColorCustom: #F7F7F4; 14 | $buttonHoverTextColorCustom: #F9F9F8; 15 | $buttonBgColorCustom: #0F0906; 16 | $buttonHoverBgColorCustom: #103742; 17 | $borderColorCustom: #C4BEB9; 18 | 19 | // ------------------------------ 20 | // DO NOT EDIT BELOW THIS LINE 21 | 22 | // create custom color classes based on tachyons prefix when needed 23 | .bg-custom-site-bg-color { background-color: $siteBgColorCustom; } 24 | .bg-custom-sidebar-bg-color { background-color: $sidebarBgColorCustom; } 25 | .custom-text-color { color: $textColorCustom; } 26 | .custom-sidebar-text-color { color: $sidebarTextColorCustom; } 27 | .custom-headline-color { color: $headlineColorCustom; } 28 | .custom-heading-color { color: $headingColorCustom; } 29 | .custom-body-link-color { color: $bodyLinkColorCustom; } 30 | .custom-nav-link-color { color: $navLinkColorCustom; } 31 | .custom-sidebar-link-color { color: $sidebarLinkColorCustom; } 32 | .custom-footer-text-color { color: $footerTextColorCustom; } 33 | .custom-button-text-color { color: $buttonTextColorCustom; } 34 | .hover-custom-button-hover-text-color:hover { color: $buttonHoverTextColorCustom; } 35 | .bg-custom-button-bg-color { background-color: $buttonBgColorCustom; } 36 | .hover-bg-custom-button-hover-bg-color:hover { background-color: $buttonHoverBgColorCustom; } 37 | .b--custom-border-color { border-color: $borderColorCustom; } 38 | 39 | // override variables used in main with new custom class slugs 40 | $siteBgColor: custom-site-bg-color; 41 | $sidebarBgColor: custom-sidebar-bg-color; 42 | $textColor: custom-text-color; 43 | $sidebarTextColor: custom-sidebar-text-color; 44 | $headlineColor: custom-headline-color; 45 | $headingColor: custom-heading-color; 46 | $bodyLinkColor: custom-body-link-color; 47 | $navLinkColor: custom-nav-link-color; 48 | $sidebarLinkColor: custom-sidebar-link-color; 49 | $footerTextColor: custom-footer-text-color; 50 | $buttonTextColor: custom-button-text-color; 51 | $buttonHoverTextColor: custom-button-hover-text-color; 52 | $buttonBgColor: custom-button-bg-color; 53 | $buttonHoverBgColor: custom-button-hover-bg-color; 54 | $borderColor: custom-border-color; 55 | -------------------------------------------------------------------------------- /assets/scaffold.scss: -------------------------------------------------------------------------------- 1 | // variables based on tachyons classes 2 | // set font family options from config with defaults 3 | $textFontFamily: {{ .Site.Params.textFontFamily | default "sans-serif" }}; 4 | $headingFontFamily: {{ .Site.Params.headingFontFamily | default "sans-serif" }}; 5 | // set color options from config with defaults 6 | $siteBgColor: {{ .Site.Params.siteBgColor | default "near-white" }}; 7 | $sidebarBgColor: {{ .Site.Params.sidebarBgColor | default "light-gray" }}; 8 | $textColor: {{ .Site.Params.textColor | default "near-black" }}; 9 | $sidebarTextColor: {{ .Site.Params.sidebarTextColor | default "dark-gray" }}; 10 | $headlineColor: {{ .Site.Params.headlineColor | default "black" }}; 11 | $headingColor: {{ .Site.Params.headingColor | default "near-black" }}; 12 | $bodyLinkColor: {{ .Site.Params.bodyLinkColor | default "blue" }}; 13 | $navLinkColor: {{ .Site.Params.navLinkColor | default "near-black" }}; 14 | $sidebarLinkColor: {{ .Site.Params.sidebarLinkColor | default "near-black" }}; 15 | $footerTextColor: {{ .Site.Params.footerTextColor | default "silver" }}; 16 | $buttonTextColor: {{ .Site.Params.buttonTextColor | default "near-white" }}; 17 | $buttonBgColor: {{ .Site.Params.buttonBgColor | default "black" }}; 18 | $buttonHoverTextColor: {{ .Site.Params.buttonHoverTextColor | default "white" }}; 19 | $buttonHoverBgColor: {{ .Site.Params.buttonHoverBgColor | default "blue" }}; 20 | $borderColor: {{ .Site.Params.borderColor | default "moon-gray" }}; 21 | 22 | // learn about Tachyons http://tachyons.io 23 | @import 'tachyons'; 24 | // uncomment the import below to activate custom-colors 25 | // add your own colors at the top of the imported file 26 | // @import 'custom-colors'; 27 | 28 | // apply tachyons font family and color options from config 29 | body { 30 | @extend .bg-#{$siteBgColor}, .#{$textFontFamily}, .#{$textColor}; 31 | } 32 | h1, h2, h3, h4, h5, h6 { 33 | @extend .#{$headingFontFamily}, .#{$headingColor}; 34 | } 35 | .f-headline, 36 | .f-subheadline { 37 | @extend .#{$headlineColor} ; 38 | 39 | &-ns, &-m, &-l { 40 | @extend .#{$headlineColor} ; 41 | } 42 | } 43 | .site-brand, 44 | .site-links a, 45 | .site-header .social-icon-links a, 46 | .site-footer .social-icon-links a { 47 | @extend .#{$navLinkColor}; 48 | } 49 | .page-main a:not(.link), 50 | .page-main .social-icon-links a { 51 | @extend .#{$bodyLinkColor}; 52 | } 53 | .page-sidebar { 54 | @extend .bg-#{$sidebarBgColor}, .#{$sidebarTextColor}; 55 | } 56 | .page-sidebar a:not(.link) { 57 | @extend .#{$sidebarLinkColor}; 58 | } 59 | .site-footer { 60 | @extend .#{$footerTextColor}; 61 | } 62 | 63 | // apply tachyons classes to blog post markdown 64 | .post-body { 65 | 66 | h1, h2, h3, h4, h5, h6 { @extend .lh-title ; } 67 | h1 { @extend .f1 ; } 68 | h2 { @extend .f2 ; } 69 | h3 { @extend .f3 ; } 70 | h4 { @extend .f4 ; } 71 | h5 { @extend .f5 ; } 72 | h6 { @extend .f6 ; } 73 | 74 | > p { @extend .lh-copy ; } 75 | 76 | > p > code { 77 | @extend .f6, .ph1, .bg-white-50 ; 78 | } 79 | 80 | blockquote { 81 | @extend .ml0, .pl3, .bl, .bw2, .measure-wide, .b--#{$borderColor} ; 82 | 83 | p, cite { @extend .lh-copy ; } 84 | cite { @extend .f6, .i ; } 85 | } 86 | 87 | ul, ol, dl { @extend .measure, .lh-copy ; } 88 | > dl dt { @extend .pl3, .b, .mb2 ; } 89 | 90 | hr { @extend .mv4, .ba, .b--#{$borderColor} ; } 91 | 92 | > table { 93 | @extend .collapse, .mv4, .w-100, .ba, .bw1, .b--#{$borderColor} ; 94 | 95 | tbody tr { @extend .stripe-dark ; } 96 | th { @extend .pa3, .f7, .fw7, .ttu, .tl, .v-btm ; } 97 | td { @extend .pa3, .f6, .v-top ; } 98 | } 99 | 100 | > .footnotes { 101 | @extend .f7 ; 102 | 103 | ol { @extend .mw-100 ; } 104 | } 105 | 106 | details { 107 | @extend .mt4 ; 108 | } 109 | } 110 | 111 | // apply tachyons classes to blog lists 112 | .blog-content { 113 | article { @extend .b--#{$borderColor} ; } 114 | } 115 | .list-sidebar { 116 | article:first-of-type { 117 | @extend .mt4-l ; 118 | } 119 | } 120 | 121 | // make the ad unit sticky and pad details 122 | .page-sidebar { 123 | .ad-unit { 124 | @extend .bg-#{$sidebarBgColor}, .top-0 ; 125 | position: -webkit-sticky; 126 | position: sticky; 127 | } 128 | details { 129 | @extend .ph4, .mv4 ; 130 | } 131 | } 132 | 133 | // SHORTCODES 134 | // apply tachyons classes to highlight shortcode (and markdown codefence) 135 | .highlight { @extend .f6, .lh-copy ; } 136 | 137 | // apply tachyons classes to figure shortcode 138 | figure { 139 | @extend .mr0, .ml0 ; 140 | 141 | figcaption p, 142 | figcaption h4 { 143 | @extend .f7 ; 144 | } 145 | figcaption p { 146 | @extend .fw4, .mv1 ; 147 | } 148 | } 149 | 150 | // FORMS 151 | form { 152 | @extend .mb4 ; 153 | 154 | legend { 155 | @extend .ph0, .mh0, .fw6, .clip ; 156 | } 157 | fieldset { 158 | @extend .f5, .measure-wide, .ba, .bw0, .b--transparent, .pa0, .mv3, .mh0 ; 159 | } 160 | label { 161 | @extend .db, .f6, .lh-copy ; 162 | } 163 | select, 164 | [type="text"], 165 | [type="email"] { 166 | @extend .input-reset, .pa3, .mt2, .mb3, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ; 167 | } 168 | [type="button"], 169 | [type="reset"], 170 | [type="submit"] { 171 | @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} ; 172 | } 173 | input[type="radio"], 174 | input[type="checkbox"] { 175 | @extend .mv2, .mh1 ; 176 | } 177 | textarea { 178 | @extend .input-reset, .pa3, .mt2, .mb3, .mh0, .lh-copy, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ; 179 | } 180 | select:focus, 181 | textarea:focus, 182 | [type="text"]:focus, 183 | [type="email"]:focus { 184 | @extend .bg-white-50 ; 185 | } 186 | } 187 | 188 | // home page action jackson 189 | .home { 190 | .action.button { 191 | @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} ; 192 | } 193 | .action.text { 194 | @extend .db, .mb4, .ttu, .tracked, .b, .link ; 195 | } 196 | } 197 | 198 | 199 | // CSS GRID SCAFFOLD 200 | .grid-container { 201 | @extend .w-100 ; 202 | 203 | display: grid; 204 | grid-template-columns: repeat(6, 1fr); 205 | grid-template-rows: repeat(3, auto); 206 | grid-auto-flow: dense; 207 | grid-gap: 0px; 208 | margin: 0px auto; 209 | max-width: 1440px; 210 | } 211 | .site-header { 212 | grid-column: 1 / 7; 213 | } 214 | .page-main { 215 | grid-column: 1 / 7; 216 | } 217 | .site-footer { 218 | grid-column: 1 / 7; 219 | } 220 | 221 | .list-sidebar { 222 | .page-main { 223 | grid-column: 3 / 7; 224 | } 225 | .page-sidebar { 226 | grid-column: 1 / 3; 227 | } 228 | } 229 | .single-sidebar { 230 | .page-main { 231 | grid-column: 1 / 5; 232 | } 233 | .page-sidebar { 234 | grid-column: 5 / 7; 235 | } 236 | } 237 | 238 | // SCAFFOLD MEDIA QUERY 239 | @media screen and (max-width: 768px) { 240 | .site-header { 241 | order: 1; 242 | } 243 | .page-main { 244 | order: 2; 245 | } 246 | .page-sidebar { 247 | order: 3; 248 | } 249 | .site-footer { 250 | order: 4; 251 | } 252 | .list-sidebar { 253 | .page-main, 254 | .page-sidebar { 255 | grid-column: 1 / 7; 256 | } 257 | .page-main { 258 | order: 3; 259 | } 260 | .page-sidebar { 261 | order: 2; 262 | } 263 | } 264 | .single-sidebar { 265 | .page-main, 266 | .page-sidebar { 267 | grid-column: 1 / 7; 268 | } 269 | } 270 | } 271 | -------------------------------------------------------------------------------- /assets/scss/_aspect-ratios.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | ASPECT RATIOS 11 | 12 | */ 13 | 14 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 15 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 16 | * Make sure there are no height and width attributes on the embedded media. 17 | * Adapted from: https://github.com/suitcss/components-flex-embed 18 | * 19 | * Example: 20 | * 21 | *
22 | * 23 | *
24 | * 25 | * */ 26 | 27 | .aspect-ratio { 28 | height: 0; 29 | position: relative; 30 | } 31 | 32 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 33 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 34 | 35 | .aspect-ratio--4x3 { padding-bottom: 75%; } 36 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 37 | 38 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 39 | .aspect-ratio--4x6 { padding-bottom: 150%; } 40 | 41 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 42 | .aspect-ratio--5x8 { padding-bottom: 160%; } 43 | 44 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 45 | .aspect-ratio--5x7 { padding-bottom: 140%; } 46 | 47 | .aspect-ratio--1x1 { padding-bottom: 100%; } 48 | 49 | .aspect-ratio--object { 50 | position: absolute; 51 | top: 0; 52 | right: 0; 53 | bottom: 0; 54 | left: 0; 55 | width: 100%; 56 | height: 100%; 57 | z-index: 100; 58 | } 59 | 60 | @media #{$breakpoint-not-small}{ 61 | .aspect-ratio-ns { 62 | height: 0; 63 | position: relative; 64 | } 65 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } 66 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } 67 | .aspect-ratio--4x3-ns { padding-bottom: 75%; } 68 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } 69 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } 70 | .aspect-ratio--4x6-ns { padding-bottom: 150%; } 71 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } 72 | .aspect-ratio--5x8-ns { padding-bottom: 160%; } 73 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } 74 | .aspect-ratio--5x7-ns { padding-bottom: 140%; } 75 | .aspect-ratio--1x1-ns { padding-bottom: 100%; } 76 | .aspect-ratio--object-ns { 77 | position: absolute; 78 | top: 0; 79 | right: 0; 80 | bottom: 0; 81 | left: 0; 82 | width: 100%; 83 | height: 100%; 84 | z-index: 100; 85 | } 86 | } 87 | 88 | @media #{$breakpoint-medium}{ 89 | .aspect-ratio-m { 90 | height: 0; 91 | position: relative; 92 | } 93 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; } 94 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; } 95 | .aspect-ratio--4x3-m { padding-bottom: 75%; } 96 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; } 97 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; } 98 | .aspect-ratio--4x6-m { padding-bottom: 150%; } 99 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; } 100 | .aspect-ratio--5x8-m { padding-bottom: 160%; } 101 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; } 102 | .aspect-ratio--5x7-m { padding-bottom: 140%; } 103 | .aspect-ratio--1x1-m { padding-bottom: 100%; } 104 | .aspect-ratio--object-m { 105 | position: absolute; 106 | top: 0; 107 | right: 0; 108 | bottom: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100%; 112 | z-index: 100; 113 | } 114 | } 115 | 116 | @media #{$breakpoint-large}{ 117 | .aspect-ratio-l { 118 | height: 0; 119 | position: relative; 120 | } 121 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; } 122 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; } 123 | .aspect-ratio--4x3-l { padding-bottom: 75%; } 124 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; } 125 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; } 126 | .aspect-ratio--4x6-l { padding-bottom: 150%; } 127 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; } 128 | .aspect-ratio--5x8-l { padding-bottom: 160%; } 129 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; } 130 | .aspect-ratio--5x7-l { padding-bottom: 140%; } 131 | .aspect-ratio--1x1-l { padding-bottom: 100%; } 132 | .aspect-ratio--object-l { 133 | position: absolute; 134 | top: 0; 135 | right: 0; 136 | bottom: 0; 137 | left: 0; 138 | width: 100%; 139 | height: 100%; 140 | z-index: 100; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /assets/scss/_background-position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BACKGROUND POSITION 11 | 12 | Base: 13 | bg = background 14 | 15 | Modifiers: 16 | -center = center center 17 | -top = top center 18 | -right = center right 19 | -bottom = bottom center 20 | -left = center left 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | .bg-center { 30 | background-repeat: no-repeat; 31 | background-position: center center; 32 | } 33 | 34 | .bg-top { 35 | background-repeat: no-repeat; 36 | background-position: top center; 37 | } 38 | 39 | .bg-right { 40 | background-repeat: no-repeat; 41 | background-position: center right; 42 | } 43 | 44 | .bg-bottom { 45 | background-repeat: no-repeat; 46 | background-position: bottom center; 47 | } 48 | 49 | .bg-left { 50 | background-repeat: no-repeat; 51 | background-position: center left; 52 | } 53 | 54 | @media #{$breakpoint-not-small} { 55 | .bg-center-ns { 56 | background-repeat: no-repeat; 57 | background-position: center center; 58 | } 59 | 60 | .bg-top-ns { 61 | background-repeat: no-repeat; 62 | background-position: top center; 63 | } 64 | 65 | .bg-right-ns { 66 | background-repeat: no-repeat; 67 | background-position: center right; 68 | } 69 | 70 | .bg-bottom-ns { 71 | background-repeat: no-repeat; 72 | background-position: bottom center; 73 | } 74 | 75 | .bg-left-ns { 76 | background-repeat: no-repeat; 77 | background-position: center left; 78 | } 79 | } 80 | 81 | @media #{$breakpoint-medium} { 82 | .bg-center-m { 83 | background-repeat: no-repeat; 84 | background-position: center center; 85 | } 86 | 87 | .bg-top-m { 88 | background-repeat: no-repeat; 89 | background-position: top center; 90 | } 91 | 92 | .bg-right-m { 93 | background-repeat: no-repeat; 94 | background-position: center right; 95 | } 96 | 97 | .bg-bottom-m { 98 | background-repeat: no-repeat; 99 | background-position: bottom center; 100 | } 101 | 102 | .bg-left-m { 103 | background-repeat: no-repeat; 104 | background-position: center left; 105 | } 106 | } 107 | 108 | @media #{$breakpoint-large} { 109 | .bg-center-l { 110 | background-repeat: no-repeat; 111 | background-position: center center; 112 | } 113 | 114 | .bg-top-l { 115 | background-repeat: no-repeat; 116 | background-position: top center; 117 | } 118 | 119 | .bg-right-l { 120 | background-repeat: no-repeat; 121 | background-position: center right; 122 | } 123 | 124 | .bg-bottom-l { 125 | background-repeat: no-repeat; 126 | background-position: bottom center; 127 | } 128 | 129 | .bg-left-l { 130 | background-repeat: no-repeat; 131 | background-position: center left; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /assets/scss/_background-size.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BACKGROUND SIZE 11 | Docs: http://tachyons.io/docs/themes/background-size/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | /* 21 | Often used in combination with background image set as an inline style 22 | on an html element. 23 | */ 24 | 25 | .cover { background-size: cover!important; } 26 | .contain { background-size: contain!important; } 27 | 28 | @media #{$breakpoint-not-small} { 29 | .cover-ns { background-size: cover!important; } 30 | .contain-ns { background-size: contain!important; } 31 | } 32 | 33 | @media #{$breakpoint-medium} { 34 | .cover-m { background-size: cover!important; } 35 | .contain-m { background-size: contain!important; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .cover-l { background-size: cover!important; } 40 | .contain-l { background-size: contain!important; } 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/_border-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER COLORS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Border colors can be used to extend the base 14 | border classes ba,bt,bb,br,bl found in the _borders.css file. 15 | 16 | The base border class by default will set the color of the border 17 | to that of the current text color. These classes are for the cases 18 | where you desire for the text and border colors to be different. 19 | 20 | Base: 21 | b = border 22 | 23 | Modifiers: 24 | --color-name = each color variable name is also a border color name 25 | 26 | */ 27 | 28 | .b--black { border-color: $black; } 29 | .b--near-black { border-color: $near-black; } 30 | .b--dark-gray { border-color: $dark-gray; } 31 | .b--mid-gray { border-color: $mid-gray; } 32 | .b--gray { border-color: $gray; } 33 | .b--silver { border-color: $silver; } 34 | .b--light-silver { border-color: $light-silver; } 35 | .b--moon-gray { border-color: $moon-gray; } 36 | .b--light-gray { border-color: $light-gray; } 37 | .b--near-white { border-color: $near-white; } 38 | .b--white { border-color: $white; } 39 | 40 | .b--white-90 { border-color: $white-90; } 41 | .b--white-80 { border-color: $white-80; } 42 | .b--white-70 { border-color: $white-70; } 43 | .b--white-60 { border-color: $white-60; } 44 | .b--white-50 { border-color: $white-50; } 45 | .b--white-40 { border-color: $white-40; } 46 | .b--white-30 { border-color: $white-30; } 47 | .b--white-20 { border-color: $white-20; } 48 | .b--white-10 { border-color: $white-10; } 49 | .b--white-05 { border-color: $white-05; } 50 | .b--white-025 { border-color: $white-025; } 51 | .b--white-0125 { border-color: $white-0125; } 52 | 53 | .b--black-90 { border-color: $black-90; } 54 | .b--black-80 { border-color: $black-80; } 55 | .b--black-70 { border-color: $black-70; } 56 | .b--black-60 { border-color: $black-60; } 57 | .b--black-50 { border-color: $black-50; } 58 | .b--black-40 { border-color: $black-40; } 59 | .b--black-30 { border-color: $black-30; } 60 | .b--black-20 { border-color: $black-20; } 61 | .b--black-10 { border-color: $black-10; } 62 | .b--black-05 { border-color: $black-05; } 63 | .b--black-025 { border-color: $black-025; } 64 | .b--black-0125 { border-color: $black-0125; } 65 | 66 | .b--dark-red { border-color: $dark-red; } 67 | .b--red { border-color: $red; } 68 | .b--light-red { border-color: $light-red; } 69 | .b--orange { border-color: $orange; } 70 | .b--gold { border-color: $gold; } 71 | .b--yellow { border-color: $yellow; } 72 | .b--light-yellow { border-color: $light-yellow; } 73 | .b--purple { border-color: $purple; } 74 | .b--light-purple { border-color: $light-purple; } 75 | .b--dark-pink { border-color: $dark-pink; } 76 | .b--hot-pink { border-color: $hot-pink; } 77 | .b--pink { border-color: $pink; } 78 | .b--light-pink { border-color: $light-pink; } 79 | .b--dark-green { border-color: $dark-green; } 80 | .b--green { border-color: $green; } 81 | .b--light-green { border-color: $light-green; } 82 | .b--navy { border-color: $navy; } 83 | .b--dark-blue { border-color: $dark-blue; } 84 | .b--blue { border-color: $blue; } 85 | .b--light-blue { border-color: $light-blue; } 86 | .b--lightest-blue { border-color: $lightest-blue; } 87 | .b--washed-blue { border-color: $washed-blue; } 88 | .b--washed-green { border-color: $washed-green; } 89 | .b--washed-yellow { border-color: $washed-yellow; } 90 | .b--washed-red { border-color: $washed-red; } 91 | 92 | .b--transparent { border-color: $transparent; } 93 | .b--inherit { border-color: inherit; } 94 | -------------------------------------------------------------------------------- /assets/scss/_border-radius.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER RADIUS 11 | Docs: http://tachyons.io/docs/themes/border-radius/ 12 | 13 | Base: 14 | br = border-radius 15 | 16 | Modifiers: 17 | 0 = 0/none 18 | 1 = 1st step in scale 19 | 2 = 2nd step in scale 20 | 3 = 3rd step in scale 21 | 4 = 4th step in scale 22 | 23 | Literal values: 24 | -100 = 100% 25 | -pill = 9999px 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .br0 { border-radius: $border-radius-none } 35 | .br1 { border-radius: $border-radius-1; } 36 | .br2 { border-radius: $border-radius-2; } 37 | .br3 { border-radius: $border-radius-3; } 38 | .br4 { border-radius: $border-radius-4; } 39 | .br-100 { border-radius: $border-radius-circle; } 40 | .br-pill { border-radius: $border-radius-pill; } 41 | .br--bottom { 42 | border-top-left-radius: 0; 43 | border-top-right-radius: 0; 44 | } 45 | .br--top { 46 | border-bottom-left-radius: 0; 47 | border-bottom-right-radius: 0; 48 | } 49 | .br--right { 50 | border-top-left-radius: 0; 51 | border-bottom-left-radius: 0; 52 | } 53 | .br--left { 54 | border-top-right-radius: 0; 55 | border-bottom-right-radius: 0; 56 | } 57 | 58 | @media #{$breakpoint-not-small} { 59 | .br0-ns { border-radius: $border-radius-none } 60 | .br1-ns { border-radius: $border-radius-1; } 61 | .br2-ns { border-radius: $border-radius-2; } 62 | .br3-ns { border-radius: $border-radius-3; } 63 | .br4-ns { border-radius: $border-radius-4; } 64 | .br-100-ns { border-radius: $border-radius-circle; } 65 | .br-pill-ns { border-radius: $border-radius-pill; } 66 | .br--bottom-ns { 67 | border-top-left-radius: 0; 68 | border-top-right-radius: 0; 69 | } 70 | .br--top-ns { 71 | border-bottom-left-radius: 0; 72 | border-bottom-right-radius: 0; 73 | } 74 | .br--right-ns { 75 | border-top-left-radius: 0; 76 | border-bottom-left-radius: 0; 77 | } 78 | .br--left-ns { 79 | border-top-right-radius: 0; 80 | border-bottom-right-radius: 0; 81 | } 82 | } 83 | 84 | @media #{$breakpoint-medium} { 85 | .br0-m { border-radius: $border-radius-none } 86 | .br1-m { border-radius: $border-radius-1; } 87 | .br2-m { border-radius: $border-radius-2; } 88 | .br3-m { border-radius: $border-radius-3; } 89 | .br4-m { border-radius: $border-radius-4; } 90 | .br-100-m { border-radius: $border-radius-circle; } 91 | .br-pill-m { border-radius: $border-radius-pill; } 92 | .br--bottom-m { 93 | border-top-left-radius: 0; 94 | border-top-right-radius: 0; 95 | } 96 | .br--top-m { 97 | border-bottom-left-radius: 0; 98 | border-bottom-right-radius: 0; 99 | } 100 | .br--right-m { 101 | border-top-left-radius: 0; 102 | border-bottom-left-radius: 0; 103 | } 104 | .br--left-m { 105 | border-top-right-radius: 0; 106 | border-bottom-right-radius: 0; 107 | } 108 | } 109 | 110 | @media #{$breakpoint-large} { 111 | .br0-l { border-radius: $border-radius-none } 112 | .br1-l { border-radius: $border-radius-1; } 113 | .br2-l { border-radius: $border-radius-2; } 114 | .br3-l { border-radius: $border-radius-3; } 115 | .br4-l { border-radius: $border-radius-4; } 116 | .br-100-l { border-radius: $border-radius-circle; } 117 | .br-pill-l { border-radius: $border-radius-pill; } 118 | .br--bottom-l { 119 | border-top-left-radius: 0; 120 | border-top-right-radius: 0; 121 | } 122 | .br--top-l { 123 | border-bottom-left-radius: 0; 124 | border-bottom-right-radius: 0; 125 | } 126 | .br--right-l { 127 | border-top-left-radius: 0; 128 | border-bottom-left-radius: 0; 129 | } 130 | .br--left-l { 131 | border-top-right-radius: 0; 132 | border-bottom-right-radius: 0; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /assets/scss/_border-style.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER STYLES 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Depends on base border module in _borders.css 14 | 15 | Base: 16 | b = border-style 17 | 18 | Modifiers: 19 | --none = none 20 | --dotted = dotted 21 | --dashed = dashed 22 | --solid = solid 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .b--dotted { border-style: dotted; } 32 | .b--dashed { border-style: dashed; } 33 | .b--solid { border-style: solid; } 34 | .b--none { border-style: none; } 35 | 36 | @media #{$breakpoint-not-small} { 37 | .b--dotted-ns { border-style: dotted; } 38 | .b--dashed-ns { border-style: dashed; } 39 | .b--solid-ns { border-style: solid; } 40 | .b--none-ns { border-style: none; } 41 | } 42 | 43 | @media #{$breakpoint-medium} { 44 | .b--dotted-m { border-style: dotted; } 45 | .b--dashed-m { border-style: dashed; } 46 | .b--solid-m { border-style: solid; } 47 | .b--none-m { border-style: none; } 48 | } 49 | 50 | @media #{$breakpoint-large} { 51 | .b--dotted-l { border-style: dotted; } 52 | .b--dashed-l { border-style: dashed; } 53 | .b--solid-l { border-style: solid; } 54 | .b--none-l { border-style: none; } 55 | } 56 | -------------------------------------------------------------------------------- /assets/scss/_border-widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER WIDTHS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Base: 14 | bw = border-width 15 | 16 | Modifiers: 17 | 0 = 0 width border 18 | 1 = 1st step in border-width scale 19 | 2 = 2nd step in border-width scale 20 | 3 = 3rd step in border-width scale 21 | 4 = 4th step in border-width scale 22 | 5 = 5th step in border-width scale 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .bw0 { border-width: $border-width-none; } 32 | .bw1 { border-width: $border-width-1; } 33 | .bw2 { border-width: $border-width-2; } 34 | .bw3 { border-width: $border-width-3; } 35 | .bw4 { border-width: $border-width-4; } 36 | .bw5 { border-width: $border-width-5; } 37 | 38 | /* Resets */ 39 | .bt-0 { border-top-width: $border-width-none } 40 | .br-0 { border-right-width: $border-width-none } 41 | .bb-0 { border-bottom-width: $border-width-none } 42 | .bl-0 { border-left-width: $border-width-none } 43 | 44 | @media #{$breakpoint-not-small} { 45 | .bw0-ns { border-width: $border-width-none; } 46 | .bw1-ns { border-width: $border-width-1; } 47 | .bw2-ns { border-width: $border-width-2; } 48 | .bw3-ns { border-width: $border-width-3; } 49 | .bw4-ns { border-width: $border-width-4; } 50 | .bw5-ns { border-width: $border-width-5; } 51 | .bt-0-ns { border-top-width: $border-width-none } 52 | .br-0-ns { border-right-width: $border-width-none } 53 | .bb-0-ns { border-bottom-width: $border-width-none } 54 | .bl-0-ns { border-left-width: $border-width-none } 55 | } 56 | 57 | @media #{$breakpoint-medium} { 58 | .bw0-m { border-width: $border-width-none; } 59 | .bw1-m { border-width: $border-width-1; } 60 | .bw2-m { border-width: $border-width-2; } 61 | .bw3-m { border-width: $border-width-3; } 62 | .bw4-m { border-width: $border-width-4; } 63 | .bw5-m { border-width: $border-width-5; } 64 | .bt-0-m { border-top-width: $border-width-none } 65 | .br-0-m { border-right-width: $border-width-none } 66 | .bb-0-m { border-bottom-width: $border-width-none } 67 | .bl-0-m { border-left-width: $border-width-none } 68 | } 69 | 70 | @media #{$breakpoint-large} { 71 | .bw0-l { border-width: $border-width-none; } 72 | .bw1-l { border-width: $border-width-1; } 73 | .bw2-l { border-width: $border-width-2; } 74 | .bw3-l { border-width: $border-width-3; } 75 | .bw4-l { border-width: $border-width-4; } 76 | .bw5-l { border-width: $border-width-5; } 77 | .bt-0-l { border-top-width: $border-width-none } 78 | .br-0-l { border-right-width: $border-width-none } 79 | .bb-0-l { border-bottom-width: $border-width-none } 80 | .bl-0-l { border-left-width: $border-width-none } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scss/_borders.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDERS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Base: 14 | b = border 15 | 16 | Modifiers: 17 | a = all 18 | t = top 19 | r = right 20 | b = bottom 21 | l = left 22 | n = none 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .ba { border-style: solid; border-width: 1px; } 32 | .bt { border-top-style: solid; border-top-width: 1px; } 33 | .br { border-right-style: solid; border-right-width: 1px; } 34 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 35 | .bl { border-left-style: solid; border-left-width: 1px; } 36 | .bn { border-style: none; border-width: 0; } 37 | 38 | 39 | @media #{$breakpoint-not-small} { 40 | .ba-ns { border-style: solid; border-width: 1px; } 41 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 42 | .br-ns { border-right-style: solid; border-right-width: 1px; } 43 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 44 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 45 | .bn-ns { border-style: none; border-width: 0; } 46 | } 47 | 48 | @media #{$breakpoint-medium} { 49 | .ba-m { border-style: solid; border-width: 1px; } 50 | .bt-m { border-top-style: solid; border-top-width: 1px; } 51 | .br-m { border-right-style: solid; border-right-width: 1px; } 52 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 53 | .bl-m { border-left-style: solid; border-left-width: 1px; } 54 | .bn-m { border-style: none; border-width: 0; } 55 | } 56 | 57 | @media #{$breakpoint-large} { 58 | .ba-l { border-style: solid; border-width: 1px; } 59 | .bt-l { border-top-style: solid; border-top-width: 1px; } 60 | .br-l { border-right-style: solid; border-right-width: 1px; } 61 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 62 | .bl-l { border-left-style: solid; border-left-width: 1px; } 63 | .bn-l { border-style: none; border-width: 0; } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /assets/scss/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BOX-SHADOW 11 | Docs: http://tachyons.io/docs/themes/box-shadow/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .shadow-1 { box-shadow: $box-shadow-1; } 21 | .shadow-2 { box-shadow: $box-shadow-2; } 22 | .shadow-3 { box-shadow: $box-shadow-3; } 23 | .shadow-4 { box-shadow: $box-shadow-4; } 24 | .shadow-5 { box-shadow: $box-shadow-5; } 25 | 26 | @media #{$breakpoint-not-small} { 27 | .shadow-1-ns { box-shadow: $box-shadow-1; } 28 | .shadow-2-ns { box-shadow: $box-shadow-2; } 29 | .shadow-3-ns { box-shadow: $box-shadow-3; } 30 | .shadow-4-ns { box-shadow: $box-shadow-4; } 31 | .shadow-5-ns { box-shadow: $box-shadow-5; } 32 | } 33 | 34 | @media #{$breakpoint-medium} { 35 | .shadow-1-m { box-shadow: $box-shadow-1; } 36 | .shadow-2-m { box-shadow: $box-shadow-2; } 37 | .shadow-3-m { box-shadow: $box-shadow-3; } 38 | .shadow-4-m { box-shadow: $box-shadow-4; } 39 | .shadow-5-m { box-shadow: $box-shadow-5; } 40 | } 41 | 42 | @media #{$breakpoint-large} { 43 | .shadow-1-l { box-shadow: $box-shadow-1; } 44 | .shadow-2-l { box-shadow: $box-shadow-2; } 45 | .shadow-3-l { box-shadow: $box-shadow-3; } 46 | .shadow-4-l { box-shadow: $box-shadow-4; } 47 | .shadow-5-l { box-shadow: $box-shadow-5; } 48 | } 49 | -------------------------------------------------------------------------------- /assets/scss/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BOX SIZING 11 | 12 | */ 13 | 14 | html, 15 | body, 16 | div, 17 | article, 18 | section, 19 | main, 20 | footer, 21 | header, 22 | form, 23 | fieldset, 24 | legend, 25 | pre, 26 | code, 27 | a, 28 | h1,h2,h3,h4,h5,h6, 29 | p, 30 | ul, 31 | ol, 32 | li, 33 | dl, 34 | dt, 35 | dd, 36 | textarea, 37 | table, 38 | td, 39 | th, 40 | tr, 41 | input[type="email"], 42 | input[type="number"], 43 | input[type="password"], 44 | input[type="tel"], 45 | input[type="text"], 46 | input[type="url"], 47 | .border-box { 48 | box-sizing: border-box; 49 | } 50 | -------------------------------------------------------------------------------- /assets/scss/_clears.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | CLEARFIX 11 | http://tachyons.io/docs/layout/clearfix/ 12 | 13 | */ 14 | 15 | /* Nicolas Gallaghers Clearfix solution 16 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | 18 | .cf:before, 19 | .cf:after { content: " "; display: table; } 20 | .cf:after { clear: both; } 21 | .cf { *zoom: 1; } 22 | 23 | .cl { clear: left; } 24 | .cr { clear: right; } 25 | .cb { clear: both; } 26 | .cn { clear: none; } 27 | 28 | @media #{$breakpoint-not-small} { 29 | .cl-ns { clear: left; } 30 | .cr-ns { clear: right; } 31 | .cb-ns { clear: both; } 32 | .cn-ns { clear: none; } 33 | } 34 | 35 | @media #{$breakpoint-medium} { 36 | .cl-m { clear: left; } 37 | .cr-m { clear: right; } 38 | .cb-m { clear: both; } 39 | .cn-m { clear: none; } 40 | } 41 | 42 | @media #{$breakpoint-large} { 43 | .cl-l { clear: left; } 44 | .cr-l { clear: right; } 45 | .cb-l { clear: both; } 46 | .cn-l { clear: none; } 47 | } 48 | -------------------------------------------------------------------------------- /assets/scss/_code.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | CODE 11 | 12 | */ 13 | 14 | .pre { 15 | overflow-x: auto; 16 | overflow-y: hidden; 17 | overflow: scroll; 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/_coordinates.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | COORDINATES 11 | Docs: http://tachyons.io/docs/layout/position/ 12 | 13 | Use in combination with the position module. 14 | 15 | Base: 16 | top 17 | bottom 18 | right 19 | left 20 | 21 | Modifiers: 22 | -0 = literal value 0 23 | -1 = literal value 1 24 | -2 = literal value 2 25 | --1 = literal value -1 26 | --2 = literal value -2 27 | 28 | Media Query Extensions: 29 | -ns = not-small 30 | -m = medium 31 | -l = large 32 | 33 | */ 34 | 35 | .top-0 { top: 0; } 36 | .right-0 { right: 0; } 37 | .bottom-0 { bottom: 0; } 38 | .left-0 { left: 0; } 39 | 40 | .top-1 { top: 1rem; } 41 | .right-1 { right: 1rem; } 42 | .bottom-1 { bottom: 1rem; } 43 | .left-1 { left: 1rem; } 44 | 45 | .top-2 { top: 2rem; } 46 | .right-2 { right: 2rem; } 47 | .bottom-2 { bottom: 2rem; } 48 | .left-2 { left: 2rem; } 49 | 50 | .top--1 { top: -1rem; } 51 | .right--1 { right: -1rem; } 52 | .bottom--1 { bottom: -1rem; } 53 | .left--1 { left: -1rem; } 54 | 55 | .top--2 { top: -2rem; } 56 | .right--2 { right: -2rem; } 57 | .bottom--2 { bottom: -2rem; } 58 | .left--2 { left: -2rem; } 59 | 60 | 61 | .absolute--fill { 62 | top: 0; 63 | right: 0; 64 | bottom: 0; 65 | left: 0; 66 | } 67 | 68 | @media #{$breakpoint-not-small} { 69 | .top-0-ns { top: 0; } 70 | .left-0-ns { left: 0; } 71 | .right-0-ns { right: 0; } 72 | .bottom-0-ns { bottom: 0; } 73 | .top-1-ns { top: 1rem; } 74 | .left-1-ns { left: 1rem; } 75 | .right-1-ns { right: 1rem; } 76 | .bottom-1-ns { bottom: 1rem; } 77 | .top-2-ns { top: 2rem; } 78 | .left-2-ns { left: 2rem; } 79 | .right-2-ns { right: 2rem; } 80 | .bottom-2-ns { bottom: 2rem; } 81 | .top--1-ns { top: -1rem; } 82 | .right--1-ns { right: -1rem; } 83 | .bottom--1-ns { bottom: -1rem; } 84 | .left--1-ns { left: -1rem; } 85 | .top--2-ns { top: -2rem; } 86 | .right--2-ns { right: -2rem; } 87 | .bottom--2-ns { bottom: -2rem; } 88 | .left--2-ns { left: -2rem; } 89 | .absolute--fill-ns { 90 | top: 0; 91 | right: 0; 92 | bottom: 0; 93 | left: 0; 94 | } 95 | } 96 | 97 | @media #{$breakpoint-medium} { 98 | .top-0-m { top: 0; } 99 | .left-0-m { left: 0; } 100 | .right-0-m { right: 0; } 101 | .bottom-0-m { bottom: 0; } 102 | .top-1-m { top: 1rem; } 103 | .left-1-m { left: 1rem; } 104 | .right-1-m { right: 1rem; } 105 | .bottom-1-m { bottom: 1rem; } 106 | .top-2-m { top: 2rem; } 107 | .left-2-m { left: 2rem; } 108 | .right-2-m { right: 2rem; } 109 | .bottom-2-m { bottom: 2rem; } 110 | .top--1-m { top: -1rem; } 111 | .right--1-m { right: -1rem; } 112 | .bottom--1-m { bottom: -1rem; } 113 | .left--1-m { left: -1rem; } 114 | .top--2-m { top: -2rem; } 115 | .right--2-m { right: -2rem; } 116 | .bottom--2-m { bottom: -2rem; } 117 | .left--2-m { left: -2rem; } 118 | .absolute--fill-m { 119 | top: 0; 120 | right: 0; 121 | bottom: 0; 122 | left: 0; 123 | } 124 | } 125 | 126 | @media #{$breakpoint-large} { 127 | .top-0-l { top: 0; } 128 | .left-0-l { left: 0; } 129 | .right-0-l { right: 0; } 130 | .bottom-0-l { bottom: 0; } 131 | .top-1-l { top: 1rem; } 132 | .left-1-l { left: 1rem; } 133 | .right-1-l { right: 1rem; } 134 | .bottom-1-l { bottom: 1rem; } 135 | .top-2-l { top: 2rem; } 136 | .left-2-l { left: 2rem; } 137 | .right-2-l { right: 2rem; } 138 | .bottom-2-l { bottom: 2rem; } 139 | .top--1-l { top: -1rem; } 140 | .right--1-l { right: -1rem; } 141 | .bottom--1-l { bottom: -1rem; } 142 | .left--1-l { left: -1rem; } 143 | .top--2-l { top: -2rem; } 144 | .right--2-l { right: -2rem; } 145 | .bottom--2-l { bottom: -2rem; } 146 | .left--2-l { left: -2rem; } 147 | .absolute--fill-l { 148 | top: 0; 149 | right: 0; 150 | bottom: 0; 151 | left: 0; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /assets/scss/_debug-children.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG CHILDREN 11 | Docs: http://tachyons.io/docs/debug/ 12 | 13 | Just add the debug class to any element to see outlines on its 14 | children. 15 | 16 | */ 17 | 18 | .debug * { outline: 1px solid gold; } 19 | .debug-white * { outline: 1px solid white; } 20 | .debug-black * { outline: 1px solid black; } 21 | 22 | -------------------------------------------------------------------------------- /assets/scss/_debug-grid.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG GRID 11 | http://tachyons.io/docs/debug-grid/ 12 | 13 | Can be useful for debugging layout issues 14 | or helping to make sure things line up perfectly. 15 | Just tack one of these classes onto a parent element. 16 | 17 | */ 18 | 19 | .debug-grid { 20 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; 21 | } 22 | 23 | .debug-grid-16 { 24 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; 25 | } 26 | 27 | .debug-grid-8-solid { 28 | 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; 29 | } 30 | 31 | .debug-grid-16-solid { 32 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; 33 | } 34 | -------------------------------------------------------------------------------- /assets/scss/_debug.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | 9 | body { outline: 1px solid #2980B9!important; } 10 | article { outline: 1px solid #3498DB!important; } 11 | nav { outline: 1px solid #0088C3!important; } 12 | aside { outline: 1px solid #33A0CE!important; } 13 | section { outline: 1px solid #66B8DA!important; } 14 | header { outline: 1px solid #99CFE7!important; } 15 | footer { outline: 1px solid #CCE7F3!important; } 16 | h1 { outline: 1px solid #162544!important; } 17 | h2 { outline: 1px solid #314E6E!important; } 18 | h3 { outline: 1px solid #3E5E85!important; } 19 | h4 { outline: 1px solid #449BAF!important; } 20 | h5 { outline: 1px solid #C7D1CB!important; } 21 | h6 { outline: 1px solid #4371D0!important; } 22 | main { outline: 1px solid #2F4F90!important; } 23 | address { outline: 1px solid #1A2C51!important; } 24 | div { outline: 1px solid #036CDB!important; } 25 | 26 | 27 | p { outline: 1px solid #AC050B!important; } 28 | hr { outline: 1px solid #FF063F!important; } 29 | pre { outline: 1px solid #850440!important; } 30 | blockquote { outline: 1px solid #F1B8E7!important; } 31 | ol { outline: 1px solid #FF050C!important; } 32 | ul { outline: 1px solid #D90416!important; } 33 | li { outline: 1px solid #D90416!important; } 34 | dl { outline: 1px solid #FD3427!important; } 35 | dt { outline: 1px solid #FF0043!important; } 36 | dd { outline: 1px solid #E80174!important; } 37 | figure { outline: 1px solid #FF00BB!important; } 38 | figcaption { outline: 1px solid #BF0032!important; } 39 | 40 | 41 | 42 | table { outline: 1px solid #00CC99!important; } 43 | caption { outline: 1px solid #37FFC4!important; } 44 | thead { outline: 1px solid #98DACA!important; } 45 | tbody { outline: 1px solid #64A7A0!important; } 46 | tfoot { outline: 1px solid #22746B!important; } 47 | tr { outline: 1px solid #86C0B2!important; } 48 | th { outline: 1px solid #A1E7D6!important; } 49 | td { outline: 1px solid #3F5A54!important; } 50 | col { outline: 1px solid #6C9A8F!important; } 51 | colgroup { outline: 1px solid #6C9A9D!important; } 52 | 53 | 54 | button { outline: 1px solid #DA8301!important; } 55 | datalist { outline: 1px solid #C06000!important; } 56 | fieldset { outline: 1px solid #D95100!important; } 57 | form { outline: 1px solid #D23600!important; } 58 | input { outline: 1px solid #FCA600!important; } 59 | keygen { outline: 1px solid #B31E00!important; } 60 | label { outline: 1px solid #EE8900!important; } 61 | legend { outline: 1px solid #DE6D00!important; } 62 | meter { outline: 1px solid #E8630C!important; } 63 | optgroup { outline: 1px solid #B33600!important; } 64 | option { outline: 1px solid #FF8A00!important; } 65 | output { outline: 1px solid #FF9619!important; } 66 | progress { outline: 1px solid #E57C00!important; } 67 | select { outline: 1px solid #E26E0F!important; } 68 | textarea { outline: 1px solid #CC5400!important; } 69 | 70 | 71 | 72 | details { outline: 1px solid #33848F!important; } 73 | summary { outline: 1px solid #60A1A6!important; } 74 | command { outline: 1px solid #438DA1!important; } 75 | menu { outline: 1px solid #449DA6!important; } 76 | 77 | 78 | 79 | del { outline: 1px solid #BF0000!important; } 80 | ins { outline: 1px solid #400000!important; } 81 | 82 | 83 | 84 | img { outline: 1px solid #22746B!important; } 85 | iframe { outline: 1px solid #64A7A0!important; } 86 | embed { outline: 1px solid #98DACA!important; } 87 | object { outline: 1px solid #00CC99!important; } 88 | param { outline: 1px solid #37FFC4!important; } 89 | video { outline: 1px solid #6EE866!important; } 90 | audio { outline: 1px solid #027353!important; } 91 | source { outline: 1px solid #012426!important; } 92 | canvas { outline: 1px solid #A2F570!important; } 93 | track { outline: 1px solid #59A600!important; } 94 | map { outline: 1px solid #7BE500!important; } 95 | area { outline: 1px solid #305900!important; } 96 | 97 | 98 | 99 | a { outline: 1px solid #FF62AB!important; } 100 | em { outline: 1px solid #800B41!important; } 101 | strong { outline: 1px solid #FF1583!important; } 102 | i { outline: 1px solid #803156!important; } 103 | b { outline: 1px solid #CC1169!important; } 104 | u { outline: 1px solid #FF0430!important; } 105 | s { outline: 1px solid #F805E3!important; } 106 | small { outline: 1px solid #D107B2!important; } 107 | abbr { outline: 1px solid #4A0263!important; } 108 | q { outline: 1px solid #240018!important; } 109 | cite { outline: 1px solid #64003C!important; } 110 | dfn { outline: 1px solid #B4005A!important; } 111 | sub { outline: 1px solid #DBA0C8!important; } 112 | sup { outline: 1px solid #CC0256!important; } 113 | time { outline: 1px solid #D6606D!important; } 114 | code { outline: 1px solid #E04251!important; } 115 | kbd { outline: 1px solid #5E001F!important; } 116 | samp { outline: 1px solid #9C0033!important; } 117 | var { outline: 1px solid #D90047!important; } 118 | mark { outline: 1px solid #FF0053!important; } 119 | bdi { outline: 1px solid #BF3668!important; } 120 | bdo { outline: 1px solid #6F1400!important; } 121 | ruby { outline: 1px solid #FF7B93!important; } 122 | rt { outline: 1px solid #FF2F54!important; } 123 | rp { outline: 1px solid #803E49!important; } 124 | span { outline: 1px solid #CC2643!important; } 125 | br { outline: 1px solid #DB687D!important; } 126 | wbr { outline: 1px solid #DB175B!important; } 127 | 128 | -------------------------------------------------------------------------------- /assets/scss/_debug_children.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG CHILDREN 11 | 12 | Just add the debug class to any element to see outlines on its 13 | children. 14 | 15 | */ 16 | 17 | .debug * { outline: 1px solid gold; } 18 | 19 | -------------------------------------------------------------------------------- /assets/scss/_display.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DISPLAY 11 | Docs: http://tachyons.io/docs/layout/display 12 | 13 | Base: 14 | d = display 15 | 16 | Modifiers: 17 | n = none 18 | b = block 19 | ib = inline-block 20 | it = inline-table 21 | t = table 22 | tc = table-cell 23 | tr = table-row 24 | tcol = table-column 25 | tcolg = table-column-group 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .dn { display: none; } 35 | .di { display: inline; } 36 | .db { display: block; } 37 | .dib { display: inline-block; } 38 | .dit { display: inline-table; } 39 | .dt { display: table; } 40 | .dtc { display: table-cell; } 41 | .dt-row { display: table-row; } 42 | .dt-row-group { display: table-row-group; } 43 | .dt-column { display: table-column; } 44 | .dt-column-group { display: table-column-group; } 45 | 46 | /* 47 | This will set table to full width and then 48 | all cells will be equal width 49 | */ 50 | .dt--fixed { 51 | table-layout: fixed; 52 | width: 100%; 53 | } 54 | 55 | @media #{$breakpoint-not-small} { 56 | .dn-ns { display: none; } 57 | .di-ns { display: inline; } 58 | .db-ns { display: block; } 59 | .dib-ns { display: inline-block; } 60 | .dit-ns { display: inline-table; } 61 | .dt-ns { display: table; } 62 | .dtc-ns { display: table-cell; } 63 | .dt-row-ns { display: table-row; } 64 | .dt-row-group-ns { display: table-row-group; } 65 | .dt-column-ns { display: table-column; } 66 | .dt-column-group-ns { display: table-column-group; } 67 | 68 | .dt--fixed-ns { 69 | table-layout: fixed; 70 | width: 100%; 71 | } 72 | } 73 | 74 | @media #{$breakpoint-medium} { 75 | .dn-m { display: none; } 76 | .di-m { display: inline; } 77 | .db-m { display: block; } 78 | .dib-m { display: inline-block; } 79 | .dit-m { display: inline-table; } 80 | .dt-m { display: table; } 81 | .dtc-m { display: table-cell; } 82 | .dt-row-m { display: table-row; } 83 | .dt-row-group-m { display: table-row-group; } 84 | .dt-column-m { display: table-column; } 85 | .dt-column-group-m { display: table-column-group; } 86 | 87 | .dt--fixed-m { 88 | table-layout: fixed; 89 | width: 100%; 90 | } 91 | } 92 | 93 | @media #{$breakpoint-large} { 94 | .dn-l { display: none; } 95 | .di-l { display: inline; } 96 | .db-l { display: block; } 97 | .dib-l { display: inline-block; } 98 | .dit-l { display: inline-table; } 99 | .dt-l { display: table; } 100 | .dtc-l { display: table-cell; } 101 | .dt-row-l { display: table-row; } 102 | .dt-row-group-l { display: table-row-group; } 103 | .dt-column-l { display: table-column; } 104 | .dt-column-group-l { display: table-column-group; } 105 | 106 | .dt--fixed-l { 107 | table-layout: fixed; 108 | width: 100%; 109 | } 110 | } 111 | 112 | -------------------------------------------------------------------------------- /assets/scss/_flexbox.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FLEXBOX 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .flex { display: flex; } 20 | .inline-flex { display: inline-flex; } 21 | 22 | /* 1. Fix for Chrome 44 bug. 23 | * https://code.google.com/p/chromium/issues/detail?id=506893 */ 24 | .flex-auto { 25 | flex: 1 1 auto; 26 | min-width: 0; /* 1 */ 27 | min-height: 0; /* 1 */ 28 | } 29 | 30 | .flex-none { flex: none; } 31 | 32 | .flex-column { flex-direction: column; } 33 | .flex-row { flex-direction: row; } 34 | .flex-wrap { flex-wrap: wrap; } 35 | .flex-nowrap { flex-wrap: nowrap; } 36 | .flex-wrap-reverse { flex-wrap: wrap-reverse; } 37 | .flex-column-reverse { flex-direction: column-reverse; } 38 | .flex-row-reverse { flex-direction: row-reverse; } 39 | 40 | .items-start { align-items: flex-start; } 41 | .items-end { align-items: flex-end; } 42 | .items-center { align-items: center; } 43 | .items-baseline { align-items: baseline; } 44 | .items-stretch { align-items: stretch; } 45 | 46 | .self-start { align-self: flex-start; } 47 | .self-end { align-self: flex-end; } 48 | .self-center { align-self: center; } 49 | .self-baseline { align-self: baseline; } 50 | .self-stretch { align-self: stretch; } 51 | 52 | .justify-start { justify-content: flex-start; } 53 | .justify-end { justify-content: flex-end; } 54 | .justify-center { justify-content: center; } 55 | .justify-between { justify-content: space-between; } 56 | .justify-around { justify-content: space-around; } 57 | 58 | .content-start { align-content: flex-start; } 59 | .content-end { align-content: flex-end; } 60 | .content-center { align-content: center; } 61 | .content-between { align-content: space-between; } 62 | .content-around { align-content: space-around; } 63 | .content-stretch { align-content: stretch; } 64 | 65 | .order-0 { order: 0; } 66 | .order-1 { order: 1; } 67 | .order-2 { order: 2; } 68 | .order-3 { order: 3; } 69 | .order-4 { order: 4; } 70 | .order-5 { order: 5; } 71 | .order-6 { order: 6; } 72 | .order-7 { order: 7; } 73 | .order-8 { order: 8; } 74 | .order-last { order: 99999; } 75 | 76 | .flex-grow-0 { flex-grow: 0; } 77 | .flex-grow-1 { flex-grow: 1; } 78 | 79 | .flex-shrink-0 { flex-shrink: 0; } 80 | .flex-shrink-1 { flex-shrink: 1; } 81 | 82 | @media #{$breakpoint-not-small} { 83 | .flex-ns { display: flex; } 84 | .inline-flex-ns { display: inline-flex; } 85 | .flex-auto-ns { 86 | flex: 1 1 auto; 87 | min-width: 0; /* 1 */ 88 | min-height: 0; /* 1 */ 89 | } 90 | .flex-none-ns { flex: none; } 91 | .flex-column-ns { flex-direction: column; } 92 | .flex-row-ns { flex-direction: row; } 93 | .flex-wrap-ns { flex-wrap: wrap; } 94 | .flex-nowrap-ns { flex-wrap: nowrap; } 95 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } 96 | .flex-column-reverse-ns { flex-direction: column-reverse; } 97 | .flex-row-reverse-ns { flex-direction: row-reverse; } 98 | .items-start-ns { align-items: flex-start; } 99 | .items-end-ns { align-items: flex-end; } 100 | .items-center-ns { align-items: center; } 101 | .items-baseline-ns { align-items: baseline; } 102 | .items-stretch-ns { align-items: stretch; } 103 | 104 | .self-start-ns { align-self: flex-start; } 105 | .self-end-ns { align-self: flex-end; } 106 | .self-center-ns { align-self: center; } 107 | .self-baseline-ns { align-self: baseline; } 108 | .self-stretch-ns { align-self: stretch; } 109 | 110 | .justify-start-ns { justify-content: flex-start; } 111 | .justify-end-ns { justify-content: flex-end; } 112 | .justify-center-ns { justify-content: center; } 113 | .justify-between-ns { justify-content: space-between; } 114 | .justify-around-ns { justify-content: space-around; } 115 | 116 | .content-start-ns { align-content: flex-start; } 117 | .content-end-ns { align-content: flex-end; } 118 | .content-center-ns { align-content: center; } 119 | .content-between-ns { align-content: space-between; } 120 | .content-around-ns { align-content: space-around; } 121 | .content-stretch-ns { align-content: stretch; } 122 | 123 | .order-0-ns { order: 0; } 124 | .order-1-ns { order: 1; } 125 | .order-2-ns { order: 2; } 126 | .order-3-ns { order: 3; } 127 | .order-4-ns { order: 4; } 128 | .order-5-ns { order: 5; } 129 | .order-6-ns { order: 6; } 130 | .order-7-ns { order: 7; } 131 | .order-8-ns { order: 8; } 132 | .order-last-ns { order: 99999; } 133 | 134 | .flex-grow-0-ns { flex-grow: 0; } 135 | .flex-grow-1-ns { flex-grow: 1; } 136 | 137 | .flex-shrink-0-ns { flex-shrink: 0; } 138 | .flex-shrink-1-ns { flex-shrink: 1; } 139 | } 140 | @media #{$breakpoint-medium} { 141 | .flex-m { display: flex; } 142 | .inline-flex-m { display: inline-flex; } 143 | .flex-auto-m { 144 | flex: 1 1 auto; 145 | min-width: 0; /* 1 */ 146 | min-height: 0; /* 1 */ 147 | } 148 | .flex-none-m { flex: none; } 149 | .flex-column-m { flex-direction: column; } 150 | .flex-row-m { flex-direction: row; } 151 | .flex-wrap-m { flex-wrap: wrap; } 152 | .flex-nowrap-m { flex-wrap: nowrap; } 153 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } 154 | .flex-column-reverse-m { flex-direction: column-reverse; } 155 | .flex-row-reverse-m { flex-direction: row-reverse; } 156 | .items-start-m { align-items: flex-start; } 157 | .items-end-m { align-items: flex-end; } 158 | .items-center-m { align-items: center; } 159 | .items-baseline-m { align-items: baseline; } 160 | .items-stretch-m { align-items: stretch; } 161 | 162 | .self-start-m { align-self: flex-start; } 163 | .self-end-m { align-self: flex-end; } 164 | .self-center-m { align-self: center; } 165 | .self-baseline-m { align-self: baseline; } 166 | .self-stretch-m { align-self: stretch; } 167 | 168 | .justify-start-m { justify-content: flex-start; } 169 | .justify-end-m { justify-content: flex-end; } 170 | .justify-center-m { justify-content: center; } 171 | .justify-between-m { justify-content: space-between; } 172 | .justify-around-m { justify-content: space-around; } 173 | 174 | .content-start-m { align-content: flex-start; } 175 | .content-end-m { align-content: flex-end; } 176 | .content-center-m { align-content: center; } 177 | .content-between-m { align-content: space-between; } 178 | .content-around-m { align-content: space-around; } 179 | .content-stretch-m { align-content: stretch; } 180 | 181 | .order-0-m { order: 0; } 182 | .order-1-m { order: 1; } 183 | .order-2-m { order: 2; } 184 | .order-3-m { order: 3; } 185 | .order-4-m { order: 4; } 186 | .order-5-m { order: 5; } 187 | .order-6-m { order: 6; } 188 | .order-7-m { order: 7; } 189 | .order-8-m { order: 8; } 190 | .order-last-m { order: 99999; } 191 | 192 | .flex-grow-0-m { flex-grow: 0; } 193 | .flex-grow-1-m { flex-grow: 1; } 194 | 195 | .flex-shrink-0-m { flex-shrink: 0; } 196 | .flex-shrink-1-m { flex-shrink: 1; } 197 | } 198 | 199 | @media #{$breakpoint-large} { 200 | .flex-l { display: flex; } 201 | .inline-flex-l { display: inline-flex; } 202 | .flex-auto-l { 203 | flex: 1 1 auto; 204 | min-width: 0; /* 1 */ 205 | min-height: 0; /* 1 */ 206 | } 207 | .flex-none-l { flex: none; } 208 | .flex-column-l { flex-direction: column; } 209 | .flex-row-l { flex-direction: row; } 210 | .flex-wrap-l { flex-wrap: wrap; } 211 | .flex-nowrap-l { flex-wrap: nowrap; } 212 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } 213 | .flex-column-reverse-l { flex-direction: column-reverse; } 214 | .flex-row-reverse-l { flex-direction: row-reverse; } 215 | 216 | .items-start-l { align-items: flex-start; } 217 | .items-end-l { align-items: flex-end; } 218 | .items-center-l { align-items: center; } 219 | .items-baseline-l { align-items: baseline; } 220 | .items-stretch-l { align-items: stretch; } 221 | 222 | .self-start-l { align-self: flex-start; } 223 | .self-end-l { align-self: flex-end; } 224 | .self-center-l { align-self: center; } 225 | .self-baseline-l { align-self: baseline; } 226 | .self-stretch-l { align-self: stretch; } 227 | 228 | .justify-start-l { justify-content: flex-start; } 229 | .justify-end-l { justify-content: flex-end; } 230 | .justify-center-l { justify-content: center; } 231 | .justify-between-l { justify-content: space-between; } 232 | .justify-around-l { justify-content: space-around; } 233 | 234 | .content-start-l { align-content: flex-start; } 235 | .content-end-l { align-content: flex-end; } 236 | .content-center-l { align-content: center; } 237 | .content-between-l { align-content: space-between; } 238 | .content-around-l { align-content: space-around; } 239 | .content-stretch-l { align-content: stretch; } 240 | 241 | .order-0-l { order: 0; } 242 | .order-1-l { order: 1; } 243 | .order-2-l { order: 2; } 244 | .order-3-l { order: 3; } 245 | .order-4-l { order: 4; } 246 | .order-5-l { order: 5; } 247 | .order-6-l { order: 6; } 248 | .order-7-l { order: 7; } 249 | .order-8-l { order: 8; } 250 | .order-last-l { order: 99999; } 251 | 252 | .flex-grow-0-l { flex-grow: 0; } 253 | .flex-grow-1-l { flex-grow: 1; } 254 | 255 | .flex-shrink-0-l { flex-shrink: 0; } 256 | .flex-shrink-1-l { flex-shrink: 1; } 257 | } 258 | -------------------------------------------------------------------------------- /assets/scss/_floats.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FLOATS 11 | http://tachyons.io/docs/layout/floats/ 12 | 13 | 1. Floated elements are automatically rendered as block level elements. 14 | Setting floats to display inline will fix the double margin bug in 15 | ie6. You know... just in case. 16 | 17 | 2. Don't forget to clearfix your floats with .cf 18 | 19 | Base: 20 | f = float 21 | 22 | Modifiers: 23 | l = left 24 | r = right 25 | n = none 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | 35 | 36 | .fl { float: left; _display: inline; } 37 | .fr { float: right; _display: inline; } 38 | .fn { float: none; } 39 | 40 | @media #{$breakpoint-not-small} { 41 | .fl-ns { float: left; _display: inline; } 42 | .fr-ns { float: right; _display: inline; } 43 | .fn-ns { float: none; } 44 | } 45 | 46 | @media #{$breakpoint-medium} { 47 | .fl-m { float: left; _display: inline; } 48 | .fr-m { float: right; _display: inline; } 49 | .fn-m { float: none; } 50 | } 51 | 52 | @media #{$breakpoint-large} { 53 | .fl-l { float: left; _display: inline; } 54 | .fr-l { float: right; _display: inline; } 55 | .fn-l { float: none; } 56 | } 57 | -------------------------------------------------------------------------------- /assets/scss/_font-family.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT FAMILY GROUPS 11 | Docs: http://tachyons.io/docs/typography/font-family/ 12 | 13 | */ 14 | 15 | 16 | .sans-serif { 17 | font-family: $sans-serif; 18 | } 19 | 20 | .serif { 21 | font-family: $serif; 22 | } 23 | 24 | .system-sans-serif { 25 | font-family: sans-serif; 26 | } 27 | 28 | .system-serif { 29 | font-family: serif; 30 | } 31 | 32 | 33 | /* Monospaced Typefaces (for code) */ 34 | 35 | /* From http://cssfontstack.com */ 36 | code, .code { 37 | font-family: Consolas, 38 | monaco, 39 | monospace; 40 | } 41 | 42 | .courier { 43 | font-family: 'Courier Next', 44 | courier, 45 | monospace; 46 | } 47 | 48 | 49 | /* Sans-Serif Typefaces */ 50 | 51 | .helvetica { 52 | font-family: 'helvetica neue', helvetica, 53 | sans-serif; 54 | } 55 | 56 | .avenir { 57 | font-family: 'avenir next', avenir, 58 | sans-serif; 59 | } 60 | 61 | 62 | /* Serif Typefaces */ 63 | 64 | .athelas { 65 | font-family: athelas, 66 | georgia, 67 | serif; 68 | } 69 | 70 | .georgia { 71 | font-family: georgia, 72 | serif; 73 | } 74 | 75 | .times { 76 | font-family: times, 77 | serif; 78 | } 79 | 80 | .bodoni { 81 | font-family: "Bodoni MT", 82 | serif; 83 | } 84 | 85 | .calisto { 86 | font-family: "Calisto MT", 87 | serif; 88 | } 89 | 90 | .garamond { 91 | font-family: garamond, 92 | serif; 93 | } 94 | 95 | .baskerville { 96 | font-family: baskerville, 97 | serif; 98 | } 99 | 100 | -------------------------------------------------------------------------------- /assets/scss/_font-style.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT STYLE 11 | Docs: http://tachyons.io/docs/typography/font-style/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .i { font-style: italic; } 21 | .fs-normal { font-style: normal; } 22 | 23 | @media #{$breakpoint-not-small} { 24 | .i-ns { font-style: italic; } 25 | .fs-normal-ns { font-style: normal; } 26 | } 27 | 28 | @media #{$breakpoint-medium} { 29 | .i-m { font-style: italic; } 30 | .fs-normal-m { font-style: normal; } 31 | } 32 | 33 | @media #{$breakpoint-large} { 34 | .i-l { font-style: italic; } 35 | .fs-normal-l { font-style: normal; } 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/_font-weight.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT WEIGHT 11 | Docs: http://tachyons.io/docs/typography/font-weight/ 12 | 13 | Base 14 | fw = font-weight 15 | 16 | Modifiers: 17 | 1 = literal value 100 18 | 2 = literal value 200 19 | 3 = literal value 300 20 | 4 = literal value 400 21 | 5 = literal value 500 22 | 6 = literal value 600 23 | 7 = literal value 700 24 | 8 = literal value 800 25 | 9 = literal value 900 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .normal { font-weight: normal; } 35 | .b { font-weight: bold; } 36 | .fw1 { font-weight: 100; } 37 | .fw2 { font-weight: 200; } 38 | .fw3 { font-weight: 300; } 39 | .fw4 { font-weight: 400; } 40 | .fw5 { font-weight: 500; } 41 | .fw6 { font-weight: 600; } 42 | .fw7 { font-weight: 700; } 43 | .fw8 { font-weight: 800; } 44 | .fw9 { font-weight: 900; } 45 | 46 | 47 | @media #{$breakpoint-not-small} { 48 | .normal-ns { font-weight: normal; } 49 | .b-ns { font-weight: bold; } 50 | .fw1-ns { font-weight: 100; } 51 | .fw2-ns { font-weight: 200; } 52 | .fw3-ns { font-weight: 300; } 53 | .fw4-ns { font-weight: 400; } 54 | .fw5-ns { font-weight: 500; } 55 | .fw6-ns { font-weight: 600; } 56 | .fw7-ns { font-weight: 700; } 57 | .fw8-ns { font-weight: 800; } 58 | .fw9-ns { font-weight: 900; } 59 | } 60 | 61 | @media #{$breakpoint-medium} { 62 | .normal-m { font-weight: normal; } 63 | .b-m { font-weight: bold; } 64 | .fw1-m { font-weight: 100; } 65 | .fw2-m { font-weight: 200; } 66 | .fw3-m { font-weight: 300; } 67 | .fw4-m { font-weight: 400; } 68 | .fw5-m { font-weight: 500; } 69 | .fw6-m { font-weight: 600; } 70 | .fw7-m { font-weight: 700; } 71 | .fw8-m { font-weight: 800; } 72 | .fw9-m { font-weight: 900; } 73 | } 74 | 75 | @media #{$breakpoint-large} { 76 | .normal-l { font-weight: normal; } 77 | .b-l { font-weight: bold; } 78 | .fw1-l { font-weight: 100; } 79 | .fw2-l { font-weight: 200; } 80 | .fw3-l { font-weight: 300; } 81 | .fw4-l { font-weight: 400; } 82 | .fw5-l { font-weight: 500; } 83 | .fw6-l { font-weight: 600; } 84 | .fw7-l { font-weight: 700; } 85 | .fw8-l { font-weight: 800; } 86 | .fw9-l { font-weight: 900; } 87 | } 88 | -------------------------------------------------------------------------------- /assets/scss/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FORMS 11 | 12 | */ 13 | 14 | .input-reset { 15 | -webkit-appearance: none; 16 | -moz-appearance: none; 17 | } 18 | 19 | .button-reset::-moz-focus-inner, 20 | .input-reset::-moz-focus-inner { 21 | border: 0; 22 | padding: 0; 23 | } 24 | -------------------------------------------------------------------------------- /assets/scss/_gradients.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | GRADIENTS 11 | 12 | 13 | */ 14 | 15 | .gradient-blue { 16 | background-image: linear-gradient(#4570B0, #0081C2); 17 | } 18 | 19 | .gradient-blue-reversed { 20 | background-image: linear-gradient(#0081C2, #4570B0); 21 | } 22 | 23 | .gradient-light-blue { 24 | background-image: linear-gradient(#76D3FE, #008AE0); 25 | } 26 | 27 | .gradient-light-blue-reversed { 28 | background-image: linear-gradient(#008AE0, #76D3FE); 29 | } 30 | -------------------------------------------------------------------------------- /assets/scss/_heights.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | HEIGHTS 11 | Docs: http://tachyons.io/docs/layout/heights/ 12 | 13 | Base: 14 | h = height 15 | min-h = min-height 16 | min-vh = min-height vertical screen height 17 | vh = vertical screen height 18 | 19 | Modifiers 20 | 1 = 1st step in height scale 21 | 2 = 2nd step in height scale 22 | 3 = 3rd step in height scale 23 | 4 = 4th step in height scale 24 | 5 = 5th step in height scale 25 | 26 | -25 = literal value 25% 27 | -50 = literal value 50% 28 | -75 = literal value 75% 29 | -100 = literal value 100% 30 | 31 | -auto = string value of auto 32 | -inherit = string value of inherit 33 | 34 | Media Query Extensions: 35 | -ns = not-small 36 | -m = medium 37 | -l = large 38 | 39 | */ 40 | 41 | /* Height Scale */ 42 | 43 | .h1 { height: $height-1; } 44 | .h2 { height: $height-2; } 45 | .h3 { height: $height-3; } 46 | .h4 { height: $height-4; } 47 | .h5 { height: $height-5; } 48 | 49 | /* Height Percentages - Based off of height of parent */ 50 | 51 | .h-25 { height: 25%; } 52 | .h-50 { height: 50%; } 53 | .h-75 { height: 75%; } 54 | .h-100 { height: 100%; } 55 | 56 | .min-h-100 { min-height: 100%; } 57 | 58 | /* Screen Height Percentage */ 59 | 60 | .vh-25 { height: 25vh; } 61 | .vh-50 { height: 50vh; } 62 | .vh-75 { height: 75vh; } 63 | .vh-100 { height: 100vh; } 64 | 65 | .min-vh-100 { min-height: 100vh; } 66 | 67 | 68 | /* String Properties */ 69 | 70 | .h-auto { height: auto; } 71 | .h-inherit { height: inherit; } 72 | 73 | @media #{$breakpoint-not-small} { 74 | .h1-ns { height: $height-1; } 75 | .h2-ns { height: $height-2; } 76 | .h3-ns { height: $height-3; } 77 | .h4-ns { height: $height-4; } 78 | .h5-ns { height: $height-5; } 79 | .h-25-ns { height: 25%; } 80 | .h-50-ns { height: 50%; } 81 | .h-75-ns { height: 75%; } 82 | .h-100-ns { height: 100%; } 83 | .min-h-100-ns { min-height: 100%; } 84 | .vh-25-ns { height: 25vh; } 85 | .vh-50-ns { height: 50vh; } 86 | .vh-75-ns { height: 75vh; } 87 | .vh-100-ns { height: 100vh; } 88 | .min-vh-100-ns { min-height: 100vh; } 89 | .h-auto-ns { height: auto; } 90 | .h-inherit-ns { height: inherit; } 91 | } 92 | 93 | @media #{$breakpoint-medium} { 94 | .h1-m { height: $height-1; } 95 | .h2-m { height: $height-2; } 96 | .h3-m { height: $height-3; } 97 | .h4-m { height: $height-4; } 98 | .h5-m { height: $height-5; } 99 | .h-25-m { height: 25%; } 100 | .h-50-m { height: 50%; } 101 | .h-75-m { height: 75%; } 102 | .h-100-m { height: 100%; } 103 | .min-h-100-m { min-height: 100%; } 104 | .vh-25-m { height: 25vh; } 105 | .vh-50-m { height: 50vh; } 106 | .vh-75-m { height: 75vh; } 107 | .vh-100-m { height: 100vh; } 108 | .min-vh-100-m { min-height: 100vh; } 109 | .h-auto-m { height: auto; } 110 | .h-inherit-m { height: inherit; } 111 | } 112 | 113 | @media #{$breakpoint-large} { 114 | .h1-l { height: $height-1; } 115 | .h2-l { height: $height-2; } 116 | .h3-l { height: $height-3; } 117 | .h4-l { height: $height-4; } 118 | .h5-l { height: $height-5; } 119 | .h-25-l { height: 25%; } 120 | .h-50-l { height: 50%; } 121 | .h-75-l { height: 75%; } 122 | .h-100-l { height: 100%; } 123 | .min-h-100-l { min-height: 100%; } 124 | .vh-25-l { height: 25vh; } 125 | .vh-50-l { height: 50vh; } 126 | .vh-75-l { height: 75vh; } 127 | .vh-100-l { height: 100vh; } 128 | .min-vh-100-l { min-height: 100vh; } 129 | .h-auto-l { height: auto; } 130 | .h-inherit-l { height: inherit; } 131 | } 132 | -------------------------------------------------------------------------------- /assets/scss/_hovers.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | HOVER EFFECTS 11 | Docs: http://tachyons.io/docs/themes/hovers/ 12 | 13 | - Dim 14 | - Glow 15 | - Hide Child 16 | - Underline text 17 | - Grow 18 | - Pointer 19 | - Shadow 20 | 21 | */ 22 | 23 | /* 24 | 25 | Dim element on hover by adding the dim class. 26 | 27 | */ 28 | .dim { 29 | opacity: 1; 30 | transition: opacity .15s ease-in; 31 | } 32 | .dim:hover, 33 | .dim:focus { 34 | opacity: .5; 35 | transition: opacity .15s ease-in; 36 | } 37 | .dim:active { 38 | opacity: .8; transition: opacity .15s ease-out; 39 | } 40 | 41 | /* 42 | 43 | Animate opacity to 100% on hover by adding the glow class. 44 | 45 | */ 46 | .glow { 47 | transition: opacity .15s ease-in; 48 | } 49 | .glow:hover, 50 | .glow:focus { 51 | opacity: 1; 52 | transition: opacity .15s ease-in; 53 | } 54 | 55 | /* 56 | 57 | Hide child & reveal on hover: 58 | 59 | Put the hide-child class on a parent element and any nested element with the 60 | child class will be hidden and displayed on hover or focus. 61 | 62 |
63 |
Hidden until hover or focus
64 |
Hidden until hover or focus
65 |
Hidden until hover or focus
66 |
Hidden until hover or focus
67 |
68 | */ 69 | 70 | .hide-child .child { 71 | opacity: 0; 72 | transition: opacity .15s ease-in; 73 | } 74 | .hide-child:hover .child, 75 | .hide-child:focus .child, 76 | .hide-child:active .child { 77 | opacity: 1; 78 | transition: opacity .15s ease-in; 79 | } 80 | 81 | .underline-hover:hover, 82 | .underline-hover:focus { 83 | text-decoration: underline; 84 | } 85 | 86 | /* Can combine this with overflow-hidden to make background images grow on hover 87 | * even if you are using background-size: cover */ 88 | 89 | .grow { 90 | -moz-osx-font-smoothing: grayscale; 91 | backface-visibility: hidden; 92 | transform: translateZ(0); 93 | transition: transform 0.25s ease-out; 94 | } 95 | 96 | .grow:hover, 97 | .grow:focus { 98 | transform: scale(1.05); 99 | } 100 | 101 | .grow:active { 102 | transform: scale(.90); 103 | } 104 | 105 | .grow-large { 106 | -moz-osx-font-smoothing: grayscale; 107 | backface-visibility: hidden; 108 | transform: translateZ(0); 109 | transition: transform .25s ease-in-out; 110 | } 111 | 112 | .grow-large:hover, 113 | .grow-large:focus { 114 | transform: scale(1.2); 115 | } 116 | 117 | .grow-large:active { 118 | transform: scale(.95); 119 | } 120 | 121 | /* Add pointer on hover */ 122 | 123 | .pointer:hover { 124 | cursor: pointer; 125 | } 126 | 127 | /* 128 | Add shadow on hover. 129 | 130 | Performant box-shadow animation pattern from 131 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 132 | */ 133 | 134 | .shadow-hover { 135 | cursor: pointer; 136 | position: relative; 137 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 138 | } 139 | 140 | .shadow-hover::after { 141 | content: ''; 142 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); 143 | border-radius: inherit; 144 | opacity: 0; 145 | position: absolute; 146 | top: 0; 147 | left: 0; 148 | width: 100%; 149 | height: 100%; 150 | z-index: -1; 151 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 152 | } 153 | 154 | .shadow-hover:hover::after, 155 | .shadow-hover:focus::after { 156 | opacity: 1; 157 | } 158 | 159 | /* Combine with classes in skins and skins-pseudo for 160 | * many different transition possibilities. */ 161 | 162 | .bg-animate, 163 | .bg-animate:hover, 164 | .bg-animate:focus { 165 | transition: background-color .15s ease-in-out; 166 | } 167 | -------------------------------------------------------------------------------- /assets/scss/_images.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | IMAGES 11 | Docs: http://tachyons.io/docs/elements/images/ 12 | 13 | */ 14 | 15 | /* Responsive images! */ 16 | 17 | img { max-width: 100%; } 18 | 19 | -------------------------------------------------------------------------------- /assets/scss/_letter-spacing.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LETTER SPACING 11 | Docs: http://tachyons.io/docs/typography/tracking/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .tracked { letter-spacing: $letter-spacing-1; } 21 | .tracked-tight { letter-spacing: $letter-spacing-tight; } 22 | .tracked-mega { letter-spacing: $letter-spacing-2; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .tracked-ns { letter-spacing: $letter-spacing-1; } 26 | .tracked-tight-ns { letter-spacing: $letter-spacing-tight; } 27 | .tracked-mega-ns { letter-spacing: $letter-spacing-2; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .tracked-m { letter-spacing: $letter-spacing-1; } 32 | .tracked-tight-m { letter-spacing: $letter-spacing-tight; } 33 | .tracked-mega-m { letter-spacing: $letter-spacing-2; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .tracked-l { letter-spacing: $letter-spacing-1; } 38 | .tracked-tight-l { letter-spacing: $letter-spacing-tight; } 39 | .tracked-mega-l { letter-spacing: $letter-spacing-2; } 40 | } 41 | -------------------------------------------------------------------------------- /assets/scss/_line-height.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LINE HEIGHT / LEADING 11 | Docs: http://tachyons.io/docs/typography/line-height 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .lh-solid { line-height: $line-height-solid; } 21 | .lh-title { line-height: $line-height-title; } 22 | .lh-copy { line-height: $line-height-copy; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .lh-solid-ns { line-height: $line-height-solid; } 26 | .lh-title-ns { line-height: $line-height-title; } 27 | .lh-copy-ns { line-height: $line-height-copy; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .lh-solid-m { line-height: $line-height-solid; } 32 | .lh-title-m { line-height: $line-height-title; } 33 | .lh-copy-m { line-height: $line-height-copy; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .lh-solid-l { line-height: $line-height-solid; } 38 | .lh-title-l { line-height: $line-height-title; } 39 | .lh-copy-l { line-height: $line-height-copy; } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /assets/scss/_links.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LINKS 11 | Docs: http://tachyons.io/docs/elements/links/ 12 | 13 | */ 14 | 15 | .link { 16 | text-decoration: none; 17 | transition: color .15s ease-in; 18 | } 19 | 20 | .link:link, 21 | .link:visited { 22 | transition: color .15s ease-in; 23 | } 24 | .link:hover { 25 | transition: color .15s ease-in; 26 | } 27 | .link:active { 28 | transition: color .15s ease-in; 29 | } 30 | .link:focus { 31 | transition: color .15s ease-in; 32 | outline: 1px dotted currentColor; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /assets/scss/_lists.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LISTS 11 | http://tachyons.io/docs/elements/lists/ 12 | 13 | */ 14 | 15 | .list { list-style-type: none; } 16 | -------------------------------------------------------------------------------- /assets/scss/_max-widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | MAX WIDTHS 11 | Docs: http://tachyons.io/docs/layout/max-widths/ 12 | 13 | Base: 14 | mw = max-width 15 | 16 | Modifiers 17 | 1 = 1st step in width scale 18 | 2 = 2nd step in width scale 19 | 3 = 3rd step in width scale 20 | 4 = 4th step in width scale 21 | 5 = 5th step in width scale 22 | 6 = 6st step in width scale 23 | 7 = 7nd step in width scale 24 | 8 = 8rd step in width scale 25 | 9 = 9th step in width scale 26 | 27 | -100 = literal value 100% 28 | 29 | -none = string value none 30 | 31 | 32 | Media Query Extensions: 33 | -ns = not-small 34 | -m = medium 35 | -l = large 36 | 37 | */ 38 | 39 | /* Max Width Percentages */ 40 | 41 | .mw-100 { max-width: 100%; } 42 | 43 | /* Max Width Scale */ 44 | 45 | .mw1 { max-width: $max-width-1; } 46 | .mw2 { max-width: $max-width-2; } 47 | .mw3 { max-width: $max-width-3; } 48 | .mw4 { max-width: $max-width-4; } 49 | .mw5 { max-width: $max-width-5; } 50 | .mw6 { max-width: $max-width-6; } 51 | .mw7 { max-width: $max-width-7; } 52 | .mw8 { max-width: $max-width-8; } 53 | .mw9 { max-width: $max-width-9; } 54 | 55 | /* Max Width String Properties */ 56 | 57 | .mw-none { max-width: none; } 58 | 59 | @media #{$breakpoint-not-small} { 60 | .mw-100-ns { max-width: 100%; } 61 | 62 | .mw1-ns { max-width: $max-width-1; } 63 | .mw2-ns { max-width: $max-width-2; } 64 | .mw3-ns { max-width: $max-width-3; } 65 | .mw4-ns { max-width: $max-width-4; } 66 | .mw5-ns { max-width: $max-width-5; } 67 | .mw6-ns { max-width: $max-width-6; } 68 | .mw7-ns { max-width: $max-width-7; } 69 | .mw8-ns { max-width: $max-width-8; } 70 | .mw9-ns { max-width: $max-width-9; } 71 | 72 | .mw-none-ns { max-width: none; } 73 | } 74 | 75 | @media #{$breakpoint-medium} { 76 | .mw-100-m { max-width: 100%; } 77 | 78 | .mw1-m { max-width: $max-width-1; } 79 | .mw2-m { max-width: $max-width-2; } 80 | .mw3-m { max-width: $max-width-3; } 81 | .mw4-m { max-width: $max-width-4; } 82 | .mw5-m { max-width: $max-width-5; } 83 | .mw6-m { max-width: $max-width-6; } 84 | .mw7-m { max-width: $max-width-7; } 85 | .mw8-m { max-width: $max-width-8; } 86 | .mw9-m { max-width: $max-width-9; } 87 | 88 | .mw-none-m { max-width: none; } 89 | } 90 | 91 | @media #{$breakpoint-large} { 92 | .mw-100-l { max-width: 100%; } 93 | 94 | .mw1-l { max-width: $max-width-1; } 95 | .mw2-l { max-width: $max-width-2; } 96 | .mw3-l { max-width: $max-width-3; } 97 | .mw4-l { max-width: $max-width-4; } 98 | .mw5-l { max-width: $max-width-5; } 99 | .mw6-l { max-width: $max-width-6; } 100 | .mw7-l { max-width: $max-width-7; } 101 | .mw8-l { max-width: $max-width-8; } 102 | .mw9-l { max-width: $max-width-9; } 103 | 104 | .mw-none-l { max-width: none; } 105 | } 106 | -------------------------------------------------------------------------------- /assets/scss/_module-template.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | MODULE NAME 11 | 12 | Use this scaffolding to create or extend your own modules with tachyons 13 | style architecture. 14 | 15 | */ 16 | 17 | 18 | @media #{$breakpoint-not-small} { 19 | 20 | } 21 | 22 | @media #{$breakpoint-medium} { 23 | 24 | } 25 | 26 | @media #{$breakpoint-large} { 27 | 28 | } 29 | 30 | -------------------------------------------------------------------------------- /assets/scss/_negative-margins.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | NEGATIVE MARGINS 10 | 11 | Base: 12 | n = negative 13 | 14 | Modifiers: 15 | a = all 16 | t = top 17 | r = right 18 | b = bottom 19 | l = left 20 | 21 | 1 = 1st step in spacing scale 22 | 2 = 2nd step in spacing scale 23 | 3 = 3rd step in spacing scale 24 | 4 = 4th step in spacing scale 25 | 5 = 5th step in spacing scale 26 | 6 = 6th step in spacing scale 27 | 7 = 7th step in spacing scale 28 | 29 | Media Query Extensions: 30 | -ns = not-small 31 | -m = medium 32 | -l = large 33 | 34 | */ 35 | 36 | 37 | 38 | .na1 { margin: -$spacing-extra-small; } 39 | .na2 { margin: -$spacing-small; } 40 | .na3 { margin: -$spacing-medium; } 41 | .na4 { margin: -$spacing-large; } 42 | .na5 { margin: -$spacing-extra-large; } 43 | .na6 { margin: -$spacing-extra-extra-large; } 44 | .na7 { margin: -$spacing-extra-extra-extra-large; } 45 | 46 | .nl1 { margin-left: -$spacing-extra-small; } 47 | .nl2 { margin-left: -$spacing-small; } 48 | .nl3 { margin-left: -$spacing-medium; } 49 | .nl4 { margin-left: -$spacing-large; } 50 | .nl5 { margin-left: -$spacing-extra-large; } 51 | .nl6 { margin-left: -$spacing-extra-extra-large; } 52 | .nl7 { margin-left: -$spacing-extra-extra-extra-large; } 53 | 54 | .nr1 { margin-right: -$spacing-extra-small; } 55 | .nr2 { margin-right: -$spacing-small; } 56 | .nr3 { margin-right: -$spacing-medium; } 57 | .nr4 { margin-right: -$spacing-large; } 58 | .nr5 { margin-right: -$spacing-extra-large; } 59 | .nr6 { margin-right: -$spacing-extra-extra-large; } 60 | .nr7 { margin-right: -$spacing-extra-extra-extra-large; } 61 | 62 | .nb1 { margin-bottom: -$spacing-extra-small; } 63 | .nb2 { margin-bottom: -$spacing-small; } 64 | .nb3 { margin-bottom: -$spacing-medium; } 65 | .nb4 { margin-bottom: -$spacing-large; } 66 | .nb5 { margin-bottom: -$spacing-extra-large; } 67 | .nb6 { margin-bottom: -$spacing-extra-extra-large; } 68 | .nb7 { margin-bottom: -$spacing-extra-extra-extra-large; } 69 | 70 | .nt1 { margin-top: -$spacing-extra-small; } 71 | .nt2 { margin-top: -$spacing-small; } 72 | .nt3 { margin-top: -$spacing-medium; } 73 | .nt4 { margin-top: -$spacing-large; } 74 | .nt5 { margin-top: -$spacing-extra-large; } 75 | .nt6 { margin-top: -$spacing-extra-extra-large; } 76 | .nt7 { margin-top: -$spacing-extra-extra-extra-large; } 77 | 78 | @media #{$breakpoint-not-small} { 79 | 80 | .na1-ns { margin: -$spacing-extra-small; } 81 | .na2-ns { margin: -$spacing-small; } 82 | .na3-ns { margin: -$spacing-medium; } 83 | .na4-ns { margin: -$spacing-large; } 84 | .na5-ns { margin: -$spacing-extra-large; } 85 | .na6-ns { margin: -$spacing-extra-extra-large; } 86 | .na7-ns { margin: -$spacing-extra-extra-extra-large; } 87 | 88 | .nl1-ns { margin-left: -$spacing-extra-small; } 89 | .nl2-ns { margin-left: -$spacing-small; } 90 | .nl3-ns { margin-left: -$spacing-medium; } 91 | .nl4-ns { margin-left: -$spacing-large; } 92 | .nl5-ns { margin-left: -$spacing-extra-large; } 93 | .nl6-ns { margin-left: -$spacing-extra-extra-large; } 94 | .nl7-ns { margin-left: -$spacing-extra-extra-extra-large; } 95 | 96 | .nr1-ns { margin-right: -$spacing-extra-small; } 97 | .nr2-ns { margin-right: -$spacing-small; } 98 | .nr3-ns { margin-right: -$spacing-medium; } 99 | .nr4-ns { margin-right: -$spacing-large; } 100 | .nr5-ns { margin-right: -$spacing-extra-large; } 101 | .nr6-ns { margin-right: -$spacing-extra-extra-large; } 102 | .nr7-ns { margin-right: -$spacing-extra-extra-extra-large; } 103 | 104 | .nb1-ns { margin-bottom: -$spacing-extra-small; } 105 | .nb2-ns { margin-bottom: -$spacing-small; } 106 | .nb3-ns { margin-bottom: -$spacing-medium; } 107 | .nb4-ns { margin-bottom: -$spacing-large; } 108 | .nb5-ns { margin-bottom: -$spacing-extra-large; } 109 | .nb6-ns { margin-bottom: -$spacing-extra-extra-large; } 110 | .nb7-ns { margin-bottom: -$spacing-extra-extra-extra-large; } 111 | 112 | .nt1-ns { margin-top: -$spacing-extra-small; } 113 | .nt2-ns { margin-top: -$spacing-small; } 114 | .nt3-ns { margin-top: -$spacing-medium; } 115 | .nt4-ns { margin-top: -$spacing-large; } 116 | .nt5-ns { margin-top: -$spacing-extra-large; } 117 | .nt6-ns { margin-top: -$spacing-extra-extra-large; } 118 | .nt7-ns { margin-top: -$spacing-extra-extra-extra-large; } 119 | 120 | } 121 | 122 | @media #{$breakpoint-medium} { 123 | .na1-m { margin: -$spacing-extra-small; } 124 | .na2-m { margin: -$spacing-small; } 125 | .na3-m { margin: -$spacing-medium; } 126 | .na4-m { margin: -$spacing-large; } 127 | .na5-m { margin: -$spacing-extra-large; } 128 | .na6-m { margin: -$spacing-extra-extra-large; } 129 | .na7-m { margin: -$spacing-extra-extra-extra-large; } 130 | 131 | .nl1-m { margin-left: -$spacing-extra-small; } 132 | .nl2-m { margin-left: -$spacing-small; } 133 | .nl3-m { margin-left: -$spacing-medium; } 134 | .nl4-m { margin-left: -$spacing-large; } 135 | .nl5-m { margin-left: -$spacing-extra-large; } 136 | .nl6-m { margin-left: -$spacing-extra-extra-large; } 137 | .nl7-m { margin-left: -$spacing-extra-extra-extra-large; } 138 | 139 | .nr1-m { margin-right: -$spacing-extra-small; } 140 | .nr2-m { margin-right: -$spacing-small; } 141 | .nr3-m { margin-right: -$spacing-medium; } 142 | .nr4-m { margin-right: -$spacing-large; } 143 | .nr5-m { margin-right: -$spacing-extra-large; } 144 | .nr6-m { margin-right: -$spacing-extra-extra-large; } 145 | .nr7-m { margin-right: -$spacing-extra-extra-extra-large; } 146 | 147 | .nb1-m { margin-bottom: -$spacing-extra-small; } 148 | .nb2-m { margin-bottom: -$spacing-small; } 149 | .nb3-m { margin-bottom: -$spacing-medium; } 150 | .nb4-m { margin-bottom: -$spacing-large; } 151 | .nb5-m { margin-bottom: -$spacing-extra-large; } 152 | .nb6-m { margin-bottom: -$spacing-extra-extra-large; } 153 | .nb7-m { margin-bottom: -$spacing-extra-extra-extra-large; } 154 | 155 | .nt1-m { margin-top: -$spacing-extra-small; } 156 | .nt2-m { margin-top: -$spacing-small; } 157 | .nt3-m { margin-top: -$spacing-medium; } 158 | .nt4-m { margin-top: -$spacing-large; } 159 | .nt5-m { margin-top: -$spacing-extra-large; } 160 | .nt6-m { margin-top: -$spacing-extra-extra-large; } 161 | .nt7-m { margin-top: -$spacing-extra-extra-extra-large; } 162 | 163 | } 164 | 165 | @media #{$breakpoint-large} { 166 | .na1-l { margin: -$spacing-extra-small; } 167 | .na2-l { margin: -$spacing-small; } 168 | .na3-l { margin: -$spacing-medium; } 169 | .na4-l { margin: -$spacing-large; } 170 | .na5-l { margin: -$spacing-extra-large; } 171 | .na6-l { margin: -$spacing-extra-extra-large; } 172 | .na7-l { margin: -$spacing-extra-extra-extra-large; } 173 | 174 | .nl1-l { margin-left: -$spacing-extra-small; } 175 | .nl2-l { margin-left: -$spacing-small; } 176 | .nl3-l { margin-left: -$spacing-medium; } 177 | .nl4-l { margin-left: -$spacing-large; } 178 | .nl5-l { margin-left: -$spacing-extra-large; } 179 | .nl6-l { margin-left: -$spacing-extra-extra-large; } 180 | .nl7-l { margin-left: -$spacing-extra-extra-extra-large; } 181 | 182 | .nr1-l { margin-right: -$spacing-extra-small; } 183 | .nr2-l { margin-right: -$spacing-small; } 184 | .nr3-l { margin-right: -$spacing-medium; } 185 | .nr4-l { margin-right: -$spacing-large; } 186 | .nr5-l { margin-right: -$spacing-extra-large; } 187 | .nr6-l { margin-right: -$spacing-extra-extra-large; } 188 | .nr7-l { margin-right: -$spacing-extra-extra-extra-large; } 189 | 190 | .nb1-l { margin-bottom: -$spacing-extra-small; } 191 | .nb2-l { margin-bottom: -$spacing-small; } 192 | .nb3-l { margin-bottom: -$spacing-medium; } 193 | .nb4-l { margin-bottom: -$spacing-large; } 194 | .nb5-l { margin-bottom: -$spacing-extra-large; } 195 | .nb6-l { margin-bottom: -$spacing-extra-extra-large; } 196 | .nb7-l { margin-bottom: -$spacing-extra-extra-extra-large; } 197 | 198 | .nt1-l { margin-top: -$spacing-extra-small; } 199 | .nt2-l { margin-top: -$spacing-small; } 200 | .nt3-l { margin-top: -$spacing-medium; } 201 | .nt4-l { margin-top: -$spacing-large; } 202 | .nt5-l { margin-top: -$spacing-extra-large; } 203 | .nt6-l { margin-top: -$spacing-extra-extra-large; } 204 | .nt7-l { margin-top: -$spacing-extra-extra-extra-large; } 205 | } 206 | -------------------------------------------------------------------------------- /assets/scss/_nested.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | NESTED 11 | Tachyons module for styling nested elements 12 | that are generated by a cms. 13 | 14 | */ 15 | 16 | .nested-copy-line-height p, 17 | .nested-copy-line-height ul, 18 | .nested-copy-line-height ol { 19 | line-height: $line-height-copy; 20 | } 21 | 22 | .nested-headline-line-height h1, 23 | .nested-headline-line-height h2, 24 | .nested-headline-line-height h3, 25 | .nested-headline-line-height h4, 26 | .nested-headline-line-height h5, 27 | .nested-headline-line-height h6 { 28 | line-height: $line-height-title; 29 | } 30 | 31 | .nested-list-reset ul, 32 | .nested-list-reset ol { 33 | padding-left: 0; 34 | margin-left: 0; 35 | list-style-type: none; 36 | } 37 | 38 | .nested-copy-indent p+p { 39 | text-indent: $letter-spacing-1; 40 | margin-top: $spacing-none; 41 | margin-bottom: $spacing-none; 42 | } 43 | 44 | .nested-copy-seperator p+p { 45 | margin-top: $spacing-copy-separator; 46 | } 47 | 48 | .nested-img img { 49 | width: 100%; 50 | max-width: 100%; 51 | display: block; 52 | } 53 | 54 | .nested-links a { 55 | color: $blue; 56 | transition: color .15s ease-in; 57 | } 58 | 59 | .nested-links a:hover, 60 | .nested-links a:focus { 61 | color: $light-blue; 62 | transition: color .15s ease-in; 63 | } 64 | -------------------------------------------------------------------------------- /assets/scss/_opacity.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OPACITY 11 | Docs: http://tachyons.io/docs/themes/opacity/ 12 | 13 | */ 14 | 15 | .o-100 { opacity: 1; } 16 | .o-90 { opacity: .9; } 17 | .o-80 { opacity: .8; } 18 | .o-70 { opacity: .7; } 19 | .o-60 { opacity: .6; } 20 | .o-50 { opacity: .5; } 21 | .o-40 { opacity: .4; } 22 | .o-30 { opacity: .3; } 23 | .o-20 { opacity: .2; } 24 | .o-10 { opacity: .1; } 25 | .o-05 { opacity: .05; } 26 | .o-025 { opacity: .025; } 27 | .o-0 { opacity: 0; } 28 | -------------------------------------------------------------------------------- /assets/scss/_outlines.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OUTLINES 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .outline { outline: 1px solid; } 20 | .outline-transparent { outline: 1px solid transparent; } 21 | .outline-0 { outline: 0; } 22 | 23 | @media #{$breakpoint-not-small} { 24 | .outline-ns { outline: 1px solid; } 25 | .outline-transparent-ns { outline: 1px solid transparent; } 26 | .outline-0-ns { outline: 0; } 27 | } 28 | 29 | @media #{$breakpoint-medium} { 30 | .outline-m { outline: 1px solid; } 31 | .outline-transparent-m { outline: 1px solid transparent; } 32 | .outline-0-m { outline: 0; } 33 | } 34 | 35 | @media #{$breakpoint-large} { 36 | .outline-l { outline: 1px solid; } 37 | .outline-transparent-l { outline: 1px solid transparent; } 38 | .outline-0-l { outline: 0; } 39 | } 40 | -------------------------------------------------------------------------------- /assets/scss/_overflow.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OVERFLOW 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .overflow-visible { overflow: visible; } 20 | .overflow-hidden { overflow: hidden; } 21 | .overflow-scroll { overflow: scroll; } 22 | .overflow-auto { overflow: auto; } 23 | 24 | .overflow-x-visible { overflow-x: visible; } 25 | .overflow-x-hidden { overflow-x: hidden; } 26 | .overflow-x-scroll { overflow-x: scroll; } 27 | .overflow-x-auto { overflow-x: auto; } 28 | 29 | .overflow-y-visible { overflow-y: visible; } 30 | .overflow-y-hidden { overflow-y: hidden; } 31 | .overflow-y-scroll { overflow-y: scroll; } 32 | .overflow-y-auto { overflow-y: auto; } 33 | 34 | @media #{$breakpoint-not-small} { 35 | .overflow-visible-ns { overflow: visible; } 36 | .overflow-hidden-ns { overflow: hidden; } 37 | .overflow-scroll-ns { overflow: scroll; } 38 | .overflow-auto-ns { overflow: auto; } 39 | .overflow-x-visible-ns { overflow-x: visible; } 40 | .overflow-x-hidden-ns { overflow-x: hidden; } 41 | .overflow-x-scroll-ns { overflow-x: scroll; } 42 | .overflow-x-auto-ns { overflow-x: auto; } 43 | 44 | .overflow-y-visible-ns { overflow-y: visible; } 45 | .overflow-y-hidden-ns { overflow-y: hidden; } 46 | .overflow-y-scroll-ns { overflow-y: scroll; } 47 | .overflow-y-auto-ns { overflow-y: auto; } 48 | } 49 | 50 | @media #{$breakpoint-medium} { 51 | .overflow-visible-m { overflow: visible; } 52 | .overflow-hidden-m { overflow: hidden; } 53 | .overflow-scroll-m { overflow: scroll; } 54 | .overflow-auto-m { overflow: auto; } 55 | 56 | .overflow-x-visible-m { overflow-x: visible; } 57 | .overflow-x-hidden-m { overflow-x: hidden; } 58 | .overflow-x-scroll-m { overflow-x: scroll; } 59 | .overflow-x-auto-m { overflow-x: auto; } 60 | 61 | .overflow-y-visible-m { overflow-y: visible; } 62 | .overflow-y-hidden-m { overflow-y: hidden; } 63 | .overflow-y-scroll-m { overflow-y: scroll; } 64 | .overflow-y-auto-m { overflow-y: auto; } 65 | } 66 | 67 | @media #{$breakpoint-large} { 68 | .overflow-visible-l { overflow: visible; } 69 | .overflow-hidden-l { overflow: hidden; } 70 | .overflow-scroll-l { overflow: scroll; } 71 | .overflow-auto-l { overflow: auto; } 72 | 73 | .overflow-x-visible-l { overflow-x: visible; } 74 | .overflow-x-hidden-l { overflow-x: hidden; } 75 | .overflow-x-scroll-l { overflow-x: scroll; } 76 | .overflow-x-auto-l { overflow-x: auto; } 77 | 78 | .overflow-y-visible-l { overflow-y: visible; } 79 | .overflow-y-hidden-l { overflow-y: hidden; } 80 | .overflow-y-scroll-l { overflow-y: scroll; } 81 | .overflow-y-auto-l { overflow-y: auto; } 82 | } 83 | -------------------------------------------------------------------------------- /assets/scss/_position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | POSITIONING 11 | Docs: http://tachyons.io/docs/layout/position/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .static { position: static; } 21 | .relative { position: relative; } 22 | .absolute { position: absolute; } 23 | .fixed { position: fixed; } 24 | 25 | @media #{$breakpoint-not-small} { 26 | .static-ns { position: static; } 27 | .relative-ns { position: relative; } 28 | .absolute-ns { position: absolute; } 29 | .fixed-ns { position: fixed; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .static-m { position: static; } 34 | .relative-m { position: relative; } 35 | .absolute-m { position: absolute; } 36 | .fixed-m { position: fixed; } 37 | } 38 | 39 | @media #{$breakpoint-large} { 40 | .static-l { position: static; } 41 | .relative-l { position: relative; } 42 | .absolute-l { position: absolute; } 43 | .fixed-l { position: fixed; } 44 | } 45 | -------------------------------------------------------------------------------- /assets/scss/_rotations.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | ROTATIONS 11 | 12 | */ 13 | 14 | .rotate-45 { transform: rotate(45deg); } 15 | .rotate-90 { transform: rotate(90deg); } 16 | .rotate-135 { transform: rotate(135deg); } 17 | .rotate-180 { transform: rotate(180deg); } 18 | .rotate-225 { transform: rotate(225deg); } 19 | .rotate-270 { transform: rotate(270deg); } 20 | .rotate-315 { transform: rotate(315deg); } 21 | 22 | @media #{$breakpoint-not-small}{ 23 | .rotate-45-ns { transform: rotate(45deg); } 24 | .rotate-90-ns { transform: rotate(90deg); } 25 | .rotate-135-ns { transform: rotate(135deg); } 26 | .rotate-180-ns { transform: rotate(180deg); } 27 | .rotate-225-ns { transform: rotate(225deg); } 28 | .rotate-270-ns { transform: rotate(270deg); } 29 | .rotate-315-ns { transform: rotate(315deg); } 30 | } 31 | 32 | @media #{$breakpoint-medium}{ 33 | .rotate-45-m { transform: rotate(45deg); } 34 | .rotate-90-m { transform: rotate(90deg); } 35 | .rotate-135-m { transform: rotate(135deg); } 36 | .rotate-180-m { transform: rotate(180deg); } 37 | .rotate-225-m { transform: rotate(225deg); } 38 | .rotate-270-m { transform: rotate(270deg); } 39 | .rotate-315-m { transform: rotate(315deg); } 40 | } 41 | 42 | @media #{$breakpoint-large}{ 43 | .rotate-45-l { transform: rotate(45deg); } 44 | .rotate-90-l { transform: rotate(90deg); } 45 | .rotate-135-l { transform: rotate(135deg); } 46 | .rotate-180-l { transform: rotate(180deg); } 47 | .rotate-225-l { transform: rotate(225deg); } 48 | .rotate-270-l { transform: rotate(270deg); } 49 | .rotate-315-l { transform: rotate(315deg); } 50 | } 51 | -------------------------------------------------------------------------------- /assets/scss/_skins-pseudo.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | SKINS:PSEUDO 11 | 12 | Customize the color of an element when 13 | it is focused or hovered over. 14 | 15 | */ 16 | 17 | .hover-black:hover, 18 | .hover-black:focus { color: $black; } 19 | .hover-near-black:hover, 20 | .hover-near-black:focus { color: $near-black; } 21 | .hover-dark-gray:hover, 22 | .hover-dark-gray:focus { color: $dark-gray; } 23 | .hover-mid-gray:hover, 24 | .hover-mid-gray:focus { color: $mid-gray; } 25 | .hover-gray:hover, 26 | .hover-gray:focus { color: $gray; } 27 | .hover-silver:hover, 28 | .hover-silver:focus { color: $silver; } 29 | .hover-light-silver:hover, 30 | .hover-light-silver:focus { color: $light-silver; } 31 | .hover-moon-gray:hover, 32 | .hover-moon-gray:focus { color: $moon-gray; } 33 | .hover-light-gray:hover, 34 | .hover-light-gray:focus { color: $light-gray; } 35 | .hover-near-white:hover, 36 | .hover-near-white:focus { color: $near-white; } 37 | .hover-white:hover, 38 | .hover-white:focus { color: $white; } 39 | 40 | .hover-black-90:hover, 41 | .hover-black-90:focus { color: $black-90; } 42 | .hover-black-80:hover, 43 | .hover-black-80:focus { color: $black-80; } 44 | .hover-black-70:hover, 45 | .hover-black-70:focus { color: $black-70; } 46 | .hover-black-60:hover, 47 | .hover-black-60:focus { color: $black-60; } 48 | .hover-black-50:hover, 49 | .hover-black-50:focus { color: $black-50; } 50 | .hover-black-40:hover, 51 | .hover-black-40:focus { color: $black-40; } 52 | .hover-black-30:hover, 53 | .hover-black-30:focus { color: $black-30; } 54 | .hover-black-20:hover, 55 | .hover-black-20:focus { color: $black-20; } 56 | .hover-black-10:hover, 57 | .hover-black-10:focus { color: $black-10; } 58 | .hover-white-90:hover, 59 | .hover-white-90:focus { color: $white-90; } 60 | .hover-white-80:hover, 61 | .hover-white-80:focus { color: $white-80; } 62 | .hover-white-70:hover, 63 | .hover-white-70:focus { color: $white-70; } 64 | .hover-white-60:hover, 65 | .hover-white-60:focus { color: $white-60; } 66 | .hover-white-50:hover, 67 | .hover-white-50:focus { color: $white-50; } 68 | .hover-white-40:hover, 69 | .hover-white-40:focus { color: $white-40; } 70 | .hover-white-30:hover, 71 | .hover-white-30:focus { color: $white-30; } 72 | .hover-white-20:hover, 73 | .hover-white-20:focus { color: $white-20; } 74 | .hover-white-10:hover, 75 | .hover-white-10:focus { color: $white-10; } 76 | .hover-inherit:hover, 77 | .hover-inherit:focus { color: inherit; } 78 | 79 | .hover-bg-black:hover, 80 | .hover-bg-black:focus { background-color: $black; } 81 | .hover-bg-near-black:hover, 82 | .hover-bg-near-black:focus { background-color: $near-black; } 83 | .hover-bg-dark-gray:hover, 84 | .hover-bg-dark-gray:focus { background-color: $dark-gray; } 85 | .hover-bg-mid-gray:hover, 86 | .hover-bg-mid-gray:focus { background-color: $mid-gray; } 87 | .hover-bg-gray:hover, 88 | .hover-bg-gray:focus { background-color: $gray; } 89 | .hover-bg-silver:hover, 90 | .hover-bg-silver:focus { background-color: $silver; } 91 | .hover-bg-light-silver:hover, 92 | .hover-bg-light-silver:focus { background-color: $light-silver; } 93 | .hover-bg-moon-gray:hover, 94 | .hover-bg-moon-gray:focus { background-color: $moon-gray; } 95 | .hover-bg-light-gray:hover, 96 | .hover-bg-light-gray:focus { background-color: $light-gray; } 97 | .hover-bg-near-white:hover, 98 | .hover-bg-near-white:focus { background-color: $near-white; } 99 | .hover-bg-white:hover, 100 | .hover-bg-white:focus { background-color: $white; } 101 | .hover-bg-transparent:hover, 102 | .hover-bg-transparent:focus { background-color: $transparent; } 103 | 104 | .hover-bg-black-90:hover, 105 | .hover-bg-black-90:focus { background-color: $black-90; } 106 | .hover-bg-black-80:hover, 107 | .hover-bg-black-80:focus { background-color: $black-80; } 108 | .hover-bg-black-70:hover, 109 | .hover-bg-black-70:focus { background-color: $black-70; } 110 | .hover-bg-black-60:hover, 111 | .hover-bg-black-60:focus { background-color: $black-60; } 112 | .hover-bg-black-50:hover, 113 | .hover-bg-black-50:focus { background-color: $black-50; } 114 | .hover-bg-black-40:hover, 115 | .hover-bg-black-40:focus { background-color: $black-40; } 116 | .hover-bg-black-30:hover, 117 | .hover-bg-black-30:focus { background-color: $black-30; } 118 | .hover-bg-black-20:hover, 119 | .hover-bg-black-20:focus { background-color: $black-20; } 120 | .hover-bg-black-10:hover, 121 | .hover-bg-black-10:focus { background-color: $black-10; } 122 | .hover-bg-white-90:hover, 123 | .hover-bg-white-90:focus { background-color: $white-90; } 124 | .hover-bg-white-80:hover, 125 | .hover-bg-white-80:focus { background-color: $white-80; } 126 | .hover-bg-white-70:hover, 127 | .hover-bg-white-70:focus { background-color: $white-70; } 128 | .hover-bg-white-60:hover, 129 | .hover-bg-white-60:focus { background-color: $white-60; } 130 | .hover-bg-white-50:hover, 131 | .hover-bg-white-50:focus { background-color: $white-50; } 132 | .hover-bg-white-40:hover, 133 | .hover-bg-white-40:focus { background-color: $white-40; } 134 | .hover-bg-white-30:hover, 135 | .hover-bg-white-30:focus { background-color: $white-30; } 136 | .hover-bg-white-20:hover, 137 | .hover-bg-white-20:focus { background-color: $white-20; } 138 | .hover-bg-white-10:hover, 139 | .hover-bg-white-10:focus { background-color: $white-10; } 140 | 141 | .hover-dark-red:hover, 142 | .hover-dark-red:focus { color: $dark-red; } 143 | .hover-red:hover, 144 | .hover-red:focus { color: $red; } 145 | .hover-light-red:hover, 146 | .hover-light-red:focus { color: $light-red; } 147 | .hover-orange:hover, 148 | .hover-orange:focus { color: $orange; } 149 | .hover-gold:hover, 150 | .hover-gold:focus { color: $gold; } 151 | .hover-yellow:hover, 152 | .hover-yellow:focus { color: $yellow; } 153 | .hover-light-yellow:hover, 154 | .hover-light-yellow:focus { color: $light-yellow; } 155 | .hover-purple:hover, 156 | .hover-purple:focus { color: $purple; } 157 | .hover-light-purple:hover, 158 | .hover-light-purple:focus { color: $light-purple; } 159 | .hover-dark-pink:hover, 160 | .hover-dark-pink:focus { color: $dark-pink; } 161 | .hover-hot-pink:hover, 162 | .hover-hot-pink:focus { color: $hot-pink; } 163 | .hover-pink:hover, 164 | .hover-pink:focus { color: $pink; } 165 | .hover-light-pink:hover, 166 | .hover-light-pink:focus { color: $light-pink; } 167 | .hover-dark-green:hover, 168 | .hover-dark-green:focus { color: $dark-green; } 169 | .hover-green:hover, 170 | .hover-green:focus { color: $green; } 171 | .hover-light-green:hover, 172 | .hover-light-green:focus { color: $light-green; } 173 | .hover-navy:hover, 174 | .hover-navy:focus { color: $navy; } 175 | .hover-dark-blue:hover, 176 | .hover-dark-blue:focus { color: $dark-blue; } 177 | .hover-blue:hover, 178 | .hover-blue:focus { color: $blue; } 179 | .hover-light-blue:hover, 180 | .hover-light-blue:focus { color: $light-blue; } 181 | .hover-lightest-blue:hover, 182 | .hover-lightest-blue:focus { color: $lightest-blue; } 183 | .hover-washed-blue:hover, 184 | .hover-washed-blue:focus { color: $washed-blue; } 185 | .hover-washed-green:hover, 186 | .hover-washed-green:focus { color: $washed-green; } 187 | .hover-washed-yellow:hover, 188 | .hover-washed-yellow:focus { color: $washed-yellow; } 189 | .hover-washed-red:hover, 190 | .hover-washed-red:focus { color: $washed-red; } 191 | 192 | .hover-bg-dark-red:hover, 193 | .hover-bg-dark-red:focus { background-color: $dark-red; } 194 | .hover-bg-red:hover, 195 | .hover-bg-red:focus { background-color: $red; } 196 | .hover-bg-light-red:hover, 197 | .hover-bg-light-red:focus { background-color: $light-red; } 198 | .hover-bg-orange:hover, 199 | .hover-bg-orange:focus { background-color: $orange; } 200 | .hover-bg-gold:hover, 201 | .hover-bg-gold:focus { background-color: $gold; } 202 | .hover-bg-yellow:hover, 203 | .hover-bg-yellow:focus { background-color: $yellow; } 204 | .hover-bg-light-yellow:hover, 205 | .hover-bg-light-yellow:focus { background-color: $light-yellow; } 206 | .hover-bg-purple:hover, 207 | .hover-bg-purple:focus { background-color: $purple; } 208 | .hover-bg-light-purple:hover, 209 | .hover-bg-light-purple:focus { background-color: $light-purple; } 210 | .hover-bg-dark-pink:hover, 211 | .hover-bg-dark-pink:focus { background-color: $dark-pink; } 212 | .hover-bg-hot-pink:hover, 213 | .hover-bg-hot-pink:focus { background-color: $hot-pink; } 214 | .hover-bg-pink:hover, 215 | .hover-bg-pink:focus { background-color: $pink; } 216 | .hover-bg-light-pink:hover, 217 | .hover-bg-light-pink:focus { background-color: $light-pink; } 218 | .hover-bg-dark-green:hover, 219 | .hover-bg-dark-green:focus { background-color: $dark-green; } 220 | .hover-bg-green:hover, 221 | .hover-bg-green:focus { background-color: $green; } 222 | .hover-bg-light-green:hover, 223 | .hover-bg-light-green:focus { background-color: $light-green; } 224 | .hover-bg-navy:hover, 225 | .hover-bg-navy:focus { background-color: $navy; } 226 | .hover-bg-dark-blue:hover, 227 | .hover-bg-dark-blue:focus { background-color: $dark-blue; } 228 | .hover-bg-blue:hover, 229 | .hover-bg-blue:focus { background-color: $blue; } 230 | .hover-bg-light-blue:hover, 231 | .hover-bg-light-blue:focus { background-color: $light-blue; } 232 | .hover-bg-lightest-blue:hover, 233 | .hover-bg-lightest-blue:focus { background-color: $lightest-blue; } 234 | .hover-bg-washed-blue:hover, 235 | .hover-bg-washed-blue:focus { background-color: $washed-blue; } 236 | .hover-bg-washed-green:hover, 237 | .hover-bg-washed-green:focus { background-color: $washed-green; } 238 | .hover-bg-washed-yellow:hover, 239 | .hover-bg-washed-yellow:focus { background-color: $washed-yellow; } 240 | .hover-bg-washed-red:hover, 241 | .hover-bg-washed-red:focus { background-color: $washed-red; } 242 | .hover-bg-inherit:hover, 243 | .hover-bg-inherit:focus { background-color: inherit; } 244 | -------------------------------------------------------------------------------- /assets/scss/_skins.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | SKINS 11 | Docs: http://tachyons.io/docs/themes/skins/ 12 | 13 | Classes for setting foreground and background colors on elements. 14 | If you haven't declared a border color, but set border on an element, it will 15 | be set to the current text color. 16 | 17 | */ 18 | 19 | /* Text colors */ 20 | 21 | .black-90 { color: $black-90; } 22 | .black-80 { color: $black-80; } 23 | .black-70 { color: $black-70; } 24 | .black-60 { color: $black-60; } 25 | .black-50 { color: $black-50; } 26 | .black-40 { color: $black-40; } 27 | .black-30 { color: $black-30; } 28 | .black-20 { color: $black-20; } 29 | .black-10 { color: $black-10; } 30 | .black-05 { color: $black-05; } 31 | 32 | .white-90 { color: $white-90; } 33 | .white-80 { color: $white-80; } 34 | .white-70 { color: $white-70; } 35 | .white-60 { color: $white-60; } 36 | .white-50 { color: $white-50; } 37 | .white-40 { color: $white-40; } 38 | .white-30 { color: $white-30; } 39 | .white-20 { color: $white-20; } 40 | .white-10 { color: $white-10; } 41 | 42 | .black { color: $black; } 43 | .near-black { color: $near-black; } 44 | .dark-gray { color: $dark-gray; } 45 | .mid-gray { color: $mid-gray; } 46 | .gray { color: $gray; } 47 | .silver { color: $silver; } 48 | .light-silver { color: $light-silver; } 49 | .moon-gray { color: $moon-gray; } 50 | .light-gray { color: $light-gray; } 51 | .near-white { color: $near-white; } 52 | .white { color: $white; } 53 | 54 | .dark-red { color: $dark-red; } 55 | .red { color: $red; } 56 | .light-red { color: $light-red; } 57 | .orange { color: $orange; } 58 | .gold { color: $gold; } 59 | .yellow { color: $yellow; } 60 | .light-yellow { color: $light-yellow; } 61 | .purple { color: $purple; } 62 | .light-purple { color: $light-purple; } 63 | .dark-pink { color: $dark-pink; } 64 | .hot-pink { color: $hot-pink; } 65 | .pink { color: $pink; } 66 | .light-pink { color: $light-pink; } 67 | .dark-green { color: $dark-green; } 68 | .green { color: $green; } 69 | .light-green { color: $light-green; } 70 | .navy { color: $navy; } 71 | .dark-blue { color: $dark-blue; } 72 | .blue { color: $blue; } 73 | .light-blue { color: $light-blue; } 74 | .lightest-blue { color: $lightest-blue; } 75 | .washed-blue { color: $washed-blue; } 76 | .washed-green { color: $washed-green; } 77 | .washed-yellow { color: $washed-yellow; } 78 | .washed-red { color: $washed-red; } 79 | .color-inherit { color: inherit; } 80 | 81 | .bg-black-90 { background-color: $black-90; } 82 | .bg-black-80 { background-color: $black-80; } 83 | .bg-black-70 { background-color: $black-70; } 84 | .bg-black-60 { background-color: $black-60; } 85 | .bg-black-50 { background-color: $black-50; } 86 | .bg-black-40 { background-color: $black-40; } 87 | .bg-black-30 { background-color: $black-30; } 88 | .bg-black-20 { background-color: $black-20; } 89 | .bg-black-10 { background-color: $black-10; } 90 | .bg-black-05 { background-color: $black-05; } 91 | .bg-white-90 { background-color: $white-90; } 92 | .bg-white-80 { background-color: $white-80; } 93 | .bg-white-70 { background-color: $white-70; } 94 | .bg-white-60 { background-color: $white-60; } 95 | .bg-white-50 { background-color: $white-50; } 96 | .bg-white-40 { background-color: $white-40; } 97 | .bg-white-30 { background-color: $white-30; } 98 | .bg-white-20 { background-color: $white-20; } 99 | .bg-white-10 { background-color: $white-10; } 100 | 101 | 102 | 103 | /* Background colors */ 104 | 105 | .bg-black { background-color: $black; } 106 | .bg-near-black { background-color: $near-black; } 107 | .bg-dark-gray { background-color: $dark-gray; } 108 | .bg-mid-gray { background-color: $mid-gray; } 109 | .bg-gray { background-color: $gray; } 110 | .bg-silver { background-color: $silver; } 111 | .bg-light-silver { background-color: $light-silver; } 112 | .bg-moon-gray { background-color: $moon-gray; } 113 | .bg-light-gray { background-color: $light-gray; } 114 | .bg-near-white { background-color: $near-white; } 115 | .bg-white { background-color: $white; } 116 | .bg-transparent { background-color: $transparent; } 117 | 118 | .bg-dark-red { background-color: $dark-red; } 119 | .bg-red { background-color: $red; } 120 | .bg-light-red { background-color: $light-red; } 121 | .bg-orange { background-color: $orange; } 122 | .bg-gold { background-color: $gold; } 123 | .bg-yellow { background-color: $yellow; } 124 | .bg-light-yellow { background-color: $light-yellow; } 125 | .bg-purple { background-color: $purple; } 126 | .bg-light-purple { background-color: $light-purple; } 127 | .bg-dark-pink { background-color: $dark-pink; } 128 | .bg-hot-pink { background-color: $hot-pink; } 129 | .bg-pink { background-color: $pink; } 130 | .bg-light-pink { background-color: $light-pink; } 131 | .bg-dark-green { background-color: $dark-green; } 132 | .bg-green { background-color: $green; } 133 | .bg-light-green { background-color: $light-green; } 134 | .bg-navy { background-color: $navy; } 135 | .bg-dark-blue { background-color: $dark-blue; } 136 | .bg-blue { background-color: $blue; } 137 | .bg-light-blue { background-color: $light-blue; } 138 | .bg-lightest-blue { background-color: $lightest-blue; } 139 | .bg-washed-blue { background-color: $washed-blue; } 140 | .bg-washed-green { background-color: $washed-green; } 141 | .bg-washed-yellow { background-color: $washed-yellow; } 142 | .bg-washed-red { background-color: $washed-red; } 143 | .bg-inherit { background-color: inherit; } 144 | -------------------------------------------------------------------------------- /assets/scss/_styles.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | STYLES 11 | 12 | Add custom styles here. 13 | 14 | */ 15 | 16 | -------------------------------------------------------------------------------- /assets/scss/_tables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TABLES 11 | Docs: http://tachyons.io/docs/elements/tables/ 12 | 13 | */ 14 | 15 | .collapse { 16 | border-collapse: collapse; 17 | border-spacing: 0; 18 | } 19 | 20 | .striped--light-silver:nth-child(odd) { 21 | background-color: $light-silver; 22 | } 23 | 24 | .striped--moon-gray:nth-child(odd) { 25 | background-color: $moon-gray; 26 | } 27 | 28 | .striped--light-gray:nth-child(odd) { 29 | background-color: $light-gray; 30 | } 31 | 32 | .striped--near-white:nth-child(odd) { 33 | background-color: $near-white; 34 | } 35 | 36 | .stripe-light:nth-child(odd) { 37 | background-color: $white-10; 38 | } 39 | 40 | .stripe-dark:nth-child(odd) { 41 | background-color: $black-10; 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/_text-align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT ALIGN 11 | Docs: http://tachyons.io/docs/typography/text-align/ 12 | 13 | Base 14 | t = text-align 15 | 16 | Modifiers 17 | l = left 18 | r = right 19 | c = center 20 | j = justify 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | .tl { text-align: left; } 30 | .tr { text-align: right; } 31 | .tc { text-align: center; } 32 | .tj { text-align: justify; } 33 | 34 | @media #{$breakpoint-not-small} { 35 | .tl-ns { text-align: left; } 36 | .tr-ns { text-align: right; } 37 | .tc-ns { text-align: center; } 38 | .tj-ns { text-align: justify; } 39 | } 40 | 41 | @media #{$breakpoint-medium} { 42 | .tl-m { text-align: left; } 43 | .tr-m { text-align: right; } 44 | .tc-m { text-align: center; } 45 | .tj-m { text-align: justify; } 46 | } 47 | 48 | @media #{$breakpoint-large} { 49 | .tl-l { text-align: left; } 50 | .tr-l { text-align: right; } 51 | .tc-l { text-align: center; } 52 | .tj-l { text-align: justify; } 53 | } 54 | -------------------------------------------------------------------------------- /assets/scss/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT DECORATION 11 | Docs: http://tachyons.io/docs/typography/text-decoration/ 12 | 13 | 14 | Media Query Extensions: 15 | -ns = not-small 16 | -m = medium 17 | -l = large 18 | 19 | */ 20 | 21 | .strike { text-decoration: line-through; } 22 | .underline { text-decoration: underline; } 23 | .no-underline { text-decoration: none; } 24 | 25 | 26 | @media #{$breakpoint-not-small} { 27 | .strike-ns { text-decoration: line-through; } 28 | .underline-ns { text-decoration: underline; } 29 | .no-underline-ns { text-decoration: none; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .strike-m { text-decoration: line-through; } 34 | .underline-m { text-decoration: underline; } 35 | .no-underline-m { text-decoration: none; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .strike-l { text-decoration: line-through; } 40 | .underline-l { text-decoration: underline; } 41 | .no-underline-l { text-decoration: none; } 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/_text-transform.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT TRANSFORM 11 | Docs: http://tachyons.io/docs/typography/text-transform/ 12 | 13 | Base: 14 | tt = text-transform 15 | 16 | Modifiers 17 | c = capitalize 18 | l = lowercase 19 | u = uppercase 20 | n = none 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | .ttc { text-transform: capitalize; } 30 | .ttl { text-transform: lowercase; } 31 | .ttu { text-transform: uppercase; } 32 | .ttn { text-transform: none; } 33 | 34 | @media #{$breakpoint-not-small} { 35 | .ttc-ns { text-transform: capitalize; } 36 | .ttl-ns { text-transform: lowercase; } 37 | .ttu-ns { text-transform: uppercase; } 38 | .ttn-ns { text-transform: none; } 39 | } 40 | 41 | @media #{$breakpoint-medium} { 42 | .ttc-m { text-transform: capitalize; } 43 | .ttl-m { text-transform: lowercase; } 44 | .ttu-m { text-transform: uppercase; } 45 | .ttn-m { text-transform: none; } 46 | } 47 | 48 | @media #{$breakpoint-large} { 49 | .ttc-l { text-transform: capitalize; } 50 | .ttl-l { text-transform: lowercase; } 51 | .ttu-l { text-transform: uppercase; } 52 | .ttn-l { text-transform: none; } 53 | } 54 | -------------------------------------------------------------------------------- /assets/scss/_type-scale.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TYPE SCALE 11 | Docs: http://tachyons.io/docs/typography/scale/ 12 | 13 | Base: 14 | f = font-size 15 | 16 | Modifiers 17 | 1 = 1st step in size scale 18 | 2 = 2nd step in size scale 19 | 3 = 3rd step in size scale 20 | 4 = 4th step in size scale 21 | 5 = 5th step in size scale 22 | 6 = 6th step in size scale 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | */ 29 | 30 | /* 31 | * For Hero/Marketing Titles 32 | * 33 | * These generally are too large for mobile 34 | * so be careful using them on smaller screens. 35 | * */ 36 | 37 | .f-6, 38 | .f-headline { 39 | font-size: $font-size-headline; 40 | } 41 | .f-5, 42 | .f-subheadline { 43 | font-size: $font-size-subheadline; 44 | } 45 | 46 | 47 | /* Type Scale */ 48 | 49 | 50 | .f1 { font-size: $font-size-1; } 51 | .f2 { font-size: $font-size-2; } 52 | .f3 { font-size: $font-size-3; } 53 | .f4 { font-size: $font-size-4; } 54 | .f5 { font-size: $font-size-5; } 55 | .f6 { font-size: $font-size-6; } 56 | .f7 { font-size: $font-size-7; } 57 | 58 | @media #{$breakpoint-not-small}{ 59 | .f-6-ns, 60 | .f-headline-ns { font-size: $font-size-headline; } 61 | .f-5-ns, 62 | .f-subheadline-ns { font-size: $font-size-subheadline; } 63 | .f1-ns { font-size: $font-size-1; } 64 | .f2-ns { font-size: $font-size-2; } 65 | .f3-ns { font-size: $font-size-3; } 66 | .f4-ns { font-size: $font-size-4; } 67 | .f5-ns { font-size: $font-size-5; } 68 | .f6-ns { font-size: $font-size-6; } 69 | .f7-ns { font-size: $font-size-7; } 70 | } 71 | 72 | @media #{$breakpoint-medium} { 73 | .f-6-m, 74 | .f-headline-m { font-size: $font-size-headline; } 75 | .f-5-m, 76 | .f-subheadline-m { font-size: $font-size-subheadline; } 77 | .f1-m { font-size: $font-size-1; } 78 | .f2-m { font-size: $font-size-2; } 79 | .f3-m { font-size: $font-size-3; } 80 | .f4-m { font-size: $font-size-4; } 81 | .f5-m { font-size: $font-size-5; } 82 | .f6-m { font-size: $font-size-6; } 83 | .f7-m { font-size: $font-size-7; } 84 | } 85 | 86 | @media #{$breakpoint-large} { 87 | .f-6-l, 88 | .f-headline-l { 89 | font-size: $font-size-headline; 90 | } 91 | .f-5-l, 92 | .f-subheadline-l { 93 | font-size: $font-size-subheadline; 94 | } 95 | .f1-l { font-size: $font-size-1; } 96 | .f2-l { font-size: $font-size-2; } 97 | .f3-l { font-size: $font-size-3; } 98 | .f4-l { font-size: $font-size-4; } 99 | .f5-l { font-size: $font-size-5; } 100 | .f6-l { font-size: $font-size-6; } 101 | .f7-l { font-size: $font-size-7; } 102 | } 103 | -------------------------------------------------------------------------------- /assets/scss/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TYPOGRAPHY 11 | http://tachyons.io/docs/typography/measure/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | 21 | 22 | /* Measure is limited to ~66 characters */ 23 | .measure { 24 | max-width: $measure; 25 | } 26 | 27 | /* Measure is limited to ~80 characters */ 28 | .measure-wide { 29 | max-width: $measure-wide; 30 | } 31 | 32 | /* Measure is limited to ~45 characters */ 33 | .measure-narrow { 34 | max-width: $measure-narrow; 35 | } 36 | 37 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 38 | .indent { 39 | text-indent: 1em; 40 | margin-top: 0; 41 | margin-bottom: 0; 42 | } 43 | 44 | .small-caps { 45 | font-variant: small-caps; 46 | } 47 | 48 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 49 | 50 | .truncate { 51 | white-space: nowrap; 52 | overflow: hidden; 53 | text-overflow: ellipsis; 54 | } 55 | 56 | @media #{$breakpoint-not-small} { 57 | .measure-ns { 58 | max-width: $measure; 59 | } 60 | .measure-wide-ns { 61 | max-width: $measure-wide; 62 | } 63 | .measure-narrow-ns { 64 | max-width: $measure-narrow; 65 | } 66 | .indent-ns { 67 | text-indent: 1em; 68 | margin-top: 0; 69 | margin-bottom: 0; 70 | } 71 | .small-caps-ns { 72 | font-variant: small-caps; 73 | } 74 | .truncate-ns { 75 | white-space: nowrap; 76 | overflow: hidden; 77 | text-overflow: ellipsis; 78 | } 79 | } 80 | 81 | @media #{$breakpoint-medium} { 82 | .measure-m { 83 | max-width: $measure; 84 | } 85 | .measure-wide-m { 86 | max-width: $measure-wide; 87 | } 88 | .measure-narrow-m { 89 | max-width: $measure-narrow; 90 | } 91 | .indent-m { 92 | text-indent: 1em; 93 | margin-top: 0; 94 | margin-bottom: 0; 95 | } 96 | .small-caps-m { 97 | font-variant: small-caps; 98 | } 99 | .truncate-m { 100 | white-space: nowrap; 101 | overflow: hidden; 102 | text-overflow: ellipsis; 103 | } 104 | } 105 | 106 | @media #{$breakpoint-large} { 107 | .measure-l { 108 | max-width: $measure; 109 | } 110 | .measure-wide-l { 111 | max-width: $measure-wide; 112 | } 113 | .measure-narrow-l { 114 | max-width: $measure-narrow; 115 | } 116 | .indent-l { 117 | text-indent: 1em; 118 | margin-top: 0; 119 | margin-bottom: 0; 120 | } 121 | .small-caps-l { 122 | font-variant: small-caps; 123 | } 124 | .truncate-l { 125 | white-space: nowrap; 126 | overflow: hidden; 127 | text-overflow: ellipsis; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /assets/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | UTILITIES 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | /* Equivalent to .overflow-y-scroll */ 20 | .overflow-container { 21 | overflow-y: scroll; 22 | } 23 | 24 | .center { 25 | margin-right: auto; 26 | margin-left: auto; 27 | } 28 | 29 | .mr-auto { margin-right: auto; } 30 | .ml-auto { margin-left: auto; } 31 | 32 | @media #{$breakpoint-not-small}{ 33 | .center-ns { 34 | margin-right: auto; 35 | margin-left: auto; 36 | } 37 | .mr-auto-ns { margin-right: auto; } 38 | .ml-auto-ns { margin-left: auto; } 39 | } 40 | 41 | @media #{$breakpoint-medium}{ 42 | .center-m { 43 | margin-right: auto; 44 | margin-left: auto; 45 | } 46 | .mr-auto-m { margin-right: auto; } 47 | .ml-auto-m { margin-left: auto; } 48 | } 49 | 50 | @media #{$breakpoint-large}{ 51 | .center-l { 52 | margin-right: auto; 53 | margin-left: auto; 54 | } 55 | .mr-auto-l { margin-right: auto; } 56 | .ml-auto-l { margin-left: auto; } 57 | } 58 | -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default; 5 | $serif: georgia, serif !default; 6 | $code: consolas, monaco, monospace !default; 7 | $font-size-headline: 6rem !default; 8 | $font-size-subheadline: 5rem !default; 9 | $font-size-1: 3rem !default; 10 | $font-size-2: 2.25rem !default; 11 | $font-size-3: 1.5rem !default; 12 | $font-size-4: 1.25rem !default; 13 | $font-size-5: 1rem !default; 14 | $font-size-6: .875rem !default; 15 | $font-size-7: .75rem !default; 16 | $letter-spacing-tight: -.05em !default; 17 | $letter-spacing-1: .1em !default; 18 | $letter-spacing-2: .25em !default; 19 | $line-height-solid: 1 !default; 20 | $line-height-title: 1.25 !default; 21 | $line-height-copy: 1.5 !default; 22 | $measure: 30em !default; 23 | $measure-narrow: 20em !default; 24 | $measure-wide: 34em !default; 25 | $spacing-none: 0 !default; 26 | $spacing-extra-small: .25rem !default; 27 | $spacing-small: .5rem !default; 28 | $spacing-medium: 1rem !default; 29 | $spacing-large: 2rem !default; 30 | $spacing-extra-large: 4rem !default; 31 | $spacing-extra-extra-large: 8rem !default; 32 | $spacing-extra-extra-extra-large: 16rem !default; 33 | $spacing-copy-separator: 1.5em !default; 34 | $height-1: 1rem !default; 35 | $height-2: 2rem !default; 36 | $height-3: 4rem !default; 37 | $height-4: 8rem !default; 38 | $height-5: 16rem !default; 39 | $width-1: 1rem !default; 40 | $width-2: 2rem !default; 41 | $width-3: 4rem !default; 42 | $width-4: 8rem !default; 43 | $width-5: 16rem !default; 44 | $max-width-1: 1rem !default; 45 | $max-width-2: 2rem !default; 46 | $max-width-3: 4rem !default; 47 | $max-width-4: 8rem !default; 48 | $max-width-5: 16rem !default; 49 | $max-width-6: 32rem !default; 50 | $max-width-7: 48rem !default; 51 | $max-width-8: 64rem !default; 52 | $max-width-9: 96rem !default; 53 | $border-radius-none: 0 !default; 54 | $border-radius-1: .125rem !default; 55 | $border-radius-2: .25rem !default; 56 | $border-radius-3: .5rem !default; 57 | $border-radius-4: 1rem !default; 58 | $border-radius-circle: 100% !default; 59 | $border-radius-pill: 9999px !default; 60 | $border-width-none: 0 !default; 61 | $border-width-1: .125rem !default; 62 | $border-width-2: .25rem !default; 63 | $border-width-3: .5rem !default; 64 | $border-width-4: 1rem !default; 65 | $border-width-5: 2rem !default; 66 | $box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; 67 | $box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default; 68 | $box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; 69 | $box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; 70 | $box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; 71 | $black: #000 !default; 72 | $near-black: #111 !default; 73 | $dark-gray: #333 !default; 74 | $mid-gray: #555 !default; 75 | $gray: #777 !default; 76 | $silver: #999 !default; 77 | $light-silver: #aaa !default; 78 | $moon-gray: #ccc !default; 79 | $light-gray: #eee !default; 80 | $near-white: #f4f4f4 !default; 81 | $white: #fff !default; 82 | $transparent: transparent !default; 83 | $black-90: rgba(0,0,0,.9) !default; 84 | $black-80: rgba(0,0,0,.8) !default; 85 | $black-70: rgba(0,0,0,.7) !default; 86 | $black-60: rgba(0,0,0,.6) !default; 87 | $black-50: rgba(0,0,0,.5) !default; 88 | $black-40: rgba(0,0,0,.4) !default; 89 | $black-30: rgba(0,0,0,.3) !default; 90 | $black-20: rgba(0,0,0,.2) !default; 91 | $black-10: rgba(0,0,0,.1) !default; 92 | $black-05: rgba(0,0,0,.05) !default; 93 | $black-025: rgba(0,0,0,.025) !default; 94 | $black-0125: rgba(0,0,0,.0125) !default; 95 | $white-90: rgba(255,255,255,.9) !default; 96 | $white-80: rgba(255,255,255,.8) !default; 97 | $white-70: rgba(255,255,255,.7) !default; 98 | $white-60: rgba(255,255,255,.6) !default; 99 | $white-50: rgba(255,255,255,.5) !default; 100 | $white-40: rgba(255,255,255,.4) !default; 101 | $white-30: rgba(255,255,255,.3) !default; 102 | $white-20: rgba(255,255,255,.2) !default; 103 | $white-10: rgba(255,255,255,.1) !default; 104 | $white-05: rgba(255,255,255,.05) !default; 105 | $white-025: rgba(255,255,255,.025) !default; 106 | $white-0125: rgba(255,255,255,.0125) !default; 107 | $dark-red: #e7040f !default; 108 | $red: #ff4136 !default; 109 | $light-red: #ff725c !default; 110 | $orange: #ff6300 !default; 111 | $gold: #ffb700 !default; 112 | $yellow: #ffd700 !default; 113 | $light-yellow: #fbf1a9 !default; 114 | $purple: #5e2ca5 !default; 115 | $light-purple: #a463f2 !default; 116 | $dark-pink: #d5008f !default; 117 | $hot-pink: #ff41b4 !default; 118 | $pink: #ff80cc !default; 119 | $light-pink: #ffa3d7 !default; 120 | $dark-green: #137752 !default; 121 | $green: #19a974 !default; 122 | $light-green: #9eebcf !default; 123 | $navy: #001b44 !default; 124 | $dark-blue: #00449e !default; 125 | $blue: #357edd !default; 126 | $light-blue: #96ccff !default; 127 | $lightest-blue: #cdecff !default; 128 | $washed-blue: #f6fffe !default; 129 | $washed-green: #e8fdf5 !default; 130 | $washed-yellow: #fffceb !default; 131 | $washed-red: #ffdfdf !default; 132 | 133 | // Custom Media Query Variables 134 | 135 | $breakpoint-not-small: 'screen and (min-width: 30em)' !default; 136 | $breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default; 137 | $breakpoint-large: 'screen and (min-width: 60em)' !default; 138 | 139 | /* 140 | 141 | VARIABLES 142 | 143 | */ 144 | -------------------------------------------------------------------------------- /assets/scss/_vertical-align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | VERTICAL ALIGN 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .v-base { vertical-align: baseline; } 20 | .v-mid { vertical-align: middle; } 21 | .v-top { vertical-align: top; } 22 | .v-btm { vertical-align: bottom; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .v-base-ns { vertical-align: baseline; } 26 | .v-mid-ns { vertical-align: middle; } 27 | .v-top-ns { vertical-align: top; } 28 | .v-btm-ns { vertical-align: bottom; } 29 | } 30 | 31 | @media #{$breakpoint-medium} { 32 | .v-base-m { vertical-align: baseline; } 33 | .v-mid-m { vertical-align: middle; } 34 | .v-top-m { vertical-align: top; } 35 | .v-btm-m { vertical-align: bottom; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .v-base-l { vertical-align: baseline; } 40 | .v-mid-l { vertical-align: middle; } 41 | .v-top-l { vertical-align: top; } 42 | .v-btm-l { vertical-align: bottom; } 43 | } 44 | -------------------------------------------------------------------------------- /assets/scss/_visibility.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | VISIBILITY 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | 20 | /* 21 | Text that is hidden but accessible 22 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 23 | */ 24 | 25 | .clip { 26 | position: fixed !important; 27 | _position: absolute !important; 28 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 29 | clip: rect(1px, 1px, 1px, 1px); 30 | } 31 | 32 | @media #{$breakpoint-not-small} { 33 | .clip-ns { 34 | position: fixed !important; 35 | _position: absolute !important; 36 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 37 | clip: rect(1px, 1px, 1px, 1px); 38 | } 39 | } 40 | 41 | @media #{$breakpoint-medium} { 42 | .clip-m { 43 | position: fixed !important; 44 | _position: absolute !important; 45 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 46 | clip: rect(1px, 1px, 1px, 1px); 47 | } 48 | } 49 | 50 | @media #{$breakpoint-large} { 51 | .clip-l { 52 | position: fixed !important; 53 | _position: absolute !important; 54 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 55 | clip: rect(1px, 1px, 1px, 1px); 56 | } 57 | } 58 | 59 | -------------------------------------------------------------------------------- /assets/scss/_white-space.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WHITE SPACE 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | 20 | .ws-normal { white-space: normal; } 21 | .nowrap { white-space: nowrap; } 22 | .pre { white-space: pre; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .ws-normal-ns { white-space: normal; } 26 | .nowrap-ns { white-space: nowrap; } 27 | .pre-ns { white-space: pre; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .ws-normal-m { white-space: normal; } 32 | .nowrap-m { white-space: nowrap; } 33 | .pre-m { white-space: pre; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .ws-normal-l { white-space: normal; } 38 | .nowrap-l { white-space: nowrap; } 39 | .pre-l { white-space: pre; } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /assets/scss/_widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WIDTHS 11 | Docs: http://tachyons.io/docs/layout/widths/ 12 | 13 | Base: 14 | w = width 15 | 16 | Modifiers 17 | 1 = 1st step in width scale 18 | 2 = 2nd step in width scale 19 | 3 = 3rd step in width scale 20 | 4 = 4th step in width scale 21 | 5 = 5th step in width scale 22 | 23 | -10 = literal value 10% 24 | -20 = literal value 20% 25 | -25 = literal value 25% 26 | -30 = literal value 30% 27 | -33 = literal value 33% 28 | -34 = literal value 34% 29 | -40 = literal value 40% 30 | -50 = literal value 50% 31 | -60 = literal value 60% 32 | -70 = literal value 70% 33 | -75 = literal value 75% 34 | -80 = literal value 80% 35 | -90 = literal value 90% 36 | -100 = literal value 100% 37 | 38 | -third = 100% / 3 (Not supported in opera mini or IE8) 39 | -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 40 | -auto = string value auto 41 | 42 | 43 | Media Query Extensions: 44 | -ns = not-small 45 | -m = medium 46 | -l = large 47 | 48 | */ 49 | 50 | /* Width Scale */ 51 | 52 | .w1 { width: $width-1; } 53 | .w2 { width: $width-2; } 54 | .w3 { width: $width-3; } 55 | .w4 { width: $width-4; } 56 | .w5 { width: $width-5; } 57 | 58 | .w-10 { width: 10%; } 59 | .w-20 { width: 20%; } 60 | .w-25 { width: 25%; } 61 | .w-30 { width: 30%; } 62 | .w-33 { width: 33%; } 63 | .w-34 { width: 34%; } 64 | .w-40 { width: 40%; } 65 | .w-50 { width: 50%; } 66 | .w-60 { width: 60%; } 67 | .w-70 { width: 70%; } 68 | .w-75 { width: 75%; } 69 | .w-80 { width: 80%; } 70 | .w-90 { width: 90%; } 71 | .w-100 { width: 100%; } 72 | 73 | .w-third { width: (100% / 3); } 74 | .w-two-thirds { width: (100% / 1.5); } 75 | .w-auto { width: auto; } 76 | 77 | @media #{$breakpoint-not-small} { 78 | .w1-ns { width: $width-1; } 79 | .w2-ns { width: $width-2; } 80 | .w3-ns { width: $width-3; } 81 | .w4-ns { width: $width-4; } 82 | .w5-ns { width: $width-5; } 83 | .w-10-ns { width: 10%; } 84 | .w-20-ns { width: 20%; } 85 | .w-25-ns { width: 25%; } 86 | .w-30-ns { width: 30%; } 87 | .w-33-ns { width: 33%; } 88 | .w-34-ns { width: 34%; } 89 | .w-40-ns { width: 40%; } 90 | .w-50-ns { width: 50%; } 91 | .w-60-ns { width: 60%; } 92 | .w-70-ns { width: 70%; } 93 | .w-75-ns { width: 75%; } 94 | .w-80-ns { width: 80%; } 95 | .w-90-ns { width: 90%; } 96 | .w-100-ns { width: 100%; } 97 | .w-third-ns { width: (100% / 3); } 98 | .w-two-thirds-ns { width: (100% / 1.5); } 99 | .w-auto-ns { width: auto; } 100 | } 101 | 102 | @media #{$breakpoint-medium} { 103 | .w1-m { width: $width-1; } 104 | .w2-m { width: $width-2; } 105 | .w3-m { width: $width-3; } 106 | .w4-m { width: $width-4; } 107 | .w5-m { width: $width-5; } 108 | .w-10-m { width: 10%; } 109 | .w-20-m { width: 20%; } 110 | .w-25-m { width: 25%; } 111 | .w-30-m { width: 30%; } 112 | .w-33-m { width: 33%; } 113 | .w-34-m { width: 34%; } 114 | .w-40-m { width: 40%; } 115 | .w-50-m { width: 50%; } 116 | .w-60-m { width: 60%; } 117 | .w-70-m { width: 70%; } 118 | .w-75-m { width: 75%; } 119 | .w-80-m { width: 80%; } 120 | .w-90-m { width: 90%; } 121 | .w-100-m { width: 100%; } 122 | .w-third-m { width: (100% / 3); } 123 | .w-two-thirds-m { width: (100% / 1.5); } 124 | .w-auto-m { width: auto; } 125 | } 126 | 127 | @media #{$breakpoint-large} { 128 | .w1-l { width: $width-1; } 129 | .w2-l { width: $width-2; } 130 | .w3-l { width: $width-3; } 131 | .w4-l { width: $width-4; } 132 | .w5-l { width: $width-5; } 133 | .w-10-l { width: 10%; } 134 | .w-20-l { width: 20%; } 135 | .w-25-l { width: 25%; } 136 | .w-30-l { width: 30%; } 137 | .w-33-l { width: 33%; } 138 | .w-34-l { width: 34%; } 139 | .w-40-l { width: 40%; } 140 | .w-50-l { width: 50%; } 141 | .w-60-l { width: 60%; } 142 | .w-70-l { width: 70%; } 143 | .w-75-l { width: 75%; } 144 | .w-80-l { width: 80%; } 145 | .w-90-l { width: 90%; } 146 | .w-100-l { width: 100%; } 147 | .w-third-l { width: (100% / 3); } 148 | .w-two-thirds-l { width: (100% / 1.5); } 149 | .w-auto-l { width: auto; } 150 | } 151 | -------------------------------------------------------------------------------- /assets/scss/_word-break.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WORD BREAK 11 | 12 | Base: 13 | word = word-break 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .word-normal { word-break: normal; } 23 | .word-wrap { word-break: break-all; } 24 | .word-nowrap { word-break: keep-all; } 25 | 26 | @media #{$breakpoint-not-small} { 27 | .word-normal-ns { word-break: normal; } 28 | .word-wrap-ns { word-break: break-all; } 29 | .word-nowrap-ns { word-break: keep-all; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .word-normal-m { word-break: normal; } 34 | .word-wrap-m { word-break: break-all; } 35 | .word-nowrap-m { word-break: keep-all; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .word-normal-l { word-break: normal; } 40 | .word-wrap-l { word-break: break-all; } 41 | .word-nowrap-l { word-break: keep-all; } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /assets/scss/_z-index.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | Z-INDEX 11 | 12 | Base 13 | z = z-index 14 | 15 | Modifiers 16 | -0 = literal value 0 17 | -1 = literal value 1 18 | -2 = literal value 2 19 | -3 = literal value 3 20 | -4 = literal value 4 21 | -5 = literal value 5 22 | -999 = literal value 999 23 | -9999 = literal value 9999 24 | 25 | -max = largest accepted z-index value as integer 26 | 27 | -inherit = string value inherit 28 | -initial = string value initial 29 | -unset = string value unset 30 | 31 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 32 | Spec: http://www.w3.org/TR/CSS2/zindex.html 33 | Articles: 34 | https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 35 | 36 | Tips on extending: 37 | There might be a time worth using negative z-index values. 38 | Or if you are using tachyons with another project, you might need to 39 | adjust these values to suit your needs. 40 | 41 | */ 42 | 43 | .z-0 { z-index: 0; } 44 | .z-1 { z-index: 1; } 45 | .z-2 { z-index: 2; } 46 | .z-3 { z-index: 3; } 47 | .z-4 { z-index: 4; } 48 | .z-5 { z-index: 5; } 49 | 50 | .z-999 { z-index: 999; } 51 | .z-9999 { z-index: 9999; } 52 | 53 | .z-max { 54 | z-index: 2147483647; 55 | } 56 | 57 | .z-inherit { z-index: inherit; } 58 | .z-initial { z-index: initial; } 59 | .z-unset { z-index: unset; } 60 | 61 | -------------------------------------------------------------------------------- /assets/tachyons.scss: -------------------------------------------------------------------------------- 1 | // ! TACHYONS v4.9.0 | http://tachyons.io 2 | 3 | // 4 | // 5 | // ________ ______ 6 | // ___ __/_____ _________ /______ ______________________ 7 | // __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ 8 | // _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) 9 | // /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ 10 | // /____/ 11 | // 12 | // TABLE OF CONTENTS 13 | // 14 | // 1. External Library Includes 15 | // - Normalize.css | http://normalize.css.github.io 16 | // 2. Tachyons Modules 17 | // 3. Variables 18 | // - Media Queries 19 | // - Colors 20 | // 4. Debugging 21 | // - Debug all 22 | // - Debug children 23 | // 24 | // 25 | 26 | 27 | // External Library Includes 28 | @import 'scss/normalize'; 29 | 30 | // Variables 31 | // Importing here will allow you to override any variables in the modules 32 | 33 | @import 'scss/variables'; 34 | 35 | // Debugging 36 | @import 'scss/debug-children'; 37 | @import 'scss/debug-grid'; 38 | 39 | // Uncomment out the line below to help debug layout issues 40 | // @import 'scss/debug'; 41 | 42 | // Modules 43 | @import 'scss/box-sizing'; 44 | @import 'scss/aspect-ratios'; 45 | @import 'scss/images'; 46 | @import 'scss/background-size'; 47 | @import 'scss/background-position'; 48 | @import 'scss/outlines'; 49 | @import 'scss/borders'; 50 | @import 'scss/border-colors'; 51 | @import 'scss/border-radius'; 52 | @import 'scss/border-style'; 53 | @import 'scss/border-widths'; 54 | @import 'scss/box-shadow'; 55 | @import 'scss/code'; 56 | @import 'scss/coordinates'; 57 | @import 'scss/clears'; 58 | @import 'scss/display'; 59 | @import 'scss/flexbox'; 60 | @import 'scss/floats'; 61 | @import 'scss/font-family'; 62 | @import 'scss/font-style'; 63 | @import 'scss/font-weight'; 64 | @import 'scss/forms'; 65 | @import 'scss/heights'; 66 | @import 'scss/letter-spacing'; 67 | @import 'scss/line-height'; 68 | @import 'scss/links'; 69 | @import 'scss/lists'; 70 | @import 'scss/max-widths'; 71 | @import 'scss/widths'; 72 | @import 'scss/overflow'; 73 | @import 'scss/position'; 74 | @import 'scss/opacity'; 75 | @import 'scss/rotations'; 76 | @import 'scss/skins'; 77 | @import 'scss/skins-pseudo'; 78 | @import 'scss/spacing'; 79 | @import 'scss/negative-margins'; 80 | @import 'scss/tables'; 81 | @import 'scss/text-decoration'; 82 | @import 'scss/text-align'; 83 | @import 'scss/text-transform'; 84 | @import 'scss/type-scale'; 85 | @import 'scss/typography'; 86 | @import 'scss/utilities'; 87 | @import 'scss/visibility'; 88 | @import 'scss/white-space'; 89 | @import 'scss/vertical-align'; 90 | @import 'scss/hovers'; 91 | @import 'scss/z-index'; 92 | @import 'scss/nested'; 93 | @import 'scss/styles'; 94 | -------------------------------------------------------------------------------- /config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "/" 2 | languageCode = "en" 3 | title = "Blogophonic" 4 | author = "Formspree" 5 | description = "A modern, beautiful, and easily configurable blog theme for Hugo." 6 | copyright = "" # set to override the auto generated copyright using org info and now year 7 | googleAnalytics = "" 8 | disqusShortname = "" 9 | metaDataFormat = "yaml" 10 | pygmentsCodeFences = true 11 | pygmentsOptions = "linenos=table" 12 | # see more styles https://help.farbox.com/pygments.html 13 | pygmentsStyle = "friendly" 14 | footnoteReturnLinkContents = "↩" # ↩ 15 | # set deliberately low for testing choose your preffered number based on the blog layout you've chosen 16 | paginate = 3 17 | preserveTaxonomyNames = true 18 | 19 | [params] 20 | orgName = "Formspree" 21 | orgLocal = "Brooklyn, NY" 22 | favicon = "/img/favicon.ico?v=0" 23 | logo = "/img/blogophonic-mark-dark.png" 24 | # font options: sans-serif or serif 25 | # for more http://tachyons.io/docs/typography/font-family/ 26 | textFontFamily = "sans-serif" 27 | headingFontFamily = "sans-serif" 28 | # basic color options: use only color names as shown in the 29 | # "Color Palette" section of http://tachyons.io/docs/themes/skins/ 30 | siteBgColor = "near-white" 31 | sidebarBgColor = "light-gray" 32 | headlineColor = "dark-pink" 33 | headingColor = "near-black" 34 | textColor = "dark-gray" 35 | sidebarTextColor = "mid-gray" 36 | bodyLinkColor = "blue" 37 | navLinkColor = "near-black" 38 | sidebarLinkColor = "near-black" 39 | footerTextColor = "silver" 40 | buttonTextColor = "near-white" 41 | buttonBgColor = "black" 42 | buttonHoverTextColor = "white" 43 | buttonHoverBgColor = "blue" 44 | borderColor = "moon-gray" 45 | # show/hide social icons in site header/footer 46 | socialInHeader = false 47 | socialInFooter = false 48 | 49 | [social] 50 | # social accounts (username only) 51 | facebook = "formspree" 52 | facebook_admin = "" # Facebook Page Admin ID for Domain Insights 53 | instagram = "" 54 | youtube = "" 55 | twitter = "formspree" 56 | github = "formspree" 57 | medium = "" 58 | 59 | [taxonomies] 60 | category = "categories" 61 | series = "series" 62 | tag = "tags" 63 | -------------------------------------------------------------------------------- /content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Blogophonic" 3 | subtitle: "A Hugo Theme by Formspree" 4 | description: "Not all themes are created equal. With Blogophonic we set out to create a clean theme with the right features for a serious blog. We also wanted Blogophonic to be a pleasure to modify, so we built it with Tachyons, CSS Grid and packed it full of configurable options." 5 | date: 2019-02-18T12:27:33-06:00 6 | images: 7 | - img/unicorn-megaphone.png 8 | show_action_link: true 9 | action_link: /about 10 | action_label: "Read More →" 11 | action_type: text # text, button 12 | type: home 13 | --- 14 | 15 | ** index doesn't contain a body, just front matter above. 16 | See index.html in the layouts folder ** 17 | -------------------------------------------------------------------------------- /content/about/assets/blogophonic-mark-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/about/assets/blogophonic-mark-dark.png -------------------------------------------------------------------------------- /content/about/assets/simple-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/about/assets/simple-icons.png -------------------------------------------------------------------------------- /content/about/assets/thumb-contact-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/about/assets/thumb-contact-form.png -------------------------------------------------------------------------------- /content/about/assets/thumb-css-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/about/assets/thumb-css-grid.png -------------------------------------------------------------------------------- /content/about/assets/thumb-tachyons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/about/assets/thumb-tachyons.png -------------------------------------------------------------------------------- /content/about/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "About" 3 | description: A blog template for Hugo developed by Formspree and available for free. 4 | date: 2019-02-19T14:47:22-06:00 5 | draft: false 6 | layout: standard 7 | show_title_as_headline: false 8 | --- 9 | 10 |

11 | Feed me to your static site generator. 12 |

13 |

14 | We built Blogophonic to take advantage of several Hugo features like pagination, taxonomies and archetypes. 15 | Dive deeper on the Github page. 16 |

17 | 18 |

19 | If you would like to use this template with another static site 20 | generator, drop us a 21 | line and let us know your preference. 22 |

23 | 24 |
25 |
26 |
27 |
Noteable Features
28 |

Tachyons for Style

29 |

30 | Blue tinted version of the Tachyons avatar on Twitter 32 | Tachyons is a design system that allows you to create gorgeous content 33 | in the browser with little effort. Use the css toolkit to design your own 34 | components, or use a component from its growing open source library. 35 | Learn more 36 |

37 |

CSS Grid Scaffold

38 |

39 | Simple representation of a grid layout overlayed in blue 41 | Grid Layout is a new layout model for CSS that has powerful abilities 42 | to control the sizing and positioning of boxes and their contents. Unlike 43 | Flexbox, which is single-axis oriented, Grid Layout is optimized for 44 | 2-dimensional layouts. 45 | Learn more 46 |

47 |

Built-in Contact Form

48 |

49 | Partial view of the top left corner of a contact form 51 | Blogophonic has form to email capabilities built right in, all you need 52 | to do is include your email address in the front matter of the contact 53 | page. Giving this template away is, in fact, an elaborate ploy to get you 54 | to try Formspree! 55 | Learn more 56 |

57 |
58 |
59 |
Attribution
60 |
Blogophonic Logo
61 |

62 | 63 | "Blog" (in black) by 64 | Alex 65 | Berkowitz from the Noun Project. 66 |

67 |
Social Icons
68 |

69 | 70 | Free SVG icons for popular brands by 71 | Simple Icons. 72 |

73 |
74 |
-------------------------------------------------------------------------------- /content/blog/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: A Blog That's Real 3 | description: "This is a fully featured blog that supports categories, tags, series, and pagination." 4 | author: The Team at Formspree 5 | images: 6 | - https://via.placeholder.com/960x480?text=SECTION+IMAGE 7 | date: 2019-02-20T09:31:27-06:00 8 | publishDate: 2019-02-20T09:31:27-06:00 9 | layout: list-sidebar # list, list-sidebar, list-grid 10 | show_post_thumbnail: true 11 | show_author_byline: true 12 | show_post_date: true 13 | show_disqus_comments: false # see disqusShortname in site config 14 | --- 15 | 16 | ** No content for the blog index. This file provides front matter for the blog including the layout and boolean options. ** 17 | -------------------------------------------------------------------------------- /content/blog/assets/built-in-contact-form-feature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/built-in-contact-form-feature.png -------------------------------------------------------------------------------- /content/blog/assets/built-in-contact-form-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/built-in-contact-form-thumbnail.png -------------------------------------------------------------------------------- /content/blog/assets/css-grid-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/css-grid-cover.png -------------------------------------------------------------------------------- /content/blog/assets/css-grid-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/css-grid-thumbnail.png -------------------------------------------------------------------------------- /content/blog/assets/formspree-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/formspree-logo.png -------------------------------------------------------------------------------- /content/blog/assets/tachyons-logo-script-feature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/tachyons-logo-script-feature.png -------------------------------------------------------------------------------- /content/blog/assets/tachyons-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/content/blog/assets/tachyons-thumbnail.png -------------------------------------------------------------------------------- /content/blog/built-in-contact-form.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Built-in Contact Form" 3 | subtitle: "Form to email feature powered by Formspree" 4 | 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." 5 | date: 2019-07-01 6 | author: "Eric Anderson" 7 | draft: false 8 | images: 9 | - /blog/assets/built-in-contact-form-thumbnail.png 10 | - /blog/assets/built-in-contact-form-feature.png 11 | series: 12 | - Getting Started 13 | tags: 14 | - hugo-site 15 | categories: 16 | - Theme Features 17 | layout: single 18 | --- 19 | 20 | ![Formspree Logo](/blog/assets/formspree-logo.png) 21 | 22 | ## [Formspree](https://formspree.io) makes it easy to receive submissions from HTML forms on your static website. 23 | 24 | --- 25 | 26 | ### Functional Form 27 | 28 | 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 29 | (`/content/forms/contact.md`). Of course, the example shown below (`your@email.here`) must not be used. Please use your actual email address. 30 | 31 | ```toml 32 | # please replace with a valid Formspree form id or email address 33 | formspree_form_id: your@email.here 34 | ``` 35 | 36 | Update that file and you're ready to begin receiving submissions. Just submit 37 | the active form for the first time, and complete the email address verification 38 | step with Formspree, and your contact form is live. The next time someone 39 | fills it out, the submission will land in your inbox. 40 | 41 | ### Multiple Layouts 42 | 43 | The files included with the theme have a contact page ready for copy/paste, or 44 | you can type `hugo new forms/contact.md` and you're off to the races. There are two 45 | layouts for `forms` – `split-right`, and `split-left` – you guessed it, one puts 46 | the form on the right and the other on the left. You just fill out the front 47 | matter, and the rest is automatic. 48 | 49 | ```toml 50 | # layout options: split-right or split-left 51 | layout: split-right 52 | ``` 53 | 54 | ![Contact Form Split Right Layout Screenshot](/blog/assets/built-in-contact-form-feature.png) 55 | 56 | Both layouts display the page title and description opposite the form, and you 57 | can also choose to show your social icon links if you have those configured in 58 | the `config.toml` file. 59 | -------------------------------------------------------------------------------- /content/blog/css-grid-scaffold.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "CSS Grid Scaffold" 3 | subtitle: "" 4 | 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." 5 | date: 2019-07-02 6 | author: "Eric Anderson" 7 | draft: false 8 | images: 9 | - /blog/assets/css-grid-thumbnail.png 10 | - /blog/assets/css-grid-cover.png 11 | series: 12 | - Getting Started 13 | tags: 14 | - hugo-site 15 | categories: 16 | - Theme Features 17 | # layout options: single or single-sidebar 18 | layout: single-sidebar 19 | --- 20 | 21 | ### “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.” 22 | 23 | *— [Chris House, A Complete Guide to CSS Grid Layout](http://chris.house/blog/a-complete-guide-css-grid-layout/)* [^1] 24 | 25 | --- 26 | 27 | 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`. 28 | 29 | 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. 30 | 31 | {{< figure src="/blog/assets/css-grid-cover.png" alt="Traditional right sidebar layout" caption="A visual example of the traditional right sidebar layout" >}} 32 | 33 | --- 34 | 35 | ### ERMAHGERD 36 | 37 | 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: 38 | 39 | > ##### CSS Grid Layout Module 40 | > 41 | > 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. 42 | > 43 | > — _W3C_ 44 | 45 | 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: 46 | 47 | ```css 48 | .grid-container { 49 | display: grid; 50 | grid-template-columns: repeat(6, 1fr); 51 | grid-template-rows: repeat(3, auto); 52 | } 53 | ``` 54 | 55 | #### 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. 56 | 57 | [^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/) 58 | -------------------------------------------------------------------------------- /content/blog/tachyons-for-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Tachyons for Style" 3 | subtitle: "A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light." 4 | 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." 5 | date: 2019-07-03 6 | author: "Eric Anderson" 7 | draft: false 8 | images: 9 | - /blog/assets/tachyons-thumbnail.png 10 | - /blog/assets/tachyons-logo-script-feature.png 11 | series: 12 | - Getting Started 13 | tags: 14 | - hugo-site 15 | categories: 16 | - Theme Features 17 | # layout options: single or single-sidebar 18 | layout: single 19 | --- 20 | 21 | ![Tachyons Logo Script](/blog/assets/tachyons-logo-script-feature.png) 22 | 23 | ## [Tachyons](http://tachyons.io) is a design system that allows you to design gorgeous interfaces in the browser with little effort. 24 | 25 | --- 26 | 27 | ### Because Speed 28 | 29 | Building this static site generator theme was the first time I used an Atomic 30 | (or Functional) CSS system like Tachyons. It's a design system that provides 31 | very small (which means fast) CSS modules that you can use in your HTML. So, 32 | rather than writing every line of CSS, you apply the style you need as you write 33 | your HTML with easy to understand shorthand class names. This makes for a very 34 | powerful way to style, in the browser, or while building a static site like this 35 | one – since you can see every change with every save. **It's a joy to use.** 36 | 37 | In using this theme for your next static website project, you won't need to know 38 | anything about Tachyons ... so, don't freak out. Even though I used it to style 39 | the theme, you won't need to change a thing. BUT, if you do want to play around 40 | with it, you can make massive changes very easily. Just familiarize yourself 41 | with the [clear documentation on the design system](http://tachyons.io/docs/). 42 | Once you dive in, you'll recognize all the classes I'm using in the markup. 43 | 44 | ### BYOTachyons 45 | 46 | One of the best features of Tachyons is the exhaustive [component 47 | library](https://www.tachyonstemplates.com/components/?selectedKind=AboutPages&selectedStory=AboutUs&full=0&down=0&left=1&panelRight=0) 48 | contributed by the community. All those components are built to work with the 49 | Tachyons classes, so they will work in this theme too! You can copy/paste 50 | components in order to quickly block out a page, then fill in your content. 51 | 52 | ### Taste the Rainbow 53 | 54 | We've leveraged the [accessible color 55 | combinations](http://tachyons.io/docs/themes/skins/) included with Tachyons to 56 | offer an easy way for you to setup your site using your favorite colors. In the 57 | site configuration file (`config.toml`), there is a full set of color parameters 58 | giving you control over the theme color scheme. For an option like `siteBgColor` 59 | for example, you can just type one of the predefined color names from Tachyons 60 | and save the file. You can totally customize the theme colors within minutes of 61 | installing the theme. 62 | 63 | ```toml 64 | # basic color options: use only color names as shown in the 65 | # "Color Palette" section of http://tachyons.io/docs/themes/skins/ 66 | siteBgColor = "near-white" 67 | sidebarBgColor = "light-gray" 68 | headingColor = "black" 69 | textColor = "dark-gray" 70 | sidebarTextColor = "mid-gray" 71 | bodyLinkColor = "blue" 72 | navLinkColor = "near-black" 73 | sidebarLinkColor = "near-black" 74 | footerTextColor = "silver" 75 | buttonTextColor = "near-white" 76 | buttonBgColor = "black" 77 | buttonHoverTextColor = "white" 78 | buttonHoverBgColor = "blue" 79 | borderColor = "moon-gray" 80 | ``` 81 | 82 | ### Dig Deeper 83 | 84 | Let's say you have a style guide to follow and `washed-blue` just won't cut the 85 | mustard. We built Blogophonic for you, too. There is a bypass of these 86 | predefined colors built in, you just need to dig a little deeper. In the theme 87 | assets, locate and open the main "scaffold" SCSS file (`/assets/scaffold.scss`). After the 88 | crazy looking variables you probably don't recognize and directly following the 89 | Tachyons import (`@import 'tachyons';`) you'll see a comment on line 24 that looks just 90 | like this: 91 | 92 | ```scss 93 | // uncomment the import below to activate custom-colors 94 | // add your own colors at the top of the imported file 95 | // @import 'custom-colors'; 96 | ``` 97 | 98 | Once you uncomment the `custom-colors` import, it will look like this: 99 | 100 | ```scss 101 | // uncomment the import below to activate custom-colors 102 | // add your own colors at the top of the imported file 103 | @import "custom-colors"; 104 | ``` 105 | 106 | Save that change, and now the color options in the `config.toml` are no longer 107 | active – they've been bypassed. To customize the colors, locate and open the 108 | `custom-colors` file found in the theme assets (`/assets/custom-colors.scss`). 109 | At the top of that file, you'll find a whole new set of variables for all the 110 | same color options, but this time you get to assign your own HEX codes. 111 | 112 | ```scss 113 | // set your custom colors here 114 | $siteBgColorCustom: #e3e3da; 115 | $sidebarBgColorCustom: #dbdbd2; 116 | $textColorCustom: #666260; 117 | $sidebarTextColorCustom: #666260; 118 | $headingColorCustom: #103742; 119 | $bodyLinkColorCustom: #c4001a; 120 | $navLinkColorCustom: #c4001a; 121 | $sidebarLinkColorCustom: #c4001a; 122 | $footerTextColorCustom: #918f8d; 123 | $buttonTextColorCustom: #f7f7f4; 124 | $buttonHoverTextColorCustom: #f9f9f8; 125 | $buttonBgColorCustom: #103742; 126 | $buttonHoverBgColorCustom: #c4001a; 127 | $borderColorCustom: #c4beb9; 128 | ``` 129 | -------------------------------------------------------------------------------- /content/elements/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Typography Styles & Element Examples 3 | description: The "kitchen sink," if you will ... a page showing examples of type and page elements included in this template. 4 | date: 2019-02-18T12:27:33-06:00 5 | draft: false 6 | # layout options are standard (default) or wide-body 7 | layout: wide-body 8 | show_title_as_headline: true 9 | --- 10 | 11 |
12 |
13 |
Font Sizes
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
AAAAAAAA
6rem
(96px)		5rem
(80px)		3rem
(48px)		2.25rem
(36px)		1.5rem
(24px)		1.25rem
(20px)		1rem
(16px)		.875rem
(14px)
39 |
40 |
Type Samples
41 |

Head­line

42 |

Sub­head­line

43 |

Level 1 Heading

44 |

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.

45 |

Level 2 Heading

46 |

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.

47 |

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.

48 |

Level 3 Heading

49 |

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.

50 |

Level 4 Heading

51 |

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.

52 |
More Type Samples
53 |
54 |

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.

55 | ―Stanley Morison 56 |
57 | 63 |
    64 |
  1. The first ordered list item
    2. 65 |
  2. The second ordered list item
    3. 66 |
  3. The third ordered list item
    4. 67 |
  4. The fourth ordered list item
    5. 68 |
69 |
70 |
Definition Term
71 |
The first definition description
72 |
The second definition description
73 |
The third definition description
74 |
The fourth definition description
75 |
76 |
77 |
78 |
Sample Forms
79 |
80 |
81 | Sample Form 82 | 83 | 84 | 85 | 86 | 87 | 94 | 95 | 96 |
97 | 98 |
99 |
100 |
101 |
102 | 103 | 104 |
105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 |
113 |
114 |
Sample Table
115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |
NameRating
The Big Lebowski★★★★★
Pulp Fiction★★★★★
Fargo★★★★★
Intersellar★★★★☆
Dumb & Dumber★★★★☆
The Big White★★★★☆
149 |
Sample Highlight Shortcode
150 | {{< highlight css >}}.grid-container { 151 | display: grid; 152 | grid-template-columns: repeat(3, 1fr); 153 | grid-template-rows: repeat(3, auto); 154 | grid-auto-flow: dense; 155 | grid-gap: 0px; 156 | margin: 0px auto; 157 | max-width: 1440px; 158 | }{{< /highlight >}} 159 |
Sample Figure Shortcode
160 | {{< 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." >}} 161 |
162 |
163 | -------------------------------------------------------------------------------- /content/form/contact.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contact 3 | name: Contact Us Form 4 | description: "This template has a **contact-us** form built right in. All you need to do is add a valid recipient email address or form-id to the front matter of this form page and you're ready to receive submissions." 5 | date: 2019-02-25T13:38:41-06:00 6 | draft: false 7 | url: contact 8 | type: form 9 | layout: split-right # split-right or split-left 10 | submit_button_label: Send Message 11 | show_social_links: true # specify social accounts in site config 12 | show_poweredby_formspree: true 13 | formspree_form_id: your@email.here 14 | --- 15 | 16 | ** Contact page don't contain a body, just the front matter above. 17 | See form.html in the layouts folder ** 18 | -------------------------------------------------------------------------------- /data/ads/formspree.yaml: -------------------------------------------------------------------------------- 1 | title: Made by Formspree 2 | body: > 3 | Formspree is a form backend, API and email 4 | service for HTML forms. It is the simplest way to collect form submissions on your static website. 5 | -------------------------------------------------------------------------------- /data/navigation.yaml: -------------------------------------------------------------------------------- 1 | header: 2 | - name: Home 3 | title: Home Page 4 | url: / 5 | - name: About 6 | title: About Blogophonic 7 | url: /about/ 8 | - name: Blog 9 | title: Blog 10 | url: /blog/ 11 | - name: Contact 12 | title: Contact Form 13 | url: /contact/ 14 | - name: Elements 15 | title: Element Page 16 | url: /elements/ 17 | 18 | footer: 19 | - name: Help 20 | title: Visit Help Site 21 | url: https://help.formspree.io 22 | - name: Privacy 23 | title: Privacy Policy 24 | url: https://help.formspree.io 25 | - name: Terms of Use 26 | title: Terms and Conditions 27 | url: https://help.formspree.io 28 | - name: RSS 29 | title: RSS Feed 30 | url: /index.xml 31 | -------------------------------------------------------------------------------- /data/sidebar_content.yaml: -------------------------------------------------------------------------------- 1 | blog: # must match the slug of your blog 2 | single_sidebar: # for single-sidebar layout 3 | image: 4 | title: A Blog That's Real 5 | description: "This is a fully featured blog that supports categories, 6 | tags, series, and pagination. Even this sidebar offers a ton of customizations. 7 | Check out the sidebar_content.yaml file in the /data folder to edit this content." 8 | author: 9 | text_link_label: View Recent Posts 10 | text_link_url: /blog 11 | show_sidebar_adunit: true # show ad container 12 | list_sidebar: # for list-sidebar layout 13 | image: 14 | title: A Blog That's Real 15 | description: "This is a fully featured blog that supports categories, 16 | tags, series, and pagination. Even this sidebar offers a ton of customizations. 17 | Check out the sidebar_content.yaml file in the /data folder to edit this content." 18 | author: The Team at Formspree 19 | text_link_label: Subscribe via RSS 20 | text_link_url: /index.xml 21 | show_sidebar_adunit: true # show ad container 22 | -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |

404

5 |

Page not found

6 |
7 |
8 | {{ end }} 9 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{- partial "head.html" . -}} 4 | 5 |
6 | {{- block "header" . }}{{- partial "header.html" . -}}{{- end }} 7 | {{- block "main" . }}{{- end }} 8 | {{- block "footer" . }}{{- partial "footer.html" . -}}{{- end }} 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |

{{ .Title }}

5 |

{{ .Description }}

6 | {{ if .Params.show_author_byline }}

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

{{ end }} 7 |
8 |
9 | {{ $paginator := .Paginate (where .Pages "Type" "blog") }} 10 | {{ range $paginator.Pages }} 11 | {{ .Render "summary"}} 12 | {{ end }} 13 | {{ partial "shared/list-pagination.html" . }} 14 |
15 |
16 | {{ end }} 17 | -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 |
6 |

{{ .Title }}

7 | {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} 8 | {{ if .CurrentSection.Params.show_author_byline }}

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

{{ end }} 9 | {{ if .CurrentSection.Params.show_post_date }}

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

{{ end }} 10 |
11 |
12 | {{ .Content }} 13 | {{ .Scratch.Set "details" "closed" }} 14 | {{ partial "shared/post-details.html" . }} 15 |
16 |
17 | {{ partial "shared/post-pagination.html" . }} 18 |
19 |
20 | {{ if .CurrentSection.Params.show_disqus_comments }} 21 |
22 | {{ template "_internal/disqus.html" . }} 23 |
24 | {{ end }} 25 |
26 |
27 | {{ end }} 28 | -------------------------------------------------------------------------------- /layouts/blog/list-grid.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |

{{ .Title }}

5 |

{{ .Description }}

6 | {{ if .Params.show_author_byline }}

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

{{ end }} 7 |
8 |
9 | {{ $paginator := .Paginate (where .Pages "Type" "blog") }} 10 | {{ range $paginator.Pages }} 11 | {{ .Render "summary-grid"}} 12 | {{ end }} 13 | {{ partial "shared/list-pagination.html" . }} 14 |
15 |
16 | {{ end }} 17 | -------------------------------------------------------------------------------- /layouts/blog/list-sidebar.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 | {{ $paginator := .Paginate (where .Pages "Type" "blog") }} 5 | {{ range $paginator.Pages }} 6 | {{ .Render "summary" }} 7 | {{ end }} 8 | {{ partial "shared/list-pagination.html" . }} 9 |
10 |
11 | 15 | {{ end }} 16 | -------------------------------------------------------------------------------- /layouts/blog/single-sidebar.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 |
6 |

{{ .Title }}

7 | {{ if .Params.subtitle }}

{{ .Params.subtitle }}

{{ end }} 8 | {{ if .CurrentSection.Params.show_author_byline }}

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

{{ end }} 9 | {{ if .CurrentSection.Params.show_post_date }}

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

{{ end }} 10 |
11 |
12 | {{ .Content }} 13 |
14 |
15 | {{ partial "shared/post-pagination.html" . }} 16 |
17 |
18 | {{ if .CurrentSection.Params.show_disqus_comments }} 19 |
20 | {{ template "_internal/disqus.html" . }} 21 |
22 | {{ end }} 23 |
24 |
25 | 31 | {{ end }} 32 | -------------------------------------------------------------------------------- /layouts/blog/summary-grid.html: -------------------------------------------------------------------------------- 1 |
2 | {{ if .CurrentSection.Params.show_post_thumbnail }} 3 |
4 |
5 |
6 | {{ end }} 7 |
8 |

{{ .Title }}

9 |

{{ if .Params.Excerpt }}{{ .Params.Excerpt }}{{ else }}{{ .Summary }}{{ end }}

10 | {{ if .CurrentSection.Params.show_author_byline }}

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

{{ end }} 11 | {{ if .CurrentSection.Params.show_post_date }}

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

{{ end }} 12 |
13 |
14 | -------------------------------------------------------------------------------- /layouts/blog/summary.html: -------------------------------------------------------------------------------- 1 |
2 | {{ if .CurrentSection.Params.show_post_thumbnail }} 3 |
4 |
5 | {{ with $.Param "images" }}{{ range first 1 .}}{{ end }}{{ end }} 6 |
7 |
8 |
9 |

{{ .Title }}

10 |
11 |

{{ if .Params.Excerpt }}{{ .Params.Excerpt }}{{ else }}{{ .Summary }}{{ end }}

12 |
13 | {{ if .CurrentSection.Params.show_author_byline }}

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

{{ end }} 14 | {{ if .CurrentSection.Params.show_post_date }}

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

{{ end }} 15 |
16 |
17 |
18 | {{ else }} 19 |
20 |
21 |

{{ .Title }}

22 |
23 |

{{ if .Params.Excerpt }}{{ .Params.Excerpt }}{{ else }}{{ .Summary }}{{ end }}

24 | 28 |
29 | {{ end }} 30 |
31 | -------------------------------------------------------------------------------- /layouts/form/split-left.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 |
6 | {{ partial "shared/contact-form.html" . }} 7 |
8 |
9 |

{{ .Title }}

10 |

{{ .Description | markdownify }}

11 | {{ if .Params.show_social_links }} 12 |

13 | {{ partial "shared/social-links.html" . }} 14 |

15 | {{ end }} 16 |
17 |
18 |
19 |
20 | {{ end }} 21 | -------------------------------------------------------------------------------- /layouts/form/split-right.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 |
6 |

{{ .Title }}

7 |

{{ .Description | markdownify }}

8 | {{ if .Params.show_social_links }} 9 |

10 | {{ partial "shared/social-links.html" . }} 11 |

12 | {{ end }} 13 |
14 |
15 | {{ partial "shared/contact-form.html" . }} 16 |
17 |
18 |
19 |
20 | {{ end }} 21 | -------------------------------------------------------------------------------- /layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |
5 |
6 | {{ with .Params.title }}

{{ . }}

{{ end }} 7 | {{ with .Params.subtitle }}

{{ . }}

{{ end }} 8 | {{ with .Params.description }}

{{ . | markdownify }}

{{ end }} 9 | {{ if .Params.show_action_link }}{{ .Params.action_label | safeHTML }}{{ end }} 10 |
11 |
12 | {{ with .Params.images }} 13 | {{ range first 1 . }}{{ end }} 14 | {{ end }} 15 |
16 |
17 |
18 |
19 | {{ end }} 20 | -------------------------------------------------------------------------------- /layouts/page/standard.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 | {{ if .Params.show_title_as_headline }}

{{ .Title }}

{{ end }} 5 | {{ .Content }} 6 |
7 |
8 | {{ end }} 9 | -------------------------------------------------------------------------------- /layouts/page/wide-body.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 | {{ if .Params.show_title_as_headline }}

{{ .Title }}

{{ end }} 5 | {{ .Content }} 6 |
7 |
8 | {{ end }} 9 | -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ if .IsHome }}{{ .Title }}{{ else }}{{ .Page.Title }} | {{ .Site.Title }}{{ end }} 6 | 7 | {{ template "_internal/opengraph.html" . }} 8 | {{ template "_internal/schema.html" . }} 9 | {{ template "_internal/twitter_cards.html" . }} 10 | {{ template "_internal/google_analytics_async.html" . }} 11 | {{ `` | safeHTML }} 12 | 13 | 14 | {{ range .AlternativeOutputFormats }} 15 | {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} 16 | {{ end }} 17 | {{ $styles := resources.Get "scaffold.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} 18 | 19 | 20 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /layouts/partials/shared/attribution.html: -------------------------------------------------------------------------------- 1 | 2 | Based on Blogophonic by Formspree. -------------------------------------------------------------------------------- /layouts/partials/shared/contact-form.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{ .Params.Name }} 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | {{ if .Params.show_poweredby_formspree }}Powered by Formspree{{ end }} 14 |
15 | -------------------------------------------------------------------------------- /layouts/partials/shared/list-pagination.html: -------------------------------------------------------------------------------- 1 | {{ $previous_label := "Newer" }} 2 | {{ $next_label := "Older" }} 3 | {{ $pag := $.Paginator }} 4 | {{ if gt $pag.TotalPages 1 }} 5 |
6 | 25 |
26 | {{ end }} 27 | -------------------------------------------------------------------------------- /layouts/partials/shared/post-details.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Posted on:
4 |
{{ .PublishDate.Format "January 2, 2006" }}
5 |
6 |
7 |
Length:
8 |
{{ .ReadingTime }} minute read, {{ .WordCount }} words
9 |
10 | {{ with .Params.categories }} 11 |
12 |
Categories:
13 |
{{ range . }} {{ . }} {{ end }}
14 |
15 | {{ end }} 16 | {{ with .Params.series }} 17 |
18 |
Series:
19 |
{{ range . }} {{ . }} {{ end }}
20 |
21 | {{ end }} 22 | {{ with .Params.tags }} 23 |
24 |
Tags:
25 |
{{ range . }} {{ . }} {{ end }}
26 |
27 | {{ end }} 28 |
29 |
See Also:
30 | {{ range first 3 ( where ( where .Site.Pages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags ) "Permalink" "!=" .Permalink ) }} 31 |
{{ .Title }}
32 | {{ end }} 33 |
34 |
35 | -------------------------------------------------------------------------------- /layouts/partials/shared/post-pagination.html: -------------------------------------------------------------------------------- 1 |
2 | {{ with .PrevInSection }} 3 | 5 | {{ end }} 6 | {{ with .NextInSection }} 7 | 9 | {{ end }} 10 |
11 | -------------------------------------------------------------------------------- /layouts/partials/shared/sidebar-content.html: -------------------------------------------------------------------------------- 1 | 2 | {{ with .Scratch.Get "sidebar" }} 3 | 4 | {{ if .image }}{{ end }} 5 |
6 | {{ if .title }}

{{ .title }}

{{ end }} 7 | {{ if .description }}

{{ .description | markdownify }}

{{ end }} 8 | {{ if .author }}

Written by {{ .author }}

{{ end }} 9 | {{ if .text_link_label }}{{ .text_link_label }}{{ end }} 10 |
11 | 12 | {{ if .show_sidebar_adunit }} 13 |
14 | {{ range $.Site.Data.ads }} 15 |

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

16 | {{ end }} 17 |
18 | {{ end }} 19 | {{ end }} 20 | -------------------------------------------------------------------------------- /layouts/partials/shared/social-links.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | {{ if .Site.Social.facebook }} 4 | 5 | 6 | 7 | {{ end }} 8 | {{ if .Site.Social.instagram }} 9 | 10 | 11 | 12 | {{ end }} 13 | {{ if .Site.Social.youtube }} 14 | 15 | 16 | 17 | {{ end }} 18 | {{ if .Site.Social.twitter }} 19 | 20 | 21 | 22 | {{ end }} 23 | {{ if .Site.Social.github }} 24 | 25 | 26 | 27 | {{ end }} 28 | {{ if .Site.Social.medium }} 29 | 30 | 31 | 32 | {{ end }} 33 |
34 | -------------------------------------------------------------------------------- /layouts/taxonomy/list.html: -------------------------------------------------------------------------------- 1 | {{ define "main" }} 2 |
3 |
4 |

Posts in {{ .Title }}

5 |
6 |
7 | {{ range .Pages }} 8 | {{ .Render "summary"}} 9 | {{ end }} 10 |
11 |
12 | {{ end }} 13 | -------------------------------------------------------------------------------- /static/img/blogophonic-mark-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/static/img/blogophonic-mark-dark.png -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/static/img/favicon.ico -------------------------------------------------------------------------------- /static/img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/static/img/screenshot.png -------------------------------------------------------------------------------- /static/img/unicorn-megaphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formspree/blogophonic-hugo/1b07c4b413a379213c871d33c81fcc51043c48dd/static/img/unicorn-megaphone.png --------------------------------------------------------------------------------