lots of style/mobile changes

app/assets/stylesheets/mobi.css.scss

@@ -1,17 +1,8 @@
 /* CSS for Phones only */
 @media only screen
-and (max-width: 999px)
+and (max-width: 700px)
 {
 
-
-  #mobile-info {
-    background: none repeat scroll 0 0 #ab0000;
-    color: #fff;
-    text-align: center;
-    display: block;
-    font-size: 0.7em;
-  }
-
   th, td {
     // force tables into line-mode
     // it's a bit ugly, but probably the best
@@ -20,7 +11,11 @@ and (max-width: 999px)
   }
 
   #head {
-    text-align: left;
+    #menu {
+      #logo:hover {
+        transition: none;
+      }
+    }
   }
 
   #main-content {
@@ -38,6 +33,7 @@ and (max-width: 999px)
 
     &.with-avatar {
       margin-left: 0;
+
       .avatar {
         float: none;
         margin: 0;

app/assets/stylesheets/style.css.scss

@@ -35,7 +35,7 @@ body {
   color: #3f3f3f;
   padding: 0 !important;
   margin: 0 !important;
-  font: 14px/1.6 'Oswald','Calibri','Arial','DejaVu Sans', 'Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;
+  font: 14px 'Oswald','Calibri','Arial','DejaVu Sans', 'Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;
 }
 
 ::selection {
@@ -48,10 +48,6 @@ body {
   background: #363636;
 }
 
-#mobile-info {
-  display: none;
-}
-
 a {
   color: #ab0000;
   text-decoration: none;
@@ -77,41 +73,52 @@ a {
     border-bottom: 3px dashed #fdd;
   }
 }
+
 #head {
+  background: #3f3f3f;
+
   #menu {
-    background: #3f3f3f;
+    margin: auto;
-    height: 50px;
+    max-width: 100%;
+    width: 1600px;
     border-bottom: 1px solid #363636;
+    height: 100%;
     position: relative;
+
     #logo {
+      display: inline-block;
       width: 100px;
       height: 100px;
       position: absolute;
       background: url(image_path('logo.png')) no-repeat;
       background-position: 0 -100px;
-      left: 85px;
+
       &:hover {
-        transition: all 0.3s ease 0;
+        transition: all 0.3s ease 0s;
         background-position: 0 0;
       }
     }
 
     ul {
-      margin: 0 0 0 185px;
+      margin: 0 0 0 100px;
       padding: 0;
       list-style: none;
       line-height: 0;
-      a {
+
-        display: inline-block;
-        color: #fff;
-        &:hover {
-          color: #f66;
-        }
-      }
       li {
-        margin: 15px 10px;
+        display: inline-block;
-        font-size: 20px;
+
-        line-height: 1em;
+        a {
+          margin: 15px 10px;
+          font-size: 20px;
+          line-height: 1em;
+          display: inline-block;
+          color: #fff;
+
+          &:hover {
+            color: #f66;
+          }
+        }
       }
     }
   }
@@ -124,26 +131,31 @@ a {
     display: inline-block;
     width: 100%;
     background: #eaeaea;
+
     #userinfo {
       display: inline-block;
       margin-right: 10px;
       text-shadow: 0 1px 1px #fff;
+
       a {
         color: #3f3f3f;
         &:hover {
           color: #f00;
         }
       }
+
       img.avatar {
         border: 1px solid #000;
         border-radius: 16px;
         vertical-align: middle;
         height: 32px;
         width: 32px;
+
         &:hover {
           box-shadow: 0 0 2px;
         }
       }
+
       #userinfo-box {
         display: inline-block;
         text-align: right;
@@ -153,6 +165,7 @@ a {
     }
   }
 }
