Browse Source

tag page covers

pull/3/head
Julian Ćwirko 10 years ago
parent
commit
0eee9f1934
  1. 2
      assets/css/style.css
  2. 8
      assets/js/vendor/foundation.min.js
  3. 174
      assets/scss/_foundation-settings.scss
  4. 2
      assets/scss/foundation/_functions.scss
  5. 4
      assets/scss/foundation/components/_alert-boxes.scss
  6. 1
      assets/scss/foundation/components/_block-grid.scss
  7. 2
      assets/scss/foundation/components/_breadcrumbs.scss
  8. 11
      assets/scss/foundation/components/_button-groups.scss
  9. 3
      assets/scss/foundation/components/_buttons.scss
  10. 13
      assets/scss/foundation/components/_clearing.scss
  11. 1
      assets/scss/foundation/components/_dropdown-buttons.scss
  12. 19
      assets/scss/foundation/components/_forms.scss
  13. 6
      assets/scss/foundation/components/_global.scss
  14. 34
      assets/scss/foundation/components/_icon-bar.scss
  15. 10
      assets/scss/foundation/components/_range-slider.scss
  16. 44
      assets/scss/foundation/components/_reveal.scss
  17. 12
      assets/scss/foundation/components/_split-buttons.scss
  18. 3
      assets/scss/foundation/components/_sub-nav.scss
  19. 4
      assets/scss/foundation/components/_tabs.scss
  20. 4
      assets/scss/foundation/components/_toolbar.scss
  21. 13
      assets/scss/foundation/components/_top-bar.scss
  22. 63
      assets/scss/foundation/components/_type.scss
  23. 90
      assets/scss/foundation/components/_visibility.scss
  24. 4
      default.hbs
  25. 4
      package.json
  26. 3
      tag.hbs

2
assets/css/style.css

File diff suppressed because one or more lines are too long

8
assets/js/vendor/foundation.min.js vendored

File diff suppressed because one or more lines are too long

174
assets/scss/_foundation-settings.scss

