1
0
Fork 0

update css

This commit is contained in:
nanxiaobei 2021-08-24 04:08:41 +08:00
parent 00f1029aab
commit 187f8c671b

View file

@ -28,8 +28,18 @@
--hljs-bg: #282828;
}
html {
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
html {
-webkit-tap-highlight-color: transparent;
font-size: 8px;
}
@ -45,7 +55,6 @@ body {
display: flex;
flex-direction: column;
min-height: 100%;
padding-right: var(--gap);
padding-left: var(--gap);
margin: 0;
@ -60,6 +69,7 @@ body {
}
body > * {
flex-shrink: 0;
width: 100%;
margin-inline: auto;
}
@ -77,11 +87,6 @@ body > * {
/* Reset
-------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
h1,
h2,
@ -170,24 +175,24 @@ img {
.logo {
display: flex;
min-width: calc(var(--side) - var(--gap));
margin-right: var(--gap);
overflow: auto;
min-width: var(--side);
padding-right: var(--gap);
}
.site-name {
max-width: calc(100% - 2rem - 3rem);
padding-bottom: 0.3rem;
overflow: auto;
font-size: 3.5rem;
font-weight: 700;
white-space: nowrap;
}
.btn-theme {
align-self: center;
width: 3rem;
height: 3rem;
margin-left: 2rem;
cursor: pointer;
background: url(./theme.png) left / cover no-repeat;
background: url(./theme.png) left / auto 3rem no-repeat;
transition: background-position 0.4s steps(6);
}
@ -197,7 +202,6 @@ img {
.menu {
display: flex;
margin-right: var(--gap);
overflow: auto;
}
@ -206,33 +210,21 @@ img {
}
.menu a.active {
opacity: 0.4;
opacity: 0.44;
}
.social-icon {
width: 3rem;
margin-left: 3rem;
background-repeat: no-repeat;
background-position: center;
}
.social-icon:first-of-type {
.social {
display: flex;
margin-left: auto;
}
.social-icon.twitter {
background-image: url('./twitter.svg');
.social a {
width: 3rem;
margin-left: 3rem;
background: var(--img) center center no-repeat;
}
.social-icon.github {
background-image: url('./github.svg');
}
.social-icon.instagram {
background-image: url('./instagram.svg');
}
.dark .social-icon {
.dark .social a {
filter: invert(1);
}
@ -256,7 +248,6 @@ img {
[data-menu='true'] .menu {
position: absolute;
inset: auto 0 0;
margin-right: 0;
border-bottom: 1px solid var(--fog);
}
}
@ -265,23 +256,24 @@ img {
-------------------------------------------------- */
.main {
max-width: var(--narrow);
min-height: calc(100% - var(--header) - var(--footer));
padding-top: var(--y-gap);
padding-bottom: var(--y-gap);
}
.page-title {
.main-title {
margin-bottom: calc(var(--y-gap) - 1rem);
font-size: 4rem;
font-weight: 400;
color: var(--air);
}
.page-nav {
.main-nav {
display: flex;
margin-top: 5rem;
}
.page-nav a {
.main-nav a {
line-height: 5.5rem;
color: var(--white);
background: var(--black);
@ -289,7 +281,7 @@ img {
padding-inline: 2.5rem;
}
.page-nav .next {
.main-nav .next {
margin-left: auto;
}
@ -488,7 +480,8 @@ img {
.post-content p,
.post-content ul,
.post-content ol,
.post-content dl {
.post-content dl,
.post-content details {
margin-bottom: 3rem;
}
@ -656,10 +649,10 @@ img {
/* 404
-------------------------------------------------- */
.title-404 {
position: absolute;
inset: var(--header) 0 calc(var(--footer) * 2);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding-bottom: 8rem;
font-size: 16rem;
}