+
 img.user-avatar {
   border: 1px solid #000;
   border-radius: 4px;
@@ -178,8 +191,10 @@ span.no-about {
   width: 1600px;
   max-width: 100%;
   margin: auto;
-  border-bottom: 1px solid #ddd;
+  border: 1px solid #ddd;
-  box-shadow: 0 10px 10px #ddd;
+  border-top: none;
+  box-shadow: 0 0 5px #fff;
+  border-radius: 0 0 4px 4px;
 
   h1 {
     font-weight: normal;
@@ -202,11 +217,13 @@ span.no-about {
 
 .post, .thread, .thread-reply {
   margin-bottom: 50px;
+
   .post-content, .thread-content {
     margin-top: 10px;
     clear: both;
     word-wrap: break-word;
     overflow: hidden;
+
     img {
       max-width: 100%;
     }
@@ -214,35 +231,39 @@ span.no-about {
   .post-title, .thread-title {
     margin-bottom: 10px;
     word-wrap: break-word;
+
     h1 {
       text-transform: capitalize;
     }
+
     h2 {
       font-weight: normal;
       text-transform: capitalize;
       display: inline;
       font-size: 200%;
     }
-    .comment-counter {
-      float: right;
-    }
   }
+
   table {
     tr, td, th {
       border-collapse: collapse;
       border: 1px solid #aaa;
     }
+
     tbody {
       tr:nth-child(odd) {
         background: #fff;
       }
+
       tr:nth-child(even) {
         background: #ddd;
       }
     }
+
     td, th {
       padding: 0.3em 1em;
     }
+
     thead {
       background: #3f3f3f;
       color: #fff;
@@ -254,6 +275,7 @@ pre {
   border-radius: 2px;
   position: relative;
   background: #3f3f3f;
+
   &:after {
     color: #fff;
     content: attr(lang); // show language on top right
@@ -266,6 +288,7 @@ pre {
     transition: all 0.3s;
     cursor: default;
   }
+
   &:hover:after {
     opacity: 1;
     right: 0;
@@ -312,6 +335,7 @@ blockquote p {
 
 .user {
   display: inline-block;
+
   a.role {
     display: inline-block;
     color: #fff !important;
@@ -344,6 +368,7 @@ blockquote p {
       color: #ddd !important;
     }
   }
+
   .donor {
     background: #f60 !important;
     border-radius: 3px;
@@ -353,6 +378,7 @@ blockquote p {
     padding: 0 0.5em;
     display: inline-block;
   }
+
   .ign {
     display: block;
     color: #000;
@@ -382,6 +408,7 @@ input , select, textarea {
 
   &[type=submit] {
     margin: 0;
+
     &.btn {
       cursor: pointer;
     }
@@ -570,11 +597,18 @@ tr.spacer {
   visibility: hidden;
 }
 
+.clear-right {
+  clear: right;
+  display: block;
+  visibility: hidden;
+}
+
 .item-group {
   margin: 30px 0;
 
   &.with-avatar {
     margin-left: 70px;
+
     .avatar {
       margin: -7px 0 0 -77px;
       border: 1px solid #ccc;
@@ -600,8 +634,10 @@ tr.spacer {
     border-bottom: 1px solid #ccc;
     color: #fff;
     text-shadow: 0 1px 1px #222;
+
     a {
       color: #fff;
+
       &:hover {
         color: #f66;
       }
@@ -617,6 +653,7 @@ tr.spacer {
       display: block;
       padding: 0.5em;
       border-bottom: 1px solid #ddd;
+
       &:target {
         animation: target 2.5s;
         -webkit-animation: target 2.5s;
@@ -712,7 +749,7 @@ img {
 }
 
 #footer {
-  padding: 0 100px 30px;
+  padding: 30px 0;
   width: 1600px;
   max-width: 100%;
   margin: auto;

app/views/blogposts/index.html.erb

@@ -9,6 +9,7 @@
         <span class="comment-counter">
           <%= link_to pluralize(p.comments.count, "Comment"), p %>
         </span>
+        <div class="clear-right"></div>
       </div>
       <div class="items">
         <div class="item content post">

app/views/blogposts/show.html.erb

@@ -4,6 +4,7 @@
     <%= link_to(image_tag(@post.author.avatar_url(64), class: "avatar"), @post.author, title: @post.author.ign) %>
     <%= render partial: "users/username", locals: { user: @post.author } %> <time><%= link_to @post.created_at.strftime("%e. %b %Y, %H:%M"), p %></time>
     <%= link_to "edit", edit_blogpost_path(@post.id), class: "editlink" if mod? %>
+    <div class="clear-right"></div>
   </div>
   <div class="items">
     <div class="item content">

app/views/comments/_comment.html.erb

@@ -5,6 +5,7 @@
     <time><%= link_to c.created_at.strftime("%e. %b %Y, %H:%M"), "#comment-#{c.id}" %></time>
 
     <%= link_to "edit", edit_blogpost_comment_path(c.blogpost, c), class: "editlink" if (mod? || c.author.is?(current_user)) %>
+    <div class="clear-right"></div>
   </div>
   <div class="items">
     <div class="item content">

app/views/forums/index.html.erb

@@ -4,6 +4,7 @@
       <div class="header">
         <%= group.name %>
         <%= link_to "edit", edit_forumgroup_path(group), class: "editlink" if admin? %>
+        <div class="clear-right"></div>
       </div>
 
       <div class="items bold">

app/views/forums/show.html.erb

@@ -13,6 +13,7 @@
         <span class="comment-counter">
           <%= link_to pluralize(thread.replies.count, "Reply"), thread %>
         </span>
+        <div class="clear-right"></div>
       </div>
       <div class="items bold">
         <%= link_to thread.title, forumthread_path(thread), class: "item #{"locked" if thread.locked}#{"sticky" if thread.sticky}" %>

app/views/forumthreads/show.html.erb

@@ -4,6 +4,7 @@
     <%= link_to(image_tag(@thread.author.avatar_url(64), class: "avatar"), @thread.author, title: @thread.author.ign) %>
     <%= render partial: "users/username", locals: { user: @thread.author } %> <time><%= link_to @thread.created_at.strftime("%e. %b %Y, %H:%M"), p %></time>
     <%= link_to "edit", edit_forumthread_path( @thread), class: "editlink" if (@thread.author.is?(current_user) || mod?) %>
+    <div class="clear-right"></div>
   </div>
   <div class="items">
     <% if @thread.edited? %>

app/views/layouts/_head.html.erb

@@ -2,12 +2,12 @@
   <div id="menu">
     <%= link_to "", root_path, id: "logo" %>
     <ul>
-      <%= link_to statics_path do %><li>Home</li><% end %>
+      <li><%= link_to "Home", statics_path %></li>
-      <%= link_to blogposts_path do %><li>News</li><% end %>
+      <li><%= link_to "News", blogposts_path %></li>
-      <%= link_to info_index_path do %><li>Info</li><% end %>
+      <li><%= link_to "Info", info_index_path %></li>
-      <%= link_to forums_path do %><li>Forums</li><% end %>
+      <li><%= link_to "Forums", forums_path %></li>
-      <%= link_to users_path do %><li>Users</li><% end %>
+      <li><%= link_to "Users", users_path %></li>
-      <%= link_to donate_statics_path do %><li>Donate</li><% end %>
+      <li><%= link_to "Donate", donate_statics_path %></li>
     </ul>
   </div>
   <div id="userbar">

app/views/layouts/application.html.erb

@@ -10,7 +10,6 @@
   <link type="application/atom+xml" rel="alternate" href="<%= blogposts_path(:atom) %>">
 </head>
 <body>
-  <div id="mobile-info">We don't have a mobile style yet. It might look shitty.<br>Tip: Hold your device in landscape mode.</div>
   <%= render partial: "/layouts/head" %>
   <div id="main-content">
     <%= "<div class='flash alert'>#{alert}</div>".html_safe if alert %>

app/views/threadreplies/_reply.html.erb

@@ -5,6 +5,7 @@
     <time><%= link_to reply.created_at.strftime("%e. %b %Y, %H:%M"), "#reply-#{reply.id}" %></time>
 
     <%= link_to "edit", edit_forumthread_threadreply_path(reply.thread, reply), class: "editlink" if mod? || reply.thread.author.is?(current_user) %>
+    <div class="clear-right"></div>
   </div>
   <div class="items">
     <div class="item content">

db/schema.rb

@@ -18,8 +18,8 @@ ActiveRecord::Schema.define(version: 11) do
     t.text     "content"
     t.integer  "user_author_id"
     t.integer  "user_editor_id"
-    t.datetime "created_at",     null: false
+    t.datetime "created_at"
-    t.datetime "updated_at",     null: false
+    t.datetime "updated_at"
   end
 
   create_table "comments", force: true do |t|
@@ -27,8 +27,8 @@ ActiveRecord::Schema.define(version: 11) do
     t.integer  "user_author_id"
     t.integer  "user_editor_id"
     t.integer  "blogpost_id"
-    t.datetime "created_at",     null: false
+    t.datetime "created_at"
-    t.datetime "updated_at",     null: false
+    t.datetime "updated_at"
   end
 
   create_table "forumgroups", force: true do |t|
@@ -54,8 +54,8 @@ ActiveRecord::Schema.define(version: 11) do
     t.integer  "user_author_id"
     t.integer  "user_editor_id"
     t.integer  "forum_id"
-    t.datetime "created_at",                     null: false
+    t.datetime "created_at"
-    t.datetime "updated_at",                     null: false
+    t.datetime "updated_at"
   end
 
   create_table "info", force: true do |t|
@@ -63,9 +63,10 @@ ActiveRecord::Schema.define(version: 11) do
     t.text   "content"
   end
 
-  create_table "register_tokens", primary_key: "uuid", force: true do |t|
+  create_table "register_tokens", force: true do |t|
-    t.string "token", limit: 6, null: false
+    t.string "uuid",  limit: 32, null: false
-    t.string "email",           null: false
+    t.string "token", limit: 6,  null: false
+    t.string "email",            null: false
   end
 
   create_table "roles", force: true do |t|
@@ -76,8 +77,8 @@ ActiveRecord::Schema.define(version: 11) do
   create_table "sessions", force: true do |t|
     t.string   "session_id", null: false
     t.text     "data"
-    t.datetime "created_at", null: false
+    t.datetime "created_at"
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at"
   end
 
   add_index "sessions", ["session_id"], name: "index_sessions_on_session_id", using: :btree
@@ -88,8 +89,8 @@ ActiveRecord::Schema.define(version: 11) do
     t.integer  "user_author_id"
     t.integer  "user_editor_id"
     t.integer  "forumthread_id"
-    t.datetime "created_at",     null: false
+    t.datetime "created_at"
-    t.datetime "updated_at",     null: false
+    t.datetime "updated_at"
   end
 
   create_table "users", force: true do |t|
@@ -109,7 +110,7 @@ ActiveRecord::Schema.define(version: 11) do
     t.string   "email_token"
     t.boolean  "confirmed",           default: false
     t.datetime "last_seen"
-    t.integer  "role_id",             default: 3,     null: false
+    t.integer  "role_id",                             null: false
     t.datetime "created_at"
     t.datetime "updated_at"
   end