reduce dot visibility behind text elements in light theme

snapsnapturtle · Nov 10, 2023 · c103967 · c103967
1 parent 7806c7e
commit c103967
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -64,7 +64,7 @@
             </div>
         </nav>
         <br />
-        <p role="presentation">$ <span class="cursor cursor--blinking">&nbsp;</span></p>
+        <div role="presentation">$ <span class="cursor cursor--blinking">&nbsp;</span></div>
     </body>
     <script defer type="module" src="./scripts/vercel-analytics.ts"></script>
     <script defer type="module" src="./scripts/vercel-speed-insights.ts"></script>

diff --git a/styles/common.css b/styles/common.css
@@ -17,8 +17,10 @@ body {
     font-family: var(--font-family);
 }
 
-p {
+p, nav {
     margin: 1.5rem 0;
+    background: var(--background-paragraph);
+    border-radius: 0.25rem;
 }
 
 a,

diff --git a/styles/home.css b/styles/home.css
@@ -1,7 +1,6 @@
 @import url('./common.css');
 
 .contact {
-    margin-top: 1.5rem;
     display: grid;
     grid-gap: 0.5rem 0;
     grid-template: repeat(4, auto) / auto;

diff --git a/styles/variables.css b/styles/variables.css
@@ -1,5 +1,6 @@
 :root {
     --background: rgba(10, 2, 25, 1);
+    --background-paragraph: none;
     --text-primary: rgba(255, 255, 255, 0.8);
     --text-link: rgba(255, 255, 255, 1);
     --text-secondary: rgba(255, 255, 255, 0.4);
@@ -22,6 +23,7 @@
 @media (prefers-color-scheme: light) {
     :root {
         --background: rgb(255, 255, 255) radial-gradient(rgba(0, 0, 0, 0.075) 1px, transparent 0px);
+        --background-paragraph: rgba(255, 255, 255, 0.5);
         --text-primary: rgba(0, 0, 0, 0.8);
         --text-link: rgb(255, 79, 0);
         --text-secondary: rgba(255, 255, 255, 0.4);