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) { each(range(1, 10), .(@i) {
&.extend-@{i}-@{media} { .extend-@{i}-@{media} {
flex-grow: @i; flex-grow: @i;
} }
&.shrink-@{i}-@{media} { .shrink-@{i}-@{media} {
flex-shrink: @i; flex-shrink: @i;
} }
}); });
@special-basis: { @special-width: {
fill: fill;
min: min-content; min: min-content;
max: max-content; max: max-content;
fit: fit-content; fit: fit-content;
}; };
each(@special-basis, { each(@special-width, {
.b-@{key}-@{media} { .w-@{key}-@{media} {
flex-basis: @value; width: @value;
} }
}); });
@basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24; @basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;

View File

@ -1,11 +1,19 @@
@import "common.less"; @import "common.less";
.vin, .viw { .him {
display: none; display: none !important;
} }
.text { .text {
.text-align(m); .text-align(m);
} }
.flex { .flex {
.flex(m); .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"; @import "common.less";
.vim, .viw { .hin {
display: none; display: none !important;
} }
.text { .text {
@ -9,4 +9,11 @@
} }
.flex { .flex {
.flex(n); .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; align-items: center;
} }
.tag-title { .tag-title {
min-width: 100px; width: max-content;
word-break: keep-all;
} }
.category-list, .category-list-child { .category-list, .category-list-child {
padding-left: 8px; padding-left: 8px;
@ -84,11 +85,13 @@ footer {
flex-wrap: wrap; flex-wrap: wrap;
.tags-toc-list-item { .tags-toc-list-item {
width: 25%; width: 25%;
flex-grow: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
margin: 0 8px;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
.tags-toc-list-link { .tags-toc-list-link {
flex-grow: 1; flex-grow: 1;

View File

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

View File

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