www: css refactoring

Organized rules into regions.
Media queries kept within regions to keep relevant code close.
Removed some outdated rules.

1 files changed, 371 insertions, 365 deletions

diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 1b4dd0e3..4058fba2 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -1,3 +1,5 @@
+/* #region generic */
+
 html,
 body,
 div,
@@ -20,20 +22,6 @@ textarea {
     font-size: 12pt;
     -webkit-font-smoothing: subpixel-antialiased;
 }
-html {
-    background: #eaeadf;
-    color: #222;
-}
-#wrapper {
-    margin: 0 auto;
-    width: 1000px;
-    margin-top: 50px;
-}
-#header_wrapper {
-    margin: 0 auto;
-    width: 1000px;
-    display: flex;
-}
 h1,
 h2 {
     font-weight: normal;
@@ -72,15 +60,32 @@ pre::-moz-selection {
 .u {
     text-decoration: underline;
 }
+
+/* #endregion */
+
+/* #region overall layout */
+
+html {
+    background: #eaeadf;
+    color: #222;
+}
+#wrapper {
+    margin: 0 auto;
+    width: 1000px;
+    margin-top: 50px;
+}
+#column {
+    float: left;
+    margin-left: 10px;
+    overflow: hidden;
+    padding-top: 10px;
+    width: 240px;
+}
 #content {
     float: right;
     margin: 12px 0 0 0;
     width: 728px;
 }
-#topwrapper {
-    clear: both;
-    position: relative;
-}
 body > header {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
     background: #f2f2ec;
@@ -89,6 +94,53 @@ body > header {
     width: 100%;
     z-index: 10;
 }
+#header_wrapper {
+    margin: 0 auto;
+    width: 1000px;
+    display: flex;
+}
+#footer {
+    clear: both;
+    color: #999;
+    font-size: 10pt;
+    margin: 40px;
+    padding: 10px 0;
+}
+
+@media screen and (max-width: 850px) {
+    body {
+        -moz-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+    }
+    body,
+    #wrapper,
+    #topwrapper,
+    #content,
+    #footer {
+        float: none;
+        margin: 0 auto;
+        min-width: 310px;
+        width: auto;
+    }
+    #wrapper {
+        margin-top: 50px;
+    }
+    body > header {
+        margin-bottom: 15px;
+    }
+    #column {
+        float: none;
+        margin: 0 10px;
+        padding-top: 0;
+        width: auto;
+    }
+}
+
+/* #endregion */
+
+/* #region header internals */
+
 body > header a {
     color: #069;
     font-size: 13pt;
@@ -124,19 +176,6 @@ body > header a {
     border: 1px solid #DDDDD5;
     padding: 4px;
 }
-#headdiv {
-    border-bottom: 1px solid #D5D5D0;
-    padding: 0 20px;
-}
-#headdiv p {
-    padding: 12px;
-    text-align: center;
-}
-#actions {
-    position: absolute;
-    right: 8px;
-    top: 0;
-}
 body > header nav li:after {
     color: #AAA;
     content: "|";
@@ -146,46 +185,109 @@ body > header nav li:after {
 body > header nav li:last-child:after {
     display: none;
 }
-body > header p {
-    color: #222;
-    font-size: 13pt;
-    margin: 12px 0;
-    text-align: center;
+
+@media screen and (max-width: 850px) {
+    body > header a {
+        font-size: 12pt;
+    }
+    #logo {
+        display: none;
+    }
+    #global {
+        margin-left: 10px;
+    }
+    #global li {
+        margin-right: 10px;
+    }
+    #search {
+        display: inline-block;
+        float: none;
+        margin: 10px 10px;
+    }
 }
-#content > p,
-#content > h1,
-#content > h2 {
-    margin: 1em 0;
+
+/* #endregion */
+
+/* #region left column internals */
+
+.toolbar {
+    border-top: 1px solid #CCC;
 }
-#newmessage {
-    background: #E5E5E0;
-    margin-bottom: 20px;
-    padding: 15px;
+
+#column ul,
+#column p,
+#column hr {
+    margin: 10px 0;
 }
-#newmessage textarea {
+#column li > a {
+    display: block;
+    height: 100%;
+    padding: 6px;
+}
+#column li > a:hover {
+    background-color: #f2f2ec;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s ease-in;
+}
+#column .margtop {
+    margin-top: 15px;
+}
+#column p {
+    font-size: 10pt;
+    line-height: 140%;
+}
+#column .tags {
+    text-align: justify;
+}
+#column .inp {
+    background: #F5F5E9;
     border: 1px solid #CCC;
-    box-sizing: border-box;
-    margin: 0 0 5px 0;
-    max-height: 6em;
-    min-width: 280px;
-    padding: 4px;
+    border-radius: 3px;
+    padding: 3px;
+    width: 222px;
+}
+#ctitle {
+    font-size: 14pt;
+}
+#ctitle img {
+    margin-right: 5px;
+    vertical-align: middle;
+    width: 48px;
+}
+#ustats li {
+    font-size: 10pt;
+    margin: 3px 0;
+}
+#column table.iread {
     width: 100%;
 }
-#newmessage input {
-    border: 1px solid #CCC;
-    margin: 5px 0;
-    padding: 2px 4px;
+#column table.iread td {
+    text-align: center;
 }
-#newmessage .img {
-    width: 500px;
+#column table.iread img {
+    height: 48px;
+    width: 48px;
 }
-#newmessage .tags {
-    width: 500px;
+
+/* #endregion */
+
+/* #region main content */
+
+#content > p,
+#content > h1,
+#content > h2 {
+    margin: 1em 0;
 }
-#newmessage .subm {
-    background: #EEEEE5;
-    width: 150px;
+.page {
+    background: #E5E5DD;
+    padding: 5px;
+    text-align: center;
 }
+
+/* #endregion */
+
+/* #region article, message internals */
+
 article {
     background: #fff;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
@@ -193,16 +295,6 @@ article {
     margin-bottom: 10px;
     padding: 20px;
 }
-article aside {
-    float: left;
-    height: 48px;
-    margin-right: 10px;
-    width: 48px;
-}
-article aside img {
-    height: 48px;
-    width: 48px;
-}
 article time {
     color: #999;
     font-size: 10pt;
@@ -213,15 +305,11 @@ article p {
     word-wrap: break-word;
     overflow-wrap: break-word;
 }
-article .i {
-    text-align: center;
-}
 article .ir {
     text-align: center;
 }
 article .ir a {
-    cursor: -moz-zoom-in;
-    cursor: -webkit-zoom-in;
+    cursor: zoom-in;
     display: block;
 }
 article .ir img {
@@ -237,16 +325,6 @@ article > nav.l a,
     color: #888;
     margin-right: 15px;
 }
-article > nav.s {
-    display: block;
-    float: right;
-    text-align: right;
-}
-article > nav.s a {
-    color: #222;
-    font-weight: bold;
-    vertical-align: middle;
-}
 article .likes {
     padding-left: 20px;
 }
@@ -291,17 +369,6 @@ article .tags > a,
     margin-right: 5px;
     padding: 0 10px;
 }
-#geomap {
-    height: 300px;
-    margin-top: 1em;
-    overflow: hidden;
-    width: 700px;
-}
-.ads {
-    background: #FFF;
-    margin: 8px 0 16px 58px;
-    padding: 13px 10px 5px 10px;
-}
 .msgthread {
     margin-bottom: 0;
 }
@@ -324,8 +391,7 @@ article .tags > a,
     padding: 20px;
     width: 640px;
 }
