[css] progressively fixing rhythm
diff -r a1dbdf887ef4 web/data/banner.png
Binary file web/data/banner.png has changed
diff -r a1dbdf887ef4 web/data/banner.png
Binary file web/data/banner.png has changed
--- a/web/data/cubicweb.css Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.css Thu Apr 29 08:39:13 2010 +0200
@@ -8,52 +8,47 @@
/* xhtml tags */
/***************************************/
-.rhythm_bg { background: url(/data/rhythm20.png) repeat ! important; }
+/* scale and rhythm cf http://lamb.cc/typograph/ */
+body {
+ font-family: Verdana,sans-serif;
+ font-size: 12px;
+ line-height: 1.5;
+}
+h1, h2, h3 { margin-top:0; margin-bottom:0; }
+
+/* got rhythm ? beat of 12*1.25 = 15 px */
+.rhythm_bg { background: url(/data/rhythm18.png) repeat ! important; }
+
+/* scale 3:5 stranded */
+/* h1 { font-size:2em; } */
+/* h2 { font-size:1.61538em; } */
+/* h3 { font-size:1.23077em; } */
+
+/* scale le corbusier */
+/* h1 { font-size:2.11538em; } */
+/* h2 { font-size:1.61538em; } */
+/* h3 { font-size:1.30769em; } */
+
+/* scale traditional */
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.33333em; }
+h3 { font-size: 1.16667em; }
+
+/* paddings */
+h1 {
+ border-bottom: 0.06em solid black;
+ padding-top: 0.9em;
+ margin-bottom: 0.44em;
+}
+h2 { padding: 0.4em 0 0.25em 0; }
+h3 { padding: 0.5em 0 0.57em 0; }
html, body {
background: #e2e2e2;
}
-body {
- font-size: 69%;
- font-weight: normal;
- font-family: Verdana, sans-serif;
-}
-
-h1 {
- font-size: 188%;
- margin: 0.2em 0px 0.3em;
- border-bottom: 1px solid #000;
-}
-
-h2, h3 {
- margin-top: 0.2em;
- margin-bottom: 0.3em;
-}
-
-h2 {
- font-size: 135%;
-}
-
-h3 {
- font-size: 130%;
-}
-
-h4 {
- font-size: 120%;
- margin: 0.2em 0px;
-}
-
-h5 {
- font-size:110%;
-}
-
-h6{
- font-size:105%;
-}
-
a, a:active, a:visited, a:link {
- color: #ff4500;
+ color: #ff4500; /* XXX make this configurable */
text-decoration: none;
}
@@ -61,20 +56,6 @@
text-decoration: underline;
}
-a img, img {
- border: none;
- text-align: center;
-}
-
-p {
- margin: 0em 0px 0.2em;
- padding-top: 2px;
-}
-
-table, td, input, select{
- font-size: 100%;
-}
-
table {
border: none;
}
@@ -83,49 +64,6 @@
vertical-align: top;
}
-table td img {
- vertical-align: middle;
- margin-right: 10px;
-}
-
-ol {
- margin: 1px 0px 1px 16px;
-}
-
-ul{
- margin: 1px 0px 1px 4px;
-}
-
-ul li {
- margin-top: 2px;
- padding: 0px 0px 2px 8px;
- background: url("bullet_orange.png") 0% 6px no-repeat;
-}
-
-dt {
- font-size:1.17em;
- font-weight:600;
-}
-
-dd {
- margin: 0.6em 0 1.5em 2em;
-}
-
-fieldset {
- border: none;
-}
-
-legend {
- padding: 0px 2px;
- font: bold 1em Verdana, sans-serif;
-}
-
-input, textarea {
- padding: 0.2em;
- vertical-align: middle;
- border: 1px solid #ccc;
-}
-
input:focus {
border: 1px inset #ff7700;
}
@@ -135,27 +73,41 @@
}
pre {
- font-family: Courier, "Courier New", Monaco, monospace;
- font-size: 100%;
- color: #000;
- background-color: #f2f2f2;
- border: 1px solid #ccc;
+ clear: both;
+ font-family: 'Courier New', monospace;
+ letter-spacing: 0.015em;
+ padding: 0.5em;
+ margin: 0 1.5em 1.5em;
+ background-color: #F0F0F0;
+ border: 1px solid #CCBCA7;
+}
+
+p {
+ text-align: justify;
+ margin-bottom: 1.5em;
}
-code {
- font-size: 120%;
- color: #000;
- background-color: #f2f2f2;
- border: 1px solid #ccc;
+ol, ul {
+ list-style-type: disc;
+ margin-bottom: 1.25em;
+}
+
+p + ul {
+ margin-top: -1.5em;
}
-blockquote {
- font-family: Courier, "Courier New", serif;
- font-size: 120%;
- margin: 5px 0px;
- padding: 0.8em;
- background-color: #f2f2f2;
- border: 1px solid #ccc;
+li {
+ margin-left: 1.5em;
+}
+
+fieldset {
+ border: none;
+}
+
+h2 a, h2 a:active, h2 a:visited, h2 a:link,
+h3 a, h3 a:active, h3 a:visited, h3 a:link {
+ color: inherit;
+ text-decoration: none;
}
/***************************************/
@@ -172,7 +124,7 @@
.hr {
border-bottom: 1px dotted #ccc;
- margin: 1em 0px;
+ margin: 19px 0px 20px 0px;
}
.left {
@@ -192,8 +144,11 @@
visibility: hidden;
}
-li.invisible { list-style: none; background: none; padding: 0px 0px
-1px 1px; }
+li.invisible {
+ list-style: none;
+ background: none;
+ padding: 0px 0px 1px 1px;
+}
li.invisible div{
display: inline;
@@ -216,28 +171,27 @@
}
table#header a {
-color: #000;
+ color: #000;
+}
+
+table#header img#logo{
+ vertical-align: middle;
}
span#appliName {
- font-weight: bold;
- color: #000;
- white-space: nowrap;
+ font-weight: bold;
+ color: #000;
+ white-space: nowrap;
}
table#header td#headtext {
width: 100%;
}
-/* FIXME appear with 4px width in IE6 */
-div#stateheader{
- min-width: 66%;
-}
-
/* Popup on login box and userActionBox */
div.popupWrapper{
- position:relative;
- z-index:100;
+ position:relative;
+ z-index:100;
}
div.popup {
@@ -245,7 +199,7 @@
background: #fff;
border: 1px solid black;
text-align: left;
- z-index:400;
+ z-index: 400;
}
div.popup ul li a {
@@ -253,40 +207,48 @@
color: black;
}
+/* FIXME appear with 4px width in IE6 */
+div#stateheader{
+ min-width: 66%;
+}
+
/* main zone */
div#page {
- background: #e2e2e2;
- position: relative;
min-height: 800px;
+ margin: 8px;
}
-table#mainLayout{
- margin:0px 3px;
+table#mainLayout #navColumnLeft {
+ width: 16em;
+ padding-right: 8px;
}
-table#mainLayout td#contentcol {
- padding: 8px 10px 5px;
+table#mainLayout #navColumnRight {
+ width: 16em;
+ padding-left: 8px;
}
-table#mainLayout td.navcol {
- width: 16em;
+div#pageContent {
+ clear: both;
+/* margin-top:-1px; /* enable when testing rhythm */
+ background: #ffffff;
+ border: 1px solid #ccc;
}
+/* */
#contentheader {
margin: 0px;
padding: 0.2em 0.5em 0.5em 0.5em;
+ border:2px solid blue;
}
#contentheader a {
color: #000;
}
-div#pageContent {
- clear: both;
- padding: 10px 1em 2em;
- background: #ffffff;
- border: 1px solid #ccc;
+div#contentmain {
+ padding: 0 1em 1em;
}
/* rql bar */
@@ -303,9 +265,6 @@
}
/* boxes */
-div.navboxes {
- margin-top: 8px;
-}
div.boxFrame {
width: 100%;
@@ -385,17 +344,17 @@
}
ul.boxListing a.boxMenu:hover {
- background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
- cursor:pointer;
- border-top:medium none;
- }
+ background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
+ cursor:pointer;
+ border-top:medium none;
+}
+
a.boxMenu {
background: transparent url("puce_down.png") 98% 6px no-repeat;
display: block;
padding: 1px 9px 1px 3px;
}
-
a.popupMenu {
background: transparent url("puce_down_black.png") 2% 6px no-repeat;
padding-left: 2em;
@@ -545,12 +504,6 @@
/* entity views */
/***************************************/
-.mainInfo {
- margin-right: 1em;
- padding: 0.2em;
-}
-
-
div.mainRelated {
border: none;
margin-right: 1em;
@@ -569,7 +522,7 @@
}
div.section {
- margin-top: 0.5em;
+/* margin-top: 0.5em; */
width:100%;
}
@@ -728,7 +681,7 @@
border: 1px solid white;
border-bottom: none;
text-align: right ! important;
- /* insane IE row bug workaround */
+ /* insane IE row bug workraound */
position: relative;
left: -1px;
top: -1px;
@@ -810,10 +763,10 @@
/* footer */
/***************************************/
-div.footer {
+div#footer {
text-align: center;
}
-div.footer a {
+div#footer a {
color: #000;
text-decoration: none;
}
--- a/web/data/cubicweb.rhythm.js Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.rhythm.js Thu Apr 29 08:39:13 2010 +0200
@@ -1,6 +1,7 @@
$(document).ready(function() {
$('a.rhythm').click(function (event){
$('div#pageContent').toggleClass('rhythm_bg');
+ $('div#page').toggleClass('rhythm_bg');
event.preventDefault();
});
});
--- a/web/views/basecomponents.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basecomponents.py Thu Apr 29 08:39:13 2010 +0200
@@ -78,7 +78,7 @@
site_wide = True
def call(self):
- self.w(u'<a href="%s"><img class="logo" src="%s" alt="logo"/></a>'
+ self.w(u'<a href="%s"><img id="logo" src="%s" alt="logo"/></a>'
% (self._cw.base_url(), self._cw.uiprops['LOGO']))
--- a/web/views/basetemplates.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basetemplates.py Thu Apr 29 08:39:13 2010 +0200
@@ -168,7 +168,7 @@
self.wview('header', rset=self.cw_rset, view=view)
w(u'<div id="page"><table width="100%" border="0" id="mainLayout"><tr>\n')
self.nav_column(view, 'left')
- w(u'<td id="contentcol">\n')
+ w(u'<td id="contentColumn">\n')
components = self._cw.vreg['components']
rqlcomp = components.select_or_none('rqlinput', self._cw, rset=self.cw_rset)
if rqlcomp:
@@ -190,7 +190,7 @@
boxes = list(self._cw.vreg['boxes'].poss_visible_objects(
self._cw, rset=self.cw_rset, view=view, context=context))
if boxes:
- self.w(u'<td class="navcol"><div class="navboxes">\n')
+ self.w(u'<td id="navColumn%s"><div class="navboxes">\n' % context.capitalize())
for box in boxes:
box.render(w=self.w, view=view)
self.w(u'</div></td>\n')
@@ -254,7 +254,7 @@
w(u'<body>\n')
w(u'<div id="page">')
w(u'<table width="100%" height="100%" border="0"><tr>\n')
- w(u'<td class="navcol">\n')
+ w(u'<td id="navColumnLeft">\n')
self.topleft_header()
boxes = list(self._cw.vreg['boxes'].poss_visible_objects(
self._cw, rset=self.cw_rset, view=view, context='left'))
@@ -389,7 +389,7 @@
def call(self, **kwargs):
req = self._cw
- self.w(u'<div class="footer">')
+ self.w(u'<div id="footer">')
actions = self._cw.vreg['actions'].possible_actions(self._cw,
rset=self.cw_rset)
footeractions = actions.get('footer', ())
--- a/web/views/startup.py Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/startup.py Thu Apr 29 08:39:13 2010 +0200
@@ -42,7 +42,7 @@
def call(self, **kwargs):
"""The default view representing the instance's management"""
self._cw.add_css('cubicweb.manageview.css')
- self.w(u'<div>\n')
+ self.w(u'<h1>%s</h1>' % self._cw.property_value('ui.site-title'))
if not self.display_folders():
self._main_index()
else:
@@ -53,7 +53,6 @@
self.folders()
self.w(u'</td>')
self.w(u'</tr></table>\n')
- self.w(u'</div>\n')
def _main_index(self):
req = self._cw
@@ -79,7 +78,7 @@
self.w(u'<br/><a href="%s">%s</a>\n' % (xml_escape(href), label))
def folders(self):
- self.w(u'<h4>%s</h4>\n' % self._cw._('Browse by category'))
+ self.w(u'<h2>%s</h2>\n' % self._cw._('Browse by category'))
self._cw.vreg['views'].select('tree', self._cw).render(w=self.w)
def create_links(self):
@@ -93,7 +92,7 @@
self.w(u'</ul>')
def startup_views(self):
- self.w(u'<h4>%s</h4>\n' % self._cw._('Startup views'))
+ self.w(u'<h2>%s</h2>\n' % self._cw._('Startup views'))
self.startupviews_table()
def startupviews_table(self):
@@ -105,7 +104,7 @@
def entities(self):
schema = self._cw.vreg.schema
- self.w(u'<h4>%s</h4>\n' % self._cw._('The repository holds the following entities'))
+ self.w(u'<h2>%s</h2>\n' % self._cw._('Browse by entity type'))
manager = self._cw.user.matching_groups('managers')
self.w(u'<table class="startup">')
if manager: