style: improve and fix

This commit is contained in:
LeoKu 2021-10-19 21:59:01 +08:00
parent 1141214114
commit c7254cbd6b
5 changed files with 61 additions and 43 deletions

View File

@ -279,6 +279,8 @@ function handleAction(actionType: ActionType) {
} }
} }
@supports (filter: blur(4rem)) or (-webkit-filter: blur(4rem)) or
(-moz-filter: blur(4rem)) {
.gradient-bg { .gradient-bg {
position: fixed; position: fixed;
top: 0; top: 0;
@ -317,4 +319,5 @@ function handleAction(actionType: ActionType) {
left: -20%; left: -20%;
} }
} }
}
</style> </style>

View File

@ -11,25 +11,21 @@
cx="123.5" cx="123.5"
cy="28" cy="28"
r="26" r="26"
stroke="#aaa" stroke="hsl(211, 19%, 70%)"
stroke-width="4" stroke-width="4"
/> />
<circle <circle
cx="56.5" cx="56.5"
cy="37" cy="37"
r="26" r="26"
stroke="#aaa" stroke="hsl(211, 19%, 70%)"
stroke-width="4" stroke-width="4"
/> />
<path <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" 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="hsl(211, 19%, 70%)"
stroke-width="4"
/>
<path
d="M31 39L1 44.5"
stroke="#aaa"
stroke-width="4" stroke-width="4"
/> />
<path d="M31 39L1 44.5" stroke="hsl(211, 19%, 70%)" stroke-width="4" />
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 725 B

After

Width:  |  Height:  |  Size: 760 B

View File

@ -96,16 +96,23 @@ onUnmounted(() => {
padding: 2rem 0; padding: 2rem 0;
overflow: hidden; overflow: hidden;
transform: translate(-50%, 0); transform: translate(-50%, 0);
@supports (backdrop-filter: blur(0.1rem)) {
backdrop-filter: blur(0.1rem);
}
} }
.code-box { .code-box {
$code-header-height: 4rem; $code-header-height: 4rem;
$code-box-side-padding-normal: 2rem;
$code-box-side-padding-small: 1rem;
position: relative; position: relative;
width: 75%; width: 75%;
max-width: 800px; max-width: 800px;
height: 100%; height: 100%;
margin: 0 auto; 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); background-color: lighten($color-dark, 3);
border-radius: 1rem; border-radius: 1rem;
transition: width 0.2s; transition: width 0.2s;
@ -120,6 +127,12 @@ onUnmounted(() => {
@media screen and (max-width: $screen-sm) { @media screen and (max-width: $screen-sm) {
width: 90%; 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 { .code-header {
@ -130,7 +143,7 @@ onUnmounted(() => {
align-items: center; align-items: center;
width: 100%; width: 100%;
height: $code-header-height; height: $code-header-height;
padding: 0 2rem; padding: 0 $code-box-side-padding-normal;
.title { .title {
font-weight: bold; font-weight: bold;
@ -219,6 +232,11 @@ onUnmounted(() => {
font-family: 'Ubuntu Mono', Fallback; font-family: 'Ubuntu Mono', Fallback;
line-height: 1.4; line-height: 1.4;
@media screen and (max-width: $screen-sm) {
padding: 0 1rem;
font-size: 1rem;
}
& > .token { & > .token {
&.key { &.key {
color: #ffcb6b; color: #ffcb6b;

View File

@ -290,7 +290,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
} }
& :deep(path) { & :deep(path) {
stroke: #aaa !important; stroke: $color-stroke !important;
} }
} }
} }

View File

@ -6,6 +6,7 @@ $color-dark: hsl(216, 14%, 14%);
$color-gray: lighten($color-dark, 5); $color-gray: lighten($color-dark, 5);
$color-page-bg: darken($color-dark, 5); $color-page-bg: darken($color-dark, 5);
$color-configurator: $color-dark; $color-configurator: $color-dark;
$color-stroke: $color-text;
$layout-header-height: 6rem; $layout-header-height: 6rem;
$layout-sider-width: 20rem; $layout-sider-width: 20rem;