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:
Bea 2020-11-05 16:14:13 +01:00
parent 84f9eadd3b
commit 83302f7cc3
7 changed files with 93 additions and 43 deletions

View File

@ -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;
}

View File

@ -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%

View File

@ -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);
}
});

View File

@ -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>

View File

@ -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"
},

View File

@ -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}}

View File

@ -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>