widelands-dev team mailing list archive

[kaputtnik <somal@xxxxxxxx>]

kaputtnik has proposed merging lp:~franku/widelands-website/css_changes into lp:widelands-website.

Requested reviews:
  Widelands Developers (widelands-dev)

For more details, see:
https://code.launchpad.net/~franku/widelands-website/css_changes/+merge/271388

This branch contains changes to font-size and line height and changes them from fixed to relative. This will pay attention to font related settings of a browser. See https://wl.widelands.org/forum/topic/1797/ for the main reason. Some other css changes are also included. In detail:

* changed fixed font-size to relative font sizes.
* changed fixed line-height to relative line-height
* add more space between two paragraphs
* Border of tables in forum gets better visibility (dark gray instead of black)
* top and bottom margins of headers are now the same in forum and wiki
* removed small code in template "/wiki/view.html" because a link to "Create this article?" is already shown
* removed poll.css because it's unused (the css-styles for displaying polls are all done in the javascript code)
* removed general shadowing of fonts, instead adding a new class "shaded" which could be used where it is needed
* small corrections of colors, where i feel it would look better (f.e.text shadow)

I tried to get as close to the current state while changing the values. 

The stylesheets for the developers documentation is untouched, because i couldn't verify the results yet.

Some disadvantages of the font-size changes:

1.Text in codeblocks are mostly displayed smaller than with fixed font-size, depending on the browser a user uses. Thats because each browser has his own font-settings for codeblocks. In firefox they are much smaller than in chrome. If needed we could set a fixed font-size for codeblocks.

2.Bold formatted texts looks a little bit blurry. I noticed it f.e. on the "Latest Post" block on the right. That's because the translation of relative values into pixels results mostly in something like "14.234 pixel" which most displays couldn't display. See http://www.w3.org/Style/Examples/007/units.de.html#font-size for an explanation.

Please ask for screenshots if you are unsure about some things. 
-- 
Your team Widelands Developers is requested to review the proposed merge of lp:~franku/widelands-website/css_changes into lp:widelands-website.

=== modified file 'media/css/base.css'
--- media/css/base.css	2015-01-08 21:40:25 +0000
+++ media/css/base.css	2015-09-16 21:44:13 +0000
@@ -9,10 +9,9 @@
 	background-color: #e9c78a;
 	background-image: url("../img/parchment.png");
 	font-family: sans-serif;
-	font-size: 14px;
-	line-height: 20px;
+	font-size: 0.9em;
+	line-height: 1.4em;
 	color: #ffffee;
-	text-shadow: #000000 1px 1px 0px;
 }
 
 /*+++++++++++++++++++++++++*/
@@ -84,6 +83,7 @@
 
 code {
 	background-image: url("../img/black50.png");
+	font-size: 1em;
 }
 /*No double background*/
 pre > code {
@@ -100,17 +100,16 @@
 	background-image: url("../img/black50.png");
 	outline: none;
 	color: #ffffff;
-	text-shadow: #000000 1px 1px 0px;
 	vertical-align: middle;
 	cursor: pointer;
 	font-family: inherit;
-	font-size: 12px;
+	font-size: 0.9em;
 	font-weight: bold;
 }
 
 textarea {
 	font-weight: normal;
-	font-size: 14px;
+	font-size: 0.9em;
 }
 
 input:hover, button:hover, textarea:hover {
@@ -127,6 +126,12 @@
 	color: #181;
 	margin-top: 0px;
 	font-weight: normal;
+	text-shadow: #1F4B23 1px 1px 0px;
+}
+
+/* different margin for headers where text could be written */
+div.blogEntry h1, h2, h3, h4, h5, h6 {
+	margin: 0.8em 0em 0.5em 0em;
 }
 
 svg {
@@ -135,7 +140,7 @@
 
 td {
 	vertical-align: top;
-	line-height: 20px;
+	line-height: 1.4em;
 }
 
 .posLeft {
@@ -174,7 +179,7 @@
 	color: #ffffee;
 }
 .small {
-	font-size: 12px;
+	font-size: 0.8em;
 }
 
 a.small {
@@ -209,6 +214,10 @@
 	font-style: italic;
 }
 
+.shaded {
+	text-shadow: #000000 1px 1px 0px;
+}
+
 /* Base */
 
 div#wrapper {
@@ -263,15 +272,11 @@
 	box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
 }
 
-div.loginBox div.right{
-	width: 120px;
-}
-
 div.loginBox ul {
 	margin: 0px;
 	padding: 0px;
 	list-style-type: none;
-	line-height: 18px;
+	line-height: 1.5em;
 }
 
 div.loginBox h4 {
@@ -370,7 +375,7 @@
 	display: block;
 	padding: 8px;
 	border-top: 1px solid black;
-	font-size: 12px;
+	font-size: 0.8em;
 }
 
 div.columnModuleBox ul li:first-child {

=== modified file 'media/css/forum.css'
--- media/css/forum.css	2015-04-01 20:01:41 +0000
+++ media/css/forum.css	2015-09-16 21:44:13 +0000
@@ -54,7 +54,7 @@
 /******************/
 
 tr.spacer {
-	height: 10px;
+	height: 1em;
 	border: none;
 }
 
@@ -71,8 +71,8 @@
 
 .authorStats {
 	text-align: left;
-	font-size: 10px;
-	line-height: 12px;
+	font-size: 0.7em;
+	line-height: 1.1em;
 }
 
 /*****************/
@@ -94,7 +94,7 @@
 }
 
 div.blogEntry .post p {
-	margin-bottom: 4px;
+	margin-bottom: 0.5em;
 }
 
 .post blockquote {
@@ -114,12 +114,12 @@
 
 .post th {
 	padding: 0 1em 0 1em;
-	border: 1px solid black;
+	border: 1px solid #474444;
 }
 
 .post td {
 	padding: 0 1em 0 1em;
-	border: 1px solid black;
+	border: 1px solid #474444;
 }
 
 /*****************/

=== modified file 'media/css/help.css'
--- media/css/help.css	2012-05-19 19:55:15 +0000
+++ media/css/help.css	2015-09-16 21:44:13 +0000
@@ -11,7 +11,7 @@
 table.help th {
 	padding: 4px;
 	font-weight: normal;
-	font-size: 12px;
+	font-size: 0.8em;
 	text-align: left;
 }
 

=== modified file 'media/css/navigation.css'
--- media/css/navigation.css	2013-10-27 11:49:24 +0000
+++ media/css/navigation.css	2015-09-16 21:44:13 +0000
@@ -60,7 +60,7 @@
 	display: block;
 	width: 120px;
 	height: 50px;
-	line-height: 50px;
+	line-height: 3.5em;
 	float: left;
 	border-right: 1px solid black;
 	text-align: center;
@@ -108,10 +108,10 @@
 	display: block;
 	width: 255px;
 	height: 20px;
-	line-height: 20px;
+	line-height: 1.7em;
 	padding: 4px;
 	text-align: left;
-	font-size: 12px;
+	font-size: 0.8em;
 	border: none;
 }
 

=== removed file 'media/css/poll.css'
--- media/css/poll.css	2009-03-28 13:38:44 +0000
+++ media/css/poll.css	1970-01-01 00:00:00 +0000
@@ -1,58 +0,0 @@
-
-.poll_plot {
-    text-align: center;
-    width: 100%;
-}
-
-.post_date { font-size: 90%;}
-
-.poll {
-    border: 1px solid rgb(9, 9, 9);
-    width: 100%;
-}
-
-.poll h3.title {
-    font-weight: bold;
-    font-size: 12px;
-    padding-left: 12px;
-    background-image: url('../img/Navbar.png');
-    background-repeat: repeat-x;
-    border-left: 0px solid #999999;
-    border-right: 0px solid #999999;
-    border-bottom: 0px solid #999999;
-    padding-top: 2px;
-    padding-bottom: 0px;
-    margin: 0px;
-}
-.poll .content {
- line-height: 120%;
- border: 0px;
- padding: 2px;
- padding-top: 5px;
- padding-left: 15px;
- background-color: #3F3F3F;
- background: url(../img/background-3F3F3F.png);
-}
-
-.poll .info_line {
-	 text-align: right;
-	 padding: 3px;
-	 margin: 0px;
-    background-color: #222222;
-	 background: url(../img/background-222.png);
-}
-	
-.poll .bottom_line {
-	 background-color: #222222;
-	 background: url(../img/background-222.png);
-    table-layout: fixed;
-}
-.poll .comments {
-	text-align: left;
-}
-.poll .admin {
-	text-align: center;
-}
-	
-	
-

