From 23ebc8ae7f0c90fef67651a05a0febc713de0f27 Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Tue, 3 Feb 2026 10:44:52 -0800 Subject: [PATCH] bunch of styling and filelr content as well as nav generation --- assets/scripts/nav.js | 87 ++++++++++++++++++++++++++++++++ assets/styles/main.css | 84 +++++++++++++++++++++++++------ assets/styles/nav.css | 110 ++++++++++++++++++++++++++++++++++++++--- attribution/index.html | 37 ++++++++++++++ index.html | 99 ++++++++++++++++++++----------------- palette/index.html | 8 +-- 6 files changed, 355 insertions(+), 70 deletions(-) create mode 100644 assets/scripts/nav.js create mode 100644 attribution/index.html diff --git a/assets/scripts/nav.js b/assets/scripts/nav.js new file mode 100644 index 0000000..12bbdab --- /dev/null +++ b/assets/scripts/nav.js @@ -0,0 +1,87 @@ +// Top nav +const skipLink = { + href: "#main", + title: "skip to main content", + text: "skip to main content" +} + +const homeLink = { + href: "/", + title: "home page", + text: "Firstname Lastname" +} + +const navLinks = [ + { + href: "/one", + title: "dummy link one", + text: "nav one" + }, + { + href: "/two", + title: "dummy link two", + text: "nav two" + }, + { + href: "/three", + title: "dummy link three", + text: "nav three" + } +] + +const createLink = function(link, currentPath) { + const a = document.createElement("a"); + a.href = link.href; + a.title = link.title; + a.innerHTML = link.text; + + if (link.href === currentPath) a.classList.add("current-page"); + + return a; +} + +const createSkipLink = function(path) { + const a = createLink(skipLink, path); + a.id = "skip"; + return a; +} + +const createTitle = function(path) { + const h2 = document.createElement("h2"); + h2.append(createLink(homeLink, path)); + return h2; +} + +const createNavLink = function(link) { + const li = document.createElement("li"); + li.append(createLink(link)); + return li; +} + +const populateNav = function() { + nav = document.getElementById("top-nav"); + let path = window.location.pathname; + + nav.append(createSkipLink(path)); + nav.append(createTitle(path)); + + const ul = document.createElement("ul"); + for (const link of navLinks) ul.append(createNavLink(link, path)); + nav.append(ul); +} + +populateNav(); + +// Footer +const footerHTML = ` +

2026

+

Firstname Lastname

+

attribution

+` + +const populateFooter = function() { + const footer = document.getElementById("footer"); + footer.innerHTML = footerHTML; +} + +populateFooter(); diff --git a/assets/styles/main.css b/assets/styles/main.css index 929477a..ec88ef0 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -28,7 +28,13 @@ body { background-color: var(--color-bg); font-family: Verdana, sans-serif; width: 65%; - margin: 0 auto 4rem; + margin: 0 auto; +} + +@media (max-width: 1050px) { + body { + width: 85%; + } } @media (max-width: 650px) { @@ -44,7 +50,7 @@ h4, h5, h6 { line-height: 2.5; - color: var(--color-pink); + color: var(--color-purple); font-family: Courier, monospace; } @@ -80,30 +86,78 @@ h3 { img { width: 100%; + padding: .5rem 0; } -p { - line-height: 1.3; +p, +ul { + line-height: 1.5; } @media (max-width: 650px) { - p { - font-size: .8rem; + p, + ul { + font-size: .85rem; } } +ul { + margin: .5rem 0 .5rem 2rem; +} + +li { + list-style: square; +} + +li::marker { + color: var(--color-orange); +} + a { - color: var(--color-purple); + color: var(--color-pink); + transition: text-decoration-thickness .5s; + text-decoration-thickness: .15rem; + text-decoration-color: var(--color-orange); + outline-offset: .05rem; + border-radius: .1rem; } -.float-left { - float: left; - width: 45%; - padding: .65rem 1rem .65rem 0; +@media (any-hover: hover) { + a:hover { + text-decoration-thickness: .25rem; + } } -.float-right { - float: right; - width: 45%; - padding: .65rem 0 .65rem 1rem; +a:focus-visible { + outline: solid .15rem var(--color-orange); + text-decoration: none; +} + +@media (max-width: 650px) { + a { + text-decoration-thickness: .12rem; + outline-offset: .04rem; + } + + @media (any-hover: hover) { + a:hover { + text-decoration-thickness: .18rem; + } + } + + a:focus-visible { + outline-width: .12rem; + } +} + +.two-col { + display: grid; + grid-template-columns: auto auto; + gap: 1rem; +} + +@media (max-width: 650px) { + .two-col { + grid-template-columns: auto; + } } diff --git a/assets/styles/nav.css b/assets/styles/nav.css index 65c026b..f4734ab 100644 --- a/assets/styles/nav.css +++ b/assets/styles/nav.css @@ -1,25 +1,93 @@ nav { - display: flex; - flex-flow: row wrap; - justify-content: space-between; + display: grid; + grid-template-columns: auto auto; align-items: center; margin: 1rem auto; } nav a { + font-family: Courier, monospace; text-decoration: none; + border-radius: 0 1rem 0 1rem; + outline-offset: .2rem; + padding: 0 .2rem; + line-height: 1; + font-weight: bold; + color: var(--color-purple); +} + +nav a.current-page::before { + content: "> " / ""; + color: var(--color-orange); +} + +nav a.current-page::after { + content: " <" / ""; + color: var(--color-orange); +} + +nav a:focus-visible { + outline: solid .2rem var(--color-orange); +} + +#skip { + left: -999px; + position: absolute; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + z-index: -99; + background-color: var(--color-bg); + border-radius: 0 .65rem 0 .65rem; + font-weight: bold; + font-size: 1.15rem; +} + +#skip:focus-visible { + left: 10rem; + top: 1.5rem; + width: auto; + height: auto; + overflow: auto; + z-index: 999; +} + +@media (max-width: 1050px) { + #skip:focus-visible { + left: 2rem; + } +} + +@media (max-width: 650px) { + #skip:focus-visible { + left: 1rem; + } } nav h2 { display: inline; margin: 0; font-size: 1.8rem; + line-height: 1; +} + +@media (any-hover: hover) { + nav h2:hover { + text-decoration: underline .25rem var(--color-orange); + } } @media (max-width: 650px) { nav h2 { font-size: 1.5rem; } + + @media (any-hover: hover) { + nav h2:hover { + text-decoration: underline .2rem var(--color-orange); + } + } } nav ul { @@ -32,17 +100,45 @@ nav ul { nav li { list-style: none; + padding: .3rem 0; } nav li a { - display: block; - padding: .3rem 0; - font-family: Courier, monospace; font-size: 1.3rem; } +@media (any-hover: hover) { + nav li a:hover { + text-decoration: underline .2rem var(--color-orange); + } +} + @media (max-width: 650px) { nav li a { - font-size: 1.2rem; + font-size: 1.18rem; + } + + @media (any-hover: hover) { + nav li a:hover { + text-decoration: underline .17rem var(--color-orange); + } + } +} + +footer { + display: flex; + gap: .5rem; + justify-content: space-around; + margin: 4rem 0 1rem;; + border-top: solid .5rem var(--color-orange); + padding-top: 1rem; + font-size: .85rem; +} + +@media (max-width: 650px) { + footer { + font-size: .7rem; + flex-flow: column; + align-items: center; } } diff --git a/attribution/index.html b/attribution/index.html new file mode 100644 index 0000000..a47bb29 --- /dev/null +++ b/attribution/index.html @@ -0,0 +1,37 @@ + + + + {{title}} + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

Attribution

+

Built by Lee Cattarin for Firstname Lastname.

+
+ + + diff --git a/index.html b/index.html index fd7b313..a711219 100644 --- a/index.html +++ b/index.html @@ -16,64 +16,72 @@ + + +
- +

header level 1

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Fusce libero neque, sollicitudin id scelerisque in, congue ut leo. - Morbi vehicula sem quis mauris lobortis tempor quis ac eros. - Nam in elit eu quam pulvinar cursus id ut magna. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; - Pellentesque convallis nec erat blandit eleifend. - Nam tincidunt, quam a mollis tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla. - In convallis enim vel luctus lobortis. - Praesent et tincidunt dolor. -

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce libero neque, sollicitudin id scelerisque in, congue ut leo. + Morbi vehicula sem quis mauris lobortis tempor quis ac eros. + Nam in elit eu quam pulvinar cursus id ut magna. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; + Pellentesque convallis nec erat blandit eleifend. + Nam tincidunt, quam a mollis tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla. + In convallis enim vel luctus lobortis. + Praesent et tincidunt dolor. +

+
    +
  • Duis in dui ut tortor ultricies pretium
    • +
  • Aliquam feugiat bibendum tellus vel bibendum
    • +
  • Donec eget mi sit amet lectus ultrices vulputate
    • +
  • Fusce sodales arcu non diam porttitor interdum
    • +
  • Vestibulum sit amet suscipit ex
    • +
  • Cras consequat metus justo, tempus ullamcorper nibh tempor sit amet
    • +
  • Duis in urna neque
    • +
  • Cras tempus malesuada orci
    • +
  • Pellentesque diam magna, mattis non auctor eget, finibus non neque
    • +
+
+

header level 2

- -

Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus. - Vestibulum eget justo in ante feugiat varius. - Donec efficitur nulla non mollis facilisis. - Duis vitae feugiat tortor. - Morbi ac tempor leo. - Nunc pharetra est et dui malesuada, nec auctor nisi pulvinar. - In hac habitasse platea dictumst. - Donec magna velit, consequat non dignissim at, commodo a enim. - Duis accumsan nunc at tellus vulputate consequat. - Nam nec lectus eget nisi venenatis condimentum sed ac massa. - Interdum et malesuada fames ac ante ipsum primis in faucibus. - Integer sem tortor, blandit non tellus ut, elementum cursus libero. - Duis fringilla aliquet justo eu interdum. - Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor. - Vestibulum vitae euismod metus, non varius quam. -

+
+

+ Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus. + Vestibulum eget justo in ante feugiat varius. + Donec efficitur nulla non mollis facilisis. + Duis vitae feugiat tortor. + Morbi ac tempor leo. + Nunc pharetra est et dui malesuada, nec auctor nisi pulvinar. + In hac habitasse platea dictumst. + Donec magna velit, consequat non dignissim at, commodo a enim. + Duis accumsan nunc at tellus vulputate consequat. + Nam nec lectus eget nisi venenatis condimentum sed ac massa. + Interdum et malesuada fames ac ante ipsum primis in faucibus. + Integer sem tortor, blandit non tellus ut, elementum cursus libero. + Duis fringilla aliquet justo eu interdum. + Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor. + Vestibulum vitae euismod metus, non varius quam. +

+ +

header level 3

-

Vestibulum quis rhoncus risus, sit amet volutpat velit. +

+ Vestibulum quis rhoncus risus, sit amet volutpat velit. Cras finibus, leo vitae feugiat faucibus, sem nulla hendrerit est, elementum aliquam ligula tellus eu risus. Cras tincidunt mauris ut purus vulputate aliquam ac sit amet lectus. Donec maximus pretium ligula, in ultricies enim rutrum sed. @@ -90,5 +98,6 @@ Proin vitae erat a nisi lobortis gravida ac vel est.

+ diff --git a/palette/index.html b/palette/index.html index 2488a07..59209ed 100644 --- a/palette/index.html +++ b/palette/index.html @@ -16,6 +16,9 @@ + + + @@ -23,9 +26,7 @@
- +

Site palette

@@ -38,5 +39,6 @@

#ba4f1d

#e88a5c

+