mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
kennethreitz
e996cb4689
Adds comprehensive mobile optimizations including responsive breakpoints, touch-friendly interfaces, and performance enhancements. Reduces sacred geometry complexity on mobile devices and implements touch gesture support with improved typography scaling for better readability across all screen sizes.
1132 lines
24 KiB
CSS
1132 lines
24 KiB
CSS
/*
|
|
Kenneth Reitz Custom Tufte CSS
|
|
Combines the elegance of Tufte CSS with Kenneth's brand identity
|
|
Dark Mode Edition with Enhanced Typography
|
|
*/
|
|
|
|
/* =====================================================
|
|
TUFTE OVERRIDES WITH KENNETH'S BRANDING
|
|
===================================================== */
|
|
|
|
/* Ensure we're working within the Tufte context */
|
|
.tufte {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
counter-reset: sidenote-counter;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: optimizeLegibility;
|
|
letter-spacing: 0.01em;
|
|
font-feature-settings: "kern", "liga", "clig", "calt";
|
|
}
|
|
|
|
.tufte h1, .tufte h2, .tufte h3, .tufte h4, .tufte h5, .tufte h6 {
|
|
color: #b5a7e0;
|
|
margin-top: 1.568rem;
|
|
margin-bottom: 1.568rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.tufte h1 {
|
|
font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.tufte h2, .tufte h3, .tufte h4, .tufte h5, .tufte h6 {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
/* Header styling */
|
|
.tufte h1 {
|
|
font-weight: 400;
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1.8rem;
|
|
font-size: 3.4rem;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
color: #b5a7e0;
|
|
}
|
|
background: linear-gradient(135deg, #b5a7e0 0%, #6f52b0 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
position: relative;
|
|
}
|
|
|
|
.tufte h1::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -0.5rem;
|
|
left: 0;
|
|
height: 2px;
|
|
width: 3rem;
|
|
background: linear-gradient(135deg, #b5a7e0 0%, #6f52b0 100%);
|
|
}
|
|
|
|
.tufte h2 {
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
margin-top: 2.8rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 2.4rem;
|
|
line-height: 1.2;
|
|
color: #a794d8;
|
|
text-shadow: 0 0 10px rgba(155, 134, 211, 0.15);
|
|
border-bottom: 1px solid rgba(155, 134, 211, 0.2);
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
color: #9b86d3;
|
|
text-shadow: 0 0 15px rgba(155, 134, 211, 0.2);
|
|
border-bottom: 1px solid rgba(155, 134, 211, 0.2);
|
|
padding-bottom: 0.5rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tufte h3 {
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-size: 1.8rem;
|
|
margin-top: 2.2rem;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.2;
|
|
color: #9b86d3;
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
}
|
|
color: #8265c4;
|
|
text-shadow: 0 0 10px rgba(130, 101, 196, 0.2);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tufte h3::before {
|
|
content: "§";
|
|
font-style: normal;
|
|
opacity: 0.5;
|
|
margin-right: 0.5rem;
|
|
font-size: 1.2rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
.tufte p {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-size: 1.4rem;
|
|
line-height: 2.1rem;
|
|
margin-top: 1.6rem;
|
|
margin-bottom: 1.6rem;
|
|
padding-right: 0;
|
|
vertical-align: baseline;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #e0e0e0;
|
|
text-shadow: 0 0 1px rgba(224, 224, 224, 0.1);
|
|
letter-spacing: 0.015em;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Add elegant styling to first paragraph */
|
|
.tufte p:first-of-type {
|
|
font-size: 1.5rem;
|
|
line-height: 2.2rem;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Links with Kenneth's branding */
|
|
.tufte a:link, .tufte a:visited {
|
|
color: #9b86d3;
|
|
text-decoration: none;
|
|
background: linear-gradient(#151515, #151515), linear-gradient(#151515, #151515), linear-gradient(#9b86d3, #9b86d3);
|
|
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
|
|
background-repeat: no-repeat, no-repeat, repeat-x;
|
|
text-shadow: 0.03em 0 #151515, -0.03em 0 #151515, 0 0.03em #151515, 0 -0.03em #151515, 0.06em 0 #151515, -0.06em 0 #151515, 0.09em 0 #151515, -0.09em 0 #151515, 0.12em 0 #151515, -0.12em 0 #151515, 0.15em 0 #151515, -0.15em 0 #151515;
|
|
background-position: 0% 93%, 100% 93%, 0% 93%;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tufte a:hover {
|
|
color: #b5a7e0;
|
|
background: linear-gradient(#151515, #151515), linear-gradient(#151515, #151515), linear-gradient(#b5a7e0, #b5a7e0);
|
|
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
|
|
background-repeat: no-repeat, no-repeat, repeat-x;
|
|
background-position: 0% 93%, 100% 93%, 0% 93%;
|
|
text-shadow: 0 0 8px rgba(181, 167, 224, 0.4), 0.03em 0 #151515, -0.03em 0 #151515, 0 0.03em #151515, 0 -0.03em #151515, 0.06em 0 #151515, -0.06em 0 #151515, 0.09em 0 #151515, -0.09em 0 #151515, 0.12em 0 #151515, -0.12em 0 #151515, 0.15em 0 #151515, -0.15em 0 #151515;
|
|
}
|
|
|
|
/* Override header links to match site style */
|
|
header a:link, header a:visited,
|
|
footer a:link, footer a:visited,
|
|
nav a:link, nav a:visited {
|
|
background: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Force serif for all main content */
|
|
.tufte-content {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
/* Override site header to keep sans-serif */
|
|
header, footer, nav {
|
|
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
/* Sidenotes and margin notes styling with Kenneth's color scheme */
|
|
.tufte .sidenote, .tufte .marginnote {
|
|
float: right;
|
|
clear: right;
|
|
margin-right: -60%;
|
|
width: 50%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.3;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
color: #9b86d3;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-style: italic;
|
|
text-shadow: 0 0 8px rgba(155, 134, 211, 0.2);
|
|
border-left: 1px solid rgba(155, 134, 211, 0.3);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.tufte .sidenote-number {
|
|
color: #b5a7e0;
|
|
text-shadow: 0 0 5px rgba(181, 167, 224, 0.5);
|
|
}
|
|
|
|
.tufte .sidenote:before {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.tufte .sidenote-number {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
|
|
font-size: 1rem;
|
|
color: #4e3979;
|
|
top: -0.5rem;
|
|
}
|
|
|
|
/* Blockquotes with Kenneth's branding */
|
|
.tufte blockquote {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-size: 1.4rem;
|
|
margin: 2rem 0;
|
|
padding: 1.5rem 2rem;
|
|
border-left: 3px solid #6f52b0;
|
|
font-style: italic;
|
|
line-height: 1.75;
|
|
background: rgba(111, 82, 176, 0.1);
|
|
border-radius: 0 8px 8px 0;
|
|
color: #d0c8ec;
|
|
position: relative;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.tufte blockquote::before {
|
|
content: """;
|
|
font-family: 'Crimson Text', Georgia, serif;
|
|
font-size: 4rem;
|
|
position: absolute;
|
|
left: -0.5rem;
|
|
top: -1rem;
|
|
color: rgba(155, 134, 211, 0.3);
|
|
line-height: 1;
|
|
}
|
|
|
|
.tufte blockquote footer {
|
|
font-size: 1.1rem;
|
|
text-align: right;
|
|
margin-top: 1rem;
|
|
color: #9b86d3;
|
|
font-style: normal;
|
|
border-top: 1px solid rgba(155, 134, 211, 0.2);
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
/* Figure and caption styling */
|
|
.tufte figure {
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
max-width: 85%;
|
|
-webkit-margin-start: 0;
|
|
-webkit-margin-end: 0;
|
|
margin: 0 0 3em 0;
|
|
}
|
|
|
|
.tufte figcaption {
|
|
float: right;
|
|
clear: right;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
max-width: 40%;
|
|
color: #5c4394;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Code styling with Kenneth's branding */
|
|
.tufte code {
|
|
font-family: 'JetBrains Mono', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
background-color: #2d2440;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
color: #b5a7e0;
|
|
border: 1px solid #3a2b5c;
|
|
text-shadow: 0 0 5px rgba(181, 167, 224, 0.3);
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Preserve monospace for code but use serif everywhere else */
|
|
.tufte :not(pre):not(code) {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
.tufte pre {
|
|
padding: 1.5rem;
|
|
margin: 2.5rem 0;
|
|
background-color: rgba(45, 36, 64, 0.7);
|
|
border: 1px solid rgba(155, 134, 211, 0.3);
|
|
border-radius: 0.5rem;
|
|
overflow-x: auto;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.tufte pre::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #6f52b0, #9b86d3);
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
|
|
.tufte pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: #d0c8ec;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
text-shadow: 0 0 2px rgba(208, 200, 236, 0.2);
|
|
}
|
|
|
|
/* Tables */
|
|
.tufte table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin: 2rem 0;
|
|
font-size: 1.1rem;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tufte th {
|
|
padding: 1rem 1.2rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
border-bottom: 2px solid #6f52b0;
|
|
color: #b5a7e0;
|
|
background-color: #2d2440;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-size: 0.9rem;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
.tufte td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid #3a2b5c;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.tufte tr:nth-child(even) {
|
|
background-color: rgba(58, 43, 92, 0.2);
|
|
}
|
|
|
|
.tufte tr:hover {
|
|
background-color: rgba(111, 82, 176, 0.1);
|
|
}
|
|
|
|
/* Full width elements */
|
|
.tufte .fullwidth {
|
|
max-width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
/* New article section to adjust width */
|
|
.tufte article {
|
|
position: relative;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.tufte section {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* List styling */
|
|
.tufte ul, .tufte ol {
|
|
width: 75%;
|
|
-webkit-padding-start: 5%;
|
|
-webkit-padding-end: 5%;
|
|
padding-inline-start: 5%;
|
|
padding-inline-end: 5%;
|
|
margin: 0 0 0.5rem 0;
|
|
list-style-position: outside;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tufte ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.tufte ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.tufte ul ul {
|
|
list-style-type: circle;
|
|
margin-left: 2%;
|
|
width: 98%;
|
|
}
|
|
|
|
.tufte ol ol, .tufte ul ol {
|
|
list-style-type: lower-alpha;
|
|
margin-left: 2%;
|
|
width: 98%;
|
|
}
|
|
|
|
.tufte ul ol ul, .tufte ul ul ul, .tufte ol ul ul, .tufte ol ol ul {
|
|
list-style-type: square;
|
|
margin-left: 2%;
|
|
width: 98%;
|
|
}
|
|
|
|
.tufte li {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-size: 1.4rem;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 2rem;
|
|
display: list-item;
|
|
}
|
|
|
|
/* Content specific list styling */
|
|
.content-section ul, .content-section ol {
|
|
width: 90%;
|
|
padding-left: 2.5rem;
|
|
margin: 1.5rem 0;
|
|
list-style-position: outside;
|
|
}
|
|
|
|
.content-section ul {
|
|
list-style-type: disc !important;
|
|
}
|
|
|
|
.content-section ol {
|
|
list-style-type: decimal !important;
|
|
}
|
|
|
|
.content-section li {
|
|
display: list-item !important;
|
|
margin-bottom: 0.7rem;
|
|
font-size: 1.4rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
.content-section ul ul,
|
|
.content-section ol ul {
|
|
list-style-type: circle !important;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
}
|
|
|
|
.content-section ul ol,
|
|
.content-section ol ol {
|
|
list-style-type: lower-alpha !important;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
}
|
|
|
|
/* Epigraph styling */
|
|
.tufte .epigraph {
|
|
margin: 3em 0;
|
|
}
|
|
|
|
.tufte .epigraph blockquote {
|
|
font-style: italic;
|
|
margin-left: 2.5em;
|
|
margin-right: 2.5em;
|
|
}
|
|
|
|
.tufte .epigraph footer {
|
|
font-style: normal;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Pull quotes */
|
|
.tufte .pullquote {
|
|
width: 45%;
|
|
float: right;
|
|
margin: 1em 0 1em 1em;
|
|
padding: 0.5em 1em;
|
|
border-left: 3px solid #9b86d3;
|
|
font-size: 1.5rem;
|
|
font-style: italic;
|
|
color: #4e3979;
|
|
}
|
|
|
|
/* Directory content positioning styles */
|
|
.directory-content-top {
|
|
margin-bottom: 3rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid #e3e0f4;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
.directory-content-bottom {
|
|
margin-top: 4rem;
|
|
padding-top: 3rem;
|
|
border-top: 1px solid #e3e0f4;
|
|
background-color: #faf9fd;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.directory-content-title {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-size: 2rem;
|
|
color: #4e3979;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 400;
|
|
border-bottom: 1px solid #d0c8ec;
|
|
padding-bottom: 0.5rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.directory-content-top h1,
|
|
.directory-content-bottom h1 {
|
|
font-size: 2.2rem;
|
|
color: #4e3979;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.directory-content-top h2,
|
|
.directory-content-bottom h2 {
|
|
font-size: 1.8rem;
|
|
color: #6f52b0;
|
|
margin: 1.5rem 0 1rem;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.directory-content-top h3,
|
|
.directory-content-bottom h3 {
|
|
font-size: 1.5rem;
|
|
color: #8265c4;
|
|
margin: 1.2rem 0 0.8rem;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.directory-content-top p,
|
|
.directory-content-bottom p {
|
|
font-size: 1.4rem;
|
|
line-height: 2rem;
|
|
margin: 1rem 0;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
.directory-content-top ul,
|
|
.directory-content-bottom ul {
|
|
list-style-type: disc;
|
|
padding-left: 2.5rem;
|
|
margin: 1.5rem 0;
|
|
width: 90%;
|
|
}
|
|
|
|
.directory-content-top ol,
|
|
.directory-content-bottom ol {
|
|
list-style-type: decimal;
|
|
padding-left: 2.5rem;
|
|
margin: 1.5rem 0;
|
|
width: 90%;
|
|
}
|
|
|
|
.directory-content-top li,
|
|
.directory-content-bottom li {
|
|
font-size: 1.4rem;
|
|
line-height: 1.8rem;
|
|
margin-bottom: 0.7rem;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
.directory-content-top ul ul,
|
|
.directory-content-top ol ul,
|
|
.directory-content-bottom ul ul,
|
|
.directory-content-bottom ol ul {
|
|
list-style-type: circle;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
}
|
|
|
|
.directory-content-top ul ol,
|
|
.directory-content-top ol ol,
|
|
.directory-content-bottom ul ol,
|
|
.directory-content-bottom ol ol {
|
|
list-style-type: lower-alpha;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
}
|
|
|
|
/* =====================================================
|
|
RESPONSIVE ADJUSTMENTS
|
|
===================================================== */
|
|
|
|
@media (max-width: 1200px) {
|
|
.tufte .sidenote, .tufte .marginnote {
|
|
margin-right: -45%;
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.tufte section > p, .tufte section > ul, .tufte section > ol {
|
|
width: 85%;
|
|
}
|
|
|
|
.tufte ul, .tufte ol {
|
|
width: 85%;
|
|
}
|
|
|
|
.tufte .sidenote, .tufte .marginnote {
|
|
margin-right: -55%;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.tufte section > p, .tufte section > ul, .tufte section > ol {
|
|
width: 100%;
|
|
padding-inline-start: 1rem;
|
|
padding-inline-end: 1rem;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.tufte-content {
|
|
width: 100%;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.tufte .sidenote, .tufte .marginnote {
|
|
display: none;
|
|
}
|
|
|
|
.tufte .margin-toggle:checked + .sidenote,
|
|
.tufte .margin-toggle:checked + .marginnote {
|
|
display: block;
|
|
float: left;
|
|
left: 1rem;
|
|
clear: both;
|
|
width: 95%;
|
|
margin: 1rem 2.5%;
|
|
vertical-align: baseline;
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tufte label.margin-toggle:not(.sidenote-number) {
|
|
display: inline;
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.tufte label {
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.tufte .margin-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.tufte .sn-left, .tufte .mn-left {
|
|
float: left;
|
|
clear: left;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.tufte .table-caption {
|
|
display: block;
|
|
float: none;
|
|
clear: both;
|
|
width: 100%;
|
|
margin: 1rem 0;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tufte table {
|
|
width: 100%;
|
|
font-size: 0.85rem;
|
|
overflow-x: auto;
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tufte h1 {
|
|
font-size: 1.8rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tufte h2 {
|
|
font-size: 1.5rem;
|
|
line-height: 1.3;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.tufte h3 {
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tufte blockquote {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
font-size: 0.95rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.tufte pre {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
padding: 0.75rem;
|
|
margin: 1rem 0;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tufte {
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tufte section > p, .tufte section > ul, .tufte section > ol {
|
|
padding-inline-start: 0.75rem;
|
|
padding-inline-end: 0.75rem;
|
|
}
|
|
|
|
.tufte-content {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
.tufte h1 {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.tufte h2 {
|
|
font-size: 1.25rem;
|
|
line-height: 1.3;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tufte h3 {
|
|
font-size: 1.1rem;
|
|
line-height: 1.4;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.tufte p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tufte ul, .tufte ol {
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.tufte li {
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tufte blockquote {
|
|
margin: 0.75rem 0;
|
|
padding: 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tufte pre {
|
|
font-size: 0.75rem;
|
|
padding: 0.5rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.tufte table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.content-section {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.tufte * {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
filter: none !important;
|
|
-ms-filter: none !important;
|
|
}
|
|
|
|
.tufte .sidenote, .tufte .marginnote {
|
|
display: block;
|
|
float: right;
|
|
clear: right;
|
|
margin-right: 0;
|
|
width: 35%;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tufte body {
|
|
width: 100%;
|
|
}
|
|
|
|
.tufte .margin-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.tufte.dark-mode {
|
|
background-color: #1a1625;
|
|
color: #e6e6e6;
|
|
}
|
|
|
|
.tufte.dark-mode h1,
|
|
.tufte.dark-mode h2,
|
|
.tufte.dark-mode h3 {
|
|
color: #b5a7e0;
|
|
}
|
|
|
|
.tufte.dark-mode a:link,
|
|
.tufte.dark-mode a:visited {
|
|
color: #b5a7e0;
|
|
background: linear-gradient(#1a1625, #1a1625), linear-gradient(#1a1625, #1a1625), linear-gradient(#b5a7e0, #b5a7e0);
|
|
text-shadow: 0.03em 0 #1a1625, -0.03em 0 #1a1625, 0 0.03em #1a1625, 0 -0.03em #1a1625, 0.06em 0 #1a1625, -0.06em 0 #1a1625, 0.09em 0 #1a1625, -0.09em 0 #1a1625, 0.12em 0 #1a1625, -0.12em 0 #1a1625, 0.15em 0 #1a1625, -0.15em 0 #1a1625;
|
|
}
|
|
|
|
.tufte.dark-mode pre {
|
|
background-color: #2d2440;
|
|
border: 1px solid #4e3979;
|
|
}
|
|
|
|
.tufte.dark-mode code {
|
|
background-color: #2d2440;
|
|
color: #d0c8ec;
|
|
}
|
|
|
|
.tufte.dark-mode blockquote {
|
|
border-left: 3px solid #6f52b0;
|
|
}
|
|
|
|
.tufte.dark-mode tr:nth-child(even) {
|
|
background-color: #2d2440;
|
|
}
|
|
|
|
.tufte.dark-mode td {
|
|
border-bottom: 1px solid #4e3979;
|
|
}
|
|
}
|
|
|
|
/* =====================================================
|
|
CUSTOM CLASSES
|
|
===================================================== */
|
|
|
|
/* Content header styles */
|
|
.content-header {
|
|
color: #5c4394 !important;
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !important;
|
|
margin-top: 3rem !important;
|
|
margin-bottom: 1.5rem !important;
|
|
padding-bottom: 0.3rem !important;
|
|
line-height: 1.2 !important;
|
|
}
|
|
|
|
h1.content-header {
|
|
font-size: 2.4rem !important;
|
|
font-weight: 400 !important;
|
|
margin-top: 3rem !important;
|
|
border-bottom: 1px solid #e3e0f4 !important;
|
|
}
|
|
|
|
h2.content-header {
|
|
font-size: 1.8rem !important;
|
|
font-style: italic !important;
|
|
font-weight: 400 !important;
|
|
margin-top: 2.5rem !important;
|
|
color: #6f52b0 !important;
|
|
}
|
|
|
|
h3.content-header {
|
|
font-size: 1.5rem !important;
|
|
font-style: italic !important;
|
|
font-weight: 400 !important;
|
|
margin-top: 2rem !important;
|
|
color: #8265c4 !important;
|
|
}
|
|
|
|
h4.content-header, h5.content-header, h6.content-header {
|
|
font-size: 1.3rem !important;
|
|
font-weight: 400 !important;
|
|
margin-top: 1.8rem !important;
|
|
color: #9b86d3 !important;
|
|
}
|
|
|
|
.content-section {
|
|
margin-top: 3rem;
|
|
position: relative;
|
|
}
|
|
|
|
.content-section p {
|
|
font-family: et-book, 'Crimson Text', Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
font-size: 1.4rem;
|
|
line-height: 2rem;
|
|
margin-top: 1.4rem;
|
|
margin-bottom: 1.4rem;
|
|
width: 75%;
|
|
}
|
|
|
|
.content-section h1:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.page-title {
|
|
font-family: 'Inter', system-ui, sans-serif !important;
|
|
font-weight: 700 !important;
|
|
color: #b5a7e0 !important;
|
|
font-size: 3.6rem !important;
|
|
line-height: 1.1 !important;
|
|
letter-spacing: -0.03em !important;
|
|
margin-bottom: 1.8rem !important;
|
|
position: relative !important;
|
|
text-shadow: 0 0 20px rgba(181, 167, 224, 0.2) !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.page-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 4rem;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #8265c4, rgba(130, 101, 196, 0));
|
|
}
|
|
|
|
/* Mindmap specific styles */
|
|
#mindmap-svg {
|
|
cursor: grab;
|
|
background-color: #fafafa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#mindmap-svg:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.node-circle {
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.node-directory {
|
|
fill: #4e3979;
|
|
stroke: #3a2b5c;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.node-markdown {
|
|
fill: #2563eb;
|
|
stroke: #3a2b5c;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.node-text {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-size: 12px;
|
|
fill: #1f2937;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.link {
|
|
fill: none;
|
|
stroke: #d1d5db;
|
|
stroke-width: 2;
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
.node-circle:hover {
|
|
stroke-width: 3;
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.mindmap-tooltip {
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
color: white;
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 1000;
|
|
max-width: 250px;
|
|
word-wrap: break-word;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* For content that should have full width (images, tables, etc.) */
|
|
.tufte .full-width {
|
|
width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
/* For highlighting important notes */
|
|
.tufte .note {
|
|
background-color: #f0eef9;
|
|
border-left: 4px solid #8265c4;
|
|
padding: 1rem 1.5rem;
|
|
margin: 2rem 0;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.tufte .note:before {
|
|
content: "Note";
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #4e3979;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* For highlighting important information */
|
|
.tufte .important {
|
|
background-color: #f9eef0;
|
|
border-left: 4px solid #c46579;
|
|
padding: 1rem 1.5rem;
|
|
margin: 2rem 0;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.tufte .important:before {
|
|
content: "Important";
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #c46579;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* For tips and tricks */
|
|
.tufte .tip {
|
|
background-color: #eef9f0;
|
|
border-left: 4px solid #65c479;
|
|
padding: 1rem 1.5rem;
|
|
margin: 2rem 0;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.tufte .tip:before {
|
|
content: "Tip";
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #65c479;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Citation styling */
|
|
.tufte .citation {
|
|
font-size: 1.1rem;
|
|
color: #6f52b0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Button styling */
|
|
.tufte .button {
|
|
display: inline-block;
|
|
background-color: #4e3979;
|
|
color: white !important;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s;
|
|
margin: 1rem 0;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
text-shadow: none !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
.tufte .button:hover {
|
|
background-color: #6f52b0;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.tufte .center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tufte .left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tufte .right {
|
|
text-align: right;
|
|
}
|