mirror of
https://github.com/10h30/yeuchaybo-v6.git
synced 2026-07-11 10:46:19 +09:00
163 lines
3.6 KiB
SCSS
Executable File
163 lines
3.6 KiB
SCSS
Executable File
// Breakpoints.
|
|
$breakpoints: (
|
|
xxs: 384px,
|
|
xs: 512px,
|
|
sm: 768px,
|
|
md: 896px,
|
|
lg: 1152px,
|
|
xl: 1280px
|
|
);
|
|
|
|
// Colors.
|
|
$black: #013;
|
|
$dark: #2a3139;
|
|
$darker: #3f454c;
|
|
$body: #4d5968;
|
|
$medium: #90959f;
|
|
$gray: #c6cace;
|
|
$border: #eceef1;
|
|
$light: #f6f8fa;
|
|
$lighter: #fbfcfd;
|
|
$white: #fff;
|
|
$green: #54d169;
|
|
$one: #00c6ff;
|
|
$two: #0072ff;
|
|
$blue: #1e90ff;
|
|
$red: #ff6347;
|
|
$accent: mix($one, $two);
|
|
$overlay: rgba($dark, 0.5);
|
|
|
|
// Typography.
|
|
$font-family: "Nunito Sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif;
|
|
$font-serif: "Georgia", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times", "Source Serif Pro", serif;
|
|
$font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
|
|
$normal: 400;
|
|
$bolder: 600;
|
|
$bold: 700;
|
|
|
|
// Misc.
|
|
$site-radius: 3px;
|
|
$site-border: 1px solid $border;
|
|
$site-outline: 2px solid $border;
|
|
$site-shadow: 0 2rem 5rem -0.618rem rgba($dark, 0.0618);
|
|
|
|
// Columns
|
|
$margin: 2.564102564102564%;
|
|
$one-half: 48.71794871794871%;
|
|
$one-third: 31.62393162393162%;
|
|
$one-fifth: 17.94871794871794%;
|
|
$one-fourth: 23.07692307692307%;
|
|
$one-sixth: 14.52991452991453%;
|
|
$one-seventh: 12.08791208791208%;
|
|
$one-eighth: 10.25641025641025%;
|
|
$one-ninth: 8.831908831908832%;
|
|
$two-thirds: 65.81196581196582%;
|
|
$two-fourths: 48.71794871794871%;
|
|
$two-fifths: 38.46153846153846%;
|
|
$two-sixths: 31.62393162393162%;
|
|
$three-fourths: 74.35897435897436%;
|
|
$three-fifths: 58.97435897435897%;
|
|
$three-sixths: 48.71794871794871%;
|
|
$four-fifths: 79.48717948717948%;
|
|
$four-sixths: 65.81196581196582%;
|
|
$five-sixths: 82.90598290598291%;
|
|
|
|
// Media queries.
|
|
@mixin breakpoint( $breakpoint ) {
|
|
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
|
|
@media (min-width: #{ map-get($breakpoints, $breakpoint) }) {
|
|
|
|
@content;
|
|
}
|
|
|
|
} @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
|
|
|
|
@media (min-width: $breakpoint) {
|
|
|
|
@content;
|
|
}
|
|
|
|
} @else {
|
|
|
|
@warn "No value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Please make sure it is defined in `$breakpoints` map, or it is a valid number with supported unit of px, em or rem.";
|
|
}
|
|
}
|
|
|
|
// Clearfix.
|
|
@mixin clearfix {
|
|
clear: both;
|
|
|
|
&:before,
|
|
&:after {
|
|
display: block;
|
|
clear: both;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// Flexfix.
|
|
@mixin flexfix {
|
|
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Screen reader text.
|
|
@mixin screen-reader-text {
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
position: absolute !important;
|
|
width: 0.1rem;
|
|
height: 0.1rem;
|
|
border: 0;
|
|
background-color: $white;
|
|
}
|
|
|
|
// Transitions.
|
|
@mixin transition {
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
-o-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
// Gradients.
|
|
@mixin gradient {
|
|
background: $two;
|
|
background: -moz-linear-gradient(-45deg, $one 0%, $two 100%);
|
|
background: -webkit-linear-gradient(-45deg, $one 0%, $two 100%);
|
|
background: linear-gradient(135deg, $one 0%, $two 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr="$one", endcolorstr="$two", gradienttype=1);
|
|
}
|
|
|
|
// Overlays.
|
|
@mixin overlay {
|
|
|
|
&:before {
|
|
display: block !important;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $overlay;
|
|
content: "";
|
|
pointer-events: none;
|
|
|
|
@include transition;
|
|
}
|
|
}
|
|
|
|
// Box Shadow.
|
|
$box-shadow-blur-radius: 20px;
|
|
$box-shadow-opacity: 0.075;
|
|
$box-shadow: 0 16px 65px rgba(0,0,0,.18);
|