diff options
Diffstat (limited to 'css/style.css')
| -rw-r--r-- | css/style.css | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..81235acc --- /dev/null +++ b/css/style.css @@ -0,0 +1,348 @@ +@charset "utf-8"; + +:root +{ + --font-color-0: #04077e; + --font-color-1: #000; + --font-color-2: #666; + --font-color-3: #aaa; + --bg-color-1: #eee; + --line-1: #ccc; + --line-2: #ddd; +} +p +{ + word-wrap: break-word; + white-space: pre-wrap; +} + +body +{ + font-family: "Montserrat", "SF UI Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; + font-size: 16px; + line-height: 1.75; + letter-spacing: 0.6px; + color: var(--font-color-2); + background: #111; +} +a +{ + text-decoration: none; + color: var(--font-color-1); +} + +.paper +{ + padding: 4vw; +} +.paper-main +{ + width: 100%; + max-width: 880px; + margin: 0 auto; + padding: 72px 8vw 24px; + background: #fff; + border-radius: 24px; + background: #fff; +} + +.header +{ + padding-bottom: 48px; + margin-bottom: 48px; + border-bottom: 1px solid var(--line-1); + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: center; +} +.logo +{ + font-size: 2rem; + font-weight: 600; + color: var(--font-color-1); + margin-bottom: 16px; + flex: 0 0 100%; +} +.nav +{ + margin: 0 0 4px; + flex: 0 0 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: center; +} +.nav li +{ + padding: 2px 0; + margin-right: 24px; +} +.nav li:last-of-type +{ + margin-right: 0; +} +.nav li a +{ + color: var(--font-color-1); + opacity: .6; + transition: opacity ease-in-out .5s; +} +.nav li a:hover +{ + opacity: 1; + transition: opacity ease-in-out .5s; +} + +.post-header +{ + margin-bottom: 48px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: center; +} +.post-header .logo +{ + font-size: 1rem; +} +.post-header .go-home +{ + display: block; + padding: 10px 20px 8px; + border-radius: 18px; + background: #fff; + border: 1px solid #eee; + margin: 8px 0; + transition: background ease-in-out .5s; +} +.post-header .go-home:hover +{ + background: var(--bg-color-1); + transition: background ease-in-out .5s; +} +.post-header .go-home svg +{ + transform: translateX(0); + transition: transform ease-in-out .5s; +} +.post-header .go-home:hover svg +{ + transform: translateX(-4px); + transition: transform ease-in-out .5s; +} + +.post-list +{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; +} +.post +{ + width: 100%; + padding-bottom: 48px; + margin-bottom: 48px; + border-bottom: 1px dashed var(--line-2); +} +.post-title +{ + display: inline-block; + font-size: 1.6rem; + font-weight: 600; + line-height: 1.5; + margin-bottom: 12px; + color: var(--font-color-1); + /*transition: color ease-in-out .5s;*/ +} +.post-title:hover +{ + color: var(--font-color-0); + transition: color ease-in-out .5s; +} +.post-except +{ + word-break: break-all; + margin-bottom: 12px; +} +.read-more +{ + padding: 0 4px; + color: var(--font-color-0); +} +.read-more:before, +.read-more:after +{ + display: inline-block; + transition: transform ease-in-out .5s; +} +.read-more:before +{ + content: "{ "; +} +.read-more:after +{ + content: " }"; +} +.read-more:hover:before +{ + transform: translateX(-4px); + transition: transform ease-in-out .25s; +} +.read-more:hover:after +{ + transform: translateX(4px); + transition: transform ease-in-out .25s; +} +.post-date +{ + font-size: 0.875rem; + color: var(--font-color-3); +} + +.paginator +{ + font-size: 0.875rem; + width: 100%; + margin: 0 auto 24px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; +} +.paginator * +{ + display: block; + padding: 8px 16px; + border-radius: 18px; + background: #fff; + border: 1px solid #eee; +} +.paginator .space +{ + display: block; + padding: 8px 16px; + border-radius: 18px; + background: #fff; + border: none; +} +.paginator a +{ + margin: 4px; + color: var(--font-color-2); + transition: color ease-in-out .5s; +} +.paginator a:hover +{ + color: var(--font-color-0); + transition: color ease-in-out .5s; +} +.paginator .current +{ + color: var(--font-color-0); + border: 1px solid var(--font-color-0); +} + +.footer +{ + padding: 24px 0; + font-size: 0.875rem; + color: var(--font-color-3); + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: center; +} +.footer span +{ + text-align: center; + margin-bottom: 8px; +} +.footer a +{ + color: var(--font-color-3); + transition: color ease-in-out .5s; +} +.footer a:hover +{ + color: var(--font-color-0); + transition: color ease-in-out .5s; +} + +.post-main +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + margin-bottom: 24px; +} +.post-main-title +{ + flex: 0 0 100%; + margin-bottom: 12px; + font-size: 1.6rem; + font-weight: 600; + line-height: 1.5; + color: var(--font-color-1); +} +.post-meta +{ + font-size: 0.875rem; + color: var(--font-color-3); + flex: 0 0 100%; + margin-bottom: 32px; +} + +.archive +{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + align-content: normal; +} +.archive li +{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: center; + padding: 12px 0; +} +.archive li:nth-child(odd) +{ + background: #fafafa; +} +.archive li:nth-child(even) +{ + background: #fff; +} +.archive li span +{ + width: 108px; + color: var(--font-color-2); +} +.archive-main +{ + flex: 0 1 calc( 100% - 108px ); +} +.archive-title +{ + color: var(--font-color-1); + /*transition: color ease-in-out .5s;*/ +} +.archive-title:hover +{ + color: var(--font-color-0); + transition: color ease-in-out .5s; +} |