next/previous article/project section rewritten
This commit is contained in:
parent
8f44f2d329
commit
fb24b7e480
7 changed files with 46 additions and 97 deletions
|
@ -7,15 +7,16 @@
|
|||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ff8282 #3c3c5a; }
|
||||
scrollbar-color: #ff8282 #3c3c5a;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll; }
|
||||
|
||||
body {
|
||||
background: #28283c;
|
||||
color: #f0f0ff;
|
||||
margin: 0;
|
||||
font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
|
||||
display: grid;
|
||||
overflow-x: hidden; }
|
||||
display: grid; }
|
||||
|
||||
a {
|
||||
color: #ff8282;
|
||||
|
@ -104,48 +105,34 @@ nav {
|
|||
background: #464669; }
|
||||
|
||||
.section-articles {
|
||||
margin: 20px auto;
|
||||
margin: 20px auto -50px auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
max-width: 720px; }
|
||||
.section-articles a {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.section-articles article {
|
||||
background: #3c3c5a;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: max-content;
|
||||
transition: background .2s; }
|
||||
.section-articles article img {
|
||||
order: -1;
|
||||
max-width: calc(100% + 40px);
|
||||
border-radius: 5px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
background: #505078;
|
||||
object-fit: cover;
|
||||
max-height: 170px; }
|
||||
.section-articles article h1 {
|
||||
margin-top: 0px; }
|
||||
.section-articles article a {
|
||||
color: white; }
|
||||
margin: 10px 0; }
|
||||
.section-articles article a:hover {
|
||||
text-decoration: underline; }
|
||||
.section-articles article .meta {
|
||||
margin: 0; }
|
||||
.section-articles article .author {
|
||||
font-style: italic;
|
||||
color: #c8c8e6; }
|
||||
.section-articles article:hover {
|
||||
background: #464669; }
|
||||
.section-articles .previous-article {
|
||||
text-align: right; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.section-articles {
|
||||
grid-template-columns: repeat(1, 1fr); } }
|
||||
.section-articles::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
background: #32324b;
|
||||
height: 230px;
|
||||
left: 0;
|
||||
z-index: -10; }
|
||||
|
||||
footer {
|
||||
background: #1e1e2d;
|
||||
|
|
|
@ -7,15 +7,16 @@
|
|||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ff8282 #3c3c5a; }
|
||||
scrollbar-color: #ff8282 #3c3c5a;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll; }
|
||||
|
||||
body {
|
||||
background: #28283c;
|
||||
color: #f0f0ff;
|
||||
margin: 0;
|
||||
font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
|
||||
display: grid;
|
||||
overflow-x: hidden; }
|
||||
display: grid; }
|
||||
|
||||
a {
|
||||
color: #ff8282;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue