update css
This commit is contained in:
parent
00f1029aab
commit
187f8c671b
1 changed files with 35 additions and 42 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue