Progress sync to test on live
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 3s
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 3s
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
|
||||
<!-- TODO: Meta tags for embedding -->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/home.css">
|
||||
|
||||
@ -34,28 +38,49 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container flex-adaptive">
|
||||
<div class="flex-1">
|
||||
<h1>Welcome to <span class="color-teal">Cyper's Blog</span>!</h1>
|
||||
<p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
|
||||
<div>
|
||||
<div class="container flex-adaptive">
|
||||
<div class="flex-1 home-text">
|
||||
<div>
|
||||
<h1 class="color-teal">Cyper's Blog</h1>
|
||||
<p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 home-grid-container">
|
||||
<div class="home-grid">
|
||||
<div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
|
||||
<div class="fill-background fill-black diamond"></div>
|
||||
<div class="fill-background fill-brown border-round-2 border-round-tr"></div>
|
||||
|
||||
<div class="fill fill-tan">
|
||||
<div>
|
||||
{% squareSvg 10 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-background fill-lightblue border-round border-round-2"></div>
|
||||
<div class="fill-background fill-brown border-round-2 border-round-br"></div>
|
||||
|
||||
<div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
|
||||
<div class="fill fill-lightblue">
|
||||
{% triangleSvg 12 %}
|
||||
</div>
|
||||
<div class="fill-background fill-tan border-round-2 border-round-tr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 home-grid-container">
|
||||
<div class="home-grid">
|
||||
<div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
|
||||
<div class="fill-background fill-black diamond"></div>
|
||||
<div class="fill-background fill-brown border-round-2 border-round-tr"></div>
|
||||
|
||||
<div class="fill fill-tan">
|
||||
{% squareSvg 10 %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="container featured">
|
||||
<h1>Featured Posts</h1>
|
||||
<div>
|
||||
<div>
|
||||
<!-- image -->
|
||||
</div>
|
||||
<div class="fill-background fill-lightblue border-round border-round-2"></div>
|
||||
<div class="fill-background fill-brown border-round-2 border-round-br"></div>
|
||||
|
||||
<div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
|
||||
<div class="fill fill-lightblue">
|
||||
{% triangleSvg 12 %}
|
||||
<div>
|
||||
<h2>Latest Post Title Goes Here</h2>
|
||||
<p>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!</p>
|
||||
<a href="#">Read more...</a>
|
||||
</div>
|
||||
<div class="fill-background fill-tan border-round-2 border-round-tr"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user