asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Improve SCSS comment symbols: change // to /* */

Browse source
This commit is contained in:
Cotes Chung 2022-02-14 23:18:24 +08:00
parent 508d3c5c6a
commit 4986db1204
4 changed files with 57 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
_sass/addon/commons.scss
View file

@ -180,7 +180,7 @@ footer {
} }
} }
i { // fontawesome icons i { /* fontawesome icons */
&.far, &.far,
&.fas { &.fas {
@extend %no-cursor; @extend %no-cursor;
@ -211,7 +211,7 @@ img[data-src] {
&.shadow { &.shadow {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
box-shadow: none !important; // cover the Bootstrap 4.6.1 styles box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
} }
@extend %img-caption; @extend %img-caption;
@ -247,7 +247,7 @@ img[data-src] {
} }
#panel-wrapper { #panel-wrapper {
// the headings /* the headings */
.panel-heading { .panel-heading {
@include label(inherit); @include label(inherit);
} }
@ -313,7 +313,7 @@ img[data-src] {
margin-bottom: 0; margin-bottom: 0;
} }
// [scroll-focus] added by `smooth-scroll.js` /* [scroll-focus] added by `smooth-scroll.js` */
&:target:not([scroll-focus]), &:target:not([scroll-focus]),
&[scroll-focus=true] > p { &[scroll-focus=true] > p {
background-color: var(--footnote-target-bg); background-color: var(--footnote-target-bg);
@ -334,7 +334,7 @@ img[data-src] {
transition: background-color 1.5s ease-in-out; transition: background-color 1.5s ease-in-out;
} }
// [scroll-focus] added by `smooth-scroll.js` /* [scroll-focus] added by `smooth-scroll.js` */
@at-root sup:target:not([scroll-focus]), @at-root sup:target:not([scroll-focus]),
sup[scroll-focus=true] > a#{&} { sup[scroll-focus=true] > a#{&} {
background-color: var(--footnote-target-bg); background-color: var(--footnote-target-bg);
@ -354,7 +354,7 @@ img[data-src] {
/* --- Begin of Markdown table style --- */ /* --- Begin of Markdown table style --- */
// it will be created by Liquid /* it will be created by Liquid */
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -388,8 +388,8 @@ img[data-src] {
@extend %table-cell; @extend %table-cell;
} }
} }
} // tbody } /* tbody */
}// table }/* table */
} }
/* --- post --- */ /* --- post --- */
@ -405,7 +405,7 @@ img[data-src] {
@extend %no-cursor; @extend %no-cursor;
} }
// created by `_includes/img-extra.html` /* created by `_includes/img-extra.html` */
&.popup { &.popup {
cursor: zoom-in; cursor: zoom-in;
@ -419,7 +419,7 @@ img[data-src] {
@extend %link-hover; @extend %link-hover;
} }
} }
} // a } /* a */
} }
@ -469,11 +469,11 @@ img[data-src] {
} }
ul { ul {
// attribute 'hide-bullet' was added by liquid /* attribute 'hide-bullet' was added by liquid */
.task-list-item[hide-bullet] { .task-list-item[hide-bullet] {
list-style-type: none; list-style-type: none;
> i { // checkbox icon > i { /* checkbox icon */
margin: 0 0.4rem 0.2rem -1.4rem; margin: 0 0.4rem 0.2rem -1.4rem;
vertical-align: middle; vertical-align: middle;
color: var(--checkbox-color); color: var(--checkbox-color);
@ -490,7 +490,7 @@ img[data-src] {
vertical-align: middle; vertical-align: middle;
} }
} // ul } /* ul */
> ol, > ol,
> ul { > ul {
@ -498,7 +498,7 @@ img[data-src] {
li { li {
ol, ol,
ul { // sub list ul { /* sub list */
padding-left: 2rem; padding-left: 2rem;
margin-top: 0.3rem; margin-top: 0.3rem;
} }
@ -516,7 +516,7 @@ img[data-src] {
margin-left: 1rem; margin-left: 1rem;
} }
} // .post-content } /* .post-content */
.tag:hover { .tag:hover {
@extend %tag-hover; @extend %tag-hover;
@ -617,14 +617,14 @@ img[data-src] {
/* --- Overriding --- */ /* --- Overriding --- */
// magnific-popup /* magnific-popup */
figure .mfp-title { figure .mfp-title {
text-align: center; text-align: center;
padding-right: 0; padding-right: 0;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
// mermaid /* mermaid */
.mermaid { .mermaid {
text-align: center; text-align: center;
} }
@ -672,7 +672,7 @@ $sidebar-display: "sidebar-display";
border-radius: 50%; border-radius: 50%;
border: 2px solid rgba(222, 222, 222, 0.7); border: 2px solid rgba(222, 222, 222, 0.7);
overflow: hidden; overflow: hidden;
transform: translateZ(0); // fixed the zoom in Safari transform: translateZ(0); /* fixed the zoom in Safari */
-webkit-transition: border-color 0.35s ease-in-out; -webkit-transition: border-color 0.35s ease-in-out;
-moz-transition: border-color 0.35s ease-in-out; -moz-transition: border-color 0.35s ease-in-out;
transition: border-color 0.35s ease-in-out; transition: border-color 0.35s ease-in-out;
@ -696,7 +696,7 @@ $sidebar-display: "sidebar-display";
transform: scale(1.2); transform: scale(1.2);
} }
} }
} // #avatar } /* #avatar */
.site-title { .site-title {
a { a {
@ -715,7 +715,7 @@ $sidebar-display: "sidebar-display";
line-height: 1.2rem; line-height: 1.2rem;
word-spacing: 1px; word-spacing: 1px;
margin: 0.5rem 1.5rem 0.5rem 1.5rem; margin: 0.5rem 1.5rem 0.5rem 1.5rem;
min-height: 3rem; // avoid vertical shifting in multi-line words min-height: 3rem; /* avoid vertical shifting in multi-line words */
user-select: none; user-select: none;
} }
@ -759,7 +759,7 @@ $sidebar-display: "sidebar-display";
width: 100%; width: 100%;
} }
&::after { // the cursor &::after { /* the cursor */
display: table; display: table;
visibility: hidden; visibility: hidden;
content: ""; content: "";
@ -772,7 +772,7 @@ $sidebar-display: "sidebar-display";
pointer-events: none; pointer-events: none;
} }
} }
} // li } /* li */
@mixin fix-cursor($top) { @mixin fix-cursor($top) {
top: $top; top: $top;
@ -797,9 +797,9 @@ $sidebar-display: "sidebar-display";
} }
} }
} // @for } /* @for */
} // ul } /* ul */
.sidebar-bottom { .sidebar-bottom {
margin-bottom: 2.1rem; margin-bottom: 2.1rem;
@ -850,9 +850,9 @@ $sidebar-display: "sidebar-display";
border-radius: 50%; border-radius: 50%;
} }
} // .sidebar-bottom } /* .sidebar-bottom */
} // #sidebar } /* #sidebar */
@media (hover: hover) { @media (hover: hover) {
#sidebar ul > li:last-child::after { #sidebar ul > li:last-child::after {
@ -897,7 +897,7 @@ $sidebar-display: "sidebar-display";
} }
#topbar { #topbar {
i { // icons i { /* icons */
color: #999; color: #999;
} }
@ -919,7 +919,7 @@ $sidebar-display: "sidebar-display";
} }
} }
} }
} // #topbar } /* #topbar */
#sidebar-trigger, #sidebar-trigger,
#search-trigger { #search-trigger {
@ -1019,7 +1019,7 @@ $sidebar-display: "sidebar-display";
margin-bottom: 1rem; margin-bottom: 1rem;
} }
i { // icons i { /* icons */
color: #818182; color: #818182;
margin-right: 0.15rem; margin-right: 0.15rem;
font-size: 80%; font-size: 80%;
@ -1033,7 +1033,7 @@ $sidebar-display: "sidebar-display";
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }
} // #search-results } /* #search-results */
#topbar-title { #topbar-title {
display: none; display: none;
@ -1103,7 +1103,7 @@ $sidebar-display: "sidebar-display";
} }
} }
div.row:first-of-type:last-of-type { // alone div.row:first-of-type:last-of-type { /* alone */
margin-bottom: 4rem; margin-bottom: 4rem;
} }
} }
@ -1156,7 +1156,7 @@ $sidebar-display: "sidebar-display";
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
$footer-height: $footer-height-mobile; // overwrite $footer-height: $footer-height-mobile; /* overwrite */
footer { footer {
height: $footer-height; height: $footer-height;
@ -1244,7 +1244,7 @@ $sidebar-display: "sidebar-display";
#sidebar { #sidebar {
@include slide; @include slide;
transform: translateX(-#{$sidebar-width}); // hide transform: translateX(-#{$sidebar-width}); /* hide */
-webkit-transform: translateX(-#{$sidebar-width}); -webkit-transform: translateX(-#{$sidebar-width});
.cursor { .cursor {
@ -1315,7 +1315,7 @@ $sidebar-display: "sidebar-display";
} }
} }
} // max-width: 849px } /* max-width: 849px */
@media all and (max-width: 849px) and (orientation: portrait) { @media all and (max-width: 849px) and (orientation: portrait) {
[data-topbar-visible=false] #topbar-wrapper { [data-topbar-visible=false] #topbar-wrapper {
@ -1620,7 +1620,7 @@ $sidebar-display: "sidebar-display";
margin-top: 0.3rem; margin-top: 0.3rem;
} }
} // .profile-wrapper (min-width: 1650px) } /* .profile-wrapper (min-width: 1650px) */
ul { ul {
padding-left: 2.5rem; padding-left: 2.5rem;
@ -1667,7 +1667,7 @@ $sidebar-display: "sidebar-display";
@include ml-mr(0.15rem); @include ml-mr(0.15rem);
height: $icon-block-size; height: $icon-block-size;
margin-bottom: 0.5rem; // wrap line margin-bottom: 0.5rem; /* wrap line */
} }
i { i {
@ -1690,9 +1690,9 @@ $sidebar-display: "sidebar-display";
top: 0.9rem; top: 0.9rem;
} }
} // .sidebar-bottom } /* .sidebar-bottom */
} // #sidebar } /* #sidebar */
footer > div.d-flex { footer > div.d-flex {
width: 92%; width: 92%;
@ -1705,7 +1705,7 @@ $sidebar-display: "sidebar-display";
} }
} }
} // min-width: 1650px } /* min-width: 1650px */
@media all and (min-width: 1700px) { @media all and (min-width: 1700px) {
#topbar-wrapper { #topbar-wrapper {

2
_sass/addon/module.scss
View file

@ -16,7 +16,7 @@
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
&:focus { &:focus {
outline: none; // avoid outline in Safari outline: none; /* avoid outline in Safari */
} }
} }
} }

