a mobile stylesheet
This commit is contained in:
joshua stein
parent
e177b769fc
commit
80f02beee8
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
*= require_tree .
|
||||
*= require select2
|
||||
*= require_self
|
||||
*= require mobile
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -188,6 +189,7 @@ div#wrapper {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 1em;
|
||||
min-width: 800px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
div#inside {
|
||||
|
|
@ -205,6 +207,10 @@ div#inside {
|
|||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
#headerleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#l_holder {
|
||||
background-color: #ee0000;
|
||||
float: left;
|
||||
|
|
@ -242,7 +248,7 @@ div#inside {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#headerlinks a {
|
||||
.headerlinks a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
padding-right: 0.75em;
|
||||
|
|
@ -254,12 +260,8 @@ div#inside {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
#headerright a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#headerright.loggedin a {
|
||||
#headerright .headerlinks a {
|
||||
padding-right: 0;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
|
||||
|
|
@ -401,12 +403,14 @@ ol.stories a.tag {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
li .tags {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
li .domain {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
font-size: 8.5pt;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
|
|||
80
app/assets/stylesheets/mobile.css
Normal file
80
app/assets/stylesheets/mobile.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@media only screen and (max-device-width: 480px) {
|
||||
html {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#header {
|
||||
margin: 0 0 0.25em 0;
|
||||
padding: 0.5em 0.4em;
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div#wrapper {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
div#headerleft {
|
||||
float: none;
|
||||
}
|
||||
div#headerright {
|
||||
float: none;
|
||||
text-align: left;
|
||||
margin-left: 34px;
|
||||
margin-top: 0.25em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.headerlinks a,
|
||||
#headerright .headerlinks a {
|
||||
padding-right: 0.25em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
div.voters {
|
||||
width: 30px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
div.voters a.upvoter {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
div.voters a.upvoter,
|
||||
div.voters a.downvoter {
|
||||
margin-left: 5px;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
li div.details,
|
||||
div.story_content {
|
||||
margin-left: 35px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
li.story div.byline {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
div.box label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div#story_box input,
|
||||
div#story_box textarea,
|
||||
div#story_box #story_tags_a,
|
||||
div#story_box div.markdown_help_toggler {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,28 @@
|
|||
<div id="header">
|
||||
<div id="headerleft">
|
||||
<div id="l_holder" class="boring">
|
||||
<a href="/"><img src="/assets/l.png" width=16 height=16></a>
|
||||
</div>
|
||||
|
||||
<% if @title %>
|
||||
<span id="headertitle">
|
||||
<a href="<%= @title_url %>"><%= @title %></a>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<span class="headerlinks">
|
||||
<a href="/">Home</a>
|
||||
|
||||
<a href="/newest">Newest</a>
|
||||
<% if @user %>
|
||||
<a href="/threads">Your Threads</a>
|
||||
<% end %>
|
||||
<a href="/stories/new">Submit Story</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="headerright" class="<%= @user ? "loggedin" : "" %>">
|
||||
<span class="headerlinks">
|
||||
<% if @user %>
|
||||
<a href="/filters">Filters</a>
|
||||
|
||||
|
|
@ -18,27 +41,8 @@
|
|||
<% else %>
|
||||
<a href="/login">Login</a>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div id="l_holder" class="boring">
|
||||
<a href="/"><img src="/assets/l.png" width=16 height=16></a>
|
||||
</div>
|
||||
|
||||
<% if @title %>
|
||||
<span id="headertitle">
|
||||
<a href="<%= @title_url %>"><%= @title %></a>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<span id="headerlinks">
|
||||
<a href="/">Home</a>
|
||||
|
||||
<a href="/newest">Newest</a>
|
||||
<% if @user %>
|
||||
<a href="/threads">Your Threads</a>
|
||||
<% end %>
|
||||
<a href="/stories/new">Submit Story</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><%= @page_title ? "#{@page_title} | Lobsters" : "Lobsters" %></title>
|
||||
<%= stylesheet_link_tag "application", :media => "all" %>
|
||||
<%= javascript_include_tag "application" %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue