Skip to content

Commit

Permalink
Optimize size
Browse files Browse the repository at this point in the history
  • Loading branch information
purplesyringa committed Apr 23, 2024
1 parent 570eebc commit c097d9f
Show file tree
Hide file tree
Showing 7 changed files with 311 additions and 294 deletions.
147 changes: 147 additions & 0 deletions all.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Slabo+27px&display=swap');

html, body {
margin: 0;
height: 100%;
font-size: 18px;
}

* {
box-sizing: border-box;
}

header, footer {
background-color: #ed79a9;
color: #ffffff;
font-family: 'Slabo 27px', serif;
}
h1 {
margin: 0;
}

h1 a {
color: inherit !important;
}

.media {
position: absolute;
left: 100%;
margin-left: 20rem;
margin-top: 0.25rem;
}
.media img {
height: 2rem;
}
.media a {
text-decoration: none !important;
}

header, footer, section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer h2 {
opacity: 0.8;
color: inherit !important;
}

section {
font-family: 'Roboto', sans-serif;
}

.viewport-container {
width: 40rem;
margin-right: 15rem;
max-width: 100%;
padding: 1em;
position: relative;
}

h2 {
margin: 0;
color: #8d00d9;
}

h3 {
position: absolute;
right: 100%;
font-size: 1rem;
font-weight: 700;
color: #8d00d9;
margin: 0;
margin-top: 1rem;
margin-right: 0.5rem;
width: 100%;
text-align: right;
}

s {
opacity: 0.5;
}

a {
color: #ff1994;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}

li {
margin-bottom: 0.25rem;
}

.only-dark {
display: none;
}

@media all and (prefers-color-scheme: dark) {
header, footer {
background-color: #9c2254;
}
section {
background-color: #160117;
color: #fee8ff;
}
h2, h3, code, .katex {
color: #cd91ed;
}
a {
color: #f765b4;
}
aside {
background-color: #4e2554;
}
blockquote {
border-left-color: #9c2254;
background-color: #4e2554;
}
pre {
background-color: #00000080;
}
pre code {
color: #ffffff;
}
.expansible-code > label {
background-image: linear-gradient(to bottom, transparent, #000000);
}
.only-light {
display: none;
}
.only-dark {
display: block;
}
}

@media screen and (max-width: 1300px) {
h3 {
position: static;
text-align: left;
}

.viewport-container {
margin-right: 0;
}
}
152 changes: 152 additions & 0 deletions blog.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css" screen and (prefers-color-scheme: dark);
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/base16/atelier-cave-light.min.css" screen and (prefers-color-scheme: light);

time {
opacity: 0.8;
}

h3 {
margin-top: 2rem;
}
h3 + * {
margin-top: 3rem;
}

code {
font-family: 'Noto Sans', sans-serif;
color: #8d00d9;
}
.katex {
font-size: 1.1em;
line-height: 0;
color: #8d00d9;
}

pre {
margin-left: -7rem;
width: 52rem;
font-size: 0.85rem;
padding: 0.75rem;
overflow: auto;
background-color: #00000010;
}
pre code {
font-family: 'Roboto Mono', monospace;
color: #000000;
}

.expansible-code {
position: relative;
}
.expansible-code > input {
display: none;
}
.expansible-code > .highlighted {
height: 20em;
overflow: hidden;
}
.expansible-code > label {
position: absolute;
left: -0.75rem;
top: -0.75rem;
width: calc(100% + 1.5rem);
height: calc(100% + 1.5rem);
padding-block: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background-image: linear-gradient(to bottom, transparent, #d0d0d0);
font-family: Roboto, sans-serif;
font-size: 1rem;
cursor: pointer;
}
.expansible-code > label::before {
content: "Expand";
}
.expansible-code > input:checked + .highlighted {
height: auto;
}
.expansible-code > input:checked ~ label {
display: none;
}

.diagram {
margin-top: 1rem;
margin-bottom: 1rem;
}
.diagram svg {
margin-left: -7rem;
width: 52rem;
height: auto;
}

blockquote {
border-left: 0.375rem solid #ed79a9;
background-color: #f2befa;
margin: 0;
padding: 0.5rem;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}

hr {
visibility: hidden;
margin-top: 2rem;
}

aside {
position: absolute;
left: 100%;
margin-top: -0.5rem;
width: 15rem;
padding: 0.5rem;
background-color: #f2befa;
z-index: 1;
}
aside > :first-child {
margin-top: 0;
}
aside > :last-child {
margin-bottom: 0;
}

@media screen and (max-width: 1300px) {
h3 + * {
margin-top: 1rem;
}

.aside-group {
display: flex;
flex-direction: column;
}
.aside-group > :nth-child(2) {
margin-top: 0;
}
.aside-group > :last-child {
margin-bottom: 0;
}
.aside-group > aside {
order: 1000;
margin-top: 1rem;
}

aside {
position: static;
width: 100%;
}
}

@media screen and (max-width: 1000px) {
pre, .diagram svg {
margin-left: 0;
width: 100%;
}
}
11 changes: 4 additions & 7 deletions blog/_template.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }} | purplesyringa's blog</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../../home.css">
<style>
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css" screen and (prefers-color-scheme: dark);
@import "https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/base16/atelier-cave-light.min.css" screen and (prefers-color-scheme: light);
</style>
<link rel="stylesheet" type="text/css" href="../../all.css">
<link rel="stylesheet" type="text/css" href="../../blog.css">
</head>
<body>
<header>
<div class="viewport-container">
<div class="media">
<a href="https://github.com/purplesyringa"><i class="nf nf-fa-github"></i></a>
<a href="https://github.com/purplesyringa"><img src="../../images/github-mark-white.svg"></a>
</div>
<h1><a href="/">purplesyringa</a></h1>
</div>
</header>

<section>
<div class="viewport-container blogpost">
<div class="viewport-container">
<h2>{{ title }}</h2>
<time>{{ time }}</time>

Expand Down
3 changes: 1 addition & 2 deletions blog/recovering-garbled-bitcoin-addresses/index.html

Large diffs are not rendered by default.

Loading

0 comments on commit c097d9f

Please sign in to comment.