mirror of
https://github.com/falsycat/ar.falsy.cat.git
synced 2024-09-18 18:34:52 +00:00
dc9b421e21
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.
511 lines
8.1 KiB
SCSS
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;
|
|
}
|
|
}
|