186 lines
4.5 KiB
SCSS
186 lines
4.5 KiB
SCSS
@import 'mixins.scss';
|
|
|
|
/* Atomic Unit
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$page-width: 784px;
|
|
|
|
$unit: 8px;
|
|
$margin: $unit * 5;
|
|
|
|
$unit-fourth: calc($unit / 4);
|
|
$unit-half: calc($unit / 2);
|
|
$unit-three-fourth: calc($unit / 4) * 3;
|
|
$unit-2x: $unit * 2;
|
|
$unit-3x: $unit * 3;
|
|
$unit-4x: $unit * 4;
|
|
$unit-5x: $unit * 5;
|
|
$unit-6x: $unit * 6;
|
|
$unit-8x: $unit * 8;
|
|
$unit-10x: $unit * 10;
|
|
$unit-12x: $unit * 12;
|
|
$unit-14x: $unit * 14;
|
|
$unit-16x: $unit * 16;
|
|
$unit-18x: $unit * 18;
|
|
$unit-20x: $unit * 20;
|
|
|
|
/* Corner Radius
|
|
* -------------------------------------------------------------------------- */
|
|
$corner-radius-xs: 4px; // $unit-half
|
|
$corner-radius-sm: 6px; // $unit-three-fourth
|
|
$corner-radius-md: 8px; // $unit
|
|
$corner-radius-lg: 10px; // $unit + 2px
|
|
$corner-radius-xl: 12px; // $unit * 1.5
|
|
$corner-radius-2xl: 16px; // $unit-2x
|
|
$corner-radius-3xl: 24px; // $unit-3x
|
|
$corner-radius-full: 999px; // Full rounded
|
|
|
|
/* Page properties
|
|
* -------------------------------------------------------------------------- */
|
|
$page-corner-radius: $corner-radius-md;
|
|
$image-corner-radius: $corner-radius-2xl;
|
|
$card-corner-radius: $corner-radius-3xl;
|
|
|
|
$page-top-margin: $unit-6x;
|
|
|
|
$page-vert-padding: $unit-6x;
|
|
$page-horz-padding: $unit-5x;
|
|
|
|
$page-fourth: calc(($page-width - $margin * 5) / 4);
|
|
$page-third: calc(($page-width - $margin * 5) / 3);
|
|
$page-half: calc(($page-fourth * 2) + $margin);
|
|
|
|
$card-height: $unit-14x;
|
|
$mention-padding: $unit-3x;
|
|
|
|
/* Typography
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$font-stack: 'Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
|
|
$font-unit: 18px;
|
|
$font-unit-mobile: 16px;
|
|
|
|
$font-size-extra-small: 0.75rem; // 12
|
|
$font-size-small: 0.875rem; // 14
|
|
$font-size: 1rem; // 18
|
|
$font-size-med: 1.25rem; // 20
|
|
$font-size-large: 1.4rem; // 22
|
|
$font-size-xlarge: 1.65rem; // 26
|
|
|
|
$font-weight: 400;
|
|
$font-weight-med: 500;
|
|
$font-weight-bold: 600;
|
|
|
|
$line-height: 1.3;
|
|
|
|
$letter-spacing: -0.02em;
|
|
|
|
/* Colors
|
|
* -------------------------------------------------------------------------- */
|
|
$grey-100: #ffffff;
|
|
$grey-97: #fafafa;
|
|
$grey-95: #f5f5f5;
|
|
$grey-90: #f7f7f7;
|
|
$grey-85: #ebebeb;
|
|
$grey-80: #e8e8e8;
|
|
$grey-70: #dfdfdf;
|
|
$grey-60: #cccccc;
|
|
$grey-5: #f9f9f9;
|
|
$grey-50: #b2b2b2;
|
|
$grey-40: #999999;
|
|
$grey-30: #808080;
|
|
$grey-20: #666666;
|
|
$grey-10: #4d4d4d;
|
|
$grey-00: #333333;
|
|
|
|
$red-90: #ff9d8f;
|
|
$red-80: #ff6a54;
|
|
$red-60: #e33d3d;
|
|
$red-50: #d33;
|
|
$red-40: #d31919;
|
|
$red-00: #3d0c0c;
|
|
|
|
$blue-60: #2e8bc0;
|
|
$blue-50: #1482c1;
|
|
$blue-40: #126fa8;
|
|
$blue-20: #0f5d8f;
|
|
$blue-10: #e6f3ff;
|
|
|
|
$yellow-90: #fff9e6;
|
|
$yellow-80: #ffeb99;
|
|
$yellow-70: #ffdd4d;
|
|
$yellow-60: #ffcc00;
|
|
$yellow-50: #f5c500;
|
|
$yellow-40: #e6b800;
|
|
$yellow-30: #cc9900;
|
|
$yellow-20: #996600;
|
|
$yellow-10: #664400;
|
|
|
|
$salmon-pink: #ffd5cf; // Desaturated salmon pink for hover states
|
|
|
|
$bg-color: #e8e8e8;
|
|
$page-color: #ffffff;
|
|
$card-color: #f7f7f7;
|
|
$card-color-hover: #f0f0f0;
|
|
|
|
$text-color: #4d4d4d;
|
|
$text-color-subdued: #666666;
|
|
$text-color-light: #b2b2b2;
|
|
|
|
$accent-color: #e33d3d;
|
|
$grey-color: #f0f0f0;
|
|
$primary-color: #1482c1; // Using labs color as primary
|
|
|
|
$image-border-color: rgba(0, 0, 0, 0.03);
|
|
|
|
/* Shadows
|
|
* -------------------------------------------------------------------------- */
|
|
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
$card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
|
|
/* Pill colors
|
|
* -------------------------------------------------------------------------- */
|
|
$work-bg: #ffcdc5;
|
|
$work-color: #d0290d;
|
|
$universe-bg: #ffebc5;
|
|
$universe-color: #b97d14;
|
|
$labs-bg: #c5eaff;
|
|
$labs-color: #1482c1;
|
|
|
|
$facebook-color: #3b5998;
|
|
$twitter-color: #55acee;
|
|
$instagram-color: #3f729b;
|
|
$pinterest-color: #bd061c;
|
|
$github-color: #6cc644;
|
|
$cmu-color: #fe6420;
|
|
$quip-color: #ae4830;
|
|
|
|
$twitter-button-color: #6cc0ff;
|
|
$twitter-text-color: #0f5f9b;
|
|
|
|
/* Images
|
|
* -------------------------------------------------------------------------- */
|
|
$corner-radius: $unit-2x;
|
|
$mobile-corner-radius: $unit-2x;
|
|
|
|
/* Inputs
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$input-background-color: #f7f7f7;
|
|
$input-background-color-hover: #f0f0f0;
|
|
$input-text-color: #666666;
|
|
$input-text-color-hover: #4d4d4d;
|
|
|
|
/* Avatar header
|
|
* -------------------------------------------------------------------------- */
|
|
$avatar-radius: 2rem;
|
|
$avatar-url: url('images/header.png');
|
|
|
|
/* Media queries breakpoints
|
|
* These needs to be revisited
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
$screen-sm-min: 768px;
|
|
$screen-md-min: 992px;
|
|
$screen-lg-min: 1200px;
|