CS224W Course Notes
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

585 lines
14 KiB

---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
nav_exclude: true
---
/*****************************************************************************/
/* Tufte Jekyll blog theme
/* - source: https://github.com/clayh53/tufte-jekyll
/* - based on Tufte CSS by Dave Liepmann ( https://github.com/edwardtufte/tufte-css )
/*****************************************************************************/
// Imports to create final
@import "../_sass/fonts";
@import "../_sass/settings";
@import "../_sass/syntax-highlighting";
/* Changes from original tufte.css
- use border-box instead of content-box for box-sizing
- change font size as browser width expands or contracts
- add MathJax styling
- removes underline from <a> links and sets their color to $constrast-color, except for links that are inside <p>
- uses marginnote for maincolumn figure caption
*/
// global resets
*, *:before, *:after {
margin: 0;
box-sizing: border-box;
}
html, body { height: 100%; }
/* clearfix hack after Cederholm (group class name) */
.group:after {
content: "";
display: table;
clear: both;
}
// MathJax styling
.mathblock, .MJXc-display {
font-size: 1.5rem !important;
clear: left;
}
// variable font size
html {
font-size: 11px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (min-width: 800px){ html{ font-size: 12px; } }
@media screen and (min-width: 900px){ html{ font-size: 13px; } }
@media screen and (min-width: 1000px){ html{ font-size: 14px; } }
@media screen and (min-width: 1100px){ html{ font-size: 15px; } }
body {
width: 100%;
padding-left: 12.5%;
max-width: calc(12.5% + 1400px); // max-width of content box = 1400px
margin: 0 auto;
font-family: $body-font;
background-color: $bg-color;
color: $text-color;
counter-reset: sidenote-counter;
}
// changed
h1 {
font-weight: 400;
margin-top: 1.568rem;
margin-bottom: 1.568rem;
font-size: 2.5rem;
line-height: 0.784;
}
h2 {
font-style: italic;
font-weight: 400;
margin-top: 4rem; /* 2.1rem */
margin-bottom: 1.4rem;
font-size: 2.2rem;
line-height: 1;
}
h3 {
font-style: italic;
font-weight: 400;
font-size: 1.7rem;
margin-top: 2rem;
margin-bottom: 1.4rem;
line-height: 1;
}
p.subtitle {
font-style: italic;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.8rem;
display: block;
line-height: 1;
}
article {
width: 55%;
padding: 5rem 0;
}
/* ==============================
* Main Body Text
* ============================== */
p, ol, ul {
font-size: 1.4rem;
line-height: 2rem;
margin: 1.4rem 0;
}
p {
padding-right: 0;
vertical-align: baseline;
}
li { margin-bottom: 0.5em; }
blockquote p, pre { padding-right: 0 10%; }
blockquote * { font-size: 1.1rem; }
blockquote p { line-height: 1.75rem; }
blockquote footer { text-align: right; }
/* ==============================
* Figures and Margins
* ============================== */
// the caption of a figure.maincolumn is never hidden
figure.maincolumn { margin-bottom: 3em; }
figure.maincolumn > figcaption { display: block !important; }
figure.fullwidth figcaption {
float: left;
margin-right: 0%;
margin-left: 36%;
}
img { max-width: 100%; }
.sidenote, .marginnote {
// goal: width = 50% of <p> (= 27.5% of 87.5% <body>)
// - vw for constant width regardless of container
// - 336.875px = 24.0625% of 1400px (max-width of <body>)
width: 24.0625vw;
max-width: 336.875px;
// goal: 5.5vw of spacing between main column and sidebar
// - assuming container has width of <article>, then
// 10% (spacing) + 50% (width) = 60%
margin-right: -60%;
float: right;
clear: right;
font-size: 1rem;
margin-top: 0;
margin-bottom: 1.4rem;
line-height: 1.4;
vertical-align: baseline;
position: relative;
}
.sidenote-number { counter-increment: sidenote-counter; }
.sidenote-number:after, .sidenote:before {
font-family: et-book-roman-old-style;
color: $contrast-color; // added
position: relative;
vertical-align: baseline;
}
.sidenote-number:after {
content: counter(sidenote-counter);
font-size: 1rem;
top: -0.5rem; // use top instead of vertical-align to avoid affecting line-height
left: 0.1rem;
}
.sidenote:before {
// unicode for a non-breaking space
content: counter(sidenote-counter) ".\000a0";
}
// account for indentation of list items and blockquotes
blockquote .sidenote, blockquote .marginnote {
margin-right: -82.35%; // =70%/85%
}
li .sidenote, li .marginnote {
margin-right: -63.29%; // not quite right yet
}
// margin toggle
// - hide if screen is wide enough
input.margin-toggle,
label.margin-toggle:not(.sidenote-number) {
display: none;
}
/* ==============================
* Links
* ============================== */
// new link behavior
a {
color: $contrast-color;
text-decoration: none;
}
/* Links: replicate underline that clears descenders */
p > a:link, p > a:visited { color: inherit; }
p > a:link {
background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
-webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
background-repeat: no-repeat, no-repeat, repeat-x;
text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
background-position: 0% 93%, 100% 93%, 0% 93%;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
p > a:link {
background-position-y: 87%, 87%, 87%;
}
}
p > a:link::selection,
p > a:link::-moz-selection {
text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
background: #b4d5fe;
}
/* ==============================
* Code
* ============================== */
// Markdown code blocks (```, ~~~, or indented blocks) are always <pre><code></code></pre>
// Markdown code spans (`, ``) are always <p><code></code></p>
pre, code {
font-family: $code-font;
font-size: 1rem;
line-height: 1.42;
margin-top: 1.42rem;
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */ }
pre { overflow-x: auto; }
/* ==============================
* Miscellaneous
* ============================== */
.sans {
font-family: $sans-font;
letter-spacing: .03em;
}
.fullwidth { max-width: 90%; }
.full-width {
.sidenote, .sidenote-number, .marginnote {
display: none;
}
}
span.newthought {
font-variant: small-caps;
font-size: 1.2em;
letter-spacing: 0.05rem;
} // added
// helper classes
.contrast { color: $contrast-color; }
.smaller { font-size: 80%; }
hr.slender {
border: 0;
height: 1px;
margin-top: 1.4rem;
margin-bottom:1.4rem;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
/* ==============================
* Tables
* ============================== */
// Use booktabs style as default for all tables, including Markdown tables
table, table.booktabs {
width: auto;
margin: 0 auto;
border-spacing: 0px;
border-top: 2px solid $border-color;
border-bottom: 2px solid $border-color;
}
th, .booktabs th {
border-bottom: 1px solid $border-color;
padding: 0.65ex 0.5em 0.4ex 0.5em;
font-weight: normal;
text-align: center;
}
th, td {
font-size: 1.2rem;
line-height: 1.71428571;
}
th, .booktabs th.cmid {
border-bottom: 1px solid lighten($border-color, 25%);
}
.booktabs th.nocmid {
border-bottom: none;
}
// add space between thead row and tbody
tr:first-child td, .booktabs tbody tr:first-child td {
padding-top: 0.65ex;
}
td, .booktabs td {
padding-left: 0.5em;
padding-right: 0.5em;
text-align: left;
}
caption, .booktabs caption {
font-size: 90%;
text-align: left;
width: auto;
margin-left: auto;
margin-right: auto;
margin-top: 1ex;
caption-side: top;
}
.booktabs tbody tr td.l { text-align: left !important; }
.booktabs tbody tr td.c { text-align: center !important; }
.booktabs tbody tr td.r { text-align: right !important; }
.table-caption {
float: right;
clear: right;
margin-right: -60%;
width: 50%;
margin-top: 0;
margin-bottom: 0;
font-size: 1.0rem;
line-height: 1.96;
}
/* ==============================
* Small Screens
* ============================== */
@media (max-width: 760px) {
article {
width: 90%;
}
figure {
max-width: 90%;
}
figcaption, figure.fullwidth figcaption {
margin-right: 0%;
max-width: none;
}
blockquote p, blockquote footer {
padding-right: 10%;
}
label.margin-toggle:not(.sidenote-number) {
display: inline;
color: $contrast-color;
}
blockquote .sidenote,
blockquote .marginnote,
li .sidenote,
li .marginnote,
.sidenote,
.marginnote {
// treat as-if inline
width: 100%;
max-width: 100%;
display: none;
float: left;
padding: 0 5%;
margin: 1rem 0;
vertical-align: baseline;
}
.margin-toggle:checked + .sidenote,
.margin-toggle:checked + .marginnote {
display: block;
}
label {
cursor: pointer;
}
.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%;
}
}
/* ==============================
* Nav and Footer Styling
* ============================== */
header > nav.group, body footer {
width: 95%;
padding-top: 2rem;
}
// escaped unicode for the carats and then a space on active menu links
nav.group a.active:before{
content:"\0003c\000a0";
}
nav.group a.active:after{
content:"\000a0\0003e";
}
header > nav a {
font-size: 1.2rem;
font-family: $sans-font;
letter-spacing: 0.15em;
text-transform: uppercase;
color: $contrast-color;
padding-top: 1.5rem;
display: inline-block;
float: left;
margin-top: 0;
margin-bottom: 0;
padding-right: 2rem;
vertical-align: baseline;
}
ul.footer-links, .credits {
list-style: none;
text-align: center;
margin: 0 auto;
}
ul.footer-links li {
display: inline;
padding: 0.5rem 0.25rem;
}
.credits {
padding: 1rem 0rem;
}
// change font color for credit links in footer
.credits{
font-family: $sans-font;
& a {
color: $contrast-color;
}
}
/* ==============================
* Full-width page styling
* ============================== */
body.full-width {
width: 90%;
padding: 0 5%;
}
.full-width article p {
width: 90%;
}
/* ==============================
* @media print / screen
* ============================== */
// do not display a print-footer for screen display
@media screen {
.print-footer{ display: none; }
}
@media print {
*, *:before, *:after {
background: transparent !important;
color: #000 !important; // Black prints faster
box-shadow: none !important;
text-shadow: none !important;
}
@page {
margin: 0.75in 0.5in 0.75in 0.5in;
orphans: 4;
widows: 2;
}
body {
font-size: 12pt;
padding-left: 5%;
max-width: calc(5% + 1400px); // max-width of content box = 1400px
}
article {
padding: 0;
}
/* this only applies when @media width > 760px */
.sidenote, .marginnote {
// goal: width = 50% of <p> (= 27.5% of 95% <body>)
// - vw for constant width regardless of container
// - 365.75px = 26.125% of 1400px (max-width of <body>)
width: 26.125vw;
max-width: 365.75px;
}
html body span.print-footer {
font-family: $sans-font;
font-size: 9pt;
margin-top: 22.4pt;
padding-top: 4pt;
border-top: 1px solid #000;
}
thead {
display: table-header-group;
}
tr,
img {
break-inside: avoid;
}
article h2, article h2 h3, article h3, article h3 h4, article h4, article h4 h5 {
break-after: avoid;
}
body header, body footer {
display: none;
}
}
@media print and (max-width: 760px) {
blockquote .sidenote,
blockquote .marginnote,
li .sidenote,
li .marginnote,
.sidenote,
.marginnote {
// treat as-if inline
width: 100%;
max-width: 100%;
display: block;
}
}