Compare commits
2 Commits
d088bd012c
...
4cffc3ff0d
| Author | SHA1 | Date | |
|---|---|---|---|
| 4cffc3ff0d | |||
| beb83a9849 |
@ -86,7 +86,7 @@ footer {
|
||||
.nav .hamburger ion-icon {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.nav-logo > img {
|
||||
.nav-logo img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
@ -114,6 +114,7 @@ footer {
|
||||
}
|
||||
.nav-hyperlinks a {
|
||||
display: flex;
|
||||
flex-direction: row-reverse; /* row-reverse so `:hover ~ ion-icon` works */
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-decoration: none;
|
||||
@ -122,10 +123,13 @@ footer {
|
||||
.nav-hyperlinks ion-icon,
|
||||
.mobile-nav-header ion-icon {
|
||||
color: rgba(var(--black), .52);
|
||||
transition: color 0.25s ease-in-out,
|
||||
background-color 0.25s ease-in-out;
|
||||
}
|
||||
.nav-hyperlinks a:hover,
|
||||
.nav-hyperlinks ion-icon:hover,
|
||||
.mobile-nav-header ion-icon:hover {
|
||||
.mobile-nav-header ion-icon:hover,
|
||||
.nav-hyperlinks a span:hover ~ ion-icon {
|
||||
color: rgba(var(--black), .86);
|
||||
}
|
||||
.nav-hyperlinks ion-icon {
|
||||
@ -296,12 +300,18 @@ footer ul li:last-child {
|
||||
}
|
||||
.footer-socials > a > ion-icon {
|
||||
color: rgba(var(--lightblue), .86);
|
||||
background-color: rgba(var(--brown), .86);
|
||||
background-color: rgba(var(--brown), .52);
|
||||
border-radius: 100%;
|
||||
border: var(--borders);
|
||||
box-sizing: content-box;
|
||||
padding: 0.5rem;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
transition: color 0.25s ease-in-out,
|
||||
background-color 0.25s ease-in-out;
|
||||
}
|
||||
.footer-socials > a > ion-icon:hover {
|
||||
background-color: rgba(var(--brown), .86);
|
||||
}
|
||||
.footer-socials > a:first-child > ion-icon {
|
||||
margin-left: 0;
|
||||
@ -314,6 +324,15 @@ footer ul li:last-child {
|
||||
text-align: center;
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
.footer-links ul li a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.footer-links ul li a ion-icon {
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
}
|
||||
.footer-links > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -8,11 +8,28 @@ const formattedDate = date.toLocaleDateString('en-GB', {
|
||||
export default {
|
||||
author: {
|
||||
name: "Cyper",
|
||||
url: "https://cyper.cc"
|
||||
socials: [
|
||||
{ name: "Twitter", url: "https://twitter.com/Cyperita", icon: "logo-twitter" },
|
||||
{ name: "YouTube", url: "https://www.youtube.com/@Cyperita", icon: "logo-youtube" },
|
||||
{ name: "TikTok", url: "https://www.tiktok.com/@cyperita", icon: "logo-tiktok" },
|
||||
{ name: "Instagram", url: "https://www.instagram.com/cyperita/", icon: "logo-instagram" },
|
||||
{ name: "RSS", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
|
||||
],
|
||||
|
||||
sites: [
|
||||
{ name: "Main Site", url: "https://cy.cyper.cc", icon: "home-sharp" },
|
||||
{ name: "Gitea", url: "https://gitea.cyper.cc", icon: "code-slash-sharp" },
|
||||
],
|
||||
|
||||
// TODO: email / newsletter sign up?
|
||||
consumables: [
|
||||
{ name: "RSS Feed", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
|
||||
]
|
||||
},
|
||||
|
||||
title: "Cy-by-Side",
|
||||
url: "https://cy.cyper.cc/",
|
||||
rss: "https://cy.cyper.cc/rss.xml",
|
||||
language: "en",
|
||||
description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
|
||||
date: formattedDate,
|
||||
|
||||
46
src/_includes/components/footer.liquid
Normal file
46
src/_includes/components/footer.liquid
Normal file
@ -0,0 +1,46 @@
|
||||
<div class="container">
|
||||
<div>
|
||||
<h3>Cyper Catalog</h3>
|
||||
<div class="footer-links">
|
||||
<div>
|
||||
<h4>Websites</h4>
|
||||
<ul>
|
||||
{%- for site in metadata.author.sites -%}
|
||||
<li>
|
||||
<a href="{{ site.url }}">
|
||||
<ion-icon name="{{ site.icon }}"></ion-icon>
|
||||
<span>{{ site.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Consumables</h4>
|
||||
<ul>
|
||||
{%- for item in metadata.author.consumables -%}
|
||||
<li>
|
||||
<a href="{{ item.url }}">
|
||||
<ion-icon name="{{ item.icon }}"></ion-icon>
|
||||
<span>{{ item.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{ metadata.title }}</h3>
|
||||
<p>by {{ metadata.author.name }}</p>
|
||||
<h4>Connect with me!</h4>
|
||||
|
||||
<div class="footer-socials">
|
||||
{%- for social in metadata.author.socials -%}
|
||||
<a href="{{ social.url }}" target="_blank" rel="noopener noreferrer">
|
||||
<ion-icon name="{{ social.icon }}"></ion-icon>
|
||||
</a>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
src/_includes/components/meta-tags.liquid
Normal file
29
src/_includes/components/meta-tags.liquid
Normal file
@ -0,0 +1,29 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
|
||||
<meta property="og:title" content="{{ metadata.title }}">
|
||||
<meta property="og:site_name" content="Cyper's Blog">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:description" content="{{ metadata.description }}">
|
||||
<meta property="og:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="350">
|
||||
<meta property="og:image:height" content="350">
|
||||
<meta property="og:url" content="{{ metadata.url }}">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ title | default: metadata.title }}">
|
||||
<meta name="twitter:description" content="{{ metadata.description }}">
|
||||
<meta name="twitter:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta name="twitter:site" content="@CyperWoof">
|
||||
<meta name="twitter:creator" content="@CyperWoof">
|
||||
<meta name="description" content="{{ metadata.description }}">
|
||||
<meta name="author" content="{{ metadata.author.name }}">
|
||||
<meta name="keywords" content="blog,tech,food,photos,photography,cyber,cybersecurity,cyper,cyperita,art,3d,2d">
|
||||
<meta name="theme-color" content="#A2DFCB">
|
||||
<meta name="name" content="{{ metadata.title }}">
|
||||
<meta itemprop="name" content="{{ metadata.title }}">
|
||||
<meta itemprop="description" content="{{ metadata.description }}">
|
||||
<meta itemprop="image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta itemprop="url" content="{{ metadata.url }}">
|
||||
<meta itemprop="thumbnailUrl" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
66
src/_includes/components/navbars.liquid
Normal file
66
src/_includes/components/navbars.liquid
Normal file
@ -0,0 +1,66 @@
|
||||
<nav class="container nav h-100" aria-label="Main nav">
|
||||
<div class="nav-logo">
|
||||
<a href="/">
|
||||
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-title">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
</div>
|
||||
<div class="nav-hyperlinks">
|
||||
<ul>
|
||||
<li data-mobile>
|
||||
<button id="mobile-nav-btn" class="hamburger" aria-label="Toggle menu">
|
||||
<ion-icon name="menu-sharp"></ion-icon>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/" style="display: flex; flex-direction: row-reverse">
|
||||
<span>Home</span>
|
||||
<ion-icon name="home-sharp"></ion-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/posts">
|
||||
<span>Posts</span>
|
||||
<ion-icon name="newspaper-sharp"></ion-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">
|
||||
<span>About</span>
|
||||
<ion-icon name="help-circle-sharp"></ion-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
|
||||
<div class="mobile-nav-header">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
<button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
|
||||
<ion-icon name="close-sharp"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-nav-links">
|
||||
<ul>
|
||||
<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>
|
||||
2
src/_includes/components/scripts.liquid
Normal file
2
src/_includes/components/scripts.liquid
Normal file
@ -0,0 +1,2 @@
|
||||
<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>
|
||||
@ -1,248 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
|
||||
<meta property="og:title" content="{{ metadata.title }}">
|
||||
<meta property="og:site_name" content="Cyper's Blog">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:description" content="{{ metadata.description }}">
|
||||
<meta property="og:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="350">
|
||||
<meta property="og:image:height" content="350">
|
||||
<meta property="og:url" content="{{ metadata.url }}">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ title | default: metadata.title }}">
|
||||
<meta name="twitter:description" content="{{ metadata.description }}">
|
||||
<meta name="twitter:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta name="twitter:site" content="@CyperWoof">
|
||||
<meta name="twitter:creator" content="@CyperWoof">
|
||||
<meta name="description" content="{{ metadata.description }}">
|
||||
<meta name="author" content="{{ metadata.author.name }}">
|
||||
<meta name="keywords" content="blog,tech,food,photos,photography,cyber,cybersecurity,cyper,cyperita,art,3d,2d">
|
||||
<meta name="theme-color" content="#A2DFCB">
|
||||
<meta name="name" content="{{ metadata.title }}">
|
||||
<meta itemprop="name" content="{{ metadata.title }}">
|
||||
<meta itemprop="description" content="{{ metadata.description }}">
|
||||
<meta itemprop="image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
<meta itemprop="url" content="{{ metadata.url }}">
|
||||
<meta itemprop="thumbnailUrl" content="https://dummyimage.com/350x350/19171E/a2dfcb">
|
||||
|
||||
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<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">
|
||||
|
||||
<title>{{ title | default: metadata.title }} - Cyper's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container nav 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>
|
||||
</div>
|
||||
<div class="nav-hyperlinks">
|
||||
<ul>
|
||||
<li data-mobile>
|
||||
<button id="mobile-nav-btn" 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>
|
||||
<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
|
||||
<div class="mobile-nav-header">
|
||||
<h1>{{ metadata.title }}</h1>
|
||||
<button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
|
||||
<ion-icon name="close-sharp"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-nav-links">
|
||||
<ul>
|
||||
<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>
|
||||
</header>
|
||||
<main>
|
||||
<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-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>
|
||||
<div>
|
||||
<div class="container featured">
|
||||
<h1>Featured Posts</h1>
|
||||
<div>
|
||||
<div>
|
||||
<img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container about">
|
||||
<h1>The Skinny</h1>
|
||||
<div>
|
||||
<p>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.</p>
|
||||
<br>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<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 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>
|
||||
<script>
|
||||
const mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
function toggleMobileNav() {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
removeBackdrop()
|
||||
} else {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'mobile-nav-backdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
backdrop.addEventListener('click', () => {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
});
|
||||
setTimeout(() => backdrop.classList.add('show'), 10);
|
||||
}
|
||||
mobileNav.classList.toggle('show');
|
||||
}
|
||||
|
||||
function removeBackdrop() {
|
||||
const backdrop = document.querySelector('.mobile-nav-backdrop');
|
||||
if (backdrop) {
|
||||
backdrop.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
backdrop.remove();
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
|
||||
document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
72
src/_includes/layout.liquid
Normal file
72
src/_includes/layout.liquid
Normal file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
{% include "components/meta-tags.liquid" %}
|
||||
|
||||
<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<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">
|
||||
|
||||
<title>{{ title | default: metadata.title }} - Cyper's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{% include "components/navbars.liquid" %}
|
||||
</header>
|
||||
<main>
|
||||
{{ content }}
|
||||
</main>
|
||||
<footer>
|
||||
{% include "components/footer.liquid" %}
|
||||
</footer>
|
||||
|
||||
{% include "components/scripts.liquid" %}
|
||||
<script>
|
||||
// TODO: move to script file
|
||||
const mobileNav = document.getElementById('mobile-nav');
|
||||
|
||||
function toggleMobileNav() {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
removeBackdrop()
|
||||
} else {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'mobile-nav-backdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
backdrop.addEventListener('click', () => {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
});
|
||||
setTimeout(() => backdrop.classList.add('show'), 10);
|
||||
}
|
||||
mobileNav.classList.toggle('show');
|
||||
}
|
||||
|
||||
function removeBackdrop() {
|
||||
const backdrop = document.querySelector('.mobile-nav-backdrop');
|
||||
if (backdrop) {
|
||||
backdrop.classList.remove('show');
|
||||
setTimeout(() => {
|
||||
backdrop.remove();
|
||||
}, 250);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
if (mobileNav.classList.contains('show')) {
|
||||
mobileNav.classList.remove('show');
|
||||
removeBackdrop();
|
||||
}
|
||||
}
|
||||
});
|
||||
document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
|
||||
document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
8
src/about.liquid
Normal file
8
src/about.liquid
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: layout.liquid
|
||||
title: About Cyper
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<h1>About page!</h1>
|
||||
</div>
|
||||
@ -1,8 +1,60 @@
|
||||
---
|
||||
layout: layout.html
|
||||
layout: layout.liquid
|
||||
---
|
||||
|
||||
{% for post in collections.post %}
|
||||
<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
||||
<p>{{ post.content }}</p>
|
||||
{% endfor %}
|
||||
<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-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>
|
||||
<div>
|
||||
<div class="container featured">
|
||||
<h1>Featured Posts</h1>
|
||||
<div>
|
||||
<div>
|
||||
<img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container about">
|
||||
<h1>The Skinny</h1>
|
||||
<div>
|
||||
<p>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.</p>
|
||||
<br>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
layout: layout.html
|
||||
title: Hello World! Layout file change
|
||||
---
|
||||
|
||||
{% for post in collections.post %}
|
||||
<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
||||
<p>{{ post.content }}</p>
|
||||
{% endfor %}
|
||||
11
src/posts.liquid
Normal file
11
src/posts.liquid
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: layout.liquid
|
||||
title: Posts
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
{% for post in collections.post %}
|
||||
<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
||||
<p>{{ post.content }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
"layout": "layout.html",
|
||||
"layout": "layout.liquid",
|
||||
"tags": "post"
|
||||
}
|
||||
Reference in New Issue
Block a user