From 5e02711e70ed3305a0fcca86cf1ceb9cbd1ea131 Mon Sep 17 00:00:00 2001 From: Coleman Date: Wed, 23 Jul 2008 06:08:48 -0500 Subject: [PATCH] use junebug styling as a new base instead of scribbish, minor page refactoring to support new styles --- app/views/albums/_albums.html.erb | 3 +- app/views/layout/application.html.erb | 23 +- app/views/pages/_page.html.erb | 22 +- app/views/pages/edit.html.erb | 4 +- public/stylesheets/application.css | 294 +++++++++++++++++++--- public/stylesheets/content.css | 348 -------------------------- public/stylesheets/layout.css | 49 ---- public/stylesheets/tuxbliki.css | 23 +- 8 files changed, 305 insertions(+), 461 deletions(-) delete mode 100644 public/stylesheets/content.css delete mode 100644 public/stylesheets/layout.css diff --git a/app/views/albums/_albums.html.erb b/app/views/albums/_albums.html.erb index 6fb1526..b0cb14a 100644 --- a/app/views/albums/_albums.html.erb +++ b/app/views/albums/_albums.html.erb @@ -4,7 +4,8 @@ <% albums.each_with_index do |album, index| -%>
-

<%= album.name -%> (<%= album.photos.size -%> photos)

