ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-03-09 14:26:46 +01:00
commit b7977e1c28
6 changed files with 28081 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

107
sass/init/_colors.scss Normal file
View file

@ -0,0 +1,107 @@
// sass-lint:disable indentation, no-color-keywords
// Colors
//
// Use the `color()` function to add colors to CSS properties. To learn more,
// [read the Chroma documentation](http://johnalbin.github.io/chroma/).
//
// Markup: chroma.twig
//
// Weight: -1
//
// Style guide: sass.colors
// Define the default color scheme's color names.
$chroma: define-default-color-scheme('branding', 'The site\'s main colors. Can be used to define colors in other color schemes.');
$chroma: add-colors((
black: #000,
nearblack: ('black' lighten 20%), // #333
grey-dark: ('black' lighten 40%), // #666
'grey': ('black' lighten 60%), // #999
grey-light: ('black' lighten 80%), // #ccc
grey-extra-light: ('black' lighten 93.33%), // #eee
white: #fff,
blue: #0072b9,
red: #c00,
green: #43a808,
yellow: #fd0,
));
// Define color names for functional uses.
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');
$chroma: add-colors('functional', (
// Colors used in the main content area.
brand: 'nearblack',
brand-alt: 'grey',
brand-dark: 'grey-dark',
text: 'black',
text-bg: 'white',
link: 'black',
link-visited: 'black',
link-hover: 'brand',
link-active: 'red',
border: 'grey-light',
border-dark: 'nearblack',
autocomplete: 'text',
autocomplete-bg: 'text-bg',
autocomplete-select: 'white',
autocomplete-select-bg: 'blue',
body-bg: 'white',
header-bg: 'brand',
backdrop: 'grey-extra-light',
button: 'nearblack',
button-disabled: 'grey',
fieldset-summary: 'grey',
form-error: 'red',
mark-highlight: 'red',
mark-bg: 'yellow',
menu-active: 'text',
preview-bg: ('yellow' lighten 43%),
progress-bar: 'blue',
progress-bar-bg: 'grey-light',
progress-bar-border: 'grey-dark',
resizable-grippie: 'grey-extra-light',
row-stripe: 'white',
row-disabled: 'grey-light',
skip-link: 'white',
skip-link-bg: 'grey-dark',
status: 'green',
status-bg: (status lighten 62%),
status-highlight: text,
warning: text,
warning-bg: ('yellow' lighten 45%),
warning-border: 'yellow',
error: 'red',
error-bg: (error lighten 57%),
tabs-border: 'border',
tabs-bg: 'text-bg',
tab: 'text',
tab-text-shadow: 'white',
tab-bg: ('grey-light' lighten 6.66%),
tab-secondary: 'grey-dark',
table-drag: ('yellow' lighten 43%),
table-select: ('yellow' lighten 47%),
watermark: 'grey-extra-light',
headings: 'nearblack',
));
$chroma-active-scheme: 'functional';

215
sass/init/_variables.scss Normal file
View file

