Initial commit
This commit is contained in:
commit
52ae011cb6
16 changed files with 798 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
_config.yml
|
||||||
|
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2025 The Hackman Club
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
124
README.md
Normal file
124
README.md
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
# Tapestry-Code Theme
|
||||||
|
|
||||||
|
Tapestry-Code is a Hexo theme derrived from Tapestry theme I am using for personal blog.
|
||||||
|
|
||||||
|
I am using Tapestry-Code for my [technical blog](https://blog.hackman.club/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Installation
|
||||||
|
|
||||||
|
1. Clone the theme into your Hexo project:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-hexo-project
|
||||||
|
git clone https://github.com/HackmanClub/tapestry-code.git themes/tapestry-code
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Set the theme in Hexo’s main `_config.yml`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
theme: tapestry-code
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Configuration
|
||||||
|
|
||||||
|
The theme uses its own `_config.yml` inside `themes/tapestry/`. You will need to copy / rename `_EXAMPLE_config.yml` as a starting point:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp themes/tapestry/_EXAMPLE_config.yml themes/tapestry/_config.yml
|
||||||
|
```
|
||||||
|
|
||||||
|
### Important Sections
|
||||||
|
|
||||||
|
#### Site Settings
|
||||||
|
|
||||||
|
- `avatar`, `banner`, `favicon`: paths to your images.
|
||||||
|
- `primary_color`: main color for your theme - it's used for links and avatar border.
|
||||||
|
- `secondary_color`: secondary color for your theme - it's used for links (mostly hover).
|
||||||
|
- `sidebar`: show or hide the sidebar.
|
||||||
|
- `scarves`: enable or disable scarves links.
|
||||||
|
|
||||||
|
#### Scarves
|
||||||
|
|
||||||
|
Scarf links appear at the top right. You can use an image or FontAwesome icon:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
scarf:
|
||||||
|
- url: tags/baking
|
||||||
|
image: images/assets/scarves/scarf.png
|
||||||
|
icon: false
|
||||||
|
enable: true
|
||||||
|
alt: Example
|
||||||
|
- url: tags/photo
|
||||||
|
image: false
|
||||||
|
icon: fa-solid fa-heart
|
||||||
|
enable: true
|
||||||
|
alt: Example
|
||||||
|
```
|
||||||
|
|
||||||
|
- `url` – link target
|
||||||
|
- `image` – path to scarf image
|
||||||
|
- `icon` – FontAwesome icon class
|
||||||
|
- `enable` – show/hide scarf
|
||||||
|
- `alt` – accessibility text
|
||||||
|
|
||||||
|
#### Social Links
|
||||||
|
|
||||||
|
Add or remove social links easily:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
social:
|
||||||
|
- url: https://www.instagram.com/
|
||||||
|
icon: fab fa-instagram
|
||||||
|
relme: true
|
||||||
|
enable: true
|
||||||
|
```
|
||||||
|
|
||||||
|
If `relme: true` in config, the corresponding social media entry will have `rel="me"`, that you need for verifying sites (eg, mastodon).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Sidebar Menu
|
||||||
|
|
||||||
|
Configure links in the sidebar:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
sidebar_menu:
|
||||||
|
- enable: true
|
||||||
|
name: Home
|
||||||
|
url: /
|
||||||
|
- enable: true
|
||||||
|
name: Get Hexo
|
||||||
|
url: https://hexo.io/docs/setup
|
||||||
|
```
|
||||||
|
|
||||||
|
- `enable` – show/hide
|
||||||
|
- `name` – link text
|
||||||
|
- `url` – destination
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blog images
|
||||||
|
|
||||||
|
Define image as:
|
||||||
|
|
||||||
|
`photos: images/image.png`
|
||||||
|
|
||||||
|
> ⚠️ Image shows only if `post.photos` exists, and only first image will be shown.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Running Locally
|
||||||
|
|
||||||
|
Start a local Hexo server to preview:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
hexo clean
|
||||||
|
hexo s
|
||||||
|
```
|
||||||
|
|
||||||
|
- Visit `http://localhost:4000`
|
||||||
|
- Changes in templates or CSS are reflected immediately.
|
||||||
85
_EXAMPLE_config.yml
Normal file
85
_EXAMPLE_config.yml
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
name: Tapestry-Code
|
||||||
|
version: 1
|
||||||
|
copy_year: 2026
|
||||||
|
|
||||||
|
# Site configuration
|
||||||
|
avatar: images/assets/avatar.jpg # Avatar image, also fontawesome fallback
|
||||||
|
banner: images/assets/banner.png
|
||||||
|
favicon: images/assets/avatar.jpg
|
||||||
|
fontawesome: https://kit.fontawesome.com/bae8420862.js # Use your own kit here
|
||||||
|
primary_color: '#ffc107'
|
||||||
|
secondary_color: '#296126'
|
||||||
|
sidebar: true # Display sidebar
|
||||||
|
scarves: true # Display scarves
|
||||||
|
|
||||||
|
#Footer
|
||||||
|
hexo: true # Display "Powered by Hexo" in footer
|
||||||
|
copyright: true # Display copyright
|
||||||
|
|
||||||
|
# Scarves (links on top right of screen) (add more / remove as needed)
|
||||||
|
# Defaults into FontAwesome if no image provided
|
||||||
|
# Disables scarf if no image, and font awesome not configured
|
||||||
|
scarf:
|
||||||
|
- url: tags/baking # Example Usecase for image
|
||||||
|
image: images/assets/scarves/scarf.png
|
||||||
|
icon: false
|
||||||
|
enable: true
|
||||||
|
color: false
|
||||||
|
alt: Example
|
||||||
|
- url: tags/photo # Example Usecase for FontAwesome
|
||||||
|
image: false
|
||||||
|
icon: fa-solid fa-heart
|
||||||
|
enable: true
|
||||||
|
color: false
|
||||||
|
alt: Example
|
||||||
|
|
||||||
|
# Enable or disable social links (add more / remove as needed)
|
||||||
|
social:
|
||||||
|
- url: https://www.instagram.com/
|
||||||
|
icon: fab fa-instagram
|
||||||
|
relme: true
|
||||||
|
enable: true
|
||||||
|
- url: https://discord.com/
|
||||||
|
icon: fab fa-discord
|
||||||
|
relme: true
|
||||||
|
enable: true
|
||||||
|
- url: https://www.twitch.tv/
|
||||||
|
icon: fab fa-twitch
|
||||||
|
enable: false
|
||||||
|
- url: https://mastodon.social
|
||||||
|
icon: fab fa-mastodon
|
||||||
|
enable: true
|
||||||
|
- url: https://www.linkedin.com/
|
||||||
|
icon: fab fa-linkedin
|
||||||
|
enable: true
|
||||||
|
- url: https://www.twitter.com/
|
||||||
|
icon: fab fa-twitter
|
||||||
|
enable: true
|
||||||
|
- url: https://www.facebook.com/
|
||||||
|
icon: fab fa-facebook
|
||||||
|
enable: false
|
||||||
|
- url: https://www.youtube.com/
|
||||||
|
icon: fab fa-youtube
|
||||||
|
enable: false
|
||||||
|
- url: https://www.exapmle.com/
|
||||||
|
icon: fab fa-hashtag
|
||||||
|
enable: false
|
||||||
|
|
||||||
|
# Sidebar menu configuration (add more / remove as needed)
|
||||||
|
sidebar_menu:
|
||||||
|
- enable: true
|
||||||
|
name: Home
|
||||||
|
url: /
|
||||||
|
- enable: true
|
||||||
|
name: Get Hexo
|
||||||
|
url: https://hexo.io/docs/setup
|
||||||
|
- enable: true
|
||||||
|
name: Get Tapestry
|
||||||
|
url: https://tapestry.demo.bashynx.dev
|
||||||
|
- enable: true
|
||||||
|
name: Bashynx
|
||||||
|
url: https://bashynx.com
|
||||||
|
- enable: true
|
||||||
|
name: The Hackman Club
|
||||||
|
url: https://blog.hackman.club
|
||||||
|
|
||||||
19
layout/_partial/date.ejs
Normal file
19
layout/_partial/date.ejs
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<% {
|
||||||
|
const posted = new Date(date);
|
||||||
|
const now = new Date();
|
||||||
|
const day = ((d => {
|
||||||
|
if (d > 3 && d < 21) return d + 'th';
|
||||||
|
switch (d % 10) {
|
||||||
|
case 1: return d + 'st';
|
||||||
|
case 2: return d + 'nd';
|
||||||
|
case 3: return d + 'rd';
|
||||||
|
default: return d + 'th';
|
||||||
|
}
|
||||||
|
})(posted.getDate()));
|
||||||
|
|
||||||
|
const options = now.getFullYear() === posted.getFullYear()
|
||||||
|
? { month: 'long', hour: 'numeric', minute: 'numeric', hour12: true }
|
||||||
|
: { year: 'numeric', month: 'long'};
|
||||||
|
%>
|
||||||
|
<%= day %> <%= posted.toLocaleString('en-US', options).replace(/^(\d+)\s/, '') %>
|
||||||
|
<% } %>
|
||||||
12
layout/_partial/feed.ejs
Normal file
12
layout/_partial/feed.ejs
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!-- Default number of columns is two. If 3 is defined, then third column is added-->
|
||||||
|
<div id="masonry">
|
||||||
|
<% page.posts.forEach(function(post) { %>
|
||||||
|
<%- include('post_feed', { post: post }) %>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
<% if (page.next) { %>
|
||||||
|
<a href="<%- url_for(page.next_link) %>"></a>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
32
layout/_partial/post_feed.ejs
Normal file
32
layout/_partial/post_feed.ejs
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!-- This is the template for the post. It is used to display the posts in the feeds. -->
|
||||||
|
<% if(post.photos && post.photos.length) { %>
|
||||||
|
<% classTag = "post-with-image" %>
|
||||||
|
<% } else { %>
|
||||||
|
<% classTag = "post-without-image" %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<div class="post-feed border">
|
||||||
|
<a href='<%= url_for(post.path) %>'><h1><%= post.title || "Untitled" %></h1>
|
||||||
|
|
||||||
|
<div class="<%= classTag %>">
|
||||||
|
<% if(post.photos && post.photos.length) { %>
|
||||||
|
<a href='<%= url_for(post.path) %>'>
|
||||||
|
<img class="border" src="<%- config.root %><%- post.photos[0] %>" alt="<%- post.title || 'Untitled' %>">
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="date smoll">
|
||||||
|
<a href='<%= url_for(post.path) %>'><%- include('date', { date: post.date.toISOString() }) %></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="post_description"><%= post.description %></p>
|
||||||
|
|
||||||
|
<a href='<%= url_for(post.path) %>'><p>Read More...</p></a>
|
||||||
|
|
||||||
|
<div class="tags smoll">
|
||||||
|
<% post.tags.data.forEach(function(tag) { %>
|
||||||
|
<a href="<%= url_for('/tags/' + tag.slug || tag.name.replace(/\s+/g, '-')) %>">#<%= tag.name %></a>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
17
layout/_partial/scarves.ejs
Normal file
17
layout/_partial/scarves.ejs
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<div class="scarves">
|
||||||
|
<% theme.scarf.forEach(function(scarf, index) { %>
|
||||||
|
<% if (scarf.enable) { %>
|
||||||
|
<a href="<%= scarf.url %>">
|
||||||
|
<div class="scarf" title="<%= scarf.alt %>" style="right: <%= index * 30 %>px;
|
||||||
|
margin-top:-<%= ( (index % 5) * 10) + 40 %>px;
|
||||||
|
background-color:<%= scarf.color ? scarf.color : theme.primary_color %>;">
|
||||||
|
<% if(scarf.image) { %>
|
||||||
|
<img class= "logo" src="<%= url_for(scarf.image) %>" alt="<%= scarf.alt %>">
|
||||||
|
<% } else if(scarf.icon) { %>
|
||||||
|
<i class='logo <%= scarf.icon %>'></i>
|
||||||
|
<% } else%>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
9
layout/archive.ejs
Normal file
9
layout/archive.ejs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<% site.tags.forEach(function(tag) { %>
|
||||||
|
<h2><%= tag.name %></h2>
|
||||||
|
<ul>
|
||||||
|
<% tag.posts.forEach(function(post) { %>
|
||||||
|
<li><a href="<%= post.url %>"><%= post.title %></a></li>
|
||||||
|
<% }); %>
|
||||||
|
</ul>
|
||||||
|
<% }); %>
|
||||||
|
|
||||||
1
layout/category.ejs
Normal file
1
layout/category.ejs
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
|
||||||
1
layout/index.ejs
Normal file
1
layout/index.ejs
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<%- include("_partial/feed", { item: site.posts.sort('-date') }) %>
|
||||||
133
layout/layout.ejs
Normal file
133
layout/layout.ejs
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Metadata -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="<%= config.description %>">
|
||||||
|
<meta name="author" content="<%= config.author %>">
|
||||||
|
<meta name="title" content="<%= config.title %> - <%= config.subtitle %>">
|
||||||
|
<meta name="theme-color" content="<%= theme.primary_color %>">
|
||||||
|
|
||||||
|
<!-- Open Graph Meta Tags -->
|
||||||
|
<meta property="og:title" content="<%= config.title %>">
|
||||||
|
<meta property="og:description" content="<%= config.description %>">
|
||||||
|
<meta property="og:image" content="<%= url_for(theme.banner) %>">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="<%= config.url %>">
|
||||||
|
|
||||||
|
<script data-goatcounter="https://bashynx.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
|
||||||
|
|
||||||
|
<link rel="icon" href="<%= url_for(theme.favicon) %>">
|
||||||
|
|
||||||
|
<script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<title><%= config.title %></title>
|
||||||
|
<link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: <%= theme.secondary_color %>;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: <%= theme.primary_color %>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page a,
|
||||||
|
.post-feed a {
|
||||||
|
color: <%= theme.primary_color %>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page a:hover,
|
||||||
|
.post-feed a:hover {
|
||||||
|
color: <%= theme.secondary_color %>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
border: 2px solid <%= theme.primary_color %>;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags a {
|
||||||
|
color: #6c6f72 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<% if (theme.scarves) { %>
|
||||||
|
<%- include('_partial/scarves') %>
|
||||||
|
<% } %>
|
||||||
|
<% if (theme.sidebar) { %>
|
||||||
|
<div class="sidebar">
|
||||||
|
<!-- Banner -->
|
||||||
|
<a href="/">
|
||||||
|
<div class="banner">
|
||||||
|
<img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Sidebar Content -->
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<!-- Avatar -->
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="<%= url_for(theme.avatar) %>" alt="<%= config.author %>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<% if (config.description) { %>
|
||||||
|
<p><%= config.description %></p>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<!-- Sidebar Menu -->
|
||||||
|
<nav>
|
||||||
|
<% theme.sidebar_menu.forEach(function(menu) { %>
|
||||||
|
<% if (menu.enable) { %>
|
||||||
|
<a href="<%= menu.url %>">
|
||||||
|
<%= menu.name %>
|
||||||
|
</a>
|
||||||
|
<% } %>
|
||||||
|
<% }); %>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="social">
|
||||||
|
<% theme.social.forEach(function(social) { %>
|
||||||
|
<% if (social.enable) { %>
|
||||||
|
<span class="social-icon">
|
||||||
|
<% if (social.relme) { %>
|
||||||
|
<a rel="me" href="<%= social.url %>" target="_blank">
|
||||||
|
<% } else { %>
|
||||||
|
<a href="<%= social.url %>" target="_blank">
|
||||||
|
<% } %>
|
||||||
|
<% if (theme.fontawesome) { %>
|
||||||
|
<i class="<%= social.icon %>"></i>
|
||||||
|
<% } else { %>
|
||||||
|
<img src='<%= url_for(theme.avatar) %>'></img>
|
||||||
|
<% } %>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<% } %>
|
||||||
|
<% }); %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar Footer -->
|
||||||
|
<div class="footer smoll">
|
||||||
|
<% if (theme.hexo) { %>
|
||||||
|
<div class="hexo footer">
|
||||||
|
Powered by Hexo, theme <a href="https://tapestry.demo.bashynx.dev" target="_blank">Tapestry Code (WIP)</a><br>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<% if (theme.copyright) { %>
|
||||||
|
<div class="copy footer">
|
||||||
|
© <%= theme.copy_year %> <%= config.author %>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<div class="content">
|
||||||
|
<%- body %>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
layout/page.ejs
Normal file
15
layout/page.ejs
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!-- This is the template for the page -->
|
||||||
|
<div class="pp page border">
|
||||||
|
<div class="post-header">
|
||||||
|
<h1><%= page.title || "Untitled" %></h1>
|
||||||
|
<% if(page.photos && page.photos.length) { %>
|
||||||
|
<div>
|
||||||
|
<img class="border" src="<%- config.root %><%- page.photos[0] %>" alt="<%- page.title || "Untitled" %>">
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<p><%= page.description %></p>
|
||||||
|
</div>
|
||||||
|
<div class="post-content">
|
||||||
|
<%- page.content %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
27
layout/post.ejs
Normal file
27
layout/post.ejs
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!-- This is the template for the post -->
|
||||||
|
<div class="pp post border">
|
||||||
|
<div class="post-header">
|
||||||
|
<h1><%= page.title || "Untitled" %></h1>
|
||||||
|
<% if(page.photos && page.photos.length) { %>
|
||||||
|
<div>
|
||||||
|
<img class="border" src="<%- config.root %><%- page.photos[0] %>" alt="<%- page.title || "Untitled" %>">
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<p><%= page.description %></p>
|
||||||
|
<div class="date smoll">
|
||||||
|
<a href='<%= url_for(page.path) %>'><%- include('_partial/date', { date: page.date.toISOString() }) %></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post-content">
|
||||||
|
<%- page.content %>
|
||||||
|
</div>
|
||||||
|
<div class="post-footer">
|
||||||
|
<div class="tags smoll">
|
||||||
|
<% if (page.tags) { %>
|
||||||
|
<% page.tags.data.forEach(function(tag) { %>
|
||||||
|
<a href="<%= url_for('/tags/' + tag.name) %>">#<%= tag.name %></a>
|
||||||
|
<% }); %>
|
||||||
|
<% } else {console.log(page)} %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
1
layout/tag.ejs
Normal file
1
layout/tag.ejs
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
|
||||||
299
source/css/style.css
Normal file
299
source/css/style.css
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
body {
|
||||||
|
font-family: "Helvetica";
|
||||||
|
margin: auto;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #343a40;
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Definition of small fonted text, example: footer */
|
||||||
|
.smoll {
|
||||||
|
font-size: 12px !important;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar header section */
|
||||||
|
.sidebar {
|
||||||
|
margin-right: 1em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 50%;
|
||||||
|
margin: 15px auto;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar content section */
|
||||||
|
.sidebar-content {
|
||||||
|
padding: 1em;
|
||||||
|
margin-top: 35px;
|
||||||
|
background-color: #dcdcdf;
|
||||||
|
color:#343a40;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-content p {
|
||||||
|
line-height: 17px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon a {
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display:inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon img {
|
||||||
|
width: 15px !important;
|
||||||
|
height: 15px !important;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar menu section */
|
||||||
|
nav a {
|
||||||
|
margin: 0.75rem auto;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
display: block;
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #dcdcdf !important;
|
||||||
|
width: 75%;
|
||||||
|
height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 25px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer under the sidebar */
|
||||||
|
.footer {
|
||||||
|
color: #dcdcdf !important;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #dcdcdf !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flags */
|
||||||
|
.border{
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Posts and pages */
|
||||||
|
.post-feed{
|
||||||
|
padding: 1em calc(1em + 10%);
|
||||||
|
margin: 0 auto 1em;
|
||||||
|
width: 60%;
|
||||||
|
align-items: center;
|
||||||
|
color: #dcdcdf;
|
||||||
|
background-color: #2e3237;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-feed h1{
|
||||||
|
color:#dcdcdf !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pp{
|
||||||
|
padding: 1em calc(1em + 10%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pp h1{
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post{
|
||||||
|
background-color: #dcdcdf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page{
|
||||||
|
color: #dcdcdf !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-divider {
|
||||||
|
margin-top: 1em;
|
||||||
|
border-top: 1px solid #343a40;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Images */
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:hover {
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Date */
|
||||||
|
.date {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date a{
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: auto;
|
||||||
|
text-align: right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post .date a{
|
||||||
|
color: #343a40 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-feed .date a {
|
||||||
|
margin-top:1em;
|
||||||
|
color: #9fa5aa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sidebar-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post_description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: calc(100% - 1em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Medium devices (tablets, 576px-768px) */
|
||||||
|
@media (min-width: 577px) and (max-width: 768px) {
|
||||||
|
body{
|
||||||
|
width: 576px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 250px;
|
||||||
|
height: auto;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: calc(100% - 250px - 1em);
|
||||||
|
margin-left: calc(250px + 1em);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Large devices (desktops, 768px-992px) */
|
||||||
|
@media (min-width: 769px) and (max-width: 992px) {
|
||||||
|
body{
|
||||||
|
width: 769px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 993px) and (max-width: 1199px) {
|
||||||
|
body{
|
||||||
|
width: 993px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
body{
|
||||||
|
width: 1200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Post - Tags */
|
||||||
|
.tags {
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Scarves section */
|
||||||
|
.scarves {
|
||||||
|
position:fixed;
|
||||||
|
right: 0;
|
||||||
|
margin-right:50px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scarf {
|
||||||
|
width:25px;
|
||||||
|
height:100px;
|
||||||
|
position:absolute;
|
||||||
|
transition: all 1s, transform 1s;
|
||||||
|
-moz-transition: all 1s, -moz-transform 1s;
|
||||||
|
-webkit-transition: all 1s, -webkit-transform 1s;
|
||||||
|
-o-transition: all 1s, -o-transform 1s;
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scarf .logo {
|
||||||
|
width:21px;
|
||||||
|
bottom: 0px;
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 2px;
|
||||||
|
position: absolute;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scarf:hover {
|
||||||
|
margin-top:-25px !important;
|
||||||
|
transition: all 1s, transform 1s;
|
||||||
|
-moz-transition: all 1s, -moz-transform 1s;
|
||||||
|
-webkit-transition: all 1s, -webkit-transform 1s;
|
||||||
|
-o-transition: all 1s, -o-transform 1s;
|
||||||
|
opacity:0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scarf:hover img {
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: opacity 1s;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue