Reorganize styles a bit
This commit is contained in:
parent
9e5b8cfddd
commit
be432a8999
7 changed files with 90 additions and 78 deletions
1
static/styles/an-old-hope.min.css
vendored
Normal file
1
static/styles/an-old-hope.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.hljs-comment,.hljs-quote{color:#B6B18B}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#EB3C54}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#E7CE56}.hljs-attribute{color:#EE7C2B}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#4FB4D7}.hljs-title,.hljs-section{color:#78BB65}.hljs-keyword,.hljs-selector-tag{color:#B45EA4}.hljs{display:block;overflow-x:auto;background:#1C1D21;color:#c0c5ce;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
|
||||
662
static/styles/app.css
Normal file
662
static/styles/app.css
Normal file
|
|
@ -0,0 +1,662 @@
|
|||
/* app.css
|
||||
*
|
||||
* Paper <https://github.com/nanxiaobei/hugo-paper>
|
||||
* Designed by 南小北 (https://lee.so/)
|
||||
* Updated in 2021.8.24
|
||||
*
|
||||
* Modified by Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
/* Theme
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--gap: 3.5rem;
|
||||
--y-gap: 8rem;
|
||||
--wide: 140rem;
|
||||
--narrow: 80rem;
|
||||
--side: calc((var(--wide) - var(--narrow)) / 2);
|
||||
--header: 8rem;
|
||||
--footer: calc(8rem + var(--safe-bottom));
|
||||
--link-color: #3486ff;
|
||||
|
||||
--light: 255, 255, 255;
|
||||
--dark: 22, 22, 22;
|
||||
--hljs-bg: #111;
|
||||
|
||||
--safe-bottom: 0;
|
||||
}
|
||||
|
||||
@supports (bottom: constant(safe-area-inset-bottom)) {
|
||||
:root {
|
||||
--safe-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (bottom: env(safe-area-inset-bottom)) {
|
||||
:root {
|
||||
--safe-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
--light: 22, 22, 22;
|
||||
--dark: 255, 255, 255;
|
||||
--hljs-bg: #282828;
|
||||
--link-color: #56a8ff;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
--white: rgba(var(--light), 1);
|
||||
--black: rgba(var(--dark), 1);
|
||||
|
||||
--pro: rgba(var(--dark), 1);
|
||||
--lit: rgba(var(--dark), 0.64);
|
||||
--air: rgba(var(--dark), 0.48);
|
||||
--fog: rgba(var(--dark), 0.12);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: var(--gap);
|
||||
padding-left: var(--gap);
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 2rem;
|
||||
line-height: 1.8;
|
||||
color: var(--pro);
|
||||
word-break: break-word;
|
||||
background: var(--white);
|
||||
transition: background 0.4s ease-out;
|
||||
}
|
||||
|
||||
body > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.not-ready,
|
||||
.not-ready * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header
|
||||
-------------------------------------------------- */
|
||||
.header {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
max-width: var(--wide);
|
||||
height: var(--header);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.header a {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
min-width: var(--side);
|
||||
padding-right: var(--gap);
|
||||
}
|
||||
|
||||
.site-name {
|
||||
padding-bottom: 0.3rem;
|
||||
overflow: auto;
|
||||
font-size: 3.4rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
width: 3rem;
|
||||
margin-left: 2rem;
|
||||
cursor: pointer;
|
||||
background: url(./theme.png) left / auto 3rem no-repeat;
|
||||
transition: background-position 0.4s steps(5);
|
||||
}
|
||||
|
||||
.dark .btn-dark {
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.menu a + a {
|
||||
margin-left: var(--gap);
|
||||
}
|
||||
|
||||
.menu a.active {
|
||||
opacity: 0.44;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.social a {
|
||||
width: 3rem;
|
||||
margin-left: 3rem;
|
||||
background: var(--url) center center no-repeat;
|
||||
}
|
||||
|
||||
.social a span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dark .social a {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.logo {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
[data-menu='true'] {
|
||||
--header: 16rem;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-menu='true'] .header > * {
|
||||
height: calc(var(--header) / 2);
|
||||
}
|
||||
|
||||
[data-menu='true'] .menu {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
border-bottom: 1px solid var(--fog);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main
|
||||
-------------------------------------------------- */
|
||||
.main {
|
||||
max-width: var(--narrow);
|
||||
min-height: calc(100% - var(--header) - var(--footer));
|
||||
padding-top: var(--y-gap);
|
||||
padding-bottom: var(--y-gap);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin-bottom: calc(var(--y-gap) + 1rem);
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: var(--lit);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
font-size: 1.8rem;
|
||||
line-height: 5.5rem;
|
||||
color: var(--white);
|
||||
background: var(--black);
|
||||
border-radius: 0.5rem;
|
||||
padding-inline: 3rem;
|
||||
}
|
||||
|
||||
.main-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Post entry
|
||||
-------------------------------------------------- */
|
||||
.post-entry {
|
||||
position: relative;
|
||||
padding-block: 2rem;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.post-entry:first-of-type {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
|
||||
.post-entry:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.post-entry h2 {
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.post-entry time {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.7rem;
|
||||
color: var(--air);
|
||||
}
|
||||
|
||||
.post-entry a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
/* Post single
|
||||
-------------------------------------------------- */
|
||||
.post-title {
|
||||
margin-bottom: calc(var(--y-gap) + 1rem);
|
||||
}
|
||||
|
||||
.post-title p {
|
||||
display: flex;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
color: var(--air);
|
||||
transform: translateY(0.4rem);
|
||||
}
|
||||
|
||||
.post-title p span::before {
|
||||
content: '·';
|
||||
margin-inline: 0.8rem;
|
||||
}
|
||||
|
||||
.post-title h1 {
|
||||
font-size: 5rem;
|
||||
transform: translateX(-0.3rem);
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.post-tags a {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
line-height: 5rem;
|
||||
color: var(--lit);
|
||||
background: rgba(var(--dark), 0.05);
|
||||
border-radius: 0.5rem;
|
||||
padding-inline: 2rem;
|
||||
}
|
||||
|
||||
.post-tags a + a {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--y-gap);
|
||||
background: rgba(var(--dark), 0.05);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.post-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
padding: var(--gap);
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.post-nav a span + span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.post-nav .prev {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.post-nav .next {
|
||||
justify-content: flex-end;
|
||||
padding-left: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-comments {
|
||||
margin-top: var(--y-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.post-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.post-title aside {
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
padding-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.post-title aside span::before {
|
||||
content: '·';
|
||||
margin-inline: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post content
|
||||
-------------------------------------------------- */
|
||||
.post-content {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.post-content h1,
|
||||
.post-content h2,
|
||||
.post-content h3,
|
||||
.post-content h4,
|
||||
.post-content h5,
|
||||
.post-content h6 {
|
||||
margin-block: 2rem;
|
||||
}
|
||||
|
||||
.post-content h1 {
|
||||
margin-top: var(--y-gap);
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.post-content h2 {
|
||||
margin-top: 6rem;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.post-content h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.post-content h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.post-content h6 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.post-content img {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.post-content a {
|
||||
color: var(--link-color);
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.post-content a:hover {
|
||||
border-bottom: 2px solid var(--link-color);
|
||||
}
|
||||
|
||||
.post-content a code {
|
||||
margin-inline: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.post-content del {
|
||||
text-decoration: none;
|
||||
background: linear-gradient(to right, var(--pro) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
|
||||
}
|
||||
|
||||
.post-content p,
|
||||
.post-content ul,
|
||||
.post-content ol,
|
||||
.post-content dl,
|
||||
.post-content details {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.post-content ul,
|
||||
.post-content ol {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.post-content li {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.post-content li p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content dl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-content dt {
|
||||
width: 25%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post-content dd {
|
||||
width: 75%;
|
||||
padding-left: 1.3rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post-content dt ~ dt,
|
||||
.post-content dd ~ dd {
|
||||
margin-top: 1.3rem;
|
||||
}
|
||||
|
||||
.post-content table {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.post-content table th,
|
||||
.post-content table:not(.highlighttable) td {
|
||||
min-width: 10rem;
|
||||
padding: 1.5rem 1rem;
|
||||
line-height: 1.5;
|
||||
border-bottom: 1px solid var(--fog);
|
||||
}
|
||||
|
||||
.post-content table th {
|
||||
font-size: 1.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.post-content table:not(.highlighttable) td code:only-of-type {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.post-content .highlight,
|
||||
.post-content pre {
|
||||
margin: 0 calc(var(--gap) * -1) 4rem;
|
||||
overflow-x: auto;
|
||||
background: var(--hljs-bg) !important;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.post-content ul pre {
|
||||
margin-left: calc(var(--gap) * -2);
|
||||
}
|
||||
|
||||
.post-content .highlight pre {
|
||||
margin-inline: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* table */
|
||||
.post-content .highlighttable {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td:first-of-type {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .linenodiv {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .linenodiv pre,
|
||||
.post-content .highlighttable td .highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* inline */
|
||||
.post-content .highlight span {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.post-content code {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-inline: 0.5rem;
|
||||
font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.5;
|
||||
background: rgba(var(--dark), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.post-content pre code {
|
||||
display: block;
|
||||
padding: var(--gap);
|
||||
margin-inline: 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.post-content blockquote {
|
||||
padding: 0 0 0 calc(var(--gap) - 0.4rem);
|
||||
margin: 0 0 0 calc(var(--gap) * -1);
|
||||
border-left: 0.4rem solid var(--pro);
|
||||
}
|
||||
|
||||
.post-content hr {
|
||||
height: 1px;
|
||||
background: var(--fog);
|
||||
border: 0;
|
||||
margin-block: 12rem;
|
||||
}
|
||||
|
||||
.post-content iframe {
|
||||
width: 100%;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: var(--narrow);
|
||||
height: var(--footer);
|
||||
padding-bottom: var(--safe-bottom);
|
||||
margin-top: auto;
|
||||
font-size: 1.6rem;
|
||||
color: var(--lit);
|
||||
border-top: 1px solid var(--fog);
|
||||
}
|
||||
|
||||
.footer p + p::before {
|
||||
content: '·';
|
||||
margin-inline: 0.6rem;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: var(--pro);
|
||||
border-bottom: 1px solid var(--pro);
|
||||
}
|
||||
|
||||
.flex-date {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flex-date .date {
|
||||
margin-left: auto;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.draft {
|
||||
text-transform: uppercase;
|
||||
font-size: 80%;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
/*border: 2px solid #aaa;*/
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem 0.8rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: 6px;
|
||||
border: 1px solid var(--fog);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.post-content figcaption > h4 {
|
||||
margin: 0;
|
||||
margin-block: 0;
|
||||
margin-top: 6px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div.twitter-tweet {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.twitter-tweet + p,
|
||||
.twitter-tweet + script + p {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* 404
|
||||
-------------------------------------------------- */
|
||||
.title-404 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding-bottom: 8rem;
|
||||
font-size: 16rem;
|
||||
}
|
||||
43
static/styles/home.css
Normal file
43
static/styles/home.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* home.css
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
.main h1,
|
||||
.main h2,
|
||||
.main h3 {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.main h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.main a:hover {
|
||||
border-bottom: 2px solid var(--link-color);
|
||||
}
|
||||
|
||||
.main h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#homepage-content {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.main p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main p,
|
||||
.main ul {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
69
static/styles/reset.css
Normal file
69
static/styles/reset.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* reset.css
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill {
|
||||
box-shadow: 0 0 0 6rem var(--white) inset;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue