diff --git a/assets/_default/list.scss b/assets/_default/list.scss
index e3a70da..6e31773 100644
--- a/assets/_default/list.scss
+++ b/assets/_default/list.scss
@@ -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;
}
diff --git a/assets/import/include.scss b/assets/import/include.scss
index fc493e1..188c5cd 100644
--- a/assets/import/include.scss
+++ b/assets/import/include.scss
@@ -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);
+ }
+ }
+ }
+}
diff --git a/assets/import/main.scss b/assets/import/main.scss
index 92e3334..6fad8a8 100644
--- a/assets/import/main.scss
+++ b/assets/import/main.scss
@@ -54,4 +54,5 @@ hr {
main {
width: 100vw;
+ margin: 60px 0 0 0;
}
diff --git a/assets/index.scss b/assets/index.scss
index 782b882..ac810ed 100644
--- a/assets/index.scss
+++ b/assets/index.scss
@@ -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) {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index b85142a..cecb289 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -5,32 +5,21 @@
{{ define "main" }}
diff --git a/layouts/index.html b/layouts/index.html
index 570c928..80bc874 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -44,15 +44,15 @@
-