hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Across the board style fixes and simplifications

Browse Source 
Plus bump to v3
This commit is contained in:
daudix
2024-06-18 03:19:37 +03:00
parent 58f4e9975e
commit 52e9cbeda0
22 changed files with 332 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
sass/_typography.scss
View File

@ -5,150 +5,150 @@ h3,
h4,
h5,
h6 {
text-wrap: balance;
margin: 3rem 0 1rem;
font-weight: lighter;
line-height: normal;
font-family: var(--font-antique);
letter-spacing: -0.05em;
text-wrap: balance;
margin: 3rem 0 1rem;
font-weight: lighter;
line-height: normal;
font-family: var(--font-antique);
letter-spacing: -0.05em;
}
h1 {
font-size: 2.5rem;
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
font-size: 1.5rem;
}
small {
color: var(--fg-muted-5);
font-size: 0.8rem;
color: var(--fg-muted-5);
font-size: 0.8rem;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
cursor: help;
text-decoration: underline dotted;
-webkit-text-decoration: underline dotted;
cursor: help;
text-decoration: underline dotted;
}
figcaption {
color: var(--fg-muted-4);
font-size: 0.8rem;
text-align: center;
color: var(--fg-muted-4);
font-size: 0.8rem;
text-align: center;
}
blockquote {
margin: 0;
border-left: 0.25rem solid var(--primary-color);
border-radius: 0.25rem;
padding: 0 0.75rem;
color: var(--fg-muted-5);
margin: 0;
border-left: 0.25rem solid var(--primary-color);
border-radius: 0.25rem;
padding: 0 0.75rem;
color: var(--fg-muted-5);
body[dir="rtl"] & {
border-right: 0.25rem solid var(--primary-color);
border-left: unset;
}
body[dir="rtl"] & {
border-right: 0.25rem solid var(--primary-color);
border-left: unset;
}
}
mark {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
padding: 0.125rem 0.375rem;
color: var(--primary-color);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
padding: 0.125rem 0.375rem;
color: var(--primary-color);
}
kbd {
display: inline-block;
transition: var(--transition);
cursor: pointer;
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2);
padding: 0.125rem 0.375rem;
font-size: 0.8rem;
line-height: normal;
display: inline-block;
transition: var(--transition);
cursor: pointer;
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
border-radius: var(--rounded-corner-small);
background-color: var(--fg-muted-2);
padding: 0.125rem 0.375rem;
font-size: 0.8rem;
line-height: normal;
// Small nice thingy, keys can be pressed!
&:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
background-color: var(--fg-muted-3);
}
// Small nice thingy, keys can be pressed!
&:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
background-color: var(--fg-muted-3);
}
}
a {
color: var(--primary-color);
font-weight: bold;
color: var(--primary-color);
font-weight: bold;
&:hover {
-webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
}
&:hover {
-webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
}
}
hr {
margin: 2rem auto;
border: none;
border-top: 3px double var(--fg-muted-2);
overflow: visible;
color: var(--fg-muted-4);
font-size: 1.5rem;
text-align: center;
margin: 2rem auto;
border: none;
border-top: 3px double var(--fg-muted-2);
overflow: visible;
color: var(--fg-muted-4);
font-size: 1.5rem;
text-align: center;
&::after {
position: relative;
top: -1.5rem;
background: var(--bg-color), var(--primary-color);
padding: 0 0.25rem;
content: "☙❧";
&::after {
position: relative;
top: -1.5rem;
background: var(--bg-color), var(--primary-color);
padding: 0 0.25rem;
content: "☙❧";
// An ugly hack to fix mirroring in rtl
body[dir="rtl"] & {
content: "❧☙";
}
}
// An ugly hack to fix mirroring in rtl
body[dir="rtl"] & {
content: "❧☙";
}
}
}
dt {
font-weight: bold;
font-weight: bold;
}
dd {
margin-bottom: 1rem;
margin-bottom: 1rem;
}
aside {
float: right;
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
padding: 1rem;
width: 30%;
float: right;
margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
padding: 1rem;
width: 30%;
body[dir="rtl"] & {
float: left;
}
body[dir="rtl"] & {
float: left;
}
@media only screen and (max-width: 720px) {
float: none;
margin-inline-start: 0;
width: 100%;
}
@media only screen and (max-width: 720px) {
float: none;
margin-inline-start: 0;
width: 100%;
}
}
details {
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
&>summary {
cursor: pointer;
}
&>summary {
cursor: pointer;
}
}