From 7ccff2cf3d4f7a96be2cf890093798067951fd2e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 14 Jul 2022 18:49:47 +0000
Subject: [PATCH] fix: styling on page-list for smaller screens
---
assets/styles/base.scss | 95 ++++++++++++++++++++++++++++-------------------
1 files changed, 56 insertions(+), 39 deletions(-)
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index f618a3a..db8f30d 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -34,12 +34,12 @@
background-color: var(--light);
}
-h1, h2, h3, h4, h5, h6, ol, ul, thead {
+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 {
opacity: 1;
@@ -48,13 +48,12 @@
.hanchor {
font-family: var(--font-header);
- margin-left: -1em;
- opacity: 0.3;
+ opacity: 0.2;
transition: opacity 0.3s ease;
color: var(--secondary);
}
-p, ul, text, a, tr, td {
+p, ul, text, a, tr, td, li, ol, ul {
font-family: var(--font-body);
color: var(--gray);
fill: var(--gray);
@@ -63,7 +62,7 @@
padding: revert;
}
-tbody, li {
+tbody, li, p {
line-height: 1.5em;
}
@@ -170,29 +169,19 @@
background-color: transparent !important;
}
- & a[href$="#"] {
+ & a[href$="#"], &.active a {
opacity: 0.2;
}
}
}
-.section {
- & h3 > a {
- font-weight: 700;
- margin: 0;
- }
- & p {
- margin-top: 0;
- }
-}
-
article {
& > h1 {
font-size: 2em;
}
& > .meta {
- margin: -1.5em 0 1em 0;
+ margin: 0 0 1em 0;
opacity: 0.7;
}
@@ -223,6 +212,7 @@
padding-left: 0;
& .meta {
+ margin: 1.5em 0;
& > h1 {
margin: 0;
}
@@ -258,8 +248,11 @@
padding: 0 0.1em 0 0.2em;
}
-#page-title > a {
- font-family: var(--font-header);
+#page-title {
+ margin: 0;
+ & > a {
+ font-family: var(--font-header);
+ }
}
a {
@@ -327,7 +320,8 @@
& > .backlinks-container {
& > ul {
list-style: none;
- padding-left: 0;
+ padding: 0;
+ margin: 0;
& > li {
margin: 0.5em 0;
@@ -343,6 +337,7 @@
border-radius: 5px;
box-sizing: border-box;
min-height: 250px;
+ margin: 0.5em 0;
& > svg {
margin-bottom: -5px;
@@ -355,10 +350,15 @@
margin-top: 30vh;
}
+.spacer {
+ flex: 1 1 auto;
+}
+
header {
display: flex;
flex-direction: row;
align-items: center;
+ margin: 1em 0 2em;
& > h1 {
font-size: 2em;
@@ -370,10 +370,6 @@
}
}
- & > .spacer {
- flex: 1 1 auto;
- }
-
#search-icon {
background-color: var(--lightgray);
border-radius: 4px;
@@ -383,7 +379,7 @@
cursor: pointer;
& > p {
display: inline;
- padding: 0 0.5em 0 1em;
+ padding: 0 1.5em 0 2em;
}
}
@@ -499,23 +495,44 @@
.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;
}
+
+ & p {
+ margin: 0;
+ padding-right: 1em;
+ flex-basis: 6em;
+ }
+ }
- & .meta {
- opacity: 0.6;
- }
+ & h3 {
+ opacity: 1;
+ font-weight: 700;
+ margin: 0em;
+ }
+
+ & .meta {
+ opacity: 0.6;
}
}
@@ -576,7 +593,7 @@
& > p, & > a {
font-size: 1rem;
- margin: 0;
+ margin: 0.7rem 0;
font-weight: 400;
user-select: none;
}
--
Gitblit v1.10.0