@ -83,6 +83,8 @@ $include-html-global-classes: $include-html-classes;
// $total-columns: 12;
// $column-gutter: rem-calc(30);
// $last-child-float: $opposite-direction;
// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -92,8 +94,8 @@ $include-html-global-classes: $include-html-classes;
// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
// We use these to define default font weights
// $font-weight-normal: normal !default;
// $font-weight-bold: bold !default;
// $font-weight-normal: normal;
// $font-weight-bold: bold;
// $white : #FFFFFF;
// $ghost : #FAFAFA;
@ -185,6 +187,7 @@ $include-html-global-classes: $include-html-classes;
// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
// $cursor-crosshair-value: crosshair;
// $cursor-default-value: default;
// $cursor-disabled-value: not-allowed;
// $cursor-pointer-value: pointer;
// $cursor-help-value: help;
// $cursor-text-value: text;
@ -213,12 +216,12 @@ $include-html-global-classes: $include-html-classes;
// $h6-font-size: 1rem;
// We use these to control header size reduction on small screens
// $h1-font-reduction: rem-calc(10) !default;
// $h2-font-reduction: rem-calc(10) !default;
// $h3-font-reduction: rem-calc(5) !default;
// $h4-font-reduction: rem-calc(5) !default;
// $h5-font-reduction: 0 !default;
// $h6-font-reduction: 0 !default;
// $h1-font-reduction: rem-calc(10);
// $h2-font-reduction: rem-calc(10);
// $h3-font-reduction: rem-calc(5);
// $h4-font-reduction: rem-calc(5);
// $h5-font-reduction: 0;
// $h6-font-reduction: 0;
// These control how subheaders are styled.
// $subheader-line-height: 1.4;
@ -256,7 +259,7 @@ $include-html-global-classes: $include-html-classes;
// $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none;
// $anchor-font-color: $primary-color;
// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
// We use these to style the <hr> element
// $hr-border-width: 1px;
@ -362,11 +365,11 @@ $include-html-global-classes: $include-html-classes;
// $alert-close-opacity: 0.3;
// $alert-close-opacity-hover: 0.5;
// $alert-close-padding: 9px 6px 4px;
// $alert-close-background: inherit;
// We use this to control border radius
// $alert-radius: $global-radius;
// We use this to control transition effects
// $alert-transition-speed: 300ms;
// $alert-transition-ease: ease-out;
@ -379,7 +382,9 @@ $include-html-global-classes: $include-html-classes;
// We use this to control the maximum number of block grid elements per row
// $block-grid-elements: 12;
// $block-grid-default-spacing: rem-calc(20);
// $align-block-grid-to-grid: false;
// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
// $block-grid-media-queries: true;
@ -444,8 +449,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to control various hover effects.
// $button-function-factor: -20%;
// We use these to control button border and hover styles.
// $button-border-width: 0px;
// We use these to control button border styles.
// $button-border-width: 0;
// $button-border-style: solid;
// $button-bg-color: $primary-color;
// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
@ -456,6 +461,10 @@ $include-html-global-classes: $include-html-classes;
// $success-button-border-color: $success-button-bg-hover;
// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
// $alert-button-border-color: $alert-button-bg-hover;
// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
// $warning-button-border-color: $warning-button-bg-hover;
// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
// $info-button-border-color: $info-button-bg-hover;
// We use this to set the default radius used throughout the core.
// $button-radius: $global-radius;
@ -564,6 +573,7 @@ $include-html-global-classes: $include-html-classes;
// $dropdown-button-pip-color: $white;
// $dropdown-button-pip-color-alt: $oil;
// We use these to set the size of the pip in dropdown buttons
// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
@ -635,6 +645,7 @@ $include-html-global-classes: $include-html-classes;
// $input-disabled-bg: $gainsboro;
// $input-disabled-cursor: $cursor-default-value;
// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
// $input-include-glowing-effect: true;
// We use these to style the fieldset border and spacing.
// $fieldset-border-style: solid;
@ -671,7 +682,6 @@ $include-html-global-classes: $include-html-classes;
// $input-error-message-font-color-alt: $oil;
// We use this to style the glowing effect of inputs when focused
// $input-include-glowing-effect: true;
// $glowing-effect-fade-time: 0.45s;
// $glowing-effect-color: $input-focus-border-color;
@ -679,11 +689,11 @@ $include-html-global-classes: $include-html-classes;
// $select-bg-color: $ghost;
// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
// 12. Icon Bar
// - - - - - - - - - - - - - - - - - - - - - - - - -
// We use these to style the icon-bar and items
// $include-html-icon-bar-classes: $include-html-classes;
// $icon-bar-bg: $oil;
// $icon-bar-font-color: $white;
// $icon-bar-font-color-hover: $icon-bar-font-color;
@ -697,6 +707,9 @@ $include-html-global-classes: $include-html-classes;
// $icon-bar-active-color: $primary-color;
// $icon-bar-item-padding: 1.25rem;
// We use this to set default opacity and cursor for disabled icons.
// $icon-bar-disabled-opacity: 0.7;
// 13. Inline Lists
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -798,11 +811,12 @@ $include-html-global-classes: $include-html-classes;
// $include-html-magellan-classes: $include-html-classes;
// $magellan-bg: $white;
// $magellan-padding: 0 !important;
// $magellan-padding: 10px;
// 18. Off-canvas
// - - - - - - - - - - - - - - - - - - - - - - - - -
// Off Canvas Tab Bar Variables
// $include-html-off-canvas-classes: $include-html-classes;
// $tabbar-bg: $oil;
@ -813,8 +827,9 @@ $include-html-global-classes: $include-html-classes;
// $tabbar-middle-padding: 0 rem-calc(10);
// Off Canvas Divider Styles
// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
// $tabbar-right-section-border: $tabbar-left-section-border;
// Off Canvas Tab Bar Headers
// $tabbar-header-color: $white;
@ -825,7 +840,6 @@ $include-html-global-classes: $include-html-classes;
// Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250);
// $off-canvas-bg: $oil;
// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
// Off Canvas Menu List Variables
// $off-canvas-label-padding: 0.3rem rem-calc(15);
@ -834,13 +848,13 @@ $include-html-global-classes: $include-html-classes;
// $off-canvas-label-font-size: rem-calc(12);
// $off-canvas-label-font-weight: $font-weight-bold;
// $off-canvas-label-bg: $tuatara;
// $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%);
// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
// $off-canvas-label-border-bottom: none;
// $off-canvas-label-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15);
// $off-canvas-link-color: rgba($white, 0.7);
// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
// $off-canvas-back-bg: $tuatara;
// $off-canvas-back-bg: #444;
// $off-canvas-back-border-top: $off-canvas-label-border-top;
// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
@ -852,7 +866,7 @@ $include-html-global-classes: $include-html-classes;
// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
// $tabbar-menu-icon-text-indent: rem-calc(35);
// $tabbar-menu-icon-width: $tabbar-height;
// $tabbar-menu-icon-width: $tabbar-icon-width;
// $tabbar-menu-icon-height: $tabbar-height;
// $tabbar-menu-icon-padding: 0;
@ -906,15 +920,15 @@ $include-html-global-classes: $include-html-classes;
// $orbit-slide-number-font-color: $white;
// $orbit-slide-number-padding: rem-calc(5);
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// Hide controls on small
// $orbit-nav-hide-for-small: true;
// $orbit-bullet-hide-for-small: true;
// $orbit-timer-hide-for-small: true;
// Graceful Loading Wrapper and preloader
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
// 20. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -972,6 +986,7 @@ $include-html-global-classes: $include-html-classes;
// $panel-header-adjust: true;
// $callout-panel-link-color: $primary-color;
// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
// 22. Pricing Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1002,6 +1017,7 @@ $include-html-global-classes: $include-html-classes;
// $price-money-size: rem-calc(32);
// $price-money-font-family: $body-font-family;
// We use these to control the description styles
// $price-bg: $white;
// $price-desc-color: $monsoon;
@ -1032,7 +1048,7 @@ $include-html-global-classes: $include-html-classes;
// We use this to set the progress bar height
// $progress-bar-height: rem-calc(25);
// $progress-bar-color: $vapor ;
// $progress-bar-color: $vapor;
// We use these to control the border styles
// $progress-bar-border-color: scale-color($white, $lightness: 20%);
@ -1041,7 +1057,6 @@ $include-html-global-classes: $include-html-classes;
// $progress-bar-border-radius: $global-radius;
// We use these to control the margin & padding
// $progress-bar-pad: rem-calc(2);
// $progress-bar-margin-bottom: rem-calc(10);
// We use these to set the meter colors
@ -1055,7 +1070,7 @@ $include-html-global-classes: $include-html-classes;
// $include-html-range-slider-classes: $include-html-classes;
// These variables define the slider bar styles
// These variabels define the slider bar styles
// $range-slider-bar-width: 100%;
// $range-slider-bar-height: rem-calc(16);
@ -1065,12 +1080,13 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-radius: $global-radius;
// $range-slider-round: $global-rounded;
// $range-slider-bar-bg-color: $ghost;
// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
// Vertical bar styles
// $range-slider-vertical-bar-width: rem-calc(16);
// $range-slider-vertical-bar-height: rem-calc(200);
// These variables define the slider handle styles
// These variabels define the slider handle styles
// $range-slider-handle-width: rem-calc(32);
// $range-slider-handle-height: rem-calc(22);
// $range-slider-handle-position-top: rem-calc(-5);
@ -1083,6 +1099,9 @@ $include-html-global-classes: $include-html-classes;
// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
// $range-slider-handle-cursor: pointer;
// $range-slider-disabled-opacity: 0.7;
// $range-slider-disabled-cursor: $cursor-disabled-value;
// 25. Reveal
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1102,8 +1121,8 @@ $include-html-global-classes: $include-html-classes;
// We use these to style the reveal close button
// $reveal-close-font-size: rem-calc(40);
// $reveal-close-top: rem-calc(8);
// $reveal-close-side: rem-calc(11);
// $reveal-close-top: rem-calc(10);
// $reveal-close-side: rem-calc(22);
// $reveal-close-color: $base;
// $reveal-close-weight: $font-weight-bold;
@ -1129,7 +1148,7 @@ $include-html-global-classes: $include-html-classes;
// We use these to control list styles.
// $side-nav-list-type: none;
// $side-nav-list-position: inside;
// $side-nav-list-position: outside;
// $side-nav-list-margin: rem-calc(0 0 7 0);
// We use these to control link styles.
@ -1214,7 +1233,9 @@ $include-html-global-classes: $include-html-classes;
// $sub-nav-border-radius: 3px;
// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
// We use these to control the active item styles
// $sub-nav-active-font-weight: $font-weight-normal;
// $sub-nav-active-bg: $primary-color;
// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
@ -1230,39 +1251,21 @@ $include-html-global-classes: $include-html-classes;
// $include-html-form-classes: $include-html-classes;
// Controlling border styles and background colors for the switch container
// $switch-border-color: scale-color($white, $lightness: -20%);
// $switch-border-style: solid;
// $switch-border-width: 1px;
// $switch-bg: $white;
// Controlling background color for the switch container
// $switch-bg: $gainsboro;
// We use these to control the switch heights for our default classes
// $switch-height-tny: rem-calc(22);
// $switch-height-sml: rem-calc(28);
// $switch-height-med: rem-calc(36);
// $switch-height-lrg: rem-calc(44);
// $switch-bottom-margin: rem-calc(20);
// We use these to control default font sizes for our classes.
// $switch-font-size-tny: 11px;
// $switch-font-size-sml: 12px;
// $switch-font-size-med: 14px;
// $switch-font-size-lrg: 17px;
// $switch-label-side-padding: 6px;
// $switch-height-tny: 1.5rem;
// $switch-height-sml: 1.75rem;
// $switch-height-med: 2rem;
// $switch-height-lrg: 2.5rem;
// $switch-bottom-margin: 1.5rem;
// We use these to style the switch-paddle
// $switch-paddle-bg: $white;
// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
// $switch-paddle-border-width: 1px;
// $switch-paddle-border-style: solid;
// $switch-paddle-transition-speed: .1s;
// $switch-paddle-transition-speed: .15s;
// $switch-paddle-transition-ease: ease-out;
// $switch-positive-color: scale-color($success-color, $lightness: 94%);
// $switch-negative-color: $white-smoke;
// Outline Style for tabbing through switches
// $switch-label-outline: 1px dotted $jumbo;
// $switch-active-color: $primary-color;
// 30. Tables
// - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1279,12 +1282,25 @@ $include-html-global-classes: $include-html-classes;
// $table-border-color: $gainsboro;
// These control the table head styles
// $table-head-bg: $white-smoke ;
// $table-head-bg: $white-smoke;
// $table-head-font-size: rem-calc(14);
// $table-head-font-color: $jet;
// $table-head-font-weight: $font-weight-bold;
// $table-head-padding: rem-calc(8 10 10);
// These control the table foot styles
// $table-foot-bg: $table-head-bg;
// $table-foot-font-size: $table-head-font-size;
// $table-foot-font-color: $table-head-font-color;
// $table-foot-font-weight: $table-head-font-weight;
// $table-foot-padding: $table-head-padding;
// These control the caption
// table-caption-bg: transparent;
// $table-caption-font-color: $table-head-font-color;
// $table-caption-font-size: rem-calc(16);
// $table-caption-font-weight: bold;
// These control the row padding and font styles
// $table-row-padding: rem-calc(9 10);
// $table-row-font-size: rem-calc(14);
@ -1296,13 +1312,14 @@ $include-html-global-classes: $include-html-classes;
// $table-display: table-cell;
// $table-margin-bottom: rem-calc(20);
// 31. Tabs
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-tabs-classes: $include-html-classes;
// $tabs-navigation-padding: rem-calc(16);
// $tabs-navigation-bg-color: $silver ;
// $tabs-navigation-bg-color: $silver;
// $tabs-navigation-active-bg-color: $white;
// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
// $tabs-navigation-font-color: $jet;
@ -1375,16 +1392,6 @@ $include-html-global-classes: $include-html-classes;
// $topbar-title-weight: $font-weight-normal;
// $topbar-title-font-size: rem-calc(17);
// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $oil;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// Set the link colors and styles for top-level nav
// $topbar-link-color: $white;
// $topbar-link-color-hover: $white;
@ -1394,19 +1401,29 @@ $include-html-global-classes: $include-html-classes;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: $oil;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: $h5-font-size;
// $topbar-link-dropdown-padding: 20px;
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: 0.75rem;
// $topbar-button-top: 7px;
// Style the top bar dropdown elements
// $topbar-dropdown-bg: $oil;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
// $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-bg-hover: $oil;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
@ -1421,6 +1438,7 @@ $include-html-global-classes: $include-html-classes;
// $topbar-menu-icon-color: $white;
// $topbar-menu-link-color-toggled: $jumbo;
// $topbar-menu-icon-color-toggled: $jumbo;
// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
@ -1428,18 +1446,22 @@ $include-html-global-classes: $include-html-classes;
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: $medium-up;
// Top-bar input styles
// $topbar-input-height: rem-calc(28);
// Divider Styles
// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
// Sticky Class
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
// 36. Visibility Classes
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
// $include-accessibility-classes: true;

