From e15910b63779371b6d546efd4e289658a8da9a12 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sat, 19 Oct 2013 22:56:56 +0200
Subject: [PATCH] Closed #41

---
 public_html/media/css/auth.css         |   4 +--
 public_html/media/css/comment-list.css |  11 +++++++
 public_html/media/css/core.css         |  43 +++++++++++++++++--------
 public_html/media/css/index-index.css  |  32 ++++++------------
 public_html/media/css/post-small.css   |   1 +
 public_html/media/css/post-view.css    |  14 +++++++-
 public_html/media/css/user-list.css    |   8 ++++-
 public_html/media/css/user-view.css    |   3 +-
 public_html/media/img/bk-image.png     | Bin 0 -> 1971 bytes
 public_html/media/img/bk-swf.png       | Bin 0 -> 1265 bytes
 public_html/media/js/core.js           |  20 ++++++++++++
 src/Controllers/PostController.php     |   2 +-
 src/Views/index-index.phtml            |   2 +-
 src/Views/layout-normal.phtml          |   1 +
 src/Views/post-upload.phtml            |   2 +-
 src/Views/post-view.phtml              |  18 +++++------
 src/Views/user-view.phtml              |   4 +--
 17 files changed, 110 insertions(+), 55 deletions(-)
 create mode 100644 public_html/media/img/bk-image.png
 create mode 100644 public_html/media/img/bk-swf.png

diff --git a/public_html/media/css/auth.css b/public_html/media/css/auth.css
index 4a895172..03059c56 100644
--- a/public_html/media/css/auth.css
+++ b/public_html/media/css/auth.css
@@ -1,10 +1,10 @@
 form.auth {
 	margin: 0 auto;
-	width: 400px;
+	max-width: 400px;
 }
 
 form.auth label.left {
-	width: 144px;
+	width: 35%;
 }
 
 form.auth p {
diff --git a/public_html/media/css/comment-list.css b/public_html/media/css/comment-list.css
index c03a478b..9eaee645 100644
--- a/public_html/media/css/comment-list.css
+++ b/public_html/media/css/comment-list.css
@@ -15,3 +15,14 @@
 	border-bottom: 1px solid #eee;
 	margin-bottom: 1em;
 }
+
+.small-screen .comment-group .post-wrapper {
+	float: none;
+	text-align: center;
+}
+.small-screen .comment-group .post {
+	margin: 0 auto 1em auto;
+}
+.small-screen .comment-group .comments {
+	margin-left: 0;
+}
diff --git a/public_html/media/css/core.css b/public_html/media/css/core.css
index 1db5c025..5d95a197 100644
--- a/public_html/media/css/core.css
+++ b/public_html/media/css/core.css
@@ -27,6 +27,7 @@ body {
 }
 
 #top-nav {
+	width: 100%;
 	background: #eee;
 	color: black;
 }
@@ -109,12 +110,12 @@ body {
 }
 #top-nav li.safety a:hover { opacity: .7; }
 #top-nav li.safety a.inactive { opacity: 1; }
-#top-nav li.safety .safety-safe .enabled     { background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }
-#top-nav li.safety .safety-safe .disabled    { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
-#top-nav li.safety .safety-sketchy .enabled  { background: linear-gradient(to bottom, #F0F4C8 0%, #EBE57A 100%); }
-#top-nav li.safety .safety-sketchy .disabled { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
-#top-nav li.safety .safety-unsafe .enabled   { background: linear-gradient(to bottom, #FBC6B6 0%, #F37865 100%); }
-#top-nav li.safety .safety-unsafe .disabled  { background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-safe .enabled     { background: #cfe6c2; background: linear-gradient(to bottom, #CFE6C2 0%, #80C670 100%); }
+#top-nav li.safety .safety-safe .disabled    { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-sketchy .enabled  { background: #f0f4c8; background: linear-gradient(to bottom, #F0F4C8 0%, #EBE57A 100%); }
+#top-nav li.safety .safety-sketchy .disabled { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
+#top-nav li.safety .safety-unsafe .enabled   { background: #fbc6b6; background: linear-gradient(to bottom, #FBC6B6 0%, #F37865 100%); }
+#top-nav li.safety .safety-unsafe .disabled  { background: #a0a0a0; background: linear-gradient(to bottom, #a0a0a0 0%, #808080 100%); }
 
 
 
@@ -138,13 +139,6 @@ footer span:not(:last-child):after {
 	width: 256px;
 	margin-right: 2em;
 }
-#sidebar .sidebar-unit {
-	margin: 0 0 1.5em 0;
-	padding: 0.75em;
-	border: 1px solid #eee;
-	padding-left: 0;
-	border-left: 0;
-}
 #sidebar h1 {
 	margin-top: 0;
 }
@@ -162,15 +156,33 @@ footer span:not(:last-child):after {
 
 #inner-content {
 	overflow: hidden;
+	padding-bottom: 2em;
 }
 
-.footer-unit {
+.small-screen #sidebar {
+	float: none;
+	width: 100%;
+	padding: 0 0 1em 0;
+}
+.small-screen #inner-content {
+	float: none;
+	width: auto;
+}
+
+.bottom-unit {
 	padding: 0.5em 1em;
 	border: 1px solid #eee;
 	border-bottom: 0;
 	padding-bottom: 0;
 	margin: 1em 0 2em 0;
 }
+.left-unit {
+	margin: 0 0 1.5em 0;
+	padding: 0.75em;
+	border: 1px solid #eee;
+	padding-left: 0;
+	border-left: 0;
+}
 
 
 
@@ -259,8 +271,10 @@ form.aligned input[type=checkbox] {
 }
 .input-wrapper ul.tagit,
 .input-wrapper input,
+.input-wrapper textarea,
 .input-wrapper select {
 	width: 80%;
+	max-width: 80%;
 }
 
 label {
@@ -275,6 +289,7 @@ button {
 }
 ul.tagit,
 select,
+textarea,
 input:not([type=radio]):not([type=checkbox]):not([type=file]) {
 	border: 1px solid #ccc;
 	border-radius: 3px;
diff --git a/public_html/media/css/index-index.css b/public_html/media/css/index-index.css
index 5b633970..56e60622 100644
--- a/public_html/media/css/index-index.css
+++ b/public_html/media/css/index-index.css
@@ -23,60 +23,48 @@
 	padding: 5px;
 }
 
-#featured-post {
+#inner-content {
 	float: right;
 	width: 70%;
 	position: relative;
 }
 
-#featured-post .header .tags:before {
+#inner-content .header .tags:before {
 	margin: 0 0.5em;
 	content: '\2013';
 }
-#featured-post .header ul {
+#inner-content .header ul {
 	list-style-type: none;
 	display: inline;
 	margin: 0;
 	padding: 0;
 }
-#featured-post .header li {
+#inner-content .header li {
 	display: inline;
 }
-#featured-post .header li:not(:last-child) a:after {
+#inner-content .header li:not(:last-child) a:after {
 	content: ', ';
 }
 
-#featured-post .body {
+#inner-content .body {
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJElEQVQImWNgYGBgePfu3X8YZoABFA6SIqwS+HXgtANZF7IEAJnGPJE70lLLAAAAAElFTkSuQmCC');
 	margin: 1em 0;
 	text-align: center;
 }
-#featured-post .body img {
+#inner-content .body img {
 	max-width: 100%;
 	margin: 0 auto;
 	display: block;
 }
-#featured-post .body a {
+#inner-content .body a {
 	display: block;
 }
 
-#featured-post .header .favs-comments {
+#inner-content .header .favs-comments {
 	margin-left: 0.5em;
 	float: right;
 }
 
-#featured-post .footer {
+#inner-content .footer {
 	text-align: right;
 }
-
-@media (max-width: 600px) {
-	#sidebar {
-		float: none;
-		width: 100%;
-		padding: 0 0 1em 0;
-	}
-	#featured-post {
-		float: none;
-		width: 100%;
-	}
-}
diff --git a/public_html/media/css/post-small.css b/public_html/media/css/post-small.css
index 6b24ee4a..f14d497b 100644
--- a/public_html/media/css/post-small.css
+++ b/public_html/media/css/post-small.css
@@ -3,6 +3,7 @@
 	box-shadow: 0.25em 0.25em #eee;
 	padding: 0;
 	position: relative;
