Better titles

Author: crnacura

css/base.css

@@ -9,7 +9,7 @@
 	--page-padding: 2rem;
 	--color-text: #000;
 	--color-bg: #fff;
-	--color-link: #000;
+	--color-link: rgba(0,0,0,0.8);
 	--color-link-hover: #000;
 	--color-list-item: #000;
 	--color-title: #000;
@@ -146,15 +146,15 @@ a:focus-visible {
 	display: grid;
 	grid-row-gap: 1rem;
 	grid-column-gap: 2rem;
+	align-items: start;
 	pointer-events: none;
 	justify-items: start;
 	grid-template-columns: auto auto;
 	grid-template-areas: 'title' 'archive' 'back' 'github' 'sponsor' 'demos';
 }
 
 .frame #cdawrap {
-  justify-self: end;
-  text-align: right;
+	justify-self: start;
 }
 
 .frame a {
@@ -355,6 +355,9 @@ a:focus-visible {
 	.frame__demos {
 		justify-self: end;
 	}
+	.frame #cdawrap {
+	  text-align: right;
+	}
 }
 
 @media screen and (min-width: 73em) {

index.html

@@ -31,7 +31,7 @@ <h1 class="frame__title"><a class="hover-effect hover-effect--cursor-square" hre
         </nav>
       </header>
       <section class="content">
-        <h2 class="content__title">Client Projects 2043</h2>
+        <h2 class="content__title">Volcanic Eruptions</h2>
         <ul class="list list--box">
             <li class="list__item">
               <span class="list__item-col hover-effect hover-effect--cursor-square">Mount Vespera</span>

index2.html

@@ -31,7 +31,7 @@ <h1 class="frame__title hover-effect hover-effect--bg"><a class="hover-effect ho
         </nav>
       </header>
       <section class="content">
-        <h2 class="content__title">Client Projects 2043</h2>
+        <h2 class="content__title">Volcanic Eruptions</h2>
         <ul class="list list--bg list--bg-west">
             <li class="list__item">
               <span class="list__item-col hover-effect hover-effect--bg">Mount Vespera</span>