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

WIP: blog implementation on homepage

Browse Source
This commit is contained in:
Lorenzo Dellacà
2020-08-12 18:55:35 +02:00
parent ba5943c94a
commit 359e6108c9
8 changed files with 215 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/css/home-style.css
View File

@@ -1,15 +1,12 @@
@charset "utf-8";
/* CSS Document */
html, body {
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
h1 {
font-size: 90px;
margin-top: 20px;
}
.main {
.mind-site-title {
height: 100%;
width: 100%;
margin: 0%;
@@ -23,14 +20,21 @@ html, body {
animation-direction: alternate-reverse;
}
h1 {
font-size: 90px;
margin-top: 20px;
.mind-site-title h1 {
position: absolute;
}
.navbar {
margin-top: auto;
padding-bottom: 20px;
.mind-articles-container {
width: 100%;
text-align: center;
}
article {
display: inline-block;
width: 500px;
margin: 2%;
vertical-align: top;
text-align: left;
}
/* ANIMATED GRADIENT BACKGROUND */
@@ -45,10 +49,6 @@ h1 {
h1 {
font-size: 20px;
}
.navbar a {
font-size: 10px;
padding: 4px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
@@ -56,10 +56,6 @@ h1 {
h1 {
font-size: 39px;
}
.navbar a {
font-size: 11px;
padding: 8px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
@@ -67,10 +63,6 @@ h1 {
h1 {
font-size: 52px;
}
.navbar a {
font-size: 16px;
padding: 8px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
@@ -78,38 +70,24 @@ h1 {
h1 {
font-size: 64px;
}
.navbar a {
font-size: 21px;
padding: 8px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 64px;
}
.navbar a {
font-size: 26px;
padding: 8px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 76px;
}
.navbar a {
font-size: 27px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h1 {
font-size: 80px;
}
.navbar a {
font-size: 29px;
}
}
/* 4K+ MONITORS*/
@@ -118,7 +96,4 @@ h1 {
h1 {
font-size: 180px;
}
.navbar a {
font-size: 40px;
}
}

90
assets/css/page-style.css
View File

@@ -5,10 +5,6 @@ html, body {
background-color: black;
}
.navbar {
padding-top: 20px;
}
h1 {
font-size: 120px;
margin: 0;
@@ -18,55 +14,16 @@ h1 {
bottom: 10%;
}
.arrow-down {
border: solid white;
opacity: 0.4;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 6px;
margin-left: -6px;
position: absolute;
transform: rotate(45deg);
animation: bounce 1.5s infinite;
transition: 1s;
}
/* ARROW BOUNCE */
@keyframes bounce {
0% { top: 94%; }
50% { top: 92%; }
100% { top: 94%; }
}
.mind-fullscreen-title, footer {
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
animation-direction: alternate-reverse;
color: white;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mind-fullscreen-title {
height: 100%;
width: 100%;
text-align: center;
}
.mind-content {
font-family: 'Montserrat', sans-serif;
font-weight: 200;
background-color: #151515;
font-size: 25px;
color: white;
.mind-fullscreen-title h1 {
position: absolute;
width: 100%;
text-align: left;
box-sizing: border-box;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
padding-bottom: 20px;
bottom: 10%;
}
/* COLORED TEXT SELECTION */
@@ -97,12 +54,6 @@ h1 {
font-size: 15px;
padding-top: 20px;
}
.mind-content {
font-size: 10px;
}
.navbar a {
font-size: 10px;
}
li {
padding: 5px;
}
@@ -121,12 +72,6 @@ h1 {
font-size: 16px;
padding-top: 25px;
}
.mind-content {
font-size: 13px;
}
.navbar a {
font-size: 11px;
}
li {
padding: 6px;
}
@@ -145,12 +90,6 @@ h1 {
font-size: 19px;
padding-top: 28px;
}
.mind-content {
font-size: 16px;
}
.navbar a {
font-size: 16px;
}
li {
padding: 8px;
}
@@ -169,12 +108,6 @@ h1 {
font-size: 22px;
padding-top: 31px;
}
.mind-content {
font-size: 18px;
}
.navbar a {
font-size: 21px;
}
li {
padding: 10px;
}
@@ -190,12 +123,6 @@ h1 {
h3 {
font-size: 25px;
}
.mind-content {
font-size: 20px;
}
.navbar a {
font-size: 26px;
}
li {
padding: 13px;
}
@@ -211,12 +138,6 @@ h1 {
h3 {
font-size: 30px;
}
.mind-content {
font-size: 23px;
}
.navbar a {
font-size: 29px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
@@ -228,9 +149,6 @@ h1 {
font-size: 45px;
padding: 40px;
}
.mind-content {
font-size: 25px;
}
li {
padding: 20px;
}

152
assets/css/screen.css
View File

@@ -2,8 +2,8 @@
/* CSS Document */
html, body {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-family: 'Raleway', sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
height: 100%;
@@ -13,9 +13,7 @@ html, body {
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
width: 100%;
color: white;
position: absolute;
}
h2 {
@@ -24,7 +22,7 @@ h2 {
color: white;
margin: 0;
padding: 38px 0 0;
font-size: 40px;
font-size: 60px;
}
h3 {
@@ -45,17 +43,16 @@ h4 {
font-size: 25px;
}
a {
text-decoration: none;
color: paleturquoise;
}
.nav {
padding: 0;
}
.navbar {
position: fixed;
width: 100%;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
@@ -63,13 +60,7 @@ a {
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
/* Disable text selection */
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
padding: 0;
}
.navbar li {
@@ -97,6 +88,41 @@ a {
-webkit-text-fill-color: transparent;
}
/* 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;
padding-left: 20%;
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 {
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
animation-direction: alternate-reverse;
color: white;
}
/* End footer */
/* Begin policy popup */
/* todo: this makes the page a little bit higher & larger, adding bars. fix it */
@@ -162,6 +188,26 @@ a {
/* End policy popup */
.arrow-down {
border: solid white;
opacity: 0.4;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 6px;
margin-left: -6px;
position: absolute;
transform: rotate(45deg);
animation: bounce 1.5s infinite;
transition: 1s;
}
/* ARROW BOUNCE */
@keyframes bounce {
0% { top: 94%; }
50% { top: 92%; }
100% { top: 94%; }
}
/* Begin Ghost mandatory CSS */
.kg-width-wide {
@@ -224,6 +270,15 @@ a {
}
/* End Ghost mandatory CSS */
/* Generic class to make things unselectable */
.unselectable {
-moz-user-select: none;
-webkis-user-select: none;
-ms-user-select: none;
user-select: none;
-o-user-select: none;
}
/* Begin media queries for elements size */
@media (min-width: 0px) and (max-width:200px) {
@@ -253,6 +308,14 @@ a {
margin: 10px;
padding: 5px 8px;
}
.navbar a {
font-size: 10px;
}
.mind-content {
font-size: 10px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
@@ -284,6 +347,14 @@ a {
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 11px;
}
.mind-content {
font-size: 13px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
@@ -313,6 +384,14 @@ a {
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 16px;
}
.mind-content {
font-size: 16px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
@@ -342,6 +421,14 @@ a {
margin: 10px;
padding: 10px 15px;
}
.navbar a {
font-size: 21px;
}
.mind-content {
font-size: 18px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
@@ -367,6 +454,14 @@ a {
font-size: 11px;
margin: 10px;
}
.navbar a {
font-size: 26px;
}
.mind-content {
font-size: 20px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
@@ -392,6 +487,14 @@ a {
font-size: 11px;
margin: 10px;
}
.navbar a {
font-size: 29px;
}
.mind-content {
font-size: 23px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
@@ -423,6 +526,10 @@ a {
.mind-policy-popup button {
font-size: 15px;
}
.mind-content {
font-size: 25px;
}
}
/* End media queries */
@@ -450,4 +557,13 @@ a {
font-weight: 200;
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v17/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVuEorCIPrE.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 */