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