aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src/sass')
-rw-r--r--demo/src/sass/components/buttons.scss16
-rw-r--r--demo/src/sass/components/header.scss11
-rw-r--r--demo/src/sass/components/icons.scss2
-rw-r--r--demo/src/sass/components/links.scss1
-rw-r--r--demo/src/sass/components/players.scss18
-rw-r--r--demo/src/sass/layout/core.scss3
-rw-r--r--demo/src/sass/lib/animation.scss14
-rw-r--r--demo/src/sass/lib/mixins.scss2
-rw-r--r--demo/src/sass/settings/colors.scss42
-rw-r--r--demo/src/sass/settings/cosmetic.scss2
-rw-r--r--demo/src/sass/settings/plyr.scss3
-rw-r--r--demo/src/sass/settings/spacing.scss2
-rw-r--r--demo/src/sass/type/base.scss3
-rw-r--r--demo/src/sass/type/headings.scss3
14 files changed, 73 insertions, 49 deletions
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 5ff6fc12..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
.button,
.button__count {
align-items: center;
- background: $color-button-background;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
- color: $color-button-text;
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
@@ -21,14 +19,16 @@
// Buttons
.button {
+ background: $color-button-background;
+ color: $color-button-text;
font-weight: $font-weight-bold;
- padding-left: $spacing-base;
- padding-right: $spacing-base;
+ padding-left: ($spacing-base * 1.25);
+ padding-right: ($spacing-base * 1.25);
transition: all 0.2s ease;
&:hover,
&:focus {
- color: $gray-dark;
+ background: $color-button-background-hover;
// Remove the underline/border
&::after {
@@ -65,12 +65,14 @@
// Count bubble
.button__count {
animation: fadein 0.2s ease;
- margin-left: ($spacing-base / 2);
+ background: $color-button-count-background;
+ color: $color-button-count-text;
+ margin-left: ($spacing-base * 0.75);
&::before {
border: $arrow-size solid transparent;
border-left-width: 0;
- border-right-color: $color-button-background;
+ border-right-color: $color-button-count-background;
content: '';
height: 0;
position: absolute;
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index eab2214e..fd014ead 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -6,6 +6,13 @@ header {
padding-bottom: $spacing-base;
text-align: center;
+ h1 span {
+ animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+ display: inline-block;
+ font-weight: $font-weight-light;
+ opacity: 0.5;
+ }
+
.call-to-action {
margin-top: ($spacing-base * 1.5);
}
@@ -15,5 +22,9 @@ header {
max-width: 360px;
padding-bottom: ($spacing-base * 2);
text-align: left;
+
+ p:first-of-type {
+ @include font-size($font-size-base + 1);
+ }
}
}
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index b2b353a6..ec9f8c5c 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -19,5 +19,5 @@ label svg {
a .icon,
.btn .icon {
- margin-right: floor($spacing-base / 3);
+ margin-right: ($spacing-base / 2);
}
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
a {
border-bottom: 1px dotted currentColor;
color: $color-link;
- font-weight: $font-weight-bold;
position: relative;
text-decoration: none;
transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d088a91d..d05e9849 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -2,16 +2,10 @@
// Examples
// ==========================================================================
-// For non supported browsers
-video {
- max-width: 100%;
- vertical-align: middle;
-}
-
// Example players
.plyr {
border-radius: $border-radius-base;
- box-shadow: 0 2px 5px rgba(#000, 0.2);
+ box-shadow: 0 2px 15px rgba(#000, 0.1);
margin: $spacing-base auto;
&.plyr--audio {
@@ -34,17 +28,9 @@ video {
// Style full supported player
.plyr__cite {
- display: none;
- margin-top: $spacing-base;
+ color: $color-gray-500;
.icon {
margin-right: ceil($spacing-base / 6);
}
}
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
- display: block;
-}
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
index 0501c1df..b9b2d4d5 100644
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@@ -35,11 +35,10 @@ main {
aside {
align-items: center;
background: #fff;
- color: $gray;
display: flex;
flex-shrink: 0;
justify-content: center;
- padding: ($spacing-base * 0.75);
+ padding: $spacing-base;
position: relative;
text-align: center;
text-shadow: none;
diff --git a/demo/src/sass/lib/animation.scss b/demo/src/sass/lib/animation.scss
index 3c14b0a7..64eb5595 100644
--- a/demo/src/sass/lib/animation.scss
+++ b/demo/src/sass/lib/animation.scss
@@ -11,3 +11,17 @@
opacity: 1;
}
}
+
+@keyframes shrinkHide {
+ 0% {
+ opacity: 0.5;
+ width: 38px;
+ }
+ 20% {
+ width: 45px;
+ }
+ 100% {
+ opacity: 0;
+ width: 0;
+ }
+}
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
index cdfcb87d..268157ae 100644
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@@ -36,7 +36,7 @@
@return #{$rem}rem;
}
-@mixin font-size($size: 16) {
+@mixin font-size($size: $font-size-base) {
font-size: $size * 1px; // Fallback in px
font-size: calculate-rem($size);
}
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 65d3f7b7..ecd55ad1 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,31 +2,41 @@
// Colors
// ==========================================================================
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
-$gray-light: #cbd0d3;
-$gray-lighter: #dbe3e8;
-$off-white: #f2f5f7;
+// Grayscale
+$color-gray-900: hsl(210, 15%, 16%);
+$color-gray-800: lighten($color-gray-900, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
-// Plyr
-$color-brand-primary: #1aafff;
+// Text
+$color-text: $color-gray-700;
+$color-headings: $color-brand-primary;
// Brands
$color-twitter: #4baaf4;
-$color-youtube: #cc181e;
-$color-vimeo: #19b7ed;
// Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
// Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-600;
// Focus
$tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
index d750efe2..84ff819f 100644
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -9,4 +9,4 @@ $arrow-size: 5px;
$border-radius-base: 4px;
// Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index ae6be636..edd917c4 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
// Other
$plyr-font-smoothing: true;
+// Colors
+$plyr-color-main: $color-brand-primary;
+
// Captions
$plyr-font-size-captions-base: $plyr-font-size-base;
$plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
index a19b0a95..085838fd 100644
--- a/demo/src/sass/settings/spacing.scss
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
// Colors
// ==========================================================================
-$spacing-base: 20px;
+$spacing-base: 16px;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
index 452298bd..736d8e89 100644
--- a/demo/src/sass/type/base.scss
+++ b/demo/src/sass/type/base.scss
@@ -14,7 +14,6 @@ body {
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
line-height: $line-height-base;
- text-shadow: 0 1px 1px rgba(#000, 0.15);
}
button,
@@ -26,7 +25,7 @@ textarea {
p,
small {
- margin: 0 0 $spacing-base;
+ margin: 0 0 ($spacing-base * 1.5);
}
small {
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
index 7039dd37..670619e8 100644
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@@ -4,8 +4,9 @@
h1 {
@include font-size($font-size-h1);
+ color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
- margin: 0 0 $spacing-base;
+ margin: 0 0 ($spacing-base * 1.5);
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 00:07:18 +0000