From 7df2bb6f5e681ce3329e4faf6ac6cbcda7a3f14e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 05 Feb 2023 20:01:49 +0000
Subject: [PATCH] fix: fix duplicate link click tracking
---
assets/styles/base.scss | 416 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 250 insertions(+), 166 deletions(-)
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index aa172d0..5863c92 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -1,21 +1,63 @@
+// Replace this with your own font imports!
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
:root {
- --lt-colours-light: var(--light) !important;
- --lt-colours-lightgray: var(--lightgray) !important;
- --lt-colours-dark: var(--secondary) !important;
- --lt-colours-secondary: var(--tertiary) !important;
- --lt-colours-gray: var(--outlinegray) !important;
+ --font-body: "Source Sans Pro";
+ --font-header: "Inter";
+ --font-mono: "Fira Code"
}
-h1, h2, h3, h4, h5, h6, ol, ul, thead {
- font-family: Inter;
+// typography
+html {
+ scroll-behavior: smooth;
+ &:lang(ar) {
+ & p, & h1, & h2, & h3, article, header {
+ direction: rtl;
+ text-align: right;
+ }
+ }
+ & footer > p {
+ text-align: center !important;
+ }
+}
+
+.singlePage {
+ padding: 4em 30vw;
+ @media all and (max-width: 1200px) {
+ padding: 25px 5vw;
+ }
+}
+
+
+body {
+ margin: 0;
+ height: 100vh;
+ width: 100vw;
+ max-width: 100%;
+ box-sizing: border-box;
+ background-color: var(--light);
+}
+
+h1, h2, h3, h4, h5, h6, thead {
+ font-family: var(--font-header);
color: var(--dark);
font-weight: revert;
- margin: revert;
- padding: revert;
+ margin: 2rem 0 0;
+ padding: 2rem auto 1rem;
+
+ &:hover > .hanchor {
+ color: var(--secondary);
+ }
}
-p, ul, text {
- font-family: 'Source Sans Pro', sans-serif;
+.hanchor {
+ font-family: var(--font-header);
+ opacity: 0.8;
+ transition: color 0.3s ease;
+ color: var(--dark);
+}
+
+p, ul, text, a, tr, td, li, ol, ul {
+ font-family: var(--font-body);
color: var(--gray);
fill: var(--gray);
font-weight: revert;
@@ -23,9 +65,31 @@
padding: revert;
}
+tbody, li, p {
+ line-height: 1.5em;
+}
+
+.mainTOC {
+ border-radius: 5px;
+ padding: 0.75em 0;
+
+ & details {
+ & summary {
+ cursor: zoom-in;
+ font-family: var(--font-header);
+ color: var(--dark);
+ font-weight: 700;
+ }
+
+ &[open] summary {
+ cursor: zoom-out;
+ }
+ }
+}
+
#TableOfContents > ol {
counter-reset: section;
- margin-left: 0em;
+ margin-left: 0;
padding-left: 1.5em;
& > li {
counter-increment: section;
@@ -45,28 +109,30 @@
}
& > li::marker, & > li > ol > li::marker {
- font-family: Source Sans Pro;
+ font-family: var(--font-body);
font-weight: 700;
}
}
-footer {
- margin-top: 4em;
- text-align: center;
+table {
+ border: 1px solid var(--outlinegray);
+ width: 100%;
+ padding: 1.5em;
+ border-collapse: collapse;
}
-
-table {
- width: 100%;
+td, th {
+ padding: 0.2em 1em;
+ border: 1px solid var(--outlinegray);
}
img {
- width: 100%;
+ max-width: 100%;
border-radius: 3px;
margin: 1em 0;
}
-p>img+em {
+p > img + em {
display: block;
transform: translateY(-1em);
}
@@ -75,29 +141,11 @@
line-height: 0
}
-p, tbody, li {
- font-family: Source Sans Pro;
- color: var(--gray);
- line-height: 1.5em;
-}
-
blockquote {
- margin-left: 0em;
+ margin-left: 0;
border-left: 3px solid var(--secondary);
padding-left: 1em;
transition: border-color 0.2s ease;
-
- &:hover {
- border-color: var(--tertiary);
- }
-}
-
-table {
- padding: 1.5em;
-}
-
-td, th {
- padding: 0.1em 0.5em;
}
.footnotes p {
@@ -124,59 +172,24 @@
background-color: transparent !important;
}
- & a[href$="#"] {
+ & a[href$="#"], &.active a {
opacity: 0.2;
}
}
}
-.section {
- & h3 > a {
- font-weight: 700;
- font-family: Inter;
- margin: 0;
- }
- & p {
- margin-top: 0;
- }
-}
-
article {
+ & > h1 {
+ margin-top: 2em;
+ font-size: 2em;
+ }
+
& > .meta {
- margin: -1.5em 0 1em 0;
+ margin: 0 0 1em 0;
opacity: 0.7;
}
- & > .tags {
- list-style: none;
- padding-left: 0;
-
- & .meta {
- & > h1 {
- margin: 0;
- }
- & > p {
- margin: 0;
- }
- }
-
- & > li {
- display: inline-block;
- }
- & > li > a {
- border-radius: 8px;
- border: var(--outlinegray) 1px solid;
- padding: 0.2em 0.5em;
- &::before {
- content: "#";
- margin-right: 0.3em;
- color: var(--outlinegray);
- }
- }
- }
-
& a {
- font-family: Source Sans Pro;
font-weight: 600;
&.internal-link {
@@ -188,16 +201,47 @@
&.broken {
opacity: 0.5;
- background-color: transparent;
+ background-color: transparent;
}
}
}
-
+
& p {
overflow-wrap: anywhere;
}
}
+.tags {
+ list-style: none;
+ padding-left: 0;
+
+ & .meta {
+ margin: 1.5em 0;
+ & > h1 {
+ margin: 0;
+ }
+ & > p {
+ margin: 0;
+ }
+ }
+
+ & > li {
+ display: inline-block;
+ margin: 0.4em 0.2em;
+ }
+
+ & > li > a {
+ border-radius: 8px;
+ border: var(--outlinegray) 1px solid;
+ padding: 0.2em 0.5em;
+ &::before {
+ content: "#";
+ margin-right: 0.3em;
+ color: var(--outlinegray);
+ }
+ }
+}
+
.backlinks a {
font-weight: 600;
font-size: 0.9rem;
@@ -208,55 +252,39 @@
padding: 0 0.1em 0 0.2em;
}
+#page-title {
+ margin: 0;
+ & > a {
+ font-family: var(--font-header);
+ }
+}
+
a {
- font-family: Inter, sans-serif;
font-size: 1em;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
color: var(--secondary);
-
&:hover {
color: var(--tertiary) !important;
}
}
pre {
- font-family: 'Fira Code';
+ font-family: var(--font-mono);
padding: 0.75em;
border-radius: 3px;
overflow-x: scroll;
}
code {
- font-family: 'Fira Code';
+ font-family: var(--font-mono);
font-size: 0.85em;
padding: 0.15em 0.3em;
border-radius: 5px;
background: var(--lightgray);
}
-html {
- scroll-behavior: smooth;
-
- &:lang(ar) {
- & p, & h1, & h2, & h3, article {
- direction: rtl;
- text-align: right;
- }
- }
-}
-
-body {
- margin: 0;
- height: 100vh;
- width: 100vw;
- //overflow-x: hidden;
- max-width: 100%;
- box-sizing: border-box;
- background-color: var(--light);
-}
-
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
@@ -264,30 +292,18 @@
footer {
margin-top: 4em;
-
- & > a {
- font-size: 1em;
- color: var(--secondary);
- padding: 0 0.5em 3em 0.5em;
+ text-align: center;
+ & ul {
+ padding-left: 0;
}
}
hr {
- width: 25%;
- margin: 4em auto;
- height: 2px;
- border-radius: 1px;
- border-width: 0;
- color: var(--dark);
- background-color: var(--dark);
-}
-
-.singlePage {
- padding: 4em 30vw;
-
- @media all and (max-width: 1200px) {
- padding: 25px 5vw;
- }
+ width: 100%;
+ margin: 2em auto;
+ height: 1px;
+ border: none;
+ background-color: var(--outlinegray);
}
.page-end {
@@ -306,7 +322,8 @@
& > .backlinks-container {
& > ul {
list-style: none;
- padding-left: 0;
+ padding: 0;
+ margin: 0;
& > li {
margin: 0.5em 0;
@@ -320,6 +337,14 @@
& #graph-container {
border: var(--outlinegray) 1px solid;
border-radius: 5px;
+ box-sizing: border-box;
+ min-height: 250px;
+ margin: 0.5em 0;
+
+ & > svg {
+ margin-bottom: -5px;
+
+ }
}
}
@@ -327,14 +352,15 @@
margin-top: 30vh;
}
-article > h1 {
- font-size: 2em;
+.spacer {
+ flex: 1 1 auto;
}
header {
display: flex;
flex-direction: row;
align-items: center;
+ margin: 1em 0 2em;
& > h1 {
font-size: 2em;
@@ -346,15 +372,24 @@
}
}
- & > .spacer {
- flex: 1 1 auto;
+ #search-icon {
+ background-color: var(--lightgray);
+ border-radius: 4px;
+ height: 2em;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ & > p {
+ display: inline;
+ padding: 0 1.5em 0 2em;
+ }
}
- & > svg {
+ & svg {
cursor: pointer;
width: 18px;
min-width: 18px;
- margin: 0 1em;
+ margin: 0 0.5em;
&:hover .search-path {
stroke: var(--tertiary);
@@ -401,7 +436,7 @@
& > input {
box-sizing: border-box;
padding: 0.5em 1em;
- font-family: Inter, sans-serif;
+ font-family: var(--font-body);
color: var(--dark);
font-size: 1.1em;
border: 1px solid var(--outlinegray);
@@ -412,7 +447,7 @@
}
& > #results-container {
- & > .result-card {
+ & .result-card {
padding: 1em;
cursor: pointer;
transition: background 0.2s ease;
@@ -449,78 +484,122 @@
& > h3, & > p {
margin: 0;
}
-
- & .search-highlight {
- background-color: #afbfc966;
- padding: 0.05em 0.2em;
- border-radius: 3px;
- }
}
}
}
}
+.search-highlight {
+ background-color: #afbfc966;
+ padding: 0.05em 0.2em;
+ border-radius: 3px;
+}
+
.section-ul {
list-style: none;
+ margin-top: 2em;
padding-left: 0;
- & > li {
- border: 1px solid var(--outlinegray);
- border-radius: 5px;
- padding: 0 1em;
- margin-bottom: 1em;
+}
- & h3 {
- opacity: 1;
+.section-li {
+ margin-bottom: 1em;
+
+ & > .section {
+ display: flex;
+ align-items: center;
+
+ @media all and (max-width: 600px) {
+ & .tags {
+ display: none;
+ }
+ }
+
+ & h3 > a {
font-weight: 700;
- margin-bottom: 0em;
+ margin: 0;
}
- & .meta {
- opacity: 0.6;
+ & p {
+ margin: 0;
+ padding-right: 1em;
+ flex-basis: 6em;
}
}
+
+ & h3 {
+ opacity: 1;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ & .meta {
+ opacity: 0.6;
+ }
+}
+
+@keyframes dropin {
+ 0% {
+ display: none;
+ opacity: 0;
+ visibility: hidden;
+ }
+ 1% {
+ display: inline-block;
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ }
}
.popover {
z-index: 999;
position: absolute;
- width: 20em;
- display: inline-block;
- visibility: hidden;
+ width: 20rem;
+ display: none;
background-color: var(--light);
- padding: 1em;
+ padding: 1rem;
+ margin: 1rem;
border: 1px solid var(--outlinegray);
border-radius: 5px;
- transform: translate(-50%, 40%);
- opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
- transition-delay: 0.3s;
user-select: none;
+ overflow-wrap: anywhere;
+ box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
@media all and (max-width: 600px) {
- display: none;
+ display: none !important;
}
&.visible {
opacity: 1;
visibility: visible;
- transform: translate(-50%, 20%);
+ display: inline-block;
+ animation: dropin 0.2s ease;
}
& > h3 {
font-size: 1rem;
- margin: 0.25em 0;
+ margin: 0.25rem 0;
}
- & > .meta {
- margin-top: 0.25em;
+ & .meta {
+ margin-top: 0.25rem;
opacity: 0.5;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
}
& > p {
margin: 0;
+ padding: 0.5rem 0;
+ }
+
+ & > p, & > a {
+ font-size: 1rem;
font-weight: 400;
user-select: none;
}
@@ -537,3 +616,8 @@
padding: 0 1em;
}
}
+
+mark {
+ background-color: var(--highlighted);
+ color: var(--gray);
+}
--
Gitblit v1.10.0