diff --git a/index.html b/index.html index a96a0e1..aab5556 100755 --- a/index.html +++ b/index.html @@ -9,6 +9,15 @@ + + +

Whether it be IMDB’s top 250 movies or the FBI’s most wanted, lists are everywhere on the web and you are going to need one eventually in your webpages. +Luckily, with HTML there are a couple of different types of lists at your disposal.

diff --git a/resources/css/index.css b/resources/css/index.css index 71e7133..870cb09 100755 --- a/resources/css/index.css +++ b/resources/css/index.css @@ -1,170 +1,11 @@ -/* style.css (minimal baseline) */ -:root { - --bg:#0e0e10; --text:#eaeaea; --accent:#ffd700; -} - -* { - box-sizing: border-box; -} - -html, body { - - margin:0; - padding:0; -} - body { - background: var(--bg); - color: var(--text); - font-family: system-ui, -apple-system, "Iceland", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - line-height: 1.5; -} -header { - text-align:center; - padding:2rem 1rem; -} - -h1, h3 { - font-family: "Iceland", sans-serif; - letter-spacing:.5px; -} - -nav ul { - list-style:none; - display:flex; - gap:1rem; - justify-content:center; - padding:0; margin:0 0 2rem; -} - -nav a, nav li { - text-decoration:none; - color:#ddd; - padding:.4rem .6rem; - border-radius:.5rem; -} - -nav a:hover, nav li:hover { - background:rgba(255,255,255,.08); -} - -main { -max-width: 900px; -margin: 0 auto; -padding: 0 1rem 3rem; -} - -/* Normalize nav list look */ - -.site-nav ul { -list-style: none; margin: 0; padding: 0; -display: flex; -gap: 1rem; -justify-content: center; -} +background-color: #F5F5F5 +font-family: Iceland; +line-height: 1.0 -.site-nav a { -text-decoration: none; -} - -.site-nav a:focus-visible { -outline: 2px solid currentColor; -outline-offset: 2px; -} - -/* ===== Header & title (pop from nav) ===== */ -.site-header img { -display:block; -width:100%; -height:auto -} - -.site-title { -opacity: 1; -transform: none; -} - -/* 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 { -width:54% - } -} -@keyframes underlineDelay{} /* just to offset ::after timing */ - -/* ===== Content container ===== */ - -.content { -max-width:1000px; -margin:2rem auto 4rem; -padding:0 1rem -} - -/* ===== Responsive ===== */ - -@media (max-width:800px){ - :root { ---nav-h:56px - } -} - .site-title::after { -height:2px -} - -@media (max-width: 480px) { - :root{--nav-h:52px -} - .site-title { -font-size:clamp(2rem,9vw,3.2rem) -} - .site-title::after { -width:60% } -/* Respect reduced motion */ -@media (prefers-reduced-motion:reduce){ -.site-title,.site-title::after { -animation:none !important; -opacity:1 !important; -transform:none !important - } -} -