[simple theme] define device width with less vars in defenition.less

This commit is contained in:
MrPaulBlack 2021-10-18 21:57:32 +02:00
parent 32fb2bdf85
commit 6204ef665f
7 changed files with 16 additions and 10 deletions

View file

@ -60,7 +60,7 @@
} }
} }
@media screen and (max-width: @results-width) { @media screen and (max-width: @phone) {
.autocomplete { .autocomplete {
bottom: 0; bottom: 0;
} }

View file

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

View file

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

View file

@ -116,7 +116,7 @@
} }
} }
@media screen and (max-width: 80em) { @media screen and (max-width: @tablet) {
.preferences_back { .preferences_back {
clear: both; clear: both;
} }

View file

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

View file

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

View file

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