+	display: inline-block;
 }
 .post-type-flash {
 	border-color: #dd5;
diff --git a/public_html/media/css/post-view.css b/public_html/media/css/post-view.css
index 78d3786c..4a871c6f 100644
--- a/public_html/media/css/post-view.css
+++ b/public_html/media/css/post-view.css
@@ -9,9 +9,16 @@ embed {
 	max-width: 100%;
 }
 
+.post-type-image img {
+	background: url('../img/bk-image.png') lemonchiffon;
+}
+.post-type-flash embed {
+	background: url('../img/bk-swf.png') lemonchiffon;
+}
+
 #sidebar .tags ul {
 	list-style-type: none;
-	margin: 0 0 0 1em;
+	margin: 0;
 	padding: 0;
 }
 #sidebar .tags li .count {
@@ -109,3 +116,8 @@ ul.tagit {
 	padding: 0.5em;
 	display: none;
 }
+
+form.add-comment textarea {
+	width: 50em;
+	height: 8em;
+}
diff --git a/public_html/media/css/user-list.css b/public_html/media/css/user-list.css
index 25158075..90ee904f 100644
--- a/public_html/media/css/user-list.css
+++ b/public_html/media/css/user-list.css
@@ -12,10 +12,16 @@
 .user {
 	line-height: 1.5em;
 	margin-bottom: 1em;
-	width: 25em;
+	margin-right: 1em;
 	display: inline-block;
 }
 
