Permalink
Browse files

spacing to use margin rather than padding

  • Loading branch information...
1 parent bd2af59 commit f61fb4bc44a97bdd68a73014b28ba5f8e8c2ddbe @stubbornella committed Sep 19, 2010
Showing with 44 additions and 28 deletions.
  1. +3 −5 core/content.css
  2. +4 −2 core/media/media.css
  3. +24 −16 core/media/media.html
  4. +1 −1 core/module/mod.css
  5. +2 −1 core/module/mod_doc.html
  6. +3 −3 core/module/mod_skins.css
  7. +7 −0 core/spacing/space.css
View
@@ -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;}
@@ -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;}
@@ -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;*/}
View
@@ -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>
View
@@ -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;}
@@ -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>
@@ -216,7 +217,7 @@
<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>
@@ -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;}
@@ -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}

0 comments on commit f61fb4b

Please sign in to comment.