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-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 700;
font-display: swap; 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; 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; color: white;
width: 100%; width: 100%;
background-color: #151515; background-color: #151515;
scroll-behavior: smooth;
} }
a { a {
@ -117,7 +118,7 @@ img {
color: #2d0670; 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. By setting it to 99.5% opacity, we can override this. 100% does not work, however.
*/ */
background: rgba(255, 255, 255, 0.995); background: rgba(255, 255, 255, 0.995);
@ -134,6 +135,7 @@ Used to define how every page is displayed.
*/ */
main { main {
min-height: calc(100vh - 400px);
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
@ -405,8 +407,7 @@ Used to style the tag feed, seen in the custom-tags page.
/* Style */ /* Style */
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
border: 1px solid; border: 1px solid transparent;
border-color: transparent;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 1px black, 0 2px 4px black; box-shadow: 0 1px 1px black, 0 2px 4px black;
transition: 0.5s; transition: 0.5s;
@ -536,7 +537,7 @@ footer.mind-post-card-big_footer {
} }
.mind-post-card-sidebar_meta { .mind-post-card-sidebar_meta {
font-family: 'Open Sans'; font-family: 'Roboto', sans-serif;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@ -632,12 +633,11 @@ instead of pages ".mind-page*".
.mind-post-header div { .mind-post-header div {
/* Leave space for the floating arrow */ /* Leave space for the floating arrow */
margin: 0; margin: 0 0 70px;
margin-bottom: 70px;
} }
.mind-post-header p { .mind-post-header p {
font-family: 'Open Sans'; font-family: 'Roboto', sans-serif;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: rgb(200, 200, 200); color: rgb(200, 200, 200);
@ -703,7 +703,7 @@ img.mind-post_feature-image {
margin: 0 20px 2em; margin: 0 20px 2em;
} }
.mind-post_content { .mind-post_central-column {
overflow: hidden; /* to hide, eg., overflowing code */ overflow: hidden; /* to hide, eg., overflowing code */
padding: 0 60px; padding: 0 60px;
text-align: justify; 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 /* 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 { .mind-post_sidebar {
padding: 0 20px; padding: 0 20px;
@ -1061,7 +1083,7 @@ div.mind-policy-popup {
/* ANIMATED GRADIENT BACKGROUND */ /* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient { @keyframes gradient {
0% { 0% {
background-position: 0% background-position: 0
} }
100% { 100% {
background-position: 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/policy-popup.js"}}"></script>
<script src="{{asset "js/arrow-fade.js"}}" async></script> <script src="{{asset "js/arrow-fade.js"}}" async></script>
<script src="{{asset "js/scroll-navbar-color.js"}}"></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! --}} {{!-- TODO: REMOVE ON PRODUCTION! --}}
<script type="text/javascript" src="http://livejs.com/live.js"></script> <script type="text/javascript" src="http://livejs.com/live.js"></script>

View File

@ -1,7 +1,7 @@
{ {
"name": "mindtheme", "name": "mindtheme",
"description": "Mind Overflow's official website style", "description": "Mind Overflow's official website style",
"version": "0.0.7", "version": "0.0.8",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },

View File

@ -10,9 +10,9 @@
<main> <main>
<div class="mind-content_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}} {{#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"> <div class="mind-post_content-header">
{{#if feature_image}} {{#if feature_image}}

View File

@ -2,10 +2,12 @@
<div class="mind-post-header unselectable"> <div class="mind-post-header unselectable">
{{#post}} {{#post}}
<div> <div>
<h1>{{title}}</h1> <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> <p><a class="mind-post-header_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> •
</div> <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</p>
</div>
{{/post}} {{/post}}
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i> <i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
</div> </div>
@ -14,17 +16,24 @@
<div class="mind-content_main"> <div class="mind-content_main">
<div class="mind-post_main"> <div class="mind-post_main">
<aside class="mind-post_sidebar unselectable"> <aside class="mind-post_sidebar unselectable">
<div class="mind-post_sidebar-content" id="mind-post_sidebar-left">
</div>
{{!-- This gets automatically filled by the sidebar script! --}}
</aside> </aside>
{{#post}} {{#post}}
<div class="mind-post_central-column">
<div class="mind-post_content"> <div class="mind-post_content">
<div class="mind-post_content-header"> <div class="mind-post_content-header">
{{#if feature_image}} {{#if feature_image}}
<img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}" alt="Feature Image"/> <img class="mind-post_feature-image" src="{{img_url feature_image size="l"}}"
alt="Feature Image"/>
{{/if}} {{/if}}
</div> </div>
{{content}} {{content}}
<hr> <hr>
</div>
<h3>Comments</h3> <h3>Comments</h3>
<div id="remark42"></div> <div id="remark42"></div>
</div> </div>