+.user .details {
+	display: inline-block;
+	max-width: 25em;
+	white-space: pre;
+}
+
 nav.sort-styles ul {
 	list-style-type: none;
 	margin: 0 0 1em 0;
diff --git a/public_html/media/css/user-view.css b/public_html/media/css/user-view.css
index cfd07eac..d0b786fb 100644
--- a/public_html/media/css/user-view.css
+++ b/public_html/media/css/user-view.css
@@ -41,7 +41,7 @@
 }
 
 form.edit label.left {
-	width: 10em;
+	width: 9em;
 }
 
 form.edit .alert {
@@ -51,4 +51,5 @@ form.edit .alert {
 form.edit select,
 form.edit input {
 	width: 16em;
+	max-width: 90%;
 }
diff --git a/public_html/media/img/bk-image.png b/public_html/media/img/bk-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec308ec2f6b07f1b2560cda616a0bebac67ec8ef
GIT binary patch
literal 1971
zcmZ`)eLT~P9{wr%bhb06R>U0FD(~!KT46aF%WNYv%F8G-Bk!_Vk;v|$vzzy`sc|aQ
zc5EF(30u)sPF^zaZ%KJcvL%j_M2xfU{pa34?jO(h`99D0^L)O4J{-~s90UXd0RRBO
zdtk|Gj#2}=Q&T<7r2~O#(u~A-VE~{uAG|@;Qfmzc8RrT}y1!Sb1)SzV_5y%ZQvkU9
zBLI9+TbJhmAlViGl%W9NbR7WpCH^AwIjTNv3nSvN03gmih*Ya@65QPxTU%QjYAge{
zsGE9U%|wqthMGP84fl?i9{^y-Wjq$+clPy%7l90eHl6IL$iv^V;>$cs?s0p00?Q+7
zTQ0^O#~-yLj}yj$T>vM}Y2SQVB@$1(S0w-~>VT4M=c;=Y)!v_LBIG5gnBm_7@Be2>
z6NTSO1r|}m^-rcpo)mdIcb~5iMf$%QcYT}77_g!A=S9k(#!#N1c`?@rv~?70b4@(`
zE+k{1$V1Csgsl+FhUqNviP4VB`@BQithw3`w7}IHbK`!ZU5C7Kvw8x_&$F>Li&D>s
zP~%CfbtuQzCdV^a%%qd0<u5Mfce*^#4Y|mA8&NFjlFyL6vMijEcvA3@b}m%M5)pU1
z$A|pfo`O8o=ZD`_H{``j(%=o&7iVXaAtKii>DoI}(Q;J?FLYtt4@a@w2~+NvC1{||
z5V;_}A6>jSpN=u|CHp>qGP==S@w%R7VfV2KjESCLd=sri5_#BT{@MIY`$&n=`fZof
zWO=cf3<+*|!g({QafgNZ<Nk=xT)tEN9jF&-WCzQ-mO0aUGH0wPMzlWFjQE_-<Br`o
zy2>Gw&YL?x3&d?ar0i$u9xr)giR1=albG-=4XaoTvZSqDD(ZJ3k)}m13W9(PCTj9S
z<PLRN*s#svR_#~tN-Mh@$*GUIJKE>lPAn=n>*qdqk-aX&v>g5*qAI(xvJ9QQFi(Yc
zY!K$lu(|M@mJSTWFw^F;4W$f!S#wdCa(PpCB^?iWdDDS%QuSu$@CRi8>^+*I68>tj
zJNN?CR1aV0mt>G<tE0KM6Ajt*JfJcT#i)LJ^WbPNC$DXsbM;F0N8(LKE^Sth_8=Ix
zrg+9GMe8rN@k6tvM{19a1)YPSW^{|=t?6V#`A|KdXv{7X9Ado@3^rS*pP^2V7QTH*
zgavu@=Au_^6r*JOMEU|hvbG9T47w=H+a27<qJ>$Ee8PH*Tq}BqaTCSCy`REOL~#do
z!$tddccoP)_zSsG*2?PC^bdIdS-Yl`ah*-?1EVWl!q)ywtL@GrtL@SdPFeiR7+$Bj
z_I+xPBs&z|r#mD2qNf)vo>`H9>Ra)98f;k@W!_c8RQg%iH9bD5Lg9(OCaLC}3lxf|
z3-p<uF=)eSX*t4v<%U()e1}O%0<UjGyUvy|>*<CoP+m4LV})0)4Y#_w$wvclhE?W@
zVjPljZ5_QteD_S3%z-bpx}fe@Qc|x=a*h<Pc8drmXJg=vEG@FPvu}{YpGMU=Z&R1x
z=i@o==VBY;yhDUZ^SKZKJUKO^LDd|{uD@w0$WVZ@B?2Tm`dK<lv|vElCbX(9(R;Bs
zTy{EBc1bHc&+{0y+|*|vdB^F-+UmQ|I}v$Jb#;458D|{7BN9|@6ce9o;;x+7ok_&%
zCbB-U&Yv%%NBrihYnY43f`{-D<J}+_su>~30oglrQqM8ptEZ~;<Uc2fWO~`(3zZK3
zqTsQ6%$E+YBj}Uv23gi69*HzDw=zl}UU*;>dG5gd1hZ#CmZ~n=1?S#pl3-SMmpl1o
z|Lyb)d_~kL8HmvW-wfFe{z=LaF6Y_Up@vBvaj?*`BCwOT;aTw%PbP7dXYQLdk5yKd
z8o&t5G=asWa?|bg6+%#_CIYpmrPVXfwf4^z>d{9J7Cm4JY16rfH&l#=P%fdRE6a#E
z4?|yV086V?L!JexVHKjBH5hucz}lJlxu)i>X`#XOooomKqjYz9rilh&ghs?la)U`>
zkUOrledty3<T(GDsp$#GsaK(NiP<%{e?IPCQu_)0M~}<eB)&mTwcZO9!roLioRNlO
zamEvqDZbe4l{vw*_{si3-mQ(1(u;_c_;L~>1|*V#ZN9G(PdTSF?s;5iro$ZS(tLUr
zjCj$R|7;A&85Sp(z@qN%t^cJ><Gb|a`g{oQuG>Uw!Za1{29}nUAJPqe$Z=H2f`4D0
zVb=$74>1tF`fc)+5Pbue!N9HbqFD(K$}i5$5@b5-q@FiMaM?m6A;4kajK0cjs@C@d
zeBrP`Qp1g8cIS#^SeRw|(2&2kENRU`%Q;=#^oO6g->1<>|98|NiGui8-YK{`5wvAQ
z>^EOHE|ArB4hB$2qbw*beRXhKdIv4bpI=#^Y$xe=dNyqoIIG?)t*#5UUqSMlGfF)M
zjg4fKw4;A}ykFV&zF^?O?oWAFYI;h$_buH_{I8y{$=%YJ*!bCf^P=I`GBjZx4`7B<
znRF*w5?xII($>x%VP}i5bM!+Zoltg8NCzuhq?4^};{^K5{{-R^!lNQm{(qo@{f{^5
h0Ql>NSZWwO7Kn<YM$)ZFPadgl0Dt@hR^l4U{tGB+k(U4f

literal 0
HcmV?d00001

diff --git a/public_html/media/img/bk-swf.png b/public_html/media/img/bk-swf.png
new file mode 100644
index 0000000000000000000000000000000000000000..caad55ef96261e3a9c534991ddfc38629e58063e
GIT binary patch
literal 1265
zcmeAS@N?(olHy`uVBq!ia0vp^?m%qC!2%>bSbMsG6id3JuOkD)#(wTUiL5|AV{wqX
z6T`Z5GB1G~g=CK)Uj~LMH3o);76yi2K%s^g3=E|P3=FRlfCkNAU=S~uvn$XBD8ZEE
z?e4<Bu&P(t2*~5icXKQL|Ns9VApXgqb-p1KBv{}PSq!8-z}W3%wjBcl^8rs6$B>MB
zZ*N2fOS_A-JzSo?M9|5J<8;zTq1{?j|NpNRN?&>7*pY^at$ik!cYbI&6zV9Eq#$0E
zzr{Cu-@kK~cbB(|YKN_f*!YO;kn+9k!)*^P{CVb`)vutuF*DrXH#6talgy_%6^oS}
zW0QZ%%E$Q~j<#)8FgGx%iLwj~Z+yYey!7a%?#b-aC(q)Fm@#W+xBqKCW!=Clfj7c_
z<<9)pzU;y!*R0dtvMZaH7cF0z>%aY%h-gr@S&YrLIqBQJn#5#yt^1Vv?!wMLAMaKs
zx@Tr7UEDUIi;H=G*QxgDmp{c^S9e!1{ite@?swrES7%P;%zAlCUi&IdEmvmMrjX9I
zVB?E-`eq%ORr)x!zVv?S@@0$T_V#CqiFw7IKX@ogbkc%=S(4mWSG<4Y_h_lDZfpD>
z)}mgm$n3J%Sqmm~sZD)yCm>vNYh>@wzIP^TyMuO1O=YgUy254luNC3GE-O}L<SlW@
zs{JXOKYjAc>c>;hW-VJ<JH2T|cC^FaS#xID`YzoSG-YOJvRV<#%xiy}M7MnXy0)9k
zvEa!8O}B4rPi}a9X{Lr~;X>uCTi=%R91KZgN^`q5CCe=Ko{sw7z%%Q%|9Z9W3a6v{
z?Gqx#Gy7KP83t773fD|IwIoYzmKlq4^QtY)rm=wmA>9XMo2FL0RG%HR^3qIa)wXk5
zpPzs8o%rIllDJCK_hT799W}dNO*KE$E9zmgUhC8B=BYO)YsLO}5HaQD&4PD(CLKP}
z82&2j+mvNZPN&^<WgWL?sVrKe^&=x|S?8{8mv`^nyiSv=Pqw@1PGh;<?6}uqe6rkL
z(Z8}5tq_o%p%mgcFQ!<@T*Rd`y1aDx$_X61jEs$Ew(XQW7T#&GF+Y0Iy7nNg=`*Z9
zIE6j!&R*Vj$75AN;pe)#$#XWwEW5H<bycFGhpvyz&j8ce)A?+}*UwQ2ec*9<ok!@q
z{{a?7kM0Eh+q+5Z)vhKDjz?FsH>6#@@gnOO?^`dQDb|PX9P)d5uJz#756{A9mb+Un
z-RPpW%2UK^rHiJZYSZPcYdd$|&GIS9WLUP%MAWa=WUudm?JV7Q-hV4qc_x*$Ol()&
z;w^=yk6&C_IFDszOw?MV_ft-nzuSFkp@CW0?rRI@+zu3<5-+>dKC_~&W6`g?myxgP
ziafr2sWA|nSf%LrLrdP``^huu>D#x4-9O~p&m)xoHd1(wW!cK5>vaWr{?<g--kCr9
zPUqDwsjXX=GzD!j`10@J5gqIFUeQ}YoeD}D4K}>b`DyuSzu>fg*EZ^2ogighxa-Zy
zGs%JR+nCo!Y)m@ZC93^T{130Db=v2cXIb9BOs!ht8c~vxSdwa$T$Bo=7>o=IjdcwT
zbPX*-jEt;IEUiq8wGE7{3=G!2`zeN^AvZrIGp!Q0hWncxR{=F}f^5i1OiImRC@xPs
T^Xq>UP>{jX)z4*}Q$iB}sDL*9

literal 0
HcmV?d00001

diff --git a/public_html/media/js/core.js b/public_html/media/js/core.js
index 2cf0a3c7..a7e4734d 100644
--- a/public_html/media/js/core.js
+++ b/public_html/media/js/core.js
@@ -101,4 +101,24 @@ $(function()
 			form.append(input);
 		});
 	});
+
+	$(window).resize();
+});
+
+$(window).resize(function()
+{
+	//modify DOM on small viewports
+	$('#inner-content .unit').addClass('bottom-unit');
+	if ($('body').width() < 600)
+	{
+		$('body').addClass('small-screen');
+		$('#sidebar').insertAfter($('#inner-content'));
+		$('#sidebar .unit').removeClass('left-unit').addClass('bottom-unit');
+	}
+	else
+	{
+		$('body').removeClass('small-screen');
+		$('#inner-content').insertAfter($('#sidebar'));
+		$('#sidebar .unit').removeClass('bottom-unit').addClass('left-unit');
+	}
 });
