Polish styles for mobile

theplant · Nov 15, 2021 · b7714b5 · b7714b5
1 parent e60c7ec
commit b7714b5
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 77 deletions.
diff --git a/builder.go b/builder.go
@@ -173,7 +173,7 @@ func (b *Builder) navigation(doc *DocBuilder) (r HTMLComponent) {
 	items := parentDocNodes(doc)
 
 	content := Div().Attr("aria-label", "Breadcrumbs").
-		Class("flex list-none lg:max-w-5xl mx-auto px-10")
+		Class("flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10")
 
 	for i := len(items) - 1; i >= 0; i-- {
 		content.AppendChildren(

diff --git a/content_group.go b/content_group.go
@@ -39,5 +39,5 @@ func (b *ContentGroupBuilder) MarshalHTML(ctx context.Context) (r []byte, err er
 		Div(
 			vs...,
 		).Class("sm:w-3/4"),
-	).Class("sm:flex sm:border-t mt-8").MarshalHTML(ctx)
+	).Class("sm:flex sm:border-t mt-4 sm:mt-8").MarshalHTML(ctx)
 }
diff --git a/content_table.go b/content_table.go
@@ -43,6 +43,6 @@ func (b *ContentTableBuilder) MarshalHTML(ctx context.Context) (r []byte, err er
 		Div(
 			H2(b.title),
 			Components(b.children...),
-		).Class("lg:max-w-5xl mx-auto px-10 mt-5"),
+		).Class("lg:max-w-5xl mx-auto px-6 sm:px-10 mt-5"),
 	).Class("py-4").MarshalHTML(ctx)
 }
diff --git a/doc.go b/doc.go
@@ -91,10 +91,10 @@ func (b *DocBuilder) ContentGroupItem(ctx context.Context) (r HTMLComponent) {
 			).Class("w-4 flex mr-4 text-gray-500 fill-current"),
 			Span(b.title),
 		).Class("inline-flex").Href(b.node.GetPageURL()),
-		Div(
+		If(len(b.abstractText) > 0, Div(
 			Div().Text(b.abstractText),
-		).Class("ml-8"),
-	).Class("mt-8")
+		).Class("ml-8")),
+	).Class("mt-4 sm:mt-8")
 	return
 }
 
@@ -162,10 +162,10 @@ func (b *DocBuilder) MarshalHTML(ctx context.Context) ([]byte, error) {
 					).Class("sticky top-4"),
 				).Class("ml-4 sm:w-3/12 font-medium text-base hidden sm:block text-gray-600"),
 			).Class("sm:flex mt-8 mb-16"),
-		).Class("lg:max-w-5xl mx-auto px-10"),
+		).Class("lg:max-w-5xl mx-auto px-6 sm:px-8"),
 
 		If(len(b.tables) > 0,
-			Div(b.tables...).Class("pt-4 pb-16 bg-gray-50"),
+			Div(b.tables...).Class("pb-16 bg-gray-50"),
 		),
 	).MarshalHTML(ctx)
 }

diff --git a/docjs/dist/docgo.css b/docjs/dist/docgo.css
diff --git a/docjs/dist/docgo.umd.min.js b/docjs/dist/docgo.umd.min.js
diff --git a/docjs/src/index.css b/docjs/src/index.css
@@ -11,11 +11,11 @@
     }
 
     h2 {
-        @apply text-xl sm:text-2xl lg:text-3xl font-medium mt-8;
+        @apply text-xl sm:text-2xl lg:text-3xl font-medium mt-4 sm:mt-8;
     }
 
     h3 {
-        @apply text-lg sm:text-xl lg:text-2xl font-medium mt-8;
+        @apply text-lg sm:text-xl lg:text-2xl font-medium mt-4 sm:mt-8;
     }
 
     p {
@@ -63,15 +63,15 @@
     }
 
     pre {
-        @apply bg-gray-100 rounded-2xl p-2 mt-6 overflow-auto;
+        @apply text-base bg-gray-100 rounded-2xl p-2 mt-6 overflow-auto;
     }
 
     pre code.hljs {
-        @apply bg-transparent text-base font-light block p-4;
+        @apply bg-transparent font-light block p-4;
     }
 
     p code {
-        @apply text-red-700 font-semibold italic;
+        @apply text-base text-red-700 font-semibold italic;
     }
 
 }
