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

custom scrollbar, better search ui, animation effect for fixing font flickering

This commit is contained in:
zzossig 2020-01-17 15:22:33 +09:00
parent c7b2ebc3b8
commit 28479beb60
13 changed files with 123 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -242,3 +242,38 @@
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>');
}
@mixin webkit-scrollbars($foreground-color, $background-color) {
&::-webkit-scrollbar {
width: 0.45em;
height: 0.45em;
}
&::-webkit-scrollbar-thumb {
background: $foreground-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
}
@mixin webkit-scrollbars2($foreground-color, $background-color) {
::-webkit-scrollbar {
width: 0.45em;
height: 0.45em;
}
::-webkit-scrollbar-thumb {
background: $foreground-color;
}
::-webkit-scrollbar-track {
background: $background-color;
}
}
@mixin moz-scrollbars($foreground-color, $background-color) {
scrollbar-width: thin;
scrollbar-color: $foreground-color $background-color;
}

2
assets/sass/base/_animation.scss
View File

@ -23,4 +23,4 @@
transform: translate(0,0);
opacity: 1;
}
}
}

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

@ -3,7 +3,7 @@
@include justify-content(center);
@include align-items(flex-start);
@include flex-direction(column);
@include animation('slide-in-down .5s .2s 1 ease both');
@include animation('slide-in-down .4s .2s 1 ease both');
width: 100%;
font-family: $title-font;

37
assets/sass/components/_search.scss
View File

