kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

toc enable switch position fixed, switch color customizing.

This commit is contained in:
zzossig 2019-11-12 20:24:17 +09:00
parent ee4bd8bb4b
commit a7a06ca8bb
15 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/sass/abstracts/_mixins.scss
View File

@ -205,3 +205,8 @@
-ms-transform-origin: $origin;
transform-origin: $origin;
}
@mixin clippy() {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
<path style="stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');
}

2
assets/sass/components/_switch.scss
View File

@ -3,7 +3,7 @@
display: inline-block;
width: 28px;
height: 14px;
margin-bottom: 0.6rem;
margin-top: 0.7rem;
margin-left: 1rem;
}

3
assets/sass/components/_toc.scss
View File

@ -2,7 +2,7 @@
width: 100%;
max-width: 250px;
position: fixed;
top: 6.5rem;
top: 7rem;
font-size: 0.85rem;
padding-left: 0.5rem;
z-index: z('toc');
@ -14,6 +14,7 @@
&__flexbox {
@include flexbox();
@include align-items(center);
position: fixed;
}
&__title {

3
assets/sass/main.scss
View File

@ -121,6 +121,9 @@ $gtt_background_color: {{ $scr.Get "gtt_background_color" }};
$gtt_hover_color: {{ $scr.Get "gtt_hover_color" }};
$gtt_hover_background_color: {{ $scr.Get "gtt_hover_background_color" }};
$whoami_border_color: {{ $scr.Get "whoami_border_color" }};
$switch_background_color: {{ $scr.Get "switch_background_color" }};
$switch_button_color: {{ $scr.Get "switch_button_color" }};
$switch_active_color: {{ $scr.Get "switch_active_color" }};
@import 'abstracts/variables';
@import 'abstracts/mixins';

6
assets/sass/pages/_single.scss
View File

@ -116,7 +116,7 @@
}
.copy-to-clipboard {
background-image: url(images/clippy.svg);
@include clippy();
background-position: 50% 50%;
background-size: 16px 16px;
background-repeat: no-repeat;
@ -133,7 +133,7 @@
@include transition(all, 0.2s, ease);
}
.copy-to-clipboard:hover {
@include translateY(-0.1rem);
@include translateY(-0.05rem);
}
pre .copy-to-clipboard {
position: absolute;
@ -143,7 +143,7 @@
@include transition(all, 0.2s, ease);
}
pre .copy-to-clipboard:hover {
@include translateY(-0.1rem);
@include translateY(-0.05rem);
}
blockquote {

3
assets/sass/themes/_custom.scss
View File

@ -91,4 +91,7 @@ $custom: (
gtt-hover-color: $gtt_hover_color,
gtt-hover-background-color: $gtt_hover_background_color,
whoami-border-color: $whoami_border_color,
switch-background-color: $switch_background_color,
switch-button-color: $switch_button_color,
switch-active-color: $switch_active_color,
) !default;

3
assets/sass/themes/_hacker.scss
View File

@ -95,4 +95,7 @@ $hacker: (
gtt-hover-color: #E3CD26,
gtt-hover-background-color: lighten(#252526, 5%),
whoami-border-color: #996287,
switch-background-color: #403E41,
switch-button-color: #FCFCFA,
switch-active-color: #FF6188,
);

5
assets/sass/themes/_light.scss
View File

@ -6,7 +6,7 @@ $light: (
title-color: #607d8b,
meta-color: #424242,
body-color: #424242,
hr-color: #eeeeee,
hr-color: #dbdbdb,
body-background-color: #fafafa,
backdrop-background-color: #e0e0e0,
dropdown-border-color: #bdbdbd,
@ -92,4 +92,7 @@ $light: (
gtt-hover-color: #607d8b,
gtt-hover-background-color: darken(#eeeeee, 10%),
whoami-border-color: #607d8b,
switch-background-color: #bdbdbd,
switch-button-color: #FCFCFA,
switch-active-color: #FF6188,
);

5
assets/sass/themes/_solarized.scss
View File

@ -9,7 +9,7 @@ $solarized: (
title-color: $primary-color,
meta-color: lighten($primary-color, 5%),
body-color: #424242,
hr-color: lighten($secondary-color, 25%),
hr-color: $primary-color,
body-background-color: #FDF7E3,
backdrop-background-color: #DDD6C7,
dropdown-border-color: $primary-color,
@ -95,4 +95,7 @@ $solarized: (
gtt-hover-color: $primary-color,
gtt-hover-background-color: darken(#EEE8D5, 5%),
whoami-border-color: $primary-color,
switch-background-color: darken(#EEE8D5, 10%),
switch-button-color: #FCFCFA,
switch-active-color: #FF6188,
);

5
data/skin.toml
View File

@ -90,4 +90,7 @@ gtt_color = "inherit"
gtt_background_color = "inherit"
gtt_hover_color = "inherit"
gtt_hover_background_color = "inherit"
whoami_border_color = "inherit"
whoami_border_color = "inherit"
switch_background_color = "inherit"
switch_button_color = "inehrit"
switch_active_color = "inehrit"

1
exampleSite/static/css/images/clippy.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 289 B

5
layouts/partials/functions/parse_theme.html
View File

@ -92,4 +92,7 @@
{{- $scr.Set "gtt_background_color" $skin.gtt_background_color -}}
{{- $scr.Set "gtt_hover_color" $skin.gtt_hover_color -}}
{{- $scr.Set "gtt_hover_background_color" $skin.gtt_hover_background_color -}}
{{- $scr.Set "whoami_border_color" $skin.whoami_border_color -}}
{{- $scr.Set "whoami_border_color" $skin.whoami_border_color -}}
{{- $scr.Set "switch_background_color" $skin.switch_background_color -}}
{{- $scr.Set "switch_button_color" $skin.switch_button_color -}}
{{- $scr.Set "switch_active_color" $skin.switch_active_color -}}

4
layouts/partials/sidebar/sidebar-single.html
View File

@ -116,9 +116,9 @@
// toc visibility
$("#toggle-toc").change(function() {
if (this.checked) {
$('.toc').removeClass('hide');
$('.toc').fadeIn(200);
} else {
$('.toc').removeClass('hide').addClass('hide');
$('.toc').fadeOut(200);
}
});
});

1
static/css/images/clippy.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 289 B

3
static/images/clippy.svg
View File

@ -1 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="#9e9e9e" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M 4 2 C 2.895 2 2 2.895 2 4 L 2 17 C 2 17.552 2.448 18 3 18 C 3.552 18 4 17.552 4 17 L 4 4 L 17 4 C 17.552 4 18 3.552 18 3 C 18 2.448 17.552 2 17 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 289 B

After

Width:  |  Height:  |  Size: 479 B