blog/assets/sass/_content.scss
Michael Zhang 63c7c43afc
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Dotted
2023-05-08 23:48:58 -05:00

583 lines
10 KiB
SCSS

@import "footer";
$breakpoint: 720px;
html {
min-height: 100vh;
margin: 0;
}
*::selection, body::selection, div::selection, code::selection {
background: $heading-color !important;
color: $background-color !important;
}
body {
max-width: 1024px;
margin: auto;
width: 100%;
height: 1px;
min-height: 100vh;
font-family: $sansfont;
font-weight: normal;
letter-spacing: -0.025rem;
background-color: $background-color;
color: $text-color;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $heading-color;
}
header {
margin: auto 12px;
#header {
border-bottom: 2px solid $link-color;
box-sizing: border-box;
padding: 20px;
margin-bottom: 12px;
#title {
font-size: 2.5em;
color: $heading-color;
&:hover {
text-decoration: none;
}
}
}
}
footer {
margin: auto 12px;
margin-top: 24px;
margin-bottom: 40px;
text-align: center;
}
.flex-wrapper {
display: flex;
align-items: stretch;
}
.side-nav .side-nav-content {
display: flex;
justify-content: center;
gap: 20px;
.me {
display: flex;
justify-content: space-evenly;
flex-direction: column;
.links {
text-align: center;
font-size: 1.5rem;
a {
text-decoration: none;
color: $text-color;
&:hover {
color: $link-color;
}
}
}
}
}
@media screen and (max-width: $breakpoint) {
.flex-wrapper {
flex-direction: column;
.container {
padding: 5px 20px;
}
}
.side-nav {
.side-nav-content {
width: 100%;
padding: 18px 0;
border-bottom: 1px solid $shadow-color;
box-shadow: 0 10px 20px -10px $shadow-color;
.home-link {
display: flex;
justify-content: space-evenly;
}
h1.title {
margin-bottom: 5px;
}
.portrait {
max-height: 80px;
}
.bio {
display: none;
}
}
}
}
@media screen and (min-width: $breakpoint) {
.flex-wrapper {
flex-direction: row;
.container {
padding: 32px 40px 5px 40px;
}
}
.side-nav {
position: sticky;
height: 100%;
left: 0;
top: 0;
// Capital Min to avoid invoking SCSS min
width: 30%;
min-width: 300px;
.side-nav-content {
padding-top: 32px;
padding-right: 32px;
padding-left: 32px;
border-right: 1px solid $shadow-color;
box-shadow: 10px 0 20px -10px $shadow-color;
flex-direction: column;
.portrait {
max-width: 100%;
}
h1.title {
text-align: center;
}
.links {
margin-bottom: 20px;
}
}
}
}
.side-nav {
.side-nav-content {
.home-link {
text-decoration: none;
}
.portrait {
border-radius: 100%;
}
.bio {
font-size: 0.85rem;
ul {
padding-left: 12px;
list-style-type: "\25B8\00A0";
}
}
}
}
small {
color: $small-text-color;
}
a {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.permalink-container {
position: relative;
vertical-align: top;
.permalink {
color: $link-color;
font-size: 0.65em;
position: absolute;
left: -25px;
}
}
blockquote {
margin-inline: 14px 14px;
color: $small-text-color;
border-left: 4px solid $small-text-color;
padding-left: 12px;
font-size: 0.9rem;
}
.postlisting-row td {
padding-bottom: 10px;
line-height: 1;
.title {
font-size: 1.1em;
}
&.info {
color: $smaller-text-color;
font-size: 0.75em;
white-space: nowrap;
}
.summary {
padding-top: 4px;
font-size: 0.64em;
color: $smaller-text-color;
p {
display: inline;
}
}
}
#content {
font-size: 1.05em;
line-height: 1.5em;
img {
max-width: 100%;
}
}
code,
pre > code {
font-size: 0.95rem;
letter-spacing: -0.035rem;
}
code {
// font-size: 1.2em;
font-family: $monofont;
box-sizing: border-box;
padding: 1px 5px;
background-color: $faded-background-color;
// color: $code-color;
}
a code {
color: $link-color;
}
pre > code {
color: $text-color;
display: block;
padding: 5px;
overflow-x: auto;
font-family: $monofont;
line-height: 1.15rem;
}
details {
font-size: 0.95rem;
summary {
cursor: pointer;
position: sticky;
top: 0;
background-color: $background-color;
}
}
table.table {
border: 1px solid $faded;
border-collapse: collapse;
thead {
background-color: $smaller-text-color;
color: $background-color;
}
tbody td,
thead th {
border: 1px solid $faded;
padding: 5px;
}
}
.toc {
background-color: lighten($background-color, 10%);
padding: 20px;
ul {
margin-block: 0;
margin-bottom: 0;
}
}
.post-title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 12px;
}
.tags {
display: flex;
gap: 0.75rem;
margin-bottom: 6px;
.tag {
font-size: 0.75rem;
background-color: $tag-color;
padding: 2px 7px;
&.draft {
background-color: orange;
color: black;
}
.text {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
}
// Tabbing
.language-switcher-choice {
display: none;
}
.tabbed {
border: 1px solid #eee;
ul.tabs {
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding-inline-start: 0;
border-bottom: 1px solid lightgray;
.tab {
display: inline-block;
list-style: none;
label {
display: inline-block;
padding: 4px 8px;
font-size: 0.9rem;
}
}
}
.contents {
.tab-content {
padding: 0 12px;
&:not(:last-child) {
border-bottom: 1px solid gray;
}
}
}
}
@for $i from 1 through 5 {
$colors: [green, red, blue, yellow, purple];
.language-switcher-choice:nth-of-type(#{$i}):checked {
outline: 2px solid nth($colors, $i);
}
body:has(.language-switcher-choice:nth-of-type(#{$i}):checked) .tabbed {
.tabs .tab:nth-child(#{$i}) {
border-bottom: 3px solid gray;
}
.tabs .tab:not(:nth-child(#{$i})) {
border-bottom: 3px solid transparent;
}
.contents .tab-content:nth-child(#{$i}) {
border-bottom: none;
}
.contents .tab-content:not(:nth-child(#{$i})) {
// text-shadow: 2px 2px nth($colors, $i);
display: none;
}
}
}
// Post container
.post-container {
display: flex;
flex-direction: column;
.toc-drawer {
display: block;
summary {
font-weight: bold;
}
}
.toc-list {
display: none;
}
/*
@media screen and (max-width: 520px) {
flex-direction: column;
.toc-drawer { display: block; }
.toc-list { display: none; }
}
@media screen and (min-width: 520px) {
flex-direction: row;
align-items: flex-start;
gap: 12px;
.toc-drawer { display: none; }
.toc-list {
top: 0;
display: block;
position: sticky;
min-width: 160px;
}
}
*/
.post-content {
ul:not(.tabs) {
padding-left: 1.5rem;
}
min-width: 1px;
details {
border: 1px solid $hr-color;
// padding: 10px 30px;
font-size: 0.9rem;
padding: 0 30px;
line-height: 1.5;
p:nth-of-type(1) {
padding-top: 0;
margin-top: 0;
}
summary {
padding: 10px 0;
transition: margin 150ms ease-out;
}
&[open] summary {
border-bottom: 1px dotted $hr-color;
margin-bottom: 15px;
}
}
hr {
border-width: 1px 0 0 0;
border-color: $hr-color;
margin: 32px auto;
width: 20%;
}
.highlight {
.lntd:first-child {
// border-right: 1px solid lightgray;
padding-right: 2px;
}
.lntd:last-child {
padding-left: 12px;
}
}
.highlight,
details {
margin-top: 16px;
margin-bottom: 16px;
}
}
&.logseq-post {
.post-content {
> ul {
list-style-type: none;
padding: 0;
> li {
margin-bottom: 1em;
}
}
}
}
.toc-draw #TableOfContents,
.toc-list #TableOfContents {
ul {
list-style-type: "\25B8\00A0";
padding-left: 1rem;
li {
margin-bottom: 0.5rem;
}
}
li ul {
margin-top: 0.5rem;
}
}
table {
border-collapse: collapse;
thead {
background-color: black;
}
td,
th {
padding: 5px 10px;
}
}
}
.division .post-content,
.post-content {
.heading {
font-weight: 500;
a {
color: $heading-color;
}
}
> p {
line-height: 1.5;
}
> p > img {
display: block;
margin: auto;
}
.footnotes {
font-size: 0.9em;
line-height: 1.2;
}
}
hr.endline {
margin-top: 30px;
border-width: 1px 0 0 0;
border-color: $hr-color;
}