20
_sass/addon/syntax.scss
View file

@ -99,7 +99,7 @@ $code-radius: 6px;
user-select: none; user-select: none;
} }
} //.highlight } /* .highlight */
code { code {
-webkit-hyphens: none; -webkit-hyphens: none;
@ -122,7 +122,7 @@ code {
} }
a > &.highlighter-rouge { a > &.highlighter-rouge {
padding-bottom: 0; // show link's underlinke padding-bottom: 0; /* show link's underlinke */
color: inherit; color: inherit;
} }
@ -142,8 +142,10 @@ code {
td.rouge-code { td.rouge-code {
@extend %code-snippet-padding; @extend %code-snippet-padding;
// Prevent some browser extends from /*
// changing the URL string of code block. Prevent some browser extends from
changing the URL string of code block.
*/
a { a {
color: inherit !important; color: inherit !important;
border-bottom: none !important; border-bottom: none !important;
@ -197,9 +199,9 @@ div {
($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color); ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
} }
// the label block /* the label block */
span { span {
// label icon /* label icon */
i { i {
font-size: 1rem; font-size: 1rem;
margin-right: 0.4rem; margin-right: 0.4rem;
@ -212,10 +214,10 @@ div {
@at-root [file] #{&} > i { @at-root [file] #{&} > i {
position: relative; position: relative;
top: 1px; // center the file icon top: 1px; /* center the file icon */
} }
// label text /* label text */
&::after { &::after {
content: attr(data-label-text); content: attr(data-label-text);
font-size: 0.85rem; font-size: 0.85rem;
@ -224,7 +226,7 @@ div {
} }
} }
// clipboard /* clipboard */
button { button {
@extend %cursor-pointer; @extend %cursor-pointer;

12
_sass/addon/variables.scss
View file

@ -4,24 +4,24 @@
/* sidebar */ /* sidebar */
$sidebar-width: 260px !default; // the basic width $sidebar-width: 260px !default; /* the basic width */
$sidebar-width-small: 210px !default; // screen width: >= 850px, <= 1199px (iPad landscape) $sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
$sidebar-width-large: 350px !default; // screen width: >= 1650px $sidebar-width-large: 350px !default; /* screen width: >= 1650px */
/* tabs of sidebar */ /* tabs of sidebar */
$tab-count: 5 !default; // backward compatible (version <= 4.0.2) $tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
$tab-height: 3rem !default; $tab-height: 3rem !default;
$tab-cursor-height: 1.6rem !default; $tab-cursor-height: 1.6rem !default;
$cursor-width: 2px !default; // the cursor width of the selected tab $cursor-width: 2px !default; /* the cursor width of the selected tab */
/* other framework sizes */ /* other framework sizes */
$topbar-height: 3rem !default; $topbar-height: 3rem !default;
$footer-height: 5rem !default; $footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; // screen width: <= 576px $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$main-content-max-width: 1150px !default; $main-content-max-width: 1150px !default;