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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,12 +1,10 @@
@mio-settings-images-mobile: 700px;
.settings__images {
display: flex;
min-height: 200px;
justify-content: space-between;
margin: 2px;
@media (max-width: @mio-settings-images-mobile) {
@media (max-width: @site-mobile-width) {
flex-direction: column-reverse;
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-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@site-max-width: 1200px;
@site-mobile-width: 800px;
* {
margin: 0;