Merge branch 'initial-layout'
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:
@ -71,7 +71,6 @@
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.diamond::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -88,7 +87,6 @@
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(100% - var(--navbar-height) - var(--footer-height));
|
||||
}
|
||||
main > * {
|
||||
padding: 3rem;
|
||||
@ -126,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);
|
||||
}
|
||||
@ -210,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;
|
||||
|
||||
@ -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 {
|
||||
@ -72,33 +70,79 @@ 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;
|
||||
}
|
||||
|
||||
.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-hyperlinks li:not([data-mobile]) {
|
||||
display: none;
|
||||
}
|
||||
.nav-hyperlinks li[data-mobile] {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.nav-socials > a > svg {
|
||||
padding: 0.5rem;
|
||||
border: var(--borders);
|
||||
.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 {
|
||||
@ -109,6 +153,85 @@ nav {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
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: 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: 2rem;
|
||||
}
|
||||
|
||||
/* -xs */
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
@ -126,9 +249,37 @@ nav {
|
||||
.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;
|
||||
}
|
||||
footer ul {
|
||||
width: fit-content;
|
||||
}
|
||||
footer > div {
|
||||
flex-direction: row;
|
||||
}
|
||||
footer > div > * {
|
||||
width: fit-content;
|
||||
}
|
||||
footer > div > *:first-child {
|
||||
text-align: start;
|
||||
}
|
||||
footer > div > :last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.footer-links {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
/* -lg */
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
@ -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.",
|
||||
|
||||
@ -44,22 +44,39 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container h-100">
|
||||
<nav class="container h-100" aria-label="Main nav">
|
||||
<div class="nav-logo">
|
||||
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
|
||||
</div>
|
||||
<div class="nav-title">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/posts">Posts</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-socials">
|
||||
<a href="#"><i data-lucide="twitter"></i></a>
|
||||
<a href="#"><i data-lucide="youtube"></i></a>
|
||||
<a href="#"><i data-lucide="rss"></i></a>
|
||||
<div class="nav-hyperlinks">
|
||||
<ul>
|
||||
<li data-mobile>
|
||||
<button class="hamburger" aria-label="Toggle menu">
|
||||
<ion-icon name="menu-sharp"></ion-icon>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">
|
||||
<ion-icon name="home-sharp"></ion-icon>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts">
|
||||
<ion-icon name="newspaper-sharp"></ion-icon>
|
||||
<span>Posts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">
|
||||
<ion-icon name="help-circle-sharp"></ion-icon>
|
||||
<span>About</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@ -123,13 +140,40 @@
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> © {{ metadata.year }}
|
||||
<div>
|
||||
<h3>Cyper Catalog</h3>
|
||||
<div class="footer-links">
|
||||
<div>
|
||||
<h4>Websites</h4>
|
||||
<ul>
|
||||
<li><a href="#">Main Site</a></li>
|
||||
<li><a href="#">Gitea</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Consumables</h4>
|
||||
<ul>
|
||||
<li><a href="#">RSS Feed</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{ metadata.title }}</h3>
|
||||
<p>by {{ metadata.author.name }}</p>
|
||||
<h4>Connect with me!</h4>
|
||||
|
||||
<div class="footer-socials">
|
||||
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
|
||||
<a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
|
||||
<a href="#"><ion-icon name="logo-tiktok"></ion-icon></a>
|
||||
<a href="#"><ion-icon name="logo-rss"></ion-icon></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user