web/_sass/addon/commons.scss

1777 lines
29 KiB
SCSS
Raw Normal View History

/*
2021-01-23 08:20:58 +03:00
The common styles
2019-09-30 15:38:41 +03:00
*/
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
@mixin mode-toggle($dark-mode: false) {
@if $dark-mode {
@include dark-scheme;
} @else {
@include light-scheme;
}
}
html:not([mode]),
html[mode=light] {
@include mode-toggle();
}
html[mode=dark] {
@include mode-toggle(true);
}
@media (prefers-color-scheme: dark) {
html:not([mode]),
html[mode=dark] {
@include mode-toggle(true);
}
html[mode=light] {
@include mode-toggle();
}
}
2020-02-16 22:06:38 +03:00
2020-12-24 17:51:08 +03:00
:root {
2019-10-16 18:20:51 +03:00
font-size: 16px;
2019-09-30 15:38:41 +03:00
}
body {
line-height: 1.75rem;
background: var(--body-bg);
color: var(--text-color);
2019-09-30 15:38:41 +03:00
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
}
/* --- Scrollbar --- */
$scrollbar-size: 7px;
::-webkit-scrollbar {
width: $scrollbar-size;
height: $scrollbar-size;
}
::-webkit-scrollbar-track {
@at-root body#{&} {
-webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
}
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-bg);
border-radius: calc(#{$scrollbar-size} / 2);
}
.highlight {
border-color: transparent;
transition: border-color 0.5s ease;
&:hover {
border-color: var(--scrollbar-thumb-bg);
transition: border-color 0.2s ease;
}
&::-webkit-scrollbar-thumb {
/* add border to act as background-color */
border-right-style: inset;
border-right-width: calc(100vw + 100vh);
border-color: inherit;
background-color: var(--highlight-bg-color);
}
}
/* --- Typography --- */
h1 {
@extend %heading;
font-size: 1.8rem;
}
h2 {
@extend %heading;
@extend %section;
@extend %anchor;
font-size: 1.4rem;
}
h3 {
@extend %heading;
@extend %section;
@extend %anchor;
font-size: 1.25rem;
}
h4 {
@extend %heading;
@extend %section;
@extend %anchor;
font-size: 1.15rem;
}
h5 {
@extend %heading;
@extend %section;
@extend %anchor;
font-size: 1.1rem;
}
ol,
ul {
ol,
ul {
margin-bottom: 1rem;
}
}
a {
@extend %link-color;
}
img {
max-width: 100%;
2021-06-30 14:08:42 +03:00
height: auto;
}
2019-09-30 15:38:41 +03:00
blockquote {
border-left: 5px solid var(--blockquote-border-color);
padding-left: 1rem;
color: var(--blockquote-text-color);
}
kbd {
margin: 0 0.3rem;
}
footer {
position: absolute;
bottom: 0;
padding: 0 1rem;
height: $footer-height;
font-size: 0.8rem;
color: #7a7b7d;
background-color: var(--footer-bg-color);
> div.d-flex {
line-height: 1.2rem;
width: 95%;
max-width: 1045px;
border-top: 1px solid var(--main-border-color);
margin-bottom: 1rem;
2019-09-30 15:38:41 +03:00
> div {
width: 350px;
2020-02-25 12:56:03 +03:00
}
}
2019-09-30 15:38:41 +03:00
a {
color: var(--footer-link);
2021-10-25 22:04:15 +03:00
&:link {
@include no-text-decoration;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
&:hover {
@extend %link-hover;
2020-02-25 12:56:03 +03:00
@include no-text-decoration;
2020-02-25 12:56:03 +03:00
}
}
2021-10-25 22:04:15 +03:00
.footer-right {
text-align: right;
}
2019-09-30 15:38:41 +03:00
}
i { // fontawesome icons
&.far,
&.fas {
@extend %no-cursor;
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
img[data-src] {
margin: 0.5rem 0;
&[data-loaded=true] {
animation: fade-in linear 0.5s;
}
&.left {
float: left;
margin: 0.75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: 0.75rem 0 1rem 1rem;
}
&.shadow {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
}
}
/* --- Panels --- */
2019-09-30 15:38:41 +03:00
.access {
top: 2rem;
transition: top 0.2s ease-in-out;
margin-right: 1.5rem;
margin-top: 3rem;
margin-bottom: 4rem;
2019-09-30 15:38:41 +03:00
&:only-child {
position: -webkit-sticky; /* Safari */
position: sticky;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
&.topbar-down {
top: 6rem;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
> div {
2020-02-25 12:56:03 +03:00
padding-left: 1rem;
border-left: 1px solid var(--main-border-color);
2021-10-25 22:04:15 +03:00
2020-02-28 19:16:47 +03:00
&:not(:last-child) {
margin-bottom: 4rem;
2020-02-25 12:56:03 +03:00
}
}
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
.post-content {
2020-10-27 17:08:04 +03:00
font-size: 0.9rem;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
2019-09-30 15:38:41 +03:00
}
2021-12-01 16:49:51 +03:00
#panel-wrapper {
h4 {
@include panel-label;
2021-12-02 16:32:26 +03:00
2021-12-01 16:49:51 +03:00
font-family: inherit;
2020-02-25 12:56:03 +03:00
}
2020-02-25 12:56:03 +03:00
.post-tag {
display: inline-block;
line-height: 1rem;
font-size: 0.85rem;
background: none;
border: 1px solid var(--btn-border-color);
2020-10-27 17:08:04 +03:00
border-radius: 0.8rem;
2020-12-18 15:54:18 +03:00
padding: 0.3rem 0.5rem;
margin: 0 0.35rem 0.5rem 0;
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:hover {
background-color: #2a408e;
border-color: #2a408e;
color: #fff;
transition: none;
}
}
2019-09-30 15:38:41 +03:00
}
2020-02-25 12:56:03 +03:00
#access-lastmod {
li {
height: 1.8rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
list-style: none;
2020-02-25 12:56:03 +03:00
}
2019-09-30 15:38:41 +03:00
2020-02-25 12:56:03 +03:00
a {
&:hover {
@extend %link-hover;
}
@extend %no-bottom-border;
2021-04-05 15:02:17 +03:00
color: inherit;
2020-02-25 12:56:03 +03:00
}
2019-09-30 15:38:41 +03:00
}
2019-09-30 15:38:41 +03:00
.footnotes > ol {
padding-left: 2rem;
2020-10-27 17:08:04 +03:00
margin-top: 0.5rem;
2021-10-25 22:04:15 +03:00
2020-10-27 17:08:04 +03:00
> li {
&:not(:last-child) {
margin-bottom: 0.3rem;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
> p {
margin-left: 0.25em;
margin-top: 0;
margin-bottom: 0;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
// [scroll-focus] added by `smooth-scroll.js`
&:target:not([scroll-focus]),
&[scroll-focus=true] > p {
background-color: var(--footnote-target-bg);
2020-02-25 12:56:03 +03:00
width: fit-content;
-webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
2020-02-25 12:56:03 +03:00
transition: background-color 1.5s ease-in-out;
}
}
2019-09-30 15:38:41 +03:00
}
2020-02-25 12:56:03 +03:00
.footnote {
@at-root a#{&} {
@include ml-mr(1px);
@include pl-pr(2px);
2020-02-25 12:56:03 +03:00
border-bottom-style: none !important;
-webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1
2020-02-25 12:56:03 +03:00
transition: background-color 1.5s ease-in-out;
}
// [scroll-focus] added by `smooth-scroll.js`
@at-root sup:target:not([scroll-focus]),
sup[scroll-focus=true] > a#{&} {
background-color: var(--footnote-target-bg);
2020-02-25 12:56:03 +03:00
}
2019-09-30 15:38:41 +03:00
}
2020-02-25 12:56:03 +03:00
.reversefootnote {
@at-root a#{&} {
2020-10-27 17:08:04 +03:00
font-size: 0.6rem;
2020-02-25 12:56:03 +03:00
line-height: 1;
position: relative;
bottom: 0.25em;
margin-left: 0.25em;
2020-02-25 12:56:03 +03:00
border-bottom-style: none !important;
}
2019-09-30 15:38:41 +03:00
}
/* --- Begin of Markdown table style --- */
.table-wrapper { // it will be created by Liquid
overflow-x: auto;
margin-bottom: 1.5rem;
2019-09-30 15:38:41 +03:00
2020-10-27 17:08:04 +03:00
> table {
min-width: 100%;
2020-06-24 15:08:38 +03:00
overflow-x: auto;
2020-02-25 12:56:03 +03:00
border-spacing: 0;
2019-09-30 15:38:41 +03:00
thead {
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
2021-10-25 22:04:15 +03:00
th {
@extend %table-cell;
2020-02-25 12:56:03 +03:00
}
}
2020-01-11 12:52:38 +03:00
tbody {
tr {
border-bottom: 1px solid var(--tb-border-color);
2021-10-25 22:04:15 +03:00
&:nth-child(2n) {
background-color: var(--tb-even-bg);
}
2021-10-25 22:04:15 +03:00
&:nth-child(2n + 1) {
background-color: var(--tb-odd-bg);
}
2021-10-25 22:04:15 +03:00
td {
@extend %table-cell;
}
}
2021-10-25 22:04:15 +03:00
} // tbody
}// table
}
2019-09-30 15:38:41 +03:00
/* --- post --- */
2019-09-30 15:38:41 +03:00
.post {
h1 {
margin-top: 3rem;
margin-bottom: 1rem;
}
em { // MarkDown italic
padding-right: 0.2rem;
}
a {
&.img-link {
@extend %no-cursor;
}
&.popup { // created by `_includes/img-extra.html`
cursor: zoom-in;
> img[data-src]:not(.normal):not(.left):not(.right) {
@include align-center;
}
}
&:hover {
code {
@extend %link-hover;
}
}
} // a
}
2019-12-17 14:26:11 +03:00
.pageviews .fa-spinner {
font-size: 80%;
}
2019-09-30 15:38:41 +03:00
.post-meta {
font-size: 0.85rem;
word-spacing: 1px;
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
a {
2020-02-28 19:16:47 +03:00
@extend %link-underline;
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:not(:last-child) {
margin-right: 2px;
}
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:hover {
@extend %link-hover;
}
}
2019-09-30 15:38:41 +03:00
}
.post-content {
font-size: 1.08rem;
2019-09-30 15:38:41 +03:00
line-height: 1.8;
margin-top: 2rem;
overflow-wrap: break-word;
word-wrap: break-word;
a {
2021-04-16 08:04:48 +03:00
&:not(.img-link) {
@extend %link-underline;
2021-10-25 22:04:15 +03:00
&:hover {
@extend %link-hover;
2020-10-06 15:15:19 +03:00
}
2020-09-02 13:25:57 +03:00
}
&.img-link + em {
display: block;
text-align: center;
font-style: normal;
font-size: 80%;
padding: 0;
color: #6d6c6c;
}
2021-04-21 18:17:34 +03:00
}
2021-04-21 18:17:34 +03:00
ul {
// attribute 'hide-bullet' was added by liquid
.task-list-item[hide-bullet] {
list-style-type: none;
> i { // checkbox icon
margin: 0 0.4rem 0.2rem -1.4rem;
vertical-align: middle;
color: var(--checkbox-color);
2021-10-25 22:04:15 +03:00
&.checked {
color: var(--checkbox-checked-color);
}
}
}
input[type=checkbox] {
margin: 0 0.5rem 0.2rem -1.3rem;
vertical-align: middle;
}
} // ul
> ol,
> ul {
padding-left: 2rem;
li {
ol,
ul { // sub list
padding-left: 2rem;
margin-top: 0.3rem;
}
}
}
> ol {
li {
padding-left: 0.25em;
}
}
dl > dd {
margin-left: 1rem;
}
} // .post-content
.tag:hover {
@extend %tag-hover;
}
.post-tag {
display: inline-block;
min-width: 2rem;
text-align: center;
background: var(--tag-bg);
border-radius: 0.3rem;
padding: 0 0.4rem;
color: inherit;
line-height: 1.3rem;
&:not(:last-child) {
margin-right: 0.2rem;
}
&:hover {
@extend %tag-hover;
border-bottom: none;
text-decoration: none;
color: #d2603a;
}
}
/* --- buttons --- */
.btn-lang {
border: 1px solid !important;
padding: 1px 3px;
border-radius: 3px;
color: var(--link-color);
2021-10-25 22:04:15 +03:00
&:focus {
box-shadow: none;
}
}
/* --- Effects classes --- */
.semi-bold {
font-weight: 600 !important;
}
.loaded {
display: block !important;
@at-root .d-flex#{&} {
display: flex !important;
}
}
.unloaded {
display: none !important;
}
.visible {
visibility: visible !important;
}
.hidden {
visibility: hidden !important;
}
.flex-grow-1 {
-ms-flex-positive: 1 !important;
flex-grow: 1 !important;
}
.btn-box-shadow {
box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
}
.topbar-up {
top: -3rem !important; /* same as topbar height. */
}
.no-text-decoration {
@include no-text-decoration;
}
.tooltip-inner { /* Overrided BS4 Tooltip */
font-size: 0.7rem;
max-width: 220px;
text-align: left;
}
.disabled {
color: rgb(206, 196, 196);
pointer-events: auto;
cursor: not-allowed;
}
.hide-border-bottom {
border-bottom: none !important;
}
.input-focus {
box-shadow: none;
border-color: var(--input-focus-border-color) !important;
background: center !important;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
2021-04-21 18:18:51 +03:00
/* --- Overriding --- */
2021-04-21 18:17:34 +03:00
2021-04-21 18:18:51 +03:00
// magnific-popup
2021-04-21 18:17:34 +03:00
figure .mfp-title {
text-align: center;
padding-right: 0;
margin-top: 0.5rem;
}
2021-04-21 18:18:51 +03:00
// mermaid
.mermaid {
text-align: center;
}
/* --- sidebar layout --- */
$sidebar-display: "sidebar-display";
#sidebar {
@include pl-pr(0);
position: fixed;
top: 0;
left: 0;
height: 100%;
overflow-y: auto;
width: $sidebar-width;
z-index: 99;
background: var(--sidebar-bg);
2021-04-02 17:57:06 +03:00
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
a {
2021-09-21 17:37:28 +03:00
@extend %sidebar-links;
&:hover {
@include no-text-decoration;
2021-09-21 17:37:28 +03:00
color: var(--sidebar-active-color) !important;
}
}
#avatar {
> a {
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
2021-09-21 13:00:29 +03:00
border: 2px solid rgba(222, 222, 222, 0.7);
overflow: hidden;
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;
2021-09-24 10:32:23 +03:00
&:hover {
border-color: white;
}
}
img {
width: 100%;
height: 100%;
-webkit-transition: transform 0.5s;
-moz-transition: transform 0.5s;
transition: transform 0.5s;
&:hover {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
} // #avatar
.site-title {
a {
2021-09-21 13:00:29 +03:00
@extend %clickable-transition;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.5px;
2021-09-21 13:00:29 +03:00
color: rgba(134, 133, 133, 99%);
}
}
.site-subtitle {
font-size: 95%;
2021-09-21 13:00:29 +03:00
color: var(--sidebar-muted-color);
line-height: 1.2rem;
word-spacing: 1px;
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
min-height: 3rem; // avoid vertical shifting in multi-line words
user-select: none;
}
.nav-link {
border-radius: 0;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 1px;
display: table-cell;
vertical-align: middle;
}
.nav-item {
text-align: center;
display: table;
height: $tab-height;
2021-09-21 13:00:29 +03:00
&.active {
.nav-link {
2021-09-21 13:00:29 +03:00
color: var(--sidebar-active-color);
}
}
2021-09-21 13:00:29 +03:00
&:not(.active) > a {
@extend %clickable-transition;
}
}
ul {
height: $tab-height * $tab-count;
margin-bottom: 2rem;
padding-left: 0;
li {
width: 100%;
&:last-child {
a {
position: relative;
left: $cursor-width / 2;
width: 100%;
}
&::after { // the cursor
display: table;
visibility: hidden;
content: "";
position: relative;
right: 1px;
width: $cursor-width;
height: $tab-cursor-height;
border-radius: 1px;
background-color: var(--nav-cursor-color);
pointer-events: none;
}
}
} // li
@mixin fix-cursor($top) {
top: $top;
visibility: visible;
}
@for $i from 1 through $tab-count {
$offset: $tab-count - $i;
$top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
@if $i < $tab-count {
> li.active:nth-child(#{$i}),
> li.nav-item:nth-child(#{$i}):hover {
~ li:last-child::after {
@include fix-cursor($top);
}
}
} @else {
> li.active:nth-child(#{$i}):last-child::after,
> li.nav-item:nth-child(#{$i}):last-child:hover::after {
@include fix-cursor($top);
}
}
} // @for
} // ul
.sidebar-bottom {
font-size: 1.2rem;
margin-bottom: 2.1rem;
@include ml-mr(auto);
@include pl-pr(1rem);
%icon {
width: 2.4rem;
text-align: center;
}
a {
@extend %icon;
2021-09-21 13:00:29 +03:00
@extend %clickable-transition;
}
2021-09-21 17:37:28 +03:00
i {
line-height: 1.75rem; // default line-height in body
vertical-align: middle;
}
#mode-toggle-wrapper {
@extend %icon;
i {
2021-09-21 17:37:28 +03:00
@extend %sidebar-links;
@extend %cursor-pointer;
2021-09-21 13:00:29 +03:00
@extend %clickable-transition;
}
}
.icon-border {
@extend %no-cursor;
2021-09-21 13:00:29 +03:00
background-color: var(--sidebar-muted-color);
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
}
2021-09-21 17:37:28 +03:00
#mode-toggle-wrapper:hover > i {
color: var(--sidebar-active-color);
}
} // .sidebar-bottom
} // #sidebar
@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;
}
}
.profile-wrapper {
margin-top: 2rem;
width: 100%;
}
#search-result-wrapper {
display: none;
height: 100%;
overflow: auto;
2021-10-25 22:04:15 +03:00
.post-content {
margin-top: 2rem;
}
}
/* --- top-bar --- */
#topbar-wrapper {
height: $topbar-height;
position: fixed;
top: 0;
left: $sidebar-width; /* same as sidebar width */
right: 0;
transition: top 0.2s ease-in-out;
z-index: 50;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
background-color: var(--topbar-wrapper-bg);
}
#topbar {
i { // icons
color: #999;
}
#breadcrumb {
font-size: 1rem;
color: gray;
padding-left: 0.5rem;
a:hover {
@extend %link-hover;
}
span {
&:not(:last-child) {
&::after {
content: "";
padding: 0 0.3rem;
}
}
}
}
} // #topbar
#sidebar-trigger,
#search-trigger {
display: none;
}
#search-wrapper {
display: flex;
2021-07-20 20:01:09 +03:00
width: 85%;
border-radius: 1rem;
2021-09-21 13:00:29 +03:00
border: 1px solid var(--search-wrapper-border-color);
background: var(--search-wrapper-bg);
padding: 0 0.5rem;
i {
z-index: 2;
font-size: 0.9rem;
color: var(--search-icon-color);
}
.fa-times-circle { /* button 'clean up' */
@extend %cursor-pointer;
visibility: hidden;
}
}
#search-cancel { /* 'Cancel' link */
color: var(--link-color);
margin-left: 1rem;
display: none;
@extend %cursor-pointer;
}
#search-input {
background: center;
border: 0;
border-radius: 0;
padding: 0.18rem 0.3rem;
color: var(--text-color);
&:focus {
box-shadow: none;
background: center;
2021-10-25 22:04:15 +03:00
&.form-control {
&::-webkit-input-placeholder { @include input-placeholder; }
&::-moz-placeholder { @include input-placeholder; }
&:-ms-input-placeholder { @include input-placeholder; }
&::placeholder { @include input-placeholder; }
}
}
}
#search-hints {
2021-12-01 16:49:51 +03:00
padding: 0 1rem;
h4 {
margin-bottom: 1.5rem;
}
2020-12-14 10:01:05 +03:00
.post-tag {
display: inline-block;
line-height: 1rem;
font-size: 1rem;
background: var(--search-tag-bg);
border: none;
padding: 0.5rem;
2021-12-01 16:49:51 +03:00
margin: 0 1.25rem 1rem 0;
2021-10-25 22:04:15 +03:00
&::before {
content: "#";
color: var(--text-muted-color);
padding-right: 0.2rem;
}
2021-12-01 16:49:51 +03:00
@extend %link-color;
}
}
#search-results {
padding-bottom: 6rem;
2021-10-25 22:04:15 +03:00
a {
&:hover {
@extend %link-hover;
}
@extend %link-color;
@extend %no-bottom-border;
@extend %heading;
font-size: 1.4rem;
line-height: 2.5rem;
}
> div {
width: 100%;
&:not(:last-child) {
margin-bottom: 1rem;
}
i { // icons
color: #818182;
margin-right: 0.15rem;
font-size: 80%;
}
> p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
} // #search-results
#topbar-title {
display: none;
font-size: 1.1rem;
font-weight: 600;
font-family: sans-serif;
color: var(--topbar-text-color);
2019-11-28 19:04:01 +03:00
text-align: center;
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
2019-09-30 15:38:41 +03:00
}
2021-12-01 16:49:51 +03:00
#core-wrapper {
2021-12-02 16:32:26 +03:00
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
.categories,
#tags,
#archives {
a:not(:hover) {
@extend %no-bottom-border;
}
2020-02-28 19:16:47 +03:00
}
2020-02-08 21:59:16 +03:00
}
#mask {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
2019-09-30 15:38:41 +03:00
@at-root [#{$sidebar-display}] & {
display: block !important;
2020-02-25 12:56:03 +03:00
}
}
/* --- main wrapper --- */
2019-09-30 15:38:41 +03:00
#main-wrapper {
background-color: var(--main-wrapper-bg);
position: relative;
min-height: 100vh;
padding-bottom: $footer-height;
2019-09-30 15:38:41 +03:00
@include pl-pr(0);
2019-09-30 15:38:41 +03:00
}
2021-12-01 16:49:51 +03:00
#main {
.row:first-child {
> div {
&:nth-child(1),
&:nth-child(2) {
margin-top: $topbar-height; /* same as the height of topbar */
}
&:first-child {
/* 3rem for topbar, 6rem for footer */
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
}
}
}
2021-10-25 22:04:15 +03:00
2021-12-01 16:49:51 +03:00
.row.alone {
margin-bottom: 4rem;
}
2019-09-30 15:38:41 +03:00
}
#topbar-wrapper.row,
#main > .row,
#search-result-wrapper > .row {
@include ml-mr(0);
2019-09-30 15:38:41 +03:00
}
/* --- button back-to-top --- */
2019-11-15 19:01:33 +03:00
#back-to-top {
$size: 2.7em;
display: none;
z-index: 1;
cursor: pointer;
position: fixed;
background: var(--button-bg);
color: var(--btn-backtotop-color);
padding: 0;
width: $size;
height: $size;
border-radius: 50%;
border: 1px solid var(--btn-backtotop-border-color);
transition: transform 0.2s ease-out;
-webkit-transition: transform 0.2s ease-out;
i {
line-height: $size;
position: relative;
bottom: 2px;
}
2019-11-15 19:01:33 +03:00
}
#back-to-top:hover {
transform: translate3d(0, -5px, 0);
-webkit-transform: translate3d(0, -5px, 0);
}
2019-09-30 15:38:41 +03:00
/*
Responsive Design:
{sidebar, content, panel} >= 1120px screen width
{sidebar, content} >= 850px screen width
{content} <= 849px screen width
*/
2019-09-30 15:38:41 +03:00
@media all and (max-width: 576px) {
$footer-height: $footer-height-mobile; // overwrite
2020-02-27 12:36:59 +03:00
2020-08-19 16:18:14 +03:00
#main > div.row:first-child > div:first-child {
2020-02-27 12:36:59 +03:00
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
2019-09-30 15:38:41 +03:00
}
2021-12-01 16:49:51 +03:00
#core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
h1 {
margin-top: 2.2rem;
font-size: 1.55rem;
}
2019-09-30 15:38:41 +03:00
}
2020-08-19 16:18:14 +03:00
#avatar > a {
width: 5rem;
height: 5rem;
}
.site-subtitle {
2020-02-25 12:56:03 +03:00
@include ml-mr(1.8rem);
2019-09-30 15:38:41 +03:00
}
2020-02-16 21:55:16 +03:00
#main-wrapper {
padding-bottom: $footer-height;
}
2019-09-30 15:38:41 +03:00
footer {
2020-02-16 21:55:16 +03:00
height: $footer-height;
2021-10-25 22:04:15 +03:00
2020-10-27 17:08:04 +03:00
> div.d-flex {
width: 100%;
2020-02-25 12:56:03 +03:00
padding: 1.5rem 0;
2020-10-27 17:08:04 +03:00
margin-bottom: 0.3rem;
2020-02-25 12:56:03 +03:00
flex-wrap: wrap;
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
2020-02-25 12:56:03 +03:00
}
2021-10-25 22:04:15 +03:00
.footer-left,
.footer-right {
2020-02-25 12:56:03 +03:00
text-align: center;
}
2020-02-16 21:55:16 +03:00
}
2019-09-30 15:38:41 +03:00
2020-02-16 21:55:16 +03:00
}
2019-09-30 15:38:41 +03:00
/* hide sidebar and panel */
@media all and (max-width: 849px) {
2020-04-16 19:26:58 +03:00
%slide {
-webkit-transition: transform 0.4s ease;
transition: transform 0.4s ease;
2019-09-30 15:38:41 +03:00
}
html,
body {
2020-04-16 19:26:58 +03:00
overflow-x: hidden;
2019-11-22 18:56:04 +03:00
}
.footnotes ol > li {
padding-top: 3.5rem;
margin-top: -3.2rem;
2021-10-25 22:04:15 +03:00
&:first-child {
margin-top: -3.5rem;
}
}
2020-04-16 19:26:58 +03:00
[#{$sidebar-display}] {
#sidebar {
transform: translateX(0);
}
2019-09-30 15:38:41 +03:00
2020-04-16 19:26:58 +03:00
#topbar-wrapper,
#main-wrapper {
transform: translateX(#{$sidebar-width});
2020-02-25 12:56:03 +03:00
}
2020-04-16 19:26:58 +03:00
2019-09-30 15:38:41 +03:00
}
#sidebar {
2020-04-16 19:26:58 +03:00
@extend %slide;
transform: translateX(-#{$sidebar-width}); // hide
-webkit-transform: translateX(-#{$sidebar-width});
2020-04-16 19:26:58 +03:00
2020-02-25 12:56:03 +03:00
.cursor {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
2019-09-30 15:38:41 +03:00
}
#main-wrapper {
2020-04-16 19:26:58 +03:00
@extend %slide;
2020-04-16 19:26:58 +03:00
padding-top: $topbar-height;
2019-09-30 15:38:41 +03:00
}
#search-result-wrapper {
width: 100%;
2019-09-30 15:38:41 +03:00
}
#breadcrumb,
#search-wrapper {
2019-09-30 15:38:41 +03:00
display: none;
}
#topbar-wrapper {
@extend %slide;
2019-09-30 15:38:41 +03:00
left: 0;
}
.topbar-up {
top: 0 !important;
}
2020-08-19 16:18:14 +03:00
#main > div.row:first-child > div:nth-child(1),
#main > div.row:first-child > div:nth-child(2) {
2019-09-30 15:38:41 +03:00
margin-top: 0;
}
#topbar-title,
#sidebar-trigger,
#search-trigger {
display: block;
}
2020-02-25 12:56:03 +03:00
#search-wrapper {
2020-08-19 16:18:14 +03:00
&.loaded ~ a {
2020-02-25 12:56:03 +03:00
margin-right: 1rem;
}
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
.fa-times-circle {
right: 5.2rem;
}
2019-09-30 15:38:41 +03:00
}
#search-input {
margin-left: 0;
width: 95%;
}
#search-result-wrapper .post-content {
2019-09-30 15:38:41 +03:00
letter-spacing: 0;
}
#tags {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
2019-09-30 15:38:41 +03:00
}
2021-12-01 16:49:51 +03:00
h1.dynamic-title {
display: none;
2021-10-25 22:04:15 +03:00
~ .post-content {
margin-top: 3rem;
2020-02-25 12:56:03 +03:00
}
2019-09-30 15:38:41 +03:00
}
} // max-width: 849px
2020-02-08 21:59:16 +03:00
/* Phone & Pad */
@media all and (min-width: 577px) and (max-width: 1199px) {
footer > .d-flex > div {
width: 312px;
}
}
/* Sidebar is visible */
@media all and (min-width: 850px) {
2020-04-16 19:26:58 +03:00
/* Solved jumping scrollbar */
html {
overflow-y: scroll;
}
#main-wrapper {
margin-left: $sidebar-width;
2020-04-16 19:26:58 +03:00
}
.profile-wrapper {
2020-04-16 19:26:58 +03:00
margin-top: 3rem;
}
#search-wrapper {
width: 22%;
min-width: 150px;
}
#search-result-wrapper {
margin-top: 3rem;
}
div.post-content .table-wrapper > table {
min-width: 70%;
}
2020-04-16 19:26:58 +03:00
/* button 'back-to-Top' position */
#back-to-top {
bottom: 5.5rem;
right: 1.2rem;
}
.topbar-up {
box-shadow: none !important;
}
#topbar-title {
text-align: left;
}
2020-08-19 16:18:14 +03:00
footer > div.d-flex {
2020-04-16 19:26:58 +03:00
width: 92%;
}
}
/* Pad horizontal */
@media all and (min-width: 992px) and (max-width: 1199px) {
#main .col-lg-11 {
2020-04-16 19:26:58 +03:00
-webkit-box-flex: 0;
-ms-flex: 0 0 96%;
flex: 0 0 96%;
max-width: 96%;
}
}
/* Compact icons in sidebar & panel hidden */
@media all and (min-width: 850px) and (max-width: 1199px) {
2019-09-30 15:38:41 +03:00
#sidebar {
2020-02-27 12:36:59 +03:00
width: $sidebar-width-small;
.site-subtitle {
margin-left: 1rem;
margin-right: 1rem;
}
2020-02-20 19:23:15 +03:00
.sidebar-bottom {
a,
span {
width: 2rem;
}
2021-10-25 22:04:15 +03:00
2020-02-20 19:23:15 +03:00
.icon-border {
left: -3px;
2020-02-20 19:23:15 +03:00
}
}
2019-09-30 15:38:41 +03:00
}
#topbar-wrapper {
2019-09-30 15:38:41 +03:00
left: 210px;
}
2020-08-19 16:18:14 +03:00
#search-results > div {
max-width: 700px;
}
.site-title {
2019-09-30 15:38:41 +03:00
font-size: 1.3rem;
margin-left: 0 !important;
2019-09-30 15:38:41 +03:00
}
.site-subtitle {
2020-02-25 12:56:03 +03:00
@include ml-mr(1rem);
font-size: 90%;
2019-09-30 15:38:41 +03:00
}
#main-wrapper {
2019-09-30 15:38:41 +03:00
margin-left: 210px;
}
#breadcrumb {
width: 65%;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
}
}
/* panel hidden */
@media all and (max-width: 1199px) {
#panel-wrapper {
display: none;
2019-09-30 15:38:41 +03:00
}
#topbar {
2019-09-30 15:38:41 +03:00
padding: 0;
}
2020-08-19 16:18:14 +03:00
#main > div.row {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
2019-09-30 15:38:41 +03:00
}
/* --- desktop mode, both sidebar and panel are visible --- */
2019-11-25 15:56:50 +03:00
@media all and (min-width: 1200px) {
2020-08-19 16:18:14 +03:00
#main > div.row > div.col-xl-8 {
2019-09-30 15:38:41 +03:00
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
padding-left: 3%;
}
#topbar {
padding: 0;
max-width: 1070px;
2019-11-25 15:56:50 +03:00
}
#panel-wrapper {
2020-02-27 12:36:59 +03:00
max-width: $panel-max-width;
2019-09-30 15:38:41 +03:00
}
#back-to-top {
bottom: 6.5rem;
2019-09-30 15:38:41 +03:00
right: 4.3rem;
}
#search-input {
2020-12-18 15:54:18 +03:00
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
2019-09-30 15:38:41 +03:00
}
2020-08-19 16:18:14 +03:00
#search-results > div {
width: 46%;
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:nth-child(odd) {
margin-right: 1.5rem;
}
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:nth-child(even) {
margin-left: 1.5rem;
}
2021-10-25 22:04:15 +03:00
2020-02-25 12:56:03 +03:00
&:last-child:nth-child(odd) {
position: relative;
right: 24.3%;
}
}
2021-12-01 16:49:51 +03:00
#search-hints {
display: none;
}
.post-content {
2020-02-28 19:16:47 +03:00
font-size: 1.03rem;
}
2020-08-19 16:18:14 +03:00
footer > div.d-felx {
2020-02-21 00:23:43 +03:00
width: 85%;
}
2019-09-30 15:38:41 +03:00
}
@media all and (min-width: 1400px) {
2020-08-19 16:18:14 +03:00
#main > div.row {
2020-02-27 12:36:59 +03:00
padding-left: calc((100% - #{$main-content-max-width}) / 2);
2021-10-25 22:04:15 +03:00
2020-10-27 17:08:04 +03:00
> div.col-xl-8 {
2020-02-25 12:56:03 +03:00
max-width: 850px;
}
}
2019-11-28 17:32:33 +03:00
#search-result-wrapper {
padding-right: 2rem;
2021-10-25 22:04:15 +03:00
2020-10-27 17:08:04 +03:00
> div {
2020-02-25 12:56:03 +03:00
max-width: 1110px;
}
}
#search-wrapper .fa-times-circle {
right: 2.6rem;
}
}
@media all and (min-width: 1400px) and (max-width: 1650px) {
#topbar {
padding-right: 2rem;
}
}
@media all and (min-width: 1650px) {
#breadcrumb {
padding-left: 0;
}
2020-08-19 16:18:14 +03:00
#main > div.row > div.col-xl-8 {
padding-left: 0;
2021-10-25 22:04:15 +03:00
2020-10-27 17:08:04 +03:00
> div:first-child {
padding-left: 0.55rem !important;
2020-02-25 12:56:03 +03:00
padding-right: 1.9rem !important;
}
}
#main-wrapper {
2020-02-27 12:36:59 +03:00
margin-left: $sidebar-width-large;
2019-09-30 15:38:41 +03:00
}
#panel-wrapper {
2020-02-27 12:36:59 +03:00
margin-left: calc((100% - #{$main-content-max-width}) / 10);
}
#topbar-wrapper {
2020-02-27 12:36:59 +03:00
left: $sidebar-width-large;
}
#topbar {
2020-02-27 12:36:59 +03:00
max-width: #{$main-content-max-width};
}
#search-wrapper {
margin-right: 3%;
}
#sidebar {
width: $sidebar-width-large;
.profile-wrapper {
margin-top: 4rem;
margin-bottom: 1rem;
&.text-center {
text-align: left !important;
}
%profile-ml {
margin-left: 4.5rem;
}
#avatar {
@extend %profile-ml;
> a {
width: 6.2rem;
height: 6.2rem;
2021-10-25 22:04:15 +03:00
&.mx-auto {
margin-left: 0 !important;
}
}
}
.site-title {
@extend %profile-ml;
a {
font-size: 1.7rem;
letter-spacing: 1px;
}
2020-02-25 12:56:03 +03:00
}
.site-subtitle {
@extend %profile-ml;
word-spacing: 0;
margin-top: 0.3rem;
2020-02-25 12:56:03 +03:00
}
} // .profile-wrapper (min-width: 1650px)
ul {
padding-left: 2.5rem;
> li:last-child {
> a {
position: static;
}
}
.nav-item {
text-align: left;
.nav-link {
> span {
2021-09-21 17:37:28 +03:00
letter-spacing: 2px;
}
> i {
&.unloaded {
display: inline-block !important;
}
}
}
2020-02-25 12:56:03 +03:00
}
}
2020-02-25 12:56:03 +03:00
.sidebar-bottom {
padding-left: 3.5rem;
width: 100%;
2021-09-21 17:37:28 +03:00
$icon-block-size: 2rem;
&.justify-content-center {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
2021-09-21 17:37:28 +03:00
> span,
> a {
@include ml-mr(0.15rem);
2021-09-21 17:37:28 +03:00
height: $icon-block-size;
margin-bottom: 0.5rem; // wrap line
}
2019-09-30 15:38:41 +03:00
2021-09-21 17:37:28 +03:00
i {
background-color: var(--sidebar-btn-bg);
font-size: 1rem;
width: $icon-block-size;
height: $icon-block-size;
border-radius: 50%;
position: relative;
2021-09-21 17:37:28 +03:00
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
2020-02-25 12:56:03 +03:00
}
2020-02-20 20:27:28 +03:00
}
2020-02-16 22:06:38 +03:00
2020-02-25 12:56:03 +03:00
.icon-border {
2021-09-21 17:37:28 +03:00
top: 0.9rem;
2020-02-25 12:56:03 +03:00
}
2020-02-25 12:56:03 +03:00
} // .sidebar-bottom
2020-02-25 12:56:03 +03:00
} // #sidebar
2020-08-19 16:18:14 +03:00
footer > div.d-flex {
width: 92%;
2020-02-21 00:23:43 +03:00
max-width: 1140px;
}
#search-result-wrapper {
2020-10-27 17:08:04 +03:00
> div {
2020-02-27 12:36:59 +03:00
max-width: #{$main-content-max-width};
2020-02-25 12:56:03 +03:00
}
}
2020-02-25 12:56:03 +03:00
} // min-width: 1650px
@media all and (min-width: 1700px) {
#topbar-wrapper {
/* 100% - 350px - (1920px - 350px); */
padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
}
2020-04-06 22:46:46 +03:00
#topbar {
max-width: calc(#{$main-content-max-width} + 20px);
2020-04-06 22:46:46 +03:00
}
2020-08-19 16:18:14 +03:00
#main > div.row {
2020-02-27 12:36:59 +03:00
padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
}
#panel-wrapper {
margin-left: 3%;
}
footer {
2020-02-21 00:23:43 +03:00
padding-left: 0;
2020-02-27 12:36:59 +03:00
padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
}
#back-to-top {
right: calc(100% - 1920px + 15rem);
2019-09-30 15:38:41 +03:00
}
}
@media (min-width: 1920px) {
2020-08-19 16:18:14 +03:00
#main > div.row {
padding-left: 190px;
}
#search-result-wrapper {
padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
}
#panel-wrapper {
margin-left: 41px;
}
}