diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 24478b0..f4dab2d 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -180,6 +180,11 @@ i { /* fontawesome icons */ } } +@-webkit-keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } @@ -189,6 +194,7 @@ img[data-src] { margin: 0.5rem 0; &[data-loaded="true"] { + -webkit-animation: fade-in linear 0.5s; animation: fade-in linear 0.5s; } @@ -203,6 +209,7 @@ img[data-src] { } &.shadow { + -webkit-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 */ } @@ -219,7 +226,7 @@ img[data-src] { margin-bottom: 4rem; &:only-child { - position: -webkit-sticky; /* Safari */ + position: -webkit-sticky; position: sticky; } @@ -307,8 +314,9 @@ img[data-src] { &:target:not([scroll-focus]), &[scroll-focus="true"] > p { background-color: var(--footnote-target-bg); + width: -moz-fit-content; + width: -webkit-fit-content; width: fit-content; - -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ transition: background-color 1.5s ease-in-out; } } @@ -320,7 +328,6 @@ img[data-src] { @include pl-pr(2px); border-bottom-style: none !important; - -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ transition: background-color 1.5s ease-in-out; } @@ -456,6 +463,7 @@ img[data-src] { > ol, > ul { + -webkit-padding-start: 1.75rem; padding-inline-start: 1.75rem; li { @@ -465,6 +473,7 @@ img[data-src] { ol, ul { + -webkit-padding-start: 1.25rem; padding-inline-start: 1.25rem; margin: 0.5rem 0; } @@ -559,7 +568,6 @@ img[data-src] { } .flex-grow-1 { - -ms-flex-positive: 1 !important; flex-grow: 1 !important; } @@ -651,9 +659,8 @@ $sidebar-display: "sidebar-display"; border-radius: 50%; border: 2px solid rgba(222, 222, 222, 0.7); overflow: hidden; + -webkit-transform: translateZ(0); transform: translateZ(0); /* fixed the zoom in Safari */ - -webkit-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; &:hover { @@ -664,13 +671,11 @@ $sidebar-display: "sidebar-display"; img { width: 100%; height: 100%; - -webkit-transition: transform 0.5s; - -moz-transition: transform 0.5s; + transition: -webkit-transform 0.5s; transition: transform 0.5s; + transition: transform 0.5s, -webkit-transform 0.5s; &:hover { - -ms-transform: scale(1.2); - -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } @@ -697,6 +702,8 @@ $sidebar-display: "sidebar-display"; word-spacing: 1px; margin: 0.2rem 1.5rem 0.5rem 1.5rem; min-height: 3rem; /* avoid vertical shifting in multi-line words */ + -webkit-user-select: none; + -moz-user-select: none; user-select: none; } @@ -833,9 +840,6 @@ $sidebar-display: "sidebar-display"; @media (hover: hover) { #sidebar ul > li:last-child::after { - -webkit-transition: top 0.5s ease; - -moz-transition: top 0.5s ease; - -o-transition: top 0.5s ease; transition: top 0.5s ease; } } @@ -940,9 +944,8 @@ $sidebar-display: "sidebar-display"; background: center; &.form-control { - &::-webkit-input-placeholder { @include input-placeholder; } &::-moz-placeholder { @include input-placeholder; } - &:-ms-input-placeholder { @include input-placeholder; } + &::-webkit-input-placeholder { @include input-placeholder; } &::placeholder { @include input-placeholder; } } } @@ -1094,7 +1097,9 @@ $sidebar-display: "sidebar-display"; height: $size; border-radius: 50%; border: 1px solid var(--btn-backtotop-border-color); + transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; + transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; i { @@ -1110,6 +1115,13 @@ $sidebar-display: "sidebar-display"; } #notification { + @-webkit-keyframes popup { + from { + opacity: 0; + bottom: 0; + } + } + @keyframes popup { from { opacity: 0; @@ -1147,7 +1159,9 @@ $sidebar-display: "sidebar-display"; position: fixed; left: 50%; bottom: 20%; + -webkit-transform: translateX(-50%); transform: translateX(-50%); + -webkit-animation: popup 0.8s; animation: popup 0.8s; } } @@ -1169,7 +1183,6 @@ $sidebar-display: "sidebar-display"; div.d-flex { padding: 1.5rem 0; flex-wrap: wrap; - -ms-flex-pack: distribute !important; justify-content: space-around !important; } @@ -1233,10 +1246,8 @@ $sidebar-display: "sidebar-display"; $basic: transform 0.4s ease; @if $append { - -webkit-transition: $basic, $append; transition: $basic, $append; } @else { - -webkit-transition: $basic; transition: $basic; } } @@ -1252,12 +1263,14 @@ $sidebar-display: "sidebar-display"; [#{$sidebar-display}] { #sidebar { + -webkit-transform: translateX(0); transform: translateX(0); } #topbar-wrapper, #main-wrapper, footer { + -webkit-transform: translateX(#{$sidebar-width}); transform: translateX(#{$sidebar-width}); } } @@ -1269,8 +1282,6 @@ $sidebar-display: "sidebar-display"; -webkit-transform: translateX(-#{$sidebar-width}); .cursor { - -webkit-transition: none; - -moz-transition: none; transition: none; } } @@ -1318,8 +1329,6 @@ $sidebar-display: "sidebar-display"; } #tags { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; justify-content: center !important; } @@ -1392,8 +1401,6 @@ $sidebar-display: "sidebar-display"; /* Pad horizontal */ @media all and (min-width: 992px) and (max-width: 1199px) { #main .col-lg-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 96%; flex: 0 0 96%; max-width: 96%; } @@ -1461,8 +1468,6 @@ $sidebar-display: "sidebar-display"; } #main > div.row { - -webkit-box-pack: center !important; - -ms-flex-pack: center !important; justify-content: center !important; } } @@ -1479,7 +1484,6 @@ $sidebar-display: "sidebar-display"; } #search-input { - -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @@ -1626,8 +1630,6 @@ $sidebar-display: "sidebar-display"; $icon-block-size: 2rem; &.justify-content-center { - -webkit-box-pack: start !important; - -ms-flex-pack: start !important; justify-content: flex-start !important; } @@ -1652,6 +1654,7 @@ $sidebar-display: "sidebar-display"; position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index d9353ab..9f1c986 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -73,6 +73,8 @@ } %no-cursor { + -webkit-user-select: none; + -moz-user-select: none; user-select: none; } @@ -101,6 +103,8 @@ %sidebar-links { color: rgba(117, 117, 117, 0.9); + -webkit-user-select: none; + -moz-user-select: none; user-select: none; } @@ -134,7 +138,6 @@ position: relative; left: 50%; -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); transform: translateX(-50%); } diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index fcccbea..361fe08 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -87,23 +87,21 @@ $code-radius: 6px; text-align: right; color: var(--highlight-lineno-color); -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; - -ms-user-select: none; -o-user-select: none; user-select: none; } /* set the dollar sign to non-selectable */ .gp { + -webkit-user-select: none; + -moz-user-select: none; user-select: none; } } /* .highlight */ code { -webkit-hyphens: none; - -ms-hyphens: none; - -moz-hyphens: none; hyphens: none; &.highlighter-rouge { diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index cc645aa..7b7a39f 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -96,6 +96,7 @@ --timeline-year-dot-color: var(--timeline-color); .post img[data-src] { + -webkit-filter: brightness(95%); filter: brightness(95%); } diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 551c557..c818e33 100644 --- a/_sass/layout/categories.scss +++ b/_sass/layout/categories.scss @@ -16,7 +16,7 @@ i { @extend %category-icon-color; - font-size: 86%; // fontawesome icons + font-size: 86%; /* fontawesome icons */ } .list-group-item { @@ -42,7 +42,9 @@ position: relative; height: 0.7rem; width: 1rem; + transition: -webkit-transform 300ms ease; transition: transform 300ms ease; + transition: transform 300ms ease, -webkit-transform 300ms ease; } &:hover { @@ -52,14 +54,13 @@ } } -@media (hover: hover) { // only works on desktop +@media (hover: hover) { /* only works on desktop */ .category-trigger:hover { background-color: var(--categories-hover-bg); } } .rotate { - -ms-transform: rotate(-90deg); /* IE 9 */ - -webkit-transform: rotate(-90deg); /* Safari 3-8 */ + -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss index 2ce151a..4488671 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/layout/category-tag.scss @@ -13,7 +13,7 @@ line-height: 1.5rem; padding: 0.6rem 0; - &::before { // dot + &::before { /* dot */ background: #999999; width: 5px; height: 5px; @@ -37,7 +37,7 @@ } } -#page-tag h1 > i { // tag icon +#page-tag h1 > i { /* tag icon */ font-size: 1.2rem; } @@ -51,7 +51,7 @@ a:hover { @extend %link-hover; - margin-bottom: -1px; // Avoid jumping + margin-bottom: -1px; /* Avoid jumping */ } } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 632fbe0..fd0f146 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -85,6 +85,7 @@ .pin { i { + -webkit-transform: rotate(45deg); transform: rotate(45deg); padding-left: 3px; color: var(--pin-color); diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 613b9f6..5d9c0f9 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -80,6 +80,8 @@ h1 + .post-meta { .share-wrapper { vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; user-select: none; .share-icons { @@ -203,6 +205,20 @@ h1 + .post-meta { } } /* .post-navigation */ +@-webkit-keyframes fade-up { + from { + opacity: 0; + position: relative; + top: 2rem; + } + + to { + opacity: 1; + position: relative; + top: 0; + } +} + @keyframes fade-up { from { opacity: 0; @@ -223,6 +239,7 @@ h1 + .post-meta { position: sticky; top: 4rem; transition: top 0.2s ease-in-out; + -webkit-animation: fade-up 0.8s; animation: fade-up 0.8s; } @@ -277,8 +294,6 @@ nav[data-toggle="toc"] { border-color: var(--card-border-color); background-color: var(--card-bg); box-shadow: 0 0 5px 0 var(--card-box-shadow); - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; h3 { @@ -323,7 +338,6 @@ nav[data-toggle="toc"] { } .post-tail-bottom { - -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; > div:first-child {