2
assets/scss/foundation/_functions.scss

@ -6,7 +6,7 @@
$rem-base: 16px !default;
// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
// We use this to prevent styles from being loaded multiple times for components that rely on other components.
$modules: () !default;
@mixin exports($name) {
// Import from global scope

4
assets/scss/foundation/components/_alert-boxes.scss

@ -37,7 +37,7 @@ $alert-close-position: rem-calc(4) !default;
$alert-close-font-size: rem-calc(22) !default;
$alert-close-opacity: 0.3 !default;
$alert-close-opacity-hover: 0.5 !default;
$alert-close-padding: 9px 6px 4px !default;
$alert-close-padding: 0 6px 4px !default;
$alert-close-background: inherit !default;
// We use this to control border radius
@ -85,7 +85,7 @@ $alert-transition-ease: ease-out !default;
@mixin alert-close {
font-size: $alert-close-font-size;
padding: $alert-close-padding;
line-height: 0;
line-height: .9;
position: absolute;
top: $alert-close-top;
margin-top: -($alert-close-font-size / 2);

1
assets/scss/foundation/components/_block-grid.scss

@ -30,6 +30,7 @@ $block-grid-media-queries: true !default;
//
// $per-row - # of items to display per row. Default: false.
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
// $include-spacing - Adds padding to our list item. Default: true.
// $base-style - Apply a base style to block grid. Default: true.
@mixin block-grid(
$per-row:false,

2
assets/scss/foundation/components/_breadcrumbs.scss

@ -95,7 +95,7 @@ $crumb-slash: "/" !default;
a:focus {
text-decoration: none;
color: $crumb-font-color-unavailable;
cursor: $cursor-default-value;
cursor: $cursor-disabled-value;
}
}

11
assets/scss/foundation/components/_button-groups.scss

@ -70,6 +70,9 @@ $button-group-border-width: 1px !default;
margin:0;
display: block;
}
> button {
width: 100%;
}
&:first-child {
button, .button {
@ -147,6 +150,10 @@ $button-group-border-width: 1px !default;
@if $include-html-button-classes {
.button-group { @include button-group-container;
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
}
& > li { @include button-group-style(); }
&.stack {
@ -183,10 +190,6 @@ $button-group-border-width: 1px !default;
@include button-group-style($radius:$button-med, $orientation:vertical);
}
}
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
}
}
.button-bar {

3
assets/scss/foundation/components/_buttons.scss

@ -80,6 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
text-decoration: none;
text-align: $button-font-align;
-webkit-appearance: none;
-moz-appearance: none;
border-radius:0;
}
@if $display { display: $display; }
@ -134,7 +135,7 @@ $button-disabled-cursor: $cursor-default-value !default;
// We use this mixin to add button color styles
//
// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
// $border-color - Button Border Color. Default: $button-border-color

13
assets/scss/foundation/components/_clearing.scss

@ -93,7 +93,16 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
position: absolute;
#{$default-float}: 50%;
top: 50%;
margin-#{$default-float}: -50%;
@if $default-float == left {
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}
@else {
transform: translateY(-50%) translateX(50%);
-webkit-transform: translateY(-50%) translateX(50%);
-ms-transform: translateY(-50%) translateX(50%);
};
max-height: 100%;
max-width: 100%;
}
@ -171,7 +180,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
border-#{$default-float}-color: $clearing-arrow-color;
}
}
.clearing-main-prev.disabled,
.clearing-main-next.disabled { opacity: 0.3; }

