diff --git a/public/css/home.css b/public/css/home.css index ea115be..17182c3 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -85,12 +85,20 @@ border-radius: 75%; } +main { + display: flex; + flex-direction: column; + min-height: calc(100% - var(--navbar-height) - var(--footer-height)); +} main > * { padding: 3rem; } main > :nth-child(2n) { background-color: rgba(var(--brown), 0.21); } +main > :last-child { + flex: 1 0 auto; +} .home-text { display: grid; @@ -105,13 +113,19 @@ main > :nth-child(2n) { font-weight: 600; } -.featured { +.featured, +.about { display: flex; flex-direction: column; - justify-content: center; align-items: center; } -.featured > h1 { +.featured img { + object-fit: cover; + object-position: center; + width: 100%; +} +.featured > h1, +.about > h1 { font-size: 3.25rem; font-weight: 400; color: rgba(var(--black), 0.86); @@ -120,17 +134,27 @@ main > :nth-child(2n) { display: flex; flex-direction: column; margin-top: 2rem; + width: 100%; } .featured p, .featured a { margin-top: 1rem; display: inline-block; } .featured > div > * { - text-align: end; + text-align: center; } .featured h2 { font-size: 2.25rem; font-weight: 300; + margin-top: 1rem; +} + +.about > div { + margin-top: 2rem; +} + +.about * { + text-align: center; } /* Grid Pattern */ @@ -194,10 +218,8 @@ main > :nth-child(2n) { .featured > div { flex-direction: row; } - .featured > div > :first-child { - flex: 1; - } - .featured > div > :last-child { - flex: 2; + .featured > div > * { + text-align: end; + padding-left: 2rem; } } \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index 7da5963..e34ffbb 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -16,6 +16,7 @@ * { font-family: "Lato", sans-serif; + box-sizing: border-box; } html, body { @@ -32,9 +33,6 @@ html, body, p, h1, h2, h3, h4, h5, h6 { body { background-color: var(--background-color); } -body > * { - box-sizing: border-box; -} header { background-color: var(--header-color); diff --git a/src/_includes/layout.html b/src/_includes/layout.html index f65c613..14d590c 100644 --- a/src/_includes/layout.html +++ b/src/_includes/layout.html @@ -74,7 +74,7 @@

Featured Posts

- + Featured Post Image

Latest Post Title Goes Here

@@ -84,6 +84,16 @@
+
+
+

The Skinny

+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.

+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.

+
+
+