Mercurial > agora
changeset 17:cb9a7c6c3800
Implement rounded boxes and titles for holding content
author | Jordi Gutiérrez Hermoso <jordigh@gmail.com> |
---|---|
date | Sat, 26 Jun 2010 18:57:46 -0500 |
parents | c2043cd474cd |
children | 8059d39dc6ef |
files | static/djangodocs.css templates/base.djhtml templates/bundle/index.djhtml templates/index.djhtml |
diffstat | 4 files changed, 126 insertions(+), 68 deletions(-) [+] |
line wrap: on
line diff
--- a/static/djangodocs.css Sat Jun 26 17:37:27 2010 -0500 +++ b/static/djangodocs.css Sat Jun 26 18:57:46 2010 -0500 @@ -2,31 +2,64 @@ html { background:#DEDFDB; color: #575955;} body { font:16px/1.5 Verdana,sans-serif; color: white;} #header { - background: #4877B1; color: white; - padding: 4px 0 12px 0; text-align: left; + background: #4877B1; color: white; + padding: 4px 0 12px 0; text-align: left; /* for IE */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #6F9DCD', endColorstr='#4877B1'); /* for webkit browsers */ background: -webkit-gradient(linear, left top, left bottom, from( #6F9DCD), to(#4877B1)); /* for firefox 3.6+ */ - background: -moz-linear-gradient(top, #6F9DCD, #4877B1); + background: -moz-linear-gradient(top, #6F9DCD, #4877B1); } #header h1 a { color: white; margin-left: 1em} -#columnwrap { - background: #DFE0DC; color: black; +#columnwrap { + background: #DFE0DC; color: black; background-image: url("agora-grey-large.png"); background-position: bottom right; background-repeat: no-repeat; + overflow: hidden; + width: 85%; + margin: 0 auto; } -#footer { - background-color:#8F918C; font-size:80%; +#footer { + background-color:#8F918C; font-size:80%; padding-top: 0.75em; text-align:center; padding-bottom: 0.75em; } + +.info{ + overflow: hidden; +} + +.whitebox{ + background-color: white; + color: black; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border: 1px solid #000; + float: left; + padding: 10px; + margin-top: 1em; + margin-bottom: 1em; +} + #copyright {margin-left: 1em;} #agora-logo{float: right;} + +#content-main{ + float: left; + overflow: hidden; + width: 60%; +} + +#content-related{ + float: right; + overflow: hidden; + width: 30%; +} + /*** links ***/ a {text-decoration: none;} a img {border: none;} @@ -38,7 +71,7 @@ #nav-top {height: 0.85em; background:#F8BF69; width: 100%; position: absolute;} #nav-bot {height: 0.85em; background:#FCAF3E; width: 100%; position: absolute;} #nav-main{position: relative; z-index: 1; height: 0.85em;} -#nav{ +#nav{ margin: 0; font-size: 12px; text-align: right; font-weight: bold; width: 100%; font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; @@ -76,10 +109,15 @@ /*** basic styles ***/ dd { margin-left:15px; } -h1,h2,h3,h4 { margin-top:1em; font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-weight:normal; } +h1,h2,h3,h4 { + margin-top:1em; + font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; + font-weight:normal; +} + h1 { font-size:218%; margin-bottom:.4em; line-height:1.1em; } -h2 { font-size:175%; margin-bottom:.6em; line-height:1.2em;} -h3 { font-size:150%; font-weight:bold; margin-bottom:.2em;} +h2 { font-size:175%; margin-bottom:.6em; line-height:1.2em; font-weight:bold;} +h3 { font-size:150%; font-weight:normal; margin-bottom:.2em; text-align:left;} h4 { font-size:125%; font-weight:bold; margin-top:1.5em; margin-bottom:3px; } div.figure { text-align: center; } div.figure p.caption { font-size:1em; margin-top:0; margin-bottom:1.5em; color: #555;}
--- a/templates/base.djhtml Sat Jun 26 17:37:27 2010 -0500 +++ b/templates/base.djhtml Sat Jun 26 18:57:46 2010 -0500 @@ -29,7 +29,7 @@ <div id="container"> <div id="header"> - <img src="static/agora.png" id="agora-logo"> + <img src="/static/agora.png" id="agora-logo"> <h1 id="logo"><a href="http://www.octave.org/">Agora Octave</a> </h1> <div id="nav"> @@ -37,7 +37,7 @@ <ul id="nav-main"> <li id="nav-homepage"><a href="/bundles" class="first">Latest</a></li> <li id="nav-snippets"><a href="/about">Snippets</a></li> - <li id="nav-discuss"><a href="/news">Discussions</a></li> + <li id="nav-discuss"><a href="/discuss">Discussions</a></li> <li id="nav-about"><a href="/news">About</a></li> </ul> @@ -47,20 +47,25 @@ <!-- END Header --> <div id="billboard">{% block billboard %}{% endblock %}</div> <div id="columnwrap"> - {% block columnwrap %} - <div id="content-main"> - {% block content %}{% endblock %} - </div> - <!-- END #content-main --> - {% endblock %} + + <div id="content-main"> + {% block content %} + {% endblock %} + </div> + <!-- END #content-main --> + <div id="content-related" class="sidebar"> + {% block content-related %} + {% endblock %} + </div> + <!-- END #content-related --> + </div> <!-- END #content --> <div id="footer"> <p id="copyright"> © 1998-{% now "Y"%} <a href="http://www.gnu.org/software/octave/acknowledgments.html"> - John W. Eaton and others</a> - unless otherwise noted. + John W. Eaton and others</a> unless otherwise noted. </p> </div> <!-- END #footer -->
--- a/templates/bundle/index.djhtml Sat Jun 26 17:37:27 2010 -0500 +++ b/templates/bundle/index.djhtml Sat Jun 26 18:57:46 2010 -0500 @@ -1,26 +1,33 @@ -{% extends "base.djhtml" %} +{% extends "controls.djhtml" %} {% block content %} -{% if bundle %} -<p> - Sup, this is {{ bundle.uploader }}'s {{ bundle.name }} bundle. -</p> - -{% if files %} -<ul> - {% for f in files%} - <li><a href="/{{f.bundle_file}}">{{f}}</a></li> - {% endfor %} -</ul> +<div class="info"> + {% if bundle %} + <h3> + {{bundle.name}} by <a href="/{{bundle.uploader}}/">{{bundle.uploader}}</a> + </h3> -{% else %} -<p> - No files in this bundle! -</p> -{% endif %} + <div class="whitebox"> + {% if files %} + <p> + files: + </p> + <ul> + {% for f in files%} + <li><a href="/{{f.bundle_file}}">{{f}}</a></li> + {% endfor %} + </ul> + </div> -{% else %} -Bundle not found! -{% endif %} -</p> + {% else %} + <p> + No files in this bundle! + </p> + {% endif %} + + + {% else %} + Bundle not found! + {% endif %} +</div> {% endblock %}
--- a/templates/index.djhtml Sat Jun 26 17:37:27 2010 -0500 +++ b/templates/index.djhtml Sat Jun 26 18:57:46 2010 -0500 @@ -1,28 +1,36 @@ -{% extends "base.djhtml" %} +{% extends "controls.djhtml" %} + {% block content %} -<p> -Main screen turn on! -</p> -<p> -<a href="">Lorem</a> ipsum dolor sit amet, consectetuer adipiscing elit, sed diam -nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat -volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation -ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. -Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse -molestie consequat, vel illum dolore eu feugiat nulla facilisis at -vero eros et accumsan et iusto odio dignissim qui blandit praesent -luptatum zzril delenit augue duis dolore te feugait nulla facilisi. -Nam liber tempor cum soluta nobis eleifend option congue nihil -imperdiet doming id quod mazim placerat facer possim assum. Typi non -habent claritatem insitam; est usus legentis in iis qui facit eorum -claritatem. Investigationes demonstraverunt lectores legere me lius -quod ii legunt saepius. Claritas est etiam processus dynamicus, qui -sequitur mutationem consuetudium lectorum. Mirum est notare quam -littera gothica, quam nunc putamus parum claram, anteposuerit -litterarum formas humanitatis per seacula quarta decima et quinta -decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant -sollemnes in futurum. -</p> -<p> +<h2> + Welcome to Agora Octave +</h2> +<div class="info"> +<h3> + information +</h3> +<div class="whitebox"> + <p> + Main screen turn on! + </p> +</div> +</div> +<div class="info"> + <h3> + latest submissions + </h3> + <div class="whitebox"> + <p> + <a href="">Lorem</a> ipsum dolor sit amet, consectetuer adipiscing + elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore + magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis + nostrud exerci tation ullamcorper suscipit lobortis nisl ut + aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor + in hendrerit in vulputate velit esse molestie consequat, vel illum + dolore eu feugiat nulla facilisis at vero eros et accumsan et + iusto odio dignissim qui blandit praesent luptatum zzril delenit + augue duis dolore te feugait nulla facilisi. + </p> + </div> +</div class="info"> +{% endblock %} -{% endblock %}