diff --git a/styles/elements/hero.css b/styles/elements/hero.css index d766a92..1d0ba65 100644 --- a/styles/elements/hero.css +++ b/styles/elements/hero.css @@ -1,12 +1,13 @@ #hero { grid-template-rows: 1fr auto auto; - height: 100vh; + min-height: 100vh; /* grid-template-rows: 1fr 50px auto auto; */ } #hero header { + padding-top: 50px; } #hero .mouse { } diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css index fc120bc..9788a4b 100644 --- a/styles/elements/mouses.css +++ b/styles/elements/mouses.css @@ -5,6 +5,7 @@ } .frames_container { display: grid; + grid-template-rows: repeat(4, 1fr); width: fit-content; /* border: 1px solid blue; @@ -15,35 +16,50 @@ pre.frame.hide { } pre.frame { position: relative; + margin: auto auto 0px 0px; + /* grid-column: 1; grid-row: 1; - margin: auto auto 0px 0px; - /* width: fit-content; height: fit-content; border: 1px solid red; - */ opacity: 0; + visibility: hidden; + */ + + display: grid; --tframes: 2s; animation-name: ascii_frame; animation-iteration-count: infinite; animation-duration: var(--tframes); - animation-timing-function: linear; + animation-timing-function: steps(3); animation-direction: normal; } +/* +*/ pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);} pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);} pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} @keyframes ascii_frame { +/* 0% {opacity: 1;} 25% {opacity: 1;} 25.1% {opacity: 0;} 100% {opacity: 0;} + + from {opacity: 1;} + to {opacity: 0;} + + from {visibility: visible;} + to {visibility: hidden;} +*/ + from {display: grid;} + to {display: none;} } #mouse_1 { diff --git a/styles/elements/nav.css b/styles/elements/nav.css index f361719..c23bd0f 100644 --- a/styles/elements/nav.css +++ b/styles/elements/nav.css @@ -3,7 +3,7 @@ nav { display: flex; flex-direction: row; justify-content: center; - position: sticky; + position: fixed; top: 0; background-color: #f6f6f6; z-index: 1;