diff --git a/assets/css/_btns.pcss b/assets/css/_btns.pcss index 063d6b6..6208598 100644 --- a/assets/css/_btns.pcss +++ b/assets/css/_btns.pcss @@ -20,7 +20,7 @@ .light-mode { & .btn { - @apply border-primary-600 text-primary-700 bg-gray-100; + @apply border-primary-600 text-primary-800 bg-gray-200; &:hover { @apply border-primary bg-primary-200 text-primary-900; } diff --git a/assets/css/_cards.pcss b/assets/css/_cards.pcss index 61ee1b2..50c44ae 100644 --- a/assets/css/_cards.pcss +++ b/assets/css/_cards.pcss @@ -52,6 +52,21 @@ } } + .vue-content-placeholders-heading__content { + @apply opacity-75; + & .vue-content-placeholders-heading__title { + @apply h-6 mb-5 mt-1; + } + } + .dark-mode { + & .vue-content-placeholders-heading__title { + @apply bg-primary; + } + & .vue-content-placeholders-heading__subtitle { + @apply bg-primary-400; + } + } + @screen sm { .cards { & .card { diff --git a/assets/css/_typography.pcss b/assets/css/_typography.pcss index df3d3fd..badec0a 100644 --- a/assets/css/_typography.pcss +++ b/assets/css/_typography.pcss @@ -182,7 +182,8 @@ @apply relative my-4; & > .filename { color: var(--text-secondary); - @apply absolute right-0 top-0 z-10 font-mono text-sm leading-5 mr-4 mt-3; + text-shadow: 0 1px rgba(255,255,255,0.5); + @apply absolute right-0 top-0 z-10 font-mono text-sm leading-5 mr-3 mt-2; } & pre[class*="language-"] { background-color: var(--bg-secondary); diff --git a/components/global/ColorModePicker.vue b/components/global/ColorModePicker.vue index 37bfdbf..d4c1709 100644 --- a/components/global/ColorModePicker.vue +++ b/components/global/ColorModePicker.vue @@ -78,10 +78,11 @@ export default { & .icon { background-color: var(--bg); border-color: var(--border-color-secondary); + color: var(--text); &:hover { border-color: var(--border-color); - @apply text-primary-900; + @apply text-primary-900 bg-primary-200; } } } diff --git a/components/global/Header.vue b/components/global/Header.vue index 85e285b..5345ab4 100644 --- a/components/global/Header.vue +++ b/components/global/Header.vue @@ -45,11 +45,11 @@ export default { & .scrim-bg { &::after { animation-name: fadeIn2; - background: linear-gradient(to bottom, #F3F4F6, cubic-bezier(0.15, 0, 0.45, 1), transparent); + background: linear-gradient(to bottom, #e5e7eb, cubic-bezier(0.15, 0, 0.45, 1), transparent); } } & .nuxt-link-exact-active { - @apply text-primary-900 border-gray-600 bg-gray-200; + @apply text-primary-700 border-gray-600 bg-gray-100; } } diff --git a/components/posts/posts.vue b/components/posts/posts.vue index 256982a..53ff369 100644 --- a/components/posts/posts.vue +++ b/components/posts/posts.vue @@ -36,6 +36,13 @@ +
+
+ + + +
+

{{ amount > 1 ? 'Posts not found' : 'Post not found' }}

@@ -67,10 +74,19 @@ data() { return { posts: [], + loading: true, + } + }, + computed: { + placeholderClasses() { + const classes = ['w-full','w-2/3','w-5/6']; + return [...Array.from({ length: this.amount }, (v, i) => classes[i % classes.length])]; // repeats classes after one another } }, async mounted() { + this.loading = true; this.posts = await this.fetchPosts(); + this.loading = false; }, methods: { formatDate(dateString) { diff --git a/content/blog/2021-02-28-easy-excerpt-from-content.md b/content/blog/2021-02-28-easy-excerpt-from-content.md index dd84145..852f6ae 100644 --- a/content/blog/2021-02-28-easy-excerpt-from-content.md +++ b/content/blog/2021-02-28-easy-excerpt-from-content.md @@ -7,4 +7,16 @@ You can add an excerpt easily by writing `` in lowercase in the conte (It is written right before this) -Then continue on with the rest of the **markdown** content. \ No newline at end of file +Then continue on with the rest of the **markdown** content. + +```js{4,7}[posts.vue] +computed: { + placeholderClasses() { + const classes = ['w-full','w-2/3','w-5/6']; + return [...Array.from( + { length: this.amount }, + (value, index) => classes[index % classes.length] + )]; // repeats classes after one another + } +}, +``` \ No newline at end of file diff --git a/layouts/error.vue b/layouts/error.vue index 56a775d..d27430f 100644 --- a/layouts/error.vue +++ b/layouts/error.vue @@ -1,18 +1,20 @@