began structuring index page. posts now show correctly on a 1920x1080 screen.
This commit is contained in:
parent
359e6108c9
commit
3b02a75451
|
|
@ -24,17 +24,68 @@ h1 {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.mind-articles-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.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%;
|
||||
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 */
|
||||
|
|
|
|||
|
|
@ -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%}
|
||||
|
|
|
|||
|
|
@ -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,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();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -11,7 +11,12 @@
|
|||
<!-- Scripts Begin -->
|
||||
<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/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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
{{!< default}}
|
||||
<div class="navbar unselectable">
|
||||
{{navigation}}
|
||||
</div>
|
||||
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
|
|
@ -9,29 +6,28 @@
|
|||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<div class="mind-content">
|
||||
<h2>Last posts</h2>
|
||||
<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}}">
|
||||
<header class="post-header">
|
||||
<h3><a href="{{url}}">{{title}}</a></h3>
|
||||
</header>
|
||||
<section class="post-excerpt">
|
||||
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">...</a></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>
|
||||
</footer>
|
||||
<a class="post-card" href="{{url}}">
|
||||
<header class="post-header">
|
||||
<img class="post-card_feature-image" src="{{feature_image}}" />
|
||||
<h3>{{title}}</h3>
|
||||
</header>
|
||||
<section class="post-excerpt">
|
||||
<p>{{excerpt words="26"}}</p>
|
||||
</section>
|
||||
<footer class="post-meta">
|
||||
{{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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue