forked from Ponysearch/Ponysearch
[simple theme] define device width with less vars in defenition.less
This commit is contained in:
parent
32fb2bdf85
commit
6204ef665f
7 changed files with 16 additions and 10 deletions
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: @results-width) {
|
@media screen and (max-width: @phone) {
|
||||||
.autocomplete {
|
.autocomplete {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -196,6 +196,12 @@ html {
|
||||||
@results-margin: 2rem;
|
@results-margin: 2rem;
|
||||||
@search-width: 40rem;
|
@search-width: 40rem;
|
||||||
|
|
||||||
|
/// Device Size
|
||||||
|
/// @desktop > @tablet
|
||||||
|
@tablet: 80em;
|
||||||
|
@phone: 50em;
|
||||||
|
@small-phone: 35em;
|
||||||
|
|
||||||
/// From style.less
|
/// From style.less
|
||||||
@stacked-bar-chart: rgb(0, 0, 0);
|
@stacked-bar-chart: rgb(0, 0, 0);
|
||||||
|
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 80em) {
|
@media screen and (max-width: @tablet) {
|
||||||
div.title {
|
div.title {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
@ -47,7 +47,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: @phone) {
|
||||||
#main_index {
|
#main_index {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -116,7 +116,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 80em) {
|
@media screen and (max-width: @tablet) {
|
||||||
.preferences_back {
|
.preferences_back {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
|
@ -103,7 +103,7 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 80em) {
|
@media screen and (max-width: @tablet) {
|
||||||
#search {
|
#search {
|
||||||
padding: 0 @results-tablet-offset;
|
padding: 0 @results-tablet-offset;
|
||||||
}
|
}
|
||||||
|
@ -145,7 +145,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: @phone) {
|
||||||
#search {
|
#search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -569,7 +569,7 @@ article.result-images[data-vim-selected]::before {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 80em) {
|
@media screen and (max-width: @tablet) {
|
||||||
#main_preferences,
|
#main_preferences,
|
||||||
#main_about,
|
#main_about,
|
||||||
#main_stats {
|
#main_stats {
|
||||||
|
@ -710,7 +710,7 @@ article.result-images[data-vim-selected]::before {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: @phone) {
|
||||||
#main_results div#results {
|
#main_results div#results {
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
margin: 2rem 0 0 0;
|
margin: 2rem 0 0 0;
|
||||||
|
@ -767,7 +767,7 @@ article.result-images[data-vim-selected]::before {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 35em) {
|
@media screen and (max-width: @small-phone) {
|
||||||
.result-videos {
|
.result-videos {
|
||||||
img.thumbnail {
|
img.thumbnail {
|
||||||
float: none !important;
|
float: none !important;
|
||||||
|
|
|
@ -433,7 +433,7 @@ select {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: @phone) {
|
||||||
.tabs > label {
|
.tabs > label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue