Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/uPagge/uBlogger.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/assets/css/_partial
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/_partial')
-rw-r--r--assets/css/_partial/_fixed-button.scss19
-rw-r--r--assets/css/_partial/_icon.scss150
-rw-r--r--assets/css/_partial/_share-icon.scss440
-rw-r--r--assets/css/_partial/_single/_admonition.scss64
-rw-r--r--assets/css/_partial/_single/_code.scss17
5 files changed, 646 insertions, 44 deletions
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-18 18:35:58 +0300