Mirrors
/
babelmark.github.io
mirror of https://github.com/babelmark/babelmark.github.io.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '93db8ad809'
${ noResults }
babelmark.github.io/css
History
Christoph Päper 6c87ceefb0
display source and rendition side-by-side in large viewports 
Fixes #10

This would be a lot simpler with CSS Grid Layout instead of (or perhaps in addition to the class-based grid provided by [Skeleton](http://getskeleton.com)).

```` html
<div class="row">
  <div class="four columns result-names">
    <p><a href="..." target="_blank">...</a> <code class="result-lang">...</code></p>+
  </div>
  <div class="eight columns">
    <pre class=" language-html line-numbers"><code class="language-html">...</code></pre>
    <div class="preview markdown-body">...</div>
  </div>
</div>
````
````
div.row
  div.four.columns.result-names
  div.eight.columns
    pre.language-html.line-numbers
    div.preview.markdown-body
````
## Relevant existing CSS rules
```` css
@media (min-width: 550px) {
	.four.columns {
		width: 30.6666666667%;
	}
	.six.columns {
		width: 48%;
	}
	.eight.columns {
		width: 65.3333333333%
	}
	.column:first-child, .columns:first-child {
		margin-left: 0;
	}
	.column, .columns {
		margin-left: 4%;
	}
}
pre[class*="language-"] {
	margin: .5em 0;
	border-left: 10px solid #358ccb;
}

.markdown-body:before {
	display: table;
	content: "";
}
.markdown-body:after {
	display: table;
	clear: both;
	content: "";
}
````
## New CSS rules
```` css
@media (min-width: 1000px) {
	pre.language-html.line-numbers,
	div.preview.markdown-body {
		margin: 0.5em 4% 1em 0; /* 4% like .columns */
		width: 48%; /* like .six.columns */
		float: left; /* like .columns */
		box-sizing: border-box; /* like .columns */
	}
	pre.language-html.line-numbers {
		max-width: 80ch; /* improve legibility */
	}
	div.preview.markdown-body {
		margin-left: 0; /* like .colums:first-child */
	}
	.markdown-body::before,
	.markdown-body::after {
		display: none;
	}
}
````
 		6 years ago
..
main.scss display source and rendition side-by-side in large viewports 6 years ago