Responsiveness edits

www/styles/screen.css

@@ -58,6 +58,8 @@ audio, video {
  font-family: courier;
  font-size: 1em;
  font-weight: bold;
+ padding-left: .5rem;
+ line-height: 2rem;
 }
 #midtitle, .midtitle {
  text-align: center;
@@ -115,18 +117,24 @@ audio, video {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale')";
 }
-
+.postericon {
+ width: 2.5rem;
+ height: 2.5rem;
+}
 .usericon, .buddyicon {
- width: 1em;
- height: 1em;
- float: right;
- background-size: 1em;
+ width: 2rem;
+ height: 2rem;
+ display: inline-block;
+}
+.usericon, .buddyicon, .postericon {
+ background-size: cover;
  background-repeat: no-repeat;
- margin-left:1rem;
- border-radius: 50%;
  padding-right: unset !important;
 }
-.circle, .usericon, .buddyicon {
+.postericon {
+ float: right;
+}
+.circle, .usericon, .buddyicon, .postericon {
  border-radius: 50%;
 }
 .portrait {
@@ -154,7 +162,7 @@ audio, video {
 }
 .banner > #postData {
  position: absolute;
- bottom: 5rem;
+ top: 19rem;
  left: 12rem;
 }
 .avatar {
@@ -163,21 +171,13 @@ audio, video {
  float: left;
  background-size: 3em;
 }
-button#clickme {
+span#clickme {
  display: none;
- float: right;
- box-shadow: 0px 0px 0.5em #66CCFF;
- padding: 0 .25em;
- margin: .25em;
- font-size: .60em;
- background-color: #333;
- border-radius: .5em;
- border: .25em solid black;
- color: red;
+ font-size: 2rem;
+ line-height: 2rem;
 }
-button#clickme:active {
- padding-left: .30em;
- border-color: gray;
+span#clickme:hover {
+ cursor: pointer;
 }
 .coolbutton, .cooltext, textarea {
  box-sizing: border-box;
@@ -229,6 +229,8 @@ img.mblogimg, {
 h3.blogtitles {
  margin-bottom: .5em;
  margin-top: 0px;
+ height: 2.5rem;
+ line-height: 2.5rem;
 }
 em.blogdetail {
  font-size: .8em;
@@ -288,12 +290,15 @@ p.posteditortitle {
 }
 /*Responsive design stuff that used to be in JS, modify as needed*/
 @media (max-width: 1024px) {
-  #lefttitle {
-    width: 100%;
-    max-width: 100%;
-  }  
-  #clickme {
-    display: table-cell !important;
+  div#midtitle {
+      display: none;
+  }
+  div#lefttitle {
+    min-width: calc(100vw - 4.5rem);
+  }
+  span#clickme {
+    display: inline-block;
+    flex-shrink: 0;
   }
   #righttitle, #configbar {
     visibility: hidden;
@@ -304,11 +309,12 @@ p.posteditortitle {
     max-width: 100%;
     background-color: rgba(0,0,0,.75);
     border-bottom-left-radius: 1em;
+    padding-left: .5rem;
   }
-  #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
+  #clickme:hover ~ #righttitle, #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
     visibility: visible;
   }
-  #righttitle a, #configbar a {
+  #righttitle > a, #configbar a {
     display: block;
     border-right: 0;
   }

www/styles/structure.css

@@ -1,5 +1,5 @@
 /*First, we start off with specifying what parts of the DOM we want hidden*/
-#leftbar, #rightbar, #footbar, #midtitle {
+#leftbar, #rightbar, #footbar {
  display: none;
 }
 
@@ -12,7 +12,7 @@ body {
  max-height: 100%;
 }
 #topkek {
- display: table;
+ display: flex;
  position: fixed;
  z-index: 2;
  top: 0;
@@ -23,17 +23,13 @@ body {
  display: table-cell;
 }
 #lefttitle {
- padding-left: .5em;
- max-width: 50%;
- min-width: 33%;
+ flex 1 0 33%;
 }
 #midtitle {
- width: 33%;
+ flex 1 0 33%;
 }
 #righttitle {
- min-width: 33%;
- max-width: 50%;
- padding-right: .5em;
+ flex 1 0 33%;
 }
 #righttitle a, #configbar a {
  display: inline-block;

www/templates/index.tx

@@ -5,7 +5,7 @@
     <div id="midtitle" class="toplel">
         <: $midtitle | mark_raw :>
     </div>
-    <button title="Menu" id="clickme">&#9776;</button>
+    <span title="Menu" id="clickme" onclick="this.focus()">🌐</span>
     <div id="righttitle" class="toplel">
         <a href="/news"   title="Micro Blog" class="topbar">News</a>
         <a href="/blog"   title="Blog" class="topbar">Blog</a>
@@ -21,10 +21,10 @@
             <input class="coolbutton" type="submit" value="🔎"></input>
             <a class="topbar" target="_blank" href="<: $search_help :>" title="<: $search_lang :>">❓</a>
         </form>
-        : if ($user) {
-        <a href="/config" title="config" class="topbar usericon <: $user :>"></a>
-        : }
     </div>
+    : if ($user) {
+    <a href="/config" title="Preferences" class="topbar usericon <: $user :>"></a>
+    : }
 </div>
 <div id="littlemenu">
 </div>

www/templates/posts.tx

@@ -23,6 +23,7 @@
                 Your browser does not support the video tag.
             </video>
         : } else {
+            diddley
             <div class="responsive preview" style="background-image:url(<: $post.preview :>)"></div>
         : }
             <p class="midtitle"><: $post.title :></p>
@@ -42,7 +43,7 @@
                 </form>
                 : }
                 <span id="<: $post.id :>-<: $post.version :>-time" style="float:right;"><: $post.created :></span>
-                <a class='usericon <: $post.user :>' title='Posted by <: $post.user :>'></a>
+                <a class='postericon <: $post.user :>' title='Posted by <: $post.user :>'>&nbsp;</a>
             </h3>
             : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
                 <div style="background-image:url(<: $post.preview :>);" class="responsive preview"></div>
@@ -79,10 +80,7 @@
                     <div style="background-image:url(<: $post.preview :>);" class="circle portrait"></div>
             : }
             : if( $post.data ) {
-                <div id="postData"><: $post.data :></div>
-            : }
-            : elsif( mark_raw ) {
-                <div id="postData"><: mark_raw :></div>
+                <div id="postData"><: $post.data | mark_raw :></div>
             : }
             : if( $post.wallpaper ) {
                 </div>