mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
b42580d8cc
* Fix building with Jekyll on Ruby 3.4 Ruby 3.4 removed several standard library packages, so they have to be installed as gems instead. This also updates Jekyll to use a version that's supported in Ruby 3.4. The minimum required Ruby version is now 3.2. * Fix Sass deprecations This allows the website to build on Ruby 3.4.0 + Jekyll 4.4.1. More information: - https://sass-lang.com/blog/import-is-deprecated/
105 lines
2.6 KiB
SCSS
105 lines
2.6 KiB
SCSS
@use "sass:color";
|
|
@use "sass:list";
|
|
@use "sass:map";
|
|
//
|
|
// Functions
|
|
//
|
|
@function offset-hue($color, $offset, $i: 1) {
|
|
@return color.adjust($color, $hue: $offset * $i);
|
|
}
|
|
|
|
/**
|
|
* From a list $sections (video, foundation, outstanding, _2d),
|
|
* it will return a map of sections with the $base-category being assigned with
|
|
* a specific $base-color, and will $offset each section by n degrees.
|
|
*/
|
|
@function generate-sections($sections, $base-category, $base-color, $offset) {
|
|
$return-value: ();
|
|
$base-category-i: list.index($sections, $base-category);
|
|
@each $section in $sections {
|
|
$i: list.index($sections, $section);
|
|
$diff: $i - $base-category-i;
|
|
$base-color-top: offset-hue($base-color, $offset, $diff);
|
|
$base-color-bottom: color.adjust(
|
|
offset-hue($base-color, $offset, $diff + 1),
|
|
$lightness: -10%
|
|
);
|
|
$color-top: color.adjust($base-color-top, $saturation: -10%);
|
|
$color-bottom: color.adjust($base-color-bottom, $saturation: -10%);
|
|
$color-top-muted: color.adjust($base-color-top, $saturation: -25%);
|
|
$color-bottom-muted: color.adjust($base-color-bottom, $saturation: -25%);
|
|
$color-selection: color.adjust($base-color-bottom, $saturation: -30%);
|
|
$color-selection--light: color.adjust(
|
|
$base-color-bottom,
|
|
$lightness: 40%,
|
|
$saturation: 30%
|
|
);
|
|
$color-invert: color.adjust(
|
|
$base-color-top,
|
|
$hue: 180deg,
|
|
$lightness: 0%,
|
|
$saturation: 30%
|
|
);
|
|
$color-highlight: color.adjust(
|
|
$base-color-top,
|
|
$lightness: 0%,
|
|
$saturation: 30%
|
|
);
|
|
$color-highlight--dark: color.adjust(
|
|
$base-color-top,
|
|
$lightness: 30%,
|
|
$saturation: 30%
|
|
);
|
|
$color-invert-highlight: color.adjust(
|
|
$color-invert,
|
|
$lightness: 20%,
|
|
$saturation: 30%
|
|
);
|
|
$return-value: map.merge(
|
|
$return-value,
|
|
(
|
|
#{$section}: (
|
|
color-top: $color-top,
|
|
color-bottom: $color-bottom,
|
|
color-top-muted: $color-top-muted,
|
|
color-bottom-muted: $color-bottom-muted,
|
|
color-selection: $color-selection,
|
|
color-selection--light: $color-selection--light,
|
|
color-invert: $color-invert,
|
|
color-highlight: $color-highlight,
|
|
color-highlight--dark: $color-highlight--dark,
|
|
color-invert-highlight: $color-invert-highlight,
|
|
)
|
|
)
|
|
);
|
|
}
|
|
@return $return-value;
|
|
}
|
|
|
|
@function desktop-mobile($sizes...) {
|
|
@return ("desktop": list.nth($sizes, 1), "mobile": list.nth($sizes, 2));
|
|
}
|
|
|
|
@function get-desktop($value) {
|
|
@return map.get($value, "desktop");
|
|
}
|
|
|
|
@function get-mobile($value) {
|
|
@return map.get($value, "mobile");
|
|
}
|
|
|
|
//
|
|
// Mixins
|
|
//
|
|
@mixin is-dark() {
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin is-light() {
|
|
@media screen and (prefers-color-scheme: light) {
|
|
@content;
|
|
}
|
|
}
|