Skip to content

Instantly share code, notes, and snippets.

@Swizec

Swizec/dabblet.css

Created March 30, 2012 14:59
Show Gist options
  • Save Swizec/2252119 to your computer and use it in GitHub Desktop.
Save Swizec/2252119 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
#body {
min-height: 100%;
background: beige;
width: 100%;
}
#main {
display: -webkit-flexbox;
width: 100%;
height: 100%;
}
#main div {
flex-pack: center;
flex: 1;
border: 8px solid pink;
box-sizing: border-box;
border-radius: 12px;
padding: 6px;
margin: 4px;
transition: all 0.3s ease-in-out;
}
#main div:nth-child(2) {
flex: 2;
}
#main div img {
width: 100%;
max-width: 700px;
}
#main div:last-child {
margin-right: 0;
}
@media all and (orientation: portrait) {
#main {
flex-direction: column-reverse;
}
}
@media all and (orientation: landscape) {
#main {
flex-direction: row;
}
#main div {
border-color: green;
}
}
@media handheld {
#media div {
border: 0;
padding: 2px;
background: grey;
color: purple;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="main">
<div>I am the left one</div>
<div><img src="http://www.stfc.ac.uk/resources/image/RosDustLge.jpg" /></div>
<div>this is the right one</div>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment