hugo-tufte/assets/scss/tufte.scss

/* You can find the original at https://github.com/edwardtufte/tufte-css */

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */

@charset "UTF-8";

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"),
        url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"),
        url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"),
        url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
    src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix")
            format("embedded-opentype"),
        url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff")
            format("woff"),
        url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf")
            format("truetype"),
        url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf")
            format("svg");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
    src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"),
        url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"),
        url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"),
        url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "et-book-roman-old-style";
    src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
    src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix")
            format("embedded-opentype"),
        url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"),
        url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"),
        url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg");
    font-weight: normal;
    font-style: normal;
}

$serif-fonts: et-book, "Noto Serif SC", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif, "Noto Emoji";
$sans-fonts: "Gill Sans", "Gill Sans MT", Calibri, sans-serif, "Noto Emoji";
$mono-fonts: Consolas, "Liberation Mono", Menlo, Courier, monospace, "Noto Emoji";

/* Tufte CSS styles */
html {
    font-size: 0.65rem;
}

body {
    margin-top: 2.5vh;
    margin-left: 2.5vw;
    margin-right: auto;
    padding-left: 0;
    font-family: $mono-fonts;
    background-color: #151515;
    color: #ddd;
    max-width: #{"min(80vw, 1200px)"};
}

h1, h2, h3 {
    font-weight: 400;
    line-height: 1;
}

h1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 2.4rem;
}

h2, h3 {
    font-style: italic;
    margin-bottom: 0;
}

h2 {
    margin-top: 1.2rem;
    font-size: 2.2rem;
}

h3 {
    font-size: 2rem;
    margin-top: 2rem;
}

.author, .date {
  font-size: 1.4rem;
  font-weight: 400;
  margin: 1rem auto 1rem 0;
  line-height: 1;
}

.subtitle {
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    display: block;
    line-height: 1;
}

.numeral {
    font-family: et-book-roman-old-style;
}

.danger {
    color: red;
}

article {
    position: relative;
    padding: 0rem 0rem;
}

section {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.page-list .content-title {
    margin-top: 4.2rem;
    margin-bottom: 1.4rem;
}

.page-list .content-title:first-child {
    margin-top: 1.4rem;
}

p,
ol,
ul,
dl {
    font-size: 1.4rem;
}

p {
    line-height: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-right: 0;
    vertical-align: baseline;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 4;
    -ms-hyphenate-limit-chars: 10 3 4;
    hyphenate-limit-chars: 10 3 4;
}

/* Chapter Epigraphs */
.epigraph {
    margin: 3em 0;
}

.epigraph > blockquote {
    margin-top: 3em;
    margin-bottom: 3em;
}

.epigraph > blockquote {
    font-style: italic;
}

.epigraph > blockquote > footer {
    font-style: normal;
}

.epigraph > blockquote > footer > cite {
    font-style: italic;
}

/* end chapter epigraphs styles */

blockquote {
    font-size: 1.4rem;
}

blockquote p {
    width: 50%;
}

blockquote footer {
    width: 50%;
    font-size: 1.1rem;
    text-align: right !important;
}

ol,
ul,
dl {
    width: 45%;
    -webkit-padding-start: 5%;
    -webkit-padding-end: 5%;
}

li  ul {
    width: 100%;
}

li,
dt, dd {
    padding: 0.5rem 0;
}

dt {
    font-weight: 700;
}

figure {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    max-width: 55%;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0 0 3em 0;
}

figcaption {
    float: right;
    clear: right;
    margin-right: -48%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    vertical-align: baseline;
    position: relative;
    max-width: 40%;
}

figure.fullwidth figcaption {
    margin-right: 24%;
}

/* Links: replicate underline that clears descenders */
a:link,
a:visited {
    color: inherit;
}

/* Sidenotes, margin notes, figures, captions */
img {
    max-width: 100%;
}


:root {
    --sidenote-offset: calc(100% - 42.5%);
}

// .sidenote {
//     float: right;
//     clear: both;
//     left: 57.5%; // var(--sidenote-offset);
//     right: 2.5%;
//     border-style: solid;
//     border-width: 2px;
//     border-color: #333333;
//     width: auto;
//     margin-top: 10px;
//     margin-bottom: 10px;
//     padding: 8px;
//     paddinr-right: 0px;
//     font-size: 1.1rem;
//     line-height: 1.3;
//     position: absolute;
// }

.sidenote {
    float: right;
    clear: both;
    position: relative;

    width: 80%;
    margin-right: -90%;

    border-style: solid;
    border-width: 2px;
    border-color: #333333;

    padding: 8px;
    padding-bottom: 4px;
    padding-top: 4px;

    font-size: 1.1rem;
    line-height: 1.3;
}

// there's a difference in how sidenotes are rendered from a list vs a paragraph
// this is an eyeball approximation, it's close enough for me so leaving like this
li .sidenote {
    width: 98%;
    margin-right: -121.8%;
}

.marginnote {
    box-sizing: border-box;
    float: right;
    width: auto;
    position: absolute;

    left: 57.5%;
    right: 2.5%;

    border-style: solid;
    border-width: 2px;
    border-color: #333333;

    padding: 8px;
    padding-bottom: 0;
    padding-top: 0;

    margin-top: 10px;
    margin-bottom: 10px;

}

.marginnote p {
    width: 100%;
    font-size: 1rem;
    line-height: 1.3;
}

.table-caption {
    float: right;
    clear: right;
    margin-right: -60%;
    width: 50%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.marginnote-ind,
.sidenote-number {
    // font-family: et-book-roman-old-style, "Noto Emoji";
    position: relative;
    vertical-align: baseline;
    user-select: none;
}

// note indicator
label.sidenote-number {
    font-size: 1rem;
    top: -0.5rem;
    left: 0.1rem;
}

label.marginnote-ind {
    font-size: 5em;
    line-height: 1.125;
    float: right;
    text-align: center;
    width: 1.1em;
    height: 1.1em;
    margin-left: 10px;
    margin-right: 20px;
    border-color: #ddd;
    border-style: solid;
    border-width: 3px;
    border-radius: 5px;
}

// inside sidenote
span.marginnote-ind,
span.sidenote-number {
    font-size: 1.1rem;
}

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper {
//    width: #{"min(55%, 770px)"};
    width: 50%;
    align: center;
}

div.fullwidth,
table.fullwidth {
    width: 100%;
}

div.table-wrapper {
    overflow-x: scroll;
    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif, "Noto Emoji";
}

 @media screen and (max-width: 760px) {
    h2,
    h3,
    p,
    footer {
        width: 90%;
    }
    ul,
    ol,
    dl {
        width: 85%;
    }
    figure {
        max-width: 90%;
    }
    figcaption,
    figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none;
    }
    blockquote p,
    blockquote footer {
        width: 90%;
    }
}

.sans {
    font-family: $sans-fonts;
    letter-spacing: 0.03em;
}

code,
.code,
kbd {
    font-family: $mono-fonts;
    font-size: 1.3rem;
    line-height: 1.42;
}

h1 .code,
h2 .code,
h3 .code {
    font-size: 0.8em;
}

.marginnote .code,
.sidenote .code {
    font-size: 0.9rem;
}

pre.code {
    font-size: 0.9rem;
    width: 52.5%;
    padding-left: 2.5%;
    width: 90%;
    overflow-x: scroll;
}




.fullwidth {
    max-width: 90%;
    clear: both;
}

.newthought {
    font-variant: small-caps;
    font-size: 1.2em;
}

.margin-toggle {
    cursor: pointer;
}

// accessibility feature: make label focus-able
input.margin-toggle {
    position: absolute;
    outline: none;
    opacity: 0;
    width: 1px;
    height: 1px;
    // margin-left: 5px;
    // margin-top: 5px;
    z-index: -100;
}

label:has(+ input.margin-toggle:focus) {
  outline: medium auto currentColor;
  outline: medium auto invert;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -3px;
}

label.sidenote-number {
    display: inline;
}

label.marginnote-ind {
    display: none;
}

.video-container {
    width: 100%;
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
}

.video {
    width: 55%;
}

.video--16x9 {
    aspect-ratio: 16/9;
}

.video--4x3 {
    aspect-ratio: 4/3;
}

@media (max-width: 760px) {
    label.marginnote-ind {
        display: inline;
    }
    .sidenote,
    .marginnote {
        display: none;
    }
    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
    }
    .table-caption {
        display: block;
        float: right;
        clear: both;
        width: 98%;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        margin-left: 1%;
        margin-right: 1%;
        vertical-align: baseline;
        position: relative;
    }
    div.table-wrapper,
    table,
    table.booktabs {
        width: 85%;
    }
    div.table-wrapper {
        border-right: 1px solid #efefef;
    }
    img {
        width: 100%;
    }
    .video {
        width: 90%;
    }
}