提交 c7254cbd 编写于 作者: L LeoKu

style: improve and fix

上级 11412141
......@@ -279,7 +279,9 @@ function handleAction(actionType: ActionType) {
}
}
.gradient-bg {
@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or
(-moz-filter: blur(4rem)) {
.gradient-bg {
position: fixed;
top: 0;
left: 0;
......@@ -316,5 +318,6 @@ function handleAction(actionType: ActionType) {
bottom: -50%;
left: -20%;
}
}
}
</style>
......@@ -11,25 +11,21 @@
cx="123.5"
cy="28"
r="26"
stroke="#aaa"
stroke="hsl(211, 19%, 70%)"
stroke-width="4"
/>
<circle
cx="56.5"
cy="37"
r="26"
stroke="#aaa"
stroke="hsl(211, 19%, 70%)"
stroke-width="4"
/>
<path
d="M98.5 35C98.5 32.8783 97.6571 30.8434 96.1569 29.3431C94.6566 27.8429 92.6217 27 90.5 27C88.3783 27 86.3434 27.8429 84.8431 29.3431C83.3429 30.8434 82.5 32.8783 82.5 35"
stroke="#aaa"
stroke-width="4"
/>
<path
d="M31 39L1 44.5"
stroke="#aaa"
stroke="hsl(211, 19%, 70%)"
stroke-width="4"
/>
<path d="M31 39L1 44.5" stroke="hsl(211, 19%, 70%)" stroke-width="4" />
</g>
</svg>
......@@ -96,16 +96,23 @@ onUnmounted(() => {
padding: 2rem 0;
overflow: hidden;
transform: translate(-50%, 0);
@supports (backdrop-filter: blur(0.1rem)) {
backdrop-filter: blur(0.1rem);
}
}
.code-box {
$code-header-height: 4rem;
$code-box-side-padding-normal: 2rem;
$code-box-side-padding-small: 1rem;
position: relative;
width: 75%;
max-width: 800px;
height: 100%;
margin: 0 auto;
padding: $code-header-height 2rem 2.5rem 2rem;
padding: $code-header-height $code-box-side-padding-normal 2.5rem
$code-box-side-padding-normal;
background-color: lighten($color-dark, 3);
border-radius: 1rem;
transition: width 0.2s;
......@@ -120,6 +127,12 @@ onUnmounted(() => {
@media screen and (max-width: $screen-sm) {
width: 90%;
padding: $code-header-height $code-box-side-padding-small 2.5rem
$code-box-side-padding-small;
.code-header {
padding: 0 $code-box-side-padding-small;
}
}
.code-header {
......@@ -130,7 +143,7 @@ onUnmounted(() => {
align-items: center;
width: 100%;
height: $code-header-height;
padding: 0 2rem;
padding: 0 $code-box-side-padding-normal;
.title {
font-weight: bold;
......@@ -219,6 +232,11 @@ onUnmounted(() => {
font-family: 'Ubuntu Mono', Fallback;
line-height: 1.4;
@media screen and (max-width: $screen-sm) {
padding: 0 1rem;
font-size: 1rem;
}
& > .token {
&.key {
color: #ffcb6b;
......
......@@ -290,7 +290,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
}
& :deep(path) {
stroke: #aaa !important;
stroke: $color-stroke !important;
}
}
}
......
......@@ -6,6 +6,7 @@ $color-dark: hsl(216, 14%, 14%);
$color-gray: lighten($color-dark, 5);
$color-page-bg: darken($color-dark, 5);
$color-configurator: $color-dark;
$color-stroke: $color-text;
$layout-header-height: 6rem;
$layout-sider-width: 20rem;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册