WebDev
/
mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Fix indentation

This commit is contained in:
Bea 2020-11-04 23:47:36 +01:00
parent 67ba61d93b
commit 58f26b715b
8 changed files with 1155 additions and 1124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/fonts.css
View File

@ -1,4 +1,3 @@
/* Begin fonts */ /* Begin fonts */
@font-face { @font-face {
font-family: 'Oswald'; font-family: 'Oswald';

201
assets/css/screen.css
View File

@ -28,7 +28,6 @@ TABLE OF CONTENTS
*/ */
/* /*
1. Global Settings 1. Global Settings
-------------------------------------------------- --------------------------------------------------
@ -142,6 +141,7 @@ main {
} }
.mind-content_main { .mind-content_main {
max-width: 1260px;
width: 1260px; width: 1260px;
margin: auto; margin: auto;
} }
@ -173,6 +173,7 @@ Used to style the navigation bars.
transition: .5s; transition: .5s;
} }
/* This class is applied by a JS script, so that users with JS disabled /* This class is applied by a JS script, so that users with JS disabled
can still see the navbar, but it won't move while they're scrolling. can still see the navbar, but it won't move while they're scrolling.
This is needed because the navbar is transparent, and a black background This is needed because the navbar is transparent, and a black background
@ -187,7 +188,7 @@ is applied by the script on scroll.
} }
.mind-global-navbar_primary-colored img { .mind-global-navbar_primary-colored img {
transform:translate(50px, 0); transform: translate(50px, 0);
} }
.mind-global-navbar_primary-transparent { .mind-global-navbar_primary-transparent {
@ -297,6 +298,7 @@ nav.mind-site-footer_nav {
text-align: right; text-align: right;
margin: 20px; margin: 20px;
} }
/* /*
1.5. Header 1.5. Header
-------------------------------------------------- --------------------------------------------------
@ -325,11 +327,11 @@ nav.mind-site-footer_nav {
} }
.mind-global-header_arrow-down-big { .mind-global-header_arrow-down-big {
animation: arrow-bounce-big 1.5s infinite; animation: arrow-bounce-big 1.5s infinite;
} }
.mind-global-header_arrow-down-mid { .mind-global-header_arrow-down-mid {
animation: arrow-bounce-mid 1.5s infinite; animation: arrow-bounce-mid 1.5s infinite;
} }
/* 2. Index Style /* 2. Index Style
@ -426,7 +428,7 @@ Used to style the tag feed, seen in the custom-tags page.
ATM: move up ATM: move up
*/ */
transform:translate3d(0,-5px,0); transform: translate3d(0, -5px, 0);
} }
.mind-post-card-big_header { .mind-post-card-big_header {
@ -490,6 +492,7 @@ footer.mind-post-card-big_footer {
border-radius: 5px; border-radius: 5px;
} }
/* 4.2. Navbar Post Card style /* 4.2. Navbar Post Card style
-------------------------------------------------- --------------------------------------------------
*/ */
@ -503,13 +506,13 @@ footer.mind-post-card-big_footer {
/* Style */ /* Style */
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0); box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 3px rgb(0, 0, 0);
transition: .3s; transition: .3s;
} }
.mind-post-card-sidebar_main:hover { .mind-post-card-sidebar_main:hover {
transform:translate3d(0,-5px,0); transform: translate3d(0, -5px, 0);
box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0); box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 15px rgb(0, 0, 0);
} }
.mind-post-card-sidebar_feature-image { .mind-post-card-sidebar_feature-image {
@ -559,14 +562,15 @@ footer.mind-post-card-big_footer {
/* Style */ /* Style */
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 2px rgb(0,0,0), 0 2px 3px rgb(0,0,0); box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 3px rgb(0, 0, 0);
transition: .3s; transition: .3s;
} }
.mind-tag-card_main:hover { .mind-tag-card_main:hover {
transform:translate3d(0,-5px,0); transform: translate3d(0, -5px, 0);
box-shadow: 0 0 2px rgb(0,0,0), 0 2px 10px rgb(0,0,0); box-shadow: 0 0 2px rgb(0, 0, 0), 0 2px 10px rgb(0, 0, 0);
} }
.mind-tag-card_feature-image { .mind-tag-card_feature-image {
/* /*
@ -586,6 +590,7 @@ footer.mind-post-card-big_footer {
border-radius: 5px; border-radius: 5px;
} }
.mind-tag-card_header { .mind-tag-card_header {
margin: auto; margin: auto;
} }
@ -595,6 +600,7 @@ footer.mind-post-card-big_footer {
text-align: center; text-align: center;
margin: 10px; margin: 10px;
} }
/* 5. Pages & Posts style /* 5. Pages & Posts style
-------------------------------------------------- --------------------------------------------------
style shared between pages and posts (eg. title). style shared between pages and posts (eg. title).
@ -621,11 +627,11 @@ instead of pages ".mind-page*".
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 3; z-index: 3;
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0); box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
} }
.mind-post-header div { .mind-post-header div {
/* Leave space for the floating arrow */ /* Leave space for the floating arrow */
margin: 0; margin: 0;
margin-bottom: 70px; margin-bottom: 70px;
} }
@ -643,8 +649,6 @@ instead of pages ".mind-page*".
*/ */
.mind-post_main { .mind-post_main {
max-width: 1260px;
width: 1260px;
display: grid; display: grid;
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
margin: auto; margin: auto;
@ -705,7 +709,7 @@ img.mind-post_feature-image {
padding: 0 60px; padding: 0 60px;
text-align: justify; text-align: justify;
background-color: rgb(40, 40, 40); background-color: rgb(40, 40, 40);
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0); box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
position: relative; position: relative;
z-index: 2; z-index: 2;
font-size: 18px; font-size: 18px;
@ -762,52 +766,52 @@ img.mind-post_feature-image {
-------------------------------------------------- --------------------------------------------------
*/ */
/* Begin images /* Begin images
[structure] [structure]
class ".kg-card" is applied to all cards! class ".kg-card" is applied to all cards!
class ".kg-image" is applied to all images. class ".kg-image" is applied to all images.
class ".kg-image-card" is applied to all image containers (includes description) class ".kg-image-card" is applied to all image containers (includes description)
there are 3 sizes: there are 3 sizes:
- normal - normal
- wide (class ".kg-width-wide") - wide (class ".kg-width-wide")
- full (class ".kg-width-full") - full (class ".kg-width-full")
if an image has a description, class ".kg-card-hascaption" is applied to the container. if an image has a description, class ".kg-card-hascaption" is applied to the container.
*/ */
.kg-card { .kg-card {
padding: 20px 0 20px; padding: 20px 0 20px;
} }
.kg-image { .kg-image {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.kg-image-card img { .kg-image-card img {
border-radius: 5px; border-radius: 5px;
} }
.kg-image-card { .kg-image-card {
margin: 0 40px; margin: 0 40px;
} }
.kg-width-wide { .kg-width-wide {
margin: 0; margin: 0;
} }
.kg-width-full { .kg-width-full {
margin: 0 -60px; margin: 0 -60px;
} }
.kg-width-full img { .kg-width-full img {
border-radius: 0; border-radius: 0;
} }
.kg-card-hascaption figcaption { .kg-card-hascaption figcaption {
margin: 0 20px; margin: 0 20px;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
@ -818,44 +822,44 @@ img.mind-post_feature-image {
border-left: 1px solid rgb(80, 80, 80); border-left: 1px solid rgb(80, 80, 80);
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
text-align: center; text-align: center;
} }
/* End images */ /* End images */
/* Begin Bookmarks */ /* Begin Bookmarks */
.kg-bookmark-card { .kg-bookmark-card {
margin: 0; margin: 0;
} }
.kg-bookmark-container { .kg-bookmark-container {
display: flex; display: flex;
min-height: 148px; min-height: 148px;
border: 1px solid rgb(80, 80, 80); border: 1px solid rgb(80, 80, 80);
border-radius: 5px; border-radius: 5px;
transition: .3s; transition: .3s;
} }
.kg-bookmark-container:hover { .kg-bookmark-container:hover {
transform:translate3d(0,-3px,0); transform: translate3d(0, -3px, 0);
box-shadow: 0 0 3px rgb(0,0,0),0 3px 10px rgb(0,0,0); box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 10px rgb(0, 0, 0);
} }
.kg-bookmark-content { .kg-bookmark-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 20px 0; padding: 20px 20px 0;
color: white; color: white;
} }
.kg-bookmark-title { .kg-bookmark-title {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
} }
.kg-bookmark-description { .kg-bookmark-description {
margin: 12px 0; margin: 12px 0;
max-height: 48px; max-height: 48px;
font-size: 14px; font-size: 14px;
@ -866,76 +870,77 @@ img.mind-post_feature-image {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.kg-bookmark-metadata { .kg-bookmark-metadata {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: auto; margin-top: auto;
} }
.kg-bookmark-icon { .kg-bookmark-icon {
width: 22px; width: 22px;
height: 22px; height: 22px;
margin-right: 10px; margin-right: 10px;
} }
.kg-bookmark-publisher { .kg-bookmark-publisher {
padding-left: 10px; padding-left: 10px;
} }
.kg-bookmark-author { .kg-bookmark-author {
padding-right: 10px; padding-right: 10px;
border-right: 1px solid rgb(80, 80, 80); border-right: 1px solid rgb(80, 80, 80);
} }
.kg-bookmark-author, .kg-bookmark-publisher { .kg-bookmark-author, .kg-bookmark-publisher {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
} }
.kg-bookmark-thumbnail { .kg-bookmark-thumbnail {
box-sizing: border-box; box-sizing: border-box;
font-size: 0; font-size: 0;
max-height: 100%; max-height: 100%;
max-width: 30%; max-width: 30%;
} }
.kg-bookmark-thumbnail img { .kg-bookmark-thumbnail img {
box-sizing: border-box; box-sizing: border-box;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* End Bookmarks */ /* End Bookmarks */
/* Begin Gallery */ /* Begin Gallery */
.kg-gallery-container { .kg-gallery-container {
margin: 0 -40px; margin: 0 -40px;
} }
.kg-gallery-row { .kg-gallery-row {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.kg-gallery-image { .kg-gallery-image {
margin: 10px 10px; margin: 10px 10px;
} }
.kg-gallery-image img {
.kg-gallery-image img {
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* End Gallery */ /* End Gallery */
/* 5.4. Sidebar /* 5.4. Sidebar
@ -945,7 +950,7 @@ img.mind-post_feature-image {
.mind-post_sidebar { .mind-post_sidebar {
padding: 0 20px; padding: 0 20px;
background-color: rgb(30, 30, 30); background-color: rgb(30, 30, 30);
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0); box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
height: 100%; height: 100%;
} }
@ -1030,20 +1035,36 @@ div.mind-policy-popup {
/* ARROW BOUNCE (on Pages and Posts)*/ /* ARROW BOUNCE (on Pages and Posts)*/
@keyframes arrow-bounce-mid { @keyframes arrow-bounce-mid {
0% { top: 89%; } 0% {
50% { top: 87%; } top: 89%;
100% { top: 89%; } }
50% {
top: 87%;
}
100% {
top: 89%;
}
} }
/* ARROW BOUNCE (on Index and Home pages)*/ /* ARROW BOUNCE (on Index and Home pages)*/
@keyframes arrow-bounce-big { @keyframes arrow-bounce-big {
0% { top: 94%; } 0% {
50% { top: 92%; } top: 94%;
100% { top: 94%; } }
50% {
top: 92%;
}
100% {
top: 94%;
}
} }
/* ANIMATED GRADIENT BACKGROUND */ /* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient { @keyframes gradient {
0% {background-position: 0%} 0% {
100% {background-position: 100%} background-position: 0%
}
100% {
background-position: 100%
}
} }

4
package.json
View File

@ -5,7 +5,9 @@
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },
"keywords": ["ghost-theme"], "keywords": [
"ghost-theme"
],
"license": "Copyright", "license": "Copyright",
"author": { "author": {
"name": "Lorenzo Dellacà", "name": "Lorenzo Dellacà",

8
partials/post-card-big.hbs
View File

@ -6,7 +6,9 @@
{{/if}} {{/if}}
<header class="mind-post-card-big_header"> <header class="mind-post-card-big_header">
<p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span> <p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span>
• <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p> •
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</p>
<h3>{{title}}</h3> <h3>{{title}}</h3>
</header> </header>
<section class="mind-post-card-big_excerpt"> <section class="mind-post-card-big_excerpt">
@ -14,7 +16,9 @@
</section> </section>
<footer class="mind-post-card-big_footer"> <footer class="mind-post-card-big_footer">
{{primary_author.name}} {{primary_author.name}}
{{#if primary_author.profile_image}}<img class="mind-post-card-big_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}} {{#if primary_author.profile_image}}
<img class="mind-post-card-big_author-image" src="{{img_url primary_author.profile_image size="xxs"}}"
alt="Author image"/>{{/if}}
</footer> </footer>
</a> </a>
</article> </article>

9
partials/posts-card-small.hbs
View File

@ -5,10 +5,15 @@
<a class="mind-post-card-sidebar_main" href="{{url}}"> <a class="mind-post-card-sidebar_main" href="{{url}}">
{{#if feature_image}} {{#if feature_image}}
<img class="mind-post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" alt="Feature Image"/> <img class="mind-post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}"
alt="Feature Image"/>
{{/if}} {{/if}}
<header class="mind-post-card-sidebar_header"> <header class="mind-post-card-sidebar_header">
<p class="mind-post-card-sidebar_meta"><span class="mind-post-card-sidebar_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p> <p class="mind-post-card-sidebar_meta"><span
class="mind-post-card-sidebar_tag">{{primary_tag.name}}</span> •
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date
format="DD MMMM YYYY"}}</time>
</p>
<h5>{{title}}</h5> <h5>{{title}}</h5>
</header> </header>
</a> </a>

24
partials/vanta-js.hbs
View File

@ -1,20 +1,20 @@
<script> <script>
if(window.screen.width > 800) if (window.screen.width > 800)
{ {
document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' + document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
'<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' + '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
'<script>' + '<script>' +
'VANTA.NET({'+ 'VANTA.NET({' +
'el: "#vantajs",'+ 'el: "#vantajs",' +
'color: 0x3fd5ff,'+ 'color: 0x3fd5ff,' +
'backgroundColor: 0x190f2b,'+ 'backgroundColor: 0x190f2b,' +
'mouseControls: true,'+ 'mouseControls: true,' +
'touchControls: true,'+ 'touchControls: true,' +
'minHeight: 200.00,'+ 'minHeight: 200.00,' +
'minWidth: 200.00,'+ 'minWidth: 200.00,' +
'scale: 1.00,'+ 'scale: 1.00,' +
'scaleMobile: 1.00'+ 'scaleMobile: 1.00' +
'})'+ '})' +
'<\/script>'); '<\/script>');
} }
</script> </script>