diff --git a/docjs/src/toc.vue b/docjs/src/toc.vue
@@ -6,7 +6,6 @@
 export default {
   name: 'toc',
   mounted() {
-    console.log("123")
     this.$nextTick(() => {
       const toc = this.$refs.toc;
       const matches = document.querySelectorAll(`body h2`);

diff --git a/docs/github-pages-integration.html b/docs/github-pages-integration.html
@@ -16,7 +16,7 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
@@ -32,7 +32,7 @@
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>Github Pages Integration</h1>
 
 <div class='sm:flex mt-8 mb-16'>

diff --git a/docs/hello-world-with-children.html b/docs/hello-world-with-children.html
@@ -16,7 +16,7 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
@@ -32,7 +32,7 @@
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>Hello World with children</h1>
 
 <div class='sm:flex mt-8 mb-16'>
@@ -51,18 +51,18 @@ <h1>Hello World with children</h1>
 </div>
 </main>
 
-<div class='pt-4 pb-16 bg-gray-50'>
+<div class='pb-16 bg-gray-50'>
 <section class='py-4'>
-<div class='lg:max-w-5xl mx-auto px-10 mt-5'>
+<div class='lg:max-w-5xl mx-auto px-6 sm:px-10 mt-5'>
 <h2>Topics</h2>
 
-<div class='sm:flex sm:border-t mt-8'>
+<div class='sm:flex sm:border-t mt-4 sm:mt-8'>
 <div class='sm:w-1/4 pb-4 border-b sm:border-none'>
 <h3>Essentials</h3>
 </div>
 
 <div class='sm:w-3/4'>
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='hello-world-with-children/how-to-say-hello.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -74,13 +74,9 @@ <h3>Essentials</h3>
 
 <span>How to say hello</span>
 </a>
-
-<div class='ml-8'>
-<div></div>
-</div>
 </div>
 
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='hello-world-with-children/how-to-say-good-bye.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -92,10 +88,6 @@ <h3>Essentials</h3>
 
 <span>How to say good bye</span>
 </a>
-
-<div class='ml-8'>
-<div></div>
-</div>
 </div>
 </div>
 </div>

diff --git a/docs/hello-world-with-children/how-to-say-good-bye.html b/docs/hello-world-with-children/how-to-say-good-bye.html
@@ -16,7 +16,7 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
@@ -40,7 +40,7 @@
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>How to say good bye</h1>
 
 <div class='sm:flex mt-8 mb-16'>

diff --git a/docs/hello-world-with-children/how-to-say-hello.html b/docs/hello-world-with-children/how-to-say-hello.html
@@ -16,7 +16,7 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
@@ -40,7 +40,7 @@
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>How to say hello</h1>
 
 <div class='sm:flex mt-8 mb-16'>

diff --git a/docs/hello-world.html b/docs/hello-world.html
@@ -16,7 +16,7 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
@@ -32,7 +32,7 @@
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>Hello World</h1>
 
 <div class='sm:flex mt-8 mb-16'>

diff --git a/docs/index.css b/docs/index.css
diff --git a/docs/index.html b/docs/index.html
@@ -16,15 +16,15 @@
 <body>
 <div id='app' v-cloak>
 <nav class='bg-gray-700 py-3 text-base font-normal mb-8'>
-<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-10'>
+<div aria-label='Breadcrumbs' class='flex list-none lg:max-w-5xl mx-auto px-6 sm:px-10'>
 <div class='inline-flex'>
 <a href='index.html' class='text-gray-50'>docgo Documentation</a>
 </div>
 </div>
 </nav>
 
 <div>
-<main class='lg:max-w-5xl mx-auto px-10'>
+<main class='lg:max-w-5xl mx-auto px-6 sm:px-8'>
 <h1>docgo Documentation</h1>
 
 <div class='sm:flex mt-8 mb-16'>
@@ -181,18 +181,18 @@ <h2><a name="children-docs" class="anchor" href="#children-docs" rel="nofollow"
 </div>
 </main>
 
-<div class='pt-4 pb-16 bg-gray-50'>
+<div class='pb-16 bg-gray-50'>
 <section class='py-4'>
-<div class='lg:max-w-5xl mx-auto px-10 mt-5'>
+<div class='lg:max-w-5xl mx-auto px-6 sm:px-10 mt-5'>
 <h2>Topics</h2>
 
-<div class='sm:flex sm:border-t mt-8'>
+<div class='sm:flex sm:border-t mt-4 sm:mt-8'>
 <div class='sm:w-1/4 pb-4 border-b sm:border-none'>
 <h3>Essentials</h3>
 </div>
 
 <div class='sm:w-3/4'>
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='github-pages-integration.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -204,13 +204,9 @@ <h3>Essentials</h3>
 
 <span>Github Pages Integration</span>
 </a>
-
-<div class='ml-8'>
-<div></div>
-</div>
 </div>
 
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='use-with-htmlgo.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -228,7 +224,7 @@ <h3>Essentials</h3>
 </div>
 </div>
 
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='the-difference-with-github-flavored-markdown.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -240,21 +236,17 @@ <h3>Essentials</h3>
 
 <span>The difference with Github Flavored Markdown</span>
 </a>
-
-<div class='ml-8'>
-<div></div>
-</div>
 </div>
 </div>
 </div>
 
-<div class='sm:flex sm:border-t mt-8'>
+<div class='sm:flex sm:border-t mt-4 sm:mt-8'>
 <div class='sm:w-1/4 pb-4 border-b sm:border-none'>
 <h3>Samples</h3>
 </div>
 
 <div class='sm:w-3/4'>
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='hello-world.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""
@@ -272,7 +264,7 @@ <h3>Samples</h3>
 </div>
 </div>
 
-<div class='mt-8'>
+<div class='mt-4 sm:mt-8'>
 <a href='hello-world-with-children.html' class='inline-flex'>
 <div class='w-4 flex mr-4 text-gray-500 fill-current'>
 <svg aria-hidden="true" class=""

diff --git a/docs/index.js b/docs/index.js