diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 3b96b8dd8..bfe27ed72 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -17,7 +17,6 @@ --responsive-menu-background-color: var(--link-hover-color); --responsive-sidebar-submit-button-background-color: #EEE; --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197); - --responsive-form-input-border: 1px solid #c5c5c5; --form-input-text-color: var(--text-color); --form-input-background: var(--body-background-color); diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss index df97cfd1f..569da6b0b 100644 --- a/app/javascript/src/styles/common/main_layout.scss +++ b/app/javascript/src/styles/common/main_layout.scss @@ -52,7 +52,7 @@ div.clearfix { @media (max-width: 660px) { flex-direction: column; - #content { order: 1; } + #content { order: 1; padding: 0; } #sidebar { order: 2; } } } diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss index 7e6112cfc..38ae3fe4d 100644 --- a/app/javascript/src/styles/specific/comments.scss +++ b/app/javascript/src/styles/specific/comments.scss @@ -100,8 +100,6 @@ form.edit_comment div.input.boolean { @media screen and (max-width: 660px) { div#c-comments div#a-index, div#c-comments div#a-show { - margin: 0 0.5em; - div.post { display: block; margin: 2em 0; diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss index 4b304ab6e..049368f2a 100644 --- a/app/javascript/src/styles/specific/forum.scss +++ b/app/javascript/src/styles/specific/forum.scss @@ -58,9 +58,3 @@ div#c-forum-topics { color: var(--muted-text-color); } } - -@media screen and (max-width: 660px) { - #c-forum-topics #a-show { - padding: 0 0.5em; - } -} diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss index 470344b27..caa0d4238 100644 --- a/app/javascript/src/styles/specific/z_responsive.scss +++ b/app/javascript/src/styles/specific/z_responsive.scss @@ -1,117 +1,65 @@ @import "../base/000_vars.scss"; @media screen and (max-width: 660px) { - #saved-searches-nav { - display: none; - } + div#page { + margin: 0 0.5rem; + padding: 0; - .fav-buttons button { - font-size: 1.5em; - } - - div#page aside#sidebar { - padding: 5px; - - button[type=submit] { - font-size: 1.2em; - background-color: var(--responsive-sidebar-submit-button-background-color); - height: 42px; - padding: 2px 10px; - border: var(--responsive-sidebar-submit-button-border); + aside#sidebar { + font-size: $h3_size; } } - div#page { - padding: 0 0.25vw; - > div /* div#c-$controller */ { - > div /* div#a-$action */ { + header#top { + position: relative; + text-align: center; - /* Move #sidebar below #content. */ - > aside#sidebar { - font-size: 1.5em; + h1#app-name-header { + display: inline; + } + + #maintoggle { + display: block; + font-weight: bold; + position: absolute; + top: 0.5rem; + right: 0.5rem; + font-size: 2em; + } + + nav#nav { + font-size: $h3_size; + line-height: 2em; + display: none; + + menu#main-menu, menu#subnav-menu { + padding: 0.5rem; + } + + menu#main-menu { + background-color: var(--responsive-menu-background-color); + } + + form.quick-search-form { + display: block; + padding: 0.5em 0; + + input { + width: 100%; + padding: 0; } } } } - header { - position: relative; - } - - #maintoggle { - display: block; - font-weight: bold; - position: absolute; - top: 2vw; - right: 3vw; - font-size: 2em; - } - - /* Make the quick search box in the navbar full width. */ - header#top menu form input { - width: auto; - } - - h1 { - display: none; - } - - form { - input[type=text] { - vertical-align: top; - font-size: 24pt; - border: var(--responsive-form-input-border); - } - - textarea { - vertical-align: top; - border: var(--responsive-form-input-border); - } - - input[type=submit] { - font-size: 160%; - } - - input[type=submit].tiny { - font-size: 120%; - vertical-align: top; - } - } - - div#page section#content { - margin: 0; - padding: 0; - } - - #comments h2 { - display: none; - } - div.paginator { - font-size: 24pt; - font-weight: bold; - text-align: center; - width: 100%; - padding: 0; - margin: 0; - margin-top: 1em; + font-size: $h2_size; + padding: 1em 0 0; li { - display: inline-block; - margin: 0 0.25em; - a, span { - margin: 0; + margin: 0 0.25rem; padding: 0; - border: none; - } - - &.current-page { - text-align: center; - } - - &.arrow:last-child { - text-align: right; } &.numbered-page, &.more { @@ -143,14 +91,6 @@ width: 33.3vw; border: none !important; } - - &[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before { - @include animated-icon; - } - - &[data-has-sound=true]:before { - @include sound-icon; - } } .user-disable-cropped-false { @@ -169,89 +109,4 @@ } } } - - img#image { - margin-top: 5px; - } - - #image-container { - overflow: scroll; - } - - div#options { - margin-top: 10px; - font-size: 24pt; - font-weight: bold; - } - - div#tags { - margin-top: 30px; - - li { - margin: 10px 0; - } - - a.search-tag { - font-size: 24pt; - font-weight: bold; - } - } - - div#page { - div.comments-for-post div.list-of-comments article.comment div.content { - margin: 0; - } - } - - #nav { - font-size: 2em; - line-height: 2em; - display: none; - } - - header#top menu.main { - background-color: var(--responsive-menu-background-color); - padding: 5px 10px; - } - - h1 { - display: block; - font-size: 2em; - margin: 1em 0 0 0; - } - - h2 { - font-size: 0.825em; - margin: 1em 0 0 0; - } - - header { - text-align: center; - line-height: 2em; - h1 { - display: inline; //Needed for menu button - } - } - - div#page { - margin: 0; - } -} - -@media screen and (max-width: 440px) { - input#expand-search { - display: none; - } - - body { - width: 100%; - } - - #post-sections { - font-size: 1em; - } - - div article.post-preview { - overflow: visible; - } }