Bike!Bike! Website!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

153 lines
3.7 KiB

$sidebar-width: 0;
$zindex-base: 0;
$colour-1: #00ADEF; // blue
$colour-2: #EF57B4; // #DD57EF; // pink
$colour-3: #E6C74B; // yellow
$colour-4: #D89E59; // orange
$colour-5: #02CA9E; // green
$white: #FFFEFE;
$black: #333;
$gray: #E8E8E8;
$extra-light-gray: #F8F8F8;
$light-gray: #EEE;
$mid-gray: #888;
$red: #FF5A5F;
$blue: $colour-1;
$pink: $colour-2;
$yellow: $colour-3;
$orange: $colour-4;
$green: $colour-5;
$link-colour: darken($colour-1, 13%);
@mixin default-box-shadow($direction: top, $distance: 1, $inset: false, $additional-shadow: false) {
@if capable_of(box-shadow) {
$offset: 0.2em;
@if $direction == right or $direction == bottom {
$offset: -$offset;
}
@if $direction == left or $direction == right {
$offset: '#{$offset} 0';
} @else {
$offset: '0 #{$offset}';
}
@if $inset {
$offset: 'inset #{$offset}';
}
@if $additional-shadow {
$additional-shadow: ', #{$additional-shadow}';
} @else {
$additional-shadow: '';
}
@include _(box-shadow, #{$offset} 0.8em #{-0.2em * $distance} #000#{$additional-shadow});
}
}
@mixin monospace-font {
@include font(monospace);
@include font(monospace-bold);
}
@mixin translation-pointer {
@include keyframes(bouncy) {
from { transform: translateY(-0.25em); }
to { transform: translateY(0.25em); }
}
#lingua-franca-pointer {
$colour: $colour-5;
width: 0.6667em;
height: 1.25em;
background-color: $colour;
z-index: 1000;
margin-left: -0.5em;
margin-top: -2em;
@include _(mix-blend-mode, exclusion);
@include default-box-shadow(top, 2);
@include _(animation, bouncy 1s infinite alternate);
$twidth: 0.8em;
@include after {
content: '';
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-color: $colour transparent transparent;
border-width: $twidth $twidth 0;
top: 100%;
left: -.4em;
}
&.up {
margin-top: 2em;
@include after {
top: auto;
bottom: 100%;
border-color: transparent transparent $colour;
border-width: 0 $twidth $twidth;
}
}
}
}
@mixin text-stroke {
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
}
@mixin button {
position: relative;
display: inline-block;
color: $white;
background-color: $colour-1;
border: 0;
padding: 0.5em 1em;
font-size: 1.25em;
outline: 0;
border-bottom: 0.125em solid rgba(0, 0, 0, 0.15);
@include _(border-radius, 0.15em);
@include default-box-shadow(top, 2);
overflow: hidden;
cursor: pointer;
@include text-stroke;
@include before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0);
@include _(transition, background-color 150ms ease-in-out);
}
&:hover,
&:focus {
@include before {
background-color: rgba(0, 0, 0, 0.15);
}
}
&:active {
@include _(transform, scale(0.95));
@include after {
left: 120%;
}
}
&:disabled {
@include _(opacity, 0.5);
cursor: inherit;
@include before-and-after {
display: none;
}
}
}