blog!
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
/*!
|
||||
Theme: GitHub
|
||||
Description: Light theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-light
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #005cc5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #735c0f;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #24292e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #24292e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: var(--text-color);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--text-color: black;
|
||||
--link-color: var(--text-color);
|
||||
--link-shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--border-color: rgba(200, 200, 200, 0.5);
|
||||
--text-bg-color: rgba(255, 255, 255, 0.95);
|
||||
--text-border-shadow-color: rgba(255, 255, 255, 0.7);
|
||||
--text-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--img-bg-color: rgba(50, 50, 50, 0.2);
|
||||
--img-border-color: rgba(255, 255, 255, 0.8);
|
||||
--font-base-size: 1rem;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
align-items: center;
|
||||
block-size: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
inline-size: 100%;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-block: .5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(var(--font-base-size) * 2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(var(--font-base-size) * 1.8);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(var(--font-base-size) * 1.6);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: calc(var(--font-base-size) * 1.5);
|
||||
margin: 0;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
transition: .2s text-shadow, .2s transform;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
transition: .2s text-shadow, .2s transform;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: .2s text-shadow, .2s box-shadow,
|
||||
.2s transform;
|
||||
|
||||
&:has(> p) {
|
||||
&:hover {
|
||||
box-shadow: 0rem 0.2rem 1rem var(--link-shadow-color);
|
||||
transform: translateY(-7%);
|
||||
}
|
||||
|
||||
color: var(--link-color);
|
||||
display: inline-block;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:has(> p)) {
|
||||
&:hover {
|
||||
text-shadow: 0rem 0.2rem 1rem var(--link-shadow-color);
|
||||
transform: translateY(-7%) scale(1.01);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#background {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
|
||||
&[loaded] img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
transform: translate(-50%, -50%) translateZ(var(--translate-z));
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
border: 0.01rem solid var(--img-border-color);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0.05rem 0.05rem 0px var(--img-bg-color),
|
||||
-0.05rem -0.05rem 0px var(--img-bg-color),
|
||||
0.05rem -0.05rem 0px var(--img-bg-color),
|
||||
-0.05rem 0.05rem 0px var(--img-bg-color),
|
||||
0 0 1rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0.05rem 0.05rem 0px var(--img-bg-color),
|
||||
-0.05rem -0.05rem 0px var(--img-bg-color),
|
||||
0.05rem -0.05rem 0px var(--img-bg-color),
|
||||
-0.05rem 0.05rem 0px var(--img-bg-color),
|
||||
0 0 1rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.blog {}
|
||||
|
||||
main {
|
||||
overflow-inline: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--text-bg-color);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 0.01rem solid var(--border-color);
|
||||
margin: 1px;
|
||||
padding: .8rem 1.6rem;
|
||||
max-inline-size: clamp(20rem, 50%, 40rem);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0.05rem 0.05rem 0px var(--text-border-shadow-color),
|
||||
-0.05rem -0.05rem 0px var(--text-border-shadow-color),
|
||||
0.05rem -0.05rem 0px var(--text-border-shadow-color),
|
||||
-0.05rem 0.05rem 0px var(--text-border-shadow-color),
|
||||
0rem 0rem 2rem var(--text-shadow-color);
|
||||
|
||||
img {
|
||||
inline-size: 100%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#background {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user