add left-right padding for small res
authorIan Kelling <ian@iankelling.org>
Mon, 3 Oct 2016 20:56:23 +0000 (13:56 -0700)
committerIan Kelling <ian@iankelling.org>
Mon, 3 Oct 2016 20:56:23 +0000 (13:56 -0700)
b.rb
css/common.scss
css/gitweb-site.scss
css/main.scss

diff --git a/b.rb b/b.rb
index 4611b5d..6bd631d 100644 (file)
--- a/b.rb
+++ b/b.rb
@@ -82,7 +82,7 @@ EOF
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
-    <header>
+    <header class="page_header">
       <h3><a href="/">iankelling.org</a>#{o[:header]}</h3>
     </header>
     <div class="main-content-stripe">
index d0c5e76..ca35862 100644 (file)
@@ -1,6 +1,6 @@
 /* a few other things are duplicated in main.css and gitweb.css,*/
-/* but they are for different classes and such, and it's not worth using*/
-/* css variables etc at this point. */
+
+$main-column-max-width: 700px;
 
 /* nice font seen elsewhere. google -> stackoverflow -> localfont.com */
 /* If I didn't use this font, I'd just go with sans-serif */
index 11b81e2..f884fc7 100644 (file)
@@ -11,8 +11,14 @@ body {
     border-width: 0px;
 }
 .page_header,.page_footer {
-    margin: 0 auto;
-    max-width: 700px;
+    // auto centers it
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 30px;
+    padding-right: 30px;
+    max-width: $main-column-max-width;
 }
 
 table.project_list {
@@ -31,7 +37,8 @@ div.page_header {
     margin-top: 21.0667px;
     margin-bottom: 21.0667px;
     /* remove padding added by gitweb's css */
-    padding: 0;
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 /* I tried to find all the css to override,*/
index 375f7ec..a9288e1 100644 (file)
@@ -29,7 +29,8 @@ div.comment {
 
 #comment-section {
     /* make the top/bottom of comments have more space */
-    padding: 30px 0;
+    padding-top: 30px;
+    padding-bottom: 30px;
 }
 
 
@@ -132,11 +133,16 @@ footer {
 footer p {
     margin: 0;
 }
-header,footer,.content,#comment-section {
-    /* top margin 0, left/right = auto, which centers it */
-    margin: 0 auto;
+.page_header,footer,.content,#comment-section {
+    // auto centers it
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 30px;
+    padding-right: 30px;
     /* default too wide */
-    max-width: 700px;
+    max-width: $main-column-max-width;
 }
 footer {
     font-size: 15px;