From ca886e40752a8a30762708ea87d7228f737c0cd2 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 28 Dec 2021 19:28:08 +0000
Subject: [PATCH] fix render link for apostrophe
---
assets/base.scss | 341 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 303 insertions(+), 38 deletions(-)
diff --git a/assets/base.scss b/assets/base.scss
index a0df87f..c4447ee 100644
--- a/assets/base.scss
+++ b/assets/base.scss
@@ -1,33 +1,26 @@
:root {
--lt-colours-light: var(--light) !important;
--lt-colours-lightgray: var(--lightgray) !important;
- --lt-colours-dark: var(--navy) !important;
- --lt-colours-secondary: var(--olive) !important;
+ --lt-colours-dark: var(--secondary) !important;
+ --lt-colours-secondary: var(--tertiary) !important;
--lt-colours-gray: var(--outlinegray) !important;
}
h1, h2, h3, h4, ol, ul, thead {
font-family: Inter;
- color: var(--dark)
+ color: var(--dark);
+ font-weight: revert;
+ margin: revert;
+ padding: revert;
}
p, ul, text {
font-family: 'Source Sans Pro', sans-serif;
color: var(--gray);
fill: var(--gray);
-}
-
-a {
- font-family: Inter;
- font-weight: 700;
- font-size: 1em;
- text-decoration: none;
- transition: all 0.2s ease;
- color: var(--navy);
-
- &:hover {
- color: var(--olive) !important;
- }
+ font-weight: revert;
+ margin: revert;
+ padding: revert;
}
#TableOfContents > ol {
@@ -88,22 +81,18 @@
line-height: 1.5em;
}
-h2 {
- opacity: 0.85;
-}
-
-h3 {
- opacity: 0.75;
+h2, h3 {
+ opacity: 0.9;
}
blockquote {
margin-left: 0em;
- border-left: 3px solid var(--navy);
+ border-left: 3px solid var(--secondary);
padding-left: 1em;
transition: border-color 0.2s ease;
&:hover {
- border-color: var(--olive);
+ border-color: var(--tertiary);
}
}
@@ -119,12 +108,91 @@
margin: 0.5em 0;
}
-article a {
- font-family: Source Sans Pro;
+.pagination {
+ list-style: none;
+ padding-left: 0;
+ display: flex;
+ margin-top: 2em;
+ gap: 1.5em;
+ justify-content: center;
+
+ & > li {
+ text-align: center;
+ display: inline-block;
+
+ & a {
+ background-color: transparent !important;
+ }
+
+ & a[href$="#"] {
+ opacity: 0.2;
+ }
+ }
+}
+
+.section {
+ & h3 > a {
+ font-weight: 700;
+ font-family: Inter;
+ margin: 0;
+ }
+ & p {
+ margin-top: 0;
+ }
+}
+
+article {
+ & > .meta {
+ margin: -1.5em 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
+ &[href^="./"], &[href^="/"] {
+ text-decoration: none;
+ background-color: transparentize(#8f9fa9, 0.85);
+ padding: 0 0.1em;
+ margin: auto -0.1em;
+ border-radius: 3px;
+ }
+ }
+}
+
+.backlinks a {
font-weight: 600;
- text-decoration: underline;
- text-decoration-color: var(--olive);
- text-decoration-thickness: .15em;
+ font-size: 0.9rem;
}
sup > a {
@@ -132,6 +200,19 @@
padding: 0 0.1em 0 0.2em;
}
+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';
padding: 0.75em;
@@ -169,7 +250,7 @@
& > a {
font-size: 1em;
- color: var(--navy);
+ color: var(--secondary);
padding: 0 0.5em 3em 0.5em;
}
}
@@ -184,18 +265,202 @@
background-color: var(--dark);
}
-// internal link
-a[href^="/"] {
- text-decoration: none;
- background-color: #afbfc922;
- padding: 0 0.2em;
- border-radius: 3px;
-}
-
.singlePage {
margin: 4em 30vw;
@media all and (max-width: 1200px) {
margin: 25px 5vw;
}
+}
+
+.page-end {
+ display: flex;
+ flex-direction: row;
+
+ @media all and (max-width: 780px) {
+ flex-direction: column;
+ }
+
+ & > * {
+ flex: 1 0 0;
+ }
+
+ & > .backlinks-container {
+ & > ul {
+ list-style: none;
+ padding-left: 0;
+ margin-right: 2em;
+
+ & > li {
+ margin: 0.5em 0;
+ padding: 0.25em 1em;
+ border: var(--outlinegray) 1px solid;
+ border-radius: 5px
+ }
+ }
+ }
+
+ & #graph-container {
+ border: var(--outlinegray) 1px solid;
+ border-radius: 5px;
+ }
+}
+
+.centered {
+ margin-top: 30vh;
+}
+
+article > h1 {
+ font-size: 2em;
+}
+
+header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ & > h1 {
+ font-size: 2em;
+ }
+
+ & > nav {
+ @media all and (max-width: 600px) {
+ display: none;
+ }
+ }
+
+ & > .spacer {
+ flex: 1 1 auto;
+ }
+
+ & > svg {
+ cursor: pointer;
+ width: 18px;
+ min-width: 18px;
+ margin: 0 1em;
+
+ &:hover .search-path {
+ stroke: var(--tertiary);
+ }
+
+ .search-path {
+ stroke: var(--gray);
+ stroke-width: 2px;
+ transition: stroke 0.5s ease;
+ }
+ }
+}
+
+#search-container {
+ position: fixed;
+ z-index: 9999;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100%;
+ overflow: scroll;
+ display: none;
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+
+ & > div {
+ width: 50%;
+ margin-top: 15vh;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media all and (max-width: 1200px) {
+ width: 90%;
+ }
+
+ & > * {
+ width: 100%;
+ border-radius: 4px;
+ background: var(--light);
+ box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16);
+ margin-bottom: 2em;
+ }
+
+ & > input {
+ box-sizing: border-box;
+ padding: 0.5em 1em;
+ font-family: Inter, sans-serif;
+ color: var(--dark);
+ font-size: 1.1em;
+ border: 1px solid var(--outlinegray);
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ & > #results-container {
+ & > .result-card {
+ padding: 1em;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ border: 1px solid var(--outlinegray);
+ border-bottom: none;
+ width: 100%;
+
+ // normalize button props
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
+ text-transform: none;
+ text-align: left;
+ background: var(--light);
+ outline: none;
+
+ &:hover, &:focus {
+ background: rgba(180, 180, 180, 0.15);
+ }
+
+ &:first-of-type {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ }
+
+ &:last-of-type {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-bottom: 1px solid var(--outlinegray);
+ }
+
+ & > h3, & > p {
+ margin: 0;
+ }
+
+ & .search-highlight {
+ background-color: #afbfc966;
+ padding: 0.05em 0.2em;
+ border-radius: 3px;
+ }
+ }
+ }
+ }
+}
+
+.section-ul {
+ list-style: none;
+ padding-left: 0;
+
+ & > li {
+ border: 1px solid var(--outlinegray);
+ border-radius: 5px;
+ padding: 0 1em;
+ margin-bottom: 1em;
+
+ & h3 {
+ opacity: 1;
+ font-weight: 700;
+ margin-bottom: 0em;
+ }
+
+ & .meta {
+ opacity: 0.6;
+ }
+ }
}
\ No newline at end of file
--
Gitblit v1.10.0