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.
120 lines
2.9 KiB
120 lines
2.9 KiB
3 years ago
|
$gray-0: #fafafa;
|
||
|
|
$gray-1: #f9f9f9;
|
||
|
|
$gray-2: #eee;
|
||
|
|
$gray-3: #ddd;
|
||
|
|
$gray-4: #ccc;
|
||
|
|
$gray-5: #bbb;
|
||
|
|
$gray-6: #878787;
|
||
|
|
$gray-7: #767676;
|
||
|
|
$gray-8: #515151;
|
||
|
|
$gray-9: #313131;
|
||
|
|
|
||
|
|
$white: #fff;
|
||
|
|
$red: #ac4142;
|
||
|
|
$orange: #d28445;
|
||
|
|
$yellow: #f4bf75;
|
||
|
|
$green: #90a959;
|
||
|
|
$cyan: #75b5aa;
|
||
|
|
$blue: #268bd2;
|
||
|
|
$brown: #8f5536;
|
||
|
|
|
||
|
|
//https://www.client9.com/css-system-font-stack-sans-serif-v3
|
||
|
|
$root-font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
|
||
|
|
|
||
|
|
// poole's variables
|
||
|
|
$root-font-size: 17px;
|
||
|
|
$root-font-weight: 400;
|
||
|
|
// golden ratio https://grtcalculator.com
|
||
|
|
// 18px @ 33 px, 20px @ 33 px ~ 1.667em
|
||
|
|
$root-line-height: 1.667em;
|
||
|
|
|
||
|
|
$body-color: $gray-8;
|
||
|
|
$body-bg: #fff;
|
||
|
|
|
||
|
|
$border-color: #e5e5e5;
|
||
|
|
|
||
|
|
$large-breakpoint: 38em;
|
||
|
|
$large-font-size: 19px;
|
||
|
|
$font-scale-dot7: .7rem;
|
||
|
|
$font-scale-dot8: .8rem;
|
||
|
|
//
|
||
|
|
|
||
|
|
// hyde-hyde
|
||
|
|
$small-device-font-size: $root-font-size;
|
||
|
|
$large-device-font-size: $large-font-size;
|
||
|
|
|
||
|
|
// https://www.client9.com/css-system-font-stack-monospace-v2
|
||
|
|
$code-font-family: "SFMono-Regular", "SF-Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", "Ubuntu Mono", "Courier New", Courier, monospace;
|
||
|
|
$code-font-size: .9rem;
|
||
|
|
$code-fence-font-size: .8rem;
|
||
|
|
//$code-color: #bf616a;
|
||
|
|
//$code-background-color: #f9f2f4;
|
||
|
|
$code-line-height: 1.4;
|
||
|
|
|
||
|
|
// links
|
||
|
|
$link-color: $blue;
|
||
|
|
$link-hover-color: $body-color;
|
||
|
|
|
||
|
|
// section
|
||
|
|
$section__title-font-size: 2.15rem;
|
||
|
|
|
||
|
|
// post
|
||
|
|
$post__subtitle-font-size: 1.5rem;
|
||
|
|
$gradient-color-1: #ff2c2c;
|
||
|
|
$gradient-color-2: #7a5e91;
|
||
|
|
|
||
|
|
// post meta
|
||
|
|
$meta-font-size: $font-scale-dot8;
|
||
|
|
$meta-font-weight: 300;
|
||
|
|
$meta-color: $gray-6;
|
||
|
|
|
||
|
|
// post tags
|
||
|
|
$tag-background-color: $gray-2;
|
||
|
|
$tag-color: #606570;
|
||
|
|
$tag-font-size: .667rem;
|
||
|
|
|
||
|
|
// list of posts
|
||
|
|
$item__date-color: #9a9a9a;
|
||
|
|
$item__date-font-size: 1rem;
|
||
|
|
$item__title-big-font-size: 1.785rem;
|
||
|
|
|
||
|
|
// heading
|
||
|
|
$heading-font-weight: 400;
|
||
|
|
$h1-font-size: 2.15rem;
|
||
|
|
$h1-line-height: 1.25;
|
||
|
|
$h2-font-size: 1.85rem;
|
||
|
|
$h3-font-size: 1.5rem;
|
||
|
|
$h4-font-size:1.3rem;
|
||
|
|
$h5-font-size:1rem;
|
||
|
|
|
||
|
|
|
||
|
|
// sidebar
|
||
|
|
$sidebar-color: #300030;
|
||
|
|
$sidebar-width: 16rem;
|
||
|
|
$site__title-font-size: 2.5rem;
|
||
|
|
$copyright-font-size: $font-scale-dot7;
|
||
|
|
|
||
|
|
// content
|
||
|
|
$content-max-width: 100%; // @ ~70 CPL
|
||
|
|
$content-margin-left: $sidebar-width + 2rem;
|
||
|
|
$content-margin-right: 2rem;
|
||
|
|
|
||
|
|
// navigation
|
||
|
|
$navigation-color: #c2255c;
|
||
|
|
|
||
|
|
// portfolio
|
||
|
|
$project__title-font-size: $h2-font-size;
|
||
|
|
$project__subtitle-font-size-big: $h3-font-size;
|
||
|
|
$project__subtitle-font-size-small: $h4-font-size;
|
||
|
|
$project__subtitle-font-style: italic;
|
||
|
|
$project__subtitle-color: #778492;
|
||
|
|
$ribbon-color: #276582;
|
||
|
|
$ribbon-background-color: #479fc8;
|
||
|
|
|
||
|
|
// blog
|
||
|
|
$blog__title-font-size: $project__title-font-size;
|
||
|
|
$blog__subtitle-font-size-big: $project__subtitle-font-size-big;
|
||
|
|
$blog__subtitle-font-size-small: $project__subtitle-font-size-small;
|
||
|
|
$blog__subtitle-font-style: $project__subtitle-font-style;
|
||
|
|
$blog__subtitle-color: $project__subtitle-color;
|