@ -0,0 +1,215 @@
// Variables
//
// Set variables for this site before a library sets its !default value.
//
// Style guide: sass.variables
// Browser support
//
// For older versions of browsers, some Sass relies on the `support-for()` to
// control whether extra CSS is needed to be output. The `support-for()`
// function and the `$support-for` variable are documented on the [support-for
// homepage](https://github.com/JohnAlbin/support-for).
//
// Style guide: sass.variables.support-for
// Support the same browsers as normalize.css v3.
// Possible keys: chrome, edge, firefox, ie, opera, safari, '*'
$support-for: (
// IE 9-11
ie: 9,
// The last 4 versions of all other browsers.
'*': -4,
);
// Font faces, stacks and sizes.
//
// Font styling and line heights are controlled by the several variables that
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
// These variable and mixins are documented on the [Typey
// homepage](https://github.com/jptaranto/typey).
//
// Style guide: sass.variables.typey
// The font size set on the root html element.
$base-font-size: 22px;
$base-font-size-2: 18px;
// The base line height determines the basic unit of vertical rhythm.
$base-line-height: 31px;
$base-line-height-2: 25px;
$base-multiplier: $base-font-size / $base-font-size-2;
$xxl-2: 34px * $base-multiplier;
$xl-2: 28px * $base-multiplier;
$l-2: 22px * $base-multiplier;
$m-2: 18px * $base-multiplier;
$s-2: 16px * $base-multiplier;
$xs-2: 14px * $base-multiplier;
// The font sizes in our type hierarchy as tee shirt sizes.
$font-size: (
xxl: 28px,
xl: 26px,
l: 24px,
m: $base-font-size,
s: 18px,
xs: 16px,
xxl-2: $xxl-2,
xl-2: $xl-2,
l-2: $l-2,
m-2: $m-2,
s-2: $s-2,
xs-2: $xs-2
);
// Typey allows you to alter font weights site-wide with this map.
$font-weight: (
bold: bold,
medium: 500,
normal: normal,
light: 300,
lighter: lighter,
);
// The following font family declarations use widely available fonts.
// A user's web browser will look at the comma-separated list and will
// attempt to use each font in turn until it finds one that is available
// on the user's computer. The final "generic" font (sans-serif, serif or
// monospace) hints at what type of font to use if the web browser doesn't
// find any of the fonts in the list.
// Serif font stacks.
$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
$times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
$georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
$garamond: 'Garamond Premier Pro', 'Adobe Garamond', Garamond, Baskerville, 'Times New Roman', serif;
// Sans-serif font stacks.
$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif;
$tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif;
$helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif;
$arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif;
$impact: Impact, 'Arial Narrow', Helvetica, sans-serif;
$lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
$futura: Futura, 'Century Gothic', AppleGothic, sans-serif;
// Monospace font stacks.
// For an explanation of why "sans-serif" is at the end of this list, see
// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
//$menlo: Menlo, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif;
$menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
// The font faces you specify in the $typefaces map can be used in the
// typeface() mixin.
$typefaces: (
body: (
font-family: $garamond,
),
headings: (
font-family: $futura,
),
monospace: (
font-family: $menlo,
),
compact: (
font-family: $impact,
weight: bold,
case: uppercase,
// We could also specify the following property:
// letter-spacing: .5px,
),
);
// Output a horizontal grid to help with debugging typography.
$typey-debug: false;
// The length unit in which to output font size and margin values.
// Supported values: px, em, rem.
$base-unit: 'rem';
// px fallbacks for rem units are needed for IE 8 and earlier.
$rem-fallback: false;
// Breakpoints
//
// Use the `respond-to()` mixin to use named breakpoints. Documentation is
// available in the [Breakpoint wiki
// pages](https://github.com/at-import/breakpoint/wiki/Respond-To).
//
// Style guide: sass.variables.breakpoints
@include add-breakpoint(xxxs, (333px, 'no-query' true));
@include add-breakpoint(xxs, (444px, 'no-query' true));
@include add-breakpoint(xs, (555px, 'no-query' true));
@include add-breakpoint(s, (666px, 'no-query' true));
@include add-breakpoint(m, (777px, 'no-query' true));
@include add-breakpoint(l, (888px, 'no-query' true));
@include add-breakpoint(xl, (999px, 'no-query' true));
@include add-breakpoint(xxl, (1111px));
@include add-breakpoint(xxxl, (1222px));
// Output media queries where the above px are converted to ems.
// @include breakpoint-set('to ems', true);
// Zen grids
//
// The default grid system is built using the Zen Grids sass module. Full
// documentation is available on the [Zen Grids website](http://zengrids.com/).
//
// Note: if you are more comfortable using another grid system, you can easily
// remove Zen Grids and its layouts.
//
// Style guide: sass.variables.zen-grids
// These are needed for all breakpoints on all layouts.
$zen-auto-include-grid-item-base: false;
$zen-box-sizing: universal-border-box;
// First we set the values we need for the mobile version of our layouts (the
// version that does _not_ appear inside any @media queries.)
$zen-columns: 1;
$zen-gutters: 20px;
// Then we set the values we need for each of the layouts at larger media query
// sizes. Note how the names of the layouts match the names of our breakpoints
// above. That allows a single zen-respond-to() to both use the proper item
// from $zen-layouts and from $breakpoints.
$zen-layouts: (
m: (
columns: 2,
// The gutters in the layouts are larger on mobile.
gutters: 40px,
),
xl: (
columns: 3,
gutters: 40px,
),
);
// See $include-rtl below.
$zen-rtl-selector: '[dir="rtl"]';
// Miscellaneous variables
//
// `$indent-amount` controls the amount lists, blockquotes and comments are indented.
//
// `$include-rtl` controls whether RTL styles are output. Rather than include a separate `*-rtl.css` file, Zen 6 uses Drupal 8's standard `[dir="rtl"]` selector for RTL language support.
//
// weight: 10
//
// Style guide: sass.variables.misc
$indent-amount: 2 * $base-font-size;
$include-rtl: false;
// Automatically turn off Zen Grids' RTL support if $include-rtl is false.
@if not $include-rtl {
$zen-rtl-selector: false !global;
}

