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

Add a hook for custom variables (fix #355)

Browse source
This commit is contained in:
Cotes Chung 2021-07-04 21:01:11 +08:00
parent 5f1e6e9350
commit c98a41317f
5 changed files with 38 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
_sass/addon/commons.scss
View file

@ -596,8 +596,6 @@ figure .mfp-title {
/* --- sidebar layout --- */ /* --- sidebar layout --- */
$tab-count: 5 !default;
$sidebar-display: "sidebar-display"; $sidebar-display: "sidebar-display";
#sidebar { #sidebar {
@ -608,7 +606,7 @@ $sidebar-display: "sidebar-display";
left: 0; left: 0;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
width: $sidebar-width-medium; width: $sidebar-width;
z-index: 99; z-index: 99;
background: var(--sidebar-bg); background: var(--sidebar-bg);
@ -717,7 +715,6 @@ $sidebar-display: "sidebar-display";
width: 100%; width: 100%;
&:last-child { &:last-child {
$cursor-width: 3px;
a { a {
position: relative; position: relative;
@ -846,7 +843,7 @@ $sidebar-display: "sidebar-display";
height: $topbar-height; height: $topbar-height;
position: fixed; position: fixed;
top: 0; top: 0;
left: 260px; /* same as sidebar width */ left: $sidebar-width; /* same as sidebar width */
right: 0; right: 0;
transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out;
z-index: 50; z-index: 50;
@ -1090,7 +1087,7 @@ $sidebar-display: "sidebar-display";
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
$footer-height: 6rem; // overwrite $footer-height: $footer-height-mobile; // overwrite
#main > div.row:first-child > div:first-child { #main > div.row:first-child > div:first-child {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height}); min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
@ -1164,7 +1161,7 @@ $sidebar-display: "sidebar-display";
#topbar-wrapper, #topbar-wrapper,
#main-wrapper { #main-wrapper {
transform: translateX(#{$sidebar-width-medium}); transform: translateX(#{$sidebar-width});
} }
} }
@ -1172,8 +1169,8 @@ $sidebar-display: "sidebar-display";
#sidebar { #sidebar {
@extend %slide; @extend %slide;
transform: translateX(-#{$sidebar-width-medium}); // hide transform: translateX(-#{$sidebar-width}); // hide
-webkit-transform: translateX(-#{$sidebar-width-medium}); -webkit-transform: translateX(-#{$sidebar-width});
.cursor { .cursor {
-webkit-transition: none; -webkit-transition: none;
@ -1271,7 +1268,7 @@ $sidebar-display: "sidebar-display";
} }
#main-wrapper { #main-wrapper {
margin-left: $sidebar-width-medium; margin-left: $sidebar-width;
} }
.profile-wrapper { .profile-wrapper {

2
_sass/addon/syntax.scss
View file

@ -39,8 +39,6 @@ html[mode=dark] {
padding: 1.5rem; padding: 1.5rem;
} }
$code-font-size: 0.85rem;
div > pre { div > pre {
@extend %code-snippet-bg; @extend %code-snippet-bg;
@extend %code-snippet-radius; @extend %code-snippet-radius;

38
_sass/addon/variables.scss
View file

@ -1,22 +1,34 @@
/* /*
* Mainly scss variables * The SCSS variables
*/ */
/* --- ↓ width and height ---- */ /* sidebar */
$tab-height: 3.2rem; $sidebar-width: 260px !default; // the basic width
$tab-cursor-height: 1.6rem; $sidebar-width-small: 210px !default; // screen width: >= 850px, <= 1199px (iPad landscape)
$sidebar-width-large: 350px !default; // screen width: >= 1650px
$sidebar-width-small: 210px; /* tabs of sidebar */
$sidebar-width-medium: 260px;
$sidebar-width-large: 350px;
$topbar-height: 3rem; $tab-count: 5 !default; // backward compatible (version <= 4.0.2)
$tab-height: 3.2rem !default;
$tab-cursor-height: 1.6rem !default;
$footer-height: 5rem; $cursor-width: 3px !default; // the cursor width of the selected tab
$main-content-max-width: 1150px; /* other framework sizes */
$panel-max-width: 300px; $topbar-height: 3rem !default;
$post-extend-min-height: 35rem; $footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; // screen width: <= 576px
$main-content-max-width: 1150px !default;
$panel-max-width: 300px !default;
$post-extend-min-height: 35rem !default;
/* syntax highlight */
$code-font-size: 0.85rem !default;

3
assets/css/style.scss
View file

@ -1,7 +1,6 @@
--- ---
--- ---
// see: /_sass/addon/commons.scss {% include_relative variables-hook.scss %}
$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
@import "jekyll-theme-chirpy"; @import "jekyll-theme-chirpy";

5
assets/css/variables-hook.scss Normal file
View file

@ -0,0 +1,5 @@
/*
Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
*/
$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab