diff options
author | imzeuk <imzeuk@gmail.com> | 2019-04-12 16:23:28 +0300 |
---|---|---|
committer | imzeuk <imzeuk@gmail.com> | 2019-04-12 16:23:28 +0300 |
commit | e1fd34fc369fccdc69e38d2da98ef9556d15da06 (patch) | |
tree | e6828cc0fc576d2abedad3bc0e8200a66335b76a /static/css/zozo.scss |
first commitv1.0.0
Diffstat (limited to 'static/css/zozo.scss')
-rw-r--r-- | static/css/zozo.scss | 719 |
1 files changed, 719 insertions, 0 deletions
diff --git a/static/css/zozo.scss b/static/css/zozo.scss new file mode 100644 index 0000000..2693add --- /dev/null +++ b/static/css/zozo.scss @@ -0,0 +1,719 @@ +@charset "UTF-8"; + +/*basic styles starts*/ + +html { + background-color: #f7f7f7; + -webkit-font-smoothing: antialiased; +} + +body { + color: #333333; + font-family: "source-han-sans-simplified-c", "PingFang SC", "Hiragino Sans GB", + "PingHei", "Open Sans", sans-serif, Helvetica Neue, "Work Sans", + "Microsoft YaHei", SimSun; + font-size: 16px; + width: 100%; + background-color: #f7f7f7; + margin: 0; + padding: 0; +} + +p { + line-height: 1.9em; + font-weight: 400; + margin: 0; +} + +a { + text-decoration: none; + + &:link, + &:visited { + opacity: 1; + -webkit-transition: all 0.15s linear; + -moz-transition: all 0.15s linear; + -o-transition: all 0.15s linear; + transition: all 0.15s linear; + color: #424242; + } + + &:hover, + &:active { + color: #555555; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-rendering: optimizeLegibility; +} + +/*basic styles ends*/ + +.main { + background: #ffffff; + box-shadow: 0 10px 20px 0 rgba(236, 236, 236, 0.86); + width: 800px; + margin: 60px auto 0; +} + +.content { + width: 720px; + padding: 0 20px; + height: auto; + margin: 0 auto; +} + +.list_with_title .container { + width: 720px; + margin: 0 auto; +} + +.header { + width: 720px; + padding: 100px 0 140px 0; + margin: 0 auto; + -webkit-background-size: cover; + background-size: cover; + + .site_title_container { + padding: 0 0; + + h1 { + line-height: 1; + margin: 0; + } + + a { + text-decoration: none; + font-weight: bold; + float: left; + } + + .site_title a { + font-size: 28px; + width: 65px; + letter-spacing: 2px; + line-height: 1.2; + color: #000000; + + span { + display: none; + } + + &:hover { + color: #666666; + } + } + + .description { + font-size: 14px; + color: #565654; + float: right; + + .sub_title { + font-weight: normal !important; + float: none !important; + text-align: right; + } + } + } + + .my_socials { + list-style: none; + font-size: 14px; + float: right; + margin: 5px 0; + + i { + margin-left: 10px; + } + + a { + color: #5f5f5f; + font-size: 12px; + float: none; + cursor: pointer; + + &:hover { + color: #000000; + } + } + } +} + +.post { + background-color: #ffffff; + margin-top: 50px; + + .post_title { + padding-bottom: 16px; + + h2 { + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1.4rem; + line-height: 1; + font-weight: 600; + color: #1f1f1f; + margin: 0 0 6px 0; + } + + a { + text-decoration: none; + letter-spacing: 1px; + color: #1f1f1f; + font-size: 1.4rem; + line-height: 28px; + } + + span { + color: rgba(0, 0, 0, 0.44); + font-size: 14px; + + &.date { + font-size: 12px; + } + } + } + + .post_detail_title h2 { + font-size: 1.5rem; + font-weight: bold; + } + + .list p { + padding-bottom: 0 !important; + } + + .post_content { + word-break: normal; + + p { + line-height: 2em; + letter-spacing: 0.2px; + } + + a { + text-decoration: none; + letter-spacing: 1px; + color: #e42b2b; + + &:hover { + color: #8e0000; + } + } + + } + + .post_footer { + padding: 20px 0 40px 0; + border-bottom: 1px solid #f3f3f3; + + .meta { + max-width: 100%; + height: 25px; + color: #bbbbbb; + + .info { + float: left; + font-size: 11px; + + .date { + margin-right: 10px; + } + } + + .field { + margin-right: 10px; + } + + .tags a { + text-decoration: none; + color: #bbbbbb; + padding-right: 6px; + + &:hover { + color: #1f1f1f; + } + } + } + } +} + +.page_tags { + text-align: center; + margin-top: 50px; + + ul li { + margin: 10px 15px; + display: inline-block; + font-size: 1em; + } + + .terms_count { + display: inline-block; + position: relative; + top: -8px; + right: -2px; + color: #c5c5c5; + font-size: 12px; + } + + ul { + margin: 0; + padding: 0; + } +} + +.footer { + clear: both; + max-width: 780px; + text-align: center; + font-size: 12px; + padding: 60px 0px; + margin: 0 auto; + + a { + color: #a6a6a6; + margin: 0 12px; + + &:hover { + color: #1f1f1f; + } + } + + .nav_container { + .site_nav_wrap { + text-align: center; + } + + .site_nav { + display: inline-block; + float: none; + + a { + font-size: 13px; + color: #666666; + + &.current { + color: #222222; + } + } + } + } + + .powered_by { + margin: 0; + font-size: 11px; + + a { + color: #cccccc; + margin: 0 2px; + + &:hover { + color: #1f1f1f; + } + } + } + + .footer_slogan { + padding-top: 25px; + padding-bottom: 10px; + color: #000000; + font-size: 16px; + letter-spacing: 1px; + } +} + +.nav { + width: 100%; + text-align: right; + position: relative; + -webkit-font-smoothing: antialiased; + + a { + text-decoration: none; + } +} + +.site_nav { + list-style: none; + margin: 0; + padding: 0; + + ul { + width: 12em; + } + + li, + a { + position: relative; + } + + li { + float: left; + } + + ul li, + &.sm-rtl ul li, + &.sm-vertical li { + float: none; + } + + a { + display: block; + white-space: nowrap; + padding: 12px; + } +} + +@media screen and (max-width: 768px) { + .nav { + display: block; + } + .footer .nav_container .site_nav_wrap { + /*text-align: left;*/ + } +} + +/*for archive*/ + +.list_with_title { + font-size: 14px; + margin: 0; + padding: 0; + + li { + list-style-type: none; + padding: 0; + } + + .listing_title { + font-size: 1.4rem; + color: #1f1f1f; + font-weight: bold; + padding-top: 10px; + line-height: 2.2em; + } + + .listing { + margin: 0 0 50px 0; + padding: 0; + line-height: 2.1; + + .listing_post { + padding-bottom: 5px; + + .post_time { + float: right; + color: #c5c5c5; + font-size: 14px; + } + + a:hover { + color: #1f1f1f; + } + } + } +} + +.pagination { + padding: 30px 0 60px 0; + border-bottom: 1px solid #f2f2f2; + color: #666666; + font-size: 14px; + + a { + color: #888888; + text-decoration: none; + + &:hover { + color: #333333; + } + } + + .pre { + float: left; + } + + .next { + float: right; + } +} + +.markdown { + color: #555555; + line-height: 1.8em; + word-wrap: break-word; + word-break: normal; + overflow-wrap: break-word; + + p, + ul, + ol, + dl { + margin: 0.8em 0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 2.5em 0 1.3em 0; + color: #000000; + } + + h1 { + font-size: 1.35em; + } + + h2 { + font-size: 1.25em; + } + + h3 { + font-size: 1.15em; + } + + h4 { + font-size: 1.1em; + } + + p { + white-space: pre-line; + } + + pre, + code { + font-family: "Roboto Mono", Menlo, Monaco, courier, monospace; + font-size: 0.8em; + background: #f8f8f8; + border: none; + } + + pre { + margin-top: 1.2em; + margin-bottom: 2.2em; + padding: 15px 20px; + display: block; + overflow: auto; + white-space: pre; + word-wrap: break-word; + } + + code { + color: #666666; + padding: 4px 5px; + border-radius: 2px; + white-space: nowrap; + } + + pre code { + padding: 0; + color: #555555; + } + + blockquote p { + white-space: pre-line; + } + + pre { + &::-webkit-scrollbar { + height: 10px; + } + + &::-webkit-scrollbar-button { + display: none; + } + + &::-webkit-scrollbar-track { + background: white; + } + + &::-webkit-scrollbar-thumb { + min-height: 1rem; + background-color: #cccccc; + background-clip: padding-box; + border: 3px solid #fdfdfd; + border-radius: 5px; + + &:active { + background-color: #999999; + border-width: 2px; + } + } + } + + blockquote { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 2.5em 0; + padding: 0 0 0 50px; + font-style: italic; + color: #555555; + border-left: none; + } + + blockquote:before { + content: "“"; + display: block; + font-family: times, sans-serif; + font-style: normal; + font-size: 48px; + color: #444444; + font-weight: bold; + line-height: 30px; + margin-left: -50px; + position: absolute; + } + + strong, + b, + em { + padding: 1px 2px; + background-color: #fcfcf0; + font-weight: normal; + } + + .fancybox { + text-align: center; + } + + img { + max-width: 90%; + height: auto; + } +} + +a.back_to_top { + text-decoration: none; + position: fixed; + bottom: 40px; + right: 30px; + background: #f0f0f0; + height: 40px; + width: 40px; + border-radius: 50%; + line-height: 36px; + font-size: 18px; + text-align: center; + transition-duration: 0.5s; + transition-property: background-color; + display: none; + + span { + color: #888888; + } + + &:hover { + cursor: pointer; + background: #dfdfdf; + + span { + color: #555555; + } + } +} + +@media print, screen and (max-width: 580px) { + .back_to_top { + display: none !important; + } +} + +@media screen and (min-width: 1600px) { + .main { + width: 1000px; + } + .header, + .content { + width: 820px; + } +} + +@media screen and (max-width: 900px) { + .main { + width: 95%; + margin-top: 20px; + } + .header, + .content { + width: 90%; + } + .post_page { + padding-top: 0; + } + .footer a { + margin: 0 6px; + } + .post { + margin-top: 40px; + font-size: 14px; + + .post_title a { + font-size: 1.3rem; + } + } + .post_footer { + padding-bottom: 30px; + } +} + +/*animation starts*/ +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-3px); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-3px); + } + + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-3px); + } + + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-3px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/*animation ends*/ |