Grid styling

qut-dmrc · Nov 26, 2024 · fc50f8e · fc50f8e
1 parent 53fb4b1
commit fc50f8e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/404.html b/404.html
@@ -47,8 +47,10 @@ <h1>PAGE 1</h1>
         </ghp-navlink>
 
         <aside>
-          <h1>ABOUT</h1>
-          <p>A selection of project pages hosted by QUT's Digital Media Research Centre.</p>
+          <div>
+            <h1>ABOUT</h1>
+            <p>A selection of project pages hosted by QUT's Digital Media Research Centre.</p>
+          </div>
         </aside>
 
         <ghp-navlink>

diff --git a/core/main.css b/core/main.css
@@ -93,8 +93,8 @@
     grid-row: span 3;
     background-color: var(--background);
     color: white;
-    padding-block: 16px;
-    padding-inline: 20px;
+    /*padding-block: 16px;
+    padding-inline: 20px;*/
 
     -webkit-column-break-inside: avoid;
     column-break-inside: avoid;
@@ -110,12 +110,17 @@
 
   .grid-container {
 
-    a>* {
+    a > * {
       width: 100%;
       height: 100%;
       color: white;
     }
 
+    div {
+      padding-block: 16px;
+      padding-inline: 20px;
+    }
+
     > :not(aside,.active):hover {
       outline: 1px solid white;
       transform: translate(0.5rem, -0.5rem);

diff --git a/core/uses/anim.css b/core/uses/anim.css
@@ -19,19 +19,19 @@
   }
 
   ::view-transition-old(page-heading) {
-    animation: 0.5s 0.075s ease both main-exit;
+    animation: 0.4s 0.075s ease both main-exit;
   }
 
   ::view-transition-new(page-heading) {
-    animation: 0.5s 0.0s ease both main-enter;
+    animation: 0.4s 0.0s ease both main-enter;
   }
 
   ::view-transition-old(page-section) {
-    animation: 0.5s ease both main-exit;
+    animation: 0.4s ease both main-exit;
   }
 
   ::view-transition-new(page-section) {
-    animation: 0.5s 0.075s ease both main-enter;
+    animation: 0.4s 0.075s ease both main-enter;
   }
 
   @keyframes main-enter {

diff --git a/index.html b/index.html
@@ -47,11 +47,12 @@ <h1>PAGE 1</h1>
         </ghp-navlink>
 
         <aside>
-          <h1>ABOUT</h1>
-          <p>A selection of project pages hosted by QUT's Digital Media Research Centre.</p>
+          <div>
+            <h1>ABOUT</h1>
+            <p>A selection of project pages hosted by QUT's Digital Media Research Centre.</p>
+          </div>
         </aside>
 
-
         <ghp-navlink>
           <a href="./page2" aria-current="">
             <div>