Backporting theme "PaperMod"

Signed-off-by: Valentin Popov <valentin@popov.link>
author: Valentin Popov <valentin@popov.link> 2022-07-20 12:58:24 +0300
committer: Valentin Popov <valentin@popov.link> 2022-07-20 12:58:24 +0300
commit: 38e48011bcedffb897cab53c350f1fbe50b58389 (patch)
tree: 9ae33f697f4b10936783ffe68d03cda9122697f5 /sass
parent: a581b92e8a862ce041383709634fffc129ba3a3c (diff)
download: popov.link-38e48011bcedffb897cab53c350f1fbe50b58389.tar.xz
popov.link-38e48011bcedffb897cab53c350f1fbe50b58389.zip
15 files changed, 1155 insertions, 0 deletions
diff --git a/sass/common/_404.scss b/sass/common/_404.scss
new file mode 100644
index 0000000..44512ae
--- /dev/null
+++ b/sass/common/_404.scss
@@ -0,0 +1,11 @@
+.not-found {
+ position: absolute;
+ left: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 80%;
+ font-size: 160px;
+ font-weight: 700;
+}
diff --git a/sass/common/_archive.scss b/sass/common/_archive.scss
new file mode 100644
index 0000000..0046cf7
--- /dev/null
+++ b/sass/common/_archive.scss
@@ -0,0 +1,44 @@
+.archive-posts {
+ width: 100%;
+ font-size: 16px;
+}
+
+.archive-year {
+ margin-top: 40px;
+}
+
+.archive-year:not(:last-of-type) {
+ border-bottom: 2px solid var(--border);
+}
+
+.archive-month {
+ display: flex;
+ align-items: flex-start;
+ padding: 10px 0;
+}
+
+.archive-month-header {
+ margin: 25px 0;
+ width: 200px;
+}
+
+.archive-month:not(:last-of-type) {
+ border-bottom: 1px solid var(--border);
+}
+
+.archive-entry {
+ position: relative;
+ padding: 5px;
+ margin: 10px 0;
+}
+
+.archive-entry-title {
+ margin: 5px 0;
+ font-weight: 400;
+}
+
+.archive-count,
+.archive-meta {
+ color: var(--secondary);
+ font-size: 14px;
+}
diff --git a/sass/common/_footer.scss b/sass/common/_footer.scss
new file mode 100644
index 0000000..d09a307
--- /dev/null
+++ b/sass/common/_footer.scss
@@ -0,0 +1,60 @@
+.footer,
+.top-link {
+ font-size: 12px;
+ color: var(--secondary);
+}
+
+.footer {
+ max-width: calc(var(--main-width) + var(--gap) * 2);
+ margin: auto;
+ padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap);
+ text-align: center;
+ line-height: 24px;
+}
+
+.footer span {
+ margin-inline-start: 1px;
+ margin-inline-end: 1px;
+}
+
+.footer span:last-child {
+ white-space: nowrap;
+}
+
+.footer a {
+ color: inherit;
+ border-bottom: 1px solid var(--secondary);
+}
+
+.footer a:hover {
+ border-bottom: 1px solid var(--primary);
+}
+
+.top-link {
+ visibility: hidden;
+ position: fixed;
+ bottom: 60px;
+ right: 30px;
+ z-index: 99;
+ background: var(--tertiary);
+ width: 42px;
+ height: 42px;
+ padding: 12px;
+ border-radius: 64px;
+ transition: visibility 0.5s, opacity 0.8s linear;
+}
+
+.top-link,
+.top-link svg {
+ filter: drop-shadow(0px 0px 0px var(--theme));
+}
+
+.footer a:hover,
+.top-link:hover {
+ color: var(--primary);
+}
+
+.top-link:focus,
+#theme-toggle:focus {
+ outline: 0;
+}
diff --git a/sass/common/_header.scss b/sass/common/_header.scss
new file mode 100644
index 0000000..f3ebeff
--- /dev/null
+++ b/sass/common/_header.scss
@@ -0,0 +1,93 @@
+.nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ max-width: calc(var(--nav-width) + var(--gap) * 2);
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ line-height: var(--header-height);
+}
+
+.nav a {
+ display: block;
+}
+
+.logo,
+#menu {
+ display: flex;
+ margin: auto var(--gap);
+}
+
+.logo {
+ flex-wrap: inherit;
+}
+
+.logo a {
+ font-size: 24px;
+ font-weight: 700;
+}
+
+.logo a img {
+ display: inline;
+ vertical-align: middle;
+ pointer-events: none;
+ transform: translate(0, -10%);
+ border-radius: 6px;
+ margin-inline-end: 8px;
+}
+
+button#theme-toggle {
+ font-size: 26px;
+ margin: auto 4px;
+}
+
+body.dark #moon {
+ vertical-align: middle;
+ display: none;
+}
+
+body:not(.dark) #sun {
+ display: none;
+}
+
+#menu {
+ list-style: none;
+ word-break: keep-all;
+ overflow-x: auto;
+ white-space: nowrap;
+}
+
+#menu li + li {
+ margin-inline-start: var(--gap);
+}
+
+#menu a {
+ font-size: 16px;
+}
+
+#menu .active {
+ font-weight: 500;
+ border-bottom: 2px solid currentColor;
+}
+
+.lang-switch li,
+.lang-switch ul,
+.logo-switches {
+ display: inline-flex;
+ margin: auto 4px;
+}
+
+.lang-switch {
+ display: flex;
+ flex-wrap: inherit;
+}
+
+.lang-switch a {
+ margin: auto 3px;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.logo-switches {
+ flex-wrap: inherit;
+}
diff --git a/sass/common/_main.scss b/sass/common/_main.scss
new file mode 100644
index 0000000..660c576
--- /dev/null
+++ b/sass/common/_main.scss
@@ -0,0 +1,68 @@
+.main {
+ position: relative;
+ min-height: calc(100vh - var(--header-height) - var(--footer-height));
+ max-width: calc(var(--main-width) + var(--gap) * 2);
+ margin: auto;
+ padding: var(--gap);
+}
+
+.page-header h1 {
+ font-size: 40px;
+}
+
+.pagination {
+ display: flex;
+}
+
+.pagination a {
+ color: var(--theme);
+ font-size: 13px;
+ line-height: 36px;
+ background: var(--primary);
+ border-radius: calc(36px / 2);
+ padding: 0 16px;
+}
+
+.pagination .next {
+ margin-inline-start: auto;
+}
+
+.social-icons {
+ padding: 12px 0;
+}
+
+.social-icons a:not(:last-of-type) {
+ margin-inline-end: 12px;
+}
+
+.social-icons a svg {
+ height: 26px;
+ width: 26px;
+}
+
+code {
+ direction: ltr;
+}
+
+div.highlight,
+pre {
+ position: relative;
+}
+
+.copy-code {
+ display: none;
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ color: rgba(255, 255, 255, 0.8);
+ background: rgba(78, 78, 78, 0.8);
+ border-radius: var(--radius);
+ padding: 0 5px;
+ font-size: 14px;
+ user-select: none;
+}
+
+div.highlight:hover .copy-code,
+pre:hover .copy-code {
+ display: block;
+}
diff --git a/sass/common/_post-entry.scss b/sass/common/_post-entry.scss
new file mode 100644
index 0000000..7813225
--- /dev/null
+++ b/sass/common/_post-entry.scss
@@ -0,0 +1,104 @@
+.first-entry {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-height: 320px;
+ margin: var(--gap) 0 calc(var(--gap) * 2) 0;
+}
+
+.first-entry .entry-header {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+}
+
+.first-entry .entry-header h1 {
+ font-size: 34px;
+ line-height: 1.3;
+}
+
+.first-entry .entry-content {
+ margin: 14px 0;
+ font-size: 16px;
+ -webkit-line-clamp: 3;
+}
+
+.first-entry .entry-footer {
+ font-size: 14px;
+}
+
+.home-info .entry-content {
+ -webkit-line-clamp: unset;
+}
+
+.post-entry {
+ position: relative;
+ margin-bottom: var(--gap);
+ padding: var(--gap);
+ background: var(--entry);
+ border-radius: var(--radius);
+ transition: transform 0.1s;
+ border: 1px solid var(--border);
+}
+
+.post-entry:active {
+ transform: scale(0.96);
+}
+
+.tag-entry .entry-cover {
+ display: none;
+}
+
+.entry-header h2 {
+ font-size: 24px;
+ line-height: 1.3;
+}
+
+.entry-content {
+ margin: 8px 0;
+ color: var(--secondary);
+ font-size: 14px;
+ line-height: 1.6;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+
+.entry-footer {
+ color: var(--secondary);
+ font-size: 13px;
+}
+
+.entry-link {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
+
+.entry-cover,
+.entry-isdraft {
+ font-size: 14px;
+ color: var(--secondary);
+}
+
+.entry-cover {
+ margin-bottom: var(--gap);
+ text-align: center;
+}
+
+.entry-cover img {
+ border-radius: var(--radius);
+ pointer-events: none;
+ width: 100%;
+ height: auto;
+}
+
+.entry-cover a {
+ color: var(--secondary);
+ box-shadow: 0 1px 0 var(--primary);
+}
diff --git a/sass/common/_post-single.scss b/sass/common/_post-single.scss
new file mode 100644
index 0000000..f0cf046
--- /dev/null
+++ b/sass/common/_post-single.scss
@@ -0,0 +1,401 @@
+.page-header,
+.post-header {
+ margin: 24px auto var(--content-gap) auto;
+}
+
+.post-title {
+ margin-bottom: 2px;
+ font-size: 40px;
+}
+
+.post-description {
+ margin-top: 10px;
+ margin-bottom: 5px;
+}
+
+.post-meta,
+.breadcrumbs {
+ color: var(--secondary);
+ font-size: 14px;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.post-meta .i18n_list li {
+ display: inline-flex;
+ list-style: none;
+ margin: auto 3px;
+ box-shadow: 0 1px 0 var(--secondary);
+}
+
+.breadcrumbs a {
+ font-size: 16px;
+}
+
+.post-content {
+ color: var(--content);
+}
+
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
+ margin: 24px 0 16px;
+}
+
+.post-content h1 {
+ margin: 40px auto 32px;
+ font-size: 40px;
+}
+
+.post-content h2 {
+ margin: 32px auto 24px;
+ font-size: 32px;
+}
+
+.post-content h3 {
+ font-size: 24px;
+}
+
+.post-content h4 {
+ font-size: 16px;
+}
+
+.post-content h5 {
+ font-size: 14px;
+}
+
+.post-content h6 {
+ font-size: 12px;
+}
+
+.post-content a,
+.toc a:hover {
+ box-shadow: 0 1px 0;
+}
+
+.post-content a code {
+ margin: auto 0;
+ border-radius: 0;
+ box-shadow: 0 -1px 0 var(--primary) inset;
+}
+
+.post-content del {
+ text-decoration: none;
+ background: linear-gradient(to right, var(--primary) 100%, transparent 0) 0 50%/1px 1px repeat-x;
+}
+
+.post-content dl,
+.post-content ol,
+.post-content p,
+.post-content figure,
+.post-content ul {
+ margin-bottom: var(--content-gap);
+}
+
+.post-content ol,
+.post-content ul {
+ padding-inline-start: 20px;
+}
+
+.post-content li {
+ margin-top: 5px;
+}
+
+.post-content li p {
+ margin-bottom: 0;
+}
+
+.post-content dl {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+}
+
+.post-content dt {
+ width: 25%;
+ font-weight: 700;
+}
+
+.post-content dd {
+ width: 75%;
+ margin-inline-start: 0;
+ padding-inline-start: 10px;
+}
+
+.post-content dd ~ dd,
+.post-content dt ~ dt {
+ margin-top: 10px;
+}
+
+.post-content table {
+ margin-bottom: 32px;
+}
+
+.post-content table th,
+.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
+ min-width: 80px;
+ padding: 12px 8px;
+ line-height: 1.5;
+ border-bottom: 1px solid var(--border);
+}
+
+.post-content table th {
+ font-size: 14px;
+ text-align: start;
+}
+
+.post-content table:not(.highlighttable) td code:only-child {
+ margin: auto 0;
+}
+
+.post-content .highlight table {
+ border-radius: var(--radius);
+}
+
+.post-content .highlight:not(table) {
+ margin: 10px auto;
+ background: var(--hljs-bg) !important;
+ border-radius: var(--radius);
+ direction: ltr;
+}
+
+.post-content li > .highlight {
+ margin-inline-end: 0;
+}
+
+.post-content ul pre {
+ margin-inline-start: calc(var(--gap) * -2);
+}
+
+.post-content .highlight pre {
+ margin: 0;
+}
+
+.post-content .highlighttable {
+ table-layout: fixed;
+}
+
+.post-content .highlighttable td:first-child {
+ width: 40px;
+}
+
+.post-content .highlighttable td .linenodiv {
+ padding-inline-end: 0 !important;
+}
+
+.post-content .highlighttable td .highlight,
+.post-content .highlighttable td .linenodiv pre {
+ margin-bottom: 0;
+}
+
+.post-content code {
+ margin: auto 4px;
+ padding: 4px 6px;
+ font-size: 0.78em;
+ line-height: 1.5;
+ background: var(--code-bg);
+ border-radius: 2px;
+}
+
+.post-content pre code {
+ display: block;
+ margin: auto 0;
+ padding: 10px;
+ color: rgb(213, 213, 214);
+ background: var(--hljs-bg) !important;
+ border-radius: var(--radius);
+ overflow-x: auto;
+ word-break: break-all;
+}
+
+.post-content blockquote {
+ margin: 20px 0;
+ padding: 0 14px;
+ border-inline-start: 3px solid var(--primary);
+}
+
+.post-content hr {
+ margin: 30px 0;
+ height: 2px;
+ background: var(--tertiary);
+ border: 0;
+}
+
+.post-content iframe {
+ max-width: 100%;
+}
+
+.post-content img {
+ border-radius: 4px;
+ margin: 1rem 0;
+}
+
+.post-content img[src*="#center"] {
+ margin: 1rem auto;
+}
+
+.post-content figure.align-center {
+ text-align: center;
+}
+
+.post-content figure > figcaption {
+ color: var(--primary);
+ font-size: 16px;
+ font-weight: bold;
+ margin: 8px 0 16px;
+}
+
+.post-content figure > figcaption > p {
+ color: var(--secondary);
+ font-size: 14px;
+ font-weight: normal;
+}
+
+.toc {
+ margin: 0 2px 40px 2px;
+ border: 1px solid var(--border);
+ background: var(--code-bg);
+ border-radius: var(--radius);
+ padding: 0.4em;
+}
+
+.dark .toc {
+ background: var(--entry);
+}
+
+.toc details summary {
+ cursor: zoom-in;
+ margin-inline-start: 20px;
+}
+
+.toc details[open] summary {
+ cursor: zoom-out;
+}
+
+.toc .details {
+ display: inline;
+ font-weight: 500;
+}
+
+.toc .inner {
+ margin: 0 20px;
+ padding: 10px 20px;
+}
+
+.toc li ul {
+ margin-inline-start: var(--gap);
+}
+
+.toc summary:focus {
+ outline: 0;
+}
+
+.post-footer {
+ margin-top: 56px;
+}
+
+.post-tags li {
+ display: inline-block;
+ margin-inline-end: 3px;
+ margin-bottom: 5px;
+}
+
+.post-tags a,
+.share-buttons,
+.paginav {
+ border-radius: var(--radius);
+ background: var(--code-bg);
+ border: 1px solid var(--border);
+}
+
+.post-tags a {
+ display: block;
+ padding-inline-start: 14px;
+ padding-inline-end: 14px;
+ color: var(--secondary);
+ font-size: 14px;
+ line-height: 34px;
+ background: var(--code-bg);
+}
+
+.post-tags a:hover,
+.paginav a:hover {
+ background: var(--border);
+}
+
+.share-buttons {
+ margin: 14px 0;
+ padding-inline-start: var(--radius);
+ display: flex;
+ justify-content: center;
+ overflow-x: auto;
+}
+
+.share-buttons a {
+ margin-top: 10px;
+}
+
+.share-buttons a:not(:last-of-type) {
+ margin-inline-end: 12px;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+ display: inline-flex;
+ color: var(--secondary);
+ margin-inline-start: 8px;
+ font-weight: 500;
+ user-select: none;
+}
+
+.paginav {
+ margin: 10px 0;
+ display: flex;
+ line-height: 30px;
+ border-radius: var(--radius);
+}
+
+.paginav a {
+ padding-inline-start: 14px;
+ padding-inline-end: 14px;
+ border-radius: var(--radius);
+}
+
+.paginav .title {
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ font-size: small;
+ color: var(--secondary);
+}
+
+.paginav .prev,
+.paginav .next {
+ width: 50%;
+}
+
+.paginav span:hover:not(.title) {
+ box-shadow: 0 1px 0;
+}
+
+.paginav .next {
+ margin-inline-start: auto;
+ text-align: right;
+}
+
+[dir="rtl"] .paginav .next {
+ text-align: left;
+}
+
+h1 > a > svg {
+ display: inline;
+}
+
+img.in-text {
+ display: inline;
+ margin: auto;
+}
diff --git a/sass/common/_profile-mode.scss b/sass/common/_profile-mode.scss
new file mode 100644
index 0000000..214fbc8
--- /dev/null
+++ b/sass/common/_profile-mode.scss
@@ -0,0 +1,42 @@
+.buttons,
+.main .profile {
+ display: flex;
+ justify-content: center;
+}
+
+.main .profile {
+ align-items: center;
+ min-height: calc(100vh - var(--header-height) - var(--footer-height) - (var(--gap) * 2));
+ text-align: center;
+}
+
+.profile .profile_inner h1 {
+ padding: 12px 0;
+}
+
+.profile img {
+ display: inline-table;
+ border-radius: 50%;
+}
+
+.buttons {
+ flex-wrap: wrap;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.button {
+ background: var(--tertiary);
+ border-radius: var(--radius);
+ margin: 8px;
+ padding: 6px;
+ transition: transform 0.1s;
+}
+
+.button-inner {
+ padding: 0 8px;
+}
+
+.button:active {
+ transform: scale(0.96);
+}
diff --git a/sass/common/_search.scss b/sass/common/_search.scss
new file mode 100644
index 0000000..fdab46c
--- /dev/null
+++ b/sass/common/_search.scss
@@ -0,0 +1,45 @@
+#searchbox input {
+ padding: 4px 10px;
+ width: 100%;
+ color: var(--primary);
+ font-weight: bold;
+ border: 2px solid var(--tertiary);
+ border-radius: var(--radius);
+}
+
+#searchbox input:focus {
+ border-color: var(--secondary);
+}
+
+#searchResults li {
+ list-style: none;
+ border-radius: var(--radius);
+ padding: 10px;
+ margin: 10px 0;
+ position: relative;
+ font-weight: 500;
+}
+
+#searchResults {
+ margin: 10px 0;
+ width: 100%;
+}
+
+#searchResults li:active {
+ transition: transform 0.1s;
+ transform: scale(0.98);
+}
+
+#searchResults a {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0px;
+ outline: none;
+}
+
+#searchResults .focus {
+ transform: scale(0.98);
+ border: 2px solid var(--tertiary);
+}
diff --git a/sass/common/_terms.scss b/sass/common/_terms.scss
new file mode 100644
index 0000000..884309e
--- /dev/null
+++ b/sass/common/_terms.scss
@@ -0,0 +1,18 @@
+.terms-tags li {
+ display: inline-block;
+ margin: 10px;
+ font-weight: 500;
+}
+
+.terms-tags a {
+ display: block;
+ padding: 3px 10px;
+ background: var(--tertiary);
+ border-radius: 6px;
+ transition: transform 0.1s;
+}
+
+.terms-tags a:active {
+ background: var(--tertiary);
+ transform: scale(0.96);
+}
diff --git a/sass/core/_reset.scss b/sass/core/_reset.scss
new file mode 100644
index 0000000..a822e80
--- /dev/null
+++ b/sass/core/_reset.scss
@@ -0,0 +1,116 @@
+*,
+::after,
+::before {
+ box-sizing: border-box;
+}
+
+html {
+ -webkit-tap-highlight-color: transparent;
+ overflow-y: scroll;
+}
+
+a,
+button,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: var(--primary);
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ font-size: 18px;
+ line-height: 1.6;
+ word-break: break-word;
+ background: var(--theme);
+}
+
+article,
+aside,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+table {
+ display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+ul {
+ padding: 0;
+}
+
+a {
+ text-decoration: none;
+}
+
+body,
+figure,
+ul {
+ margin: 0;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ overflow-x: auto;
+ word-break: keep-all;
+}
+
+button,
+input,
+textarea {
+ padding: 0;
+ font: inherit;
+ background: 0 0;
+ border: 0;
+}
+
+input,
+textarea {
+ outline: 0;
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+ cursor: pointer;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill {
+ box-shadow: 0 0 0 50px var(--theme) inset;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
diff --git a/sass/core/_theme-vars.scss b/sass/core/_theme-vars.scss
new file mode 100644
index 0000000..b731300
--- /dev/null
+++ b/sass/core/_theme-vars.scss
@@ -0,0 +1,38 @@
+:root {
+ --gap: 24px;
+ --content-gap: 20px;
+ --nav-width: 1024px;
+ --main-width: 720px;
+ --header-height: 60px;
+ --footer-height: 60px;
+ --radius: 8px;
+ --theme: rgb(255, 255, 255);
+ --entry: rgb(255, 255, 255);
+ --primary: rgb(30, 30, 30);
+ --secondary: rgb(108, 108, 108);
+ --tertiary: rgb(214, 214, 214);
+ --content: rgb(31, 31, 31);
+ --hljs-bg: rgb(28, 29, 33);
+ --code-bg: rgb(245, 245, 245);
+ --border: rgb(238, 238, 238);
+}
+
+.dark {
+ --theme: rgb(29, 30, 32);
+ --entry: rgb(46, 46, 51);
+ --primary: rgb(218, 218, 219);
+ --secondary: rgb(155, 156, 157);
+ --tertiary: rgb(65, 66, 68);
+ --content: rgb(196, 196, 197);
+ --hljs-bg: rgb(46, 46, 51);
+ --code-bg: rgb(55, 56, 62);
+ --border: rgb(51, 51, 51);
+}
+
+.list {
+ background: var(--code-bg);
+}
+
+.dark.list {
+ background: var(--theme);
+}
diff --git a/sass/core/_zmedia.scss b/sass/core/_zmedia.scss
new file mode 100644
index 0000000..ccf0ae5
--- /dev/null
+++ b/sass/core/_zmedia.scss
@@ -0,0 +1,42 @@
+@media screen and (max-width: 768px) {
+ :root {
+ --gap: 14px;
+ }
+
+ .profile img {
+ transform: scale(0.85);
+ }
+
+ .first-entry {
+ min-height: 260px;
+ }
+
+ .archive-month {
+ flex-direction: column;
+ }
+
+ .archive-year {
+ margin-top: 20px;
+ }
+
+ .footer {
+ padding: calc((var(--footer-height) - var(--gap) - 10px) / 2) var(--gap);
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .list .top-link {
+ transform: translateY(-5rem);
+ }
+}
+
+@media (prefers-reduced-motion) {
+ .terms-tags a:active,
+ .button:active,
+ .post-entry:active,
+ .top-link,
+ #searchResults .focus,
+ #searchResults li:active {
+ transform: none;
+ }
+}
diff --git a/sass/includes/_scrollbar.scss b/sass/includes/_scrollbar.scss
new file mode 100644
index 0000000..3400ceb
--- /dev/null
+++ b/sass/includes/_scrollbar.scss
@@ -0,0 +1,58 @@
+::-webkit-scrollbar-track {
+ background: 0 0;
+}
+
+.list:not(.dark)::-webkit-scrollbar-track {
+ background: var(--code-bg);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--tertiary);
+ border: 5px solid var(--theme);
+ border-radius: var(--radius);
+}
+
+.list:not(.dark)::-webkit-scrollbar-thumb {
+ border: 5px solid var(--code-bg);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--secondary);
+}
+
+::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
+ background: var(--theme);
+}
+
+.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
+ display: none;
+}
+
+.post-content :not(table) ::-webkit-scrollbar-thumb {
+ border: 2px solid var(--hljs-bg);
+ background: rgb(113, 113, 117);
+}
+
+.post-content :not(table) ::-webkit-scrollbar-thumb:hover {
+ background: rgb(163, 163, 165);
+}
+
+.gist table::-webkit-scrollbar-thumb {
+ border: 2px solid rgb(255, 255, 255);
+ background: rgb(173, 173, 173);
+}
+
+.gist table::-webkit-scrollbar-thumb:hover {
+ background: rgb(112, 112, 112);
+}
+
+.post-content table::-webkit-scrollbar-thumb {
+ border-width: 2px;
+}
+
+@media screen and (min-width: 768px) {
+ ::-webkit-scrollbar {
+ width: 19px;
+ height: 11px;
+ }
+}
diff --git a/sass/styles.scss b/sass/styles.scss
new file mode 100644
index 0000000..eb8af2d
--- /dev/null
+++ b/sass/styles.scss
@@ -0,0 +1,15 @@
+@import "includes/scrollbar";
+@import "core/theme-vars";
+@import "core/reset";
+@import "core/zmedia";
+
+@import "common/404";
+@import "common/archive";
+@import "common/footer";
+@import "common/header";
+@import "common/main";
+@import "common/post-entry";
+@import "common/post-single";
+@import "common/profile-mode";
+@import "common/search";
+@import "common/terms";
author	Valentin Popov <valentin@popov.link>	2022-07-20 12:58:24 +0300
committer	Valentin Popov <valentin@popov.link>	2022-07-20 12:58:24 +0300
commit	38e48011bcedffb897cab53c350f1fbe50b58389 (patch)
tree	9ae33f697f4b10936783ffe68d03cda9122697f5 /sass
parent	a581b92e8a862ce041383709634fffc129ba3a3c (diff)
download	popov.link-38e48011bcedffb897cab53c350f1fbe50b58389.tar.xz popov.link-38e48011bcedffb897cab53c350f1fbe50b58389.zip