diff --git a/src/Controllers/PostController.php b/src/Controllers/PostController.php
index b6e4efe3..0bd51dd2 100644
--- a/src/Controllers/PostController.php
+++ b/src/Controllers/PostController.php
@@ -516,7 +516,7 @@ class PostController
 		$this->context->stylesheets []= 'post-view.css';
 		$this->context->stylesheets []= 'comment-small.css';
 		$this->context->scripts []= 'post-view.js';
-		$this->context->subTitle = 'showing @' . $post->id . ' - ' . join(', ', array_map(function($x) { return $x['name']; }, $post->sharedTag));
+		$this->context->subTitle = 'showing @' . $post->id . ' &ndash; ' . join(', ', array_map(function($x) { return $x['name']; }, $post->sharedTag));
 		$this->context->favorite = $favorite;
 		$this->context->transport->post = $post;
 		$this->context->transport->prevPostId = $prevPost ? $prevPost['id'] : null;
diff --git a/src/Views/index-index.phtml b/src/Views/index-index.phtml
index 9cc2b1b4..ad8918e5 100644
--- a/src/Views/index-index.phtml
+++ b/src/Views/index-index.phtml
@@ -12,7 +12,7 @@
 </div>
 
 <?php if (!empty($this->context->featuredPost)): ?>
