blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 23:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(css): rename functions from 'fixit-' to 'fi-' for consistency

Browse Source
This commit is contained in:
Cell
2026-04-19 05:07:15 +08:00
parent 9ada69ed71
commit b406a569f8
52 changed files with 410 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/copilot-instructions.md
+1 -1
View File
@@ -83,7 +83,7 @@ FixIt/
```scss
.element {
color: var(#{$rootPrefix}global-font-color);
color: fi-var(global-font-color);
}
```
assets/css/_core/_base.scss
+12 -12
View File
@@ -1,11 +1,11 @@
@import "../../lib/normalize/normalize";
html {
font-family: fixit-var(global-font-family);
font-weight: fixit-var(global-font-weight);
font-family: fi-var(global-font-family);
font-weight: fi-var(global-font-weight);
font-display: swap;
font-size: fixit-var(global-font-size);
line-height: fixit-var(global-line-height);
font-size: fi-var(global-font-size);
line-height: fi-var(global-line-height);
width: 100%;
scroll-behavior: smooth;
overflow: auto;
@@ -22,12 +22,12 @@ html {
}
::selection {
background-color: fixit-var(selection-color);
background-color: fi-var(selection-color);
}
body {
background-color: fixit-var(global-background-color);
color: fixit-var(global-font-color);
background-color: fi-var(global-background-color);
color: fi-var(global-font-color);
@include overflow-wrap(break-word);
}
@@ -85,11 +85,11 @@ details {
%code {
padding: 0.2em 0.4em;
margin: 0;
font-size: fixit-var(code-font-size);
line-height: fixit-var(code-font-size);
font-family: fixit-var(code-font-family);
color: fixit-var(code-color);
background-color: fixit-var(code-inline-background-color);
font-size: fi-var(code-font-size);
line-height: fi-var(code-font-size);
font-family: fi-var(code-font-family);
color: fi-var(code-color);
background-color: fi-var(code-inline-background-color);
text-decoration: inherit;
@include border-radius;
@include overflow-wrap(break-word);
assets/css/_core/_common.scss
+1 -1
View File
@@ -41,7 +41,7 @@
@each $color, $value in $theme-colors {
.text-#{$color} {
color: fixit-var(#{$color}) !important;
color: fi-var(#{$color}) !important;
}
}
assets/css/_core/_function/_rgba.scss
+3 -3
View File
@@ -1,8 +1,8 @@
/// Build an rgba-like color from any source color expression.
/// @param {Color | String} $color - Source color, supports CSS vars such as fixit-var(secondary).
/// @param {Color | String} $color - Source color, supports CSS vars such as fi-var(secondary).
/// @param {Number} $alpha [1] - Alpha channel value in range 0..1.
/// @example
/// color: fixit-rgba(fixit-var(secondary), 0.2);
@function fixit-rgba($color, $alpha: 1) {
/// color: fi-rgba(fi-var(secondary), 0.2);
@function fi-rgba($color, $alpha: 1) {
@return unquote("rgb(from #{$color} r g b / #{$alpha})");
}
assets/css/_core/_function/_var.scss
+3 -3
View File
@@ -3,9 +3,9 @@
/// @param {*} $fallback - Optional fallback value
/// @return {String} - Complete CSS variable reference
/// @example
/// color: fixit-var(global-font-color);
/// background: fixit-var(custom-bg, #fff);
@function fixit-var($name, $fallback: null) {
/// color: fi-var(global-font-color);
/// background: fi-var(custom-bg, #fff);
@function fi-var($name, $fallback: null) {
@if $fallback {
@return var(#{$rootPrefix}#{$name}, #{$fallback});
} @else {
assets/css/_core/_layout/_breadcrumb.scss
+6 -6
View File
@@ -1,7 +1,7 @@
.breadcrumb-container {
padding-inline: 1rem;
font-size: 0.75rem;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
display: flex;
@include z-index(sticky);
@@ -28,7 +28,7 @@
@include media('sm', 'up') {
[data-header-desktop='sticky'] &,
[data-header-desktop='auto'] & {
top: fixit-var(header-height);
top: fi-var(header-height);
}
[data-header-desktop='auto']:has(#header-desktop.header__fadeOutUp) & {
top: 0px;
@@ -38,7 +38,7 @@
@include media('xs') {
[data-header-mobile='sticky'] &,
[data-header-mobile='auto'] & {
top: fixit-var(header-height);
top: fi-var(header-height);
}
[data-header-mobile='auto']:has(#header-mobile.header__fadeOutUp) & {
top: 0px;
@@ -56,7 +56,7 @@
padding: 0.5rem;
margin: 0 auto;
list-style: none;
box-shadow: inset 0 -1px 0 fixit-var(global-border-color);
box-shadow: inset 0 -1px 0 fi-var(global-border-color);
overflow-x: auto;
overflow-y: hidden;
@extend %page-style;
@@ -69,11 +69,11 @@
content: attr(data-separator);
display: inline-block;
padding-inline: 0.5rem;
color: fixit-var(global-border-color);
color: fi-var(global-border-color);
}
&.active {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
}
assets/css/_core/_layout/_header.scss
+37 -37
View File
@@ -3,7 +3,7 @@ $header-box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.125), rgba(255, 255,
header {
width: 100%;
transition: box-shadow 0.3s ease;
background-color: fixit-var(header-background-color);
background-color: fi-var(header-background-color);
@include z-index(fixed);
&:hover {
@@ -19,7 +19,7 @@ header {
background-color: transparent;
backdrop-filter: saturate(1.2) blur(10px);
background-size: 4px 4px;
background-image: radial-gradient(transparent 1px, fixit-var(header-background-color) 1px);
background-image: radial-gradient(transparent 1px, fi-var(header-background-color) 1px);
}
}
@@ -67,8 +67,8 @@ header {
}
.header-title {
font-size: fixit-var(header-title-font-size);
font-family: fixit-var(header-title-font-family);
font-size: fi-var(header-title-font-size);
font-family: fi-var(header-title-font-family);
font-weight: bold;
margin-inline-end: 0.25rem;
padding-inline: 0.25rem;
@@ -83,7 +83,7 @@ header {
height: 1.5em;
width: auto;
vertical-align: top;
transform: translateY(calc(#{fixit-var(header-height)} / 2 - 50%));
transform: translateY(calc(#{fi-var(header-height)} / 2 - 50%));
}
.header-title-text {
@@ -105,7 +105,7 @@ header {
list-style: none;
margin: 0.25rem 0.5rem;
height: 1px;
background-color: fixit-var(menu-border-color);
background-color: fi-var(menu-border-color);
}
.menu-item {
@@ -114,7 +114,7 @@ header {
.dropdown-icon {
margin-left: 0.25rem;
font-size: .875em;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
&.open::before {
content: "\f078";
@@ -125,7 +125,7 @@ header {
>.menu-link,
>.nested-item>.menu-link {
font-weight: bold;
color: fixit-var(menu-active-color);
color: fi-var(menu-active-color);
}
}
@@ -190,13 +190,13 @@ header {
.open &,
&.mobile {
input {
color: fixit-var(global-font-color);
background-color: fixit-var(search-background-color);
color: fi-var(global-font-color);
background-color: fi-var(search-background-color);
padding: 0 2rem 0 2rem;
}
.search-button {
color: fixit-var(global-font-tertiary-color);
color: fi-var(global-font-tertiary-color);
}
.search-clear:hover {
@@ -237,8 +237,8 @@ header {
display: block;
position: sticky;
top: 0;
height: fixit-var(header-height);
line-height: fixit-var(header-height);
height: fi-var(header-height);
line-height: fi-var(header-height);
box-sizing: border-box;
[data-header-desktop='normal'] & {
@@ -255,10 +255,10 @@ header {
height: 100%;
&[data-github-corner='left'] {
padding-inline-start: fixit-var(header-height);
padding-inline-start: fi-var(header-height);
}
&[data-github-corner='right'] {
padding-inline-end: fixit-var(header-height);
padding-inline-end: fi-var(header-height);
}
.header-title {
@@ -287,7 +287,7 @@ header {
width: 0;
margin: 18.5px 0.5rem;
padding: 0;
border-left: 1.5px solid fixit-var(global-border-color);
border-left: 1.5px solid fi-var(global-border-color);
}
}
@@ -296,9 +296,9 @@ header {
margin: 0;
padding: 0.25rem 0;
display: none;
top: calc(#{fixit-var(header-height)} - 0.75rem);
border: 1px solid fixit-var(menu-border-color);
background-color: fixit-var(header-background-color);
top: calc(#{fi-var(header-height)} - 0.75rem);
border: 1px solid fi-var(menu-border-color);
background-color: fi-var(header-background-color);
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain;
@@ -307,8 +307,8 @@ header {
box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
.menu-item {
height: fixit-var(submenu-height);
line-height: fixit-var(submenu-height);
height: fi-var(submenu-height);
line-height: fi-var(submenu-height);
max-width: 15rem;
white-space: nowrap;
text-overflow: ellipsis;
@@ -336,8 +336,8 @@ header {
#header-mobile {
position: sticky;
top: 0;
min-height: fixit-var(header-height);
line-height: fixit-var(header-height);
min-height: fi-var(header-height);
line-height: fi-var(header-height);
[data-header-mobile='normal'] & {
position: static;
@@ -366,7 +366,7 @@ header {
span {
display: block;
background-color: fixit-var(global-font-color);
background-color: fi-var(global-font-color);
width: 20px;
height: 2px;
transition: all 0.3s ease-in-out;
@@ -394,8 +394,8 @@ header {
}
.menu {
background-color: fixit-var(header-background-color);
border-top: 2px solid fixit-var(global-border-color-light);
background-color: fi-var(header-background-color);
border-top: 2px solid fi-var(global-border-color-light);
display: none;
overflow-y: auto;
overscroll-behavior: contain;
@@ -412,7 +412,7 @@ header {
line-height: 2.5rem;
position: sticky;
top: 0;
background-color: fixit-var(header-background-color);
background-color: fi-var(header-background-color);
@include z-index(sticky);
}
@@ -476,7 +476,7 @@ header {
bottom: 0;
line-height: 2.5rem;
padding: 0 1rem;
background-color: fixit-var(header-background-color);
background-color: fi-var(header-background-color);
.menu-system-item {
padding-inline: 0.5rem;
@@ -517,7 +517,7 @@ header {
&.open {
.header-wrapper {
margin-top: calc(#{fixit-var(header-height)} * -1);
margin-top: calc(#{fi-var(header-height)} * -1);
}
.menu {
@@ -541,7 +541,7 @@ header {
.search-dropdown {
position: fixed;
top: fixit-var(header-height);
top: fi-var(header-height);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
@include z-index(fixed);
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
@@ -562,13 +562,13 @@ header {
.dropdown-menu {
right: 0 !important;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
.suggestions {
overflow-y: auto;
overscroll-behavior: contain;
// 40px is the height of the search-footer
max-height: calc(100dvh - #{fixit-var(header-height)} - 40px);
max-height: calc(100dvh - #{fi-var(header-height)} - 40px);
.suggestion {
padding: 0.75rem 1rem;
@@ -592,7 +592,7 @@ header {
.suggestion-date {
font-size: 0.875rem;
flex-shrink: 0;
color: fixit-var(global-font-tertiary-color);
color: fi-var(global-font-tertiary-color);
}
}
@@ -604,17 +604,17 @@ header {
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
@include overflow-wrap(break-word);
}
em {
font-style: normal;
background-color: fixit-var(selection-color);
background-color: fi-var(selection-color);
}
&.cursor {
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
}
&:hover {
@@ -636,7 +636,7 @@ header {
padding: 0.5rem 1rem;
font-size: 0.875rem;
text-align: right;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
@include link(false, false);
}
}
assets/css/_core/_layout/_pagination.scss
+4 -4
View File
@@ -10,7 +10,7 @@
a {
font-size: 0.8rem;
color: fixit-var(pagination-link-color);
color: fi-var(pagination-link-color);
letter-spacing: 0.1rem;
font-weight: 700;
padding: 5px 5px;
@@ -30,7 +30,7 @@
}
&:hover a {
color: fixit-var(pagination-link-hover-color);
color: fi-var(pagination-link-hover-color);
}
&::before,
@@ -39,7 +39,7 @@
content: '';
width: 0;
height: 3px;
background: fixit-var(pagination-link-hover-color);
background: fi-var(pagination-link-hover-color);
bottom: 0px;
transition: 0.3s;
}
@@ -61,7 +61,7 @@
&.active {
a {
color: fixit-var(pagination-link-hover-color);
color: fi-var(pagination-link-hover-color);
}
&::before,
assets/css/_core/_mixin/_border-radius.scss
+2 -2
View File
@@ -7,8 +7,8 @@
/// @include border-radius(top);
/// @include border-radius(top, 10px);
/// @include border-radius(10px 20px 10px 20px);
@mixin border-radius($value: fixit-var(global-border-radius), $radius: null) {
$r: if($radius, $radius, fixit-var(global-border-radius));
@mixin border-radius($value: fi-var(global-border-radius), $radius: null) {
$r: if($radius, $radius, fi-var(global-border-radius));
@if $value == full {
border-radius: calc(infinity * 1px);
assets/css/_core/_mixin/_box-shadow.scss
+1 -1
View File
@@ -13,7 +13,7 @@
@if $when == always {
box-shadow: $shadow;
} @else if $when == hover {
transition: box-shadow 0.3s fixit-var(bezier);
transition: box-shadow 0.3s fi-var(bezier);
&:hover {
box-shadow: $shadow;
assets/css/_core/_mixin/_compatibility.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@mixin placeholder($color: fixit-var(global-font-tertiary-color)) {
@mixin placeholder($color: fi-var(global-font-tertiary-color)) {
input::-webkit-input-placeholder {
color: $color;
}
assets/css/_core/_mixin/_link-guard.scss
+10 -10
View File
@@ -2,7 +2,7 @@
/// Keep this as the single source of truth for both link page card and guard dialog body.
@mixin link-guard-content {
padding: 1.5rem;
border: 1px solid fixit-var(global-border-color-light);
border: 1px solid fi-var(global-border-color-light);
background: light-dark(#fff, #1d2230);
box-shadow: 0 1rem 2rem light-dark(rgba(15, 23, 42, 0.18), rgba(0, 0, 0, 0.35));
@include border-radius(1rem);
@@ -30,8 +30,8 @@
flex: 1 1 auto;
min-width: 0;
background: light-dark(#f8fafc, #171b25);
border: 1px solid fixit-var(global-border-color);
font-family: fixit-var(code-font-family);
border: 1px solid fi-var(global-border-color);
font-family: fi-var(code-font-family);
font-size: 0.875rem;
line-height: 1rem;
overflow: hidden;
@@ -49,15 +49,15 @@
padding: 0.5rem;
line-height: 1;
background: light-dark(#f8fafc, #171b25);
border: 1px solid fixit-var(global-border-color);
color: fixit-var(global-font-secondary-color);
border: 1px solid fi-var(global-border-color);
color: fi-var(global-font-secondary-color);
user-select: none;
@include border-radius;
&[data-copied] .fa-clone {
--fa: "\f00c";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
}
@@ -71,17 +71,17 @@
.cancel-btn,
.confirm-btn {
padding: 0.5rem 0.875rem;
border: 1px solid fixit-var(global-border-color-light);
border: 1px solid fi-var(global-border-color-light);
background: light-dark(#f6f8fa, #2a313c);
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
user-select: none;
@include border-radius;
}
.confirm-btn {
color: #fff;
background-color: fixit-var(primary);
border-color: fixit-var(primary);
background-color: fi-var(primary);
border-color: fi-var(primary);
}
@include media('xs') {
assets/css/_core/_mixin/_loading.scss
+1 -1
View File
@@ -9,7 +9,7 @@
backdrop-filter: blur(1rem);
background-position: center;
background-repeat: no-repeat;
background-image: fixit-var(loading-img);
background-image: fi-var(loading-img);
background-size: 60px;
@include z-index(loading);
}
assets/css/_core/_mixin/_scrollbar-width.scss
+1 -1
View File
@@ -1,5 +1,5 @@
@mixin scrollbar-width($width: thin, $widthLegacy: 12px) {
@include set-fixit-vars((
@include set-fi-vars((
scrollbar-width: $width,
scrollbar-width-legacy: $widthLegacy,
));
assets/css/_core/_mixin/_sticky-top.scss
+2 -2
View File
@@ -8,8 +8,8 @@
/// - Desktop auto hidden: reset to 0 when the auto header has faded out.
/// - Desktop/mobile sticky: offset by header height plus breadcrumb height.
@mixin sticky-top-offset($transition: true) {
$sticky-top-bar-offset: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)});
$base-top-offset: fixit-var(breadcrumb-height, 0px);
$sticky-top-bar-offset: calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)});
$base-top-offset: fi-var(breadcrumb-height, 0px);
// Base offset reserved for the breadcrumb bar.
top: $base-top-offset;
assets/css/_core/_mixin/_task-list.scss
+5 -5
View File
@@ -4,14 +4,14 @@
/// Set task list icon color and allow custom styles via @content
/// @param {Color | Null} $color - Icon color (optional)
/// Usage:
/// @include task-icon(fixit-var(secondary)) {
/// @include task-icon(fi-var(secondary)) {
/// opacity: 0.8;
/// }
@mixin task-icon($color: null) {
> i {
// Set icon color (optional)
@if $color != null {
@include set-fixit-var(task-icon-color, $color);
@include set-fi-var(task-icon-color, $color);
}
@content;
}
@@ -20,14 +20,14 @@
/// Set task list text color and allow custom styles via @content
/// @param {Color | Null} $color - Text color (optional)
/// Usage:
/// @include task-text(fixit-var(secondary)) {
/// text-decoration: line-through fixit-var(secondary);
/// @include task-text(fi-var(secondary)) {
/// text-decoration: line-through fi-var(secondary);
/// }
@mixin task-text($color: null) {
> span {
// Set text color (optional)
@if $color != null {
@include set-fixit-var(task-text-color, $color);
@include set-fi-var(task-text-color, $color);
}
@content;
}
assets/css/_core/_mixin/_theme-vars.scss
+4 -4
View File
@@ -6,19 +6,19 @@
/// @param {String} $name - CSS variable name (without prefix)
/// @param {*} $value - Variable value
/// @example
/// @include set-fixit-var(custom-color, #ff0000);
@mixin set-fixit-var($name, $value) {
/// @include set-fi-var(custom-color, #ff0000);
@mixin set-fi-var($name, $value) {
#{$rootPrefix}#{$name}: #{$value};
}
/// Batch set CSS variables
/// @param {Map} $vars - Variable map, key is CSS variable name (without prefix), value is variable value
/// @example
/// @include set-fixit-vars((
/// @include set-fi-vars((
/// custom-color: #ff0000,
/// custom-bg: #00ff00,
/// ));
@mixin set-fixit-vars($vars) {
@mixin set-fi-vars($vars) {
@each $name, $value in $vars {
#{$rootPrefix}#{$name}: #{$value};
}
assets/css/_core/_root.scss
+3 -3
View File
@@ -29,7 +29,7 @@
// ----------------------------------------
// Theme-Independent Variables
// ----------------------------------------
@include set-fixit-vars((
@include set-fi-vars((
// Global Typography
global-font-family: $global-font-family,
global-font-size: $global-font-size,
@@ -67,11 +67,11 @@
bezier: cubic-bezier(.4, 0, .2, 1),
// Other utilities
divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
divider-edge-weak: linear-gradient(to right, transparent, fi-var(divider-bg, #d0d0d5), transparent),
));
&:has(.breadcrumb-container.sticky) {
@include set-fixit-var(breadcrumb-height, 2.5rem);
@include set-fi-var(breadcrumb-height, 2.5rem);
}
}
assets/css/_core/_widgets/_cell-tooltip.scss
+1 -1
View File
@@ -1,7 +1,7 @@
body {
.cell-tooltip {
--tooltip-bg: light-dark(#ffffff, #3d444d);
--tooltip-color: fixit-var(global-font-color);
--tooltip-color: fi-var(global-font-color);
--tooltip-shadow-color: light-dark(rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.18));
}
}
assets/css/_core/_widgets/_cookieconsent.scss
+2 -2
View File
@@ -1,7 +1,7 @@
.cc-window.cc-banner {
.cc-btn {
color: fixit-var(global-font-color);
background-color: fixit-var(global-background-color);
color: fi-var(global-font-color);
background-color: fi-var(global-background-color);
&:hover,
&:focus {
assets/css/_core/_widgets/_details.scss
+2 -2
View File
@@ -8,11 +8,11 @@
}
i.details-icon {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
transition: all 0.2s ease;
&:hover {
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
}
}
}
assets/css/_core/_widgets/_fixed-button.scss
+10 -10
View File
@@ -12,7 +12,7 @@
font-size: 1rem;
line-height: 1.5rem;
padding: 0.5rem 0.625rem;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
transition: color 0.4s ease;
background-color: light-dark(#f1f1f1, #1e1e1f);
@include border-radius(full);
@@ -21,7 +21,7 @@
&:active,
&:focus {
outline: none;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
}
@include media('print') {
@@ -32,11 +32,11 @@
.back-to-top {
overflow: hidden;
position: relative;
@include set-fixit-vars((
@include set-fi-vars((
// Ring stroke width
b2t-stroke: 0.5rem,
// Progress color
b2t-prog: light-dark(fixit-var(success), fixit-var(global-font-color)),
b2t-prog: light-dark(fi-var(success), fi-var(global-font-color)),
// dasharray = circumference = 2πr
// dashoffset = circumference * (1 - scrollPercent / 100)
b2t-dasharray: 314.15
@@ -55,18 +55,18 @@
.bg {
fill: none;
stroke: fixit-var(global-border-color-light);
stroke-width: fixit-var(b2t-stroke);
stroke: fi-var(global-border-color-light);
stroke-width: fi-var(b2t-stroke);
}
// Progress ring
.progress {
fill: none;
stroke: fixit-var(b2t-prog);
stroke-width: fixit-var(b2t-stroke);
stroke: fi-var(b2t-prog);
stroke-width: fi-var(b2t-stroke);
stroke-linecap: round;
stroke-dasharray: fixit-var(b2t-dasharray);
stroke-dashoffset: calc(#{fixit-var(b2t-dasharray)} * (1 - #{fixit-var(b2t-progress, 0)} / 100));
stroke-dasharray: fi-var(b2t-dasharray);
stroke-dashoffset: calc(#{fi-var(b2t-dasharray)} * (1 - #{fi-var(b2t-progress, 0)} / 100));
transition: stroke-dashoffset .1s linear;
}
}
assets/css/_core/_widgets/_github-corner.scss
+4 -4
View File
@@ -23,11 +23,11 @@
}
svg {
width: fixit-var(header-height);
height: fixit-var(header-height);
width: fi-var(header-height);
height: fi-var(header-height);
border: 0;
color: fixit-var(github-corner-color);
fill: fixit-var(github-corner-fill);
color: fi-var(github-corner-color);
fill: fi-var(github-corner-fill);
}
&.left {
assets/css/_core/_widgets/_link-guard.scss
+1 -1
View File
@@ -3,7 +3,7 @@
max-width: 100%;
border: none;
padding: 0;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
background-color: transparent;
opacity: 0;
transform: translateY(12px) scale(0.98);
assets/css/_core/_widgets/_noscript-warning.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.noscript-warning {
background-color: fixit-var(danger);
background-color: fi-var(danger);
color: white;
font-size: 1rem;
font-weight: bold;
assets/css/_core/_widgets/_reading-progress.scss
+4 -4
View File
@@ -1,9 +1,9 @@
.reading-progress-bar {
height: fixit-var(progress-h, 2px);
width: fixit-var(progress, 0);
height: fi-var(progress-h, 2px);
width: fi-var(progress, 0);
background-color: light-dark(
fixit-var(bg-progress, fixit-var(success)),
fixit-var(bg-progress-dark, fixit-var(global-font-color))
fi-var(bg-progress, fi-var(success)),
fi-var(bg-progress-dark, fi-var(global-font-color))
);
position: fixed;
@include z-index(fixed);
assets/css/_core/_widgets/_scrollbar.scss
+8 -8
View File
@@ -1,8 +1,8 @@
/* Modern browsers with `scrollbar-*` support (high priority) */
@supports (scrollbar-width: auto) {
* {
scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
scrollbar-width: fixit-var(scrollbar-width);
scrollbar-color: fi-var(scrollbar-thumb-color) fi-var(scrollbar-track-color);
scrollbar-width: fi-var(scrollbar-width);
@include media('print') {
scrollbar-width: none;
@@ -12,8 +12,8 @@
/* Legacy browsers with `::-webkit-scrollbar-*` support */
::-webkit-scrollbar {
height: fixit-var(scrollbar-width-legacy);
width: fixit-var(scrollbar-width-legacy);
height: fi-var(scrollbar-width-legacy);
width: fi-var(scrollbar-width-legacy);
overflow: visible;
@include media('print') {
@@ -25,16 +25,16 @@
width: 0;
}
::-webkit-scrollbar-corner {
background-color: fixit-var(scrollbar-track-color);
background-color: fi-var(scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
background-color: fixit-var(scrollbar-thumb-color);
background-color: fi-var(scrollbar-thumb-color);
&:hover {
background-color: fixit-var(scrollbar-thumb-hover-color);
background-color: fi-var(scrollbar-thumb-hover-color);
}
}
::-webkit-scrollbar-track {
background-color: fixit-var(scrollbar-track-color);
background-color: fi-var(scrollbar-track-color);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
assets/css/_core/_widgets/_typeit.scss
+3 -3
View File
@@ -2,13 +2,13 @@
.highlight {
padding: 0.375rem;
font-size: 0.875rem;
font-family: fixit-var(code-font-family);
font-family: fi-var(code-font-family);
font-weight: bold;
word-break: break-all;
white-space: pre-wrap;
}
--ti-cursor-color: fixit-var(global-font-color);
--ti-cursor-font-family: fixit-var(global-font-family);
--ti-cursor-color: fi-var(global-font-color);
--ti-cursor-font-family: fi-var(global-font-family);
--ti-cursor-transform: translateX(0);
}
assets/css/_page/_archive/_tags.scss
+6 -6
View File
@@ -14,13 +14,13 @@
transform: scale(1.2);
sup {
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
transition: all ease-out 0.3s;
}
}
sup {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
}
@@ -29,14 +29,14 @@
text-align: center;
.tag-item {
color: fixit-var(tag-cloud-color);
font-size: fixit-var(tag-cloud-font);
color: fi-var(tag-cloud-color);
font-size: fi-var(tag-cloud-font);
margin: 10px;
&:active,
&:focus,
&:hover {
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
sup {
opacity: 1;
@@ -49,7 +49,7 @@
@for $grade from 0 through 10 {
&[data-grade="#{$grade}"] {
@include set-fixit-var(
@include set-fi-var(
tag-cloud-color,
light-dark(
mix($tag-cloud-end, $tag-cloud-start, $grade * 10),
assets/css/_page/_archive/_terms.scss
+1 -1
View File
@@ -63,7 +63,7 @@
.archive-item-date {
text-align: right;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
white-space: nowrap;
@extend .variant-numeric;
}
assets/css/_page/_home.scss
+6 -6
View File
@@ -58,7 +58,7 @@
font-weight: normal;
margin: 0;
padding: 0.5rem;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
}
@@ -75,7 +75,7 @@
.summary {
position: relative;
padding-block: 1rem;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
&:not(:last-of-type)::after {
content: '';
@@ -85,8 +85,8 @@
transform: translateY(18px);
background: repeating-linear-gradient(
135deg,
fixit-var(global-border-color) 0px,
fixit-var(global-border-color) 4px,
fi-var(global-border-color) 0px,
fi-var(global-border-color) 4px,
transparent 4px,
transparent 8px
);
@@ -126,12 +126,12 @@
.content {
margin-top: 0.3rem;
color: fixit-var(global-font-tertiary-color);
color: fi-var(global-font-tertiary-color);
@include link(false, true);
b,
strong {
color: fixit-var(global-font-tertiary-color);
color: fi-var(global-font-tertiary-color);
}
}
assets/css/_page/_index.scss
+5 -5
View File
@@ -4,29 +4,29 @@
.content {
[id] {
scroll-margin-top: fixit-var(scroll-margin-top, 0.5rem);
scroll-margin-top: fi-var(scroll-margin-top, 0.5rem);
@include media('sm', 'up') {
[data-header-desktop='sticky'] &,
[data-header-desktop='auto'] & {
@include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + 0.5rem));
@include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + 0.5rem));
}
[data-header-desktop='sticky']:has(.breadcrumb-container.sticky) &,
[data-header-desktop='auto']:has(.breadcrumb-container.sticky) & {
@include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)} + 0.5rem));
@include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)} + 0.5rem));
}
}
@include media('xs') {
[data-header-mobile='sticky'] &,
[data-header-mobile='auto'] & {
@include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + 0.5rem));
@include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + 0.5rem));
}
[data-header-mobile='sticky']:has(.breadcrumb-container.sticky) &,
[data-header-mobile='auto']:has(.breadcrumb-container.sticky) & {
@include set-fixit-var(scroll-margin-top, calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height, 0px)} + 0.5rem));
@include set-fi-var(scroll-margin-top, calc(#{fi-var(header-height)} + #{fi-var(breadcrumb-height, 0px)} + 0.5rem));
}
}
}
assets/css/_page/_link.scss
+1 -1
View File
@@ -13,6 +13,6 @@
}
body:has(&) {
@include set-fixit-var(global-background-color, fixit-var(header-background-color));
@include set-fi-var(global-background-color, fi-var(header-background-color));
}
}
assets/css/_page/_single/_alert.scss
+3 -3
View File
@@ -2,7 +2,7 @@
padding: 0.5rem 1rem;
margin-block: 1rem;
color: inherit;
border-left: 0.25em solid fixit-var(alert-border-color);
border-left: 0.25em solid fi-var(alert-border-color);
> :first-child {
margin-top: 0;
@@ -17,7 +17,7 @@
align-items: center;
line-height: 1;
margin-bottom: 1rem;
color: fixit-var(alert-color);
color: fi-var(alert-color);
> svg.icon {
width: initial;
@@ -30,7 +30,7 @@
$dark-item: map-get($alert-color-map-dark, $type);
&.alert-#{$type} {
@include set-fixit-vars((
@include set-fi-vars((
alert-border-color: light-dark(map-get($item, border-color), map-get($dark-item, border-color)),
alert-color: light-dark(map-get($item, color), map-get($dark-item, color))
));
assets/css/_page/_single/_code-syntax/_github-dark-dimmed.scss
+33 -33
View File
@@ -5,7 +5,7 @@
/// Created on 2022-03-01
/// Updated on 2026-02-03
& {
@include set-fixit-vars((
@include set-fi-vars((
// Blob colors
color-blob-num: #778491,
color-blob-code-inner: #c5d1de,
@@ -43,37 +43,37 @@
));
.blob-num {
color: fixit-var(color-blob-num);
color: fi-var(color-blob-num);
}
.blob-code-inner {
color: fixit-var(color-blob-code-inner);
color: fi-var(color-blob-code-inner);
}
.pl-c /* comment, punctuation.definition.comment, string.comment */ {
color: fixit-var(color-prettylights-syntax-comment);
color: fi-var(color-prettylights-syntax-comment);
}
.pl-c1 /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
.pl-s .pl-v /* string variable */ {
color: fixit-var(color-prettylights-syntax-constant);
color: fi-var(color-prettylights-syntax-constant);
}
.pl-e /* entity */,
.pl-en /* entity.name */ {
color: fixit-var(color-prettylights-syntax-entity);
color: fi-var(color-prettylights-syntax-entity);
}
.pl-smi /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
.pl-s .pl-s1 /* string source */ {
color: fixit-var(color-prettylights-syntax-storage-modifier-import);
color: fi-var(color-prettylights-syntax-storage-modifier-import);
}
.pl-ent /* entity.name.tag, markup.quote */ {
color: fixit-var(color-prettylights-syntax-entity-tag);
color: fi-var(color-prettylights-syntax-entity-tag);
}
.pl-k /* keyword, storage, storage.type */ {
color: fixit-var(color-prettylights-syntax-keyword);
color: fi-var(color-prettylights-syntax-keyword);
}
.pl-s /* string */,
@@ -83,26 +83,26 @@
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
color: fixit-var(color-prettylights-syntax-string);
color: fi-var(color-prettylights-syntax-string);
}
.pl-v /* variable */,
.pl-smw /* sublimelinter.mark.warning */ {
color: fixit-var(color-prettylights-syntax-variable);
color: fi-var(color-prettylights-syntax-variable);
}
.pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
color: fixit-var(color-prettylights-syntax-brackethighlighter-unmatched);
color: fi-var(color-prettylights-syntax-brackethighlighter-unmatched);
}
.pl-ii /* invalid.illegal */ {
color: fixit-var(color-prettylights-syntax-invalid-illegal-text);
background-color: fixit-var(color-prettylights-syntax-invalid-illegal-bg);
color: fi-var(color-prettylights-syntax-invalid-illegal-text);
background-color: fi-var(color-prettylights-syntax-invalid-illegal-bg);
}
.pl-c2 /* carriage-return */ {
color: fixit-var(color-prettylights-syntax-carriage-return-text);
background-color: fixit-var(color-prettylights-syntax-carriage-return-bg);
color: fi-var(color-prettylights-syntax-carriage-return-text);
background-color: fi-var(color-prettylights-syntax-carriage-return-bg);
}
.pl-c2::before /* carriage-return */ {
@@ -111,65 +111,65 @@
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
font-weight: bold;
color: fixit-var(color-prettylights-syntax-string-regexp);
color: fi-var(color-prettylights-syntax-string-regexp);
}
.pl-ml /* markup.list */ {
color: fixit-var(color-prettylights-syntax-markup-list);
color: fi-var(color-prettylights-syntax-markup-list);
}
.pl-mh /* markup.heading */,
.pl-mh .pl-en /* markup.heading entity.name */,
.pl-ms /* meta.separator */ {
font-weight: bold;
color: fixit-var(color-prettylights-syntax-markup-heading);
color: fi-var(color-prettylights-syntax-markup-heading);
}
.pl-mi /* markup.italic */ {
font-style: italic;
color: fixit-var(color-prettylights-syntax-markup-italic);
color: fi-var(color-prettylights-syntax-markup-italic);
}
.pl-mb /* markup.bold */ {
font-weight: bold;
color: fixit-var(color-prettylights-syntax-markup-bold);
color: fi-var(color-prettylights-syntax-markup-bold);
}
.pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
color: fixit-var(color-prettylights-syntax-markup-deleted-text);
background-color: fixit-var(color-prettylights-syntax-markup-deleted-bg);
color: fi-var(color-prettylights-syntax-markup-deleted-text);
background-color: fi-var(color-prettylights-syntax-markup-deleted-bg);
}
.pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
color: fixit-var(color-prettylights-syntax-markup-inserted-text);
background-color: fixit-var(color-prettylights-syntax-markup-inserted-bg);
color: fi-var(color-prettylights-syntax-markup-inserted-text);
background-color: fi-var(color-prettylights-syntax-markup-inserted-bg);
}
.pl-mc /* markup.changed, punctuation.definition.changed */ {
color: fixit-var(color-prettylights-syntax-markup-changed-text);
background-color: fixit-var(color-prettylights-syntax-markup-changed-bg);
color: fi-var(color-prettylights-syntax-markup-changed-text);
background-color: fi-var(color-prettylights-syntax-markup-changed-bg);
}
.pl-mi2 /* markup.ignored, markup.untracked */ {
color: fixit-var(color-prettylights-syntax-markup-ignored-text);
background-color: fixit-var(color-prettylights-syntax-markup-ignored-bg);
color: fi-var(color-prettylights-syntax-markup-ignored-text);
background-color: fi-var(color-prettylights-syntax-markup-ignored-bg);
}
.pl-mdr /* meta.diff.range */ {
font-weight: bold;
color: fixit-var(color-prettylights-syntax-meta-diff-range);
color: fi-var(color-prettylights-syntax-meta-diff-range);
}
.pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
color: fixit-var(color-prettylights-syntax-brackethighlighter-angle);
color: fi-var(color-prettylights-syntax-brackethighlighter-angle);
}
.pl-sg /* sublimelinter.gutter-mark */ {
color: fixit-var(color-prettylights-syntax-sublimelinter-gutter-mark);
color: fi-var(color-prettylights-syntax-sublimelinter-gutter-mark);
}
.pl-corl /* constant.other.reference.link, string.other.link */ {
text-decoration: underline;
color: fixit-var(color-prettylights-syntax-constant-other-reference-link);
color: fi-var(color-prettylights-syntax-constant-other-reference-link);
}
}
assets/css/_page/_single/_code-syntax/_index.scss
+2 -2
View File
@@ -17,8 +17,8 @@
/* LineHighlight */
.hl {
display: block;
background-color: fixit-var(code-highlight-color);
box-shadow: -0.75rem 0 0 fixit-var(code-highlight-color), 0.75rem 0 0 fixit-var(code-highlight-color);
background-color: fi-var(code-highlight-color);
box-shadow: -0.75rem 0 0 fi-var(code-highlight-color), 0.75rem 0 0 fi-var(code-highlight-color);
}
@import 'light';
assets/css/_page/_single/_code.scss
+48 -48
View File
@@ -9,9 +9,9 @@ pre {
line-height: 1.45em;
padding: 0.5rem 0.75rem;
overflow: auto;
font-size: fixit-var(code-block-font-size);
font-family: fixit-var(code-font-family);
background-color: fixit-var(code-block-background-color);
font-size: fi-var(code-block-font-size);
font-family: fi-var(code-font-family);
background-color: fi-var(code-block-background-color);
tab-size: 4;
@include border-radius;
@@ -37,9 +37,9 @@ pre {
.highlight,
.gist {
font-size: fixit-var(code-block-font-size);
font-family: fixit-var(code-font-family);
@include set-fixit-var(scrollbar-thumb-color, inherit);
font-size: fi-var(code-block-font-size);
font-family: fi-var(code-font-family);
@include set-fi-var(scrollbar-thumb-color, inherit);
table {
width: 100%;
@@ -67,7 +67,7 @@ pre {
// lineNumbersInTable=true
> div.chroma {
position: relative;
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
@include border-radius;
&:is(pre):has(.ln) {
@@ -78,7 +78,7 @@ pre {
overflow: auto;
overscroll-behavior-x: none;
display: block;
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
@include border-radius;
td {
@@ -117,7 +117,7 @@ pre {
// Line numbers
.lnt,
.ln {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
user-select: none;
}
@@ -145,13 +145,13 @@ pre {
overflow: hidden;
height: auto;
position: relative;
counter-reset: codeNos calc(#{fixit-var(line-start)} - 1);
counter-reset: codeNos calc(#{fi-var(line-start)} - 1);
transition: height 0.5s ease-out;
@include border-radius;
@include border-radius;
// attr() for arbitrary properties is currently only supported in Chromium-based browsers (see https://caniuse.com/css3-attr);
// non-supporting browsers fall back to values set via Hugo templating in render-codeblock.html
@include set-fixit-vars((
@include set-fi-vars((
max-shown-lines: attr(data-max number, 10),
line-start: attr(data-line-start number, 1),
line-digit: attr(data-line-digit number, 1),
@@ -165,10 +165,10 @@ pre {
// code preview
&:has(.code-expand-btn):not(.is-expanded, .is-collapsed) {
.code-wrapper {
height: calc(1.45em * #{fixit-var(max-shown-lines)} + #{fixit-var(code-expand-offset, 0.5rem)});
height: calc(1.45em * #{fi-var(max-shown-lines)} + #{fi-var(code-expand-offset, 0.5rem)});
}
&[data-mode='mac'] .code-wrapper {
@include set-fixit-var(code-expand-offset, 1.875rem + 0.5rem);
@include set-fi-var(code-expand-offset, 1.875rem + 0.5rem);
}
}
@@ -178,11 +178,11 @@ pre {
align-items: center;
box-sizing: border-box;
width: 100%;
font-family: fixit-var(global-font-family);
font-family: fi-var(global-font-family);
font-weight: bold;
line-height: 1.4em;
color: fixit-var(code-header-color);
background-color: fixit-var(code-header-background-color);
color: fi-var(code-header-color);
background-color: fi-var(code-header-background-color);
position: sticky;
transition: border-radius 0s;
cursor: pointer;
@@ -204,7 +204,7 @@ pre {
&::after {
padding-left: 0.2rem;
content: attr(data-name, fixit-var(code-type, 'Code'));
content: attr(data-name, fi-var(code-type, 'Code'));
}
// filename for code block
@@ -221,7 +221,7 @@ pre {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: fixit-var(code-header-background-color);
background-color: fi-var(code-header-background-color);
padding-inline: 1em;
max-width: calc(100% - 200px);
white-space: nowrap;
@@ -247,25 +247,25 @@ pre {
.copy-btn[data-copied] .fa-clone {
--fa: "\f00c";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
.download-btn[data-downloaded] .fa-download {
--fa: "\f1ce";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
.fullscreen-btn[data-fullscreen] .fa-expand {
--fa: "\f066";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
@each $type, $text in $code-type-map {
&.language-#{to-lower-case($type)} {
// e.g., --fi-code-type: "JavaScript";
@include set-fixit-var(code-type, '"#{$text}"');
@include set-fi-var(code-type, '"#{$text}"');
}
}
@@ -278,7 +278,7 @@ pre {
&:not(.line-nos-hidden) .line-nos-btn,
.code-header button:hover,
&:has([contenteditable='true']) .edit-btn {
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
&.is-fullscreen {
@@ -344,7 +344,7 @@ pre {
.code-header {
transition: border-radius 0.2s ease 0.2s;
@include border-radius;
@include set-fixit-var(
@include set-fi-var(
code-header-background-color,
light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
);
@@ -453,11 +453,11 @@ pre {
content: counter(codeNos);
white-space: nowrap;
text-align: right;
min-width: calc(#{fixit-var(line-digit)} * 1ch);
min-width: calc(#{fi-var(line-digit)} * 1ch);
padding-inline: 0.75rem;
flex-shrink: 0;
color: fixit-var(global-font-secondary-color);
background-color: fixit-var(code-block-background-color);
color: fi-var(global-font-secondary-color);
background-color: fi-var(code-block-background-color);
}
// highlight for line numbers
@@ -483,7 +483,7 @@ pre {
// add border for non-classic mode
&:not([data-mode='classic']) {
border: 1px solid fixit-var(global-border-color-light);
border: 1px solid fi-var(global-border-color-light);
}
&[data-mode='mac'] {
@@ -491,8 +491,8 @@ pre {
padding-top: 1.875rem;
&::after {
background: fixit-var(mac-red, #fc625d);
box-shadow: 20px 0 fixit-var(mac-yellow, #fdbc40), 40px 0 fixit-var(mac-green, #35cd4b);
background: fi-var(mac-red, #fc625d);
box-shadow: 20px 0 fi-var(mac-yellow, #fdbc40), 40px 0 fi-var(mac-green, #35cd4b);
left: 8px;
top: 8px;
position: absolute;
@@ -502,7 +502,7 @@ pre {
@include border-radius(full);
@include dark-mode {
@include set-fixit-vars((
@include set-fi-vars((
mac-red: #ff5f56,
mac-yellow: #febc2e,
mac-green: #28c840,
@@ -524,7 +524,7 @@ pre {
// gist shortcode
.gist {
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
@include border-radius(top);
.gist-file,
@@ -546,7 +546,7 @@ pre {
td.blob-num {
position: sticky;
left: 0;
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
@include z-index(base);
}
@@ -561,7 +561,7 @@ pre {
padding: 0.4rem 0.8rem;
@include link(false, false);
@include border-radius(bottom);
background-color: fixit-var(gist-meta-background-color);
background-color: fi-var(gist-meta-background-color);
}
@include dark-mode {
@@ -572,8 +572,8 @@ pre {
// Code Tabs
.code-tabs {
margin: 0.5rem 0;
background-color: fixit-var(code-block-background-color);
border: 1px solid fixit-var(global-border-color-light);
background-color: fi-var(code-block-background-color);
border: 1px solid fi-var(global-border-color-light);
@include border-radius;
&[data-shadow='always'] {
@@ -591,7 +591,7 @@ pre {
&:has(.code-block.active.line-wrapping) .tabs-actions .line-wrap-btn,
&:has(.code-block.active:not(.line-nos-hidden)) .tabs-actions .line-nos-btn,
&:has(.code-block.active [contenteditable='true']) .tabs-actions .edit-btn {
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
.tabs-header {
@@ -599,11 +599,11 @@ pre {
justify-content: space-between;
align-items: center;
line-height: 1.4em;
font-size: fixit-var(code-block-font-size);
color: fixit-var(code-header-color);
background-color: fixit-var(code-header-background-color);
font-size: fi-var(code-block-font-size);
color: fi-var(code-header-color);
background-color: fi-var(code-header-background-color);
position: sticky;
border-bottom: 1px solid fixit-var(global-border-color);
border-bottom: 1px solid fi-var(global-border-color);
@include z-index(base, 1);
@include border-radius(top);
@include sticky-top-offset;
@@ -617,14 +617,14 @@ pre {
.before-tabs {
padding: 0.4rem 0.6rem;
white-space: nowrap;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
}
.tab-item {
padding: 0.4rem 0.8rem;
cursor: pointer;
font-weight: bold;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
white-space: nowrap;
user-select: none;
@include border-radius;
@@ -637,7 +637,7 @@ pre {
&:not(:has(.tab-item:hover)) .tab-item.active,
.tab-item:hover {
anchor-name: #{$rootPrefix}tab-hover;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
}
&::before {
@@ -648,7 +648,7 @@ pre {
translate: 2px 2px;
width: calc(anchor-size(width) - 0.25rem);
height: calc(anchor-size(height) - 0.25rem);
box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fixit-var(global-font-secondary-color) 30%, transparent);
box-shadow: inset 0 0 1rem 0.25rem color-mix(in srgb, fi-var(global-font-secondary-color) 30%, transparent);
pointer-events: none;
transition: 0.3s ease-in-out;
@include border-radius;
@@ -663,19 +663,19 @@ pre {
padding: 0.4rem;
&:hover {
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
&.copy-btn[data-copied] .fa-clone {
--fa: "\f00c";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
&.download-btn[data-downloaded] .fa-download {
--fa: "\f1ce";
font-weight: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
&.fullscreen-btn {
assets/css/_page/_single/_collections.scss
+6 -6
View File
@@ -118,7 +118,7 @@
.collection-name {
flex-grow: 1;
font-weight: bold;
font-size: fixit-var(collection-title-font-size);
font-size: fi-var(collection-title-font-size);
&::before {
content: attr(title) '・';
@@ -127,7 +127,7 @@
.collection-count {
flex-shrink: 0;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
.details-icon {
@@ -136,7 +136,7 @@
}
.collection-content {
font-size: fixit-var(collection-list-font-size);
font-size: fi-var(collection-list-font-size);
background-color: light-dark(darken($global-background-color, 3%), lighten($global-background-color-dark, 3%));
.collection-list {
@@ -157,15 +157,15 @@
margin-right: 0.5em;
position: relative;
bottom: 2px;
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
.collection-item > .active {
font-weight: bold;
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
&::before {
color: fixit-var(single-link-hover-color);
color: fi-var(single-link-hover-color);
}
}
}
assets/css/_page/_single/_color-preview.scss
+3 -3
View File
@@ -1,12 +1,12 @@
// Color preview styles for inline code
.color-code {
position: relative;
@include set-fixit-var(color-code-size, 0.64em);
@include set-fi-var(color-code-size, 0.64em);
.color-preview {
display: inline-block;
width: fixit-var(color-code-size);
height: fixit-var(color-code-size);
width: fi-var(color-code-size);
height: fi-var(color-code-size);
@include border-radius(full);
margin-right: 0.25em;
vertical-align: middle;
assets/css/_page/_single/_diagram-copy-btn.scss
+1 -1
View File
@@ -34,7 +34,7 @@
.fa-clone {
--fa: '\f00c';
--fa-style: 900;
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
}
assets/css/_page/_single/_fixit-decryptor.scss
+10 -10
View File
@@ -1,7 +1,7 @@
.fixit-decryptor-container {
font-family: fixit-var(global-font-family);
font-family: fi-var(global-font-family);
text-align: center;
margin-block: fixit-var(decryptor-margin-block);
margin-block: fi-var(decryptor-margin-block);
.fixit-decryptor-loading {
vertical-align: middle;
@@ -13,9 +13,9 @@
display: none;
box-sizing: border-box;
outline: none;
color: fixit-var(global-font-color);
border: 1px solid fixit-var(global-border-color);
box-shadow: 0px 0px 5px 0px fixit-var(global-border-color);
color: fi-var(global-font-color);
border: 1px solid fi-var(global-border-color);
box-shadow: 0px 0px 5px 0px fi-var(global-border-color);
@include border-radius;
transition: all 0.1s ease-out;
@@ -23,7 +23,7 @@
&:focus,
&:hover {
color: light-dark(darken($global-link-hover-color, 6%), lighten($global-link-hover-color-dark, 6%));
border-color: fixit-var(global-link-hover-color);
border-color: fi-var(global-link-hover-color);
box-shadow: 0px 0px 5px 0px light-dark(
lighten($global-link-hover-color, 20%),
darken($global-link-hover-color-dark, 20%)
@@ -36,14 +36,14 @@
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
}
.fixit-decryptor-btn,
.fixit-encryptor-btn {
cursor: pointer;
padding: 0.8rem 1rem;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
transition: all 0.1s ease-out;
}
@@ -72,7 +72,7 @@ fixit-encryptor {
// fixit-encryptor for for the encrypted pages
article fixit-encryptor {
.fixit-decryptor-container {
@include set-fixit-var(decryptor-margin-block, 2rem);
@include set-fi-var(decryptor-margin-block, 2rem);
}
&.decrypted > .fixit-decryptor-container {
.fixit-decryptor-loading,
@@ -90,7 +90,7 @@ article fixit-encryptor {
// fixit-encryptor shortcodes
#content fixit-encryptor {
.fixit-decryptor-container {
@include set-fixit-var(decryptor-margin-block, 1rem);
@include set-fi-var(decryptor-margin-block, 1rem);
}
&.decrypted > .fixit-decryptor-container {
display: none;
assets/css/_page/_single/_footer.scss
+4 -4
View File
@@ -6,7 +6,7 @@
}
.post-info {
border-bottom: 1px solid fixit-var(global-border-color);
border-bottom: 1px solid fi-var(global-border-color);
padding: 0.3rem 0;
.post-info-line {
@@ -15,14 +15,14 @@
.post-info-mod {
font-size: 0.8em;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
@include link(false, false);
}
.post-info-license {
font-size: 0.8em;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
@include link(false, false);
}
@@ -37,7 +37,7 @@
content: '|';
margin-left: 0.25rem;
margin-right: 0.25rem;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
assets/css/_page/_single/_index.scss
+40 -40
View File
@@ -17,14 +17,14 @@
width: max-content;
transform: rotate(30deg);
margin-right: 0.25em;
color: fixit-var(danger);
color: fi-var(danger);
}
.icon-repost {
display: inline-block;
width: max-content;
margin-right: 0.25em;
color: fixit-var(success);
color: fi-var(success);
}
@include media('print') {
@@ -45,7 +45,7 @@
.post-meta {
font-size: 0.875rem;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
span {
display: inline-block;
@@ -60,7 +60,7 @@
width: 1.3rem;
height: 1.3rem;
vertical-align: text-bottom;
border: 0.25px solid fixit-var(global-border-color);
border: 0.25px solid fi-var(global-border-color);
box-sizing: border-box;
object-position: center;
@include border-radius(full);
@@ -97,7 +97,7 @@
text-align: center;
font-size: 0.875em;
padding: 0.25rem;
color: fixit-var(global-font-tertiary-color);
color: fi-var(global-font-tertiary-color);
opacity: 0.8;
}
@@ -105,7 +105,7 @@
position: relative;
height: 1em;
margin-block: 1em;
background-image: linear-gradient(to right, fixit-var(global-border-color) 50%, transparent 50%);
background-image: linear-gradient(to right, fi-var(global-border-color) 50%, transparent 50%);
background-size: 10px 2px;
background-position: center;
background-repeat: repeat-x;
@@ -120,7 +120,7 @@
left: 5%;
top: 50%;
transform: translateY(-50%);
color: fixit-var(hr-active-color);
color: fi-var(hr-active-color);
font-size: 20px;
line-height: 1;
transition: left 1s ease-in-out, color 0.3s ease, border-color 0.3s ease;
@@ -143,7 +143,7 @@
> h2 {
font-size: 1.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid fixit-var(global-border-color-light);
border-bottom: 1px solid fi-var(global-border-color-light);
}
> h3 {
@@ -223,10 +223,10 @@
}
li::marker {
color: fixit-var(secondary);
color: fi-var(secondary);
}
li:hover::marker {
color: fixit-var(single-link-hover-color);
color: fi-var(single-link-hover-color);
}
// Task lists
@@ -235,16 +235,16 @@
list-style: none;
@include task-icon {
margin: 0 0.25em 0 -1.5em;
color: fixit-var(task-icon-color, fixit-var(secondary));
color: fi-var(task-icon-color, fi-var(secondary));
};
@include task-text {
color: fixit-var(task-text-color);
color: fi-var(task-text-color);
}
}
&[data-task='x'] {
@include task-icon {
background-color: fixit-rgba(fixit-var(secondary), 0.2);
background-color: fi-rgba(fi-var(secondary), 0.2);
mask-image: linear-gradient(#000, #000);
mask-size: 0.875em 0.875em;
mask-repeat: no-repeat;
@@ -256,24 +256,24 @@
@include task-icon {
opacity: 0.7;
};
@include task-text(fixit-var(secondary)) {
@include task-text(fi-var(secondary)) {
opacity: 0.7;
text-decoration: line-through fixit-var(secondary);
text-decoration: line-through fi-var(secondary);
}
}
&[data-task='/'] {
@include task-icon(fixit-var(success));
@include task-text(fixit-var(success));
@include task-icon(fi-var(success));
@include task-text(fi-var(success));
}
&[data-task='!'],
&[data-task='!x'] {
@include task-icon(fixit-var(danger));
@include task-icon(fi-var(danger));
}
&[data-task='?'] {
@include task-icon(fixit-var(warning));
@include task-icon(fi-var(warning));
}
}
@@ -287,24 +287,24 @@
}
ruby {
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
rt {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
mark {
padding: 0.14em 0.28em;
background-color: fixit-var(mark-background-color, mark);
color: fixit-var(mark-color, marktext);
background-color: fi-var(mark-background-color, mark);
color: fi-var(mark-color, marktext);
@include border-radius;
@each $color, $value in $theme-colors {
&.mark-#{$color} {
@include set-fixit-vars((
@include set-fi-vars((
mark-color: #fff,
mark-background-color: fixit-var(#{$color}),
mark-background-color: fi-var(#{$color}),
));
}
}
@@ -315,21 +315,21 @@
overflow-x: auto;
overflow-y: hidden;
margin: 0.5rem 0;
background: fixit-var(table-background-color);
border: 1px solid fixit-var(table-border-color);
background: fi-var(table-background-color);
border: 1px solid fi-var(table-border-color);
@include border-radius;
@include set-fixit-var(scrollbar-thumb-color, fixit-var(table-background-color));
@include set-fi-var(scrollbar-thumb-color, fi-var(table-background-color));
> table {
width: 100%;
max-width: 100%;
margin: 0;
border-spacing: 0;
background: fixit-var(table-background-color);
background: fi-var(table-background-color);
border-collapse: separate;
thead {
background: fixit-var(table-thead-color);
background: fi-var(table-thead-color);
}
&:not([class]) tbody {
@@ -345,8 +345,8 @@
th,
td {
padding: 0.3rem 1rem;
border-right: 1px solid fixit-var(table-border-color);
border-bottom: 1px solid fixit-var(table-border-color);
border-right: 1px solid fi-var(table-border-color);
border-bottom: 1px solid fi-var(table-border-color);
}
tr > :last-child {
@@ -394,8 +394,8 @@
blockquote {
display: block;
border-left: 0.25em solid fixit-var(global-border-color);
color: fixit-var(blockquote-color);
border-left: 0.25em solid fi-var(global-border-color);
color: fi-var(blockquote-color);
padding: 0 1em;
margin: 1rem 0;
@@ -433,7 +433,7 @@
}
hr {
background-color: fixit-var(global-border-color);
background-color: fi-var(global-border-color);
height: 1px;
margin-block: 1em;
}
@@ -455,12 +455,12 @@
kbd {
display: inline-block;
padding: 0 0.25rem;
background-color: fixit-var(global-background-color);
border: 1px solid fixit-var(global-border-color);
background-color: fi-var(global-background-color);
border: 1px solid fi-var(global-border-color);
font-size: 0.8rem;
font-family: fixit-var(code-font-family);
color: fixit-var(code-color);
box-shadow: inset 0 -1px 0 fixit-var(global-border-color);
font-family: fi-var(code-font-family);
color: fi-var(code-color);
box-shadow: inset 0 -1px 0 fi-var(global-border-color);
@include border-radius;
}
assets/css/_page/_single/_related.scss
+5 -5
View File
@@ -5,7 +5,7 @@
display: block;
border: 0;
padding-top: 1px;
background: fixit-var(divider-edge-weak);
background: fi-var(divider-edge-weak);
margin-block: 1rem 0.5rem;
}
@@ -26,12 +26,12 @@
.related-title {
font-weight: bold;
font-size: fixit-var(related-title-font-size);
font-size: fi-var(related-title-font-size);
}
.related-count {
flex-shrink: 0;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
.details-icon {
@@ -40,7 +40,7 @@
}
.related-content {
font-size: fixit-var(related-list-font-size);
font-size: fi-var(related-list-font-size);
.related-list {
margin: 0;
@@ -60,7 +60,7 @@
margin-right: 0.5em;
position: relative;
bottom: 2px;
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
}
}
assets/css/_page/_single/_reward.scss
+7 -7
View File
@@ -28,7 +28,7 @@
}
&:hover span[data-animation] {
animation: fixit-var(animation-reward, jackInTheBox) 0.8s infinite linear;
animation: fi-var(animation-reward, jackInTheBox) 0.8s infinite linear;
// The animation may affect :hover of img in dark mode
pointer-events: none;
}
@@ -37,7 +37,7 @@
display: inline-block;
margin: 0.8em 2em 0;
max-width: 100%;
width: fixit-var(reward-img-width);
width: fi-var(reward-img-width);
}
}
@@ -48,7 +48,7 @@
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
@include z-index(fixed);
@include border-radius;
box-shadow: 0 0 1.5rem 0 light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
@@ -60,10 +60,10 @@
box-sizing: border-box;
cursor: pointer;
outline: none;
color: fixit-var(reward-color, lighten($reward-color, 5%));
color: fi-var(reward-color, lighten($reward-color, 5%));
border: 2px solid light-dark(lighten($reward-color, 10%), lighten($reward-color, 5%));
padding: 0.6rem 1rem;
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
vertical-align: text-top;
line-height: 1rem;
transition: all 0.3s ease-out;
@@ -72,8 +72,8 @@
&:active,
&:hover {
color: #ffffff;
border-color: fixit-var(reward-color);
background-color: fixit-var(reward-color);
border-color: fi-var(reward-color);
background-color: fi-var(reward-color);
}
}
assets/css/_page/_single/_shortcodes/_admonition.scss
+11 -11
View File
@@ -4,12 +4,12 @@
padding: 0 0.75rem;
border-left: .25rem solid;
overflow: hidden;
background-color: fixit-var(admonition-bg-color);
border-left-color: fixit-var(admonition-color);
background-color: fi-var(admonition-bg-color);
border-left-color: fi-var(admonition-color);
@include border-radius;
.admonition-title {
font-weight: fixit-var(admonition-title-font-weight, bold);
font-weight: fi-var(admonition-title-font-weight, bold);
margin: 0 -0.75rem;
padding: 0.25rem 1.8rem;
border-bottom: 1px solid;
@@ -23,7 +23,7 @@
// title-only admonition without content
&:not(:has(+ .details-content)) {
@include set-fixit-var(admonition-title-font-weight, normal);
@include set-fi-var(admonition-title-font-weight, normal);
padding: 0.75rem 1rem 0.75rem 2.2rem;
border: 0;
@@ -35,17 +35,17 @@
}
> .admonition-title {
border-bottom-color: fixit-var(admonition-bg-color);
background-color: fixit-var(admonition-bg-color-collapsed);
border-bottom-color: fi-var(admonition-bg-color);
background-color: fi-var(admonition-bg-color-collapsed);
transition: all 0.2s ease;
i.icon {
color: fixit-var(admonition-color);
color: fi-var(admonition-color);
}
}
&.open > .admonition-title {
background-color: fixit-var(admonition-bg-color);
background-color: fi-var(admonition-bg-color);
}
.admonition-content {
@@ -79,7 +79,7 @@
}
// default admonition type is note
@include set-fixit-vars((
@include set-fi-vars((
admonition-color: map-get(map-get($admonition-color-map, note), color),
admonition-bg-color: map-get(map-get($admonition-color-map, note), bg-color),
admonition-bg-color-collapsed: opacify(map-get(map-get($admonition-color-map, note), bg-color), 0.15),
@@ -89,7 +89,7 @@
@each $type, $item in $admonition-color-map {
@if $type != 'note' {
&.#{$type} {
@include set-fixit-vars((
@include set-fi-vars((
admonition-color: map-get($item, color),
admonition-bg-color: map-get($item, bg-color),
admonition-bg-color-collapsed: opacify(map-get($item, bg-color), 0.15),
@@ -104,7 +104,7 @@
// content-only admonition without title
&:not(:has(.admonition-title)) {
border: 1px solid fixit-var(admonition-bg-color);
border: 1px solid fi-var(admonition-bg-color);
.admonition-content {
padding: 0.75rem 0.25rem;
assets/css/_page/_single/_shortcodes/_cardlink.scss
+3 -3
View File
@@ -20,7 +20,7 @@
bottom: 0.75rem;
left: 0;
right: 0;
background-image: fixit-var(logo-img);
background-image: fi-var(logo-img);
background-repeat: no-repeat;
filter: blur(0.5rem);
opacity: 0.5;
@@ -50,7 +50,7 @@
font-size: 1rem;
font-weight: 500;
line-height: 1.25;
color: fixit-var(global-font-color);
color: fi-var(global-font-color);
}
&meta {
@@ -58,7 +58,7 @@
align-items: center;
margin-top: 0.25rem;
font-size: 0.825rem;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
&icon-link {
assets/css/_page/_single/_shortcodes/_center-quote.scss
+2 -2
View File
@@ -16,7 +16,7 @@ blockquote.blockquote-center {
}
&::before {
border-top: 1px solid fixit-var(global-border-color);
border-top: 1px solid fi-var(global-border-color);
text-align: left;
top: -20px;
font-family: var(--fa-family-classic);
@@ -25,7 +25,7 @@ blockquote.blockquote-center {
}
&::after {
border-bottom: 1px solid fixit-var(global-border-color);
border-bottom: 1px solid fi-var(global-border-color);
bottom: -20px;
text-align: right;
font-family: var(--fa-family-classic);
assets/css/_page/_single/_shortcodes/_file-tree.scss
+5 -5
View File
@@ -1,5 +1,5 @@
.file-tree-wrapper {
border: 1px solid fixit-var(global-border-color);
border: 1px solid fi-var(global-border-color);
padding: 0.5rem;
font-size: 0.8rem;
line-height: 1;
@@ -53,7 +53,7 @@
}
&.is-highlighted {
color: fixit-var(global-link-hover-color);
color: fi-var(global-link-hover-color);
}
}
}
@@ -71,7 +71,7 @@
translate: 0 -50%;
width: 0.75rem;
height: 1px;
background-color: fixit-var(global-font-secondary-color);
background-color: fi-var(global-font-secondary-color);
}
}
}
@@ -88,8 +88,8 @@
bottom: 0.625rem;
left: calc(1rem - 0.5px);
width: 1px;
background-color: fixit-var(global-font-secondary-color);
height: fixit-var(file-tree-line-height);
background-color: fi-var(global-font-secondary-color);
height: fi-var(file-tree-line-height);
}
}
assets/css/_page/_single/_shortcodes/_tabs.scss
+34 -34
View File
@@ -115,7 +115,7 @@ tab-container {
&[aria-selected='true'],
&[aria-selected='false']:hover {
color: fixit-var(primary);
color: fi-var(primary);
}
&[aria-selected='false']:hover {
@@ -178,11 +178,11 @@ tab-container {
// Top placement
&[placement='top'] {
&::part(tablist-tab-wrapper) {
border-bottom: 2px solid fixit-var(global-border-color);
border-bottom: 2px solid fi-var(global-border-color);
}
&::part(tablist-wrapper)::before {
box-shadow: inset 0 -2px 0 fixit-var(primary);
box-shadow: inset 0 -2px 0 fi-var(primary);
translate: 0 2px;
}
}
@@ -190,11 +190,11 @@ tab-container {
// Bottom placement
&[placement='bottom'] {
&::part(tablist-tab-wrapper) {
border-top: 2px solid fixit-var(global-border-color);
border-top: 2px solid fi-var(global-border-color);
}
&::part(tablist-wrapper)::before {
box-shadow: inset 0 2px 0 fixit-var(primary);
box-shadow: inset 0 2px 0 fi-var(primary);
translate: 0 -2px;
}
}
@@ -202,11 +202,11 @@ tab-container {
// Left placement
&[placement='left'] {
&::part(tablist-tab-wrapper) {
border-right: 2px solid fixit-var(global-border-color);
border-right: 2px solid fi-var(global-border-color);
}
&::part(tablist-wrapper)::before {
box-shadow: inset -2px 0 0 fixit-var(primary);
box-shadow: inset -2px 0 0 fi-var(primary);
translate: 2px 0;
}
@@ -218,11 +218,11 @@ tab-container {
// Right placement
&[placement='right'] {
&::part(tablist-tab-wrapper) {
border-left: 2px solid fixit-var(global-border-color);
border-left: 2px solid fi-var(global-border-color);
}
&::part(tablist-wrapper)::before {
box-shadow: inset 2px 0 0 fixit-var(primary);
box-shadow: inset 2px 0 0 fi-var(primary);
translate: -2px 0;
}
@@ -238,13 +238,13 @@ tab-container {
// ========================================
&[type='pill'] {
> .tab-button {
background-color: fixit-var(code-inline-background-color);
background-color: fi-var(code-inline-background-color);
@include tab-button-size;
@include border-radius(full);
&[aria-selected='true'] {
color: #ffffff;
background-color: fixit-var(primary);
background-color: fi-var(primary);
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
box-shadow: 0 0.125rem 0.5rem light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
}
@@ -332,22 +332,22 @@ tab-container {
}
> .tab-button {
border: 1px solid fixit-var(global-border-color);
background-color: fixit-var(code-block-background-color);
border: 1px solid fi-var(global-border-color);
background-color: fi-var(code-block-background-color);
@include tab-button-size(1.5rem);
&[aria-selected='true'],
&[aria-selected='false']:hover {
background-color: fixit-var(global-background-color);
color: fixit-var(global-link-color);
background-color: fi-var(global-background-color);
color: fi-var(global-link-color);
@include z-index(base);
}
}
> .tab-panel {
padding: 0.75rem;
background-color: fixit-var(global-background-color);
border: 1px solid fixit-var(global-border-color);
background-color: fi-var(global-background-color);
border: 1px solid fi-var(global-border-color);
}
&[placement='top'],
@@ -375,7 +375,7 @@ tab-container {
// Top placement
&[placement='top'] {
&::part(tablist-tab-wrapper) {
border-bottom: 1px solid fixit-var(global-border-color);
border-bottom: 1px solid fi-var(global-border-color);
}
> .tab-button {
@@ -383,7 +383,7 @@ tab-container {
@include border-radius(top);
&[aria-selected='true'] {
border-bottom-color: fixit-var(global-background-color);
border-bottom-color: fi-var(global-background-color);
}
}
@@ -396,7 +396,7 @@ tab-container {
// Bottom placement
&[placement='bottom'] {
&::part(tablist-tab-wrapper) {
border-top: 1px solid fixit-var(global-border-color);
border-top: 1px solid fi-var(global-border-color);
}
> .tab-button {
@@ -404,7 +404,7 @@ tab-container {
@include border-radius(bottom);
&[aria-selected='true'] {
border-top-color: fixit-var(global-background-color);
border-top-color: fi-var(global-background-color);
}
}
@@ -417,7 +417,7 @@ tab-container {
// Left placement
&[placement='left'] {
&::part(tablist-tab-wrapper) {
border-right: 1px solid fixit-var(global-border-color);
border-right: 1px solid fi-var(global-border-color);
}
> .tab-button {
@@ -425,7 +425,7 @@ tab-container {
@include border-radius(left);
&[aria-selected='true'] {
border-right-color: fixit-var(global-background-color);
border-right-color: fi-var(global-background-color);
}
}
@@ -438,7 +438,7 @@ tab-container {
// Right placement
&[placement='right'] {
&::part(tablist-tab-wrapper) {
border-left: 1px solid fixit-var(global-border-color);
border-left: 1px solid fi-var(global-border-color);
}
> .tab-button {
@@ -446,7 +446,7 @@ tab-container {
@include border-radius(right);
&[aria-selected='true'] {
border-left-color: fixit-var(global-background-color);
border-left-color: fi-var(global-background-color);
}
}
@@ -470,7 +470,7 @@ tab-container {
&::part(tablist-tab-wrapper) {
position: relative;
padding: 0.25rem;
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
@include border-radius;
}
@@ -511,7 +511,7 @@ tab-container {
left: anchor(left);
width: anchor-size(width);
height: anchor-size(height);
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
transition:
top 0.3s ease,
left 0.3s ease,
@@ -588,39 +588,39 @@ tab-container .tab-panel:not([hidden]) {
tab-container {
&[type='underline'] {
> .tab-button {
@include set-fixit-var(tab-button-border-color, transparent);
@include set-fi-var(tab-button-border-color, transparent);
&[aria-selected='true'],
&[aria-selected='false']:hover {
@include set-fixit-var(tab-button-border-color, fixit-var(primary));
@include set-fi-var(tab-button-border-color, fi-var(primary));
}
}
&[placement='top'] > .tab-button {
translate: 0 2px;
border-bottom: 2px solid fixit-var(tab-button-border-color);
border-bottom: 2px solid fi-var(tab-button-border-color);
}
&[placement='bottom'] > .tab-button {
translate: 0 -2px;
border-top: 2px solid fixit-var(tab-button-border-color);
border-top: 2px solid fi-var(tab-button-border-color);
}
&[placement='left'] > .tab-button {
translate: 2px 0;
border-right: 2px solid fixit-var(tab-button-border-color);
border-right: 2px solid fi-var(tab-button-border-color);
}
&[placement='right'] > .tab-button {
translate: -2px 0;
border-left: 2px solid fixit-var(tab-button-border-color);
border-left: 2px solid fi-var(tab-button-border-color);
}
}
&[type='segment'] {
> .tab-button {
&[aria-selected='true'] {
background-color: fixit-var(global-background-color);
background-color: fi-var(global-background-color);
box-shadow: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
}
}
assets/css/_page/_single/_shortcodes/_timeline.scss
+20 -20
View File
@@ -3,8 +3,8 @@ ul.#{$prefix}timeline {
box-sizing: border-box;
overflow: auto;
margin: 1rem auto;
@include set-fixit-vars((
timeline-color: fixit-var(global-border-color),
@include set-fi-vars((
timeline-color: fi-var(global-border-color),
timeline-circle-color: #FF735A,
timeline-circle-size: 10px,
timeline-width: 2px,
@@ -12,21 +12,21 @@ ul.#{$prefix}timeline {
&[data-animation] {
.#{$prefix}timeline-item::before {
border-color: fixit-var(timeline-color);
border-color: fi-var(timeline-color);
animation-name: border-color-fade;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s);
animation-delay: calc(#{fi-var(timeline-index)} * 0.3s);
@keyframes border-color-fade {
0% {
border-color: fixit-var(timeline-color);
border-color: fi-var(timeline-color);
}
50% {
border-color: fixit-var(timeline-circle-color);
border-color: fi-var(timeline-circle-color);
}
100% {
border-color: fixit-var(timeline-color);
border-color: fi-var(timeline-color);
}
}
}
@@ -38,14 +38,14 @@ ul.#{$prefix}timeline {
@each $color, $value in $theme-colors {
&[data-type='#{$color}'] {
@include set-fixit-var(timeline-circle-color, fixit-var(#{$color}));
@include set-fi-var(timeline-circle-color, fi-var(#{$color}));
}
}
.#{$prefix}timeline-item__timestamp {
font-size: 0.8125rem;
line-height: 1;
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
&.is-top {
margin-bottom: 0.25rem;
@@ -61,7 +61,7 @@ ul.#{$prefix}timeline {
}
&[data-node='dot']::before {
background-color: fixit-var(timeline-circle-color) !important;
background-color: fi-var(timeline-circle-color) !important;
}
&[data-size='small']::before {
transform: scale(0.8) translateY(-50%);
@@ -79,13 +79,13 @@ ul.#{$prefix}timeline {
text-align: center;
border-style: solid;
color: transparent;
width: fixit-var(timeline-circle-size);
height: fixit-var(timeline-circle-size);
font-size: fixit-var(timeline-circle-size);
line-height: fixit-var(timeline-circle-size);
border-width: fixit-var(timeline-width);
border-color: fixit-var(timeline-circle-color);
background-color: fixit-var(global-background-color);
width: fi-var(timeline-circle-size);
height: fi-var(timeline-circle-size);
font-size: fi-var(timeline-circle-size);
line-height: fi-var(timeline-circle-size);
border-width: fi-var(timeline-width);
border-color: fi-var(timeline-circle-color);
background-color: fi-var(global-background-color);
@include border-radius(full);
@include z-index(base);
}
@@ -93,10 +93,10 @@ ul.#{$prefix}timeline {
content: '';
position: absolute;
top: 0;
left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2);
width: fixit-var(timeline-width);
left: calc(#{fi-var(timeline-circle-size)} / 2 + #{fi-var(timeline-width)} / 2);
width: fi-var(timeline-width);
height: 100%;
background-color: fixit-var(timeline-color);
background-color: fi-var(timeline-color);
}
}
}
assets/css/_page/_single/_toc.scss
+21 -21
View File
@@ -1,13 +1,13 @@
// Common styles for all TOC types
.toc {
.toc-title {
font-size: fixit-var(toc-title-font-size);
font-size: fi-var(toc-title-font-size);
font-weight: bold;
text-transform: uppercase;
}
.toc-content {
font-size: fixit-var(toc-content-font-size);
font-size: fi-var(toc-content-font-size);
code {
@extend %code;
@@ -25,7 +25,7 @@
margin-right: 0.5em;
position: relative;
bottom: 2px;
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
ul {
@@ -42,16 +42,16 @@
}
li:has(> a:hover)::marker {
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
}
}
ruby {
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
rt {
color: fixit-var(global-font-secondary-color);
color: fi-var(global-font-secondary-color);
}
}
}
@@ -62,7 +62,7 @@
.toc-content {
li.has-active {
&::marker {
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
&:has(> .active)::marker {
@@ -70,13 +70,13 @@
}
> a {
color: fixit-var(single-link-color);
color: fi-var(single-link-color);
}
}
ul {
a.active::before {
color: fixit-var(single-link-hover-color);
color: fi-var(single-link-hover-color);
}
}
@@ -106,7 +106,7 @@
margin-right: 0.5em;
position: relative;
bottom: 2px;
color: fixit-var(global-border-color);
color: fi-var(global-border-color);
}
i.toc-icon {
@@ -122,7 +122,7 @@
.toc-content {
overflow-y: auto;
overscroll-behavior: contain;
max-height: fixit-var(toc-content-max-height, calc(100dvh - #{2 * #{fixit-var(header-height)}}));
max-height: fi-var(toc-content-max-height, calc(100dvh - #{2 * #{fi-var(header-height)}}));
@include scrollbar-width(none, 0);
&.always-active ul,
@@ -171,11 +171,11 @@
justify-content: space-between;
line-height: 2em;
padding: 0 0.75em;
background-color: fixit-var(code-header-background-color);
background-color: fi-var(code-header-background-color);
}
.toc-content {
background-color: fixit-var(code-block-background-color);
background-color: fi-var(code-block-background-color);
> nav {
> ul {
@@ -185,7 +185,7 @@
font-weight: bold;
&::before {
color: fixit-var(single-link-hover-color);
color: fi-var(single-link-hover-color);
}
}
}
@@ -203,7 +203,7 @@
&:not(.open) {
.toc-title {
@include set-fixit-var(
@include set-fi-var(
code-header-background-color,
light-dark(darken($code-header-background-color, 1%), darken($code-header-background-color-dark, 1%))
);
@@ -224,8 +224,8 @@
max-height: 100%;
margin-right: 0;
border: none;
border-left: 1px solid fixit-var(global-border-color-light);
background-color: fixit-var(global-background-color);
border-left: 1px solid fi-var(global-border-color-light);
background-color: fi-var(global-background-color);
transition:
display 0.2s allow-discrete,
overlay 0.2s allow-discrete,
@@ -237,13 +237,13 @@
margin-inline: 1rem;
.toc-title {
font-size: calc(#{fixit-var(toc-title-font-size)} * 1.5);
line-height: calc(#{fixit-var(toc-title-font-size)} * 2);
margin-block: fixit-var(toc-title-font-size);
font-size: calc(#{fi-var(toc-title-font-size)} * 1.5);
line-height: calc(#{fi-var(toc-title-font-size)} * 2);
margin-block: fi-var(toc-title-font-size);
}
.toc-content {
font-size: MAX(fixit-var(toc-content-font-size), 1rem);
font-size: MAX(fi-var(toc-content-font-size), 1rem);
nav {
max-height: calc(100dvh - 5rem);