Improve page layouts for responsive

docusaurus.config.js

@@ -25,8 +25,6 @@ const createConfig = async () => {
     url: 'https://arrow-kt.io',
     baseUrl: '/',
     trailingSlash: true,
-    // GitHub pages deployment config.
-    // If you aren't using GitHub pages, you don't need these.
     organizationName: 'arrow-kt', // Usually your GitHub org/user name.
     projectName: 'arrow-website', // Usually your repo name.
 
@@ -178,20 +176,11 @@ const createConfig = async () => {
                 },
               ],
             },
-//            {
-//              to: '/training',
-//              position: 'right',
-//              label: 'Training',
-//            },
             {
               type: 'dropdown',
               position: 'right',
               label: 'Community',
-              items: [
-//                { to: '/community/support', label: 'Support' },
-                { to: '/community/blog', label: 'Blog' },
-//                { to: '/community/events', label: 'Events' },
-              ],
+              items: [{ to: '/community/blog', label: 'Blog' }],
             },
           ],
         },
@@ -208,10 +197,6 @@ const createConfig = async () => {
                   label: 'API Docs',
                   href: 'https://apidocs.arrow-kt.io',
                 },
-//                {
-//                  label: 'Training',
-//                  to: '/training',
-//                },
                 {
                   label: 'Community',
                   to: '/community/support',
@@ -276,14 +261,6 @@ const createConfig = async () => {
             {
               title: 'Community',
               items: [
-//                {
-//                  label: 'Support',
-//                  to: '/community/support',
-//                },
-//                {
-//                  label: 'Events',
-//                  to: '/community/events',
-//                },
                 {
                   label: 'Blog',
                   to: '/community/blog',

src/components/Blog/BlogListPage/blog-list-page.module.css

@@ -7,3 +7,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
+
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (--arrow-mobile-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
+}

src/components/Blog/BlogTagsPostsPage/blog-tags-posts-page.module.css

@@ -7,3 +7,15 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
+
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (--arrow-mobile-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
+}

src/components/Hero/hero.module.css

@@ -42,7 +42,6 @@
   }
 }
 
-
 .container {
   max-width: 700px;
 }
@@ -53,6 +52,12 @@ u {
   white-space: nowrap;
 }
 
+@media (--arrow-mobile-window) {
+  u {
+    white-space: normal;
+  }
+}
+
 .subtitle {
   font-weight: normal;
 }
@@ -64,3 +69,10 @@ u {
   justify-content: center;
   margin-top: calc(2 * var(--ifm-spacing-vertical));
 }
+
+@media (--arrow-mobile-window) {
+  .ctaList {
+    flex-direction: column;
+  }
+}
+

src/components/QuoteCard/QuoteCard.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 import styles from './quote-card.module.css';
 
 export interface QuoteCardProps {
@@ -9,17 +11,23 @@ export interface QuoteCardProps {
   body?: string;
 }
 
-export function QuoteCard({
-  name = 'Francisco Díaz',
-  position = 'Principal at Xebia Functional',
-  body,
-}: QuoteCardProps) {
+export function QuoteCard({ name, position, image, body }: QuoteCardProps) {
   return (
     <div className={`card ${styles.quoteCard}`}>
       <div className="card__body">
         <p>{body}</p>
       </div>
       <div className={`card__footer avatar`}>
+        {image && (
+          <div className="avatar__photo-wrapper">
+            <img
+              className="avatar__photo"
+              src={useBaseUrl(`/img/${image}`)}
+              alt={name}
+              title={name}
+            />
+          </div>
+        )}
         <div className="avatar__intro">
           <div className="avatar__name">{name}</div>
           <small className="avatar__subtitle">{position}</small>

src/components/QuoteCard/quote-card.module.css

@@ -24,6 +24,7 @@
 
 :local(.quoteCard) :global(.card__body) {
   padding-top: calc(2.5 * var(--ifm-card-vertical-spacing));
+  font-size: 0.9rem;
 }
 
 :local(.quoteCard) :global(.avatar__photo-wrapper) {

src/components/StarsCount/StarsCount.tsx

@@ -10,10 +10,12 @@ import styles from './stars-count.module.css';
 
 const githubLink = 'https://github.com/arrow-kt/arrow';
 const icon = '/img/icon-social-github.svg';
+const starIcon = '/img/icon-star.svg';
 
 export const StarsCount = () => {
   const isBrowser = useIsBrowser();
   const iconPath = useBaseUrl(`${icon}`);
+  const starIconPath = useBaseUrl(`${starIcon}`);
   const { githubInfo } = useGithubInfo();
 
   if (!isBrowser) {
@@ -33,10 +35,17 @@ export const StarsCount = () => {
             src={iconPath}
             className={styles.icon}
             alt="GitHub"
-            height="24px"
-            width="24px"
+            height="20px"
+            width="20px"
+          />
+          arrow • {stars.toLocaleString()}
+          <img
+            src={starIconPath}
+            className={styles.starIcon}
+            alt="Star"
+            height="16px"
+            width="16px"
           />
-          arrow • {stars.toLocaleString()} <span>⭐</span>
         </Link>
       )}
     </>

src/components/StarsCount/stars-count.module.css

@@ -1,8 +1,19 @@
 .link {
   font-weight: 500;
+  font-size: 0.9rem;
+  white-space: nowrap;
 }
 
 .icon {
-  vertical-align: top;
+  vertical-align: text-top;
   margin-right: 0.4rem;
+}
+
+.starIcon {
+  margin-left: 0.4rem;
+  vertical-align: text-top;
+}
+
+.link:hover .icon, .link:hover .starIcon  {
+  filter: brightness(0.8);
 }

src/css/custom.css

@@ -20,12 +20,6 @@ table {
   background: var(--background);
 }
 
-/* To set the ToC properly aligned */
-.plugin-docs main .theme-doc-toc-desktop {
-  top: var(--ifm-navbar-height);
-  margin-top: -1rem;
-}
-
 /* Navbar */
 .plugin-docs .navbar {
   border-bottom: 1px solid var(--ifm-toc-border-color);
@@ -51,6 +45,7 @@ table {
 /* Search */
 .navbar__search-input {
   border-radius: var(--ifm-global-radius);
+  transition: width var(--ifm-transition-fast);
 }
 
 .navbar__search[class*='searchBarContainer'] {
@@ -96,6 +91,56 @@ table {
   color: var(--ifm-link-hover-color);
 }
 
+/* Navbar sidebar */
+.navbar-sidebar__item {
+  padding: 0
+}
+
+.navbar-sidebar__back {
+  margin: 0;
+  padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+  top: 0;
+  background: var(--ifm-navbar-background-color);
+  color: var(--ifm-menu-color);
+}
+
+.navbar-sidebar__back:hover {
+  background: var(--ifm-menu-color-background-hover);
+}
+
+.navbar-sidebar__close {
+  transition: transform var(--ifm-transition-fast);
+}
+
+.navbar-sidebar__close:hover {
+  transform: rotateZ(90deg);
+}
+
+.navbar-sidebar .menu__link {
+  border-radius: var(--ifm-global-radius);
+}
+
+.navbar-sidebar .menu__link:hover {
+  cursor: pointer;
+}
+
+.menu__link.menu__link--sublist.menu__link--active {
+  color: var(--ifm-menu-color);
+}
+
+.menu__list-item-collapsible--active .menu__link.menu__link--active {
+  color: var(--ifm-menu-color-active);
+}
+
+/* To set the ToC properly aligned */
+.plugin-docs main .theme-doc-toc-desktop {
+  top: var(--ifm-navbar-height);
+  margin-top: -1rem;
+}
+
+/* Collapsible ToC */ 
+
+
 /* Pagination bottom buttons not needed */
 .plugin-docs .pagination-nav {
   display: none;
@@ -229,11 +274,13 @@ code {
   color: var(--ifm-menu-color-active);
 }
 
+
 .menu__list-item-collapsible {
   border-radius: var(--ifm-global-radius);
 }
 
-.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active {
+.plugin-docs .theme-doc-sidebar-container .menu__list-item-collapsible--active,
+.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
   background: var(--ifm-menu-color-background-active);
 }
 

src/css/vars.css

@@ -97,3 +97,5 @@
 
 /* Custom Media query mimicking the one from Infima */
 @custom-media --ifm-narrow-window (max-width: 996px);
+
+@custom-media --arrow-mobile-window (max-width: 768px);

src/pages/community/events/events.module.css

@@ -2,44 +2,15 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
-  max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
-}
-
-.featuresContainer,
-.quotesContainer {
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* https://github.com/css-modules/css-modules#composing-from-other-files */
-  /* composes: container from global; */
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
-}
-
 .projectsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
 }
 
-.navigationContainer {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
-}
-
-.usageWrapperContainer {
-  background-color: var(--ifm-color-primary-light);
+@media (--ifm-narrow-window) {
+  .projectsContainer {
+    grid-template-columns: 1fr;
+  }
 }
 
-.usageContainer {
-  display: flex;
-  align-content: center;
-  justify-content: space-between;
-  padding: calc(2 * var(--ifm-spacing-vertical)) var(--ifm-spacing-horizontal);
-  flex-wrap: wrap;
-  row-gap: var(--ifm-spacing-vertical);
-}