+
<%= album.name -%> (<%= album.photos.size -%> photos)
+
<% if album.album_thumbnail -%><% end -%>
<% end -%> diff --git a/app/views/layout/application.html.erb b/app/views/layout/application.html.erb index f7cbf01..b61a8fd 100644 --- a/app/views/layout/application.html.erb +++ b/app/views/layout/application.html.erb @@ -37,14 +37,8 @@ function addLoadEvent(func) {
- <% flash.keys.each do |key| -%> -
- <%= flash[key] %> -
- <% end -%> - - + + <% flash.keys.each do |key| -%> +
+ <%= flash[key] %> +
+ <% end -%> +
<%= catch_content :for_layout %> @@ -77,12 +77,7 @@ function addLoadEvent(func) {
diff --git a/app/views/pages/_page.html.erb b/app/views/pages/_page.html.erb index 7ff4ec0..ca943f1 100644 --- a/app/views/pages/_page.html.erb +++ b/app/views/pages/_page.html.erb @@ -1,21 +1,21 @@ -
+
+

<%= show_page_link(page) %> <%= "#{page.comments.size} comments" unless page.comments.empty? %>

-
- Posted by <%= page.author.name rescue 'AUTHOR' -%> + +
+ Posted by <%= page.author.name rescue 'AUTHOR' -%> <%= time_lost_in_words page.created_at %> ago<% unless page.department.to_s.empty? -%> in the <%= page.department -%> department<% end -%>.
- <%= time_lost_in_words page.created_at %> ago<% unless page.department.to_s.empty? -%> in the <%= page.department -%> department<% end -%>. -
+
<%= show_page_description(page) %>
-
    - <% unless page.tags.empty? -%> -
  • Tags: <%= page.tags.collect { |t| "#{t.name}" }.join(' ') -%>
    • - <% end -%> -
  • Created: <%= page.created_at -%>
    • -
+ <% unless page.tags.empty? -%> +
+ Tagged: <%= page.tags.collect { |t| "#{t.name}" }.join(' ') -%> +
+ <% end -%>
\ No newline at end of file diff --git a/app/views/pages/edit.html.erb b/app/views/pages/edit.html.erb index 2153883..cfdb6da 100644 --- a/app/views/pages/edit.html.erb +++ b/app/views/pages/edit.html.erb @@ -20,13 +20,11 @@

Tags

-

<%= text_control 'tag_names', :size => 30 -%>

+

<%= text_control 'tag_names', :size => 30 -%>

-
-

<%= submit_button 'Update' %>

<% end -%> diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index b69211b..53da55b 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1,36 +1,274 @@ -/*-------------------------------------------------------------- - Application.css - Imports all stylesheets; sets defaults for bare elements - --------------------------------------------------------------*/ +/* Baseline Junebug style */ -@import 'layout.css'; -@import 'content.css'; - -@media print { #sidebar { display: none; } - #content { float: none; width: 90%; } - #content pre { color: #000; background: #eee; } - #content form.comments { display: none; } } - -body { - background: url(/images/background.gif) repeat-x left top; - font: normal 12px "lucida grande", verdana, sans-serif; +a:link, a:visited { + text-decoration: none; + color: #0000cc; +} +a:hover { + text-decoration: underline; + color: #0000cc; } -input, -textarea { font: normal 12px "bitstream vera sans", verdana, sans-serif; } +form { display: inline; } -abbr { border: none; } -cite { font-style: normal; } -a img { border: none; padding: 0; margin: 0; vertical-align: middle; text-decoration: none; } +span.actions a { + margin-right: 5px; +} -a:link, a:visited { color: #000; text-decoration: none; } -a:hover, a:active { text-decoration: underline; } +input.button { + margin: 5px 4px; +} + +input, textarea { + padding: 4px 2px 1px 2px; + margin-bottom: 5px; + margin-right: 5px; +/* font-family:"Bitstream Vera Sans Mono", "Monaco", "Courier", monospace;*/ +} + +input, textarea, pre, code { + font-family: monospace; +} + +textarea { + width: 95%; +} + +del { + color: #999; + background-color: #ddd; +} + +ins { + background-color: #cfc; + text-decoration: none; + color: #000; +} + +/* PAGE STRUCTURE */ +body { + background: #d7d7d7; + text-align: center; + min-width: 800px; + margin: 0px; +} + +#container { + font-family: 'Lucida Grande', 'Trebuchet MS', Arial, Helvetica, sans-serif; + width: 800px; + margin-left: auto; + margin-right: auto; + text-align: left; +} + +#header { + background-color: #6677aa; + padding: 8px 25px 10px; + color: #ffffff; + margin-bottom: 10px; +} + +#header a { + color: #ffffff; +} + +#header a:hover { + text-decoration: none; +} + +#header h1 { + font-size: 167%; + padding-bottom: 5px; + font-weight: normal; +} + +#header h2 { + float: right; + font-size: 110%; +} + +#page { + background-color: #ffffff; + border:5px solid #929292; + border-width:0 5px 5px 0; +} + +#footer { + border: 1px solid #eee; + background-color: #ddd; + color: #333; + font-size: 100%; + padding: 8px; + margin-top: 10px; + margin-bottom: 10px; + line-height: 150%; +} + +.formbox { + border-top: 1px solid #ccc; + background-color: #eee; + padding: 0 15px 10px 15px; +} + +/* WIKI CONTENT STYLES */ +#content { + min-height: 300px; + width: 605px; + padding-left: 20px; + float: left; +} + +#content h2, #content h3, #content h4, #content h5 { + font-weight: normal; + color: #447744; + border-bottom: 2px dotted #bbb; + margin-left: -5px; + margin-top: 20px; + margin-bottom: 10px; + padding: 1px 5px; +} + +#content h1 { + font-size: 182%; + margin-bottom: 10px; + border-bottom: 2px solid #bbb; +} + +#content h2 { + font-size: 140%; + background-color: #edf9ef; +} + +#content h3 { + font-size: 129%; +} + +#content h4 { + font-size: 107%; +} + +#content h5 { + font-size: 100%; +} + +#content ul { + list-style-type: square; +} + +#content li { + line-height: 150%; +} + +#content ol { + list-style-type: decimal; +} + +#content p { + line-height: 145%; + margin: 15px 0px; +} + +#content em { + font-style: italic; +} + +#content strong { + font-weight: bold; +} + +#content label { + font-weight: bold; +} + +#content code { + background: #f4f4f4; + padding: 5px; +} + +#content code.clean { + background: #ffffff; + padding: 2px; +} + +#content pre code{ + padding: 0px; +} + +#content pre { + display: block; + background: #f4f4f4; + border: 1px solid #ddd; + padding: 8px 20px; + margin: 15px 0px; + overflow: auto; +} + +#content pre.clean { + display: block; + background: #ffffff; + border: 0px; + padding: 0; + margin: 0; +} /* http://longren.org/2006/09/27/wrapping-text-inside-pre-tags */ -pre { - white-space: pre-wrap; - white-space: -moz-pre-wrap !important; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; +/* Browser specific (not valid) styles to make preformatted text wrap */ +#content pre { + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ } + +#content table { +} + +#content th, #content td { + padding: 2px 5px 2px 5px; + border: solid #eee; + vertical-align: top; +} + +#content th { + font-weight: bold; + background-color: #d7e0ff; +} + +.entry { + +} + +.entry ul { + margin: 10px 0px 10px 15px; +} + +.entry ol { + margin: 10px 0px 10px 24px; +} + +.entry .entry-author { + margin: 0px; + padding: 0px; + color: #444; + font-size: 90%; +} + +.entry .entry-author .fn, .entry .entry-author .dept { + font-style: italic; +} + +.entry .entry-tags { + background-color: #eee; + border: 1px solid #ddd; + font-size: 80%; + padding: 5px; + list-style-type: none; +} + +#sidebar { + width: 150px; + float: right; + font-size: 90%; + padding-top: 10px; +} \ No newline at end of file diff --git a/public/stylesheets/content.css b/public/stylesheets/content.css deleted file mode 100644 index 580b3aa..0000000 --- a/public/stylesheets/content.css +++ /dev/null @@ -1,348 +0,0 @@ -/*-------------------------------------------------------------- - Header - --------------------------------------------------------------*/ - -#header { - background: url(/images/header_shadow.gif) repeat-x left bottom; -} - -#header a:link, -#header a:visited { - color: #000; - text-decoration: none; -} - -#header a:hover, -#header a:active { - color: #930; background: transparent; - text-decoration: none; -} - -#header h1 { - font: bold 410% georgia, serif; - letter-spacing: -1px; - margin: 0; - float: left; -} - -#header h2 { - font: normal 12px verdana, arial, sans-serif; - margin: 5px; - float: right; -} - -/*-------------------------------------------------------------- - Content - --------------------------------------------------------------*/ - -#content {} - -#content h1, -#content h2, -#content h3, -#content h4, -#content h5 { - font-family: georgia, times; - font-weight: normal; - letter-spacing: -1px; -} - -#content h1 { - font-size: 28px; - margin: 0 0 0.3em; -} - -#content h2 { - font-size: 24px; - margin: 0 0 0.3em; -} - -#content h3 { - font-size: 22px; - margin: 1.2em 0 0.3em; -} - -#content h4 { - font-size: 20px; - margin: 1.2em 0 0.3em; - border-bottom: 1px dotted #bbb; -} - -#content h5 { - font-size: 20px; - background: #ffd; - margin: 1.2em 0 0.3em; - border-bottom: 1px dotted #aaa; -} - -#content p { - line-height: 14px; - margin: 0 0 1.2em; -} - -#content ul, -#content ol { - margin: 1em; - padding:0; -} - -#content ul { - list-style-type: square; -} - -#content li { - line-height: 15px; - margin: 0 0 0 1em; padding: 0; -} - -#content blockquote { - color: #555; - border-left: 5px solid #ccc; - margin: 1.3em 1em; padding: 0 1em; -} - -#content code { - font: normal 12px "bitstream vera sans mono", monaco "lucida console", "courier new", courier, serif; -} - -#content pre { - color: #63FF00; - background: #000; - overflow: auto; - font: normal 12px "bitstream vera sans mono", monaco "lucida console", "courier new", courier, serif; - margin: 0.9em 0; padding: 8px; -} - -/* Article Entries - class names based on http://microformats.org/wiki/hatom] */ -#content .hentry { - margin: 0 0 3em 0; -} - -#content .hentry .entry-content a { - background: #E0E0E0; - padding-left: 2px; - padding-right: 2px; -} - -#content .hentry .entry-title { - font-size: 30px; - line-height: 99%; - letter-spacing: -1.5px; - margin: 0; -} - -#content .hentry .entry-title a:link, -#content .hentry .entry-title a:visited { - color: #111; - text-decoration: none; -} - -#content .hentry .entry-title a:hover, -#content .hentry .entry-title a:active { - background: transparent; - text-decoration: underline; -} - -#content .hentry .entry-title .comment_count { color: #ddd; } - -#content .hentry .vcard, -#content .hentry .published { - float: left; - color: #a9a9a9; - font: normal 16px/14px helvetica, arial, verdana, sans-serif; - letter-spacing: -1px; - margin: 1px 0 0.6em 2px; -} - -#content .hentry .fn { - font-weight:bold; - margin-right: 5px; -} - -#content .hentry .fn a, -#content .hentry .fn a:hover { - color: #aaa; background: transparent; - text-decoration: none; -} - -#content .hentry .clear { clear: both; } - -#content .hentry .entry-content { } - -#content .hentry ul.meta { - font-size: 10px; - background: #eee; - margin: 0; padding: 5px; - border: 1px solid #ddd; - list-style-type: none; -} - -#content .hentry ul.meta li { - line-height: 13px; - margin: 0; padding: 0; -} - -#content .hentry .meta a:link, -#content .hentry .meta a:visited { - color: #555; - text-decoration: none; - border-bottom: 1px dotted #aaa; -} - -#content .hentry .meta a:hover, -#content .hentry .meta a:active { - color: #fff; -} - -/* Comments and Trackbacks */ -#content ol.comments, li.comment { - list-style-type: none; -} - -#content ol.comments { - margin: 0; padding: 0; -} - -#content li.comment { - border: 2px solid #ddd; - margin: 0 0 1.5em; padding: 1em; -} - -#content li.comment.preview { - background: #ffc; - border: 3px solid #fab444; - margin: 0 0 1.5em; padding: 1em; -} - -#content li.comment .author { - font-weight: bold; - margin-bottom: 1em; -} - -#content li.comment .author cite { - font-size: 16px; - letter-spacing: -1px; -} - -#content li.comment .author abbr { color: #999; } - -#content li.comment .author .gravatar { - margin: 0 0 0.5em 0.5em; - float: right; -} - -#content li.comment .author div { - margin: 0 0 0.5em 0.5em; - width: 60px; height: 60px; - background: url(/images/gravatar.gif) no-repeat left top; - float: right; -} - -#content form.comments { - background: #f2f2f2; - border-top: 1px solid #ddd; - padding: 1em 0.5em; -} - -#content form.comments fieldset { - border: none; -} - -#content form.comments legend { - display: none; -} - -#content form.comments label { - font-weight: bold; -} - -#content form.comments textarea { - width: 90%; height: 150px; - padding: 3px; -} - -/*-------------------------------------------------------------- - Sidebar - --------------------------------------------------------------*/ - -#sidebar { - font-size: 11px; -} - -#sidebar a:hover, #sidebar a:active { - color: #fff; - background-color: #000; - text-decoration: none; -} - -#sidebar h3 { - font: bold 14px "lucidamac bold", "lucida grande", verdana, arial, helvetica, sans-serif; - margin: 0 0 0.5em; -} - -#sidebar h3 a:link, -#sidebar h3 a:visited { - color: #000; text-decoration: none; -} - -#sidebar h3 a:hover, -#sidebar h3 a:active { - background: transparent; text-decoration: underline; -} - -#sidebar ul { - list-style-type: none; - margin: 0 0 2em; padding: 0; -} - -#sidebar li { - margin: 0; - padding: 1px 0; -} - -#sidebar em { font-style: normal; } - -/*-------------------------------------------------------------- - Footer - --------------------------------------------------------------*/ - -#footer { - border-top: 1px solid #ccc; - font-size: 90%; -} - -#footer a:link, -#footer a:visited { - color: #000; -} - -#footer a:hover, -#footer a:active { - color: #fff; - background: #000; - text-decoration: none; -} - -#footer hr { - display: none; -} - -#footer p { - width: 40%; - float: left; - margin: 0; padding: 0; -} - -#footer ul { - width: 40%; - margin: 0; padding: 0; - margin-right: 10px; - list-style-type: none; - text-align: right; - float: right; -} - -#footer li { - margin: 0; padding: 0 0 0 1em; - display: inline; -} diff --git a/public/stylesheets/layout.css b/public/stylesheets/layout.css deleted file mode 100644 index 4508caf..0000000 --- a/public/stylesheets/layout.css +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Controls the main layout (width, height, margin, padding) - * - * #container - * #header - * #page - * #content - * #sidebar - * #footer - */ -body { - text-align: center; - margin: 0; padding: 1em auto; -} - -#container { - max-width: 795px; - text-align: left; - margin: 0 auto; padding: 10px 0 0 0; -} - -#header { - height: 108px; - margin: 0px; padding: 5px; -} - -#page {} - -#content { - float: left; - width: 605px; - padding-left: 5px; -} - -#sidebar { - float: right; - text-align: left; - width: 150px; - padding: 5px 0px 10px 15px; - border-left: 1px dotted #ddd; -} - -#footer { - height: 40px; - margin: 0px; - padding-left: 10px; - padding-top: 5px; - clear: both; -} diff --git a/public/stylesheets/tuxbliki.css b/public/stylesheets/tuxbliki.css index 2323bc5..0bf21bf 100644 --- a/public/stylesheets/tuxbliki.css +++ b/public/stylesheets/tuxbliki.css @@ -1,3 +1,11 @@ +a img { + border: none; + padding: 0; + margin: 0; + vertical-align: middle; + text-decoration: none; +} + /* tag cloud and sidebar styling */ .tag_cloud, #related_links { padding: 5px 10px 10px 10px; @@ -97,6 +105,7 @@ text-align: center; font-weight: bold; line-height: 2.0em; + margin-top: 15px; margin-bottom: 15px; } @@ -115,16 +124,18 @@ /* auto completion styles */ .auto_complete { - width: 350px; - background: #ddd; + background: #eee; margin: 0px; + padding: 0px; } .auto_complete ul { - border:1px solid #888; + border: 1px solid #888; background: #fff; + padding: 0px; + margin: 0px; } .auto_complete ul li { - margin: 0; + margin: 0px; padding: 5px; list-style-type: none; } @@ -133,8 +144,6 @@ } .auto_complete ul strong.highlight { color: #800; - margin:0; - padding:0; } .centered { @@ -145,7 +154,7 @@ .photo_album { word-wrap: break-word; width: 170px; - height: 200px; + height: 220px; margin-top: 15px; padding: 5px; text-align: center;