diff --git a/index.html b/index.html
index e4e5118..a96a0e1 100755
--- a/index.html
+++ b/index.html
@@ -1,47 +1,15 @@
-
+
+
-
-
-
-
-
-
-
-
-
-
+
+ Peter Baker
-
-
-
-
-
-
-
-
-
-
+
diff --git a/resources/css/index.css b/resources/css/index.css
index b1d8fb6..71e7133 100755
--- a/resources/css/index.css
+++ b/resources/css/index.css
@@ -83,49 +83,50 @@ height:auto
}
.site-title {
-font-family:"Iceland",sans-serif;
-font-size:clamp(2.4rem,6vw,6rem);
-line-height:1;
-margin:.75rem 0 0;
-color: #FFD700;
-text-align:center;
-text-shadow:0 4px 12px rgba(0,0,0,.6);
-opacity:0;
-transform:translateY(calc(-1*var(--nav-h))) scale(.98);
-animation:popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
-underlineDelay 1ms linear 900ms forwards;
+opacity: 1;
+transform: none;
}
-.site-title::after{
- content:""; display:block; height:3px; width:0%;
- margin:.6rem auto 0;
- background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b);
- border-radius:999px;
- animation:underlineGrow 700ms ease-out 1200ms forwards;
+/* Animate only when motion is allowed */
+@media (prefers-reduced-motion: no-preference) {
+ .site-title {
+ opacity: 0;
+ transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
+ animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards;
+ }
+ .site-title::after {
+ content: "";
+ display: block;
+ height: 3px;
+ width: 0;
+ margin: .6rem auto 0;
+ animation: underlineGrow 700ms ease-out 1200ms forwards;
+ }
}
-
/* ===== Keyframes ===== */
@keyframes popFromNav {
0% {
opacity:0;
transform:translateY(calc(-1*var(--nav-h))) scale(.98)
+ }
}
+
60% {
opacity:1;
transform:translateY(-8px) scale(1.02)
}
+
100% {
opacity:1;
transform:translateY(0) scale(1)
}
-@keyframes underlineGrow{
-to
-{
+@keyframes underlineGrow {
+to {
width:54%
+ }
}
-
@keyframes underlineDelay{} /* just to offset ::after timing */
/* ===== Content container ===== */
@@ -141,6 +142,7 @@ padding:0 1rem
@media (max-width:800px){
:root {
--nav-h:56px
+ }
}
.site-title::after {
height:2px
@@ -163,5 +165,6 @@ width:60%
animation:none !important;
opacity:1 !important;
transform:none !important
+ }
}
-}
+