Skip to content
This repository has been archived by the owner on May 15, 2018. It is now read-only.

Commit

Permalink
neue struktur css, basis typografie
Browse files Browse the repository at this point in the history
  • Loading branch information
kremalicious committed Feb 17, 2012
1 parent 10a331e commit 8d5a409
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 74 deletions.
3 changes: 3 additions & 0 deletions documents/Links.txt
Expand Up @@ -17,6 +17,9 @@ http://www.layerstyles.org/
Prefixr
http://prefixr.com/

Verical Rhythm
http://drewish.com/tools/vertical-rhythm


# Libraries

Expand Down
90 changes: 90 additions & 0 deletions html/assets/grid.css
@@ -0,0 +1,90 @@

body {
background: #e9f6fd;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iIzgyOGM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f6fd), color-stop(100%,#d3eefb));
background: -webkit-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: -o-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: -ms-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f6fd', endColorstr='#d3eefb',GradientType=0 );
}


/* ============================================================== */
/* Grid System */
/* ============================================================== */


/* 320px and up */
/* ============================================================== */

.container {
max-width: 1020px; /*Fluid bis zu maximal 1020px*/
margin: 1em auto; /*zentriert Element*/
background: #ccc;
overflow: hidden;
padding-top: 1em;
padding-bottom: 1em;
}

img, svg, video, audio, embed, object {
max-width: 100%;
height: auto;
}

.row {
padding-left: 2%;
padding-right: 2%;
clear: both;
overflow: hidden;
}

.col1, .col2, .col3, .col4, .col5, .col6 {
background: #f7f7f7;
}



/* 480px and up */
/* ============================================================== */
@media only screen and (min-width: 480px) {


.col1, .col2, .col3, .col4, .col5, .col6 {
float: left;
margin: 0 2% 2% 0;
background: #f7f7f7;
}

.col1:last-child, .col2:last-child, .col3:last-child, .col4:last-child, .col5:last-child, .col6:last-child { margin-right: 0; }

.col1 { width: 15%; }
.col2 { width: 32%; }
.col3 { width: 49%; }
.col4 { width: 64%; }
.col5 { width: 81%; }
.col6 { width: 100%; }

.container.fixed { width: 480px; }

}


/* 768px and up */
/* ============================================================== */
@media only screen and (min-width: 768px) {



}


/* 1020px and up */
/* ============================================================== */
@media only screen and (min-width: 1020px) {



}
77 changes: 28 additions & 49 deletions html/assets/style.css
@@ -1,66 +1,47 @@

/* ============================================================== */
/* Base Typography (320px and up) */
/* ============================================================== */

body {
background: #e9f6fd;
background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f6fd), color-stop(100%,#d3eefb));
background: -webkit-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: -o-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: -ms-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
background: linear-gradient(top, #e9f6fd 0%,#d3eefb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f6fd', endColorstr='#d3eefb',GradientType=0 );
font: 16px/22px Georgia, "Times New Roman", Times, serif;
color: #444;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Share', cursive;
font-weight: 700;
}

h1 {
font-size: 1.5em; /* 24px */
line-height: 1.8333em; /* 44px */
margin-top: 0.9167em;
margin-bottom: 0em;
}
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

/* ============================================================== */
/* Grid System */
/* ============================================================== */
a, a:visited { }
a:hover { }
a:active { }


.container {
max-width: 1020px;
margin: 1em auto;
background: #ccc;
overflow: hidden;
padding-top: 1em;
padding-bottom: 1em;
}
/* 320px and up */
/* ============================================================== */

.row {
padding-left: 2%;
padding-right: 2%;
clear: both;
overflow: hidden;
}

.col1, .col2, .col3, .col4, .col5, .col6 {
background: #f7f7f7;
}

.container.fixed { width: 320px; }


/* 600px and up */
/* 480px and up */
/* ============================================================== */
@media only screen and (min-width: 600px) {


.col1, .col2, .col3, .col4, .col5, .col6 {
float: left;
margin: 0 2% 2% 0;
background: #f7f7f7;
}

.col1:last-child, .col2:last-child, .col3:last-child, .col4:last-child, .col5:last-child, .col6:last-child { margin-right: 0; }
@media only screen and (min-width: 480px) {

.col1 { width: 15%; }
.col2 { width: 32%; }
.col3 { width: 49%; }
.col4 { width: 64%; }
.col5 { width: 81%; }
.col6 { width: 100%; }

.container.fixed { width: 600px; }

}

Expand All @@ -69,7 +50,6 @@ body {
/* ============================================================== */
@media only screen and (min-width: 768px) {

.container.fixed { width: 768px; }

}

Expand All @@ -78,6 +58,5 @@ body {
/* ============================================================== */
@media only screen and (min-width: 1020px) {

.container.fixed { width: 1020px; }

}
40 changes: 15 additions & 25 deletions html/index.html
Expand Up @@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="assets/h5bp.css">
<link rel="stylesheet" href="assets/grid.css">

<link href='http://fonts.googleapis.com/css?family=Share:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/style.css">

</head>
Expand All @@ -19,33 +22,20 @@
<section role="main">

<article class="col4">
<header>
<h1>Überschrift</h1>
</header>
<img src="http://placekitten.com/800/300" width="800px" height="300px" />
<p>Put a bird on it retro vinyl odd future, fap williamsburg banh mi freegan aesthetic mcsweeney's tofu hella leggings next level. Cardigan helvetica small batch, brooklyn bespoke stumptown fingerstache synth letterpress cray selvage. Shoreditch mcsweeney's flexitarian, narwhal mlkshk DIY bespoke squid leggings tattooed cosby sweater letterpress small batch retro. Tofu hoodie iphone cardigan readymade craft beer sartorial swag artisan williamsburg, pickled fingerstache chillwave tumblr mixtape. VHS wolf fixie portland blog skateboard. Banksy ethnic stumptown shoreditch +1, hoodie before they sold out yr polaroid dreamcatcher. Terry richardson organic art party banksy, kogi yr jean shorts locavore.</p>
<p>Put a bird on it retro vinyl odd future, fap williamsburg banh mi freegan aesthetic mcsweeney's tofu hella leggings next level. Cardigan helvetica small batch, brooklyn bespoke stumptown fingerstache synth letterpress cray selvage. Shoreditch mcsweeney's flexitarian, narwhal mlkshk DIY bespoke squid leggings tattooed cosby sweater letterpress small batch retro. Tofu hoodie iphone cardigan readymade craft beer sartorial swag artisan williamsburg, pickled fingerstache chillwave tumblr mixtape. VHS wolf fixie portland blog skateboard. Banksy ethnic stumptown shoreditch +1, hoodie before they sold out yr polaroid dreamcatcher. Terry richardson organic art party banksy, kogi yr jean shorts locavore.</p>
</article>

<aside class="col2">
<p>Whatever brunch put a bird on it helvetica bespoke gluten-free thundercats, sartorial raw denim cred seitan beard vegan. Cosby sweater blog readymade, lo-fi messenger bag mixtape fixie odd future trust fund +1 small batch mustache.</p>
</aside>

</section>

<footer class="col6">
<small>© Do you need some text for your website or whatever? *sigh* Okay…</small>
</footer>
</div>
</div>

<div class="container fixed">
<div class="row">

<header role="banner" class="col6"><h1>Fixed</h1></header>

<section role="main">

<article class="col4">
<p>Put a bird on it retro vinyl odd future, fap williamsburg banh mi freegan aesthetic mcsweeney's tofu hella leggings next level. Cardigan helvetica small batch, brooklyn bespoke stumptown fingerstache synth letterpress cray selvage. Shoreditch mcsweeney's flexitarian, narwhal mlkshk DIY bespoke squid leggings tattooed cosby sweater letterpress small batch retro. Tofu hoodie iphone cardigan readymade craft beer sartorial swag artisan williamsburg, pickled fingerstache chillwave tumblr mixtape. VHS wolf fixie portland blog skateboard. Banksy ethnic stumptown shoreditch +1, hoodie before they sold out yr polaroid dreamcatcher. Terry richardson organic art party banksy, kogi yr jean shorts locavore.</p>

<footer>
<header></header>
</footer>
</article>

<aside class="col2">
<aside role="complementary" class="col2">
<p>Whatever brunch put a bird on it helvetica bespoke gluten-free thundercats, sartorial raw denim cred seitan beard vegan. Cosby sweater blog readymade, lo-fi messenger bag mixtape fixie odd future trust fund +1 small batch mustache.</p>
</aside>

Expand All @@ -54,9 +44,9 @@
<footer class="col6">
<small>© Do you need some text for your website or whatever? *sigh* Okay…</small>
</footer>

</div>

</div>

</body>
</html>

0 comments on commit 8d5a409

Please sign in to comment.