Skip to content

Instantly share code, notes, and snippets.

@sbauch
Created April 28, 2013 15:41
Show Gist options
  • Save sbauch/5477266 to your computer and use it in GitHub Desktop.
Save sbauch/5477266 to your computer and use it in GitHub Desktop.
WIP mobile stylesheet for Discourse
@media only screen and (max-device-width: 540px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
body {
min-width: 320px !important;
max-width: 320px !important;
overflow: hidden;
}
.full-width{width:320px !important;}
#main-outlet {
padding-top: 95px !important;
}
.regular { width: 100% !important;}
.d-header {
width: 320px;
.extra-info{
display: block;
h1{ font-size: 16px !important; }
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; // IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+
-o-text-overflow: ellipsis; // for Opera 9 & 10
}
.posts-wrapper { width: 320px !important; }
.container { margin: 10px;}
.contents{ margin: 10px; }
.panel {
.current-username{ display: none; }
float: right;
position: fixed;
right: 5px;
}
.d-dropdown{
width: 308px;
input[type='text'] {width: 285px;}
}
}
#show-topic-admin{display:none !important;}
#topic-title{
width: 310px !important;
margin-left: 8px;
h1{max-width:267px !important;}
}
.extra-info{ a{ display: none; }}
.topic-meta-data {
transform: scale(.5, .5);
-moz-transform: scale(.5, .5);
-ms-transform: scale(.5, .5);
-webkit-transform: scale(.5, .5);
-o-transform: scale(.5, .5);
margin-left: -18px !important;
margin-top: -10px !important;
}
.topic-summary {display: none; }
.posts-wrapper { margin: 0 18px 0 24px; }
.span5.gutter { display:none; }
#topic-progress-wrapper { display: none; }
.span14.topic-body {
width: 28% !important;
margin-left: -24px;
img{height: auto;}
}
.span11.topic-body{
width: 70%;
margin: -2px 0 0 -20px;
}
.embedded-posts.parent-post{
margin-left: 50px !important;
width: 262px !important;
}
#list-controls .nav {
li{
margin: 0 !important;
float: none !important;
display: inline-block;}
text-align:center;
width: 320px;
margin-bottom: 40px !important;
.btn.btn-default:second{display:none;}
}
#topic-list{
thead{ display: none; }
width: 320px !important;
}
td.main-link.clearfix{
width: 280px !important;
}
td.star{width:2px;}
td.category,td.posters,td.num{
display: none;
}
#list-area h3{display: none;}
#list-controls .btn {
position: absolute;
top: 190px;
right: 16px;
width: 90%;
}
.topic-post {
width: 100%;
article.boxed {
.read-icon {
right: 10% !important;
}
}
}
.topic-meta-data{
.contents {
padding: 0 0px 0 0;
}
.post-info{
line-height: 14px !important;
}
}
#topic-footer-buttons {
margin: 24px 0 100px 27px !important;
p {
line-height: 18px !important;
width: 126px;
}
}
#suggested-topics {
display: none;
#margin: 40px 0 40px 24px !important;
# width: 880px !important;
}
.reply-area .form-element{
width:320px;
}
#reply-control {
.category-combobox{
width: 271px;
z-index: 99999;
}
.toggle-preview { display:none; }
#reply-title { width: 250px; }
.wmd-controls {
#wmd-input {
width: 100%;
border-top: 0;
margin-top: 40px;
}
.preview-wrapper {
display: none;
}
.textarea-wrapper {
width: 100%;
}
.wmd-button-bar {
display: none;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment