card row polish

robotframework · Sep 11, 2024 · b2c2ef3 · b2c2ef3
1 parent d13abc1
commit b2c2ef3
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 7 deletions.
diff --git a/docs/assets/index-CBNGUzjQ.css b/docs/assets/index-CBNGUzjQ.css
diff --git a/docs/assets/index-m1aH_zN7.js → docs/assets/index-TRO0uQn4.js b/docs/assets/index-m1aH_zN7.js → docs/assets/index-TRO0uQn4.js
diff --git a/docs/assets/index-V4RZFuPu.css b/docs/assets/index-V4RZFuPu.css
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
-    <script type="module" crossorigin src="/assets/index-m1aH_zN7.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-V4RZFuPu.css">
+    <script type="module" crossorigin src="/assets/index-TRO0uQn4.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CBNGUzjQ.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/CardItem.vue b/src/components/CardItem.vue
@@ -34,6 +34,7 @@ const props = defineProps({
 h1 {
   font-size: 1.25rem;
   margin-bottom: 1.25rem;
+  letter-spacing: -0.125rem;
 }
 :deep(ul) {
   padding-left: 0;

diff --git a/src/components/SectionRow.vue b/src/components/SectionRow.vue
@@ -24,10 +24,13 @@ const components = renderEntryList(props.content)
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  column-gap: 1rem;
+  column-gap: 0.75rem;
+  scroll-snap-type: x mandatory;
 }
 .item-column {
-  flex: 0 0 calc(100% / 3);
+  flex: 0 0 calc(100% / 3.3);
+  scroll-snap-align: start;
+  scroll-margin-inline: 1rem;
 }
 @media screen and (max-width: 1024px) {
   .item-column {

diff --git a/src/content/renderContent.ts b/src/content/renderContent.ts
@@ -14,7 +14,7 @@ export const renderNodes = () => {
         return h(PageSection, { content: node.data.target })
       }
       if (type === 'row') {
-        return h(SectionRow, { content: node.data.target.fields.content, class: 'p-large' })
+        return h(SectionRow, { content: node.data.target.fields.content, class: 'm-large pb-small' })
       }
       if (type === 'expandableContent') {
         return h('details', {}, [