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

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

Browse Source
This commit is contained in:
Lorenzo Dellacà
2020-08-13 14:23:29 +02:00
parent 359e6108c9
commit 3b02a75451
13 changed files with 2756 additions and 2647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,99 +1,150 @@
@charset "utf-8";
/* CSS Document */
h1 {
font-size: 90px;
margin-top: 20px;
}
.mind-site-title {
height: 100%;
width: 100%;
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
animation-direction: alternate-reverse;
}
.mind-site-title h1 {
position: absolute;
}
.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 */
@keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 76px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h1 {
font-size: 80px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 180px;
}
}
@charset "utf-8";
/* CSS Document */
h1 {
font-size: 90px;
margin-top: 20px;
}
.mind-site-title {
height: 100%;
width: 100%;
margin: 0%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
background-size: 1000%, 100%;
animation: gradient 7s linear infinite;
animation-direction: alternate-reverse;
}
.mind-site-title h1 {
position: absolute;
}
.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 {
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 */
@keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 64px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 76px;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
h1 {
font-size: 80px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 180px;
}
}

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

@@ -1,155 +1,143 @@
@charset "utf-8";
/* CSS Document */
html, body {
background-color: black;
}
h1 {
font-size: 120px;
margin: 0;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
bottom: 10%;
}
.mind-fullscreen-title {
height: 100%;
width: 100%;
text-align: center;
}
.mind-fullscreen-title h1 {
position: absolute;
width: 100%;
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%}
100% {background-position: 100%}
}
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {
h1 {
font-size: 20px;
}
h2 {
font-size: 15px;
padding-top: 20px;
}
li {
padding: 5px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
h2 {
font-size: 18px;
padding-top: 25px;
}
h3 {
font-size: 16px;
padding-top: 25px;
}
li {
padding: 6px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
h2 {
font-size: 21px;
padding-top: 28px;
}
h3 {
font-size: 19px;
padding-top: 28px;
}
li {
padding: 8px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
h2 {
font-size: 25px;
padding-top: 31px;
}
h3 {
font-size: 22px;
padding-top: 31px;
}
li {
padding: 10px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 80px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 25px;
}
li {
padding: 13px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 95px;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 30px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 150px;
}
h2 {
font-size: 45px;
padding: 40px;
}
li {
padding: 20px;
}
}
@charset "utf-8";
/* CSS Document */
html, body {
background-color: black;
}
h1 {
font-size: 120px;
margin: 0;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
bottom: 10%;
}
.mind-fullscreen-title {
height: 100%;
width: 100%;
text-align: center;
}
.mind-fullscreen-title h1 {
position: absolute;
width: 100%;
bottom: 10%;
}
/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
0% {background-position: 0%}
100% {background-position: 100%}
}
/*MOBILE*/
@media (min-width: 0px) and (max-width: 200px) {
h1 {
font-size: 20px;
}
h2 {
font-size: 15px;
padding-top: 20px;
}
li {
padding: 5px;
}
}
@media (min-width: 200px) and (max-width: 300px) {
h1 {
font-size: 39px;
}
h2 {
font-size: 18px;
padding-top: 25px;
}
h3 {
font-size: 16px;
padding-top: 25px;
}
li {
padding: 6px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
h1 {
font-size: 52px;
}
h2 {
font-size: 21px;
padding-top: 28px;
}
h3 {
font-size: 19px;
padding-top: 28px;
}
li {
padding: 8px;
}
}
@media (min-width: 400px) and (max-width: 500px) {
h1 {
font-size: 64px;
}
h2 {
font-size: 25px;
padding-top: 31px;
}
h3 {
font-size: 22px;
padding-top: 31px;
}
li {
padding: 10px;
}
}
@media (min-width: 500px) and (max-width: 600px) {
h1 {
font-size: 80px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 25px;
}
li {
padding: 13px;
}
}
@media (min-width: 600px) and (max-width: 700px) {
h1 {
font-size: 95px;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 30px;
}
}
/* 4K+ MONITORS*/
@media (min-width: 2100px) {
h1 {
font-size: 150px;
}
h2 {
font-size: 45px;
padding: 40px;
}
li {
padding: 20px;
}
}

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

File diff suppressed because it is too large Load Diff