fix padding on mobile (#57)

daviian · appleboy · commit d29f3571b6dd · 2018-05-23T17:02:45.000+08:00
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,11 +1,13 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
 
-<div class="container is-centered page">
-	<div class=" content">
-		{{ .Content }}
+<div class="section">
+	<div class="container is-centered page">
+		<div class=" content">
+			{{ .Content }}
 
-		{{ partial "disqus.html" . }}
+			{{ partial "disqus.html" . }}
+		</div>
 	</div>
 </div>
 
diff --git a/layouts/doc/single.html b/layouts/doc/single.html
@@ -1,14 +1,16 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
 
-<div class="container is-centered page">
-	<div class="columns">
-		<div class="column is-one-quarter">
-			{{ partial "menu" . }}
-		</div>
-		<div class="column">
-			<div class=" content">
-				{{ .Content }}
+<div class="section">
+	<div class="container is-centered page">
+		<div class="columns">
+			<div class="column is-one-quarter">
+				{{ partial "menu" . }}
+			</div>
+			<div class="column">
+				<div class=" content">
+					{{ .Content }}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/layouts/page/single.html b/layouts/page/single.html
@@ -1,16 +1,18 @@
 {{ partial "header.html" . }}
 {{ partial "navbar.html" . }}
 
-<div class="container is-centered page">
-	<div class="columns">
-		<div class="column is-one-quarter">
-			{{ partial "menu" . }}
-		</div>
-		<div class="column">
-			<div class=" content">
-				{{ .Content }}
+<div class="section">
+	<div class="container is-centered page">
+		<div class="columns">
+			<div class="column is-one-quarter">
+				{{ partial "menu" . }}
+			</div>
+			<div class="column">
+				<div class=" content">
+					{{ .Content }}
 
-				{{ partial "disqus.html" . }}
+					{{ partial "disqus.html" . }}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/main.scss b/src/main.scss
@@ -42,23 +42,19 @@
   }
 }
 
-.page{
-  margin: 2em auto;
-
-  .card{
-    margin-bottom: 2em;
-
-    background-color: #fff;
-    box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
-    color: #4a4a4a;
-    max-width: 100%;
-    position: relative;
-    border: none;
-    border-radius: 0.2em;
-
-    .media-content a{
-      display: block;
-    }
+.page .card{
+  margin-bottom: 2em;
+
+  background-color: #fff;
+  box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1);
+  color: #4a4a4a;
+  max-width: 100%;
+  position: relative;
+  border: none;
+  border-radius: 0.2em;
+
+  .media-content a{
+    display: block;
   }
 }
 
@@ -122,4 +118,4 @@
   right: 0;
   z-index: 1;
   opacity: 1;
-}
+}