1
assets/scss/foundation/components/_dropdown-buttons.scss

@ -13,6 +13,7 @@ $include-html-button-classes: $include-html-classes !default;
$dropdown-button-pip-color: $white !default;
$dropdown-button-pip-color-alt: $oil !default;
// We use these to set the size of the pip in dropdown buttons
$button-pip-tny: rem-calc(6) !default;
$button-pip-sml: rem-calc(7) !default;
$button-pip-med: rem-calc(9) !default;

19
assets/scss/foundation/components/_forms.scss

@ -34,7 +34,7 @@ $input-border-radius: $global-radius !default;
$input-disabled-bg: $gainsboro !default;
$input-disabled-cursor: $cursor-default-value !default;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
$input-include-glowing-effect: true !default;
$input-include-glowing-effect: false !default;
// We use these to style the fieldset border and spacing.
$fieldset-border-style: solid !default;
@ -53,7 +53,7 @@ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
$input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
$input-prefix-border-size: 1px !default;
$input-prefix-border-type: solid !default;
$input-prefix-overflow: hidden !default;
$input-prefix-overflow: visible !default;
$input-prefix-font-color: $oil !default;
$input-prefix-font-color-alt: $white !default;
@ -427,25 +427,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.prefix-radius.row.collapse {
input,
textarea,
select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
select,
button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
.prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
}
.postfix-radius.row.collapse {
input,
textarea,
select { @include radius(0); @include side-radius($default-float, $button-radius); }
select,
button { @include radius(0); @include side-radius($default-float, $button-radius); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
}
.prefix-round.row.collapse {
input,
textarea,
select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
select,
button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
.prefix { @include radius(0); @include side-radius($default-float, $button-round); }
}
.postfix-round.row.collapse {
input,
textarea,
select { @include radius(0); @include side-radius($default-float, $button-round); }
select,
button { @include radius(0); @include side-radius($default-float, $button-round); }
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
}
}
@ -470,6 +474,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
select {
@include form-select;
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
&[multiple] {
height: auto;
}
}
/* Adjust margin for form elements below */

