quartz-research-note/assets/styles/base.scss
Claudio Yanes f70128a3de
Prevent overflow of long links and words
When a word (or any string withtout breakpoints (spaces, dashes....), making links the most common place where this becamoes an issue)  is wider than its container, the text will simply overflow any container, including the viewport. This commit fixes this behaviour by making the word-drap strategy of the browser more aggresive.
2022-03-09 17:58:01 +00:00

519 lines
8.2 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;
}
}
& p {
overflow-wrap: anywhere;
}
}
.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;
@media all and (max-width: 600px) {
display: 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;
}
}