summaryrefslogtreecommitdiff
path: root/_sass/components
diff options
context:
space:
mode:
Diffstat (limited to '_sass/components')
-rw-r--r--_sass/components/_article-content.scss221
-rw-r--r--_sass/components/_article-footer.scss17
-rw-r--r--_sass/components/_article-header.scss50
-rw-r--r--_sass/components/_article-info.scss25
-rw-r--r--_sass/components/_article-list.scss18
-rw-r--r--_sass/components/_author-links.scss43
-rw-r--r--_sass/components/_author-profile.scss26
-rw-r--r--_sass/components/_extensions.scss35
-rw-r--r--_sass/components/_footer.scss33
-rw-r--r--_sass/components/_header.scss123
-rw-r--r--_sass/components/_lightbox.scss7
-rw-r--r--_sass/components/_main.scss28
-rw-r--r--_sass/components/_search.scss186
-rw-r--r--_sass/components/_tags.scss24
14 files changed, 836 insertions, 0 deletions
diff --git a/_sass/components/_article-content.scss b/_sass/components/_article-content.scss
new file mode 100644
index 0000000..6dbda0d
--- /dev/null
+++ b/_sass/components/_article-content.scss
@@ -0,0 +1,221 @@
+.article__content {
+ line-height: map-get($base, line-height-lg);
+ word-wrap: break-word;
+ @media print {
+ line-height: map-get($base, line-height);
+ }
+ @include block-elements() {
+ margin: map-get($spacers, 3) 0;
+ @media print {
+ margin: map-get($spacers, 2) 0;
+ }
+ }
+ @include heading-elements() {
+ position: relative;
+ margin-top: map-get($spacers, 4);
+ @media print {
+ margin-top: map-get($spacers, 3);
+ }
+ & > .anchor {
+ @include link-colors($border-color, $main-color-1);
+ margin-left: map-get($spacers, 1);
+ text-decoration: none;
+ visibility: hidden;
+ opacity: 0;
+ & > i {
+ font-size: map-get($base, font-size-sm);
+ }
+ }
+ @include hover() {
+ & > .anchor {
+ cursor: pointer;
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ }
+ h1,
+ h2 {
+ @include split-line(bottom);
+ }
+ hr {
+ border: none;
+ @include horizontal-rules();
+ }
+ blockquote {
+ padding-left: map-get($spacers, 3);
+ font-size: map-get($base, font-size-sm);
+ color: $text-color-l;
+ @include split-line(left, 4px, $border-color);
+ p {
+ margin: map-get($spacers, 2) 0;
+ }
+ & > :last-child {
+ margin-bottom: 0;
+ }
+ }
+ img:not(.emoji) {
+ max-width: 100%;
+ vertical-align: middle;
+ }
+ .emoji {
+ display: inline-block;
+ width: map-get($base, line-height-lg) * .7rem;
+ height: map-get($base, line-height-lg) * .7rem;
+ vertical-align: text-bottom;
+ }
+ .footnotes {
+ @include split-line();
+ margin-top: map-get($spacers, 5);
+ @media print {
+ margin-top: map-get($spacers, 2) * 2;
+ }
+ }
+ code {
+ padding: map-get($spacers, 1) map-get($spacers, 2);
+ background-color: $text-background-color;
+ border-radius: map-get($base, border-radius);
+ span {
+ padding: 0;
+ margin: 0;
+ }
+ }
+ pre {
+ @include overflow(auto);
+ & > code {
+ padding: 0;
+ word-wrap: normal;
+ background-color: transparent;
+ &.language-mermaid, &.language-chart {
+ svg {
+ width: 100%;
+ }
+ display: none;
+ &[data-processed] {
+ display: block;
+ }
+ }
+ }
+ }
+ .highlighter-rouge > .highlight, figure.highlight {
+ & > pre {
+ padding: map-get($spacers, 3) 0 map-get($spacers, 3) map-get($spacers, 3);
+ margin: 0;
+ background-color: $text-background-color;
+ border-radius: map-get($base, border-radius);
+ & > code {
+ display: block;
+ }
+ }
+ }
+ figure.highlight {
+ &::before {
+ display: block;
+ padding: map-get($spacers, 2) map-get($spacers, 3) map-get($spacers, 2) 0;
+ font-weight: map-get($base, font-weight-bold);
+ color: $decorate-color;
+ text-align: right;
+ text-transform: uppercase;
+ content: attr(data-lang);
+ background-color: $text-background-color;
+ border-top-left-radius: map-get($base, border-radius);
+ border-top-right-radius: map-get($base, border-radius);
+ }
+ & > pre {
+ padding-top: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ & > code {
+ & > .rouge-table {
+ width: auto;
+ margin: 0 0 #{- map-get($spacers, 3)} #{- map-get($spacers, 3)};
+ tbody, tr, td {
+ padding-top: 0;
+ padding-bottom: 0;
+ border: none;
+ }
+ & > tbody {
+ @include flexbox;
+ & > tr {
+ width: 100%;
+ @include flexbox;
+ & > .code {
+ padding: 0 0 map-get($spacers, 3) map-get($spacers, 2);
+ @include overflow(auto);
+ }
+ }
+ }
+ tbody td {
+ &.gl {
+ padding-left: map-get($spacers, 3);
+ }
+ & > pre {
+ display: block;
+ margin: 0;
+ border-radius: 0;
+ @include overflow(auto);
+ &.lineno {
+ color: $text-color-l;
+ @include user-select(none);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ ul, ol {
+ margin-left: map-get($spacers, 4);
+ ul, ol {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ li {
+ p {
+ margin: map-get($spacers, 2);
+ @media print {
+ margin: map-get($spacers, 1);
+ }
+ }
+ }
+ }
+ dl {
+ dt, dd {
+ p {
+ margin: map-get($spacers, 2);
+ @media print {
+ margin: map-get($spacers, 1);
+ }
+ }
+ }
+ dt {
+ font-weight: map-get($base, font-weight-bold);
+ }
+ dd {
+ margin-left: 2rem;
+ }
+ }
+ ul.task-list {
+ margin-left: 0;
+ list-style-type: none;
+ ul, ol {
+ margin-left: map-get($spacers, 4);
+ }
+ }
+ table {
+ display: block;
+ width: 100%;
+ border-collapse: collapse;
+ @include overflow(auto);
+ thead, tfoot {
+ background-color: $text-background-color;
+ }
+ th, td {
+ padding: map-get($spacers, 2);
+ border: 1px solid $border-color-l;
+ }
+ th {
+ font-weight: map-get($base, font-weight-bold);
+ }
+ }
+}
diff --git a/_sass/components/_article-footer.scss b/_sass/components/_article-footer.scss
new file mode 100644
index 0000000..575bc8d
--- /dev/null
+++ b/_sass/components/_article-footer.scss
@@ -0,0 +1,17 @@
+.article__footer {
+ margin: map-get($spacers, 4) 0;
+ font-size: map-get($base, font-size-sm);
+}
+
+.article__license, .article__subscribe {
+ a {
+ @include link-colors($text-color, $main-color-1);
+ }
+}
+
+.article__license {
+ color: $text-color-l;
+ img {
+ height: map-get($base, font-size) * 1.6;
+ }
+}
diff --git a/_sass/components/_article-header.scss b/_sass/components/_article-header.scss
new file mode 100644
index 0000000..002cc8c
--- /dev/null
+++ b/_sass/components/_article-header.scss
@@ -0,0 +1,50 @@
+.article__header {
+ margin-top: map-get($spacers, 5);
+ margin-bottom: map-get($spacers, 4);
+ @include media-breakpoint-down(md) {
+ margin-top: map-get($spacers, 4);
+ }
+ header, h1 {
+ display: inline;
+ }
+ h1 {
+ word-wrap: break-word;
+ }
+ .split-space {
+ @include user-select(none);
+ }
+ .edit-on-github {
+ text-decoration: none !important;
+ }
+}
+
+.article__header--overlay {
+ .overlay {
+ min-height: 36rem;
+ padding-top: map-get($spacers, 5) * 2;
+ padding-bottom: map-get($spacers, 5) * 2;
+ @include media-breakpoint-down(md) {
+ min-height: 29rem;
+ padding-top: map-get($spacers, 5);
+ padding-bottom: map-get($spacers, 5);
+ }
+ }
+ .overlay__excerpt {
+ font-size: map-get($base, font-size-h3-xl);
+ @include media-breakpoint-down(lg) {
+ font-size: map-get($base, font-size-h3-lg);
+ }
+ @include media-breakpoint-down(md) {
+ font-size: map-get($base, font-size-h3-sm);
+ }
+ font-weight: map-get($base, font-weight-bold);
+ }
+
+ .article__header {
+ margin-top: 0;
+ }
+}
+
+.article__header--cover {
+ width: 100%;
+}
diff --git a/_sass/components/_article-info.scss b/_sass/components/_article-info.scss
new file mode 100644
index 0000000..bebf9b5
--- /dev/null
+++ b/_sass/components/_article-info.scss
@@ -0,0 +1,25 @@
+.article__info {
+ font-size: map-get($base, font-size-sm);
+ color: $text-color-l;
+ .left-col {
+ float: left;
+ @include media-breakpoint-down(md) {
+ float: none;
+ }
+ }
+ .right-col {
+ float: right;
+ margin-left: map-get($button, padding-x-sm);
+ @include media-breakpoint-down(md) {
+ float: none;
+ }
+ & > li {
+ &:not(:last-child) {
+ @include split-line(right, default, $text-color-l);
+ padding-right: map-get($spacers, 2);
+ margin-right: map-get($spacers, 2);
+ line-height: map-get($base, line-height-xs);
+ }
+ }
+ }
+}
diff --git a/_sass/components/_article-list.scss b/_sass/components/_article-list.scss
new file mode 100644
index 0000000..c59550d
--- /dev/null
+++ b/_sass/components/_article-list.scss
@@ -0,0 +1,18 @@
+.article-list {
+ .item__meta {
+ padding: 0 map-get($spacers, 3) 0 0;
+ font-family: map-get($base, font-family-code);
+ font-size: map-get($base, font-size-sm);
+ white-space: nowrap;
+ }
+ &.grid--sm {
+ .card__header {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+}
+.article-list__group-header {
+ margin-top: map-get($spacers, 3);
+}
diff --git a/_sass/components/_author-links.scss b/_sass/components/_author-links.scss
new file mode 100644
index 0000000..efe09c2
--- /dev/null
+++ b/_sass/components/_author-links.scss
@@ -0,0 +1,43 @@
+.author-links {
+ & > ul {
+ margin: 0;
+ & > li > {
+ .mail-button {
+ @include clickable($text-color-1, $mail-color);
+ }
+ .facebook-button {
+ @include clickable($text-color-1, $facebook-color);
+ }
+ .twitter-button {
+ @include clickable($text-color-1, $twitter-color);
+ }
+ .weibo-button {
+ @include clickable($text-color-1, $weibo-color);
+ }
+ .googlepluse-button {
+ @include clickable($text-color-1, $google-plus-color);
+ }
+ .telegram-button {
+ @include clickable($text-color-1, $telegram-color);
+ }
+ .medium-button {
+ @include clickable($text-color-1, $medium-color);
+ }
+ .zhihu-button {
+ @include clickable($text-color-1, $zhihu-color);
+ }
+ .douban-button {
+ @include clickable($text-color-1, $douban-color);
+ }
+ .linkedin-button {
+ @include clickable($text-color-1, $linkedin-color);
+ }
+ .github-button {
+ @include clickable($text-color-1, $github-color);
+ }
+ .npm-button {
+ @include clickable($text-color-1, $npm-color);
+ }
+ }
+ }
+}
diff --git a/_sass/components/_author-profile.scss b/_sass/components/_author-profile.scss
new file mode 100644
index 0000000..b506715
--- /dev/null
+++ b/_sass/components/_author-profile.scss
@@ -0,0 +1,26 @@
+.author-profile {
+ max-width: 25rem;
+ padding: map-get($spacers, 2) map-get($spacers, 3);
+ margin: map-get($spacers, 4) 0;
+ font-size: map-get($base, font-size-sm);
+ background-color: $text-background-color;
+ @include media-breakpoint-down(md) {
+ text-align: center;
+ }
+}
+.author-profile__avatar {
+ width: 5rem;
+ height: 5rem;
+ margin-top: map-get($spacers, 2);
+ border-radius: 50%;
+}
+.author-profile__name {
+ font-size: map-get($base, font-size-lg);
+ font-weight: map-get($base, font-weight-bold);
+ a {
+ @include link-colors($text-color, $main-color-1);
+ }
+}
+.author-profile__links {
+ @include overflow(auto);
+}
diff --git a/_sass/components/_extensions.scss b/_sass/components/_extensions.scss
new file mode 100644
index 0000000..7c83f75
--- /dev/null
+++ b/_sass/components/_extensions.scss
@@ -0,0 +1,35 @@
+.extensions {
+ margin: map-get($spacers, 3) 0;
+ @extend .d-print-none;
+}
+
+.extensions--video, .extensions--slide, .extensions--demo {
+ position: relative;
+ width: 100%;
+ padding: 0;
+ & > iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.extensions--video {
+ padding-top: percentage(315 / 560);
+}
+
+.extensions--slide {
+ padding-top: percentage(487 / 599);
+}
+
+.extensions--demo {
+ min-height: 340px;
+ padding-top: percentage(315 / 560);
+}
+
+.extensions--audio {
+ display: block;
+ max-width: 100% !important;
+}
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
new file mode 100644
index 0000000..63ed8fe
--- /dev/null
+++ b/_sass/components/_footer.scss
@@ -0,0 +1,33 @@
+/**
+ * Site Info
+ */
+
+.footer {
+ @include flexbox();
+ @include align-items(center);
+ color: $footer-text-color;
+ background: $footer-background;
+ a {
+ @include link-colors ($footer-text-color, $main-color-1);
+ }
+ .site-info {
+ font-size: map-get($base, font-size-xs);
+ text-align: center;
+ .menu {
+ line-height: map-get($base, line-height-xs);
+ & > * {
+ &:not(:last-child) {
+ @include split-line(right, default, $footer-text-color);
+ padding-right: map-get($spacers, 1);
+ margin-right: map-get($spacers, 1);
+ }
+ }
+ }
+ }
+}
+.footer__author-links {
+ @include overflow(auto);
+ .author-links {
+ text-align: center;
+ }
+}
diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
new file mode 100644
index 0000000..44d108d
--- /dev/null
+++ b/_sass/components/_header.scss
@@ -0,0 +1,123 @@
+.header {
+ background: $header-background;
+ a {
+ font-weight: map-get($base, font-weight);
+ text-decoration: none !important;
+ @include link-colors($header-text-color, $main-color-1);
+ }
+ .main {
+ @include flexbox();
+ @include media-breakpoint-down(md) {
+ @include flex-direction(column);
+ }
+ }
+}
+
+.header--dark {
+ @extend .text--dark;
+ background: rgba(#000, .15);
+ .navigation__item--active {
+ &::after {
+ @include split-line(bottom, 4px, $text-color-theme-dark);
+ }
+ }
+}
+
+.header--light {
+ @extend .text--light;
+ background: rgba(#fff, .15);
+ .navigation__item--active {
+ &::after {
+ @include split-line(bottom, 4px, $text-color-theme-light);
+ }
+ }
+}
+
+.header__title {
+ @include menu(3, 0);
+ @include align-items(center);
+ @include flex-wrap(nowrap);
+ @include flex(1);
+ height: map-get($layout, header-height);
+ margin-right: map-get($spacers, 3);
+ white-space: nowrap;
+ @include media-breakpoint-down(md) {
+ height: auto;
+ margin-right: 0;
+ }
+ & > .header__brand {
+ @include flex(1);
+ @include media-breakpoint-down(md) {
+ height: map-get($layout, header-height-sm);
+ }
+ }
+ & > .search-button {
+ display: none;
+ margin-left: map-get($spacers, 2);
+ @include media-breakpoint-down(md) {
+ @include flexbox();
+ }
+ }
+}
+
+.header__brand {
+ @include flexbox();
+ @include align-items(center);
+ & > svg {
+ width: map-get($base, font-size-h4) * 1.6;
+ height: map-get($base, font-size-h4) * 1.6;
+ margin-right: map-get($spacers, 3);
+ vertical-align: middle;
+ @include media-breakpoint-down(md) {
+ width: map-get($base, font-size-h4) * 1.2;
+ height: map-get($base, font-size-h4) * 1.2;
+ }
+ }
+ & > a {
+ display: inline-block;
+ font-size: map-get($base, font-size-h4);
+ @include media-breakpoint-down(md) {
+ font-size: map-get($base, font-size-h4-small);
+ }
+ }
+}
+
+.navigation {
+ @include overflow(auto, "x");
+ & > ul {
+ height: map-get($layout, header-height);
+ padding-bottom: 0;
+ margin: 0;
+ @include media-breakpoint-down(md) {
+ padding-bottom: 4px;
+ margin: -4px 0 0 0;
+ }
+ @include menu(3, 2, nowrap);
+ @include align-items(center);
+ @include media-breakpoint-down(md) {
+ height: auto;
+ }
+ .search-button {
+ @include media-breakpoint-down(md) {
+ display: none;
+ }
+ }
+ }
+}
+
+.navigation__item {
+ &::after {
+ display: block;
+ margin-bottom: -4px;
+ content: "";
+ @include split-line(bottom, 4px, transparent);
+ }
+}
+.navigation__item--active {
+ a {
+ @include link-colors($main-color-1, $main-color-1);
+ }
+ &::after {
+ @include split-line(bottom, 4px, $main-color-1);
+ }
+}
diff --git a/_sass/components/_lightbox.scss b/_sass/components/_lightbox.scss
new file mode 100644
index 0000000..4dad32b
--- /dev/null
+++ b/_sass/components/_lightbox.scss
@@ -0,0 +1,7 @@
+.popup-image {
+ cursor: pointer;
+ @include hover() {
+ @include box-shadow(2);
+ }
+ @include transition(map-get($clickable, transition));
+}
diff --git a/_sass/components/_main.scss b/_sass/components/_main.scss
new file mode 100644
index 0000000..265c727
--- /dev/null
+++ b/_sass/components/_main.scss
@@ -0,0 +1,28 @@
+.main {
+ width: 100%;
+ max-width: map-get($layout, content-max-width);
+ padding: 0 map-get($spacers, 5);
+ margin: 0 auto;
+ @include media-breakpoint-down(lg) {
+ padding: 0 map-get($spacers, 4);
+ }
+ @include media-breakpoint-down(md) {
+ padding: 0 map-get($spacers, 3);
+ }
+}
+
+.has-aside {
+ .main {
+ max-width: map-get($layout, content-max-width) + map-get($layout, aside-width);
+ @include media-breakpoint-down(lg) {
+ max-width: map-get($layout, content-max-width);
+ }
+ }
+}
+
+.full-width {
+ .main {
+ width: 100%;
+ max-width: 100%;
+ }
+}
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
new file mode 100644
index 0000000..d28dabc
--- /dev/null
+++ b/_sass/components/_search.scss
@@ -0,0 +1,186 @@
+.search {
+ @include overflow(auto);
+
+}
+.search--google-custom-search-engine {
+ .main {
+ padding-top: map-get($spacers, 4);
+ padding-bottom: map-get($spacers, 4);
+ @include media-breakpoint-down(md) {
+ position: absolute;
+ padding: 0;
+ }
+ }
+}
+
+.search__header {
+ margin-top: map-get($spacers, 4);
+ font-size: map-get($base, font-size-h1);
+ font-weight: map-get($base, font-weight-bold);
+ color: $text-color-d;
+ .search--light & {
+ color: $text-color-theme-light-d;
+ }
+ .search--dark & {
+ color: $text-color-theme-dark-d;
+ }
+ @include media-breakpoint-down(md) {
+ display: none;
+ }
+}
+
+.search-bar {
+ @include flexbox();
+ margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
+}
+
+.search-box {
+ position: relative;
+ width: 100%;
+ max-width: 22rem;
+ @include media-breakpoint-down(md) {
+ width: 100%;
+ max-width: none;
+ }
+ & > input {
+ display: inline-block;
+ width: 100%;
+ height: $button-height-lg;
+ padding: 0 2rem;
+ margin: 0;
+ line-height: 1 !important;
+ color: $text-color;
+ background-color: transparent;
+ border: 2px solid $border-color;
+ border-radius: map-get($button, pill-radius);
+ -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
+ @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+ @include focus {
+ box-shadow: 0 0 0 2px rgba($border-color, .4);
+ }
+ .search--light & {
+ color: $text-color-theme-light;
+ border-color: $text-color-theme-light;
+ @include focus {
+ box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4);
+ }
+ }
+ .search--dark & {
+ color: $text-color-theme-dark;
+ border-color: $text-color-theme-dark;
+ @include focus {
+ box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4);
+ }
+ }
+ }
+ & > .search-box__icon-search {
+ color: $text-color-l;
+ .search--light & {
+ color: $text-color-theme-light-l;
+ }
+ .search--dark & {
+ color: $text-color-theme-dark-l;
+ }
+ }
+ & > .search-box__icon-clear {
+ & > a {
+ @include link-colors($text-color);
+ .search--light & {
+ @include link-colors($text-color-theme-light);
+ }
+ .search--dark & {
+ @include link-colors($text-color-theme-dark);
+ }
+ cursor: pointer;
+ }
+ }
+ & > .search-box__icon-search, & > .search-box__icon-clear {
+ position: absolute;
+ width: $button-height-lg;
+ height: $button-height-lg;
+ line-height: $button-height-lg;
+ text-align: center;
+ vertical-align: middle;
+ }
+ &.not-empty > .search-box__icon-clear {
+ display: block;
+ }
+ & > .search-box__icon-clear {
+ top: 0;
+ right: 0;
+ display: none;
+ }
+ & > .search-box__icon-search {
+ top: 0;
+ left: 0;
+ }
+}
+
+.search__cancel {
+ margin-left: map-get($spacers, 2);
+ font-weight: map-get($base, font-weight-bold);
+ white-space: nowrap;
+}
+
+.search-result {
+ margin: map-get($spacers, 4) 0;
+ font-size: map-get($base, font-size-sm);
+ line-height: map-get($base, line-height-sm);
+}
+
+.search-result__header {
+ margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0;
+ font-size: map-get($base, font-size-lg);
+ font-weight: map-get($base, font-weight-bold);
+ color: $text-color-l;
+ text-transform: uppercase;
+ .search--light & {
+ color: $text-color-theme-light-l;
+ }
+ .search--dark & {
+ color: $text-color-theme-dark-l;
+ }
+}
+
+.search-result__item {
+ list-style-type: none;
+ a {
+ padding: map-get($spacers, 1) map-get($spacers, 3);
+ @include transition(none);
+ @include clickable($text-color, transparent, $text-color-3, $main-color-3);
+ .search--light & {
+ @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
+ }
+ .search--dark & {
+ @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
+ }
+ }
+ &.active {
+ a {
+ @include plain() {
+ color: $text-color-3;
+ background-color: $main-color-3;
+ .search--light & {
+ color: $text-color-theme-dark;
+ background-color: $main-color-theme-light;
+ }
+ .search--dark & {
+ color: $text-color-theme-light;
+ background-color: $main-color-theme-dark;
+ }
+ }
+ @include active() {
+ @include transition(map-get($clickable, transition));
+ }
+ }
+ }
+}
+
+// google search
+.gsc-control-cse {
+ *,
+ ::before,
+ ::after {
+ box-sizing: initial;
+ }
+}
diff --git a/_sass/components/_tags.scss b/_sass/components/_tags.scss
new file mode 100644
index 0000000..946b1b6
--- /dev/null
+++ b/_sass/components/_tags.scss
@@ -0,0 +1,24 @@
+.site-tags {
+ .tag-button {
+ @include clickable($text-color-3, $main-color-3, default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+ & > .tag-button__count {
+ display: inline-block;
+ margin-left: map-get($spacers, 1);
+ font-size: map-get($base, font-size-xs);
+ line-height: 1;
+ vertical-align: top;
+ }
+ }
+ .tag-button-1 {
+ @include clickable($text-color-1, rgba($main-color-1, .4), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+ }
+ .tag-button-2 {
+ @include clickable($text-color-1, rgba($main-color-1, .55), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+ }
+ .tag-button-3 {
+ @include clickable($text-color-1, rgba($main-color-1, .7), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+ }
+ .tag-button-4 {
+ @include clickable($text-color-1, rgba($main-color-1, .9), default, default, $text-color-2,$main-color-2, $text-color-2,$main-color-2);
+ }
+}
generated by cgit v1.2.3 (git 2.45.2) at 2024-12-25 05:25:02 +0000