Redstoner/redstoner.com
Archived
0
Fork 0
Code Issues Pull Requests 2 Wiki Activity

lots of style/mobile changes

Browse Source
This commit is contained in:
jomo
2014-05-01 17:26:44 +02:00
parent 14aaf82407
commit 4774ebbb25
12 changed files with 98 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/stylesheets/mobi.css.scss
View File

@@ -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;

89
app/assets/stylesheets/style.css.scss
View File

@@ -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;
height: 50px;
margin: auto;
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;
font-size: 20px;
line-height: 1em;
display: inline-block;
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;
box-shadow: 0 10px 10px #ddd;
border: 1px solid #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;

1
app/views/blogposts/index.html.erb
View File

@@ -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">

1
app/views/blogposts/show.html.erb
View File

@@ -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">

1
app/views/comments/_comment.html.erb
View File

@@ -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">

1
app/views/forums/index.html.erb
View File

@@ -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">

1
app/views/forums/show.html.erb
View File

@@ -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}" %>

1
app/views/forumthreads/show.html.erb
View File

@@ -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? %>

12
app/views/layouts/_head.html.erb
View File

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

1
app/views/layouts/application.html.erb
View File

@@ -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 %>

1
app/views/threadreplies/_reply.html.erb
View File

@@ -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">