-.msg-ts,
-article .t {
+.msg-ts {
     float: right;
     font-size: small;
     vertical-align: top;
@@ -334,12 +400,6 @@ article .t {
 .msg-ts > a {
     color: #999;
 }
-.msg-place {
-    font-size: small;
-}
-.msg-place > a {
-    color: #999;
-}
 .msg-txt {
     clear: both;
     margin: 0 0 12px;
@@ -412,6 +472,85 @@ article .t {
 .reply-new .msg-cont {
     border-right: 5px solid #0C0;
 }
+#replies .msg-txt,
+#private-messages .msg-txt {
+    margin: 0;
+}
+.msg-comment {
+    margin-top: 10px;
+}
+.title2 {
+    background: #DDDDD0;
+    margin: 20px 0;
+    padding: 10px 20px;
+}
+.title2-right {
+    float: right;
+    line-height: 24px;
+}
+#content .title2 h2 {
+    font-size: x-large;
+    margin: 0;
+}
+
+@media screen and (max-width: 850px) {
+    article {
+        margin: 8px;
+        overflow: auto;
+    }
+    article p {
+        margin: 10px 0 8px 0;
+    }
+    article > nav.l,
+    .msg-cont > nav.l {
+        flex-direction: column;
+    }
+    article > nav.l a,
+    .msg-cont > nav.l a {
+        padding: 6px;
+    }
+    .msg,
+    .msg-cont {
+        min-width: 280px;
+        width: auto;
+    }
+    .msg-cont {
+        margin: 8px;
+    }
+    .msg-media {
+        overflow: auto;
+    }
+    .title2 h2 {
+        font-size: large;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .msg-ts {
+        float: none;
+    }
+    .msg-tags {
+        margin-top: 10px;
+        min-height: 1px;
+    }
+    .msg-txt {
+        padding-top: 5px;
+    }
+    .title2 {
+        font-size: 11pt;
+    }
+    #content .title2 h2 {
+        font-size: 11pt;
+    }
+    .title2-right {
+        line-height: initial;
+    }
+}
+
+/* #endregion */
+
+/* #region user-generated texts */
+
 q:before,
 q:after {
     content: "";
@@ -423,22 +562,51 @@ q {
     margin: 10px 0 10px 10px;
     padding-left: 10px;
 }
-.toolbar {
-    border-top: 1px solid #CCC;
+
+/* #endregion */
+
+/* #region new message form internals */
+
+#newmessage {
+    background: #E5E5E0;
+    margin-bottom: 20px;
+    padding: 15px;
 }
-#replies .msg-txt,
-#private-messages .msg-txt {
-    margin: 0;
+#newmessage textarea {
+    border: 1px solid #CCC;
+    box-sizing: border-box;
+    margin: 0 0 5px 0;
+    max-height: 6em;
+    min-width: 280px;
+    padding: 4px;
+    width: 100%;
 }
-.msg-comment {
-    margin-top: 10px;
+#newmessage input {
+    border: 1px solid #CCC;
+    margin: 5px 0;
+    padding: 2px 4px;
 }
-.newmessage {
-    border: 1px solid #DDD;
-    padding: 2px;
-    resize: vertical;
-    width: 695px;
+#newmessage .img {
+    width: 500px;
 }
+#newmessage .tags {
+    width: 500px;
+}
+#newmessage .subm {
+    background: #EEEEE5;
+    width: 150px;
+}
+@media screen and (max-width: 850px) {
+    #newmessage .img,
+    #newmessage .tags {
+        width: 100%;
+    }
+}
+
+/* #endregion */
+
+/* #region user lists */
+
 .users {
     margin: 10px 0;
     width: 100%;
@@ -456,24 +624,11 @@ q {
     vertical-align: middle;
     width: 32px;
 }
-.title2 {
-    background: #DDDDD0;
-    margin: 20px 0;
-    padding: 10px 20px;
-}
-.title2-right {
-    float: right;
-    line-height: 24px;
-}
-#content .title2 h2 {
-    font-size: x-large;
-    margin: 0;
-}
-.page {
-    background: #E5E5DD;
-    padding: 5px;
-    text-align: center;
-}
+
+/* #endregion */
+
+/* #region signup form */
+
 .signup-h1 > img {
     margin-right: 10px;
     vertical-align: middle;
@@ -489,6 +644,11 @@ q {
 .signup-hr {
     margin: 20px 0;
 }
+
+/* #endregion */
+
+/* #region PM */
+
 .newpm {
     margin: 20px 60px 30px 60px;
 }
@@ -499,67 +659,11 @@ q {
 .newpm-send input {
     width: 100px;
 }
-#column {
-    float: left;
-    margin-left: 10px;
-    overflow: hidden;
-    padding-top: 10px;
-    width: 240px;
-}
-#column ul,
-#column p,
-#column hr {
-    margin: 10px 0;
-}
-#column li > a {
-    display: block;
-    height: 100%;
-    padding: 6px;
-}
-#column li > a:hover {
-    background-color: #f2f2ec;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
-    transition: background-color 0.2s ease-in;
-}
-#column .margtop {
-    margin-top: 15px;
-}
-#column p {
-    font-size: 10pt;
-    line-height: 140%;
-}
-#column .tags {
-    text-align: justify;
-}
-#column .inp {
-    background: #F5F5E9;
-    border: 1px solid #CCC;
-    border-radius: 3px;
-    padding: 3px;
-    width: 222px;
-}
-#ctitle {
-    font-size: 14pt;
-}
-#ctitle img {
-    margin-right: 5px;
-    vertical-align: middle;
-    width: 48px;
-}
-#ustats li {
-    font-size: 10pt;
-    margin: 3px 0;
-}
-#column table.iread {
-    width: 100%;
-}
-#column table.iread td {
-    text-align: center;
-}
-#column table.iread img {
-    height: 48px;
-    width: 48px;
-}
+
+/* #endregion */
+
+/* #region popup dialog (lightbox) */
+
 #dialogb {
     background: #222;
     height: 100%;
@@ -678,6 +782,18 @@ q {
     background: #EEEEE5;
     padding: 20px;
 }
+
+@media screen and (max-width: 480px) {
+    .dialog-opened {
+        position: fixed;
+        width: 100%;
+    }
+}
+
+/* #endregion */
+
+/* #region misc */
+
 #wsthread {
     background: #CCC;
     bottom: 20px;
@@ -687,33 +803,6 @@ q {
     position: fixed;
     right: 20px;
 }
-#footer {
-    clear: both;
-    color: #999;
-    font-size: 10pt;
-    margin: 40px;
-    padding: 10px 0;
-}
-#footer-social {
-    float: left;
-}
-#footer-social a {
-    border: 0;
-    display: inline-block;
-    height: 32px;
-    margin: 0 15px 0 0;
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-    width: 32px;
-}
-#footer-left {
-    margin-left: 286px;
-    margin-right: 350px;
-}
-#footer-right {
-    float: right;
-}
 .sharenew {
     color: #FFF;
     display: inline-block;
@@ -744,11 +833,62 @@ q {
 .icon--ei-comment {
     margin-top: -3px;
 }
+
+.newmessage { /* textarea on the /post page */
+    border: 1px solid #DDD;
+    padding: 2px;
+    resize: vertical;
+    width: 695px;
+}
+
+/* #endregion */
+
+/* #region footer internals */
+
+#footer-social {
+    float: left;
+}
+#footer-social a {
+    border: 0;
+    display: inline-block;
+    height: 32px;
+    margin: 0 15px 0 0;
+    overflow: hidden;
+    text-indent: 100%;
+    white-space: nowrap;
+    width: 32px;
+}
+#footer-left {
+    margin-left: 286px;
+    margin-right: 350px;
+}
+#footer-right {
+    float: right;
+}
+
+@media screen and (max-width: 850px) {
+    #footer {
+        margin: 0 10px;
+    }
+    #footer div {
+        float: none;
+        margin: 10px 0;
+    }
+}
+
+/* #endregion */
+
+/* #region settings */
+
 fieldset {
     border: 1px dotted #ccc;
     margin-top: 25px;
 }
