feat: Contrast and legibility improvements

content/demo/index.md

@@ -20,19 +20,19 @@ There should be whitespace between paragraphs.
 
 There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.
 
-# Header 1
+# Heading 1
 
 > Yes, H1 has ultra-bold style and a dot at the end. You probably shouldn't use it for anything other than page header :)
 
 This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
 
-## Header 2
+## Heading 2
 
 > This is a blockquote following a header.
 >
 > > When something is important enough, you do it even if the odds are not in your favor.
 
-### Header 3
+### Heading 3
 
 ```js
 // Javascript code with syntax highlighting.
@@ -49,19 +49,19 @@ GitHubPages::Dependencies.gems.each do |gem, version|
 end
 ```
 
-#### Header 4
+#### Heading 4
 
 - This is an unordered list following a header.
 - This is an unordered list following a header.
 - This is an unordered list following a header.
 
-##### Header 5
+##### Heading 5
 
 1.  This is an ordered list following a header.
 2.  This is an ordered list following a header.
 3.  This is an ordered list following a header.
 
-###### Header 6
+###### Heading 6
 
 | head1        | head two          | three |
 | :----------- | :---------------- | :---- |

sass/_main.scss

@@ -101,11 +101,6 @@ h1 {
   a {
     font-weight: 900;
   }
-
-  &::after {
-    content: ".";
-    color: var(--primary-color);
-  }
 }
 
 h2 {
@@ -146,7 +141,7 @@ strong {
 }
 
 small {
-  color: var(--fg50);
+  // color: var(--fg50);
   font-size: 0.8rem;
 }
 
@@ -167,16 +162,17 @@ dl {
 }
 
 hr {
-  border: 0.125rem solid var(--fg05);
+  border: 0.125rem solid var(--fg50);
   margin: 3rem auto;
   width: 40%;
+  border-radius: 9999px;
 }
 
 blockquote {
-  padding: 0 1rem;
-  margin-left: 0;
-  color: var(--fg50);
+  padding: 0 0.75em;
   border-left: 0.25rem solid var(--primary-color);
+  margin: 0;
+  border-radius: 2.5px;
 
   > :first-child {
     margin-top: 0;
@@ -186,10 +182,10 @@ blockquote {
     margin-bottom: 0;
   }
 
-  // make border slightly transparent for nested blockquote
-  > blockquote {
-    border-left: 0.3rem solid var(--primary-color-alpha);
-  }
+  // // make border slightly transparent for nested blockquote
+  // > blockquote {
+  //   border-left: 0.3rem solid var(--primary-color-alpha);
+  // }
 }
 
 abbr {
@@ -307,7 +303,7 @@ table {
   th,
   td {
     padding: 0.5rem 1rem;
-    border: 1px solid var(--fg05);
+    border: 1px solid var(--fg50);
   }
 }
 
@@ -360,14 +356,14 @@ img {
 .nav {
   overflow: auto;
   width: 80vw;
-  max-width: var(--content-width);
+  // max-width: var(--content-width);
   margin: 1rem auto;
   box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   border-radius: var(--rounded-corner-big);
   background-color: var(--nav-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  position: sticky;
+  // position: sticky;
   top: 1rem;
   z-index: 1;
 
@@ -488,7 +484,8 @@ img {
   pre {
     color: var(--primary-color);
     padding: 1rem 1rem;
-    text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
+    text-shadow: var(--primary-color-alpha) 0 0 4px,
+      var(--primary-color) 0 0 12px;
     // unset some <pre> stuff
     background-color: unset;
     box-shadow: unset;
@@ -621,3 +618,12 @@ img {
     }
   }
 }
+
+.heading {
+  text-align: center;
+  text-decoration: underline;
+  // &::after {
+  //   content: ".";
+  //   color: var(--primary-color);
+  // }
+}

templates/blog.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>{{ page.title }}</h1>
+<h1 class="heading">{{ page.title }}</h1>
 
 {%- if page.date %}
   <small>