diff options
| -rw-r--r-- | mediagoblin/contrib/960_12_col.css | 357 | ||||
| -rw-r--r-- | mediagoblin/static/css/base.css | 16 | ||||
| l--------- | mediagoblin/static/css/contrib/960_12_col.css | 1 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/auth/login.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/auth/register.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/base.html | 46 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/edit/edit.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/edit/edit_profile.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/media_details.html | 2 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/root.html | 4 | ||||
| -rw-r--r-- | mediagoblin/templates/mediagoblin/submit/start.html | 4 |
11 files changed, 401 insertions, 45 deletions
diff --git a/mediagoblin/contrib/960_12_col.css b/mediagoblin/contrib/960_12_col.css new file mode 100644 index 00000000..48e86ee8 --- /dev/null +++ b/mediagoblin/contrib/960_12_col.css @@ -0,0 +1,357 @@ +/* + 960 Grid System ~ Core CSS. + Learn more ~ http://960.gs/ + + Licensed under GPL and MIT. +*/ + +/* + Forces backgrounds to span full width, + even if there is horizontal scrolling. + Increase this if your layout is wider. + + Note: IE6 works fine without this fix. +*/ + +body { + min-width: 960px; +} + +/* `Container +----------------------------------------------------------------------------------------------------*/ + +.container_12 { + margin-left: auto; + margin-right: auto; + width: 960px; +} + +/* `Grid >> Global +----------------------------------------------------------------------------------------------------*/ + +.grid_1, +.grid_2, +.grid_3, +.grid_4, +.grid_5, +.grid_6, +.grid_7, +.grid_8, +.grid_9, +.grid_10, +.grid_11, +.grid_12 { + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} + +.push_1, .pull_1, +.push_2, .pull_2, +.push_3, .pull_3, +.push_4, .pull_4, +.push_5, .pull_5, +.push_6, .pull_6, +.push_7, .pull_7, +.push_8, .pull_8, +.push_9, .pull_9, +.push_10, .pull_10, +.push_11, .pull_11 { + position: relative; +} + +/* `Grid >> Children (Alpha ~ First, Omega ~ Last) +----------------------------------------------------------------------------------------------------*/ + +.alpha { + margin-left: 0; +} + +.omega { + margin-right: 0; +} + +/* `Grid >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .grid_1 { + width: 60px; +} + +.container_12 .grid_2 { + width: 140px; +} + +.container_12 .grid_3 { + width: 220px; +} + +.container_12 .grid_4 { + width: 300px; +} + +.container_12 .grid_5 { + width: 380px; +} + +.container_12 .grid_6 { + width: 460px; +} + +.container_12 .grid_7 { + width: 540px; +} + +.container_12 .grid_8 { + width: 620px; +} + +.container_12 .grid_9 { + width: 700px; +} + +.container_12 .grid_10 { + width: 780px; +} + +.container_12 .grid_11 { + width: 860px; +} + +.container_12 .grid_12 { + width: 940px; +} + +/* `Prefix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .prefix_1 { + padding-left: 80px; +} + +.container_12 .prefix_2 { + padding-left: 160px; +} + +.container_12 .prefix_3 { + padding-left: 240px; +} + +.container_12 .prefix_4 { + padding-left: 320px; +} + +.container_12 .prefix_5 { + padding-left: 400px; +} + +.container_12 .prefix_6 { + padding-left: 480px; +} + +.container_12 .prefix_7 { + padding-left: 560px; +} + +.container_12 .prefix_8 { + padding-left: 640px; +} + +.container_12 .prefix_9 { + padding-left: 720px; +} + +.container_12 .prefix_10 { + padding-left: 800px; +} + +.container_12 .prefix_11 { + padding-left: 880px; +} + +/* `Suffix Extra Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .suffix_1 { + padding-right: 80px; +} + +.container_12 .suffix_2 { + padding-right: 160px; +} + +.container_12 .suffix_3 { + padding-right: 240px; +} + +.container_12 .suffix_4 { + padding-right: 320px; +} + +.container_12 .suffix_5 { + padding-right: 400px; +} + +.container_12 .suffix_6 { + padding-right: 480px; +} + +.container_12 .suffix_7 { + padding-right: 560px; +} + +.container_12 .suffix_8 { + padding-right: 640px; +} + +.container_12 .suffix_9 { + padding-right: 720px; +} + +.container_12 .suffix_10 { + padding-right: 800px; +} + +.container_12 .suffix_11 { + padding-right: 880px; +} + +/* `Push Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .push_1 { + left: 80px; +} + +.container_12 .push_2 { + left: 160px; +} + +.container_12 .push_3 { + left: 240px; +} + +.container_12 .push_4 { + left: 320px; +} + +.container_12 .push_5 { + left: 400px; +} + +.container_12 .push_6 { + left: 480px; +} + +.container_12 .push_7 { + left: 560px; +} + +.container_12 .push_8 { + left: 640px; +} + +.container_12 .push_9 { + left: 720px; +} + +.container_12 .push_10 { + left: 800px; +} + +.container_12 .push_11 { + left: 880px; +} + +/* `Pull Space >> 12 Columns +----------------------------------------------------------------------------------------------------*/ + +.container_12 .pull_1 { + left: -80px; +} + +.container_12 .pull_2 { + left: -160px; +} + +.container_12 .pull_3 { + left: -240px; +} + +.container_12 .pull_4 { + left: -320px; +} + +.container_12 .pull_5 { + left: -400px; +} + +.container_12 .pull_6 { + left: -480px; +} + +.container_12 .pull_7 { + left: -560px; +} + +.container_12 .pull_8 { + left: -640px; +} + +.container_12 .pull_9 { + left: -720px; +} + +.container_12 .pull_10 { + left: -800px; +} + +.container_12 .pull_11 { + left: -880px; +} + +/* `Clear Floated Elements +----------------------------------------------------------------------------------------------------*/ + +/* http://sonspring.com/journal/clearing-floats */ + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ + +.clearfix:before, +.clearfix:after, +.container_12:before, +.container_12:after { + content: '.'; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; +} + +.clearfix:after, +.container_12:after { + clear: both; +} + +/* + The following zoom:1 rule is specifically for IE6 + IE7. + Move to separate stylesheet if invalid CSS is a problem. +*/ + +.clearfix, +.container_12 { + zoom: 1; +}
\ No newline at end of file diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 1d04fc73..db35a121 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -59,12 +59,6 @@ a.mediagoblin_logo:hover { background-position:0px -28px; } -.mediagoblin_container { - width: 960px; - margin-left: auto; - margin-right: auto; -} - .mediagoblin_header_right { float:right; } @@ -105,22 +99,14 @@ a.mediagoblin_logo:hover { /* forms */ .form_box { - width:300px; - margin-left:auto; - margin-right:auto; background-color:#393939; background-image:url("../images/background_lines.png"); background-repeat:repeat-x; - padding:1px 83px 30px 83px; font-size:18px; -} - -.submit_box { - width:600px; + padding-bottom:30px; } .edit_box { - width:600px; background-image:url("../images/background_edit.png"); } diff --git a/mediagoblin/static/css/contrib/960_12_col.css b/mediagoblin/static/css/contrib/960_12_col.css new file mode 120000 index 00000000..15c360e4 --- /dev/null +++ b/mediagoblin/static/css/contrib/960_12_col.css @@ -0,0 +1 @@ +../../../contrib/960_12_col.css
\ No newline at end of file diff --git a/mediagoblin/templates/mediagoblin/auth/login.html b/mediagoblin/templates/mediagoblin/auth/login.html index c2e27c15..c056398a 100644 --- a/mediagoblin/templates/mediagoblin/auth/login.html +++ b/mediagoblin/templates/mediagoblin/auth/login.html @@ -23,7 +23,8 @@ <form action="{{ request.urlgen('mediagoblin.auth.login') }}" method="POST" enctype="multipart/form-data"> - <div class="login_box form_box"> + <div class="grid_3 alpha"> </div> + <div class="grid_4 prefix_1 suffix_1 form_box"> <h1>Log in</h1> {% if login_failed %} <div class="form_field_error">Login failed!</div> @@ -38,5 +39,6 @@ {% endif %} <p>Don't have an account yet? <a href="{{ request.urlgen('mediagoblin.auth.register') }}">Create one here!</a></p> </div> + <div class="grid_3 omega"> </div> </form> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/auth/register.html b/mediagoblin/templates/mediagoblin/auth/register.html index 730d684d..3db32ef3 100644 --- a/mediagoblin/templates/mediagoblin/auth/register.html +++ b/mediagoblin/templates/mediagoblin/auth/register.html @@ -23,12 +23,14 @@ <form action="{{ request.urlgen('mediagoblin.auth.register') }}" method="POST" enctype="multipart/form-data"> - <div class="register_box form_box"> + <div class="grid_3 alpha"> </div> + <div class="grid_4 prefix_1 suffix_1 form_box"> <h1>Create an account!</h1> {{ wtforms_util.render_divs(register_form) }} <div class="form_submit_buttons"> <input type="submit" value="submit" class="button" /> </div> </div> + <div class="grid_3 omega"> </div> </form> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 8e5fd55b..6adb2fe3 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -19,6 +19,8 @@ <head> <title>{% block title %}GNU MediaGoblin{% endblock title %}</title> <link rel="stylesheet" type="text/css" + href="{{ request.staticdirect('/css/contrib/960_12_col.css') }}"/> + <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/base.css') }}"/> {% block mediagoblin_head %} {% endblock mediagoblin_head %} @@ -28,29 +30,33 @@ {% block mediagoblin_body %} {% block mediagoblin_header %} <div class="mediagoblin_header"> - <div class="mediagoblin_container"> - {% block mediagoblin_logo %} - <a class="mediagoblin_logo" href="{{ request.urlgen('index') }}"></a> - {% endblock %}{% block mediagoblin_header_title %}{% endblock %} - <div class="mediagoblin_header_right"> - {% if request.user %} - {{ request.user['username'] }}'s account - <a href="{{ request.urlgen('mediagoblin.user_pages.user_home', - user= request.user['username']) }}">home</a> - <a href="{{ request.urlgen('mediagoblin.user_pages.user_gallery', - user= request.user['username']) }}">gallery</a> - (<a href="{{ request.urlgen('mediagoblin.auth.logout') }}">logout</a>) - {% else %} - <a href="{{ request.urlgen('mediagoblin.auth.login') }}"> - Login</a> - {% endif %} + <div class="container_12"> + <div class="grid_12"> + {% block mediagoblin_logo %} + <a class="mediagoblin_logo" href="{{ request.urlgen('index') }}"></a> + {% endblock %}{% block mediagoblin_header_title %}{% endblock %} + <div class="mediagoblin_header_right"> + {% if request.user %} + {{ request.user['username'] }}'s account + <a href="{{ request.urlgen('mediagoblin.user_pages.user_home', + user= request.user['username']) }}">home</a> + <a href="{{ request.urlgen('mediagoblin.user_pages.user_gallery', + user= request.user['username']) }}">gallery</a> + (<a href="{{ request.urlgen('mediagoblin.auth.logout') }}">logout</a>) + {% else %} + <a href="{{ request.urlgen('mediagoblin.auth.login') }}"> + Login</a> + {% endif %} + </div> + </div> </div> </div> - </div> {% endblock %} - <div class="mediagoblin_container"> - {% block mediagoblin_content %} - {% endblock mediagoblin_content %} + <div class="container_12"> + <div class="grid_12"> + {% block mediagoblin_content %} + {% endblock mediagoblin_content %} + </div> </div> {% endblock mediagoblin_body %} </body> diff --git a/mediagoblin/templates/mediagoblin/edit/edit.html b/mediagoblin/templates/mediagoblin/edit/edit.html index 51d0341d..ffe4f661 100644 --- a/mediagoblin/templates/mediagoblin/edit/edit.html +++ b/mediagoblin/templates/mediagoblin/edit/edit.html @@ -25,7 +25,8 @@ user= media.uploader().username, media= media._id) }}" method="POST" enctype="multipart/form-data"> - <div class="edit_box form_box"> + <div class="grid_2 alpha"> </div> + <div class="grid_6 prefix_1 suffix_1 edit_box form_box"> <h1>Editing {{ media.title }}</h1> {{ wtforms_util.render_divs(form) }} <div class="form_submit_buttons"> @@ -35,6 +36,7 @@ <img src="{{ request.app.public_store.file_url( media['media_files']['thumb']) }}" /> </div> + <div class="grid_2 omega"> </div> </form> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/edit/edit_profile.html b/mediagoblin/templates/mediagoblin/edit/edit_profile.html index 8ce474f0..274c8092 100644 --- a/mediagoblin/templates/mediagoblin/edit/edit_profile.html +++ b/mediagoblin/templates/mediagoblin/edit/edit_profile.html @@ -24,12 +24,14 @@ <form action="{{ request.urlgen('mediagoblin.edit.profile', user=user.username) }}" method="POST" enctype="multipart/form-data"> - <div class="edit_box form_box"> + <div class="grid_2 alpha"> </div> + <div class="grid_6 prefix_1 suffix_1 edit_box form_box"> <h1>Editing {{ user['username'] }}'s profile</h1> {{ wtforms_util.render_divs(form) }} <div class="form_submit_buttons"> <input type="submit" value="submit" class="button" /> </div> </div> + <div class="grid_2 omega"> </div> </form> {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/media_details.html b/mediagoblin/templates/mediagoblin/media_details.html index bd63a289..8cb23e81 100644 --- a/mediagoblin/templates/mediagoblin/media_details.html +++ b/mediagoblin/templates/mediagoblin/media_details.html @@ -17,9 +17,9 @@ #} {% extends "mediagoblin/base.html" %} {% block mediagoblin_content %} - {# temporarily, an "image gallery" that isn't one really ;) #} {% if media %} + <h1>Media details for {{media.title}}</h1> <div> <img src="{{ request.app.public_store.file_url( diff --git a/mediagoblin/templates/mediagoblin/root.html b/mediagoblin/templates/mediagoblin/root.html index 7261f4fc..e29abd51 100644 --- a/mediagoblin/templates/mediagoblin/root.html +++ b/mediagoblin/templates/mediagoblin/root.html @@ -18,7 +18,6 @@ {% extends "mediagoblin/base.html" %} {% block mediagoblin_content %} - <h1>{% trans %}Welcome to GNU MediaGoblin!{% endtrans %}</h1> {% if request.user %} @@ -39,8 +38,5 @@ {# temporarily, an "image gallery" that isn't one really ;) #} - <div> {% include "mediagoblin/utils/object_gallery.html" %} - </div> - {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/submit/start.html b/mediagoblin/templates/mediagoblin/submit/start.html index fe1f3369..55ed1a45 100644 --- a/mediagoblin/templates/mediagoblin/submit/start.html +++ b/mediagoblin/templates/mediagoblin/submit/start.html @@ -23,12 +23,14 @@ <form action="{{ request.urlgen('mediagoblin.submit.start') }}" method="POST" enctype="multipart/form-data"> - <div class="submit_box form_box"> + <div class="grid_2 alpha"> </div> + <div class="grid_6 prefix_1 suffix_1 edit_box form_box"> <h1>Submit yer media</h1> {{ wtforms_util.render_divs(submit_form) }} <div class="form_submit_buttons"> <input type="submit" value="Submit" class="button" /> </div> </div> + <div class="grid_2 omega"> </div> </form> {% endblock %} |