Merge pull request #51 from ashwinvis/fix/flex-width

ashwinvis · web-flow · commit 72834cb05fe3 · 2019-07-05T19:33:05.000+02:00
Responsive CSS grid stylesheet
diff --git a/github-markdown.css b/github-markdown.css
@@ -10,7 +10,6 @@ html {
 }
 
 body {
-    min-width: 1020px;
     font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
     /* color: #333; */
     background-color: #fff;
@@ -31,22 +30,27 @@ td,th {
 }
 
 .container {
-    width: 980px;
+    display: grid;
+    grid-template-columns: 0.5em 1fr 0.5em;
+    grid-template-rows: 0fr  1fr 0fr;
+    max-width: 1020px;
     margin-right: auto;
     margin-left: auto
 }
 
 .container:before {
-    display: table;
     content: ""
 }
 
 .container:after {
-    display: table;
     clear: both;
     content: ""
 }
 
+.item {
+    display: flex;
+}
+
 .boxed-group {
     position: relative;
     border-radius: 3px;
@@ -68,19 +72,17 @@ td,th {
 }
 
 .repository-with-sidebar:before {
-    display: table;
     content: ""
 }
 
 .repository-with-sidebar:after {
-    display: table;
     clear: both;
     content: ""
 }
 
 .repository-with-sidebar .repository-sidebar {
     float: right;
-    width: 38px
+    width: 38px;
 }
 
 .repository-with-sidebar .repository-sidebar .sidebar-button {
@@ -102,7 +104,7 @@ td,th {
 }
 
 .repository-with-sidebar .repository-sidebar .clone-url.open {
-    display: block
+    display: flex;
 }
 
 .repository-with-sidebar .repository-sidebar .clone-options {
@@ -119,13 +121,19 @@ td,th {
     cursor: pointer
 }
 
-.repository-with-sidebar .repository-content {
-    /* float: left; */
-    width: 920px;
+.repository-with-sidebar, .repository-content {
+    float: left;
+    width: 100%;
+}
+
+@media (min-width: 1020px) {
+    .repository-with-sidebar, .repository-content {
+        width: 1020px;
+    }
 }
 
+
 .repository-with-sidebar.with-full-navigation .repository-content {
-    width: 790px;
 }
 
 .repository-with-sidebar.with-full-navigation .repository-sidebar {
@@ -247,12 +255,10 @@ td,th {
 }
 
 .markdown-body hr:before {
-  display: table;
   content: "";
 }
 
 .markdown-body hr:after {
-  display: table;
   clear: both;
   content: "";
 }
diff --git a/index.html b/index.html
@@ -10,7 +10,6 @@
   <style>
     .markdown-body {
       min-width: 200px;
-      max-width: 790px;
       margin: 0 auto;
       padding: 30px;
     }
@@ -70,16 +69,23 @@
   </script>
 </head>
 <body>
-  <div class="wrapper">
-    <div class="container">
+  <div class="container">
+    <div class="item row1"></div>
+    <div class="item row1"></div>
+    <div class="item row2"></div>
+    <div class="item row2">
       <div class="repository-with-sidebar repo-container new-discussion-timeline with-full-navigation">
-        <div id="js-repo-pjax-container" class="repository-content context-loader-container">
-          <div id="readme" class="boxed-group flush clearfix announce instapaper_body md">
-            <article class="markdown-body"></article>
-          </div>
-        </div>
-      </div>
+         <div id="js-repo-pjax-container" class="repository-content context-loader-container">
+           <div id="readme" class="boxed-group flush clearfix announce instapaper_body md">
+             <article class="markdown-body"></article>
+           </div>
+         </div>
+       </div>
     </div>
+    <div class="item row2"></div>
+    <div class="item row3"></div>
+    <div class="item row3"></div>
+    <div class="item row3"></div>
   </div>
   <div id="con-error" style="display:none">Live preview is unavailable</div>
 </body>

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,6 @@ html {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`body {`
`13`		`- min-width: 1020px;`
`14`	`13`	`font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";`
`15`	`14`	`/* color: #333; */`
`16`	`15`	`background-color: #fff;`
`@@ -31,22 +30,27 @@ td,th {`
`31`	`30`	`}`
`32`	`31`
`33`	`32`	`.container {`
`34`		`- width: 980px;`
	`33`	`+ display: grid;`
	`34`	`+ grid-template-columns: 0.5em 1fr 0.5em;`
	`35`	`+ grid-template-rows: 0fr 1fr 0fr;`
	`36`	`+ max-width: 1020px;`
`35`	`37`	`margin-right: auto;`
`36`	`38`	`margin-left: auto`
`37`	`39`	`}`
`38`	`40`
`39`	`41`	`.container:before {`
`40`		`- display: table;`
`41`	`42`	`content: ""`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`.container:after {`
`45`		`- display: table;`
`46`	`46`	`clear: both;`
`47`	`47`	`content: ""`
`48`	`48`	`}`
`49`	`49`
	`50`	`+.item {`
	`51`	`+ display: flex;`
	`52`	`+}`
	`53`	`+`
`50`	`54`	`.boxed-group {`
`51`	`55`	`position: relative;`
`52`	`56`	`border-radius: 3px;`
`@@ -68,19 +72,17 @@ td,th {`
`68`	`72`	`}`
`69`	`73`
`70`	`74`	`.repository-with-sidebar:before {`
`71`		`- display: table;`
`72`	`75`	`content: ""`
`73`	`76`	`}`
`74`	`77`
`75`	`78`	`.repository-with-sidebar:after {`
`76`		`- display: table;`
`77`	`79`	`clear: both;`
`78`	`80`	`content: ""`
`79`	`81`	`}`
`80`	`82`
`81`	`83`	`.repository-with-sidebar .repository-sidebar {`
`82`	`84`	`float: right;`
`83`		`- width: 38px`
	`85`	`+ width: 38px;`
`84`	`86`	`}`
`85`	`87`
`86`	`88`	`.repository-with-sidebar .repository-sidebar .sidebar-button {`
`@@ -102,7 +104,7 @@ td,th {`
`102`	`104`	`}`
`103`	`105`
`104`	`106`	`.repository-with-sidebar .repository-sidebar .clone-url.open {`
`105`		`- display: block`
	`107`	`+ display: flex;`
`106`	`108`	`}`
`107`	`109`
`108`	`110`	`.repository-with-sidebar .repository-sidebar .clone-options {`
`@@ -119,13 +121,19 @@ td,th {`
`119`	`121`	`cursor: pointer`
`120`	`122`	`}`
`121`	`123`
`122`		`-.repository-with-sidebar .repository-content {`
`123`		`- /* float: left; */`
`124`		`- width: 920px;`
	`124`	`+.repository-with-sidebar, .repository-content {`
	`125`	`+ float: left;`
	`126`	`+ width: 100%;`
	`127`	`+}`
	`128`	`+`
	`129`	`+@media (min-width: 1020px) {`
	`130`	`+ .repository-with-sidebar, .repository-content {`
	`131`	`+ width: 1020px;`
	`132`	`+ }`
`125`	`133`	`}`
`126`	`134`
	`135`	`+`
`127`	`136`	`.repository-with-sidebar.with-full-navigation .repository-content {`
`128`		`- width: 790px;`
`129`	`137`	`}`
`130`	`138`
`131`	`139`	`.repository-with-sidebar.with-full-navigation .repository-sidebar {`
`@@ -247,12 +255,10 @@ td,th {`
`247`	`255`	`}`
`248`	`256`
`249`	`257`	`.markdown-body hr:before {`
`250`		`- display: table;`
`251`	`258`	`content: "";`
`252`	`259`	`}`
`253`	`260`
`254`	`261`	`.markdown-body hr:after {`
`255`		`- display: table;`
`256`	`262`	`clear: both;`
`257`	`263`	`content: "";`
`258`	`264`	`}`