21
sass/init/clearfix/_clearfix.scss Normal file
View file

@ -0,0 +1,21 @@
// clearfix()
//
// Allows the bottom of an element to extend to the bottom of all floated
// children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
//
// We use the micro-clearfix, optimized for use in `@extend` where fewer `&` is
// better.
//
// Style guide: sass.mixins.clearfix
@mixin clearfix() {
&::before {
content: '';
display: table;
}
&::after {
content: '';
display: table;
clear: both;
}
}

49
sass/init/image-url/_image-url.scss Normal file
View file

@ -0,0 +1,49 @@
// The relative path from the css directory to the sass directory.
$image-url-path-to-source: '../sass' !default;
// The relative path from the root sass directory to where your components usually lie.
$image-url-subdirectory: 'components' !default;
// image-url()
//
// If you include your images next to your component Sass files, you need to
// specify a url() to point from the generated CSS to the Sass source like this:
//
// ```css
// content: url(../sass/components/is-quite/long.svg);
// ```
//
// With the `image-url()` function the path to all your components is assumed to
// start with `../sass/components/` and you just need to give it the last, short
// bit of the path in your Sass code like this:
//
// ```scss
// content: image-url(is-quite/short.svg);
// ```
//
// If you want to point at an image that is not in the components sub-directory
// of your sass directory, you can override the default $subdirectory by
// passing it in as the first parameter of `image-url()` like this:
//
// ```scss
// content: image-url(base, grouping/blockquote.svg);
// ```
//
// which would output `url(../sass/base/grouping/blockquote.svg)`.
//
// $subdirectory = $image-url-subdirectory - Optional. The relative path from
// the root of your Sass source to the sub-directory where
// components usually lie.
// $path - Required. The path to the image relative to the
// `$subdirectory`.
// $path-to-source = $image-url-path-to-source - Optional. The relative path
// from the css build directory to the sass source directory.
//
// Style guide: sass.mixins.image-url
@function image-url($subdirectory, $path: null, $path-to-source: $image-url-path-to-source) {
// If only 1 parameter is given, its value is intended for the $path.
@if type-of($path) == 'null' {
$path: $subdirectory;
$subdirectory: $image-url-subdirectory;
}
@return url(unquote($path-to-source + '/' + $subdirectory + '/' + $path));
}

28
sass/init/rtl/_rtl.scss Normal file
View file

@ -0,0 +1,28 @@
$include-rtl: true !default;
// rtl()
//
// Includes Right-To-Left language support by adding a parent selector of
// `[dir="rtl"]`. Since the dir attribute is usually defined on the html element
// of a page, using this mixin on a ruleset that matches the html element won't
// work.
//
// Can be turned off globally by setting `$include-rtl: false;`.
//
// $selector = '[dir="rtl"]' - The RTL parent selector.
//
// Style guide: sass.mixins.rtl
@mixin rtl($selector: '[dir="rtl"]') {
@if $include-rtl {
@if & {
#{$selector} & {
@content;
}
}
@else {
#{$selector} {
@content;
}
}
}
}

44
sass/init/visually-hidden/_visually-hidden.scss Normal file
View file

@ -0,0 +1,44 @@
// sass-lint:disable no-important
// visually-hidden()
//
// Make an element visually hidden, but accessible to screen readers, etc.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
//
// Style guide: sass.mixins.visually-hidden
@mixin visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal;
}
// visually-hidden--off()
//
// Turns off the visually-hidden effect.
//
// Style guide: sass.mixins.visually-hidden--off
@mixin visually-hidden--off {
position: static !important;
clip: auto;
height: auto;
width: auto;
overflow: visible;
}
// visually-hidden--focusable()
//
// Makes an element visually hidden by default, but visible when receiving
// focus.
//
// Style guide: sass.mixins.visually-hidden--focusable
@mixin visually-hidden--focusable {
@include visually-hidden;
&:active,
&:focus {
@include visually-hidden--off;
}
}