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

Add styling for more HTML tags

Browse Source 
Hope @gabs doesn't mind XD
This commit is contained in:
daudix
2024-07-05 04:11:14 +03:00
parent 3cead8e440
commit 164385b720
3 changed files with 140 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
sass/_typography.scss
View File

@ -56,14 +56,94 @@ blockquote {
}
}
mark {
mark,
del,
ins,
time,
samp,
q {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner-small);
background-color: var(--primary-color-alpha);
padding: 0.125rem 0.375rem;
}
mark {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
}
del {
background-color: var(--red-bg);
color: var(--red-fg);
text-decoration: line-through;
text-decoration-thickness: max(1px, 0.0625em);
}
ins {
background-color: var(--green-bg);
color: var(--green-fg);
text-decoration: underline;
text-decoration-thickness: max(1px, 0.0625em);
}
time {
background-color: var(--primary-color-alpha);
color: var(--primary-color);
font-weight: bold;
strong {
animation: clock-blink 1s infinite;
font-weight: bold;
@keyframes clock-blink {
from {
color: var(--primary-color);
}
25% {
color: var(--primary-color-alpha);
}
50% {
color: var(--primary-color);
}
}
}
}
samp {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
font-size: 0.875rem;
}
q {
background-color: var(--fg-muted-1);
color: var(--fg-muted-5);
font-style: italic;
}
u {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: var(--red-fg);
text-decoration-thickness: max(1px, 0.0625em);
}
progress {
border: none;
border-radius: 999px;
background-color: var(--fg-muted-1);
height: 0.5rem;
color: var(--primary-color);
&::-webkit-progress-bar,
&::-moz-progress-bar {
border-radius: 999px;
background-color: var(--primary-color);
}
}
kbd {
display: inline-block;
transition: var(--transition);