6
assets/scss/foundation/components/_global.scss

@ -333,6 +333,7 @@ $large: $large-up;
$cursor-auto-value: auto !default;
$cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-disabled-value: not-allowed !default;
$cursor-pointer-value: pointer !default;
$cursor-help-value: help !default;
$cursor-text-value: text !default;
@ -345,7 +346,7 @@ $cursor-text-value: text !default;
// Forward slash placed around everything to convince PhantomJS to read the value.
meta.foundation-version {
font-family: "/5.5.0/";
font-family: "/5.5.1/";
}
meta.foundation-mq-small {
@ -448,8 +449,7 @@ $cursor-text-value: text !default;
// Hide visually and from screen readers
.hide {
display: none !important;
visibility: hidden;
display: none;
}
// Hide visually and from screen readers, but maintain layout

34
assets/scss/foundation/components/_icon-bar.scss

@ -28,7 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
// We use this to set default opacity and cursor for disabled icons.
$icon-bar-disabled-opacity: 0.7 !default;
$icon-bar-disabled-cursor: $cursor-default-value !default;
$icon-bar-disabled-cursor: $cursor-disabled-value !default;
//
// @mixins
@ -200,6 +201,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
.item.disabled {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
pointer-events: none;
>* {
opacity: $icon-bar-disabled-opacity;
cursor: $icon-bar-disabled-cursor;
@ -233,7 +235,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
$image-width: $icon-bar-image-width,
$image-height: $icon-bar-image-height,
$base-style:true,
$disabled:false) {
$disabled:true) {
@include icon-bar-base();
@include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
@include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
@ -325,5 +327,33 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
}
}
}
&.seven-up {
.item { width: 14.28571%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
&.eight-up {
.item { width: 12.5%; }
&.vertical .item, &.small-vertical .item { width: auto; }
&.medium-vertical .item {
@media #{$medium-up} {
width: auto;
}
}
&.large-vertical .item {
@media #{$large-up} {
width: auto;
}
}
}
}
}

