diff --git a/content/demo/index.md b/content/demo/index.md
index 0d7e5b5..e567fbb 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -370,9 +370,11 @@ You know what? I'm gonna say some very important stuff, so im
## Progress bar
```html
+
```
+
## Sample Output
diff --git a/sass/_article.scss b/sass/_article.scss
index 5d6897b..c91add6 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -1,6 +1,7 @@
#banner {
$mask: linear-gradient(black, transparent);
-webkit-mask-image: $mask;
+ -webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
diff --git a/sass/_code.scss b/sass/_code.scss
index ea83e11..bb16ad1 100644
--- a/sass/_code.scss
+++ b/sass/_code.scss
@@ -31,6 +31,8 @@ pre {
// The line number cells
table td:nth-of-type(1) {
+ -webkit-user-select: none;
+ cursor: default;
user-select: none;
text-align: center;
}
diff --git a/sass/_containers.scss b/sass/_containers.scss
index 68d9f6d..5640edc 100644
--- a/sass/_containers.scss
+++ b/sass/_containers.scss
@@ -67,9 +67,4 @@
height: 1rem;
}
}
-
- pre>code {
- display: inline-block;
- margin-inline-end: 3rem;
- }
}
diff --git a/sass/_typography.scss b/sass/_typography.scss
index 86012a4..bd121df 100644
--- a/sass/_typography.scss
+++ b/sass/_typography.scss
@@ -45,8 +45,8 @@ figcaption {
blockquote {
margin: 0;
- border-inline-start: 0.25rem solid var(--primary-color);
border-radius: 0.25rem;
+ border-inline-start: 0.25rem solid var(--primary-color);
padding: 0 0.75rem;
color: var(--fg-muted-5);
}
@@ -100,17 +100,37 @@ u {
}
progress {
+ -webkit-appearance: none;
+ appearance: none;
+ box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
background-color: var(--fg-muted-1);
+ width: 100%;
height: 0.5rem;
color: var(--primary-color);
- &::-webkit-progress-bar,
+ &:indeterminate {
+ background-color: var(--fg-muted-1);
+ }
+
+ &:indeterminate::-moz-progress-bar {
+ background-color: transparent;
+ }
+
+ &::-webkit-progress-bar {
+ background-color: transparent;
+ }
+
&::-moz-progress-bar {
border-radius: 999px;
background-color: var(--primary-color);
}
+
+ &::-webkit-progress-value {
+ border-radius: 999px;
+ background-color: var(--primary-color);
+ }
}
kbd {