-	<div id="featured-post">
+	<div id="inner-content">
 		<div class="header">
 			Featured image
 
diff --git a/src/Views/layout-normal.phtml b/src/Views/layout-normal.phtml
index 5809dcca..904fb225 100644
--- a/src/Views/layout-normal.phtml
+++ b/src/Views/layout-normal.phtml
@@ -13,6 +13,7 @@
 		<?php foreach (array_unique($this->context->scripts) as $name): ?>
 			<script type="text/javascript" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/js/' . $name) ?>"></script>
 		<?php endforeach ?>
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 	</head>
 
 	<body>
diff --git a/src/Views/post-upload.phtml b/src/Views/post-upload.phtml
index 5fc7a363..2a54b4a0 100644
--- a/src/Views/post-upload.phtml
+++ b/src/Views/post-upload.phtml
@@ -3,7 +3,7 @@
 <?php else: ?>
 
 	<div id="sidebar">
-		<div class="sidebar-unit">
+		<div class="unit">
 			<h1>file upload</h1>
 			<p>Use tags to describe uploaded images. Try to specify characters, their look and shows they are from.</p>
 			<p>Set proper visibility setting if the image isn&rsquo;t safe for work or you&rsquo;re not sure it&rsquo;s 100% <span class="safety-sfw">safe</span>.</p>
