fix: css improvements and fixes (#464)

* fix: css improvements and fixes * improve responsiveness * notes * prose styling * show toc aside always * fix blogpost list container * improve header nav
nuxt-themes · Jun 21, 2021 · 68920b9 · 68920b9 · vercel · Jun 21, 2021
1 parent e410faa
commit 68920b9
Show file tree

Hide file tree

Showing 29 changed files with 115 additions and 101 deletions.
diff --git a/nuxtjs.org/components/Alert.vue b/nuxtjs.org/components/Alert.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-loose" :class="[type]">
     <div class="flex items-center space-x-4">
       <div>
         <Component :is="iconComponent" class="w-5 h-5" />
@@ -68,14 +68,14 @@ export default defineComponent({
     }
   }
   &.next {
-    @apply bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25 text-gray-600 dark:text-gray-200;
+    @apply bg-gray-50 dark:bg-secondary-darkest text-gray-600 dark:text-secondary-lightest;
     >>> {
       code {
-        @apply bg-gray-100 dark:bg-gray-900 dark:bg-opacity-50 shadow-none text-current;
+        @apply bg-gray-100 dark:bg-secondary-dark dark:bg-opacity-50 shadow-none text-current;
       }
       a:hover {
         code {
-          @apply border-gray-400 dark:border-gray-700;
+          @apply border-gray-400 dark:border-secondary-light;
         }
       }
     }
@@ -124,7 +124,10 @@ export default defineComponent({
       @apply font-semibold text-current;
     }
     a {
-      @apply underline border-none font-semibold text-current;
+      @apply border-none font-semibold text-current;
+      &:hover {
+        @apply opacity-50;
+      }
       code {
         @apply border border-transparent border-dashed;
       }

diff --git a/nuxtjs.org/components/AlgoliaSearchBox.vue b/nuxtjs.org/components/AlgoliaSearchBox.vue
@@ -200,14 +200,14 @@ export default {
     --docsearch-modal-background: #003543;
     --docsearch-modal-shadow: inset 1px 1px 0 0 #052f14, 0 3px 8px 0 #0b160d;
     /* --docsearch-searchbox-background: var(--color-gray-800); */
-    /* --docsearch-searchbox-focus-background: var(--color-gray-800); */
+    --docsearch-searchbox-focus-background: rgba(1, 42, 53, 1);
     --docsearch-hit-color: var(--color-gray-300);
     --docsearch-highlight-color: var(--docsearch-primary-color);
     --docsearch-hit-shadow: none;
     --docsearch-hit-background: var(--color-gray-800);
     --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
     --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);
-    --docsearch-footer-background: var(--color-gray-800);
+    --docsearch-footer-background: rgba(1, 42, 53, 1);
     --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
     --docsearch-logo-color: #fff;
     --docsearch-muted-color: var(--color-gray-500);

diff --git a/nuxtjs.org/components/BlogpostList.vue b/nuxtjs.org/components/BlogpostList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="px-6 my-8">
-    <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+    <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
       <ContentCardTemplate
         v-for="post in posts"
         :key="post.id"

diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
@@ -1,9 +1,21 @@
 <template>
-  <nav class="relative w-full h-full flex items-center justify-center space-x-12">
+  <nav class="relative w-full h-full flex items-center justify-center">
     <Link
       v-for="{ title, href, slug } in links"
       :key="slug"
-      class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
+      class="
+        relative
+        capitalize
+        font-medium
+        flex flex-col
+        items-center
+        justify-center
+        text-center
+        px-4
+        h-full
+        flex
+        items-center
+      "
       :to="href"
       :class="{
         'text-primary': currentSlug === slug,

diff --git a/nuxtjs.org/components/HomeDiscover.vue b/nuxtjs.org/components/HomeDiscover.vue
@@ -15,29 +15,42 @@
 
     <HomeSection class="py-20 light:bg-gray-50 dark:bg-secondary-darkest">
       <template #section-content>
-        <SectionContent class="col-span-6 justify-center">
+        <SectionContent class="col-span-6 items-center md:items-start justify-center">
           <template #category>
             <CategoryLabel :label="category" />
           </template>
 
           <template #title>
-            <h2 class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4">
+            <h2
+              class="
+                font-normal
+                text-center
+                md:text-left
+                font-serif
+                text-display-6
+                md:text-display-5
+                2xl:text-display-4
+              "
+            >
               <Markdown slot="title" unwrap="p" />
             </h2>
           </template>
 
           <template #paragraph>
-            <p class="pt-2 pb-8 font-normal text-body-base md:text-body-lg 2xl:text-body-xl">
+            <p class="pt-2 pb-8 text-center md:text-left font-normal text-body-base md:text-body-lg 2xl:text-body-xl">
               <Markdown slot="description" unwrap="p" />
             </p>
-            <SectionButton
-              :to="primary.url"
-              :aria-label="primary.text"
-              size="md"
-              class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
-              :icon-left="primary.icon"
-              >{{ primary.text }}</SectionButton
-            >
+            <div class="flex justify-center md:justify-start">
+              <SectionButton
+                :to="primary.url"
+                :aria-label="primary.text"
+                size="md"
+                class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
+                :icon-left="primary.icon"
+              >
+                {{ primary.text }}
+              </SectionButton>
+            </div>
           </template>
         </SectionContent>
       </template>

diff --git a/nuxtjs.org/components/HomeFeatures.vue b/nuxtjs.org/components/HomeFeatures.vue
@@ -5,7 +5,7 @@
         <div class="mb-2">
           <CategoryLabel :label="category" />
         </div>
-        <h2 class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
+        <h2 class="font-normal text-center font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
           <Markdown slot="title" unwrap="p" />
         </h2>
         <p class="font-normal text-center text-body-base md:text-body-lg 2xl:text-body-xl mb-12">

diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
@@ -22,7 +22,18 @@
         >
           <Markdown slot="description" unwrap="p" />
         </h2>
-        <div class="flex flex-wrap justify-center space-x-3 xl:space-x-4">
+        <div
+          class="
+            flex flex-col
+            xs:flex-row
+            flex-wrap
+            items-center
+            justify-center
+            space-y-3
+            xs:space-y-0 xs:space-x-3
+            xl:space-x-4
+          "
+        >
           <SectionButton
             :to="primary.url"
             :aria-label="primary.text"

diff --git a/nuxtjs.org/components/SectionContentItem.vue b/nuxtjs.org/components/SectionContentItem.vue
@@ -3,11 +3,8 @@
     <slot name="image">
       <img class="mb-4" :src="image" :alt="`A ${title} image`" />
     </slot>
-
     <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">{{ title }}</h3>
-
-    <p class="text-center text-sm lg:text-base dark:text-secondary-lightest mb-4">{{ description }}</p>
-
+    <p class="text-center text-sm lg:text-base d-secondary-text mb-4">{{ description }}</p>
     <MMarketingLink v-if="to" color="primary-green" name="Learn more" icon="IconChevronRight" :to="to" />
   </div>
 </template>

diff --git a/nuxtjs.org/components/SponsorsBlock.vue b/nuxtjs.org/components/SponsorsBlock.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="flex flex-col">
-    <p class="pt-8 text-base font-semibold text-gray-900 dark:text-gray-100">Partners</p>
-    <ul class="py-2 flex flex-col space-y-2 ml-4">
+    <p class="text-base font-semibold text-gray-900 dark:text-gray-100">Partners</p>
+    <ul class="py-2 flex flex-col space-y-2 ml-4 mb-2">
       <li v-for="partner in partners" :key="partner.title" class="">
         <a
           :href="partner.url"
-          class="group flex items-center opacity-75 hover:opacity-100"
+          class="group flex font-medium items-center hover:opacity-100 d-secondary-text hover:d-secondary-text-hover"
           rel="noopener sponsored"
           target="_blank"
         >
           {{ partner.title }}
-          <IconExternalLink class="w-4 h-4 ml-1.5 text-gray-400 opacity-0 group-hover:opacity-100" />
+          <IconExternalLink class="w-4 h-4 ml-1.5 opacity-0 group-hover:opacity-100" />
         </a>
       </li>
     </ul>
+
     <div class="pt-2">
       <AButton
         type="button"

diff --git a/nuxtjs.org/components/templates/Blog.vue b/nuxtjs.org/components/templates/Blog.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
-    <PageHero title="NuxtJS Blog" />
-    <BlogpostList />
+    <PageHero :title="page.title" />
+    <div class="d-container">
+      <BlogpostList />
+    </div>
   </div>
 </template>
 

diff --git a/nuxtjs.org/content/0.docs/4.directory-structure/3.components.md b/nuxtjs.org/content/0.docs/4.directory-structure/3.components.md
@@ -46,7 +46,7 @@ See the chapter on [fetch()](/docs/features/data-fetching#the-fetch-method) for
 
 ## Components Discovery
 
-:img{src="/img/docs/components.png"}
+:prose-img{src="/img/docs/components.png"}
 
 Starting from `v2.13`, Nuxt can auto import your components when used in your templates. To activate this feature, set `components: true` in your configuration:
 

diff --git a/nuxtjs.org/content/2.blog/0.index.md b/nuxtjs.org/content/2.blog/0.index.md
@@ -1,4 +1,4 @@
 ---
 template: blog
-title: Blog
+title: NuxtJS Blog
 ---
diff --git a/nuxtjs.org/docus.config.ts b/nuxtjs.org/docus.config.ts
@@ -43,7 +43,10 @@ export default {
       'd-code-group-header-bg': 'bg-gray-100 dark:bg-secondary-darker',
       'd-code-group-tab': 'bg-gray-200 dark:bg-secondary-dark',
       'd-prose-code-filename-bg': 'bg-gray-100 dark:bg-secondary-darker',
-      'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-surface'
+      'd-prose-code-filename-text': 'text-gray-600 dark:text-secondary-light',
+      'd-prose-thead-border': 'border-b border-gray-200 dark:border-secondary-dark',
+      'd-prose-tr-border': 'border-b border-gray-100 dark:border-secondary-darker',
+      'd-prose-blockquote-border': 'border-l-2 border-gray-200 dark:border-secondary-darker'
     }
   }
 }
diff --git a/src/defaultTheme/components/atoms/prose/ProseA.vue b/src/defaultTheme/components/atoms/prose/ProseA.vue
@@ -34,7 +34,7 @@ export default defineComponent({
   }
 }
 
-.dark :not(h1, h2, h3) > a {
+.dark :not(h1, h2, h3, h4) > a {
   color: var(--primary-400);
   &:hover {
     border-bottom-color: var(--primary-400);

diff --git a/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue b/src/defaultTheme/components/atoms/prose/ProseBlockquote.vue
@@ -7,15 +7,11 @@
 <style lang="postcss" scoped>
 blockquote {
   /* TODO */
-  @apply text-base;
+  @apply text-base pl-4 d-secondary-text d-prose-blockquote-border;
   font-weight: 500;
-  color: theme('colors.gray.700');
-  border-left-width: 0.2rem;
-  border-left-color: theme('colors.gray.200');
   quotes: '201C' '201D' '2018' '2019';
   margin-top: 1.5em;
   margin-bottom: 1.5em;
-  padding-left: 1rem;
 }
 
 blockquote p:first-of-type::before {
@@ -24,8 +20,4 @@ blockquote p:first-of-type::before {
 blockquote p:last-of-type::after {
   content: '';
 }
-.dark blockquote {
-  color: theme('colors.gray.400');
-  border-left-color: theme('colors.gray.700');
-}
 </style>
diff --git a/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue b/src/defaultTheme/components/atoms/prose/ProseCodeInline.vue
@@ -16,8 +16,10 @@ code {
 }
 
 a code {
-  color: inherit;
-  font-weight: inherit;
+  @apply border border-dashed border-transparent;
+  &:hover {
+    @apply border-primary;
+  }
 }
 
 tbody code {
@@ -37,28 +39,27 @@ h4 a {
   code {
     font-size: inherit;
     color: inherit;
-    font-weight: inherit;
     pointer-events: none;
     border: 1px dashed transparent;
     position: relative;
     z-index: 0;
   }
   & code:before {
+    @apply d-prose-code-inline-bg rounded-md;
     content: '';
     position: absolute;
-    top: -4px;
-    left: -4px;
+    top: -2px;
+    left: -2px;
     z-index: -1;
-    width: calc(100% + 8px);
-    height: calc(100% + 8px);
-    background-color: theme('colors.white');
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    /* background-color: theme('colors.white'); */
     pointer-events: none;
   }
 }
 
 .dark {
   code {
-    font-weight: inherit;
     color: inherit;
   }
   h1 a,
@@ -67,11 +68,12 @@ h4 a {
   h4 a {
     &:hover {
       code {
-        border-color: theme('colors.gray.500');
+        border-color: theme('colors.gray.200');
       }
     }
     code:before {
-      background-color: theme('colors.gray.900');
+      /* @apply bg-transparent; */
+      /* background-color: theme('colors.gray.900'); */
     }
   }
 }

diff --git a/src/defaultTheme/components/atoms/prose/ProseImg.vue b/src/defaultTheme/components/atoms/prose/ProseImg.vue
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-img {
+>>> img {
   margin-top: 1em;
   margin-bottom: 1em;
 }

diff --git a/src/defaultTheme/components/atoms/prose/ProseLi.vue b/src/defaultTheme/components/atoms/prose/ProseLi.vue
@@ -64,7 +64,8 @@ ol li {
   margin: 0;
 }
 
-.dark ol li::before {
-  color: theme('colors.gray.400');
+ol li::before {
+  @apply d-secondary-text;
+  /* color: theme('colors.red.400'); */
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/prose/ProseTable.vue b/src/defaultTheme/components/atoms/prose/ProseTable.vue
@@ -9,8 +9,8 @@
 <style lang="postcss" scoped>
 table {
   /* TODO */
-  font-size: 0.875rem;
   @apply leading-5;
+  font-size: 0.875rem;
   width: 100%;
   table-layout: auto;
   text-align: left;

diff --git a/src/defaultTheme/components/atoms/prose/ProseTbody.vue b/src/defaultTheme/components/atoms/prose/ProseTbody.vue
@@ -3,5 +3,3 @@
     <slot />
   </tbody>
 </template>
-
-<style lang="postcss" scoped></style>
diff --git a/src/defaultTheme/components/atoms/prose/ProseTh.vue b/src/defaultTheme/components/atoms/prose/ProseTh.vue
@@ -5,16 +5,7 @@
 </template>
 
 <style lang="postcss" scoped>
-/* TODO */
 thead th {
-  font-weight: theme('fontWeight.semibold');
-  vertical-align: bottom;
-  padding: 0 theme('padding.2') theme('padding.2');
-  &:first-child {
-    padding-left: 0;
-  }
-  &:last-child {
-    padding-right: 0;
-  }
+  @apply font-semibold d-secondary-text p-2 pt-0 align-bottom first:pl-0 last:pr-0;
 }
 </style>