Initial upload
uploaded v0.1
This commit is contained in:
GitHub
parent
7ca416624c
commit
ffb8736de2
13 changed files with 642 additions and 0 deletions
84
_config.yml
Normal file
84
_config.yml
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
name: Tapestry
|
||||
version: 0.1
|
||||
copy_year: 2025
|
||||
|
||||
# Site configuration
|
||||
avatar: images/assets/avatar.jpg # Avatar image, also fontawesome fallback
|
||||
banner: images/assets/banner.jpg
|
||||
favicon: images/assets/avatar.jpg
|
||||
fontawesome: https://kit.fontawesome.com/bae8420862.js # Use your own kit here
|
||||
primary_color: '#ffc107 !important'
|
||||
tag_border: false # Add border to tags
|
||||
column: 2 # Number of columns (2 or 3)
|
||||
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: / # Example Usecase for image
|
||||
image: images/assets/scarves/scarf.png
|
||||
icon: false
|
||||
enable: true
|
||||
color: #fff
|
||||
alt: Example
|
||||
- url: / # 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
|
||||
enable: true
|
||||
- url: https://discord.com/
|
||||
icon: fab fa-discord
|
||||
enable: true
|
||||
- url: https://www.twitch.tv/
|
||||
icon: fab fa-twitch
|
||||
enable: false
|
||||
- url: https://www.goodreads.com/
|
||||
icon: fab fa-goodreads
|
||||
enable: false
|
||||
- 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
|
||||
|
||||
28
layout/_partial/article.ejs
Normal file
28
layout/_partial/article.ejs
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!-- This is the template for the post. -->
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<h1 class="article"><%= page.title || "Untitled" %></h1>
|
||||
<% if(page.photos) { %>
|
||||
<div class="cover">
|
||||
<img class="gallery" src="<%- config.root %><%- page.photos %>" alt="<%- page.title || "Untitled" %>">
|
||||
</div>
|
||||
<% } %>
|
||||
<p class="post_description"><%= page.description %></p>
|
||||
<% if(page.content) { %>
|
||||
<hr class="page-divider">
|
||||
<% } %>
|
||||
<a href='<%= url_for(page.path) %>' class="page-date"><%- include('date', { date: page.date.toISOString() }) %></a>
|
||||
</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>
|
||||
11
layout/_partial/date.ejs
Normal file
11
layout/_partial/date.ejs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="date smoll">
|
||||
<%
|
||||
const posted = new Date(date);
|
||||
const now = new Date();
|
||||
const year = 365 * 24 * 60 * 60 * 1000;
|
||||
const format = (now - posted) < year ?
|
||||
{ day: 'numeric', month: 'long', hour: 'numeric', minute: 'numeric', hour12: true } :
|
||||
{ day: 'numeric', month: 'long', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true };
|
||||
%>
|
||||
<%= posted.toLocaleString('en-US', format ) %>
|
||||
</div>
|
||||
28
layout/_partial/feed.ejs
Normal file
28
layout/_partial/feed.ejs
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!-- Default number of columns is two. If 3 is defined, then third column is added-->
|
||||
<% columns = theme.column; %> <!-- Number of columns -->
|
||||
<div class="posts-container">
|
||||
<div class="column column-0">
|
||||
<% item.forEach(function(post, index) { %>
|
||||
<% if (index % columns === 0) { %>
|
||||
<%- include('post_feed', { post: post }) %>
|
||||
<% } %>
|
||||
<% }); %>
|
||||
</div>
|
||||
<div class="column column-1">
|
||||
<% item.forEach(function(post, index) { %>
|
||||
<% if (index % columns === 1) { %>
|
||||
<%- include('post_feed', { post: post }) %>
|
||||
<% } %>
|
||||
<% }); %>
|
||||
</div>
|
||||
<!-- Condition for column number 3 -->
|
||||
<% if (columns === 3) { %>
|
||||
<div class="column column-2">
|
||||
<% item.forEach(function(post, index) { %>
|
||||
<% if (index % columns === 2) { %>
|
||||
<%- include('post_feed', { post: post }) %>
|
||||
<% } %>
|
||||
<% }); %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
18
layout/_partial/post_feed.ejs
Normal file
18
layout/_partial/post_feed.ejs
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!-- This is the template for the post. It is used to display the posts in the feeds. -->
|
||||
<div class="post">
|
||||
<% if(post.photos) { %>
|
||||
<div class="cover">
|
||||
<img class="gallery" src="<%- config.root %><%- post.photos %>" alt="<%- post.title || "Untitled" %>">
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="post-header">
|
||||
<h2><%= post.title || "Untitled" %></h2>
|
||||
<a href='<%= url_for(post.path) %>'><%- include('date', { date: post.date.toISOString() }) %></a>
|
||||
<p><%= post.description %></p>
|
||||
<div class="tags smoll">
|
||||
<% post.tags.data.forEach(function(tag) { %>
|
||||
<a href="<%= url_for('/tags/' + tag.name) %>">#<%= tag.name %></a>
|
||||
<% }); %>
|
||||
</div>
|
||||
</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/index.ejs
Normal file
1
layout/index.ejs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<%- include("_partial/feed", { item: site.posts.sort('-date') }) %>
|
||||
124
layout/layout.ejs
Normal file
124
layout/layout.ejs
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!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 %>">
|
||||
|
||||
<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:hover {
|
||||
color: <%= theme.primary_color %>;
|
||||
}
|
||||
|
||||
.banner img {
|
||||
border: 2px solid <%= theme.primary_color %>;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
border: 2px solid <%= theme.primary_color %>;
|
||||
}
|
||||
|
||||
<% if (theme.tag_border) { %>
|
||||
.tags a {
|
||||
border: 1px solid #6c6f72;
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
border-color: #9fa5aa;
|
||||
}
|
||||
<% } %>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<% if (theme.scarves) { %>
|
||||
<%- include('_partial/scarves') %>
|
||||
<% } %>
|
||||
<% if (theme.sidebar) { %>
|
||||
<div class="sidebar">
|
||||
<!-- Avatar -->
|
||||
<a href="/">
|
||||
<div class="sidebar-header">
|
||||
<div class="banner">
|
||||
<img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<img src="<%= url_for(theme.avatar) %>" alt="<%= config.author %>">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<nav>
|
||||
<% theme.sidebar_menu.forEach(function(menu) { %>
|
||||
<% if (menu.enable) { %>
|
||||
<a href="<%= menu.url %>">
|
||||
<%= menu.name %>
|
||||
</a>
|
||||
<% } %>
|
||||
<% }); %>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Content -->
|
||||
<div class="sidebar-content">
|
||||
<a href="/">
|
||||
<h1 class="title"><%= config.title %></h1>
|
||||
</a>
|
||||
<p><%= config.description %></p>
|
||||
<div class="social">
|
||||
<% theme.social.forEach(function(social) { %>
|
||||
<% if (social.enable) { %>
|
||||
<span class="social-icon">
|
||||
<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</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>
|
||||
1
layout/page.ejs
Normal file
1
layout/page.ejs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<%- include("_partial/article", { page: page }) %>
|
||||
1
layout/post.ejs
Normal file
1
layout/post.ejs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<%- include("_partial/article", { page: page }) %>
|
||||
1
layout/tag.ejs
Normal file
1
layout/tag.ejs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<%- include("_partial/feed", { item: page.posts.sort('-date') }) %>
|
||||
319
source/css/style.css
Normal file
319
source/css/style.css
Normal file
|
|
@ -0,0 +1,319 @@
|
|||
body {
|
||||
font-family: "Helvetica";
|
||||
margin: auto;
|
||||
font-size: 14px;
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
main{
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: lighter;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/* Definition of small fonted text, example: footer */
|
||||
.smoll {
|
||||
font-size: 12px !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
/* 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:100%;
|
||||
bottom: 0px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Sidebar header section */
|
||||
.sidebar {
|
||||
margin-right: 1em;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
border-radius: 100%;
|
||||
width: 75px;
|
||||
margin-top: -60px;
|
||||
margin-left: 25px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar content section */
|
||||
.sidebar-content {
|
||||
padding: 1em;
|
||||
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.5rem 0.125rem;
|
||||
padding: 0.25rem 0;
|
||||
display: block;
|
||||
background-color: #dcdcdf;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Small devices (phones, 0-576px) */
|
||||
@media (max-width: 576px) {
|
||||
body{
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post_description {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Post */
|
||||
.posts-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.post {
|
||||
padding: 1em;
|
||||
background-color: #dcdcdf;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
line-height: 100%;
|
||||
color:#343a40;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #343a40;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Post - Top section */
|
||||
.article {
|
||||
font-size: 35px !important;
|
||||
line-height: 40px !important;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.page-date{
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.page-divider {
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid #343a40;
|
||||
}
|
||||
|
||||
/* Post - Tags */
|
||||
.tags {
|
||||
text-align: right;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.tags a {
|
||||
color: #6c6f72 !important;
|
||||
border-radius: 5px;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
color: #9fa5aa !important;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue