blog/assets/sass/_content.scss

585 lines
10 KiB
SCSS
Raw Normal View History

2022-09-26 17:58:51 +00:00
@import "footer";
2022-01-25 00:35:39 +00:00
2023-03-26 19:32:38 +00:00
$breakpoint: 720px;
2022-01-25 00:35:39 +00:00
html {
min-height: 100vh;
margin: 0;
}
::selection,
::-moz-selection {
2022-02-08 22:27:42 +00:00
background-color: $heading-color;
color: $background-color;
}
2020-02-12 03:21:15 +00:00
body {
2023-03-29 20:03:10 +00:00
max-width: 1024px;
2020-02-12 03:21:15 +00:00
margin: auto;
2022-01-25 00:35:39 +00:00
width: 100%;
height: 1px;
min-height: 100vh;
2020-02-12 03:21:15 +00:00
font-family: $sansfont;
2021-07-06 20:58:39 +00:00
font-weight: normal;
2023-04-20 19:11:41 +00:00
letter-spacing: -0.025rem;
2020-02-12 03:21:15 +00:00
background-color: $background-color;
color: $text-color;
}
h1,
h2,
h3,
h4,
h5,
h6 {
2021-08-30 07:52:21 +00:00
color: $heading-color;
}
2020-02-12 03:21:15 +00:00
header {
margin: auto 12px;
#header {
border-bottom: 2px solid $link-color;
box-sizing: border-box;
padding: 20px;
margin-bottom: 12px;
#title {
2021-07-06 20:58:39 +00:00
font-size: 2.5em;
2021-08-30 07:52:21 +00:00
color: $heading-color;
2020-02-12 03:21:15 +00:00
&:hover {
text-decoration: none;
}
}
}
}
2021-07-06 20:58:39 +00:00
footer {
2021-07-06 21:57:42 +00:00
margin: auto 12px;
2021-07-06 20:58:39 +00:00
margin-top: 24px;
margin-bottom: 40px;
text-align: center;
}
2022-07-19 08:49:38 +00:00
.flex-wrapper {
display: flex;
align-items: stretch;
}
2022-11-05 23:57:34 +00:00
.side-nav .side-nav-content {
display: flex;
2023-03-26 19:32:38 +00:00
justify-content: center;
gap: 20px;
2022-11-05 23:57:34 +00:00
.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;
}
}
}
}
}
2023-03-26 19:32:38 +00:00
@media screen and (max-width: $breakpoint) {
2022-07-19 08:49:38 +00:00
.flex-wrapper {
flex-direction: column;
.container {
padding: 5px 20px;
}
2022-07-19 08:49:38 +00:00
}
.side-nav {
.side-nav-content {
width: 100%;
padding: 18px 0;
2022-07-19 08:53:25 +00:00
border-bottom: 1px solid $shadow-color;
box-shadow: 0 10px 20px -10px $shadow-color;
2022-07-19 08:49:38 +00:00
.home-link {
display: flex;
justify-content: space-evenly;
}
2022-11-05 23:57:34 +00:00
h1.title {
margin-bottom: 5px;
}
2022-07-19 08:49:38 +00:00
.portrait {
max-height: 80px;
}
2023-03-26 19:32:38 +00:00
.bio {
display: none;
}
2022-07-19 08:49:38 +00:00
}
}
}
2023-03-26 19:32:38 +00:00
@media screen and (min-width: $breakpoint) {
2022-07-19 08:49:38 +00:00
.flex-wrapper {
flex-direction: row;
.container {
padding: 32px 40px 5px 40px;
}
2022-07-19 08:49:38 +00:00
}
.side-nav {
position: sticky;
height: 100%;
left: 0;
top: 0;
// Capital Min to avoid invoking SCSS min
2023-03-26 19:32:38 +00:00
width: 30%;
min-width: 300px;
2022-07-19 08:49:38 +00:00
.side-nav-content {
padding-top: 32px;
padding-right: 32px;
2022-08-01 04:48:05 +00:00
padding-left: 32px;
2022-07-19 08:53:25 +00:00
border-right: 1px solid $shadow-color;
box-shadow: 10px 0 20px -10px $shadow-color;
2022-11-05 23:57:34 +00:00
flex-direction: column;
2022-07-19 08:49:38 +00:00
.portrait {
max-width: 100%;
}
2022-08-29 18:03:12 +00:00
h1.title {
text-align: center;
}
2022-11-05 23:57:34 +00:00
.links {
margin-bottom: 20px;
}
2022-07-19 08:49:38 +00:00
}
}
}
.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";
}
}
}
}
2020-02-12 03:51:19 +00:00
small {
color: $small-text-color;
}
2020-02-12 03:21:15 +00:00
a {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
2020-04-01 05:17:58 +00:00
}
.permalink-container {
position: relative;
vertical-align: top;
2020-02-12 03:21:15 +00:00
2020-04-01 05:17:58 +00:00
.permalink {
2020-02-12 07:42:03 +00:00
color: $link-color;
2020-02-12 03:21:15 +00:00
font-size: 0.65em;
2020-04-01 05:17:58 +00:00
position: absolute;
2020-04-01 05:19:59 +00:00
left: -25px;
2020-02-12 03:21:15 +00:00
}
}
2020-02-18 01:04:27 +00:00
blockquote {
2021-06-30 06:03:00 +00:00
margin-inline: 14px 14px;
2020-02-18 01:04:27 +00:00
color: $small-text-color;
border-left: 4px solid $small-text-color;
padding-left: 12px;
2022-02-02 10:15:05 +00:00
font-size: 0.9rem;
2020-02-18 01:04:27 +00:00
}
2020-02-12 03:51:19 +00:00
.postlisting-row td {
2022-07-19 08:49:38 +00:00
padding-bottom: 10px;
line-height: 1;
2021-07-06 21:57:42 +00:00
.title {
2022-07-19 08:49:38 +00:00
font-size: 1.1em;
}
&.info {
color: $smaller-text-color;
font-size: 0.75em;
2022-07-19 09:37:30 +00:00
white-space: nowrap;
2021-07-06 21:57:42 +00:00
}
.summary {
padding-top: 4px;
2022-07-19 08:49:38 +00:00
font-size: 0.64em;
2021-07-06 21:57:42 +00:00
color: $smaller-text-color;
p {
display: inline;
}
}
2020-02-12 03:51:19 +00:00
}
2020-02-12 03:21:15 +00:00
#content {
2020-04-01 05:17:58 +00:00
font-size: 1.05em;
line-height: 1.5em;
2020-05-05 04:38:36 +00:00
img {
max-width: 100%;
}
2020-02-12 03:21:15 +00:00
}
2023-04-20 19:11:41 +00:00
code,
pre > code {
font-size: 0.95rem;
letter-spacing: -0.035rem;
}
2020-05-05 04:50:10 +00:00
code {
2021-05-04 12:02:15 +00:00
// font-size: 1.2em;
font-family: $monofont;
2022-01-25 00:35:39 +00:00
box-sizing: border-box;
2022-02-02 10:15:05 +00:00
padding: 1px 5px;
2022-01-25 00:35:39 +00:00
background-color: $faded-background-color;
2023-03-29 20:03:10 +00:00
// color: $code-color;
2021-06-30 06:41:11 +00:00
}
a code {
color: $link-color;
2020-02-12 03:21:15 +00:00
}
2020-11-03 22:14:45 +00:00
pre > code {
2022-02-02 09:16:56 +00:00
color: $text-color;
2020-11-03 22:14:45 +00:00
display: block;
padding: 5px;
overflow-x: auto;
font-family: $monofont;
2023-04-20 19:11:41 +00:00
line-height: 1.15rem;
2020-11-03 22:14:45 +00:00
}
2021-05-04 12:02:15 +00:00
2022-02-08 22:51:36 +00:00
details {
font-size: 0.95rem;
summary {
cursor: pointer;
2023-04-20 20:58:15 +00:00
position: sticky;
top: 0;
background-color: $background-color;
2022-02-08 22:51:36 +00:00
}
}
2021-07-06 22:27:33 +00:00
table.table {
border: 1px solid $faded;
border-collapse: collapse;
thead {
background-color: $smaller-text-color;
color: $background-color;
}
tbody td,
thead th {
2021-07-06 22:27:33 +00:00
border: 1px solid $faded;
padding: 5px;
}
}
2021-07-06 05:52:05 +00:00
.toc {
background-color: lighten($background-color, 10%);
padding: 20px;
ul {
margin-block: 0;
margin-bottom: 0;
}
}
2022-02-02 10:26:08 +00:00
.post-title {
2022-07-19 08:49:38 +00:00
font-size: 2rem;
2022-02-02 10:26:08 +00:00
font-weight: 500;
2023-03-29 20:03:10 +00:00
margin-bottom: 12px;
2022-02-02 10:26:08 +00:00
}
2022-02-08 22:29:18 +00:00
.tags {
display: flex;
gap: 0.75rem;
margin-bottom: 6px;
.tag {
2022-07-19 08:49:38 +00:00
font-size: 0.75rem;
2022-02-08 22:34:23 +00:00
background-color: $tag-color;
2022-02-08 22:29:18 +00:00
padding: 2px 7px;
2023-04-20 20:58:15 +00:00
&.draft {
background-color: orange;
color: black;
}
2022-02-08 22:29:18 +00:00
.text {
2022-03-04 03:48:32 +00:00
text-decoration: none;
2022-02-08 22:29:18 +00:00
}
&: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
2022-02-02 09:16:56 +00:00
.post-container {
display: flex;
2022-07-19 08:49:38 +00:00
flex-direction: column;
.toc-drawer {
display: block;
summary {
font-weight: bold;
}
}
.toc-list {
display: none;
}
2022-07-19 08:49:38 +00:00
/*
2022-02-02 09:16:56 +00:00
@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;
}
}
2022-07-19 08:49:38 +00:00
*/
2022-02-02 09:16:56 +00:00
.post-content {
ul:not(.tabs) {
padding-left: 1.5rem;
}
2022-02-02 09:16:56 +00:00
min-width: 1px;
2023-03-29 20:03:10 +00:00
details {
2023-04-21 06:18:34 +00:00
border: 1px solid $hr-color;
2023-04-20 20:58:15 +00:00
// padding: 10px 30px;
2023-03-29 20:03:10 +00:00
font-size: 0.9rem;
2023-04-20 20:58:15 +00:00
padding: 0 30px;
line-height: 1.5;
2023-04-21 06:18:34 +00:00
p:nth-of-type(1) {
padding-top: 0;
margin-top: 0;
}
2023-04-20 20:58:15 +00:00
summary {
padding: 10px 0;
2023-04-21 06:18:34 +00:00
transition: margin 150ms ease-out;
2023-04-20 20:58:15 +00:00
}
&[open] summary {
2023-04-21 06:18:34 +00:00
border-bottom: 1px solid $hr-color;
margin-bottom: 15px;
2023-04-20 20:58:15 +00:00
}
2023-03-29 20:03:10 +00:00
}
hr {
border-width: 1px 0 0 0;
2023-04-21 06:18:34 +00:00
border-color: $hr-color;
2023-03-29 20:03:10 +00:00
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;
}
2022-02-02 09:16:56 +00:00
}
&.logseq-post {
.post-content {
> ul {
list-style-type: none;
padding: 0;
> li {
margin-bottom: 1em;
}
}
}
}
.toc-draw #TableOfContents,
.toc-list #TableOfContents {
2022-02-02 09:16:56 +00:00
ul {
2022-02-09 00:49:05 +00:00
list-style-type: "\25B8\00A0";
2022-02-02 09:16:56 +00:00
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;
}
}
2022-02-02 09:16:56 +00:00
}
.division .post-content,
.post-content {
2022-02-02 09:16:56 +00:00
.heading {
2022-02-02 10:26:08 +00:00
font-weight: 500;
2022-02-02 09:16:56 +00:00
a {
color: $heading-color;
}
}
2021-05-04 12:02:15 +00:00
> p {
line-height: 1.5;
}
2021-08-30 07:52:21 +00:00
2022-08-02 20:12:22 +00:00
> p > img {
display: block;
margin: auto;
}
2021-08-30 07:52:21 +00:00
.footnotes {
font-size: 0.9em;
2021-08-30 07:52:21 +00:00
line-height: 1.2;
}
2021-05-04 12:02:15 +00:00
}
2023-04-20 19:11:41 +00:00
2023-04-21 06:18:34 +00:00
hr.endline {
2023-04-20 19:11:41 +00:00
margin-top: 30px;
border-width: 1px 0 0 0;
2023-04-21 06:18:34 +00:00
border-color: $hr-color;
2023-04-20 19:11:41 +00:00
}