diff --git a/assets/styles/components/_blog.scss b/assets/styles/components/_blog.scss index 658f22e..0d3f4e4 100644 --- a/assets/styles/components/_blog.scss +++ b/assets/styles/components/_blog.scss @@ -1,7 +1,7 @@ .blog { width: 100%; min-height: 100vh; - background-color: rgb(241, 241, 241); + background-color: #eee; a { color: #258fb8; @@ -131,17 +131,16 @@ ul, ol, dl { - margin: 0 20px; + margin: 1.6em 20px; line-height: 1.6em; padding: 0; - margin-top: 1.6em; - margin-bottom: 1.6em; } } &__inner { overflow: hidden; background-color: #fff; + box-shadow: 1px 2px 3px #ddd; } &__meta { @@ -208,7 +207,7 @@ } a { - color: #258fb8; + color: #006891; } ul { @@ -225,6 +224,7 @@ &-archives { margin: 50px 0; + &__year { margin-bottom: 1em; font-size: 0.85em; @@ -245,6 +245,10 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; + + @media all and (max-width: 567px) { + grid-template-columns: 1fr; + } } &__time { @@ -259,15 +263,12 @@ &__post { padding: 20px; background-color: #fff; + box-shadow: 1px 2px 3px #ddd; header { display: flex; flex-direction: column; height: 100%; - - h1 { - margin-top: auto; - } } } } diff --git a/layouts/blog.vue b/layouts/blog.vue index 4a1ddcc..4b88d9f 100644 --- a/layouts/blog.vue +++ b/layouts/blog.vue @@ -8,6 +8,13 @@ + +