Merge pull request #77 from railsdoc/mobile-friendy-0

toshimaru · web-flow · commit aada28f2ee1f · 2021-05-08T11:20:53.000+09:00
Fix main padding and hide search form for mobile
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -23,7 +23,7 @@
 <body>
   <header class="navbar navbar-dark navbar-expand bg-dark flex-md-nowrap p-0 shadow sticky-header">
     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">{{ site.title }}</a>
-    <form class="w-100" action="/search" method="get">
+    <form class="w-100 d-none d-md-flex" action="/search" method="get">
       <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search" name="q">
     </form>
 
diff --git a/src/_sass/railsdoc.scss b/src/_sass/railsdoc.scss
@@ -124,15 +124,13 @@ code {
   }
 }
 
-// Content
 [role="main"] {
-  padding-top: 133px; /* Space for fixed navbar */
+  padding-top: 10px; /* Space for fixed navbar */
+  overflow-wrap: break-word;
   order: 1;
-}
 
-@media (min-width: 768px) {
-  [role="main"] {
-    padding-top: 48px; /* Space for fixed navbar */
+  @media (min-width: 768px) {
+    padding-top: 133px;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -124,15 +124,13 @@ code {`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`
`127`		`-// Content`
`128`	`127`	`[role="main"] {`
`129`		`- padding-top: 133px; /* Space for fixed navbar */`
	`128`	`+ padding-top: 10px; /* Space for fixed navbar */`
	`129`	`+ overflow-wrap: break-word;`
`130`	`130`	`order: 1;`
`131`		`-}`
`132`	`131`
`133`		`-@media (min-width: 768px) {`
`134`		`- [role="main"] {`
`135`		`- padding-top: 48px; /* Space for fixed navbar */`
	`132`	`+ @media (min-width: 768px) {`
	`133`	`+ padding-top: 133px;`
`136`	`134`	`}`
`137`	`135`	`}`
`138`	`136`