Skip to content

Commit

Permalink
spacing to use margin rather than padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@stubbornella
stubbornella committed Sep 19, 2010
1 parent bd2af59 commit f61fb4b
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 28 deletions.
8 changes: 3 additions & 5 deletions core/content.css
View file
@@ -1,10 +1,6 @@
body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}

/* ====== Elements ====== */
img{display:block;}
em{font-style: italic;}
Expand Down Expand Up @@ -38,3 +34,5 @@ cite{display:block; text-align:right; padding-top: 10px;}
*/
/* ====== special formatting classes ====== */
.detail{color: #777; font-size:11px;display:block;}
/* ====== images ====== */
.icon{margin-right: 5px;}
6 changes: 4 additions & 2 deletions core/media/media.css
View file
Expand Up @@ -2,6 +2,8 @@
.media{margin: 10px;}
.media:after, .bd:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.media .bd{display:table-cell; zoom:1;}
.media .img{float:left;margin-right: 10px;}
.media .bd > :first-child{margin-top:0;}
.media .bd > :last-child{margin-bottom:0;}
.media .img{float:left;/*margin-right: 10px;*/}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
.media .imgExt{float:right; /*margin-left: 10px;*/}
40 changes: 24 additions & 16 deletions core/media/media.html
View file
Expand Up @@ -6,58 +6,66 @@
<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template_debug.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids_debug.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids_debug.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="../../core/media/media.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/media/media_debug.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/spacing/space.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/heading/heading.css" />
</head>
<body>

<div class="page">
<div class="body">
<h1>Media Block</h1>
<p>Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks.</p>

<div class="media">
<a href="http://twitter.com/stubbornella" class="img icon"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
<div class="bd">event date</div>
</div>


<div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img"><img src="../../../../Pictures/me/byMags.jpg" alt="img" height="32" width="32" /></a>
<div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/32x32" alt="img" height="32" width="32" /></a>
<div class="bd">
<p class="ptn"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></p>
</div>
</div>



<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="../../../../Pictures/me/byMags.jpg" alt="img" width="64" height="64" /></a>
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/64x64" alt="img" width="64" height="64" /></a>
<a href="http://twitter.com/stubbornella" class="imgExt">X</a>
<div class="bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="bd">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>



<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="../../../../Pictures/me/byMags.jpg" alt="img" /></a>
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/128x128" alt="img" /></a>
<!--<a href="http://twitter.com/stubbornella" class="imgExt">X</a>-->
<div class="bd">
<p class="pan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="media man">
<a href="http://twitter.com/stubbornella" class="img"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="media">
<a href="http://twitter.com/stubbornella" class="img icon"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
<div class="bd">event date</div>
</div>
</div>
</div>



<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="../../../../Pictures/icons/crystal_project/16x16/actions/1day.png" alt="img" /></a>
<div class="bd">event date</div>
</div>

<!-- TODO: make media player into a skin -->
<div class="media">
<a href="http://twitter.com/stubbornella" class="img" style="background-image:url(../../../../Pictures/me/sullivan-fast.jpg); width:510px; height:290px;"><img src="../../../../Pictures/icons/crystal_project/32x32/actions/player_play.png" alt="img" style="position:relative; top:50%; left:50%;margin-left: -32px; margin-top:-32px;opacity: .8;" height="64" width="64" /></a>
<a href="http://twitter.com/stubbornella" class="img" style="background-image:url(http://placehold.it/510x290); width:510px; height:290px;"><img src="../../../../Pictures/icons/crystal_project/32x32/actions/player_play.png" alt="img" style="position:relative; top:50%; left:50%;margin-left: -32px; margin-top:-32px;opacity: .8;" height="64" width="64" /></a>
<div class="bd">
<p>Last week I went to Yahoo! to give a talk about design performance for YUI theater.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Expand Down
2 changes: 1 addition & 1 deletion core/module/mod.css
View file
Expand Up @@ -7,7 +7,7 @@ version: 0.2
/* mod */
.mod{margin:10px;}
.mod .inner{/*background: url(skin/transparent.png) repeat left top;*/}
.inner,.bd,.ft{*zoom:1;}
.bd,.ft, .hd{display: inline-block; width:100%; *display:block; *width:auto; zoom:1;}
.inner:after,.hd:after,.bd:after,.ft:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.inner{position:relative;}
b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
Expand Down
3 changes: 2 additions & 1 deletion core/module/mod_doc.html
View file
Expand Up @@ -9,6 +9,7 @@
<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
<link rel="stylesheet" type="text/css" media="all" href="../../core/spacing/space.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_debug.css" /> -->
</head>
<body>
Expand Down Expand Up @@ -216,7 +217,7 @@ <h3>flow</h3>
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="bd">
<img src="skin/kakapo.png" alt="boo" />
<img src="http://placehold.it/269x179" alt="boo" />
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
Expand Down
6 changes: 3 additions & 3 deletions core/module/mod_skins.css
View file
Expand Up @@ -92,9 +92,9 @@
.login .inner{background: url(skin/universe_login.png) repeat left top;}
.comment .inner{background:#e2e2e2 none;}
/* ====== Block headers and footers ====== */
.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}
.section{background: #e9e9e9 url(skin/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;padding:0;}
/*.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}*/
.section{background: #e9e9e9 url(skin/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;/*padding:5px 10px;*/}
.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;/*padding:0;*/}
.act{background-color:#e9e9e9;}
.topper{background: #fff url(skin/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
Expand Down
7 changes: 7 additions & 0 deletions core/spacing/space.css
View file
Expand Up @@ -4,6 +4,13 @@
* Please use judiciously. You want to be using defaults most of the time, these are exceptions!
* <type><location><size>
*/
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}


.pan{padding:0}
.pas{padding:5px}
.pam{padding:10px}
Expand Down

0 comments on commit f61fb4b

Please sign in to comment.