10
assets/scss/foundation/components/_range-slider.scss

@ -45,16 +45,14 @@ $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12
$range-slider-handle-cursor: pointer !default;
$range-slider-disabled-opacity: 0.7 !default;
$range-slider-disabled-cursor: $cursor-disabled-value !default;
//
// @mixins
//
@mixin range-slider-bar-base($vertical: false) {
display: block;
position: relative;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
margin: rem-calc(20 0);
-ms-touch-action: none;
@ -63,6 +61,10 @@ $range-slider-disabled-opacity: 0.7 !default;
display: inline-block;
width: $range-slider-vertical-bar-width;
height: $range-slider-vertical-bar-height;
} @else {
display: block;
width: $range-slider-bar-width;
height: $range-slider-bar-height;
}
}
@mixin range-slider-bar-style(
@ -74,7 +76,7 @@ $range-slider-disabled-opacity: 0.7 !default;
@if $radius == true { @include radius($range-slider-radius); }
@if $round == true { @include radius($range-slider-round); }
@if $disabled == true {
cursor: $cursor-default-value;
cursor: $range-slider-disabled-cursor;
opacity: $range-slider-disabled-opacity;
}
}

44
assets/scss/foundation/components/_reveal.scss

@ -43,21 +43,24 @@ $reveal-border-color: $steel !default;
$reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default;
// Set base z-index
$z-index-base: 1005;
//
// @mixins
//
// We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) {
//position: fixed;
position: absolute; // allows modal background to extend beyond window position
position: fixed;
// position: absolute; // allows modal background to extend beyond window position
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
background: $reveal-overlay-bg;
z-index: if( $include-z-index-value, 1004, auto );
z-index: if( $include-z-index-value, $z-index-base - 1, auto );
display: none;
#{$default-float}: 0;
}
@ -72,8 +75,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
visibility: hidden;
display: none;
position: absolute;
z-index: 1005;
width: 100vw;
z-index: $z-index-base;
width: 100%;
top:0;
border-radius: $border-radius;
#{$default-float}: 0;
@ -169,13 +172,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
@include reveal-modal-base;
@include reveal-modal-style(
$bg:$reveal-modal-bg,
$padding:$reveal-modal-padding,
$padding:$reveal-modal-padding * 1.5,
$border:true,
$box-shadow:true,
$radius:false,
$top-offset:$reveal-position-top
);
@include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
&.radius { @include reveal-modal-style($radius:true); }
&.round { @include reveal-modal-style($radius:$reveal-round); }
@ -186,7 +188,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
&.large { @include reveal-modal-base(false, 70%); }
&.xlarge { @include reveal-modal-base(false, 95%); }
&.full {
@include reveal-modal-base(false, 100vw);
@include reveal-modal-base(false, 100%);
top:0;
left:0;
height:100%;
@ -195,29 +197,13 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
max-width: none !important;
margin-left: 0 !important;
}
.#{$close-reveal-modal-class} { @include reveal-close; }
}
dialog {
@extend .#{$reveal-modal-class};
display: none;
&::backdrop, & + .backdrop {
@include reveal-bg(false);
// Modals pushed to back
&.toback {
z-index: $z-index-base - 2;
}
&[open]{
display: block;
}
}
// Reveal Print Styles: It should be invisible, adds no value being printed.
@media print {
dialog, .#{$reveal-modal-class} {
display: none;
background: $white !important;
}
.#{$close-reveal-modal-class} { @include reveal-close; }
}
}
}

12
assets/scss/foundation/components/_split-buttons.scss

@ -185,6 +185,18 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
&.radius span { @include side-radius($opposite-direction, $global-radius); }
&.round span { @include side-radius($opposite-direction, 1000px); }
&.no-pip{
span:before{ border-style:none; }
span:after{ border-style:none; }
span>i{
top: 50%;
display: block;
position: absolute;
left: 50%;
margin-left: -0.28889em;
margin-top: -0.48889em;
}
}
}
}

3
assets/scss/foundation/components/_sub-nav.scss

@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
display: block;
width: auto;
overflow: hidden;
margin: $sub-nav-list-margin;
margin-bottom: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top;
dt {
@ -72,7 +72,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
dd,
li {
float: $default-float;
display: inline;
margin-#{$default-float}: rem-calc(16);
margin-bottom: 0;
font-family: $sub-nav-font-family;

4
assets/scss/foundation/components/_tabs.scss

@ -37,7 +37,6 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
list-style: none;
float: $default-float;
> a {
outline: none;
display: block;
background: {
color: $tabs-navigation-bg-color;
@ -51,6 +50,9 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
color: $tabs-navigation-hover-bg-color;
}
}
&:focus{
outline: none;
}
}
&.active a {
background: {

4
assets/scss/foundation/components/_toolbar.scss

@ -3,6 +3,8 @@
// Licensed under MIT Open Source
// toolbar styles
@import "global";
.toolbar {
background: $oil;
width: 100%;
@ -67,4 +69,4 @@
display: block;
margin: 0 auto;
}
}
}

13
assets/scss/foundation/components/_top-bar.scss

@ -70,6 +70,7 @@ $topbar-menu-link-color: $white !default;
$topbar-menu-icon-color: $white !default;
$topbar-menu-link-color-toggled: $jumbo !default;
$topbar-menu-icon-color-toggled: $jumbo !default;
$topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon
// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
@ -200,6 +201,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
height: $topbar-height;
margin: 0;
font-size: $rem-base;
// @if $topbar-menu-icon-position == $default-float {float: $opposite-direction;}
h1, h2, h3, h4, p, span {
line-height: $topbar-height;
@ -218,7 +220,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
// Menu toggle button on small devices
.toggle-topbar {
position: absolute;
#{$opposite-direction}: 0;
#{$topbar-menu-icon-position}: 0;
top: 0;
a {
@ -460,7 +462,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.toggle-topbar { display: none; }
.title-area { float: $default-float; }
.name h1 a { width: auto; }
.name h1 a,
.name h2 a,
.name h3 a,
.name h4 a,
.name h5 a,
.name h6 a { width: auto; }
input,
.button,
@ -630,7 +637,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
.has-form {
background: $topbar-link-bg;
padding: 0 ($topbar-height / 3);
padding: 0 $topbar-link-padding;
height: $topbar-height;
}

63
assets/scss/foundation/components/_type.scss

@ -9,7 +9,7 @@ $include-html-type-classes: $include-html-classes !default;
// We use these to control header font styles
$header-font-family: $body-font-family !default;
$header-font-weight: $font-weight-normal !default;
$header-font-style: $font-weight-normal !default;
$header-font-style: normal !default;
$header-font-color: $jet !default;
$header-line-height: 1.4 !default;
$header-top-margin: .2rem !default;
@ -460,66 +460,5 @@ $align-class-breakpoints:
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
.print-only { display: none !important; }
@media print {
* {
background: transparent !important;
color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
}
}
}

90
assets/scss/foundation/components/_visibility.scss

@ -266,7 +266,7 @@ $visibility-breakpoint-queries:
display: table-row-group !important;
}
#{$visibility-table-row-list} {
display: table-row !important;
display: table-row;
}
#{$visibility-table-cell-list} {
display: table-cell !important;
@ -390,19 +390,85 @@ $visibility-breakpoint-queries:
th.hide-for-touch { display: table-cell !important; }
.touch th.show-for-touch { display: table-cell !important; }
// Only include these styles if you want them.
@if $include-print-styles {
/*
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
*/
.print-only { display: none !important; }
@media print {
* {
background: transparent !important;
color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
.show-for-print { display: block; }
.hide-for-print { display: none; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid $aluminum;
page-break-inside: avoid;
}
/* Print visibility */
@media print {
.show-for-print { display: block; }
.hide-for-print { display: none; }
thead { display: table-header-group; /* h5bp.com/t */ }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
tr,
img { page-break-inside: avoid; }
}
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
}
/* Print visibility */
@media print {
.show-for-print { display: block; }
.hide-for-print { display: none; }
table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
td.show-for-print { display: table-cell !important; }
th.show-for-print { display: table-cell !important; }
}
}

4
default.hbs

@ -16,8 +16,8 @@
{{! Styles - Foundation 5 included}}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic">
{{!-- styles for syntax highlighter you will find more here: https://github.com/isagalaev/highlight.js/tree/master/src/styles just change .min.css file name below --}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/monokai_sublime.min.css">
<link rel="stylesheet" href="{{asset "css/style.css"}}">

4
package.json

@ -1,8 +1,8 @@
{
"name": "Abc",
"version": "1.3.0",
"version": "1.3.1",
"devDependencies": {
"load-grunt-tasks": "~1.0.0",
"load-grunt-tasks": "~3.1.0",
"node-sass": "~2.0.0-beta",
"grunt-sass": "~0.17.0",
"grunt": "~0.4.5",

3
tag.hbs

@ -8,7 +8,7 @@
</a>
<i class="fa fa-bars js-bg-check js-main-menu-open right"></i>
</nav>
<header class="main-header js-blog-bg-image {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
<header class="main-header js-blog-bg-image {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}no-cover{{/if}}">
<div class="main-header-content">
{{#if @blog.logo}}
<div class="post-logo-container">
@ -29,5 +29,4 @@
</div>
{{! The tag below includes the post loop - partials/loop.hbs }}
{{> "loop"}}
</main>
Loading…
Cancel
Save