began structuring index page. posts now show correctly on a 1920x1080 screen.

This commit is contained in:
Bea 2020-08-13 14:23:29 +02:00
parent 359e6108c9
commit 3b02a75451
13 changed files with 2756 additions and 2647 deletions

65
assets/css/home-style.css Normal file → Executable file
View File

@ -24,17 +24,68 @@ h1 {
position: absolute;
}
.mind-articles-container {
.mind-feed {
/* todo: move to generic class */
margin: auto;
width: 1260px;
box-sizing: border-box;
max-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
padding-bottom: 50px;
}
.post-card {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
/* Style */
background-color: rgb(50, 50, 50);
border: 1px solid;
border-color: transparent;
border-radius: 5px;
box-shadow: 0 1px 1px black, 0 2px 4px black;
transition: 0.5s;
}
.post-card:hover {
transform:translate3d(0,-5px,0);
box-shadow: 1px 3px 15px 2px black;
}
a.post-card {
color: white;
}
a.post-card:hover {
text-decoration: none;
}
footer.post-meta {
display: flex;
align-items: center;
justify-content: flex-end;
}
article {
display: inline-block;
width: 500px;
margin: 2%;
vertical-align: top;
text-align: left;
box-sizing: border-box;
}
.post-card_profile-image {
border-radius: 20%;
margin-left: 10px;
max-width: 30px;
}
.post-card_feature-image {
border-radius: 5px;
width: 100%;
}
/* ANIMATED GRADIENT BACKGROUND */

12
assets/css/page-style.css Normal file → Executable file
View File

@ -26,18 +26,6 @@ h1 {
bottom: 10%;
}
/* COLORED TEXT SELECTION */
::selection {
color: #2d0670;
/*
We need RGBA because Chrome forces it to be semi-trasparent, 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);
}
/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
0% {background-position: 0%}

62
assets/css/screen.css Normal file → Executable file
View File

@ -2,12 +2,26 @@
/* CSS Document */
html, body {
font-family: 'Raleway', sans-serif;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-size: 20px;
line-height: 1.6;
color: white;
width: 100%;
}
a {
text-decoration: none;
color: paleturquoise;
}
a:hover {
text-decoration: underline;
}
h1 {
@ -43,6 +57,10 @@ h4 {
font-size: 25px;
}
main {
display: block;
background-color: #151515;
}
.nav {
padding: 0;
}
@ -61,6 +79,16 @@ h4 {
text-decoration: none;
overflow: hidden;
padding: 0;
transition: 1s;
}
.navbar-colored {
background: rgba(0, 0, 0, 1);
}
.navbar-transparent {
background: rgba(0, 0, 0, 0.0);
}
.navbar li {
@ -90,14 +118,6 @@ h4 {
/* Begin Content */
.mind-content {
font-family: 'Raleway', sans-serif;
font-weight: 300;
background-color: #151515;
font-size: 22px;
line-height: 1.6;
color: white;
width: 100%;
text-align: left;
text-align: justify;
box-sizing: border-box;
padding-top: 20px;
@ -105,16 +125,11 @@ h4 {
padding-right: 20%;
padding-bottom: 20px;
}
.mind-content a {
text-decoration: none;
color: paleturquoise;
}
/* End Content */
/* Begin footer */
/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */
.mind-fullscreen-title, footer {
.mind-fullscreen-title, footer.mind-site-footer {
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
@ -219,8 +234,8 @@ h4 {
.kg-gallery-container {
}
}
.kg-gallery-image {
}
@ -279,6 +294,17 @@ h4 {
-o-user-select: none;
}
/* COLORED TEXT SELECTION */
::selection {
color: #2d0670;
/*
We need RGBA because Chrome forces it to be semi-trasparent, 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);
}
/* Begin media queries for elements size */
@media (min-width: 0px) and (max-width:200px) {
@ -559,11 +585,11 @@ h4 {
}
@font-face {
font-family: 'Raleway';
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.woff2) format('woff2');
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.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;
}
/* End fonts */

0
assets/js/arrow-fade.js Normal file → Executable file
View File

0
assets/js/jquery-3.5.1.js vendored Normal file → Executable file
View File

0
assets/js/policy-popup.js Normal file → Executable file
View File

View File

@ -0,0 +1,45 @@
var scroll_pos = 0;
var transparent = true;
var offset = 100;
function makeTransparent()
{
$("#navbar").removeClass('navbar-colored').addClass('navbar-transparent');
transparent = true;
}
function makeOpaque()
{
$("#navbar").removeClass('navbar-transparent').addClass('navbar-colored');
transparent = false;
}
$(document).ready(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > offset)
{
makeOpaque();
}
else
{
makeTransparent();
}
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(transparent)
{
if(scroll_pos > offset)
{
makeOpaque();
}
}
else
{
if(scroll_pos <= offset)
{
makeTransparent();
}
}
});
});

13
default.hbs Normal file → Executable file
View File

@ -12,6 +12,11 @@
<script src="{{asset "js/jquery-3.5.1.js"}}"></script>
<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>
<!-- TODO: REMOVE ON PRODUCTION! -->
<script type="text/javascript" src="http://livejs.com/live.js"></script>
<!-- Scripts End -->
<!-- Begin Posts & Pages only code -->
@ -32,12 +37,16 @@
{{/is}}
<!-- End Index only code -->
{{ghost_head}}
{{!-- Outputs important meta data and settings, should always be in <head> --}}
</head>
<body class="{{body_class}}" onload="openPolicyPopup()">
<div id="navbar" class="navbar unselectable">
{{navigation}}
</div>
<div class="mind-policy-popup" id="mind-policy-popup">
<h4>This website uses cookies.</h4>
<p>We use cookies to ensure you the best experience.
@ -51,7 +60,7 @@
{{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
<footer class="unselectable">
<footer class="mind-site-footer unselectable">
<h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
</footer>

22
index.hbs Normal file → Executable file
View File

@ -1,7 +1,4 @@
{{!< default}}
<div class="navbar unselectable">
{{navigation}}
</div>
<div class="mind-site-title unselectable" id="vantajs">
<h1>{{@site.title}}</h1>
@ -9,30 +6,29 @@
</div>
<main>
<div class="mind-content">
<main class="mind-index">
<h2>Last posts</h2>
<div class="mind-feed">
<div class="mind-articles-container">
<!-- Looping through every post -->
{{#foreach posts}}
<article class="{{post_class}}">
<a class="post-card" href="{{url}}">
<header class="post-header">
<h3><a href="{{url}}">{{title}}</a></h3>
<img class="post-card_feature-image" src="{{feature_image}}" />
<h3>{{title}}</h3>
</header>
<section class="post-excerpt">
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></p>
<p>{{excerpt words="26"}}</p>
</section>
<footer class="post-meta">
{{#if primary_author.profile_image}}<img src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
{{primary_author}}
{{tags prefix=" on "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
{{primary_author.name}}
{{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
</footer>
</a>
</article>
{{/foreach}}
</div>
</div>
</main>
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->

0
package.json Normal file → Executable file
View File

3
page.hbs Normal file → Executable file
View File

@ -1,8 +1,5 @@
{{!< default}}
{{#post}}
<div class="navbar unselectable">
{{navigation}}
</div>
<div class="mind-fullscreen-title unselectable">
<h1>{{title}}</h1>
<i class="arrow-down"></i>

3
post.hbs Normal file → Executable file
View File

@ -1,8 +1,5 @@
{{!< default}}
{{#post}}
<div class="navbar unselectable">
{{navigation}}
</div>
<div class="mind-fullscreen-title unselectable">
<h1>{{title}}</h1>
<i class="arrow-down"></i>