diff --git a/src/tildes-baukula/_blog.scss b/src/tildes-baukula/_blog.scss new file mode 100644 index 0000000..b7050b8 --- /dev/null +++ b/src/tildes-baukula/_blog.scss @@ -0,0 +1,15 @@ +&.static-site { + .article-summary { + border: 1px solid $comment; + background-color: $background; + padding: 0.8rem; + + h2 { + margin: 0 0 0.4rem 0; + } + + .text-secondary { + color: $comment; + } + } +} diff --git a/src/tildes-baukula/_buttons.scss b/src/tildes-baukula/_buttons.scss new file mode 100644 index 0000000..f12a7a9 --- /dev/null +++ b/src/tildes-baukula/_buttons.scss @@ -0,0 +1,34 @@ +.btn { + @include colorHover($cyan, $background); + + &:hover, + &.btn-primary:hover { + border-color: $pink; + background-color: $pink; + } + + &.btn-link { + @include colorHover($cyan, $background); + + border: 1px solid $cyan; + + &:hover { + border-color: $pink; + background-color: $pink; + } + } + + &.btn-used { + color: $background; + border-color: $pink; + background-color: $pink; + } + + &-post button { + @include colorHover($cyan, $pink); + + &.btn-post-action-used { + color: $pink; + } + } +} diff --git a/src/tildes-baukula/_code-syntax.scss b/src/tildes-baukula/_code-syntax.scss new file mode 100644 index 0000000..246a0e4 --- /dev/null +++ b/src/tildes-baukula/_code-syntax.scss @@ -0,0 +1,73 @@ +// This can be removed once issue 370 is fixed +// https://gitlab.com/tildes/tildes/issues/370 + +.highlight { + .syntax-c { color: $cyan; } + .syntax-err { color: $foreground; } + .syntax-g { color: $foreground; } + .syntax-k { color: $green; } + .syntax-l { color: $foreground; } + .syntax-n { color: $foreground; } + .syntax-o { color: $green; } + .syntax-x { color: $orange; } + .syntax-p { color: $foreground; } + .syntax-cm { color: $cyan; } + .syntax-cp { color: $green; } + .syntax-c1 { color: $cyan; } + .syntax-cs { color: $green; } + .syntax-gd { color: $purple; } + .syntax-ge { color: $foreground; } + .syntax-gr { color: $red; } + .syntax-gh { color: $orange; } + .syntax-gi { color: $green; } + .syntax-go { color: $foreground; } + .syntax-gp { color: $foreground; } + .syntax-gs { color: $foreground; } + .syntax-gu { color: $orange; } + .syntax-gt { color: $foreground; } + .syntax-kc { color: $orange; } + .syntax-kd { color: $pink; } + .syntax-kn { color: $green; } + .syntax-kp { color: $green; } + .syntax-kr { color: $pink; } + .syntax-kt { color: $red; } + .syntax-ld { color: $foreground; } + .syntax-m { color: $purple; } + .syntax-s { color: $purple; } + .syntax-na { color: $foreground; } + .syntax-nb { color: $orange; } + .syntax-nc { color: $pink; } + .syntax-no { color: $orange; } + .syntax-nd { color: $pink; } + .syntax-ni { color: $orange; } + .syntax-ne { color: $orange; } + .syntax-nf { color: $pink; } + .syntax-nl { color: $foreground; } + .syntax-nn { color: $foreground; } + .syntax-nx { color: $foreground; } + .syntax-py { color: $foreground; } + .syntax-nt { color: $pink; } + .syntax-nv { color: $pink; } + .syntax-ow { color: $green; } + .syntax-w { color: $foreground; } + .syntax-mf { color: $purple; } + .syntax-mh { color: $purple; } + .syntax-mi { color: $purple; } + .syntax-mo { color: $purple; } + .syntax-sb { color: $cyan; } + .syntax-sc { color: $purple; } + .syntax-sd { color: $foreground; } + .syntax-s2 { color: $purple; } + .syntax-se { color: $orange; } + .syntax-sh { color: $foreground; } + .syntax-si { color: $purple; } + .syntax-sx { color: $purple; } + .syntax-sr { color: $red; } + .syntax-s1 { color: $purple; } + .syntax-ss { color: $purple; } + .syntax-bp { color: $pink; } + .syntax-vc { color: $pink; } + .syntax-vg { color: $pink; } + .syntax-vi { color: $pink; } + .syntax-il { color: $purple; } +} diff --git a/src/tildes-baukula/_colors.scss b/src/tildes-baukula/_colors.scss new file mode 100644 index 0000000..2fc5c5f --- /dev/null +++ b/src/tildes-baukula/_colors.scss @@ -0,0 +1,11 @@ +$foreground: #f8f8f2; +$background: #282a36; +$selection: #44475a; +$comment: #6272a4; +$red: #ff5555; +$orange: #ffb86c; +$yellow: #f1fa8c; +$green: #50fa7b; +$cyan: #8be9fd; +$purple: #bd93f9; +$pink: #ff79c6; diff --git a/src/tildes-baukula/_comments.scss b/src/tildes-baukula/_comments.scss new file mode 100644 index 0000000..d8effc2 --- /dev/null +++ b/src/tildes-baukula/_comments.scss @@ -0,0 +1,20 @@ +.comment { + border-color: $background; + + &[data-comment-depth='0'] { + border-color: $background; + } + + header { + background-color: $background; + } + + .comment-nav-link, + .comment-nav-link:visited { + @include colorHover($cyan, $pink); + } + + .comment-votes { + color: $foreground; + } +} diff --git a/src/tildes-baukula/_docs.scss b/src/tildes-baukula/_docs.scss new file mode 100644 index 0000000..d601ccc --- /dev/null +++ b/src/tildes-baukula/_docs.scss @@ -0,0 +1,9 @@ +// Hopefully this combination is only ever used in the docs +.date-info.text-secondary.text-small { + color: $foreground; +} + +.toc { + border: 1px solid $comment; + background-color: $background; +} diff --git a/src/tildes-baukula/_extended.scss b/src/tildes-baukula/_extended.scss new file mode 100644 index 0000000..4f064eb --- /dev/null +++ b/src/tildes-baukula/_extended.scss @@ -0,0 +1 @@ +// TODO: Styles for Tildes Extended stuff like user labels diff --git a/src/tildes-baukula/_html.scss b/src/tildes-baukula/_html.scss new file mode 100644 index 0000000..597328d --- /dev/null +++ b/src/tildes-baukula/_html.scss @@ -0,0 +1,48 @@ +a, +a:visited { + @include colorHover($cyan, $pink) +} + +blockquote { + background-color: $background; +} + +pre, +code { + color: $foreground; + background-color: $background; +} + +figure, +section { + border-color: $foreground; +} + +input, +textarea, +.form-input, +.form-input:not(:focus) { + color: $foreground; + border-color: $comment; + background-color: $background; +} + +main, +#sidebar { + background-color: $selection; +} + +th { + border-color: $comment; +} +td { + border-color: $selection; +} + +thead { + background-color: rgba(0, 0, 0, 0.15); +} + +tbody tr:nth-of-type(n) { + background-color: $background; +} diff --git a/src/tildes-baukula/_misc.scss b/src/tildes-baukula/_misc.scss new file mode 100644 index 0000000..2d324a1 --- /dev/null +++ b/src/tildes-baukula/_misc.scss @@ -0,0 +1,76 @@ +// Anywhere a link will go to a user, color it $green +a.link-user, +a.site-header-context[href^='/user'] { + color: $green; + + &:visited { + color: $green; + } +} + +// Anywhere a link will go to a group, color it $orange +a.link-group, +a.site-header-context[href^='/~'], +.nav .nav-item a[href^='/~'] { + color: $orange; + + &:visited { + color: $orange; + } +} + +// Make sure the logo hover keeps the $foreground color, otherwise it would be pink from _anchors.scss +a.site-header-logo:hover { + color: $foreground; +} + +a.logged-in-user-alert, +a.logged-in-user-alert:visited { + color: $background; + @include backgroundHover($orange, $yellow); + padding: 0.1rem 0.3rem; +} + +// The logout button is actually a