=== modified file 'media/css/wiki.css'
--- media/css/wiki.css	2015-04-01 20:01:41 +0000
+++ media/css/wiki.css	2015-09-16 21:44:13 +0000
@@ -3,15 +3,15 @@
 	display: inline-block;
 	padding: 0px 8px;
 	background-image: url("../img/black20.png");
-	font-size: 12px;
+	font-size: 0.8em;
 	margin: 0em 0em 1em 1em;
-	line-height: 18px;
+	line-height: 1.5em;
 	float: right;
 	max-width: 20em;
 }
-
+		
 .toc ul {
-	padding-left: 20px;
+	padding-left: 1.8em;
 }
 
 /***********/
@@ -93,12 +93,8 @@
 	margin-top: 4px;	/*Correction for donatebox*/
 }
 
-h1, h2, h3, h4, h5, h6 {
-	margin: 1em 0em 0.5em 0em;
-}
-
 h1:first-child, h2:first-child {
-	margin-top: 0.5em;
+	margin-top: 0.2em !important;
 }
 
 

=== modified file 'templates/wiki/view.html'
--- templates/wiki/view.html	2012-09-10 10:13:04 +0000
+++ templates/wiki/view.html	2015-09-16 21:44:13 +0000
@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="posRight small">
+<div class="posRight small shaded">
 	{% if article.id %}
 		<a class="invertedColor" href="{% url wiki_edit article.title %}">{% trans "Edit this article" %}</a>
 		|
@@ -26,8 +26,6 @@
 			<a class="invertedColor" href="{% url wiki_observe article.title %}">{% trans "Observe" %}</a>
 			{% endif %}
 		{% endif %}
-	{% else %}
-		<a class="invertedColor" href="{% url wiki_edit article.title %}">{% trans "Create this article" %}</a>
 	{% endif %}
 </div>
 <h1>{{ article.title }}</h1>

=== modified file 'templates/wlpoll/base.html'
--- templates/wlpoll/base.html	2015-02-18 22:30:08 +0000
+++ templates/wlpoll/base.html	2015-09-16 21:44:13 +0000
@@ -6,7 +6,6 @@
 {% block extra_head %}
 {{block.super}}
 <link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/comments.css" />
-<link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/poll.css" />
 <script src="{{ MEDIA_URL }}js/highcharts_219/highcharts.js" type="text/javascript"></script>
 {% endblock %}
 

=== modified file 'templates/wlpoll/poll_detail.html'
--- templates/wlpoll/poll_detail.html	2012-05-05 11:01:31 +0000
+++ templates/wlpoll/poll_detail.html	2015-09-16 21:44:13 +0000
@@ -10,7 +10,7 @@
 
 {% block content %}
 	{% if perms.wlpoll %}
-	<div class="small posRight">
+	<div class="small posRight shaded">
 		{% if perms.wlpoll.poll_can_add %}<a href="/admin/wlpoll/poll/add/" class="invertedColor">Add New Poll</a>{% endif %}
 		{% if perms.wlpoll.poll_can_edit %}| <a href="/admin/wlpoll/poll/{{object.id}}/" class="invertedColor">Edit</a>{% endif %}
 		{% if perms.wlpoll.poll_can_delete %}| <a href="/admin/wlpoll/poll/{{object.id}}/delete/" class="invertedColor">Delete</a>{% endif %}