From 9fb509fc85f16f5aebfb1dabe63e5f10b937aee1 Mon Sep 17 00:00:00 2001 From: Cyper Date: Fri, 18 Jul 2025 02:25:11 -0400 Subject: [PATCH 1/3] Progress commit --- public/css/home.css | 1 - public/css/style.css | 35 +++++++++++++++++++++++++++++++---- src/_data/metadata.js | 2 +- src/_includes/layout.html | 26 ++++++++++++++++---------- 4 files changed, 48 insertions(+), 16 deletions(-) diff --git a/public/css/home.css b/public/css/home.css index 17182c3..b84efa6 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -88,7 +88,6 @@ main { display: flex; flex-direction: column; - min-height: calc(100% - var(--navbar-height) - var(--footer-height)); } main > * { padding: 3rem; diff --git a/public/css/style.css b/public/css/style.css index e34ffbb..af0d0fc 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,6 +1,5 @@ :root { --navbar-height: 96px; - --footer-height: 24px; --teal: 162, 223, 203; --black: 25, 23, 30; @@ -43,7 +42,6 @@ header { footer { background-color: var(--footer-color); border-top: var(--borders); - height: var(--footer-height); } .color-teal { @@ -96,9 +94,14 @@ nav { padding: 0 1rem; } -.nav-socials > a > svg { - padding: 0.5rem; +.nav-socials > a > ion-icon { + color: rgba(var(--lightblue), .86); + background-color: rgba(var(--brown), .86); + border-radius: 100%; border: var(--borders); + box-sizing: content-box; + padding: 0.5rem; + margin: 1rem 0.5rem; } .flex-adaptive { @@ -109,6 +112,21 @@ nav { flex: 1; } +footer { + padding: 3rem 1.5rem; +} +footer h3 { + font-size: 2rem; +} +footer > div { + display: flex; + flex-direction: column; + width: 100%; +} +footer > div > * { + width: 50%; +} + /* -xs */ @media (min-width: 576px) { .container { @@ -129,6 +147,15 @@ nav { .flex-adaptive { flex-direction: row; } + footer > div { + flex-direction: row; + } + footer > div > :first-child { + text-align: left; + } + footer > div > :last-child { + text-align: right; + } } /* -lg */ @media (min-width: 1200px) { diff --git a/src/_data/metadata.js b/src/_data/metadata.js index 5eddb50..84494de 100644 --- a/src/_data/metadata.js +++ b/src/_data/metadata.js @@ -11,7 +11,7 @@ export default { url: "https://cyper.cc" }, - title: "Cy by Side!", + title: "Cy-by-Side", url: "https://cy.cyper.cc/", language: "en", description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.", diff --git a/src/_includes/layout.html b/src/_includes/layout.html index 14d590c..4ec37ac 100644 --- a/src/_includes/layout.html +++ b/src/_includes/layout.html @@ -30,11 +30,6 @@
  • About
    • -
    - - - -
    @@ -97,13 +92,24 @@
    - - + + \ No newline at end of file From 705dca45b561803a8baae76fc7ddcfafb9e4d7aa Mon Sep 17 00:00:00 2001 From: Cyper Date: Sat, 19 Jul 2025 01:34:46 -0400 Subject: [PATCH 2/3] Finished layout for footer --- public/css/home.css | 7 +- public/css/style.css | 131 ++++++++++++++++++++++++++++++++------ src/_includes/layout.html | 49 +++++++++++--- 3 files changed, 157 insertions(+), 30 deletions(-) diff --git a/public/css/home.css b/public/css/home.css index b84efa6..0765568 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -71,7 +71,6 @@ justify-content: center; position: relative; } - .diamond::after { content: ""; position: absolute; @@ -125,7 +124,7 @@ main > :last-child { } .featured > h1, .about > h1 { - font-size: 3.25rem; + font-size: 2.5rem; font-weight: 400; color: rgba(var(--black), 0.86); } @@ -209,10 +208,10 @@ main > :last-child { padding: 0 2rem; } .home-text h1 { - font-size: 4rem; + font-size: 3rem; } .featured > h1 { - font-size: 4rem; + font-size: 3rem; } .featured > div { flex-direction: row; diff --git a/public/css/style.css b/public/css/style.css index af0d0fc..c8e327e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -70,38 +70,60 @@ nav { align-items: center; justify-content: space-between; } - +nav > * { + width: 33.33%; +} .nav-logo > img { width: 64px; height: 64px; } - .nav-title { - display: flex; align-items: center; +} +.nav-hyperlinks, .nav-title { + display: flex; flex-direction: column; } -.nav-title > ul { +.nav-hyperlinks { + align-items: end; +} +.nav-hyperlinks > ul { list-style: none; margin: 0.5rem 0; padding: 0; } -.nav-title > ul > li { +.nav-hyperlinks > ul > li { display: inline; float: left; } -.nav-title > ul > li > a { +.nav-hyperlinks > ul > li > a { padding: 0 1rem; } +.nav-hyperlinks a { + display: flex; + align-items: center; + align-content: center; + text-decoration: none; + color: rgba(var(--black), .52); +} +.nav-hyperlinks a:hover { + color: rgba(var(--black), .86); +} +.nav-hyperlinks ion-icon { + font-size: 28px; +} -.nav-socials > a > ion-icon { - color: rgba(var(--lightblue), .86); - background-color: rgba(var(--brown), .86); - border-radius: 100%; - border: var(--borders); - box-sizing: content-box; - padding: 0.5rem; - margin: 1rem 0.5rem; +.nav-hyperlinks a span { + display: inline-block; + overflow: hidden; + white-space: nowrap; + max-width: 0; + transition: max-width 0.25s linear; + margin-left: 0.25rem; +} + +.nav-hyperlinks a:hover span { + max-width: 100px; } .flex-adaptive { @@ -114,17 +136,81 @@ nav { footer { padding: 3rem 1.5rem; + color: rgba(var(--black), .86); +} +footer a { + text-decoration: none; + color: rgba(var(--black), .52); +} +footer a:hover { + color: rgba(var(--black), .86); } footer h3 { font-size: 2rem; } +footer h4 { + font-size: 1.25rem; + font-weight: 400; + margin-bottom: 1rem; +} +footer p { + margin: 0 0 0.5rem 0; + font-size: 0.85rem; + color: rgba(var(--black), .52); +} footer > div { display: flex; flex-direction: column; + justify-content: space-around; width: 100%; } footer > div > * { - width: 50%; + width: 100%; + text-align: center; +} +footer > div > :last-child { + margin-top: 1rem; +} +footer ul { + width: 100%; + list-style: none; + padding: 0; + margin: 0; +} +footer ul li { + margin: 0.5rem 0; +} +footer ul li:first-child { + margin-top: 0; +} +footer ul li:last-child { + margin-bottom: 0; +} +.footer-socials > a > ion-icon { + color: rgba(var(--lightblue), .86); + background-color: rgba(var(--brown), .86); + border-radius: 100%; + border: var(--borders); + box-sizing: content-box; + padding: 0.5rem; + margin: 0 0.5rem; +} +.footer-socials > a:first-child > ion-icon { + margin-left: 0; +} +.footer-socials > a:last-child > ion-icon { + margin-right: 0; +} +.footer-links { + display: flex; + text-align: center; + margin: 1rem 0 0 0; +} +.footer-links > * { + flex-grow: 1; +} +.footer-links > :last-child { + margin-left: rem; } /* -xs */ @@ -147,14 +233,23 @@ footer > div > * { .flex-adaptive { flex-direction: row; } + footer ul { + width: fit-content; + } footer > div { flex-direction: row; } - footer > div > :first-child { - text-align: left; + footer > div > * { + width: fit-content; + } + footer > div > *:first-child { + text-align: start; } footer > div > :last-child { - text-align: right; + margin-top: 0; + } + .footer-links { + text-align: start; } } /* -lg */ diff --git a/src/_includes/layout.html b/src/_includes/layout.html index 4ec37ac..6b197c6 100644 --- a/src/_includes/layout.html +++ b/src/_includes/layout.html @@ -24,10 +24,27 @@

    {{ metadata.title }}

    +
    +
    @@ -92,20 +109,36 @@
    +
    +

    Cyper Catalog

    +
    +
    +

    Websites

    + +
    +
    +

    Consumables

    + +
    +
    +

    {{ metadata.title }}

    -

    Connect with me!

    +

    by {{ metadata.author.name }}

    +

    Connect with me!

    -
    +
    -
    - test -
    From 6f56318376bdd001ad8634ca584f2e6bcf931667 Mon Sep 17 00:00:00 2001 From: Cyper Date: Sat, 19 Jul 2025 02:20:30 -0400 Subject: [PATCH 3/3] Finished layout for mobile --- public/css/style.css | 31 ++++++++++++++++++++++++++++++- src/_includes/layout.html | 7 ++++++- 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index c8e327e..467f452 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -70,9 +70,22 @@ nav { align-items: center; justify-content: space-between; } +nav > div:first-child { + margin-left: 1.25rem; +} +nav > div:last-child { + margin-right: 1rem; +} nav > * { width: 33.33%; } +nav .hamburger { + border: none; + background-color: transparent; +} +nav .hamburger ion-icon { + margin-top: 0.15rem; +} .nav-logo > img { width: 64px; height: 64px; @@ -112,6 +125,12 @@ nav > * { .nav-hyperlinks ion-icon { font-size: 28px; } +.nav-hyperlinks li:not([data-mobile]) { + display: none; +} +.nav-hyperlinks li[data-mobile] { + display: list-item; +} .nav-hyperlinks a span { display: inline-block; @@ -210,7 +229,7 @@ footer ul li:last-child { flex-grow: 1; } .footer-links > :last-child { - margin-left: rem; + margin-left: 2rem; } /* -xs */ @@ -230,6 +249,16 @@ footer ul li:last-child { .container { max-width: 960px; } + nav > div:first-child, + nav > div:last-child { + margin: 0; + } + .nav-hyperlinks li[data-mobile] { + display: none; + } + .nav-hyperlinks li:not([data-mobile]) { + display: list-item; + } .flex-adaptive { flex-direction: row; } diff --git a/src/_includes/layout.html b/src/_includes/layout.html index 6b197c6..004d503 100644 --- a/src/_includes/layout.html +++ b/src/_includes/layout.html @@ -18,7 +18,7 @@
    -