quartz-research-note/assets/styles/base.scss
Claudio Yanes 4e1e39bff4 Remove unnecessary scrollbars
The margin property can escape the parent node and move it alongside
its child. This happens with singlePage div and the body, resulting in
scrollbars appearing as the body has the size of the viewport but
does not align with it. This phenomenon can be always observed
in the vertical axis and it can also be observed in the horizontal axis
when the viewport it’s not wide enough (mostly in mobile).

Using paddings prevents this “extra space” from scraping and displacing
the body.

Also, the value 100vw does not take into account the space taken by the
vertical scrollbar, thus making the body wider than the actual viewport,
producing a horizontal scrollbar.
2022-03-04 04:12:43 +00:00

511 lines
8.1 KiB
SCSS

: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;
}
h1, h2, h3, h4, h5, h6, ol, ul, thead {
font-family: Inter;
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);
font-weight: revert;
margin: revert;
padding: revert;
}
#TableOfContents > ol {
counter-reset: section;
margin-left: 0em;
padding-left: 1.5em;
& > li {
counter-increment: section;
& > ol {
counter-reset: subsection;
& > li {
counter-increment: subsection;
&::marker {
content: counter(section) "." counter(subsection) " ";
}
}
}
}
& > li::marker {
content: counter(section) " ";
}
& > li::marker, & > li > ol > li::marker {
font-family: Source Sans Pro;
font-weight: 700;
}
}
footer {
margin-top: 4em;
text-align: center;
}
table {
width: 100%;
}
img {
width: 100%;
border-radius: 3px;
margin: 1em 0;
}
p>img+em {
display: block;
transform: translateY(-1em);
}
sup {
line-height: 0
}
p, tbody, li {
font-family: Source Sans Pro;
color: var(--gray);
line-height: 1.5em;
}
blockquote {
margin-left: 0em;
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 {
margin: 0.5em 0;
}
.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 {
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;
font-size: 0.9rem;
}
sup > a {
text-decoration: none;
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;
border-radius: 3px;
overflow-x: scroll;
}
code {
font-family: 'Fira Code';
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;}
}
footer {
margin-top: 4em;
& > a {
font-size: 1em;
color: var(--secondary);
padding: 0 0.5em 3em 0.5em;
}
}
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;
}
}
.page-end {
display: flex;
flex-direction: row;
gap: 2em;
@media all and (max-width: 780px) {
flex-direction: column;
}
& > * {
flex: 1 0 0;
}
& > .backlinks-container {
& > ul {
list-style: none;
padding-left: 0;
& > 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;
}
}
}
.popover {
z-index: 999;
position: absolute;
width: 20em;
display: inline-block;
visibility: hidden;
background-color: var(--light);
padding: 1em;
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;
&.visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, 20%);
}
& > h3 {
font-size: 1rem;
margin: 0.25em 0;
}
& > .meta {
margin-top: 0.25em;
opacity: 0.5;
}
& > p {
margin: 0;
font-weight: 400;
user-select: none;
}
}