From 62c34b6fb45b9c5332d61a86cbc946f8f2983c05 Mon Sep 17 00:00:00 2001 From: Cyper Date: Fri, 11 Jul 2025 01:50:05 -0400 Subject: [PATCH] Progress sync to test on live --- public/css/home.css | 94 ++++++++++++++++++++++++++++++++++++++- public/css/style.css | 26 +++++------ src/_includes/layout.html | 63 ++++++++++++++++++-------- 3 files changed, 147 insertions(+), 36 deletions(-) diff --git a/public/css/home.css b/public/css/home.css index 3cc3ac9..4ad3232 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -68,27 +68,119 @@ margin: auto; } +main > * { + padding: 3rem; +} +main > :nth-child(2n) { + background-color: rgba(var(--brown), 0.21); +} + +.home-text { + display: grid; + place-items: center; + text-align: center; +} +.home-text > div > * { + margin: 2rem 0; +} +.home-text h1 { + font-size: 3rem; + font-weight: 600; +} + +.featured { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.featured > h1 { + font-size: 3.25rem; + font-weight: 400; + color: rgba(var(--black), 0.86); +} +.featured > div { + display: flex; + flex-direction: column; + margin-top: 2rem; +} +.featured p, .featured a { + margin-top: 1rem; + display: inline-block; +} +.featured > div > * { + text-align: end; +} +.featured h2 { + font-size: 2.25rem; + font-weight: 300; +} + /* Grid Pattern */ .home-grid-container { padding: 0 15% 2rem 15%; + display: flex; + justify-content: center; + align-items: center; } .home-grid { display: grid; aspect-ratio: 1 / 1; - width: 100%; + width: 30rem; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); box-sizing: border-box; } +.home-grid > * { + animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99); +} +.home-grid > *:hover { + animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99); +} .home-grid svg { width: 100%; height: 100%; display: block; } +@keyframes spin-in { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +@keyframes spin-out { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} + /* -md */ @media (min-width: 992px) { .home-grid-container { padding: 0; } + .home-text { + padding: 0 2rem; + } + .home-text h1 { + font-size: 4rem; + } + .featured > h1 { + font-size: 4rem; + } + .featured > div { + flex-direction: row; + } + .featured > div > :first-child { + flex: 1; + } + .featured > div > :last-child { + flex: 2; + } } \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index f2b4914..7da5963 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -8,12 +8,16 @@ --tan: 158, 144, 112; --lightblue: 147, 225, 242; - --background-color: white; - --header-color: white; + --background-color: rgba(var(--tan), .12); + --header-color: var(--background-color); --footer-color: rgba(var(--teal)); --borders: 1px solid rgba(var(--black), .86); } +* { + font-family: "Lato", sans-serif; +} + html, body { height: 100vh; width: 100vw; @@ -26,8 +30,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 { } body { - /* display: grid; - grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height); */ background-color: var(--background-color); } body > * { @@ -40,10 +42,6 @@ header { font-variant: small-caps; height: var(--navbar-height); } -main { - padding: 1rem; - height: calc(100% - var(--navbar-height) - var(--footer-height)); -} footer { background-color: var(--footer-color); border-top: var(--borders); @@ -52,7 +50,10 @@ footer { .color-teal { color: rgba(var(--teal), .86); - text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; + text-shadow: -1px -1px 0 rgba(var(--black), .52), + 1px -1px 0 rgba(var(--black), .52), + -1px 1px 0 rgba(var(--black), .52), + 1px 1px 0 rgba(var(--black), .52); } .color-tan { color: rgba(var(--tan), .86); @@ -79,13 +80,6 @@ nav { height: 64px; } -.nav-logo > p { - color: red; -} -.nav-logo > p > span { - color: blue; -} - .nav-title { display: flex; align-items: center; diff --git a/src/_includes/layout.html b/src/_includes/layout.html index 629a0a1..568aea6 100644 --- a/src/_includes/layout.html +++ b/src/_includes/layout.html @@ -7,6 +7,10 @@ + + + + @@ -34,28 +38,49 @@
-
-
-

Welcome to Cyper's Blog!

-

Where you can experience stories side-by-side with Cyper

+
+
+
+
+

Cyper's Blog

+

Where you can experience stories side-by-side with Cyper

+
+
+
+
+
+
+
+ +
+
+ {% squareSvg 10 %} +
+
+
+
+ +
+
+ {% triangleSvg 12 %} +
+
+
+
-
-
-
-
-
- -
- {% squareSvg 10 %} +
+
+
+

Featured Posts

+
+
+
-
-
- -
-
- {% triangleSvg 12 %} +
+

Latest Post Title Goes Here

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi dolorem velit facere ea? Fugit dolor libero dolorem laborum sapiente labore quidem eos, ratione deleniti. Hic sunt ea aspernatur iusto!

+ Read more...
-