-/* embeds */
+
+/* #endregion */
+
+/* #region embeds */
+
 .embedContainer {
     display: flex;
     flex-wrap: wrap;
@@ -786,8 +926,11 @@ fieldset {
     resize: vertical;
     display: block;
 }
-/* end of embeds */
-/* nsfw */
+
+/* #endregion */
+
+/* #region nsfw */
+
 article.nsfw .embedContainer img,
 article.nsfw .embedContainer video,
 article.nsfw .embedContainer iframe,
@@ -800,142 +943,5 @@ article.nsfw .embedContainer iframe:hover,
 article.nsfw .ir img:hover {
     opacity: 1;
 }
-/* end of nsfw */
-@media screen and (max-width: 850px) {
-    body {
-        -moz-text-size-adjust: 100%;
-        -webkit-text-size-adjust: 100%;
-        -ms-text-size-adjust: 100%;
-    }
-    body,
-    #wrapper,
-    #topwrapper,
-    #content,
-    #footer,
-    .toolbar {
-        float: none;
-        margin: 0 auto;
-        min-width: 310px;
-        width: auto;
-    }
-    #wrapper {
-        margin-top: 50px;
-    }
-    body > header {
-        margin-bottom: 15px;
-    }
-    body > header a {
-        font-size: 12pt;
-    }
-    #logo {
-        display: none;
-    }
-    #global {
-        margin-left: 10px;
-    }
-    #global li {
-        margin-right: 10px;
-    }
-    #search {
-        display: inline-block;
-        float: none;
-        margin: 10px 10px;
-    }
-    #headdiv {
-        padding: 0 10px;
-    }
-    #headdiv li {
-        margin-right: 10px;
-    }
-    #actions {
-        position: relative;
-        right: auto;
-    }
-    #newmessage .img,
-    #newmessage .tags {
-        width: 100%;
-    }
-    #column {
-        float: none;
-        margin: 0 10px;
-        padding-top: 0;
-        width: auto;
-    }
-    article {
-        margin: 8px;
-        overflow: auto;
-    }
-    article p {
-        margin: 10px 0 8px 0;
-    }
-    article > nav.l,
-    .msg-cont > nav.l {
-        flex-direction: column;
-    }
-    article > nav.l a,
-    .msg-cont > nav.l a {
-        padding: 6px;
-    }
-    article > nav.s {
-        display: block;
-    }
-    article textarea {
-        width: 205px;
-    }
-    article footer {
-        float: left;
-    }
-    #content textarea {
-        width: 100%;
-    }
-    .msg,
-    .msg-cont {
-        min-width: 280px;
-        width: auto;
-    }
-    .msg-cont,
-    .ads {
-        margin: 8px;
-    }
-    .msg-comment textarea {
-        width: 100%;
-    }
-    .msg-media {
-        overflow: auto;
-    }
-    .title2 h2 {
-        font-size: large;
-    }
-    #footer {
-        margin: 0 10px;
-    }
-    #footer div {
-        float: none;
-        margin: 10px 0;
-    }
-}
-@media screen and (max-width: 480px) {
-    .msg-ts {
-        float: none;
-    }
-    .msg-tags {
-        margin-top: 10px;
-        min-height: 1px;
-    }
-    .msg-txt {
-        padding-top: 5px;
-    }
-    .title2 {
-        font-size: 11pt;
-    }
-    #content .title2 h2 {
-        font-size: 11pt;
-    }
-    .title2-right {
-        line-height: initial;
-    }
-    .dialog-opened {
-        position: fixed;
-        width: 100%;
-    }
-}
+
+/* #endregion */