style:完善响应式样式。

This commit is contained in:
徐涛 2021-04-27 07:59:41 +08:00
parent fcaf9f84b7
commit a1fb42307d
6 changed files with 40 additions and 14 deletions

View File

@ -45,22 +45,21 @@
}
});
each(range(1, 10), .(@i) {
&.extend-@{i}-@{media} {
.extend-@{i}-@{media} {
flex-grow: @i;
}
&.shrink-@{i}-@{media} {
.shrink-@{i}-@{media} {
flex-shrink: @i;
}
});
@special-basis: {
fill: fill;
@special-width: {
min: min-content;
max: max-content;
fit: fit-content;
};
each(@special-basis, {
.b-@{key}-@{media} {
flex-basis: @value;
each(@special-width, {
.w-@{key}-@{media} {
width: @value;
}
});
@basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;

View File

@ -1,11 +1,19 @@
@import "common.less";
.vin, .viw {
display: none;
.him {
display: none !important;
}
.text {
.text-align(m);
}
.flex {
.flex(m);
}
.offcanvas-menu {
max-width: max-content;
}
.tags-toc-list .tags-toc-list-item {
width: 40%;
}

View File

@ -1,7 +1,7 @@
@import "common.less";
.vim, .viw {
display: none;
.hin {
display: none !important;
}
.text {
@ -9,4 +9,11 @@
}
.flex {
.flex(n);
}
.offcanvas-menu {
max-width: max-content;
}
.tags-toc-list .tags-toc-list-item {
width: 90%;
}

View File

@ -24,7 +24,8 @@ footer {
align-items: center;
}
.tag-title {
min-width: 100px;
width: max-content;
word-break: keep-all;
}
.category-list, .category-list-child {
padding-left: 8px;
@ -84,11 +85,13 @@ footer {
flex-wrap: wrap;
.tags-toc-list-item {
width: 25%;
flex-grow: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 16px;
margin: 0 8px;
border-bottom: 1px solid #cccccc;
.tags-toc-list-link {
flex-grow: 1;

View File

@ -1,6 +1,10 @@
@import "node_modules/uikit/src/less/uikit.theme.less";
@import "node_modules/uikit/src/less/components/variables.less";
@import "common.less";
@offcanvas-bar-color-mode: dark;
@global-secondary-background: #f8f8f8;
@directions: {
t: top;
b: bottom;

View File

@ -1,11 +1,16 @@
@import "common.less";
.vin, .vim {
display: none;
.hiw {
display: none !important;
}
.text {
.text-align(w);
}
.flex {
.flex(w);
}
.offcanvas-menu {
max-width: max-content;
}