@ -5,11 +5,17 @@
z-index: z('search');
margin-bottom: 0.5rem;
@include box-shadow(0, 0, 0, 3px, transparent);
@include transition(all, 0.15s, ease-in);
@include flexbox();
@include align-items(center);
@include themify($themes) {
border: 2px solid themed('search-border-color');
background-color: themed("search-background-color");
&:focus-within {
border: 2px solid themed('search-border-active-color');
@include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
}
}
.icon {
@ -42,8 +48,15 @@
margin-top: 0.25rem;
max-height: 350px;
overflow: auto;
a {
text-decoration: none !important;
&:not(:last-child) {
@include themify($themes) {
font-family: $title-font;
border-bottom: 2px dashed themed("search-placeholder-color");
}
}
}
}
@ -57,7 +70,6 @@
.menu-item {
padding: 0.25rem;
&__title {
font-size: 1rem;
@include themify($themes) {
@ -77,6 +89,10 @@
}
#search-results {
@include themify($themes) {
// @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
&.dropdown {
display: none;
&.is-active {
@ -91,11 +107,16 @@
color: themed('search-content-color');
background-color: themed('search-content-background-color');
}
}
}
}
}
.dropdown {
&-content {
@include themify($themes) {
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
@include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
@include flexbox();
@include flex-direction(column);
}
@ -126,6 +147,10 @@
width: 100%;
overflow: hidden;
@include themify($themes) {
@include webkit-scrollbars2(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
&__top {
width: 100%;
height: $grid_navbar_height;
@ -180,11 +205,13 @@
&__body {
width: 100%;
height: 100vh;
overflow: auto;
overflow-y: auto;
@include themify($themes) {
color: themed('body-color');
background-color: themed('body-background-color');
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
}

5
assets/sass/components/_summary.scss
View File

@ -1,6 +1,7 @@
.summary-card {
margin: 0 0.5rem;
padding: 0 0.5rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
.title {
a {
@ -38,6 +39,7 @@
&__image {
width: 100%;
height: 100%;
@include animation('slide-in-left .15s .6s 1 ease-in both');
&-wrapper {
height: 100%;
@ -79,6 +81,7 @@
.summary-classic {
padding: 0 1rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
.title {
font-size: 24px;
@ -126,6 +129,7 @@
width: 100%;
height: 100%;
object-fit: contain;
@include animation('slide-in-left .1s .6s 1 ease-in both');
&-wrapper {
max-width: 130px;
@ -161,6 +165,7 @@
.summary-compact {
padding: 0 1rem;
@include animation('slide-in-down .2s .25s 1 ease-in both');
&__flexbox {
@include flexbox();

5
assets/sass/layout/_header.scss
View File

@ -1,4 +1,9 @@
.header {
@include flexbox();
@include justify-content(center);
@include align-items(center);
@include flex-direction(column);
.title {
font-family: $title-font;
font-weight: 900;

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

@ -11,6 +11,7 @@
line-height: 3rem;
overflow-wrap: break-word;
@include animation('slide-in-down .2s .25s 1 ease-in both');
@include themify($themes) {
color: themed("single-header-title-color");
}
@ -46,6 +47,7 @@
}
&__contents {
@include animation('slide-in-left .15s .6s 1 ease-in both');
&--gallery {
overflow: hidden;
}
@ -447,7 +449,7 @@ pre:not(.chroma) {
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
z-index: z('content');
overflow-x: auto;
overflow-x: auto;
@include themify($codeblock) {
color: themed('content-pre-color');
@ -482,6 +484,13 @@ pre:not(.chroma) {
}
}
table, tr, td {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
.lntd {
&:first-child {
width: 10px;
@ -503,19 +512,20 @@ pre:not(.chroma) {
}
}
table, tr, td {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
}
/* LineNumbersTable */
.lnt {
@include themify($codeblock) {
color: themed('content-pre-number-color');
}
}
table.lntable {
overflow-x: auto;
@include themify($themes) {
@include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
@include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
}
}
}
li .highlight > .chroma {

8
assets/sass/themes/_dark.scss
View File

@ -72,11 +72,13 @@ $dark: (
search-placeholder-color: #727072,
search-color: #FCFCFA,
search-icon-color: #727072,
search-border-color: #1e1e1e,
search-border-color: #1d1d1d,
search-border-outline-color: rgba(33, 33, 33, 0.6),
search-border-active-color: #2f2f2f,
search-content-color: inherit,
search-background-color: #212121,
search-content-background-color: lighten(#403E41, 5%),
search-hover-background-color: #727072,
search-hover-background-color: #403E41,
search-highlight-color: #FF6188,
selection-color: #FCFCFA,
selection-background-color: #FF6188,
@ -98,4 +100,6 @@ $dark: (
contact-input-color: #FCFCFA,
contact-input-background-color: lighten(#403E41, 5%),
contact-button-background-color: lighten(#403E41, 5%),
custom-scrollbar-foreground-color: #9e9e9e,
custom-scrollbar-background-color: #eee,
);

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

@ -72,7 +72,9 @@ $hacker: (
search-placeholder-color: #727072,
search-color: #1FFF2A,
search-icon-color: #727072,
search-border-color: #111111,
search-border-color: #0d0e0f,
search-border-outline-color: rgba(161, 173, 100, 0.2),
search-border-active-color: #414141,
search-background-color: #252526,
search-content-color: #1FFF2A,
search-content-background-color: lighten(#252526, 7%),
@ -98,4 +100,6 @@ $hacker: (
contact-input-color: #FCFCFA,
contact-input-background-color: lighten(#252526, 4%),
contact-button-background-color: lighten(#252526, 4%),
custom-scrollbar-foreground-color: #616161,
custom-scrollbar-background-color: #FCFCFA,
);

6
assets/sass/themes/_kimbie.scss
View File

@ -71,7 +71,9 @@ $kimbie: (
search-placeholder-color: #6e583b,
search-color: #d3af86,
search-icon-color: #6e583b,
search-border-color: #5e452b,
search-border-color: #6e583b,
search-border-outline-color: rgba(240, 100, 49, 0.25),
search-border-active-color: #5e452b,
search-content-color: #d3af86,
search-background-color: #362712,
search-content-background-color: #362712,
@ -97,4 +99,6 @@ $kimbie: (
contact-input-color: #e3b583,
contact-input-background-color: #362712,
contact-button-background-color: #362712,
custom-scrollbar-foreground-color: #5e452b,
custom-scrollbar-background-color: #d3af86,
) !default;

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

@ -71,7 +71,9 @@ $light: (
search-placeholder-color: #bdbdbd,
search-color: #424242,
search-icon-color: #bdbdbd,
search-border-color: darken(#eceff1, 8%),
search-border-color: #e0e0e0,
search-border-outline-color: rgba(207, 216, 220, 0.6),
search-border-active-color: #b0bec5,
search-background-color: #eeeeee,
search-content-color: #424242,
search-content-background-color: #eeeeee,
@ -97,4 +99,6 @@ $light: (
contact-input-color: #424242,
contact-input-background-color: #eee,
contact-button-background-color: #eee,
custom-scrollbar-foreground-color: #cfd8dc,
custom-scrollbar-background-color: #FCFCFA,
);

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

@ -71,6 +71,8 @@ $solarized: (
search-placeholder-color: #B58900,
search-color: #B58900,
search-border-color: darken(#FBF1D1, 10%),
search-border-outline-color: rgba(133, 153, 0, 0.2),
search-border-active-color: lighten(#B58900, 10%),
search-icon-color: #B58900,
search-background-color: #FBF1D1,
search-content-color: #B58900,
@ -96,4 +98,6 @@ $solarized: (
contact-input-color: #B58900,
contact-input-background-color: #FBF1D1,
contact-button-background-color: #FBF1D1,
custom-scrollbar-foreground-color: #b0bec5,
custom-scrollbar-background-color: #EEE8D5,
);

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long