New style for rss-bridge

css/style.css

@@ -1,24 +1,5 @@
-/* html5 boilerplate from http://csswizardry.com/2011/01/the-real-html5-boilerplate/  */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
-/*------------------------------------*\
-    RESET
-\*------------------------------------*/
-/* http://meyerweb.com/eric/tools/css/reset/ 
-    v2.0b1 | 201101 
-    NOTE:WORK IN PROGRESS
-    USE WITH CAUTION AND TEST WITH ABANDON */
 
-html,body,div,span,applet,object,iframe,
-h1,h2,h3,h4,h5,h6,p,blockquote,pre,
-a,abbr,acronym,address,big,cite,code,
-del,dfn,em,img,ins,kbd,q,s,samp,
-small,strike,strong,sub,sup,tt,var,
-b,u,i,center,
-dl,dt,dd,ol,ul,li,
-fieldset,form,label,legend,
-table,caption,tbody,tfoot,thead,tr,th,td,
-article,aside,canvas,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section,summary,
-time,mark,audio,video{
     margin: 0;
     padding: 0;
     border: 0;
@@ -26,118 +7,124 @@ time,mark,audio,video{
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
+
 }
 /* HTML5 display-role reset for older browsers */
-article,aside,details,figcaption,figure,
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-footer,header,hgroup,menu,nav,section{
+
     display: block;
-}
-body{
-    line-height:1;
-}
-ol,ul{
-    list-style:none;
-}
-blockquote,q{
-    quotes:none;
-}
-blockquote:before,blockquote:after,
-q:before,q:after{
-    content:’’;
-    content:none;
-}
-/* remember to define visible focus styles! 
-:focus{
-    outline:?????;
-} */
 
-/* remember to highlight inserts somehow! */
-ins{
-    text-decoration:none;
-}
-del{
-    text-decoration:line-through;
 }
 
-table{
+/* Let's go for the actual style */
-    border-collapse:collapse;
-    border-spacing:0;
-}
-
-
-/*------------------------------------*\
-    $MAIN
-\*------------------------------------*/
-/* GO! */
-
 
 body {
-    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
+
-    font-size: 120%;
+	background-color: #EEEEEE;
+	font-family: 'Noto Sans';
+
 }
 
-h1 {
+header {
-    font-size: 300%;
+
-    font-weight: bold;
 	text-shadow:0 5px 6px rgba(150,150,150,0.69);
-}
-
-h2 {
-    font-size: 120%;
-    margin-bottom: 10px;
-}
-
-h2 a {
-    color:black;
-}
-
-form {
-    margin-bottom: 10px;
-}
-
-header,footer {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-header h2 {
-	margin-left:1em;
-}
-
-footer {
 	text-align: center;
-    font-size: 80%;
+	color: #1182DB;
+
+}
+
+header > h1 {
+
+	font-size: 300%;
+
+}
+
+header > h2 {
+
+	margin-left: 1em;
+	font-size: 120%;
+
 }
 
 section {
-    max-width: 600px;
+
+	background-color: #FFFFFF;
+	width: 80%;
 	margin: 30px auto;
 	padding: 10px 15px;
-    -webkit-box-shadow: 0 0 9px rgba(50,50,50,0.51);
+	text-align: center;
-    -moz-box-shadow: 0 0 9px rgba(50,50,50,0.51);
+
-    box-shadow: 0 0 9px rgba(50,50,50,0.51);
+	box-shadow: 0px 1px 2px rgba(0,0,0, 0.25);
-    background: #f5f5f5;
+
+}
+
+section > h2 {
+
+	font-size: 200%;
+	font-weight: bold;
+
+}
+
+a, a:link, a:visited {
+
+	color: #2196F3;
+
+}
+
+button {
+
+	line-height: 1.9em;
+	color: #FFF;
+	font-weight: bold;
+	vertical-align: middle;
+	padding: 6px 12px;
+	margin: 12px auto 0px;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+	border-radius: 2px;
+	border: 1px solid transparent;
+	min-width: 140px;
+	background: #2196F3 none repeat scroll 0% 0%;
+	cursor: pointer;
+
+	width: calc(20% - 4px);
+
 }
 
 .description {
-    font-size:70%;
+
-    margin-bottom: 10px;
+	margin: 10px;
-    position:relative;
+	text-decoration: underline;
-    bottom: 5px;
+
-    color: #555;
+}
+
+h5 {
+
+	margin: 20px;
+	font-weight: bold;
+
+}
+
+form {
+
+	margin-bottom: 6px;
+
 }
 
 .maintainer {
+
 	font-size: 60%;
-    float:right;
+	text-align: right;
-    color: #777;
+
 }
 
-.placeholder {
+input[type="text"] {
-    color: #aaa;
+
-}
+	background-color: white;
+	color: #404552;
+	border: 0px;
+	border-bottom: 2px solid #2196F3;
+	font-size: 1.1em;
+	margin-left: 8px;
+	padding-left: 4px;
 
-input, label {
-    font-size: 80%;
 }

lib/HTMLUtils.php

@@ -141,7 +141,7 @@ CARD;
 
 		}
 
-		$card .= '<span class="maintainer">'.$bridgeElement->maintainer.'</span>';
+		$card .= '<p class="maintainer">'.$bridgeElement->maintainer.'</p>';
 		$card .= '</section>';
 
 		return $card;