Added script to make list of headers
Added a new script with the purpose of getting all headers from a post's content and creating links for them in the left sidebar. Some div classes have been modified, and a wrapper div has been added to posts because of this new script. Some minor CSS changes have been made.
This commit is contained in:
parent
84f9eadd3b
commit
83302f7cc3
|
|
@ -41,9 +41,9 @@
|
|||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ html, body {
|
|||
color: white;
|
||||
width: 100%;
|
||||
background-color: #151515;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -117,7 +118,7 @@ img {
|
|||
color: #2d0670;
|
||||
|
||||
/*
|
||||
We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey.
|
||||
We need RGBA because Chrome forces it to be semi-transparent, making white look like grey.
|
||||
By setting it to 99.5% opacity, we can override this. 100% does not work, however.
|
||||
*/
|
||||
background: rgba(255, 255, 255, 0.995);
|
||||
|
|
@ -134,6 +135,7 @@ Used to define how every page is displayed.
|
|||
*/
|
||||
|
||||
main {
|
||||
min-height: calc(100vh - 400px);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
|
@ -405,8 +407,7 @@ Used to style the tag feed, seen in the custom-tags page.
|
|||
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
|
|
@ -536,7 +537,7 @@ footer.mind-post-card-big_footer {
|
|||
}
|
||||
|
||||
.mind-post-card-sidebar_meta {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
|
@ -632,12 +633,11 @@ instead of pages ".mind-page*".
|
|||
|
||||
.mind-post-header div {
|
||||
/* Leave space for the floating arrow */
|
||||
margin: 0;
|
||||
margin-bottom: 70px;
|
||||
margin: 0 0 70px;
|
||||
}
|
||||
|
||||
.mind-post-header p {
|
||||
font-family: 'Open Sans';
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: rgb(200, 200, 200);
|
||||
|
|
@ -703,7 +703,7 @@ img.mind-post_feature-image {
|
|||
margin: 0 20px 2em;
|
||||
}
|
||||
|
||||
.mind-post_content {
|
||||
.mind-post_central-column {
|
||||
overflow: hidden; /* to hide, eg., overflowing code */
|
||||
padding: 0 60px;
|
||||
text-align: justify;
|
||||
|
|
@ -945,6 +945,28 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
|
|||
/* 5.4. Sidebar
|
||||
--------------------------------------------------
|
||||
*/
|
||||
#mind-post_sidebar-left {
|
||||
}
|
||||
|
||||
#mind-post_sidebar-left a {
|
||||
color: white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#mind-post_sidebar-left a:hover {
|
||||
color: paleturquoise;
|
||||
}
|
||||
|
||||
#mind-post_sidebar-left h2 {
|
||||
font-size: 18px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#mind-post_sidebar-left h3 {
|
||||
font-size: 15px;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.mind-post_sidebar {
|
||||
padding: 0 20px;
|
||||
|
|
@ -1061,7 +1083,7 @@ div.mind-policy-popup {
|
|||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0%
|
||||
background-position: 0
|
||||
}
|
||||
100% {
|
||||
background-position: 100%
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
$(document).ready(function () {
|
||||
const headers = $(".mind-post_content h2, .mind-post_content h3").toArray();
|
||||
const sidebar = $("#mind-post_sidebar-left");
|
||||
|
||||
for (let i = 0; i < headers.length; i++) {
|
||||
const currentHeader = headers[i];
|
||||
const headerText = $(currentHeader).text();
|
||||
const headerId = $(currentHeader).attr("id");
|
||||
const headerType = $(currentHeader).prop("nodeName").toLowerCase();
|
||||
|
||||
// <h2> <a href="header-linke"> Header Name </a> </h2>
|
||||
const newLine = "<" + headerType + "> <a href=\"#" + headerId + "\">" + headerText + "</a> </" + headerType + ">";
|
||||
sidebar.append(newLine);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -13,6 +13,9 @@
|
|||
<script src="{{asset "js/policy-popup.js"}}"></script>
|
||||
<script src="{{asset "js/arrow-fade.js"}}" async></script>
|
||||
<script src="{{asset "js/scroll-navbar-color.js"}}"></script>
|
||||
{{#is "post"}}
|
||||
<script src="{{asset "js/get-headers-list.js"}}"></script>
|
||||
{{/is}}
|
||||
|
||||
{{!-- TODO: REMOVE ON PRODUCTION! --}}
|
||||
<script type="text/javascript" src="http://livejs.com/live.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "mindtheme",
|
||||
"description": "Mind Overflow's official website style",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.8",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
|
|
|
|||
4
page.hbs
4
page.hbs
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
|
||||
<div class="mind-post_central-column">
|
||||
{{#post}}
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_content"> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
|
||||
<div class="mind-post_content-header">
|
||||
|
||||
{{#if feature_image}}
|
||||
|
|
|
|||
67
post.hbs
67
post.hbs
|
|
@ -1,39 +1,48 @@
|
|||
{{!< default}}
|
||||
<div class="mind-post-header unselectable">
|
||||
{{#post}}
|
||||
{{#post}}
|
||||
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
<p><a class="mind-post-header_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
<p><a class="mind-post-header_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> •
|
||||
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
|
||||
</p>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-post_main">
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
</aside>
|
||||
{{#post}}
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_content-header">
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-post_main">
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
<div class="mind-post_sidebar-content" id="mind-post_sidebar-left">
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}" alt="Feature Image"/>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{!-- This gets automatically filled by the sidebar script! --}}
|
||||
</aside>
|
||||
{{#post}}
|
||||
<div class="mind-post_central-column">
|
||||
<div class="mind-post_content">
|
||||
<div class="mind-post_content-header">
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"
|
||||
alt="Feature Image"/>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{content}}
|
||||
<hr>
|
||||
</div>
|
||||
<h3>Comments</h3>
|
||||
<div id="remark42"></div>
|
||||
</div>
|
||||
{{/post}}
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
<div class="mind-post_sidebar-content">
|
||||
{{> "posts-card-small"}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
{{content}}
|
||||
<hr>
|
||||
<h3>Comments</h3>
|
||||
<div id="remark42"></div>
|
||||
</div>
|
||||
{{/post}}
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
<div class="mind-post_sidebar-content">
|
||||
{{> "posts-card-small"}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue