hugo-tufte/assets/scss/general.scss

225 lines
4.8 KiB
SCSS
Raw Normal View History

/* ------------------------------------------------------------------------ */
/* hugo-tufte.css */
/* Contains extensions to the original tufte.css styles to */
/* accomodate a blog-like site. */
/* ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ */
/* Generic content, such as the index list pages */
/* ------------------------------------------------------------------------ */
:root * {
text-align: left;
text-rendering: optimizeLegibility;
}
:focus {
outline: medium auto currentColor;
outline: medium auto invert;
outline: 5px auto -webkit-focus-ring-color;
}
a.heading-anchor {
display: none;
visibility: collapse;
}
h2:hover > a.heading-anchor,
h3:hover > a.heading-anchor {
display: inline;
visibility: visible;
}
hr {
margin-left: 0;
width: 75%;
max-width: 45rem;
border-color: rgba(250,250,250,0.25);
}
/* ------------------------------------------------------------------------ */
/* Styling for listing pages. */
/* ------------------------------------------------------------------------ */
.list-page {
ul {
list-style-type: none;
margin: -0.25em;
width: 87.5%;
max-width: 45rem;
}
li {
margin: 0;
/*font-size: 95%;*/
}
}
.list-page .list-date {
display: inline;
font-size: 0.75em;
/* padding-right: 2em; */
/* margin-right: 2em; */
}
table:not(.lntable) {
margin-top: 1em;
font-size: 1.4rem;
width: auto; /* making booktabs style tables the unstyled default in case someone uses Markdown styling */
/* margin: 0 auto; */
/* border-spacing: 0px; */
border-top: 2px solid #111;
border-bottom: 2px solid #111;
}
table:not(.lntable) th,
table:not(.lntable) td {
font-size: 1.25rem;
line-height: 1.71428571;
}
table:not(.lntable) td {
padding-right: 0.75em;
}
table.lntable {
td.lntd {
padding: 0em;
}
border-spacing: 0;
padding: 0;
}
/* ------------------------------------------------------------------------ */
/* Styling for maths. */
/* ------------------------------------------------------------------------ */
/* mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar,
.katex-display::-webkit-scrollbar {
display: none;
}*/
mjx-container[jax="CHTML"][display="true"],
.katex-display {
overflow: auto;
overflow-y: hidden;
/* -ms-overflow-style: none;
scrollbar-width: none; */
}
/* ------------------------------------------------------------------------ */
/* Styling for margin/side notes. */
/* ------------------------------------------------------------------------ */
.marginnote .marginnote-ind,
.sidenote .sidenote-number {
margin-right: 5px;
}
/* prevent over-crowding */
.sidenote, .marginnote {
margin-bottom: 1rem;
}
.sidenote code,
.marginnote code {
font-size: 0.9rem;
}
/* ------------------------------------------------------------------------ */
/* Styling & fixes for cols. */
/* ------------------------------------------------------------------------ */
// create grid
.row {
/* mobile */
display: grid;
width: 75%;
gap: 0.3rem;
margin: 0 0 1rem 0;
}
.row .column:nth-of-type(2n) {
margin-left: 1rem;
}
.row .column:nth-of-type(3n) {
margin-left: 2rem;
}
.row .column > p:last-child {
margin-bottom: 0;
}
@media (min-width: 760px) {
/* desktop */
/* https://stackoverflow.com/a/62086985 */
.row {
grid-auto-columns: 1fr;
grid-auto-flow: column;
/* above 2 lines are equivalent as below 1 line */
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
gap: 1.3rem;
margin: 0 0 1rem 0;
}
.row .column {
margin-left: 0;
}
}
.column > p {
width: 100%;
}
.column > p > label.margin-toggle.marginnote-ind {
display: inline;
}
.column > p > .sidenote,
.column > p > .marginnote {
display: none;
}
.column > p > .margin-toggle:checked + .sidenote,
.column > p > .margin-toggle:checked + .marginnote {
display: block;
float: left;
left: 1rem;
clear: both;
width: 95%;
margin: 1rem 2.5%;
vertical-align: baseline;
position: relative;
}
/* ------------------------------------------------------------------------ */
/* Styling for buttons. */
/* ------------------------------------------------------------------------ */
.btn {
display: inline-block;
margin-top: 1.4rem;
}
.btn button {
font-size: 1.4rem;
}
.btn button .icon {
font-size: 1.2rem;
}
/* ------------------------------------------------------------------------ */
/* Styling for i18n. */
/* ------------------------------------------------------------------------ */
/* reduce zh & ja font-size to match en */
p:lang(zh),
p:lang(ja) {
font-size: 1.2rem;
}
.sidenote:lang(zh),
.marginnote:lang(zh) {
font-size: 0.5rem;
}
.sidenote:lang(ja),
.marginnote:lang(ja) {
font-size: 0.9rem;
}