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

refactor(responsive): enhance responsive styles and add media mixin support (#715)

Browse Source 
* feat(responsive): add responsive breakpoints and mixin for media queries

* refactor: print styles and add media query support

* refactor(responsive): enhance responsive styles across various components
This commit is contained in:
Cell
2026-03-18 11:22:51 +08:00
committed by GitHub
parent 8534cddc7c
commit d51dfd35e8
29 changed files with 468 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_base.scss
+1 -3
View File
@@ -9,10 +9,8 @@ html {
width: 100%;
scroll-behavior: smooth;
overflow: auto;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
@include media('reduce-motion') {
scroll-behavior: auto;
}
}
assets/css/_core/_common.scss
+32
View File
@@ -65,3 +65,35 @@
filter: invert(1) hue-rotate(0.5turn);
}
}
// print view helper
.page-break-before {
break-before: page;
}
.page-break-after {
break-after: page;
}
@include media('xs', 'up') {
.d-none-desktop {
display: none;
}
}
@include media('xs') {
.d-none-mobile {
display: none !important;
}
}
@include media('print') {
@page {
size: A4 portrait;
margin: 1.27cm;
}
.d-none-print {
display: none !important;
}
}
assets/css/_core/_layout/_breadcrumb.scss
+28 -1
View File
@@ -5,7 +5,6 @@
display: flex;
gap: 0.5rem;
@include z-index(sticky);
@extend .print-d-none;
&:has(~ main[data-reverse]) {
flex-direction: row-reverse;
@@ -16,11 +15,35 @@
content: '';
flex: 1;
padding-inline: 0.5rem;
@include media('sm', 'down') {
display: none;
}
}
&.sticky {
position: sticky;
top: fixit-var(header-height);
@include media('sm', 'up') {
body:not([data-header-desktop='sticky']) & {
top: 0;
}
// adjust the scroll margin top of the content anchors on the page
body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
}
}
@include media('xs') {
body:not([data-header-mobile='sticky']) & {
top: 0;
}
// adjust the scroll margin top of the content anchors on the page
body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
}
}
}
.breadcrumb {
@@ -47,4 +70,8 @@
}
}
}
@include media('print') {
display: none !important;
}
}
assets/css/_core/_layout/_footer.scss
+8 -1
View File
@@ -4,7 +4,6 @@ footer {
text-align: center;
line-height: 1.25rem;
padding: 1rem 0;
@extend .print-d-none;
.footer-container {
display: flex;
@@ -25,9 +24,17 @@ footer {
animation: icon-animate 1.33s ease-in-out infinite;
}
}
@include media('xs') {
font-size: 0.618rem;
}
}
@include blur;
@include media('print') {
display: none !important;
}
}
@keyframes icon-animate {
assets/css/_core/_layout/_header.scss
+25 -2
View File
@@ -1,9 +1,8 @@
header {
width: 100%;
background-color: fixit-var(header-background-color);
@include z-index(fixed);
transition: box-shadow 0.3s ease;
@extend .print-d-none;
@include z-index(fixed);
&:hover {
box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.1);
@@ -12,6 +11,10 @@ header {
box-shadow: 0 0 1.5rem 0 rgba(255, 255, 255, 0.1);
}
}
@include media('print') {
display: none !important;
}
}
.header-wrapper {
@@ -262,6 +265,14 @@ header {
}
}
}
@include media('md', 'down') {
padding-inline-end: 1rem;
}
@include media('sm', 'down') {
padding-inline-start: 1rem;
}
}
&.open .header-wrapper .menu .menu-item.search {
@@ -269,6 +280,10 @@ header {
width: 24rem;
}
}
@include media('xs') {
display: none;
}
}
#header-mobile {
@@ -480,6 +495,10 @@ header {
}
}
}
@include media('xs') {
display: block;
}
}
.search-dropdown {
@@ -495,6 +514,10 @@ header {
&.desktop {
right: 2rem;
width: 30rem;
@include media('md', 'down') {
right: 1rem;
}
}
&.mobile {
assets/css/_core/_layout/_index.scss
+42 -2
View File
@@ -1,4 +1,4 @@
/** Layout **/
// Responsive layout
.wrapper {
display: flex;
flex-direction: column;
@@ -16,6 +16,10 @@
&:not(:has(~ aside)) {
display: none;
}
@include media('sm', 'down') {
display: none !important;
}
}
&.fi-container {
@@ -34,9 +38,45 @@
}
}
}
@include media('md') {
main {
// hide empty aside and expand article when only one aside is empty
aside:first-child:empty:has(~ aside:not(:empty)),
aside:first-child:not(:empty) ~ aside#toc-auto:empty {
display: none;
}
aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
flex: 3;
}
}
// adjust breadcrumb flex when asides are empty
&:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::before {
display: none;
}
}
&:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::after {
display: none;
}
}
}
}
@import "header";
@import "breadcrumb";
@import "footer";
@import "page-style";
@import "pagination";
@import "footer";
assets/css/_core/_layout/_page-style.scss
+47
View File
@@ -0,0 +1,47 @@
%page-style {
@include media('xl') {
width: ROUND(60%, 2px);
max-width: 1200px;
}
@include media('lg') {
width: ROUND(56%, 2px);
}
@include media('md') {
width: ROUND(52%, 2px);
}
@include media('sm') {
width: ROUND(80%, 2px);
}
@include media('xs') {
width: 100%;
}
}
[data-page-style='wide'] {
%page-style {
@include media('xl') {
width: ROUND(64%, 2px);
max-width: 1600px;
}
@include media('lg') {
width: ROUND(60%, 2px);
}
@include media('md') {
width: ROUND(56%, 2px);
}
}
}
[data-page-style='narrow'] {
%page-style {
@include media('xl') {
max-width: 800px;
}
}
}
assets/css/_core/_layout/_pagination.scss
+4
View File
@@ -69,5 +69,9 @@
width: 50%;
}
}
@include media('xs') {
margin: 0 5px;
}
}
}
assets/css/_core/_mixin/_index.scss
+1
View File
@@ -4,6 +4,7 @@
@import 'compatibility';
@import 'link';
@import 'loading';
@import 'media';
@import 'scrollbar-width';
@import 'theme-vars';
@import 'z-index';
assets/css/_core/_mixin/_media.scss
+100
View File
@@ -0,0 +1,100 @@
// Responsive breakpoints matching the project's media query design
// ┌──────────────────────────────────────────────────────┐
// │ xs │ sm │ md │ lg │ xl │
// │ ≤680 │ 681–960 │ 961–1200 │ 1201–1440 │ ≥1441 │
// └──────────────────────────────────────────────────────┘
$breakpoints: (
'xs': (
'min': null,
'max': 680px,
),
'sm': (
'min': 681px,
'max': 960px,
),
'md': (
'min': 961px,
'max': 1200px,
),
'lg': (
'min': 1201px,
'max': 1440px,
),
'xl': (
'min': 1441px,
'max': null,
),
) !default;
/// Apply styles within a named media target.
/// @param {String} $target - Target name: xs | sm | md | lg | xl | print | reduce-motion
/// @param {String} $direction - Range direction: only | up | down [default: only]
///
/// @example
/// // xs: ≤ 680px
/// @include media('xs') { ... }
/// // sm: 681px – 960px
/// @include media('sm') { ... }
/// // md and above: ≥ 961px
/// @include media('md', 'up') { ... }
/// // lg and below: ≤ 1440px
/// @include media('lg', 'down') { ... }
/// // print media
/// @include media('print') { ... }
/// // reduced motion
/// @include media('reduce-motion') { ... }
@mixin media($target, $direction: 'only') {
@if $target == 'print' {
@media only print {
@content;
}
} @else if $target == 'reduce-motion' {
@media screen and (prefers-reduced-motion: reduce) {
@content;
}
} @else {
$range: map-get($breakpoints, $target);
$min: if($range != null, map-get($range, 'min'), null);
$max: if($range != null, map-get($range, 'max'), null);
@if $range == null {
@warn "Unknown media target `#{$target}`. Expected: xs, sm, md, lg, xl, print, reduce-motion.";
} @else if $direction == 'only' {
@if $min == null {
// xs: max-width only, no lower bound
@media only screen and (max-width: $max) {
@content;
}
} @else if $max == null {
// xl: min-width only, no upper bound
@media only screen and (min-width: $min) {
@content;
}
} @else {
@media only screen and (min-width: $min) and (max-width: $max) {
@content;
}
}
} @else if $direction == 'up' {
@if $min == null {
// xs-up: no lower bound, always applies
@content;
} @else {
@media only screen and (min-width: $min) {
@content;
}
}
} @else if $direction == 'down' {
@if $max == null {
// xl-down: no upper bound, always applies
@content;
} @else {
@media only screen and (max-width: $max) {
@content;
}
}
} @else {
@warn "Unknown direction `#{$direction}`. Expected: only, up, down.";
}
}
}
assets/css/_core/_widgets/_fixed-button.scss
+4 -1
View File
@@ -17,7 +17,6 @@
transition: color 0.4s ease;
@include border-radius(full);
@include blur;
@extend .print-d-none;
[data-theme=dark] & {
background-color: darken($header-background-color-dark, 3%);
@@ -34,6 +33,10 @@
&:hover {
outline: none;
}
@include media('print') {
display: none !important;
}
}
.back-to-top {
assets/css/_core/_widgets/_github-corner.scss
+7 -1
View File
@@ -17,11 +17,11 @@
position: fixed;
top: 0;
@include z-index(fixed);
@extend .print-d-none;
:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
svg {
width: fixit-var(header-height);
height: fixit-var(header-height);
@@ -29,6 +29,7 @@
color: fixit-var(github-corner-color);
fill: fixit-var(github-corner-fill);
}
&.left {
left: 0;
@@ -36,7 +37,12 @@
transform: scale(-1, 1);
}
}
&.right {
right: 0;
}
@include media('print') {
display: none !important;
}
}
assets/css/_core/_widgets/_post-chat.scss
+3 -1
View File
@@ -1,4 +1,6 @@
#postChat_button,
.post-TianliGPT {
@extend .print-d-none;
@include media('print') {
display: none !important;
}
}
assets/css/_core/_widgets/_reading-progress.scss
+5 -2
View File
@@ -4,9 +4,12 @@
background-color: fixit-var(bg-progress, fixit-var(success));
position: fixed;
@include z-index(fixed);
@extend .print-d-none;
[data-theme=dark] & {
background-color: fixit-var(bg-progress-dark, fixit-var(global-font-color));
}
@include media('print') {
display: none !important;
}
}
assets/css/_core/_widgets/_scrollbar.scss
+8
View File
@@ -3,6 +3,10 @@
* {
scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
scrollbar-width: fixit-var(scrollbar-width);
@include media('print') {
scrollbar-width: none;
}
}
}
@@ -11,6 +15,10 @@
height: fixit-var(scrollbar-width-legacy);
width: fixit-var(scrollbar-width-legacy);
overflow: visible;
@include media('print') {
display: none;
}
}
::-webkit-scrollbar-button {
height: 0;
assets/css/_page/_archive/_terms.scss
+4
View File
@@ -38,6 +38,10 @@
padding-right: 1rem;
}
}
@include media('xs') {
width: 100%;
}
}
}
assets/css/_page/_index.scss
+17 -1
View File
@@ -5,10 +5,27 @@
.content {
[id] {
scroll-margin-top: fixit-var(scroll-mt);
[data-header-desktop='normal'] & {
@include media('xs', 'up') {
@include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
}
}
[data-header-mobile='normal'] & {
@include media('xs') {
@include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
}
}
}
}
@include blur;
@include media('print') {
width: 100% !important;
padding-top: 0 !important;
}
}
@import '_single';
@@ -17,5 +34,4 @@
@import 'home';
@import '404';
@import 'offline';
@import "media";
@import "patch";
assets/css/_page/_media.scss
-274
View File
@@ -1,274 +0,0 @@
@media only screen and (min-width: 1441px) {
%page-style {
width: ROUND(60%, 2px);
max-width: 1200px;
[data-page-style='wide'] & {
width: ROUND(64%, 2px);
max-width: 1600px;
}
[data-page-style='narrow'] & {
max-width: 800px;
}
}
}
@media only screen and (max-width: 1440px) {
%page-style {
width: ROUND(56%, 2px);
[data-page-style='wide'] & {
width: ROUND(60%, 2px);
}
}
}
@media only screen and (min-width: 1201px) {
.single .content {
:is(.code-block, .diagram-container) {
:is(.code-copy-btn, .diagram-copy-btn) {
display: none;
opacity: 0;
transform: scale(0.9);
transition:
display 0.25s allow-discrete,
opacity 0.25s,
transform 0.25s,
color 0.1s,
background-color 0.1s,
box-shadow 0.1s,
border-color 0.1s;
}
&:hover {
:is(.code-copy-btn, .diagram-copy-btn) {
display: block;
opacity: 1;
transform: scale(1);
@starting-style {
opacity: 0;
transform: scale(0.9);
}
}
}
}
}
}
@media only screen and (max-width: 1200px) {
%page-style {
width: ROUND(52%, 2px);
[data-page-style='wide'] & {
width: ROUND(56%, 2px);
}
}
#header-desktop .header-wrapper {
padding-right: 1rem;
}
.search-dropdown.desktop {
right: 1rem;
}
}
@media only screen and (max-width: 1200px) and (min-width: 961px) {
.wrapper {
main {
// Hide empty aside and expand article when only one aside is empty
aside:first-child:empty:has(~ aside:not(:empty)),
aside:first-child:not(:empty) ~ aside#toc-auto:empty {
display: none;
}
aside:first-child:empty:has(~ aside:not(:empty)) ~ article,
aside:first-child:not(:empty) ~ article:has(~ aside:empty) {
flex: 3;
}
}
// Adjust breadcrumb flex when asides are empty
&:has(main > aside:first-child:empty ~ aside:not(:empty)) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::before {
display: none;
}
}
&:has(main > aside:first-child:not(:empty) ~ aside#toc-auto:empty) .breadcrumb-container {
.breadcrumb {
flex: 3;
}
&::after {
display: none;
}
}
}
}
@media only screen and (max-width: 960px) {
%page-style {
width: ROUND(80%, 2px) !important;
}
aside,
.breadcrumb-container::before,
.breadcrumb-container::after {
display: none !important;
}
#toc-static {
display: block;
}
#header-desktop .header-wrapper {
padding-left: 1rem;
}
}
@media only screen and (min-width: 681px) {
.d-none-desktop {
display: none;
}
.breadcrumb-container.sticky {
body:not([data-header-desktop='sticky']) & {
top: 0;
}
// adjust the scroll margin top of the content anchors on the page
body:not([data-header-desktop='auto']) &+.fi-container .content [id] {
scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
}
}
[data-header-desktop='normal'] .page .content [id] {
@include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
}
[data-header-desktop='normal'] {
#toc-auto,
.aside-collection {
top: 0;
}
}
[data-header-desktop='sticky'] {
.page .content .highlight.code-block .code-header,
.page .content .code-tabs .tabs-header {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
}
@media only screen and (max-width: 680px) {
#header-desktop {
display: none;
}
#header-mobile {
display: block;
}
.d-none-mobile {
display: none !important;
}
.breadcrumb-container.sticky {
body:not([data-header-mobile='sticky']) & {
top: 0;
}
// adjust the scroll margin top of the content anchors on the page
body:not([data-header-mobile='auto']) &+.fi-container .content [id] {
scroll-margin-top: calc(#{fixit-var(scroll-mt)} + #{fixit-var(breadcrumb-height)});
}
}
[data-header-mobile='normal'] .page .content [id] {
@include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
}
[data-header-mobile='normal'] {
#toc-auto,
.aside-collection {
top: 0;
}
}
[data-header-mobile='sticky'] {
.page .content .highlight.code-block .code-header,
.page .content .code-tabs .tabs-header {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
%page-style {
width: 100% !important;
}
.page {
.taxonomy-cards {
.card-item {
width: 100%;
}
}
}
footer {
.footer-container {
font-size: 0.618rem;
}
}
.pagination .page-item {
margin: 0 5px;
}
}
@media only print {
// 确保打印时没有 scrollbar
:root {
@include set-fixit-var(scrollbar-width, none !important);
}
*::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.scrollbar-thin {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
@page {
size: A4 portrait;
margin: 1.27cm;
}
.page {
width: 100% !important;
padding-top: 0 !important;
&.single {
.single-title,
.single-subtitle,
.post-meta {
text-align: center;
}
}
h1:not(.single-title),
.page-break-before {
page-break-before: always;
}
.page-break-after {
page-break-after: always;
}
}
.print-d-none {
display: none !important;
}
}
assets/css/_page/_patch.scss
-50
View File
@@ -19,56 +19,6 @@
animation-name: #{$prefix}pulse !important;
}
/**
* After the CSS round() function exceeds 90% browser support in the future, this code can be removed
* See https://caniuse.com/mdn-css_types_round
*/
@supports not (width: ROUND(60%, 2px)) {
@media only screen and (min-width: 1441px) {
%page-style {
width: 60%;
max-width: 1200px;
[data-page-style='wide'] & {
width: 64%;
max-width: 1600px;
}
[data-page-style='narrow'] & {
max-width: 800px;
}
}
}
@media only screen and (max-width: 1440px) {
%page-style {
width: 56%;
[data-page-style='wide'] & {
width: 60%;
}
}
}
@media only screen and (max-width: 1200px) {
%page-style {
width: 52%;
[data-page-style='wide'] & {
width: 56%;
}
}
}
@media only screen and (max-width: 960px) {
%page-style {
width: 80% !important;
}
}
@media only screen and (max-width: 680px) {
%page-style {
width: 100% !important;
}
}
}
// fix ZenUML intersection height error
#zenuml-intersection-detector-container {
display: none;
assets/css/_page/_single/_code.scss
+39 -3
View File
@@ -237,7 +237,10 @@ pre {
[role='button'] {
padding: 0.4rem;
@extend .print-d-none;
@include media('print') {
display: none !important;
}
}
.copy-btn[data-copied] .fa-clone {
@@ -264,6 +267,22 @@ pre {
@include set-fixit-var(code-type, '"#{$text}"');
}
}
[data-header-desktop='sticky'] & {
@include media('xs', 'up') {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
[data-header-mobile='sticky'] & {
@include media('xs') {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
@include media('print') {
top: initial;
}
}
&.line-wrapping .line-wrap-btn,
@@ -618,8 +637,9 @@ pre {
@include user-select(none);
@include border-radius;
// mobile style
// padding-inline: 0.6rem;
@include media('xs') {
padding-inline: 0.6rem;
}
}
&:not(:has(.tab-item:hover)) .tab-item.active,
@@ -671,6 +691,22 @@ pre {
}
}
}
[data-header-desktop='sticky'] & {
@include media('xs', 'up') {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
[data-header-mobile='sticky'] & {
@include media('xs') {
top: calc(#{fixit-var(header-height)} + #{fixit-var(breadcrumb-height)});
}
}
@include media('print') {
top: initial;
}
}
.tabs-content {
assets/css/_page/_single/_collections.scss
+8 -2
View File
@@ -7,7 +7,6 @@
position: relative;
@include border-radius(0.5rem);
@include user-select(none);
@extend .print-d-none;
[data-theme=dark] & {
background-color: lighten($global-background-color-dark, 3%);
@@ -81,6 +80,10 @@
}
}
}
@include media('print') {
display: none !important;
}
}
// Collection aside container
@@ -90,7 +93,10 @@
box-sizing: border-box;
@include overflow-wrap(break-word);
@include blur;
@extend .print-d-none;
@include media('print') {
display: none !important;
}
}
// Collection List
assets/css/_page/_single/_comment.scss
+5 -2
View File
@@ -1,8 +1,11 @@
>#comments {
> #comments {
padding: 2rem 0;
@extend .print-d-none;
iframe {
width: 100%;
}
@include media('print') {
display: none !important;
}
}
assets/css/_page/_single/_diagram-copy-btn.scss
+4 -3
View File
@@ -18,12 +18,9 @@
border-color: fixit-var(dcb-border-color, #d1d9e0);
background-color: fixit-var(dcb-background-color, #f6f8fa);
box-shadow: fixit-var(dcb-box-shadow, 0px 1px 0px 0px #1f23280a);
transition-duration: 0.1s;
transition-property: color, background-color, box-shadow, border-color;
@include user-select(none);
@include border-radius;
@include z-index(base);
@extend .print-d-none;
[data-theme=dark] & {
@include set-fixit-vars((
@@ -59,4 +56,8 @@
color: fixit-var(global-link-hover-color);
}
}
@include media('print') {
display: none !important;
}
}
assets/css/_page/_single/_footer.scss
+11 -3
View File
@@ -42,10 +42,13 @@
}
.post-info-share {
@extend .print-d-none;
a * {
vertical-align: text-bottom;
}
@include media('print') {
display: none !important;
}
}
}
}
@@ -57,7 +60,9 @@
font-size: 0.9rem;
section:last-child {
@extend .print-d-none;
@include media('print') {
display: none !important;
}
}
}
@@ -81,7 +86,6 @@
justify-content: space-between;
gap: 1.5rem;
padding-block: 0.5rem;
@extend .print-d-none;
.post-nav-item {
flex: 1;
@@ -101,5 +105,9 @@
transform: translateX(4px);
}
}
@include media('print') {
display: none !important;
}
}
}
assets/css/_page/_single/_index.scss
+50 -5
View File
@@ -26,6 +26,10 @@
margin-right: 0.25em;
color: fixit-var(success);
}
@include media('print') {
text-align: center;
}
}
.single-subtitle {
@@ -33,17 +37,16 @@
font-size: 1.2rem;
font-weight: normal;
line-height: 1.15;
@include media('print') {
text-align: center;
}
}
.post-meta {
font-size: 0.875rem;
color: fixit-var(secondary);
.comment-visitors,
.comment-count {
@extend .print-d-none;
}
span {
display: inline-block;
}
@@ -64,6 +67,15 @@
object-fit: cover;
}
}
@include media('print') {
text-align: center;
.comment-visitors,
.comment-count {
display: none;
}
}
}
.featured-image {
@@ -125,6 +137,7 @@
.content {
margin-block: 1rem;
> h1,
> h2 {
font-size: 1.5em;
@@ -458,6 +471,9 @@
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
// neutralize the margin-right setting of .katex .vlist-t2
// to prevent scrollbars from appearing when the width is not full
padding-right: 2px;
}
.katex-error {
padding: 0.14em 0.28em;
@@ -490,6 +506,35 @@
json-viewer[boxed] + json-viewer[boxed] {
margin-top: 0.5rem;
}
@include media('lg', 'up') {
:is(.code-block, .diagram-container) {
:is(.code-copy-btn, .diagram-copy-btn) {
display: none;
opacity: 0;
transform: scale(0.9);
transition:
display 0.25s allow-discrete,
opacity 0.25s,
transform 0.25s,
color 0.1s,
background-color 0.1s,
box-shadow 0.1s,
border-color 0.1s;
}
&:hover {
:is(.code-copy-btn, .diagram-copy-btn) {
display: block;
opacity: 1;
transform: scale(1);
@starting-style {
opacity: 0;
transform: scale(0.9);
}
}
}
}
}
}
@import '_shortcodes';
assets/css/_page/_single/_reward.scss
+4 -1
View File
@@ -1,7 +1,6 @@
.post-reward {
padding: 1rem;
text-align: center;
@extend .print-d-none;
&:has(.reward-ways:empty) {
display: none;
@@ -85,4 +84,8 @@
border-color: lighten($reward-color, 5%);
}
}
@include media('print') {
display: none !important;
}
}
assets/css/_page/_single/_shortcodes/_admonition.scss
+1
View File
@@ -60,6 +60,7 @@
margin: 0;
}
// reset sticky header position in code block when inside admonition
.code-block .code-header,
.code-tabs .tabs-header {
top: initial !important;
assets/css/_page/_single/_shortcodes/_mermaid.scss
+2 -2
View File
@@ -43,10 +43,10 @@
padding: 0;
}
@media only print {
@include media('print') {
.mermaid,
.mermaid-dark {
display: none;
display: none !important;
}
.mermaid-neutral {
height: auto;
assets/css/_page/_single/_toc.scss
+8 -1
View File
@@ -94,7 +94,6 @@
visibility: hidden;
@include overflow-wrap(break-word);
@include blur;
@extend .print-d-none;
[data-header-desktop='normal'] & {
@include set-fixit-var(scroll-mt, fixit-var(global-scroll-margin-top));
@@ -157,6 +156,10 @@
}
}
}
@include media('print') {
display: none !important;
}
}
#toc-static {
@@ -211,6 +214,10 @@
}
}
}
@include media('sm', 'down') {
display: block;
}
}
#toc-dialog {