Merge pull request #28 from Crizz0/issue/25

Improve design and appearance of the pastebin body and view

Author: Crizz0

styles/prosilver/template/pastebin_body.html

@@ -5,10 +5,8 @@
 	<h2>{{ lang('PASTEBIN') }}</h2>
 
 	<div id="extras">
-
-
 		{% if S_AUTH_POST or S_MODE eq 'view' %}
-		<div class="mini-panel navbar">
+		<div class="new-entry mini-panel navbar">
 			<h3>{{ lang('PASTEBIN') }}</h3>
 			<ul>
 				{% if S_AUTH_POST %}<li><a href="{{ U_PASTEBIN }}">{{ lang('SNIPPET_NEW') }}</a></li>{% endif %}
@@ -18,7 +16,7 @@ <h3>{{ lang('PASTEBIN') }}</h3>
 		{% endif %}
 
 		{% if (S_AUTH_EDIT || S_AUTH_DELETE) && S_MODE eq 'view' %}
-		<div class="mini-panel navbar">
+		<div class="mod-panel mini-panel navbar">
 			<h3>{{ lang('MODERATE_SNIPPET') }}</h3>
 
 			<form method="post" action="{{ S_FORM_ACTION_MOD }}">
@@ -51,8 +49,6 @@ <h3>{{ lang('MODERATE_SNIPPET') }}</h3>
 		{% endif %}
 	</div>
 
-
-
 	<div id="content">
 		{% if S_MODE eq 'view' %}
 			{% INCLUDE 'pastebin_view.html' %}
@@ -61,9 +57,8 @@ <h3>{{ lang('MODERATE_SNIPPET') }}</h3>
 		{% endif %}
 	</div>
 
-
 	{% if S_AUTH_VIEW %}
-	<div class="mini-panel navbar">
+	<div class="last-snippets mini-panel navbar">
 		<h3>{{ lang('LATEST_SNIPPETS') }}</h3>
 
 		{% if loops.latest_snippets|length %}

styles/prosilver/theme/pastebin.css

@@ -3,8 +3,8 @@
 }
 
 .pastebin #pastebin-codebox dd {
-	margin: 0px 0px 0px 4em;
-	padding: 0.5em 0px 0px 0.5px;
+	margin: 0 0 0 4em;
+	padding: 5px 0 0 1px;
 }
 
 .pastebin #pastebin-codebox dt {
@@ -13,30 +13,52 @@
 	font-size: 0.8em;
 	font-weight: bold;
 	display:block;
-	padding: 0.2em 0px 0.2px 0.1em;
+	padding: 3px 0 0.5% 2px;
 }
 
 .pastebin .mini-panel {
 	display: block;
-	padding: 1em ;
-	margin-top: 1em;
-	margin-bottom: 1em;
+	font-size: 110%;
+	padding: 1% ;
+	margin-top: 12px;
+	margin-bottom: 12px;
+}
+
+.pastebin .new-entry {
+	float: right;
+	line-height: 1.5;
+	margin-right: 10px;
+	width: 30%
+}
+
+.pastebin .last-snippets {
+	float: right;
+	line-height: 1.5;
+	margin: 20px 10px 0 0;
+	width: 30%;
+}
+
+.pastebin .mod-panel {
+	float: left;
+	width: 63%;
 }
 
 .pastebin #content {
-	width: 100%;
+	font-size: 105%;
+	float: left;
+	width: 65%;
 }
 
 .pastebin #extras {
 	width: 100%;
 }
 
 .pastebin .mini-panel h3 {
-	margin-top: 0px;
+	margin-top: 0;
 }
 
 .pastebin .mini-panel ul {
-	padding-left: 1em;
+	padding-left: 12px;
 }
 
 .pastebin #copy_paste.inputbox{
@@ -46,9 +68,20 @@
 }
 
 .pastebin .textwrapper{
-	border: 1px solid;
-	border-color: #B4BAC0;
+	border: 1px solid #B4BAC0;
 	padding: 5px;
 	margin-bottom: 10px;
 	margin-top: 10px;
 }
+
+/* Responsive */
+@media (max-width: 860px) {
+	.pastebin .last-snippets,
+	.pastebin .mod-panel,
+	.pastebin .new-entry,
+	.pastebin #content {
+		float: none;
+		margin: 10px 0;
+		width: auto;
+	}
+}