update
This commit is contained in:
Vrifox
parent
cc98aeaa05
commit
a9852b3403
6 changed files with 86 additions and 153 deletions
|
|
@ -5,63 +5,5 @@
|
|||
@import '../import/include.scss';
|
||||
|
||||
main {
|
||||
margin: 60px 0 0 0;
|
||||
}
|
||||
|
||||
.section-articles {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 20px 0;
|
||||
a {
|
||||
color: $white-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
background: $bg60;
|
||||
border: 1px solid $bg60;
|
||||
border-radius: 5px;
|
||||
color: $white-light;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: max-content;
|
||||
padding: 20px;
|
||||
transition: background .2s;
|
||||
&:hover {
|
||||
background: $bg70;
|
||||
}
|
||||
img {
|
||||
background: $bg80;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
margin: -20px -20px 15px -20px;
|
||||
max-height: 250px;
|
||||
max-width: calc(100% + 40px);
|
||||
object-fit: cover;
|
||||
order: -1;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
a {
|
||||
color: $white-light;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.meta {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.author {
|
||||
color: $white-dark;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.section-articles {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
@include posts;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,3 +11,62 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin posts {
|
||||
.section.posts {
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin: 40px 0;
|
||||
a {
|
||||
color: $white-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
background: $bg60;
|
||||
border-radius: 5px;
|
||||
color: $white;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
padding: 20px 40px;
|
||||
transition: background .2s;
|
||||
&:hover {
|
||||
background: $bg50;
|
||||
}
|
||||
h1 {
|
||||
color: $white;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 10px 0;
|
||||
min-height: 65px;
|
||||
text-align: center;
|
||||
span {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
p.description {
|
||||
color: $white-dark;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
p.meta {
|
||||
color: $white-dark;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
main {
|
||||
.section.articles.inner {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,4 +54,5 @@ hr {
|
|||
|
||||
main {
|
||||
width: 100vw;
|
||||
margin: 60px 0 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@
|
|||
}
|
||||
|
||||
main {
|
||||
margin: 60px 0 0 0;
|
||||
.latest {
|
||||
color: $white-dark;
|
||||
display: block;
|
||||
|
|
@ -66,54 +65,11 @@ main {
|
|||
}
|
||||
}
|
||||
}
|
||||
.section.projects .inner {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin: 40px 0;
|
||||
a {
|
||||
color: $white-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
article {
|
||||
background: $bg60;
|
||||
border-radius: 5px;
|
||||
color: $white;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: max-content;
|
||||
padding: 20px;
|
||||
transition: background .2s;
|
||||
&:hover {
|
||||
background: $bg70;
|
||||
}
|
||||
h1 {
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
p.meta {
|
||||
color: $white-dark;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
span.status {
|
||||
/*&::before {
|
||||
content: '·';
|
||||
margin-right: 9px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section.articles {
|
||||
margin: 0 auto;
|
||||
.section.projects {
|
||||
.inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin: 40px 0;
|
||||
a {
|
||||
color: $white-light;
|
||||
|
|
@ -126,39 +82,28 @@ main {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
padding: 20px 40px;
|
||||
transition: background .2s;
|
||||
&:hover {
|
||||
background: $bg70;
|
||||
p.description {
|
||||
max-height: none;
|
||||
}
|
||||
background: $bg50;
|
||||
}
|
||||
h1 {
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 10px 0;
|
||||
min-height: 65px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
}
|
||||
p.description {
|
||||
color: $white-dark;
|
||||
margin: 20px 0;
|
||||
flex: 1;
|
||||
}
|
||||
p.meta {
|
||||
color: $white-dark;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
span.author {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include posts;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -167,9 +112,6 @@ main {
|
|||
.section.projects.inner {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.section.articles.inner {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
|
|
|
|||
|
|
@ -5,32 +5,21 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<div class="container">
|
||||
<section class="section-articles">
|
||||
{{ range .Pages }}
|
||||
<a href="{{ .Permalink }}">
|
||||
<article>
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if eq .Params.type "project" }}
|
||||
<p class="" title="last change: {{ .Date.Format "2 Jan 2006" }}">
|
||||
{{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }}
|
||||
{{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
{{ if ne .Params.type "project" }}
|
||||
<p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
|
||||
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
|
||||
{{ with .Params.author }}<span class="author">by {{ .Params.author }}</span>{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
{{ with .Description }}
|
||||
<p>{{ . }}</p>
|
||||
{{ end }}
|
||||
{{ with .Params.featured_image }}
|
||||
<img src="{{ . | relURL }}" loading="lazy" alt="">
|
||||
{{ end }}
|
||||
</article>
|
||||
</a>
|
||||
{{ end }}
|
||||
<section class="section posts">
|
||||
<div class="section posts inner">
|
||||
{{ range .Pages }}
|
||||
<a href="{{ .Permalink }}">
|
||||
<article>
|
||||
<h1><span>{{ .Title }}</span></h1>
|
||||
{{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
|
||||
<p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
|
||||
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
|
||||
<span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
|
||||
</p>
|
||||
</article>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -44,15 +44,15 @@
|
|||
</div>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="section articles">
|
||||
<section class="section posts">
|
||||
<span class="latest">
|
||||
latest <a href="{{ "/blog" | relURL }}">posts</a>
|
||||
</span>
|
||||
<div class="section articles inner">
|
||||
<div class="section posts inner">
|
||||
{{ range first 4 (where .Site.RegularPages "Type" "post") }}
|
||||
<a href="{{ .Permalink }}">
|
||||
<article>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<h1><span>{{ .Title }}</span></h1>
|
||||
{{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
|
||||
<p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
|
||||
<span class="date">{{ .Date.Format "2 January 2006" }}</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue