flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase mobile transition width of the site.

Browse source
This commit is contained in:
flash 2018-08-15 15:59:34 +02:00
parent 1830742602
commit 5b346b842c
14 changed files with 55 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/less/mio/classes/changelog.less
View file

@ -1,16 +1,14 @@
@mio-changelog-mobile: 700px;
.changelog { .changelog {
display: flex; display: flex;
@media (max-width: @mio-changelog-mobile) { @media (max-width: @site-mobile-width) {
flex-wrap: wrap; flex-wrap: wrap;
} }
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 1px; margin-bottom: 1px;
@media (max-width: @mio-changelog-mobile) { @media (max-width: @site-mobile-width) {
border-bottom: 1px solid #9475b2; border-bottom: 1px solid #9475b2;
padding-bottom: 1px; padding-bottom: 1px;
} }
@ -64,7 +62,7 @@
min-width: 100px; min-width: 100px;
padding-left: 4px; padding-left: 4px;
@media (max-width: @mio-changelog-mobile) { @media (max-width: @site-mobile-width) {
flex-grow: 1; flex-grow: 1;
} }
} }
@ -77,7 +75,7 @@
text-align: right; text-align: right;
} }
@media (max-width: @mio-changelog-mobile) { @media (max-width: @site-mobile-width) {
margin-right: 0; margin-right: 0;
} }
@ -92,7 +90,7 @@
flex: 1 1 auto; flex: 1 1 auto;
margin-left: 2px; margin-left: 2px;
@media (max-width: @mio-changelog-mobile) { @media (max-width: @site-mobile-width) {
width: 100%; width: 100%;
} }

10
assets/less/mio/classes/forum/listing.less
View file

@ -1,5 +1,3 @@
@mio-forum-listing-mobile: 700px;
.forum__listing { .forum__listing {
&__forums { &__forums {
margin: 2px; margin: 2px;
@ -83,7 +81,7 @@
min-width: 100px; min-width: 100px;
flex-direction: column; flex-direction: column;
@media (max-width: @mio-forum-listing-mobile) { @media (max-width: @site-mobile-width) {
min-width: initial; min-width: initial;
border-left-width: 0; border-left-width: 0;
align-self: flex-end; align-self: flex-end;
@ -101,7 +99,7 @@
color: #555; color: #555;
} }
@media (max-width: @mio-forum-listing-mobile) { @media (max-width: @site-mobile-width) {
&__topics, &__topics,
&__posts { &__posts {
font-size: 1em; font-size: 1em;
@ -114,7 +112,7 @@
min-height: 50px; min-height: 50px;
align-items: center; align-items: center;
@media (max-width: @mio-forum-listing-mobile) { @media (max-width: @site-mobile-width) {
min-width: 150px; min-width: 150px;
&--empty { &--empty {
@ -176,7 +174,7 @@
flex-shrink: 1; flex-shrink: 1;
} }
@media (max-width: @mio-forum-listing-mobile) { @media (max-width: @site-mobile-width) {
&__title, &__title,
&__info, &__info,
&__none { &__none {

14
assets/less/mio/classes/forum/post.less
View file

@ -1,5 +1,3 @@
@mio-forum-post-mobile: 700px;
.forum__post { .forum__post {
display: flex; display: flex;
border: 1px solid #9475b2; border: 1px solid #9475b2;
@ -7,7 +5,7 @@
background-color: #fbeeff; background-color: #fbeeff;
margin: 2px 0; margin: 2px 0;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column; flex-direction: column;
} }
@ -23,7 +21,7 @@
margin: 2px; margin: 2px;
line-height: 1.2em; line-height: 1.2em;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
margin: 4px; margin: 4px;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.3em; line-height: 1.3em;
@ -59,7 +57,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
border-right-width: 0; border-right-width: 0;
border: 1px solid #9475b2; border: 1px solid #9475b2;
flex-direction: row; flex-direction: row;
@ -72,7 +70,7 @@
margin: 5px; margin: 5px;
max-width: 170px; max-width: 170px;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
display: none; display: none;
} }
} }
@ -84,7 +82,7 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 5px; margin: 5px;
@ -97,7 +95,7 @@
height: 120px; height: 120px;
box-shadow: 0 1px 2px #9475b2; box-shadow: 0 1px 2px #9475b2;
@media (max-width: @mio-forum-post-mobile) { @media (max-width: @site-mobile-width) {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: 5px; margin-right: 5px;

8
assets/less/mio/classes/forum/topics.less
View file

@ -1,5 +1,3 @@
@mio-forum-topics-mobile: 700px;
.forum__topics { .forum__topics {
&__listing { &__listing {
margin: 1px; margin: 1px;
@ -94,7 +92,7 @@
color: #555; color: #555;
} }
@media (max-width: @mio-forum-topics-mobile) { @media (max-width: @site-mobile-width) {
font-size: 1em; font-size: 1em;
margin: 0 4px; margin: 0 4px;
} }
@ -107,7 +105,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@media (max-width: @mio-forum-topics-mobile) { @media (max-width: @site-mobile-width) {
min-width: initial; min-width: initial;
border-left-width: 0; border-left-width: 0;
align-self: flex-end; align-self: flex-end;
@ -120,7 +118,7 @@
padding-left: 3px; padding-left: 3px;
align-items: center; align-items: center;
@media (max-width: @mio-forum-topics-mobile) { @media (max-width: @site-mobile-width) {
min-width: initial; min-width: initial;
width: 120px; width: 120px;
} }

38
assets/less/mio/classes/header.less
View file

@ -1,5 +1,3 @@
@mio-header-mobile: 700px;
.header { .header {
flex: 0 0 auto; flex: 0 0 auto;
background: linear-gradient(0deg, transparent, #c2affe) repeat-x; background: linear-gradient(0deg, transparent, #c2affe) repeat-x;
@ -11,12 +9,12 @@
padding: 3px 1px; padding: 3px 1px;
max-width: @site-max-width; max-width: @site-max-width;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column; flex-direction: column;
} }
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
&__icons { &__icons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -35,7 +33,7 @@
background-size: 40px; background-size: 40px;
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
display: block; display: block;
} }
} }
@ -55,7 +53,7 @@
background-image: url('https://static.flash.moe/images/imouto-broom.png'); background-image: url('https://static.flash.moe/images/imouto-broom.png');
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
@ -72,7 +70,7 @@
display: none; display: none;
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
display: none; display: none;
font-size: 1.6em; font-size: 1.6em;
line-height: 1.5em; line-height: 1.5em;
@ -82,7 +80,7 @@
} }
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
width: 100%; width: 100%;
background: #c2affe; background: #c2affe;
@ -99,7 +97,7 @@
} }
} }
@media (min-width: @mio-header-mobile) { @media (min-width: @site-mobile-width) {
&__item { &__item {
text-align: center; text-align: center;
transition: background-color .2s; transition: background-color .2s;
@ -129,7 +127,7 @@
list-style: none; list-style: none;
display: block; display: block;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
&__link { &__link {
padding: 2px 16px; padding: 2px 16px;
display: block; display: block;
@ -139,7 +137,7 @@
} }
} }
@media (min-width: @mio-header-mobile) { @media (min-width: @site-mobile-width) {
position: absolute; // floating position: absolute; // floating
transform: scaleY(0); transform: scaleY(0);
transform-origin: center top 0; transform-origin: center top 0;
@ -174,7 +172,7 @@
display: none; display: none;
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
display: none; display: none;
width: 100%; width: 100%;
background: #c2affe; background: #c2affe;
@ -189,7 +187,7 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
display: none; display: none;
} }
} }
@ -202,7 +200,7 @@
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: block; display: block;
@ -219,13 +217,13 @@
display: block; display: block;
text-align: right; text-align: right;
@media (min-width: @mio-header-mobile) { @media (min-width: @site-mobile-width) {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
font-size: 1.6em; font-size: 1.6em;
line-height: 1.5em; line-height: 1.5em;
border-bottom: 1px solid #9475b2; border-bottom: 1px solid #9475b2;
@ -243,7 +241,7 @@
font-size: .9em; font-size: .9em;
line-height: 1.4em; line-height: 1.4em;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
font-size: 1.6em; font-size: 1.6em;
line-height: 1.5em; line-height: 1.5em;
max-width: initial; max-width: initial;
@ -255,7 +253,7 @@
&__action { &__action {
padding-left: 6px; padding-left: 6px;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
padding: 0; padding: 0;
&:not(:last-child) { &:not(:last-child) {
@ -268,13 +266,13 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@media (max-width: @mio-header-mobile) { @media (max-width: @site-mobile-width) {
padding: 4px 8px; padding: 4px 8px;
display: block; display: block;
width: 100%; width: 100%;
} }
@media (min-width: @mio-header-mobile) { @media (min-width: @site-mobile-width) {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

6
assets/less/mio/classes/index.less
View file

@ -1,10 +1,8 @@
@mio-index-mobile: 700px;
.index { .index {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@media (max-width: @mio-index-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -13,7 +11,7 @@
margin-left: 2px; margin-left: 2px;
flex: 0 0 auto; flex: 0 0 auto;
@media (max-width: @mio-index-mobile) { @media (max-width: @site-mobile-width) {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
} }

4
assets/less/mio/classes/news/container.less
View file

@ -1,9 +1,7 @@
@mio-news-mobile: 700px;
.news__container { .news__container {
display: flex; display: flex;
@media (max-width: @mio-news-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column; flex-direction: column;
} }
} }

4
assets/less/mio/classes/news/post.less
View file

@ -3,7 +3,7 @@
margin: 2px; margin: 2px;
display: flex; display: flex;
@media (max-width: @mio-news-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column; flex-direction: column;
} }
} }
@ -17,7 +17,7 @@
&__details { &__details {
width: 200px; width: 200px;
@media (max-width: @mio-news-mobile) { @media (max-width: @site-mobile-width) {
width: 100%; width: 100%;
} }
} }

2
assets/less/mio/classes/news/sidebar.less
View file

@ -4,7 +4,7 @@
flex-shrink: 0; flex-shrink: 0;
margin-left: 2px; margin-left: 2px;
@media (max-width: @mio-news-mobile) { @media (max-width: @site-mobile-width) {
margin: 0; margin: 0;
width: 100%; width: 100%;
margin-top: 2px; margin-top: 2px;

2
assets/less/mio/classes/pagination.less
View file

@ -24,7 +24,7 @@
background: #777; background: #777;
} }
@media (max-width: @mio-news-mobile) { @media (max-width: @site-mobile-width) {
height: 30px; height: 30px;
min-width: 30px; min-width: 30px;
font-size: 1.5em; font-size: 1.5em;

20
assets/less/mio/classes/profile.less
View file

@ -1,11 +1,9 @@
@mio-profile-mobile: 700px;
.profile { .profile {
&__avatar { &__avatar {
width: 200px; width: 200px;
height: 200px; height: 200px;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 20px 0; margin: 20px 0;
@ -32,9 +30,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
height: auto; height: auto;
background-size: 700px auto; background-size: @site-mobile-width auto;
background-position: center top; background-position: center top;
} }
@ -44,7 +42,7 @@
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
margin: 0; margin: 0;
@ -55,7 +53,7 @@
&__info { &__info {
display: flex; display: flex;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column; flex-direction: column;
background-color: #9475b2; background-color: #9475b2;
width: 100%; width: 100%;
@ -65,7 +63,7 @@
&__section { &__section {
margin-right: 2px; margin-right: 2px;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
margin: 0 1px; margin: 0 1px;
} }
} }
@ -76,7 +74,7 @@
margin-bottom: 2px; margin-bottom: 2px;
background-color: rgba(251, 238, 255, .9); background-color: rgba(251, 238, 255, .9);
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
background-color: #fbeeff; background-color: #fbeeff;
} }
@ -105,7 +103,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
min-width: auto; min-width: auto;
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;
@ -114,7 +112,7 @@
&--heading { &--heading {
font-weight: bold; font-weight: bold;
@media (max-width: @mio-profile-mobile) { @media (max-width: @site-mobile-width) {
text-align: left; text-align: left;
} }
} }

2
assets/less/mio/classes/settings/avatar.less
View file

@ -3,7 +3,7 @@
display: block; display: block;
width: 202px; width: 202px;
@media (max-width: @mio-settings-images-mobile) { @media (max-width: @site-mobile-width) {
margin-bottom: 1px; margin-bottom: 1px;
} }

4
assets/less/mio/classes/settings/images.less
View file

@ -1,12 +1,10 @@
@mio-settings-images-mobile: 700px;
.settings__images { .settings__images {
display: flex; display: flex;
min-height: 200px; min-height: 200px;
justify-content: space-between; justify-content: space-between;
margin: 2px; margin: 2px;
@media (max-width: @mio-settings-images-mobile) { @media (max-width: @site-mobile-width) {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;

1
assets/less/mio/main.less
View file

@ -1,6 +1,7 @@
@mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif; @mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif; @mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@site-max-width: 1200px; @site-max-width: 1200px;
@site-mobile-width: 800px;
* { * {
margin: 0; margin: 0;