Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progress update: syncing current setup

Browse Source
This commit is contained in:
Cyper
2025-07-02 21:43:17 -04:00
parent f5f43578ec
commit 7aded68457
3 changed files with 155 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
public/css/style.css Normal file
View File

@ -0,0 +1,117 @@
:root {
--navbar-height: 96px;
--footer-height: 24px;
/* Unused - just for reference */
--teal: 162, 223, 203;
--black: 25, 23, 30;
--brown: 81, 73, 65;
--tan: 158, 144, 112;
--lightblue: 147, 225, 242;
--background-color: white;
--header-color: rgb(var(--lightblue));
--footer-color: rgba(var(--teal));
}
html, body {
height: 100vh;
width: 100vw;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
html, body, p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
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);
}
header {
background-color: var(--header-color);
}
footer {
background-color: var(--footer-color);
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.h-100 {
height: 100%;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo > img {
width: 64px;
height: 64px;
}
.nav-logo > p {
color: red;
}
.nav-logo > p > span {
color: blue;
}
.nav-title {
display: flex;
align-items: center;
flex-direction: column;
}
.nav-title > ul {
list-style: none;
margin: 0.5rem 0;
padding: 0;
}
.nav-title > ul > li {
display: inline;
float: left;
}
.nav-title > ul > li > a {
padding: 0 1rem;
}
/* -xs */
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
/* -sm */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
/* -md */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* -lg */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* -xl */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}

BIN
public/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

40
src/_includes/layout.html
View File

@ -3,15 +3,49 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <meta name="generator" content="{{ eleventy.generator }}">
<!-- TODO: Meta tags for embedding -->
<link rel="stylesheet" href="css/style.css">
<title>CyBySide - Cyper's Blog</title>
</head> </head>
<body> <body>
<header> <header>
<h1>{{ title | default: "Bloggy" }}</h1> <nav class="container h-100">
<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">
<i data-lucide="twitter"></i>
<i data-lucide="youtube"></i>
<i data-lucide="rss"></i>
</div>
</nav>
</header> </header>
<main> <main>
<div class="container">
{{ content }} {{ content }}
</div>
</main> </main>
<footer></footer> <footer>
<div class="container">
<a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> &copy; {{ metadata.year }}
</div>
</footer>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body> </body>
</html> </html>