diff --git a/src/Views/post-view.phtml b/src/Views/post-view.phtml
index e3c756bd..97ce0e90 100644
--- a/src/Views/post-view.phtml
+++ b/src/Views/post-view.phtml
@@ -25,7 +25,7 @@
 		<div class="clear"></div>
 	</nav>
 
-	<div class="sidebar-unit tags">
+	<div class="unit tags">
 		<h1>tags (<?php echo count($this->context->transport->post->sharedTag) ?>)</h1>
 		<ul>
 			<?php foreach ($this->context->transport->post->sharedTag as $tag): ?>
@@ -41,7 +41,7 @@
 		</ul>
 	</div>
 
-	<div class="sidebar-unit details">
+	<div class="unit details">
 		<h1>details</h1>
 
 		<div class="key-value safety">
@@ -104,7 +104,7 @@
 		</div>
 	</div>
 
-	<div class="sidebar-unit favorites">
+	<div class="unit favorites">
 		<?php if (count($this->context->transport->post->ownFavoritee) == 0): ?>
 			<h1>favorites</h1>
 			<p>None yet.</p>
@@ -122,7 +122,7 @@
 		<?php endif ?>
 	</div>
 
-	<div class="sidebar-unit options">
+	<div class="unit options">
 		<h1>options</h1>
 
 		<ul>
@@ -207,7 +207,7 @@
 </div>
 
 <div id="inner-content">
-	<div class="post-wrapper">
+	<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
 		<?php if ($this->context->transport->post->type == PostType::Image): ?>
 			<img src="<?php echo \Chibi\UrlHelper::route('post', 'retrieve', ['name' => $this->context->transport->post->name]) ?>" alt="<?php echo $this->context->transport->post->name ?>"/>
 		<?php elseif ($this->context->transport->post->type == PostType::Flash): ?>
@@ -216,7 +216,7 @@
 	</div>
 
 	<?php if ($canEditAnything): ?>
-		<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post aligned footer-unit">
+		<form action="<?php echo \Chibi\UrlHelper::route('post', 'edit', ['id' => $this->context->transport->post->id]) ?>" method="post" enctype="multipart/form-data" class="edit-post aligned unit">
 			<h1>edit post</h1>
 			<?php if ($editPostPrivileges[Privilege::EditPostSafety]): ?>
 				<div class="safety">
@@ -259,7 +259,7 @@
 		</form>
 	<?php endif ?>
 
-	<div class="comments footer-unit">
+	<div class="comments unit">
 		<?php if (empty($this->context->transport->post->ownComment)): ?>
 			<h1>comments</h1>
 			None yet.
@@ -275,13 +275,13 @@
 	</div>
 
 	<?php if (PrivilegesHelper::confirm(Privilege::AddComment)): ?>
-		<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment aligned footer-unit">
+		<form action="<?php echo \Chibi\UrlHelper::route('comment', 'add', ['postId' => $this->context->transport->post->id]) ?>" method="post" class="add-comment aligned unit">
 			<h1>add comment</h1>
 
 			<div class="preview"></div>
 
 			<div class="text">
-				<textarea name="text" cols="50" rows="3"></textarea>
+				<div class="input-wrapper"><textarea name="text" cols="50" rows="3"></textarea></div>
 			</div>
 
 			<div>
diff --git a/src/Views/user-view.phtml b/src/Views/user-view.phtml
index b46a9725..0ea9b30c 100644
--- a/src/Views/user-view.phtml
+++ b/src/Views/user-view.phtml
@@ -6,7 +6,7 @@
 		<h1><?php echo $this->context->transport->user->name ?></h1>
 	</div>
 
-	<div class="sidebar-unit details">
+	<div class="unit details">
 		<h1>details</h1>
 
 		<div class="key-value join-date">
@@ -28,7 +28,7 @@
 		<?php endif ?>
 	</div>
 
-	<div class="sidebar-unit options">
+	<div class="unit options">
 		<h1>options</h1>
 
 		<ul>