Add responsive breakpoints to column layout

koddsson · koddsson · commit 29f19fbd054f · 2021-01-19T11:50:19.000Z
diff --git a/docs/_includes/reference_sidebar.html b/docs/_includes/reference_sidebar.html
@@ -1,4 +1,4 @@
-<aside class="col-3 pl-4 pt-1 bg-gray">
+<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">
   <nav>
     <ul class="f3-light ml-4">
       {% for item in sidebarItems %}
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
@@ -1,4 +1,4 @@
-<aside class="col-3 pl-4 pt-1 bg-gray">
+<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">
   <nav>
     <ol class="f3-light ml-4">
       {% for item in sidebarItems %}
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -22,29 +22,29 @@
     <link rel="icon" href="{{ site.baseurl }}/icons/icon-48x48.png">
   </head>
   <body class="d-flex flex-column height-full">
-    <header class="position-sticky top-0 d-flex"
+    <header class="position-sticky top-0 d-md-flex"
       style="z-index: 1; background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%)">
-      <div class="flex-1 pl-3 pb-6 col-3 {% if page.layout != "default" %}bg-gray{% endif %}">
-        <h1 class="m-0 mt-2">Catalyst</h1>
+      <div class="flex-1 pl-3 pb-6 col-md-3 {% if page.layout != "default" %}bg-gray{% endif %}">
+        <h1 class="m-0 mt-md-2">Catalyst</h1>
       </div>
-      <nav class="f3 col-9 d-flex flex-justify-end">
-        <ul class="d-flex list-style-none mr-6">
-          <li class="m-3">
+      <nav class="f3 col-md-9 d-flex flex-md-justify-end">
+        <ul class="d-flex list-style-none mr-md-6">
+          <li class="ml-3 mt-3 mb-3">
             <a href="{{ site.baseurl }}/">
               Home
             </a>
           </li>
-          <li class="m-3">
+          <li class="ml-3 mt-3 mb-3">
             <a href="{{ site.baseurl }}/guide/introduction">
               Guide
             </a>
           </li>
-          <li class="m-3">
+          <li class="ml-3 mt-3 mb-3">
             <a href="{{ site.baseurl }}/reference">
               Reference
             </a>
           </li>
-          <li class="m-3">
+          <li class="ml-3 mt-3 mb-3">
             <a href="https://github.com/github/catalyst">
               Source Code
             </a>
diff --git a/docs/_layouts/guide.html b/docs/_layouts/guide.html
@@ -2,11 +2,11 @@
 layout: default
 ---
 
-<div class="d-flex flex-1">
+<div class="d-md-flex flex-1">
   {% assign sidebarItems = site.guide | sort: 'chapter' %}
   {% include sidebar.html %}
 
-  <section class="col-9 px-5 f4">
+  <section class="col-lg-9 px-5 f4">
     <div class="container-md markdown-body mb-5">
       <h1 class="mb-4 f0-light">{{ page.title }}</h1>
       {{ content }}
diff --git a/docs/_layouts/reference.html b/docs/_layouts/reference.html
@@ -2,11 +2,11 @@
 layout: default
 ---
 
-<div class="d-flex flex-1">
+<div class="d-md-flex flex-1">
   {% assign sidebarItems = site.data.reference.children %}
   {% include reference_sidebar.html %}
 
-  <section class="col-9 px-5 f4">
+  <section class="col-lg-9 px-5 f4">
     <div class="container-md markdown-body">
       <h1 class="mb-4 f0-light">{{ page.title }}</h1>
       {{ content }}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<aside class="col-3 pl-4 pt-1 bg-gray">`
	`1`	`+<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">`
`2`	`2`	`<nav>`
`3`	`3`	`<ul class="f3-light ml-4">`
`4`	`4`	`{% for item in sidebarItems %}`