hugo-tufte/assets/scss/general.scss

307 lines
6.2 KiB
SCSS
Raw Permalink 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;
}
2023-04-29 06:18:38 +02:00
::selection {
color: #151515;
background-color: #ddd;
2023-04-29 06:18:38 +02:00
}
a.heading-anchor {
display: none;
visibility: collapse;
}
2023-04-15 19:52:07 +02:00
h2 {
margin-top: 1.5rem;
2023-04-15 19:52:07 +02:00
}
h2:hover > a.heading-anchor,
h3:hover > a.heading-anchor {
display: inline;
visibility: visible;
}
hr {
2023-04-15 17:20:36 +02:00
text-align: left;
margin-left: 0;
2023-04-15 17:20:36 +02:00
margin-top: 1.4rem;
margin-bottom: 1.4rem;
2024-09-28 00:42:29 +02:00
width: 100%;
2024-09-28 04:33:16 +02:00
max-width: 100%;
2023-04-15 17:20:36 +02:00
border-style: solid none none none;
border-color: #ddd;
2023-04-15 17:20:36 +02:00
}
kbd {
border: 1px #ddd solid;
2023-04-15 17:20:36 +02:00
border-radius: 5px;
padding-right: 2px;
padding-left: 2px;
}
2023-04-29 06:42:20 +02:00
mark {
background: #ddd;
2023-04-29 06:42:20 +02:00
}
/* ------------------------------------------------------------------------ */
/* Styling for listing pages. */
/* ------------------------------------------------------------------------ */
.list-page {
ul {
margin: -0.25em;
2024-09-28 00:42:29 +02:00
width: 100%;
max-width: 45rem;
}
li {
margin: 0;
/*font-size: 95%;*/
}
2024-09-28 00:42:29 +02:00
}
.list-page .list-date {
display: inline;
2024-09-28 00:42:29 +02:00
font-size: 0.9em;
/* padding-right: 2em; */
/* margin-right: 2em; */
}
2024-09-28 00:42:29 +02:00
.list-page > ul > ul > ul > li > a {
display: block;
margin-left: 3em;
}
.list-date a {
display: block;
font-size: 0.85em;
width: 100%;
}
table:not(.lntable) {
2023-04-15 17:20:36 +02:00
margin-top: 1.4em;
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; */
}
2023-04-15 17:20:36 +02:00
table:not(.lntable) tr th {
border-bottom: 1px solid #ddd;
2023-04-15 17:20:36 +02:00
text-transform: uppercase;
}
2023-04-15 17:20:36 +02:00
table:not(.lntable) tr th,
table:not(.lntable) tr td {
padding-right: 0.5rem;
}
table.lntable {
td.lntd {
padding: 0em;
}
border-spacing: 0;
padding: 0;
}
2023-04-15 17:20:36 +02:00
/* ------------------------------------------------------------------------ */
/* Styling for footnotes. */
/* ------------------------------------------------------------------------ */
2023-04-15 19:52:07 +02:00
.footnotes hr {
margin-top: 4.4em;
}
2023-04-15 17:20:36 +02:00
.footnotes ol {
width: 55%;
2023-04-15 19:52:07 +02:00
margin-top: 4.4rem;
li {
p {
width: 100%;
margin: 0;
padding: 0;
a.footnote-backref {
font-size: 1.2rem;
text-decoration: none;
}
}
}
2023-04-15 17:20:36 +02:00
}
/* ------------------------------------------------------------------------ */
/* 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 {
2023-04-15 19:52:07 +02:00
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;
padding-left: 10px;
padding-right: 10px;
margin-top: -0.5em;
margin-bottom: -0.5em;
}
code {
background-color:#282a36;
border-radius: 5px;
display: inline-block;
padding-left: 4px;
padding-right: 4px;
}
pre code {
background-color: #282a36;
padding: 16px;
2024-09-27 23:42:36 +02:00
padding-top: 8px;
padding-bottom: 8px;;
}
/* ------------------------------------------------------------------------ */
/* 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;
}
2023-04-24 03:17:09 +02:00
.row .column > p:first-child {
margin-top: 0;
}
.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.4rem;
margin: 0 0 1.4rem 0;
}
.row .column {
margin-left: 0 !important;
}
}
.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), span:lang(zh),
p:lang(ja), span: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;
}