diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/_buttom.scss | 84 | ||||
| -rw-r--r-- | assets/css/_page/_home.scss | 4 | ||||
| -rw-r--r-- | assets/css/_page/_single.scss | 39 | ||||
| -rw-r--r-- | assets/css/_partial/_fixed-button.scss | 19 | ||||
| -rw-r--r-- | assets/css/_partial/_icon.scss | 150 | ||||
| -rw-r--r-- | assets/css/_partial/_share-icon.scss | 440 | ||||
| -rw-r--r-- | assets/css/_partial/_single/_admonition.scss | 64 | ||||
| -rw-r--r-- | assets/css/_partial/_single/_code.scss | 17 | ||||
| -rw-r--r-- | assets/css/_ublogger.scss | 378 | ||||
| -rw-r--r-- | assets/css/_ublogger_media.scss | 170 | ||||
| -rw-r--r-- | assets/css/_variables.scss | 4 |
11 files changed, 1239 insertions, 130 deletions
diff --git a/assets/css/_buttom.scss b/assets/css/_buttom.scss new file mode 100644 index 0000000..590a29c --- /dev/null +++ b/assets/css/_buttom.scss @@ -0,0 +1,84 @@ +a.button { + display: inline-block; + padding: 10px 20px; + max-width: 90%; + box-sizing: border-box; + text-decoration: none; + border-radius: 10px; + background-color: #333; + border: solid 2px #333; + color: #FFF; + text-align: center; + + [theme=dark] & { + color: #FFF; + } +} + +a.button:hover { + color: #333; + background-color: #FFF; +} + +a.button-big { + padding: 15px 30px; + font-size: 160%; + font-weight: bold; +} + +a.button-white { + background-color: #FFF; + color: #333; + border-color: #333; +} + +a.button-white:hover { + background-color: #000; + color: #FFF; +} + +a.button-black { + background-color: #000; + color: #FFF; + border-color: #FFF; +} + +a.button-black:hover { + background-color: #FFF; + color: #333; +} + +a.button-red { + background-color: #fb0021; + border: solid 2px #fb0021; +} + +a.button-red:visited { + color: #ffffff; +} + +a.button-red:hover { + background-color: #FFF; + color: #fb0021; +} + +a.big-grey-button { + display: inline-block; + max-width: 90%; + box-sizing: border-box; + padding: 15px 30px; + background-color: #666; + border: solid 2px #555; + color: #FFF; + text-align: center; + text-decoration: none; + font-size: 160%; + font-weight: bold; + border-radius: 20px; + margin: 50px auto 0; +} + +a.big-grey-button:hover { + background-color: #FFF; + color: #666; +}
\ No newline at end of file diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index 5348288..3a268e4 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -38,11 +38,12 @@ } .links { - padding: .5rem; + padding: 0 .5rem;; font-size: 1.5rem; a * { vertical-align: text-bottom; + margin-right: 6px; } img { @@ -100,7 +101,6 @@ height: 100%; left: 0; top: 0; - @include object-fit(none); } img.lazyloaded { diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index 43fdedd..04d8578 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -96,7 +96,7 @@ } p { - margin: .5rem 0; + margin: $margin-article; } b, strong { @@ -191,6 +191,13 @@ img { max-width: 100%; min-height: 1em; + content-visibility: auto; + } + + .render-image { + img { + box-shadow: 0 0 15px rgba(122,122,122,0.3); + } } .lazyloading { @@ -262,20 +269,30 @@ } } - .typeit { - .code { - padding: .375rem; - font-size: .875rem; - font-family: $code-font-family; - font-weight: bold; - word-break: break-all; - } - } - .version { height: 1.25em; vertical-align: text-bottom; } + + blockquote { + blockquote { + padding: 0; + width: 100%; + line-height: 3.5rem; + + blockquote { + width: 100%; + padding: 0; + line-height: 6rem; + + blockquote { + width: 100%; + padding: 0; + line-height: 8rem; + } + } + } + } } .lg-toolbar .lg-icon::after { diff --git a/assets/css/_partial/_fixed-button.scss b/assets/css/_partial/_fixed-button.scss index eaad26e..c3832d9 100644 --- a/assets/css/_partial/_fixed-button.scss +++ b/assets/css/_partial/_fixed-button.scss @@ -7,32 +7,15 @@ z-index: 100; position: fixed; right: 1.5rem; - font-size: 1rem; - line-height: 1.3rem; - padding: .6rem .6rem; - color: $global-font-secondary-color; + padding: .31rem .75rem; background: $header-background-color; @include border-radius(2rem); @include transition(color 0.4s ease); @include blur; - &:hover, &:active { - color: $global-font-color; - cursor: pointer; - } - - &:active, &:focus, &:hover { - outline: none; - } - [theme=dark] & { - color: $global-font-secondary-color-dark; background: $header-background-color-dark; - - &:hover, &:active { - color: $global-font-color-dark; - } } } diff --git a/assets/css/_partial/_icon.scss b/assets/css/_partial/_icon.scss index f42d2e6..165d17d 100644 --- a/assets/css/_partial/_icon.scss +++ b/assets/css/_partial/_icon.scss @@ -1,13 +1,149 @@ -svg.icon { - display: inline-block; - width: 1.25em; - height: 1em; - text-align: center; +//svg.icon { +// display: inline-block; +// width: 20px; +// height: 20px; +// text-align: center; +// +// path { +// fill: currentColor; +// } +//} - path { - fill: currentColor; +.svg-icon { + display: inline-block; + background-repeat: no-repeat; + background-image: url(/img/icon/sprite.svg); + [theme=dark] & { + background-image: url(/img/icon/sprite-dark.svg); } } +.icon-moon { + width: 18px; + height: 24px; + background-position: 0 0; + vertical-align: middle; +} +.icon-search { + width: 20px; + height: 24px; + background-position: -18px 0; + vertical-align: middle; +} +.icon-cancel { + width: 20px; + height: 24px; + background-position: -39px 0; + vertical-align: middle; +} +.icon-loading { + width: 20px; + height: 24px; + background-position: -60px 0; + vertical-align: middle; +} +.icon-arrow-right { + width: 20px; + height: 24px; + background-position: -80px 0; + vertical-align: middle; +} +.icon-arrow-up { + width: 16px; + height: 22px; + background-position: -100px 0; + vertical-align: middle; +} + +.icon-comments-fixed { + width: 16px; + height: 22px; + background-position: -122px 0; + vertical-align: middle; +} + +.icon-eye { + width: 14px; + height: 12px; + background-position: -155px 0; +} +.icon-folder { + width: 14px; + height: 12px; + background-position: -173px 0; +} +.icon-clock { + width: 14px; + height: 12px; + background-position: -190px 0; +} +.icon-user { + width: 14px; + height: 12px; + background-position: -205px 0; +} +.icon-comments { + width: 14px; + height: 12px; + background-position: -220px 0; +} +.icon-pencil { + width: 14px; + height: 12px; + background-position: -235px 0; +} +.icon-stopwatch { + width: 14px; + height: 11px; + background-position: -248px 0; +} +.icon-copyright { + width: 14px; + height: 12px; + background-position: -263px 0; +} + +.icon-eye-big { + width: 20px; + height: 24px; + background-position: -300px 0; + vertical-align: middle; +} +.icon-clock-big { + width: 20px; + height: 24px; + background-position: -325px 0; + vertical-align: middle; +} +.icon-pencil-big { + width: 20px; + height: 24px; + background-position: -345px 0; + vertical-align: middle; +} +.icon-stopwatch-big { + width: 25px; + height: 23px; + background-position: -362px 0; + vertical-align: middle; +} +.icon-copy { + width: 20px; + height: 25px; + background-position: -390px 0; + vertical-align: middle; +} +.icon-ellipsis { + width: 20px; + height: 25px; + background-position: -415px 0; + vertical-align: middle; +} +.icon-code-right { + width: 20px; + height: 25px; + background-position: -428px 0; + vertical-align: middle; +} img.emoji { height: 1em; diff --git a/assets/css/_partial/_share-icon.scss b/assets/css/_partial/_share-icon.scss index 2a2495d..b7fcd1d 100644 --- a/assets/css/_partial/_share-icon.scss +++ b/assets/css/_partial/_share-icon.scss @@ -1,27 +1,40 @@ .post-info-share { text-align: center; padding: 40px 0 40px 0; +} +.post-share { a.share-icon { border-bottom: none; color: white; } a.share-icon:hover { - padding: 3px 8px;; background: white; - color: #2c678d; border: solid 2px #2c678d; - @include transition(all 0.4s ease); + @include transition(background 0.2s ease); + + .svg-social-icon { + background-image: url(/img/icon/sprite-social-color.svg); + } } } +.share-link { + margin-top: 15px; + margin-right: 8px; + font-size: 20px; + display: inline-block; +} + +.share-text { + font-size: 30px; + margin-bottom: 10px; +} + .share-icon { - color: white; - padding: 3px 8px; - margin-right: 3px; - border-radius: 5px; - font-size: 16px; + border-radius: 6px; + padding: 8px 16px 6px 16px; } .share-telegram { @@ -162,4 +175,415 @@ .share-mix { background: #FF8126; border: solid 2px #FF8126; +} + +.share-hackernews { + background: #FF8126; + border: solid 2px #FF8126; +} + +.svg-social-icon { + display: inline-block; + background-repeat: no-repeat; + background-image: url(/img/icon/sprite-social.svg); +} +.svg-social-icon-color { + display: inline-block; + background-repeat: no-repeat; + background-image: url(/img/icon/sprite-social-color.svg); +} +.icon-rss { + width: 20px; + height: 20px; + background-position: 0 0; +} +.icon-mail-dot-ru { + width: 20px; + height: 20px; + background-position: -25px 0; +} +.icon-udemy { + width: 20px; + height: 20px; + background-position: -50px 0; +} +.icon-discord { + width: 20px; + height: 20px; + background-position: -75px 0; +} +.icon-docker { + width: 20px; + height: 20px; + background-position: -100px 0; +} +.icon-matrix { + width: 20px; + height: 20px; + background-position: -125px 0; +} +.icon-xmpp { + width: 20px; + height: 20px; + background-position: -150px 0; +} +.icon-gitea { + width: 20px; + height: 20px; + background-position: -175px 0; +} +.icon-mastodon { + width: 20px; + height: 20px; + background-position: -200px 0; +} +.icon-researchgate { + width: 20px; + height: 20px; + background-position: -225px 0; +} +.icon-google { + width: 20px; + height: 20px; + background-position: 0 -25px; +} +.icon-vine { + width: 20px; + height: 20px; + background-position: -25px -25px; +} +.icon-wordpress { + width: 20px; + height: 20px; + background-position: -50px -25px; +} +.icon-dribbble { + width: 20px; + height: 20px; + background-position: -75px -25px; +} +.icon-behance { + width: 20px; + height: 20px; + background-position: -100px -25px; +} +.icon-deviantart { + width: 20px; + height: 20px; + background-position: -125px -25px; +} +.icon-jsfiddle { + width: 20px; + height: 20px; + background-position: -150px -25px; +} +.icon-angellist { + width: 20px; + height: 20px; + background-position: -175px -25px; +} +.icon-zhihu { + width: 20px; + height: 20px; + background-position: -200px -25px; +} +.icon-strava { + width: 20px; + height: 20px; + background-position: -225px -25px; +} +.icon-twitch { + width: 20px; + height: 20px; + background-position: 0 -50px; +} +.icon-steam { + width: 20px; + height: 20px; + background-position: -25px -50px; +} +.icon-patreon { + width: 20px; + height: 20px; + background-position: -50px -50px; +} +.icon-kickstarter { + width: 20px; + height: 20px; + background-position: -75px -50px; +} +.icon-foursquare { + width: 20px; + height: 20px; + background-position: -100px -50px; +} +.icon-last-dot-fm { + width: 20px; + height: 20px; + background-position: -125px -50px; +} +.icon-goodreads { + width: 20px; + height: 20px; + background-position: -150px -50px; +} +.icon-500px { + width: 20px; + height: 20px; + background-position: -175px -50px; +} +.icon-paypal { + width: 20px; + height: 20px; + background-position: -200px -50px; +} +.icon-bandcamp { + width: 20px; + height: 20px; + background-position: -225px -50px; +} +.icon-spotify { + width: 20px; + height: 20px; + background-position: 0 -75px; +} +.icon-soundcloud { + width: 20px; + height: 20px; + background-position: -25px -75px; +} +.icon-snapchat { + width: 20px; + height: 20px; + background-position: -50px -75px; +} +.icon-xing { + width: 20px; + height: 20px; + background-position: -75px -75px; +} +.icon-flickr { + width: 20px; + height: 20px; + background-position: -100px -75px; +} +.icon-stackoverflow { + width: 20px; + height: 20px; + background-position: -125px -75px; +} +.icon-bitbucket { + width: 20px; + height: 20px; + background-position: -150px -75px; +} +.icon-freecodecamp { + width: 20px; + height: 20px; + background-position: -175px -75px; +} +.icon-codepen { + width: 20px; + height: 20px; + background-position: -200px -75px; +} +.icon-pinterest { + width: 20px; + height: 20px; + background-position: -225px -75px; +} +.icon-keybase { + width: 20px; + height: 20px; + background-position: 0 -100px; +} +.icon-quora { + width: 20px; + height: 20px; + background-position: -25px -100px; +} +.icon-tumblr { + width: 20px; + height: 20px; + background-position: -50px -100px; +} +.icon-youtube { + width: 20px; + height: 20px; + background-position: -75px -100px; +} +.icon-gitlab { + width: 20px; + height: 20px; + background-position: -100px -100px; +} +.icon-medium { + width: 20px; + height: 20px; + background-position: -125px -100px; +} +.icon-instagram { + width: 20px; + height: 20px; + background-position: -150px -100px; +} +.icon-linkedin { + width: 20px; + height: 20px; + background-position: -175px -100px; +} +.icon-github { + width: 20px; + height: 20px; + background-position: -200px -100px; +} +.icon-mixer { + width: 20px; + height: 20px; + background-position: -225px -100px; +} +.icon-trello { + width: 20px; + height: 20px; + background-position: 0 -125px; +} +.icon-skype { + width: 20px; + height: 20px; + background-position: -25px -125px; +} +.icon-evernote { + width: 20px; + height: 20px; + background-position: -50px -125px; +} +.icon-odnoklassniki { + width: 20px; + height: 20px; + background-position: -75px -125px; +} +.icon-baidu { + width: 20px; + height: 20px; + background-position: -100px -125px; +} +.icon-blogger { + width: 20px; + height: 20px; + background-position: -125px -125px; +} +.icon-myspace { + width: 20px; + height: 20px; + background-position: -150px -125px; +} +.icon-renren { + width: 20px; + height: 20px; + background-position: -175px -125px; +} +.icon-sinaweibo { + width: 20px; + height: 20px; + background-position: -200px -125px; +} +.icon-flipboard { + width: 20px; + height: 20px; + background-position: -225px -125px; +} +.icon-digg { + width: 20px; + height: 20px; + background-position: 0 -150px; +} +.icon-pocket { + width: 20px; + height: 20px; + background-position: -25px -150px; +} +.icon-instapaper { + width: 20px; + height: 20px; + background-position: -50px -150px; +} +.icon-line { + width: 20px; + height: 20px; + background-position: -75px -150px; +} +.icon-xing1 { + width: 20px; + height: 20px; + background-position: -100px -150px; +} +.icon-buffer { + width: 20px; + height: 20px; + background-position: -125px -150px; +} +.icon-reddit { + width: 20px; + height: 20px; + background-position: -150px -150px; +} +.icon-tumblr1 { + width: 20px; + height: 20px; + background-position: -175px -150px; +} +.icon-pinterest1 { + width: 20px; + height: 20px; + background-position: -200px -150px; +} +.icon-viber { + width: 20px; + height: 20px; + background-position: -225px -150px; +} +.icon-linkedin1 { + width: 20px; + height: 20px; + background-position: 0 -175px; +} +.icon-telegram { + width: 20px; + height: 20px; + background-position: -25px -175px; +} +.icon-whatsapp { + width: 20px; + height: 20px; + background-position: -50px -175px; +} +.icon-facebook { + width: 20px; + height: 20px; + background-position: -75px -175px; +} +.icon-vk { + width: 20px; + height: 20px; + background-position: -100px -175px; +} +.icon-twitter { + width: 20px; + height: 20px; + background-position: -125px -175px; +} +.icon-leanpub { + width: 23px; + height: 20px; + background-position: 0 -200px; +} +.icon-hacker-news { + width: 17px; + height: 20px; + background-position: -50px -200px; +} +.icon-stumbleupon { + width: 21px; + height: 20px; + background-position: -75px -200px; }
\ No newline at end of file diff --git a/assets/css/_partial/_single/_admonition.scss b/assets/css/_partial/_single/_admonition.scss index 07f66ae..22e701b 100644 --- a/assets/css/_partial/_single/_admonition.scss +++ b/assets/css/_partial/_single/_admonition.scss @@ -1,7 +1,7 @@ .admonition { border-radius: 6px; position: relative; - margin: 1rem 0; + margin: $margin-article; padding: 0 .75rem; background-color: map-get($admonition-background-color-map, 'note'); border-left: .25rem solid map-get($admonition-color-map, 'note'); @@ -23,6 +23,10 @@ background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15); } + .admonition-title-none { + display: none; + } + &.open .admonition-title { background-color: map-get($admonition-background-color-map, 'note'); } @@ -35,17 +39,66 @@ font-size: 0.85rem; color: map-get($admonition-color-map, 'note'); position: absolute; - top: .8rem; - left: .4rem; + top: .6rem; + left: .5rem; } i.details-icon { color: map-get($admonition-color-map, 'note'); position: absolute; - top: .7rem; + top: .55rem; right: .3rem; } + .admonition-icon { + display: inline-block; + background-repeat: no-repeat; + width: 20px; + height: 20px; + background-image: url(/img/icon/admonition.svg); + } + + .icon-note { + background-position: 0; + } + .icon-abstract { + background-position: -23px 0; + } + .icon-info { + background-position: -46px; + } + .icon-tip { + background-position: -64px; + } + .icon-success { + background-position: -84px; + } + .icon-question { + background-position: -106px; + } + .icon-warning { + background-position: -129px; + } + .icon-failure { + background-position: -152px; + } + .icon-danger { + background-position: -170px; + } + .icon-bug { + background-position: -190px; + } + .icon-example { + background-position: -210px; + } + .icon-quote { + background-position: -233px; + } + .admonition-icon-arrow-right { + background-position: -253px; + } + + @each $type, $color in $admonition-color-map { &.#{$type} { border-left-color: $color; @@ -79,3 +132,6 @@ margin-bottom: .75rem; } } + + + diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss index e0d65da..38d70a0 100644 --- a/assets/css/_partial/_single/_code.scss +++ b/assets/css/_partial/_single/_code.scss @@ -1,7 +1,7 @@ code { display:inline-block; max-width: 100%; - padding: 0 .4rem; + padding: .1rem .4rem 0 .4rem;; @include overflow-wrap(break-word); @include line-break(anywhere); font-size: $code-font-size; @@ -14,6 +14,12 @@ code { } } +em { + code { + line-height: 1.8rem; + } +} + pre { margin: 0; padding: .25rem 0 .25rem .5rem; @@ -57,7 +63,7 @@ code, pre, .highlight table, .highlight tr, .highlight td { .highlight { line-height: 1.4em; - margin: .5rem 0; + margin: $margin-article; > .chroma { position: relative; @@ -73,11 +79,8 @@ code, pre, .highlight table, .highlight tr, .highlight td { color: $code-info-color; background: darken($code-background-color, 8%); border-radius: 6px; - - [theme=dark] & { - color: $code-info-color-dark; - background: darken($code-background-color-dark, 6%); - } + transition-property: background-color, color; + transition-duration: 0.5s; &:hover { cursor: pointer; diff --git a/assets/css/_ublogger.scss b/assets/css/_ublogger.scss index 74b32f3..4fa1c27 100644 --- a/assets/css/_ublogger.scss +++ b/assets/css/_ublogger.scss @@ -1,49 +1,21 @@ // ============================== // uBlogger style // ============================== -@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); - body { line-height: 1.9rem; } -.single { - - p { - margin: 1.2rem 0; - } - - blockquote { - blockquote { - padding: 0; - width: 100%; - line-height: 3.5rem; - - blockquote { - width: 100%; - padding: 0; - line-height: 6rem; - - blockquote { - width: 100%; - padding: 0; - line-height: 8rem; - } - } - } - } -} - .summary-title { margin: 0; } .summary-content { color: #a9a9b3; - display: inline; + display: block; + margin-top: 1rem; p { - margin: 1rem 0; + margin: 0; } } @@ -51,15 +23,17 @@ header { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } -.header-logo { - color: $global-color-accent; - font-family: 'Lobster', sans-serif; - font-size: 1.8rem; +.logo-svg { + fill: $global-color-accent; + + [theme=dark] & { + fill: $global-font-color-dark; + } } article { - .post { + .content-block { a:visited { color: #70a0b0; @@ -100,6 +74,7 @@ article { padding-top: 90px; text-align: center; line-height: 3rem; + margin-bottom: 0.5rem; a.header-mark:before { content: none; @@ -126,8 +101,9 @@ article { em { background: #fff3bc; - padding-bottom: 1px; font-style: inherit; + padding: 4px 7px 6px; + box-decoration-break: clone; [theme=dark] & { background: #AE8029; @@ -138,6 +114,8 @@ article { border-top-left-radius: $article-border-radius; border-top-right-radius: $article-border-radius; } + + @import "_buttom"; } .article-mini { @@ -234,9 +212,10 @@ a.post-tag-summary { .home-meta { display: inline-block; + width: 80%; } - .home-title{ + .home-title { font-size: 30px; } @@ -341,7 +320,7 @@ a.post-tag-summary { h2 { font-size: 2rem; - margin-top: 5rem; + margin-top: 7rem; code { font-size: 90%; @@ -384,33 +363,21 @@ a.post-tag-summary { } .footer-post-author { - margin: 20px 0 0 0; padding: 20px; background-color: $global-background-secondary-color; color: black; - border-radius: 10px 10px 0 0; display: inline-block; width: 100%; box-sizing: border-box; border: solid 2px $global-secondary-color; - border-bottom: none; + border-radius: 10px; + border-bottom: solid 2px #DDD; [theme=dark] & { - background-color: white; + background-color: $global-background-secondary-color; } } -.footer-donate { - border: solid 2px $global-secondary-color; - display: inline-block; - width: 100%; - box-sizing: border-box; - background-color: $global-background-secondary-color; - color: black; - border-radius: 0 0 10px 10px; - padding: 10px; -} - .author-avatar { width: 105px; padding: 0 25px 0 0; @@ -432,6 +399,7 @@ a.post-tag-summary { a { color: black; + &:hover { color: $global-link-hover-color; } @@ -460,10 +428,10 @@ a.post-tag-summary { width: 100%; min-width: 200px; box-sizing: border-box; - border-radius: 10px 10px 0 0; + border-radius: 20px 20px 0 0; [theme=dark] & { - background: #1B1B1C; + background: $global-background-secondary-color-dark; } .single-title { @@ -481,7 +449,7 @@ a.post-tag-summary { background-position: center 50%; background-repeat: no-repeat; background-size: cover; - border-radius: 10px 10px; + border-radius: 10px 10px 0px 0px; .post-title { position: absolute; @@ -509,6 +477,14 @@ a.post-tag-summary { a { color: #a9a9b3; } + + span { + margin-right: 13px; + + i.svg-icon { + margin-right: 1px; + } + } } } @@ -616,7 +592,13 @@ footer { .theme-full, .theme-classic, .theme-wide { .content-block-first { margin-top: 0 !important; - box-shadow: 0 1.2rem 1.2rem 0 rgba(0,0,0,0.1); + box-shadow: 0 1.2rem 1.2rem 0 rgba(0, 0, 0, 0.1); + border-radius: 0 0 $article-summary-border-radius $article-summary-border-radius; + } + + .header-post { + margin-left: auto; + margin-right: auto; } } @@ -637,6 +619,7 @@ footer { } } + .theme-classic, .theme-wide, .theme-full { .header-post { margin-top: 6rem; @@ -650,6 +633,7 @@ footer { } } + .theme-classic.page-toc, .theme-wide.page-toc, .theme-full.page-toc { .header-post { @@ -741,31 +725,33 @@ footer { } -.post-tags { +.post-share { max-width: 900px; width: 100%; min-width: 200px; - box-sizing: border-box; text-align: center; margin: 1rem auto; +} + +.post-tags { + box-sizing: border-box; .tag { margin-top: 10px; margin-right: 10px; padding: 5px 10px 5px 10px; - background: $global-color-accent; border-radius: 4px; - color: white; + color: #DDD; display: inline-block; + border: 2px solid #DDD; [theme=dark] & { - background-color: $global-font-color-dark; - color: black; + color: #DDD; } } } -.post-tags-toc { +.post-share-toc { margin: 1rem 0; } @@ -841,6 +827,15 @@ footer { text-align: right; padding-right: 0; margin-left: 40px; + margin-bottom: 10px; +} + +.block-media_left { + width: 50%; + float: left; + text-align: left; + padding-right: 0; + margin-right: 40px; } figure { @@ -900,6 +895,14 @@ figure { .author { font-size: 0.8rem; } + + span { + margin-right: 13px; + + i.svg-icon { + margin-right: 1px; + } + } } .page.home { @@ -925,8 +928,253 @@ figure { img { width: 100%; + box-shadow: none; + } +} + + +.theme-hero { + .header-post { + max-width: none; + margin: 0 !important; + border-bottom: 1px solid #CDD2D4; + padding-bottom: 80px; + background-color: #fff; + position: relative; + display: block; + box-sizing: border-box; + + [theme=dark] & { + background-color: $global-background-secondary-color-dark; + } } } +.post-hero.mobile { + display: block; + padding-bottom: 32px; +} + +.post-hero.mobile .post-hero-grid { + flex-direction: column; +} + +.post-hero-grid { + display: flex; + flex-direction: row; + align-items: center; + padding-right: 16px; + padding-left: 16px; +} + +.post-hero-grid .post-hero-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + margin-right: 78px; +} + +.post-hero-grid .post-hero-logo { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.hero-text-container .hero-text-description { + margin-top: 24px; + margin-bottom: 32px; + + [theme=dark] & { + color: $global-font-secondary-color-dark; + } +} + +.hero-text-container span { + font-weight: 600; + font-size: 10px; + letter-spacing: 1px; + line-height: 16px; + text-transform: uppercase; + margin-bottom: 0; +} + +.hero-text-container h1 { + font-weight: 400; + color: #000000; + letter-spacing: 0.2px; + line-height: 32px; + + [theme=dark] & { + color: $global-font-color-dark; + } +} + +.hero-text-container p { + font-weight: 400; + font-size: 16px; + color: #333333; + letter-spacing: 0.1px; + text-align: left; + line-height: 24px; +} + +.hero-author .hero-author-profile { + display: flex; + align-items: center; + height: 56px; + margin-bottom: 24px; +} + +.hero-author .hero-author-profile .hero-author-profile-name { + font-size: 16px; + color: #242424; + letter-spacing: -0.2px; + text-align: left; + line-height: 24px; + + [theme=dark] & { + color: $global-font-color-dark; + } +} + +.hero-author .hero-author-profile .hero-author-profile-title { + font-size: 16px; + color: #606060; + font-weight: 300; + letter-spacing: 0.1px; + text-align: left; + line-height: 24px; + + [theme=dark] & { + color: $global-font-color-dark; + } +} + +.hero-author .hero-author-profile:last-of-type { + margin-bottom: 0; +} + +.hero-author img.hero-author-avatar { + height: 100%; + border-radius: 50%; + margin-right: 16px; +} + +.hero-author .profile-text-wrapper { + display: flex; + flex-direction: column; +} + +.hero-author h4 { + font-weight: 500; + font-size: 13px; + color: #333333; + letter-spacing: 0.08px; + text-align: left; + line-height: 24px; + margin: 0; +} + +.hero-author p { + opacity: 0.7; + font-weight: 400; + font-size: 13px; + color: #333333; + letter-spacing: 0.08px; + text-align: left; + line-height: 24px; + margin: 0; +} + +.rendered { + margin-top: 32px; + margin-bottom: 0; + opacity: 0.7; + font-weight: 400; + font-size: 13px; + color: #333333; + letter-spacing: 0.08px; + text-align: left; + line-height: 24px; + + [theme=dark] & { + color: $global-font-color-dark; + } +} + +.hero-img { + margin: 0; + display: flex; + justify-content: center; + + img { + align-self: center; + } +} + +.hero-tags { + margin-top: 3rem; + text-align: center; + + span { + margin-right: 3rem; + } + + [theme=dark] & { + color: $global-font-color-dark; + } +} + +.cat-cit { + margin-top: 4rem; + margin-bottom: 4rem; + border: 2.5px dashed $global-color-accent; + padding: 10px; + + [theme=dark] & { + background: #dddddd; + } + + .no-adb { + color: black; + } +} + +.header-title-share { + + text-align: center; + + a { + font-size: 12px; + display: inline-block; + padding: 2px 7px; + border: solid 2px #555555; + border-radius: 15px; + color: #555555; + text-decoration: none; + margin-right: 4px; + line-height: 16px; + + [theme=dark] & { + color: $global-font-color-dark; + } + } +} + +.home[data-home=posts] { + .post-pinned { + .summary { + border: 3px solid $global-color-accent; + } + } +} + +.render-image { + text-align: center; + display: inline-block; +} + @import "_partial/share-icon"; @import "ublogger_media";
\ No newline at end of file diff --git a/assets/css/_ublogger_media.scss b/assets/css/_ublogger_media.scss index 31cbfd5..3403b50 100644 --- a/assets/css/_ublogger_media.scss +++ b/assets/css/_ublogger_media.scss @@ -10,7 +10,7 @@ } } - .theme-mega-full { + .theme-mega-full, .theme-hero { .content-block-first { margin: 2rem auto; } @@ -35,7 +35,7 @@ width: 100%; } - .post-tags-toc { + .post-share-toc { margin: 1rem auto; } } @@ -80,7 +80,7 @@ width: 100%; } - .theme-mega-full.page-toc { + .theme-mega-full.page-toc, .theme-hero.page-toc { .content-block-position { margin: 2rem auto; } @@ -174,6 +174,11 @@ .post { padding: 10px; + + .render-image { + margin-left: -10px; + margin-right: -10px; + } } .content-block { @@ -215,7 +220,7 @@ } } - .theme-classic, .theme-wide, .theme-full, .theme-mega-full { + .theme-classic, .theme-wide, .theme-full, .theme-mega-full, .theme-hero { article { margin-top: 0; } @@ -280,19 +285,57 @@ } } - .block-media_right { + .block-media_right, .block-media_left { width: 100%; text-align: center; float: none; margin-left: 0; } + .cat-cit { + padding: 0; + border: 0; + + [theme=dark] & { + background: initial; + } + } + + .cat-cit:before { + content: ""; + width: 100%; + border-bottom: 3px dashed #2c678d; + margin-bottom: 20px; + display: block; + } + + .cat-cit:after { + content: ""; + width: 100%; + border-top: 3px dashed #2c678d; + margin-top: 20px; + display: block; + } + + .breadcrumbs, span.tag-none-display { + display: none; + } + +} + +@media only screen and (max-width: 400px) { + .home { + article { + .featured-image-preview { + display: none; + } + } + } } @media print { - div.menu, .fixed-button, .toc, #toc-auto, .post-info-share, - .footer-donate, .post-footer, .comments, .post-tags, footer, .breadcrumbs { + div.menu, .fixed-button, .toc, #toc-auto, .post-info-share, .post-footer, .comments, .post-tags, footer, .breadcrumbs { display: none !important; } @@ -380,4 +423,117 @@ } } + .theme-full, .theme-classic, .theme-wide { + .content-block-first { + box-shadow: none; + } + } +} + +@media screen and (min-width: 900px) { + .post-hero { + display: block; + } + + .post-hero.mobile { + display: none; + } + + .post-hero-grid { + max-width: 1200px; + margin: 0 auto; + padding: 4rem 16px 0; + } + + .hero-text-container { + padding: 0; + } + + .hero-text-container span { + font-size: 13px; + letter-spacing: 1.35px; + line-height: 24px; + } + + .hero-text-container h1 { + opacity: 0.9; + font-weight: 500; + font-size: 40px; + letter-spacing: 0px; + line-height: 48px; + margin-bottom: 24px; + } + + .hero-text-container p { + font-size: 24px; + color: #606060; + letter-spacing: 0.2px; + line-height: 32px; + margin-bottom: 16px; + } + + .hero-author { + padding: 0; + } + + .hero-author h4 { + font-size: 16px; + color: #242424; + letter-spacing: -0.2px; + line-height: 24px; + } + + .hero-author p { + font-weight: 300; + font-size: 16px; + color: #606060; + letter-spacing: 0.1px; + } + + .rendered { + font-weight: 300; + font-size: 16px; + color: #606060; + letter-spacing: 0.1px; + } + + .hero-img { + height: 528px; + width: 528px; + } +} + +@media screen and (max-width: 900px) { + .hero-text-container { + padding-top: 6rem; + } + + .post-hero-grid .post-hero-logo { + display: none; + } + + .post-hero-grid .post-hero-info { + margin-right: 0; + } +} + +@media screen and (min-width: 400px) { + .hero-img { + height: 450px; + width: 450px; + } +} + +@media screen and (min-width: 1200px) { + .hero-img { + width: 588px; + height: 528px; + } + + .hero-text-container h1 { + font-weight: 600; + font-size: 60px; + line-height: 72px; + letter-spacing: -1.35px; + } }
\ No newline at end of file diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index bd0df31..118998d 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -27,7 +27,7 @@ $global-font-color-dark: #a9a9b3 !default; // Color of the secondary text $global-font-secondary-color: #a9a9b3 !default; -$global-font-secondary-color-dark: #5d5d5f !default; +$global-font-secondary-color-dark: #939090 !default; // Color of the link $global-link-color: #161209 !default; @@ -137,6 +137,8 @@ $code-font-size: .875rem !default; // Font family of the code $code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace, $global-font-family !default; +$margin-article: 1.5rem 0; + // Code type map $code-type-map: ( // Custom code type |