blog/assets/sass/_content.scss

447 lines
7.4 KiB
SCSS
Raw Normal View History

2022-09-26 17:58:51 +00:00
@import "footer";
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 {
2020-05-05 04:38:36 +00:00
max-width: 980px;
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;
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;
justify-content: space-evenly;
.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;
}
}
}
}
}
2022-08-01 04:48:05 +00:00
@media screen and (max-width: 672px) {
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;
}
.bio {
display: none;
}
2022-07-19 08:49:38 +00:00
}
}
}
2022-08-01 04:48:05 +00:00
@media screen and (min-width: 672px) {
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
2022-08-29 18:03:12 +00:00
max-width: Min(30%, 30em);
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
}
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
font-size: 0.9em;
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;
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;
font-size: 0.9em;
}
2021-05-04 12:02:15 +00:00
2022-02-08 22:51:36 +00:00
details {
font-size: 0.95rem;
summary {
cursor: pointer;
}
}
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;
margin-bottom: 0;
}
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;
.text {
2022-03-04 03:48:32 +00:00
text-decoration: none;
2022-02-08 22:29:18 +00:00
}
&:hover {
text-decoration: none;
}
}
}
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 {
padding-left: 1.5rem;
}
2022-02-02 09:16:56 +00:00
min-width: 1px;
}
&.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
}