maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Crayons Cards and Links (#6997)

Browse source 
* updating links

* fixing exisitng links

* reogranizing links

* update variables

* more variable updates

* .

* rename

* themes adjustments

* whoops

* contrast fix for ben

* little fixes
This commit is contained in:
ludwiczakpawel 2020-04-02 10:48:18 +02:00 • committed by GitHub
parent 7240ccd372
commit 3a17fd2aa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 539 additions and 512 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/initializers/initializeBaseUserData.js
View file

@ -103,7 +103,7 @@ function addRelevantButtonsToComments(user) {
function initializeBaseUserData() {
const user = userData();
const userProfileLinkHTML =
'<a href="/' + user.username + '" id="first-nav-link" class="crayons-nav-block"><div>' +
'<a href="/' + user.username + '" id="first-nav-link" class="crayons-link crayons-link--block"><div>' +
'<span class="fw-medium block color-base-100">' + user.name +'</span>' +
'<small class="fs-s color-base-50">@' + user.username + '</small>' +
'</div></a>';

10
app/assets/stylesheets/_mixins.scss
View file

@ -32,7 +32,7 @@
button {
background: transparent;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
font-size: 17px;
padding: 14px 5px;
margin: 40px auto 70px;
@ -46,7 +46,7 @@
// Card styling
@mixin dev-card {
background: var(--container-bg);
background: var(--card-bg);
@include themeable(border, theme-container-border, none);
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
@ -62,11 +62,11 @@
padding: 8px 16px;
margin: 0 -16px;
border-radius: 3px;
color: var(--link-dimmed-color);
color: var(--link-color);
&:hover {
color: var(--link-dimmed-color-hover);
background: var(--link-dimmed-bg-hover);
color: var(--link-color-hover);
background: var(--link-bg-hover);
}
}

2
app/assets/stylesheets/article-form-needed-legacy.scss
View file

@ -315,7 +315,7 @@
padding: 12px 15px 18px;
font-family: 'Lucida Console', Monaco, monospace, sans-serif;
font-size: 17px;
background: var(--container-bg);
background: var(--card-bg);
color: var(--body-color);
&::placeholder {

18
app/assets/stylesheets/article-show.scss
View file

@ -116,7 +116,7 @@ article {
margin: auto;
.org-branded-title-link {
color: var(--container-color-secondary);
color: var(--card-color-secondary);
.org-branded-title {
font-size: calc(0.9em + 0.3vw);
padding: 8px 0 6px;
@ -191,7 +191,7 @@ article {
padding: 0;
padding: 0 3px 16px;
font-weight: 500;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-size: 13.5px;
line-height: 1.8em;
@ -210,7 +210,7 @@ article {
}
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
text-decoration: none;
}
@ -350,7 +350,7 @@ article {
'Book Antiqua', Georgia, serif;
font-size: 21px;
line-height: 32px;
background: var(--container-bg);
background: var(--card-bg);
position: relative;
z-index: 5;
padding: 5px 0px;
@ -675,7 +675,7 @@ article {
position: relative;
overflow: hidden;
padding: 0px 0px 5px;
background: var(--container-bg);
background: var(--card-bg);
font-family: $helvetica;
a {
@ -745,7 +745,7 @@ article {
font-size: 0.85em;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
margin-right: 6px;
display: inline-block;
}
@ -918,7 +918,7 @@ article {
padding: 4px;
border-radius: 100px;
transition: box-shadow 0.18s;
background: var(--container-bg);
background: var(--card-bg);
@media screen and (min-width: 500px) {
height: 26px;
width: 26px;
@ -948,7 +948,7 @@ article {
vertical-align: 6px;
margin-left: 5px;
vertical-align: 10px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-size: 13px;
width: 27px;
@ -1175,7 +1175,7 @@ article {
.article-actions-comments-count {
display: none;
position: relative;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-weight: bold;
font-size: calc(0.8em + 0.1vw);
vertical-align: calc(7px - 0.07vw);

32
app/assets/stylesheets/articles.scss
View file

@ -36,7 +36,7 @@
display: block;
.side-bar {
display: block;
background: var(--container-bg);
background: var(--card-bg);
height: 100%;
overflow-y: auto;
}
@ -70,7 +70,7 @@
z-index: 5;
padding: 16px 0;
box-sizing: border-box;
color: var(--widget-color);
color: var(--card-secondary-color);
&.sidebar-additional {
display: none;
&.showing {
@ -220,11 +220,11 @@
padding: 5px 0px 15px;
display: none;
font-size: 1.1em;
background: var(--container-bg);
background: var(--card-bg);
a {
display: block;
text-align: center;
color: var(--container-color);
color: var(--card-color);
padding: 20px 0px;
&.selected {
background: var(--accent-brand-lighter);
@ -416,7 +416,7 @@
}
a {
color: var(--container-color);
color: var(--card-color);
}
.placeholder-div {
@ -510,7 +510,7 @@
theme-container-accent-background,
darken($light-gray, 6%)
);
color: var(--container-color);
color: var(--card-color);
padding: 8px;
border-radius: 3px 0 3px 0;
font-weight: 600;
@ -599,7 +599,7 @@
}
}
.time-ago-indicator {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
display: inline-block;
margin-left: 4px;
font-weight: 400;
@ -622,7 +622,7 @@
text-overflow: ellipsis;
font-size: 0.8em;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
&:hover {
@ -732,7 +732,7 @@
bottom: 65px;
font-size: 0.8em;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
@media screen and (min-width: 450px) {
font-size: 1em;
@ -759,7 +759,7 @@
font-size: 0.7em;
padding: 6px 0px;
z-index: 8;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.article-engagement-count {
font-size: 13px;
@ -772,12 +772,12 @@
border: 0;
-webkit-appearance: none;
font-family: $helvetica-condensed;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
a {
&:hover {
opacity: 1;
}
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
img {
height: 18px;
@ -875,7 +875,7 @@
display: flex;
padding: 8px 16px;
font-size: 0.8em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
img {
height: 50px;
@ -897,7 +897,7 @@
}
padding-top: 0.2em;
font-weight: 500;
color: var(--container-color);
color: var(--card-color);
}
&:hover {
@include themeable(
@ -932,7 +932,7 @@
width: 27%;
padding: 9px 0px;
text-align: center;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
margin: 1%;
}
.query-filter-button {
@ -945,7 +945,7 @@
padding: 9px 0px;
text-align: left;
border-radius: 100px;
color: var(--container-color);
color: var(--card-color);
text-align: center;
margin: 1%;

2
app/assets/stylesheets/base/boxes.scss
View file

@ -4,7 +4,7 @@
$this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/
border: 2px solid;
border-radius: $br-default;
background-color: var(--container-bg);
background-color: var(--card-bg);
@include box($this, var(--box), var(--box-darker));

26
app/assets/stylesheets/chat.scss
View file

@ -139,7 +139,7 @@
padding: 8px;
font-size: 14px;
-webkit-appearance: none;
background: var(--container-bg);
background: var(--card-bg);
color: var(--body-color);
@media screen and (min-width: 1000px) {
@ -172,7 +172,7 @@
}
.chat__channeltypefilterbutton--active {
color: var(--link-brand-color);
color: var(--link-branded-color);
@media screen and (min-width: 1300px) {
border: 1px solid darken($light-medium-gray, 5%);
@ -388,7 +388,7 @@
justify-content: space-between;
@include themeable(border, theme-container-border, 1px solid $outline-color);
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
background: var(--container-bg);
background: var(--card-bg);
flex-flow: row nowrap;
}
@ -554,7 +554,7 @@
.activechatchannel__activecontentexitbutton {
border: 0px;
font-size: 30px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
padding: 0px;
background: transparent;
position: absolute;
@ -707,7 +707,7 @@
}
.chatchanneltab--active {
background: var(--container-bg);
background: var(--card-bg);
border: 1px solid $dark-purple;
box-shadow: 3px 3px 0px $dark-purple;
}
@ -950,8 +950,8 @@
}
a h1 {
color: var(--container-color);
border-color: var(--container-color);
color: var(--card-color);
border-color: var(--card-color);
}
img {
@ -982,7 +982,7 @@
resize: none;
flex-grow: 1;
height: 42px;
background: var(--container-bg);
background: var(--card-bg);
@include themeable(border, theme-border, 1px solid $outline-color);
color: var(--body-color);
}
@ -1114,7 +1114,7 @@
max-width: 670px;
padding: 0px;
margin-bottom: 6px;
background: var(--container-bg);
background: var(--card-bg);
.chatchannels__richlinkmainimage {
position: relative;
width: 100%;
@ -1134,14 +1134,14 @@
vertical-align: -0.25em;
&.chatchannels__richlinkprofilepic {
border-radius: 100px;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
}
}
}
h4 {
margin-top: -12px;
margin-bottom: 15px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-weight: 500;
padding: 0px calc(10px + 0.2vw);
img {
@ -1149,7 +1149,7 @@
width: 22px;
border-radius: 100px;
margin-right: 3px;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
vertical-align: -6px;
}
}
@ -1242,7 +1242,7 @@
.mention__list {
position: absolute;
background: var(--container-bg);
background: var(--card-bg);
display: none;
z-index: 1;
border-top: 1px solid #dbdbdb;

44
app/assets/stylesheets/classified_listings.scss
View file

@ -118,9 +118,9 @@
margin: 60px auto 0px;
width: 100%;
max-width: 580px;
background: var(--container-bg);
background: var(--card-bg);
box-sizing: border-box;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
@media screen and (min-width: 580px) {
border-radius: 8px;
margin: 20px auto 20px;
@ -196,7 +196,7 @@
cursor: pointer;
font-size: 0.8em;
padding: 8px 0px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.cta-main-listing-form {
border: 0px;
@ -255,7 +255,7 @@
a {
text-decoration: underline;
display: inline-block;
color: var(--link-brand-color);
color: var(--link-branded-color);
}
@media screen and (min-width: 580px) {
font-size: 1.1em;
@ -266,14 +266,14 @@
}
p {
font-size: 0.8em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
.classifieds-load-more-button {
text-align: center;
button {
color: var(--body-color);
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
font-size: 17px;
padding: 14px 5px;
margin: 40px auto 70px;
@ -294,14 +294,14 @@
padding: 5px;
font-size: 17px;
border-radius: 3px;
background: var(--container-bg);
background: var(--card-bg);
margin-top: 10px;
color: var(--body-color);
border: 1px solid $light-medium-gray;
}
.listingform__tagsoptions {
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
@ -385,7 +385,7 @@
text-overflow: ellipsis;
font-size: 0.9em;
break-inside: avoid;
background: var(--container-bg);
background: var(--card-bg);
h3 {
display: flex;
justify-content: space-between;
@ -467,7 +467,7 @@
.single-classified-listing-tags {
padding: 10px 15px;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
@include themeable(
background,
theme-container-accent-background,
@ -483,10 +483,10 @@
}
.single-classified-listing-author-info {
font-size: 0.69em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
padding: 0px 15px 4px;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
display: inline-block;
&.classified-listing-edit-button {
margin-left: 4px;
@ -524,7 +524,7 @@
margin: 40px auto 10px;
color: var(--body-color);
border: 3px solid var(--body-color);
background: var(--container-bg);
background: var(--card-bg);
}
form.listings-contact-via-connect {
@ -607,7 +607,7 @@ form.listings-contact-via-connect {
}
&.active {
background: var(--container-color-tertiary);
background: var(--card-color-tertiary);
color: var(--body-color-inverted);
}
}
@ -699,12 +699,12 @@ form.listings-contact-via-connect {
.dashboard-listings-view {
.dashboard-listing-row {
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
padding: 5px 15px;
margin-bottom: 13px;
border-radius: 3px;
position: relative;
background: var(--container-bg);
background: var(--card-bg);
&.draft {
background: var(--theme-container-accent-background, #fffeec);
@ -715,7 +715,7 @@ form.listings-contact-via-connect {
}
.listing-org {
background: var(--container-color-secondary);
background: var(--card-color-secondary);
color: var(--body-color-inverted);
margin-right: 5px;
padding: 3px 10px;
@ -726,7 +726,7 @@ form.listings-contact-via-connect {
}
h2 {
color: var(--container-color);
color: var(--card-color);
font-weight: 500;
margin-bottom: 10px;
margin-top: 8px;
@ -740,14 +740,14 @@ form.listings-contact-via-connect {
.dashboard-listing-date {
font-size: 0.85em;
padding: 3px 0px 6px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.dashboard-listing-category {
padding: 10px 15px;
a {
color: var(--container-color-tertiary);
background: var(--container-bg);
color: var(--card-color-tertiary);
background: var(--card-bg);
display: inline-block;
margin: 2px;
padding: 2px 7px;
@ -761,7 +761,7 @@ form.listings-contact-via-connect {
font-size: 0.85em;
padding: 3px 0px 6px;
a {
color: var(--container-color);
color: var(--card-color);
}
}

20
app/assets/stylesheets/comments.scss
View file

@ -65,7 +65,7 @@ a.header-link {
max-width: 100%;
margin: 50px auto 10px;
padding: 0px 0px 90px;
background: var(--container-bg);
background: var(--card-bg);
z-index: 3;
position: relative;
@media screen and (min-width: 820px) {
@ -102,7 +102,7 @@ a.header-link {
margin: auto;
margin-bottom: -35px;
.read-more {
color: var(--link-brand-color);
color: var(--link-branded-color);
display: inline-block;
&:hover {
opacity: 0.96;
@ -305,7 +305,7 @@ a.header-link {
&.preview-loading {
background: white url(image-src('loading-ellipsis.svg')) no-repeat
center center;
background-color: var(--container-bg);
background-color: var(--card-bg);
color: var(--body-color-inverted);
background-size: 50px;
}
@ -319,7 +319,7 @@ a.header-link {
text-align: left;
font-size: 19px;
font-family: $helvetica;
background: var(--container-bg);
background: var(--card-bg);
box-shadow: $shadow;
width: calc(100% - 80px);
margin: 19px auto 8px;
@ -386,7 +386,7 @@ a.header-link {
text-align: right;
font-size: 0.9em;
font-weight: 500;
color: var(--link-brand-color);
color: var(--link-branded-color);
&.sub-comment-code-of-conduct {
font-size: 1em;
}
@ -396,7 +396,7 @@ a.header-link {
margin: 5px 0px;
}
a {
color: var(--link-brand-color);
color: var(--link-branded-color);
}
}
input[type='submit'] {
@ -483,7 +483,7 @@ a.header-link {
.root-comment {
margin-top: -80px;
.comment-parent-link {
background: var(--container-bg);
background: var(--card-bg);
@include themeable(
border,
theme-container-border,
@ -758,7 +758,7 @@ a.header-link {
.details {
padding: 0px;
border-top-left-radius: 3px;
color: var(--link-brand-color);
color: var(--link-branded-color);
position: relative;
.comment-date {
border: none;
@ -768,7 +768,7 @@ a.header-link {
font-size: 12px;
text-align: right;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
.dropbtn {
@ -1067,7 +1067,7 @@ a.header-link {
.inner-comment {
padding: 0px;
border: 1px solid $light-medium-gray;
background: var(--container-bg);
background: var(--card-bg);
&.comment-created-via-fetch {
animation: comment-create 1.2s;
.body {

2
app/assets/stylesheets/components/avatars.scss
View file

@ -62,5 +62,5 @@
}
}
@include avatar-logo('avatar', 100%, var(--widget-color-tertiary));
@include avatar-logo('avatar', 100%, var(--card-color-tertiary));
@include avatar-logo('logo', $br-default, var(--body-color-inverted));

31
app/assets/stylesheets/components/cards.scss Normal file
View file

@ -0,0 +1,31 @@
@import '../config/import';
$card-divider: 1px solid var(--body-bg);
.crayons-card {
border-radius: $br-default;
background: var(--card-bg);
color: var(--card-color);
&--secondary {
background: var(--card-secondary-bg);
color: var(--card-secondary-color);
}
&__header {
padding: $su-4 $su-4;
border-bottom: $card-divider;
display: flex;
justify-content: space-between;
align-items: center;
}
&__title {
color: var(--card-headline);
font-weight: $fw-bold;
}
&__body {
padding: $su-4;
}
}

71
app/assets/stylesheets/components/navigation.scss
View file

@ -1,25 +1,35 @@
@import '../config/import';
.crayons-nav-block {
display: flex;
align-items: center;
padding: $su-3;
border-radius: $br-default;
color: var(--link-dimmed-color);
.crayons-link {
color: var(--link-color);
@media (min-width: $breakpoint-s) {
padding: $su-2;
&--branded {
color: var(--link-branded-color);
}
&:hover:not(&--current) {
background: var(--link-dimmed-bg-hover);
color: var(--link-dimmed-color-hover);
&:hover {
color: var(--link-color-hover);
}
&--current {
font-weight: $fw-medium;
background: var(--link-dimmed-bg-current);
color: var(--link-dimmed-color-current);
color: var(--link-color-current);
background: var(--link-bg-current);
}
}
.crayons-link--block {
display: flex;
align-items: center;
padding: $su-3;
border-radius: $br-default;
&:hover {
background: var(--link-bg-hover);
}
@media (min-width: $breakpoint-s) {
padding: $su-2;
}
.crayons-icon {
@ -43,22 +53,41 @@
}
}
.crayons-link--contentful {
display: block;
padding: $su-4;
border-bottom: 1px solid var(--body-bg);
&:last-child {
border-bottom: 0;
border-bottom-right-radius: $br-default;
border-bottom-left-radius: $br-default;
}
.crayons-link__secondary {
color: var(--link-color-secondary);
font-size: $fs-s;
padding-top: $su-1;
}
&:hover {
background: var(--link-bg-hover-alt);
.crayons-link__secondary {
color: var(--link-color-secondary-hover);
}
}
}
.crayons-tabs {
display: flex;
&__item {
.crayons-link {
padding: 0 0.5em;
color: var(--link-dimmed-secondary-color);
position: relative;
display: inline-block;
&:hover {
color: var(--link-dimmed-color-hover);
}
&--current {
color: var(--link-dimmed-color-current);
font-weight: $fw-medium;
background: transparent;
&::after {
position: absolute;

45
app/assets/stylesheets/config/_colors.scss
View file

@ -52,25 +52,23 @@
// Main colors
--body-bg: #f9fafa; // todo: replace with `var(--base-10);` when ready.
--body-color: #0a0a0a; // todo: replace with `var(--base-100);` when ready.
--body-color: var(
--base-100
); // todo: replace with `var(--base-100);` when ready.
--body-color-inverted: var(--base-inverted);
// Main content containers
--container-bg: var(--base-inverted);
--container-color: var(--base-100);
--container-color-secondary: var(--base-70);
--container-color-tertiary: var(--base-50);
// Secondary content containers
--widget-bg: var(--base-0);
--widget-color: var(--base-90);
--widget-color-secondary: var(--base-70);
--widget-color-tertiary: var(--base-50);
--widget-headline: var(--base-100);
--card-bg: var(--base-inverted);
--card-color: var(--base-100);
--card-color-secondary: var(--base-70);
--card-color-tertiary: var(--base-60);
--card-secondary-bg: var(--base-0);
--card-secondary-color: var(--base-90);
--card-headline-color: var(--base-100);
// Header
--header-bg: var(--base-inverted);
--header-shadow: rgba(0,0,0,0.1);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: var(--base-70);
--header-icons-color-hover: var(--base-100);
@ -85,17 +83,16 @@
--footer-link-color: var(--base-80);
--footer-link-color-hover: var(--base-100);
// Links in content
--link-brand-color: #557de8; // todo: replace with `var(--accent-brand)` when ready.
--link-brand-color-hover: var(--accent-brand-darker);
// Greyscale links, for places where we don't want to make them use accent color
--link-dimmed-color: var(--base-90);
--link-dimmed-color-secondary: var(--base-80);
--link-dimmed-bg-hover: var(--base-0);
--link-dimmed-color-hover: var(--base-100);
--link-dimmed-bg-current: var(--base-inverted);
--link-dimmed-color-current: var(--base-100);
// Links
--link-color: var(--base-90);
--link-color-hover: var(--accent-brand-darker);
--link-color-current: var(--base-100);
--link-color-secondary: var(--base-60);
--link-color-secondary-hover: var(--base-70);
--link-branded-color: var(--accent-brand);
--link-bg-hover: var(--base-0);
--link-bg-hover-alt: var(--base-inverted);
--link-bg-current: var(--base-inverted);
// Primary buttons
--button-primary-bg: var(--accent-brand);

1
app/assets/stylesheets/crayons.scss
View file

@ -7,6 +7,7 @@
@import 'components/avatars';
@import 'components/buttons';
@import 'components/cards';
@import 'components/dropdowns';
@import 'components/forms';
@import 'components/indicators';

10
app/assets/stylesheets/credits.scss
View file

@ -95,7 +95,7 @@
padding: 10px 5px;
a {
text-decoration: underline;
color: var(--link-brand-color);
color: var(--link-branded-color);
}
@media screen and (min-width: 950px) {
font-size: 1.4em;
@ -104,7 +104,7 @@
}
.bulk-description {
text-align: center;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
padding: 25px 12px;
font-size: 0.8em;
@include themeable(
@ -125,7 +125,7 @@
margin: 3px auto;
padding: 10px 0px;
border: 1px solid $light-gray;
background: var(--container-bg);
background: var(--card-bg);
font-weight: bold;
display: inline-block;
font-size: 15px;
@ -153,10 +153,10 @@
cursor: pointer;
font-size: 0.8em;
user-select: none;
color: var(--link-brand-color);
color: var(--link-branded-color);
div {
margin-top: 5px;
background: var(--container-bg);
background: var(--card-bg);
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 1px 3px 0 #cfd7df;

8
app/assets/stylesheets/dashboard.scss
View file

@ -102,7 +102,7 @@
theme-container-accent-background,
$purple
);
color: var(--container-color);
color: var(--card-color);
}
&:not(.active):hover {
@ -112,7 +112,7 @@
theme-container-background-hover,
$light-medium-purple
);
color: var(--container-color);
color: var(--card-color);
}
&:not(:last-child) {
@ -411,11 +411,11 @@
.dashboard-meta-details {
font-size: 0.85em;
padding: 3px 0px 6px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
a {
color: var(--container-color);
color: var(--card-color);
&.block-link {
display: block;
}

6
app/assets/stylesheets/index-comments.scss
View file

@ -3,7 +3,7 @@
.index-comments {
text-align: left;
padding-bottom: calc(0.6vw + 5px);
background: var(--container-bg);
background: var(--card-bg);
border-radius: 3px;
@include themeable(border, theme-container-border, none);
@include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
@ -53,14 +53,14 @@
}
.comment-date {
font-size: 0.7em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
margin-left: 5px;
vertical-align: 2px;
display: inline-block;
}
.comment-preview {
font-size: 0.9em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
@media screen and (min-width: 430px) {
padding: 5px 0px;

6
app/assets/stylesheets/item-list.scss
View file

@ -38,7 +38,7 @@
font-size: 0.9em;
font-family: $monospace;
text-decoration: underline;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.filters-header-action {
font-size: 0.8em;
@ -125,7 +125,7 @@
border-radius: 3px;
background: transparent;
border: 1px solid $black;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
@include themeable(border-color, theme-secondary-color, $medium-gray);
}
}
@ -149,7 +149,7 @@
.item-details {
a {
display: inline-block;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
&.item-user {
margin-right: 5px;

6
app/assets/stylesheets/ltags/ClassifiedListingTag.scss
View file

@ -44,7 +44,7 @@
margin-left: 1px;
a {
color: var(--container-color-secondary);
color: var(--card-color-secondary);
display: inline-block;
margin: 2px;
padding: 2px 7px;
@ -55,7 +55,7 @@
}
.ltag__listing-author-info {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
line-height: 1.3em;
a {
margin: 0.1vw 0;
@ -63,7 +63,7 @@
font-size: 0.7em;
margin-bottom: 0;
font-weight: bold;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
}

6
app/assets/stylesheets/ltags/DevCommentTag.scss
View file

@ -6,7 +6,7 @@
font-family: $helvetica;
margin: 0.95em 0 1.2em;
position: relative;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
box-shadow: $shadow;
border-radius: 3px;
@media screen and (min-width: 760px) {
@ -53,12 +53,12 @@
display: block;
width: 100px;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
line-height: initial;
align-self: center;
margin-right: 6px;

2
app/assets/stylesheets/ltags/GithubReadmeTag.scss
View file

@ -9,7 +9,7 @@
overflow: hidden;
max-width: 620px;
a {
color: var(--link-brand-color) !important;
color: var(--link-branded-color) !important;
}
.readme-overview {
padding: 0.8em 0.5em;

10
app/assets/stylesheets/ltags/GithubTag.scss
View file

@ -41,7 +41,7 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
background-color: #fff;
background-color: var(--container-bg);
background-color: var(--card-bg);
border: 1px solid #d1d5da;
box-shadow: $shadow;
border-radius: 3px;
@ -87,7 +87,7 @@
.timeline-comment-header {
display: flex;
background: #f6f8fa;
background: var(--container-bg);
background: var(--card-bg);
border-bottom: 1px solid #d1d5da;
padding: 0px 15px;
@ -194,7 +194,7 @@
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
background-color: var(--container-bg);
background-color: var(--card-bg);
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
@ -206,7 +206,7 @@
padding: 0px;
margin-bottom: 15px;
a.github-user-link {
color: var(--container-color-secondary);
color: var(--card-color-secondary);
font-weight: 600;
white-space: nowrap;
}
@ -368,7 +368,7 @@
text-align: center;
padding: 0.35em 0 1.35em;
box-shadow: -0px -0px 60px 42px #fff;
box-shadow: -0px -0px 60px 42px var(--container-bg);
box-shadow: -0px -0px 60px 42px var(--card-bg);
position: relative;
z-index: 100;
}

6
app/assets/stylesheets/ltags/LinkTag.scss
View file

@ -80,9 +80,9 @@
margin-bottom: 0;
font-weight: bold;
color: $medium-gray;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
.ltag__link__taglist {
@ -98,7 +98,7 @@
margin-left: 1px;
}
.ltag__link__servicename {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-size: 0.7em;
img {
vertical-align: -5px;

2
app/assets/stylesheets/ltags/StackexchangeTag.scss
View file

@ -142,7 +142,7 @@
text-align: center;
position: relative;
box-shadow: 0px 0px 60px 42px #fff;
box-shadow: 0px 0px 60px 42px var(--container-bg);
box-shadow: 0px 0px 60px 42px var(--card-bg);
}
.ltag__stackexchange--btn {

2
app/assets/stylesheets/ltags/TagTag.scss
View file

@ -17,7 +17,7 @@
}
.ltag__tag__content {
a {
color: var(--container-color);
color: var(--card-color);
}
width: 90%;
width: calc(100% - 36px);

2
app/assets/stylesheets/ltags/UserTag.scss
View file

@ -76,7 +76,7 @@
line-height: 22px;
font-size: 0.75em;
a {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
margin-right: 10px;
display: inline-block;
.icon-img {

12
app/assets/stylesheets/moderators.scss
View file

@ -83,8 +83,8 @@
width: 96%;
max-width: 1600px;
border-radius: 3px;
border: 1px solid var(--container-color-tertiary);
background: var(--container-bg);
border: 1px solid var(--card-color-tertiary);
background: var(--card-bg);
.mod-index-row {
padding: 10px;
@ -125,7 +125,7 @@
}
a {
font-weight: 500;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
.quick-mod-button {
@ -239,7 +239,7 @@
margin-bottom: 5px;
border-radius: 3px;
box-sizing: border-box;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
}
.tag-mod-form form input[type='submit'] {
@ -271,7 +271,7 @@
height: 100px;
box-sizing: boder-box;
border-radius: 3px;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
}
.level-rating-button {
@ -294,7 +294,7 @@
.tag-mod-addition-radio {
padding: 5px 20px;
border-radius: 3px;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
display: inline-block;
margin: 30px auto 10px;
min-width: 205px;

2
app/assets/stylesheets/more-articles.scss
View file

@ -99,7 +99,7 @@
overflow: hidden;
a {
color: var(--container-color);
color: var(--card-color);
}
.content-classification {
margin: 15px 20px -8px;

2
app/assets/stylesheets/notifications.scss
View file

@ -392,7 +392,7 @@
theme-container-background,
1px solid rgb(232, 229, 229)
);
background: var(--container-bg);
background: var(--card-bg);
color: var(--body-color);
}
input[type='submit'] {

10
app/assets/stylesheets/partnerships.scss
View file

@ -30,7 +30,7 @@
border-radius: 12px;
margin: 50px auto 40px;
width: calc(100% - 20px);
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
@include themeable(
box-shadow,
theme-container-box-shadow,
@ -50,7 +50,7 @@
h4 {
font-size: 0.8em;
margin: 3px 0px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
h3 {
margin: 5px 0px;
@ -102,7 +102,7 @@
margin: 8px 0px;
display: inline-block;
border: 0px;
background: var(--link-brand-color);
background: var(--link-branded-color);
@include themeable(color, theme-container-background, white);
}
}
@ -125,7 +125,7 @@
border-radius: 12px;
margin: 10px 0px;
display: inline-block;
border: 1px solid var(--container-color-tertiary);
border: 1px solid var(--card-color-tertiary);
@include themeable(
box-shadow,
theme-container-box-shadow,
@ -146,7 +146,7 @@
text-align: center;
border-radius: 5px;
font-weight: bold;
background: var(--link-brand-color);
background: var(--link-branded-color);
@include themeable(color, theme-container-background, white);
}
}

14
app/assets/stylesheets/preact/article-form.scss
View file

@ -234,7 +234,7 @@
left: 8px;
right: 155px;
}
background: var(--container-bg);
background: var(--card-bg);
border: 1px solid var(--body-color);
font-family: $monospace;
z-index: 20;
@ -294,7 +294,7 @@
}
.articleform__tagoptionsummary {
color: var(--container-color-secondary);
color: var(--card-color-secondary);
font-weight: 400;
}
@ -371,8 +371,8 @@
// scrollbars not needed because the preact-textarea-autosize package
// automatically resizes the article form
overflow: hidden;
background: var(--container-bg);
color: var(--container-color);
background: var(--card-bg);
color: var(--card-color);
@media screen and (min-width: 600px) {
font-size: 18px;
min-height: calc(85vh - 280px);
@ -402,7 +402,7 @@
bottom: 0px;
left: 0;
right: 0;
background: var(--container-bg);
background: var(--card-bg);
z-index: 20;
&::after {
position: absolute;
@ -435,7 +435,7 @@
display: inline-block;
margin-bottom: 2px;
font-size: 11px;
color: var(--container-color-secondary);
color: var(--card-color-secondary);
font-style: italic;
margin-left: -2px;
}
@ -456,7 +456,7 @@
border: none;
box-shadow: none;
color: $medium-gray;
color: var(--container-color-secondary);
color: var(--card-color-secondary);
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;

6
app/assets/stylesheets/preact/onboarding-modal.scss
View file

@ -26,7 +26,7 @@
}
a {
color: var(--link-brand-color);
color: var(--link-branded-color);
}
}
@ -120,7 +120,7 @@
}
.subtitle {
color: var(--container-color-secondary);
color: var(--card-color-secondary);
font-size: $fs-xl;
font-weight: $fw-medium;
letter-spacing: normal;
@ -239,7 +239,7 @@
}
input[type='checkbox']:checked {
background: var(--link-brand-color);
background: var(--link-branded-color);
}
}
}

2
app/assets/stylesheets/scaffolds.scss
View file

@ -66,7 +66,7 @@ body {
}
a {
color: var(--link-brand-color);
color: var(--link-branded-color);
text-decoration: none;
&:hover {
opacity: 0.9;

12
app/assets/stylesheets/settings.scss
View file

@ -432,8 +432,8 @@ $input-width: 650px;
width: 70%;
}
.single-app-integration {
background: var(--container-bg);
border: 1px solid var(--container-color-tertiary);
background: var(--card-bg);
border: 1px solid var(--card-color-tertiary);
border-radius: 8px;
padding: 10px;
h2 {
@ -442,7 +442,7 @@ $input-width: 650px;
font-size: 1.5em;
}
sup {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
img {
height: 1em;
@ -530,7 +530,7 @@ $input-width: 650px;
.github-repos {
max-height: 400px;
overflow-y: auto;
background: var(--container-bg);
background: var(--card-bg);
box-shadow: $shadow;
&.loading-repos {
height: 400px;
@ -542,7 +542,7 @@ $input-width: 650px;
height: 400px;
}
.github-repo-row {
background: var(--container-bg);
background: var(--card-bg);
padding: 12px;
margin: 5px 0px;
transition: all 0.6s ease;
@ -810,7 +810,7 @@ ul.delete__account {
align-items: center;
justify-content: space-between;
flex-flow: row wrap;
background: var(--container-bg);
background: var(--card-bg);
border-radius: 5px;
border: 1px solid $light-medium-gray;
padding: 0.5rem 0 0.8rem 0.5rem;

2
app/assets/stylesheets/sidebar-data.scss
View file

@ -8,7 +8,7 @@
font-family: $monospace;
padding: 16px;
@include themeable(color, theme-secondary-color, $dark-medium-gray);
color: var(--widget-color-tertiary);
color: var(--card-color-tertiary);
.mod-action-button {
padding: 2px 9px;
font-size: 1.2em;

14
app/assets/stylesheets/sticky-nav.scss
View file

@ -21,7 +21,7 @@
}
.primary-sticky-nav-author {
a {
color: var(--container-color);
color: var(--card-color);
}
.primary-sticky-nav-author-top-profile-image {
width: 35px;
@ -40,7 +40,7 @@
}
.primary-sticky-nav-author-summary {
font-weight: 400;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
padding: 10px 0px 5px;
font-style: italic;
font-size: 0.88em;
@ -76,7 +76,7 @@
vertical-align: -1px;
}
a {
color: var(--container-color);
color: var(--card-color);
display: inline-block;
}
}
@ -87,13 +87,13 @@
font-weight: bold;
@include dev-card;
margin-left: 10px;
color: var(--container-color);
color: var(--card-color);
width: 262px;
border-radius: 3px;
.primary-sticky-nav-element-details {
margin-top: 9px;
font-size: 0.8em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
.user-metadata-details {
@ -109,7 +109,7 @@
font-size: 0.8em;
font-weight: 800;
margin-bottom: 2px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.value {
display: inline-block;
@ -124,7 +124,7 @@
.primary-sticky-nav-org-summary {
font-weight: 400;
color: var(--container-color);
color: var(--card-color);
padding: 4px 0px;
font-size: 0.95em;
margin-top: 20px;

14
app/assets/stylesheets/theme-selector.scss
View file

@ -91,7 +91,7 @@
.theme-selector__col--center {
width: 20%;
height: 85%;
background: var(--container-bg);
background: var(--card-bg);
border-radius: 2px;
border: var(--theme-container-border);
}
@ -107,7 +107,7 @@
.theme-selector__posts {
height: calc(100% - 18px);
background: var(--container-bg);
background: var(--card-bg);
border: var(--theme-container-border);
border-radius: 2px;
}
@ -119,7 +119,7 @@
--body-color: #0a0a0a;
--header-bg: #fdf9f3;
--form-bg: #e8e7e7;
--container-bg: #fff;
--card-bg: #fff;
--theme-container-border: 1px solid #d6d6d6;
}
@ -128,7 +128,7 @@
--body-color: #fff;
--header-bg: #1c2938;
--form-bg: #424a54;
--container-bg: #202c3d;
--card-bg: #202c3d;
--theme-container-border: 1px solid #141d26;
}
@ -137,7 +137,7 @@
--body-color: #0a0a0a;
--header-bg: #ff4983;
--form-bg: #fff7f9;
--container-bg: #fff;
--card-bg: #fff;
--theme-container-border: 1px solid #ff4983;
}
@ -146,7 +146,7 @@
--body-color: #0a0a0a;
--header-bg: #ffffff;
--form-bg: #f4f5f7;
--container-bg: #fff;
--card-bg: #fff;
--theme-container-border: 1px solid #d6d6d6;
}
@ -155,7 +155,7 @@
--body-color: #42ff87;
--header-bg: #1c1c1c;
--form-bg: #0a0a0a;
--container-bg: #0a0a0a;
--card-bg: #0a0a0a;
--theme-container-border: 1px solid #42ff87;
}

48
app/assets/stylesheets/themes/hacker.scss
View file

@ -46,20 +46,17 @@
--body-color-inverted: var(--base-inverted);
// Main content containers
--container-bg: var(--base-inverted);
--container-color: var(--accent-brand);
--container-color-secondary: var(--accent-brand-darker);
--container-color-tertiary: var(--base-50);
// Secondary content containers
--widget-bg: var(--base-10);
--widget-color: var(--accent-brand);
--widget-color-secondary: var(--accent-brand-darker);
--widget-color-tertiary: var(--base-50);
--widget-headline: var(--accent-brand-lighter);
--card-bg: var(--base-inverted);
--card-color: var(--accent-brand);
--card-color-secondary: var(--accent-brand-darker);
--card-color-tertiary: var(--base-50);
--card-secondary-bg: var(--base-10);
--card-secondary-color: var(--base-90);
--card-headline-color: var(--accent-brand-lighter);
// Header
--header-bg: var(--base-10);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: var(--base-70);
--header-icons-color-hover: var(--base-100);
@ -74,17 +71,16 @@
--footer-link-color: var(--accent-brand);
--footer-link-color-hover: var(--accent-brand-lighter);
// Links in content
--link-brand-color: #e24ec1;
--link-brand-color-hover: #ff53d9;
// Greyscale links, for places where we don't want to make them use accent color
--link-dimmed-color: var(--accent-brand);
--link-dimmed-color-secondary: var(--accent-brand-darker);
--link-dimmed-bg-hover: var(--base-0);
--link-dimmed-color-hover: var(--accent-brand-lighter);
--link-dimmed-bg-current: var(--base-inverted);
--link-dimmed-color-current: var(--accent-brand-lighter);
// Links
--link-color: var(--accent-brand);
--link-color-hover: var(--accent-brand-darker); // #ff53d9;
--link-color-current: var(--accent-brand-lighter);
--link-color-secondary: var(--accent-brand-darker);
--link-color-secondary-hover: var(--accent-brand-darker);
--link-branded-color: #e24ec1;
--link-bg-hover: var(--base-0);
--link-bg-hover-alt: var(--base-0);
--link-bg-current: var(--base-inverted);
// Primary buttons
--button-primary-bg: var(--accent-brand);
@ -119,4 +115,12 @@
// Default box
--box: var(--base-90);
--box-darker: var(--base-100);
// Indicators
--indicator-accent-bg: var(--accent-brand);
--indicator-accent-color: var(--body-color-inverted);
--indicator-critical-bg: var(--accent-danger);
--indicator-critical-color: var(--body-color-inverted);
--indicator-default-bg: var(--button-secondary-bg);
--indicator-default-color: var(--button-secondary-color);
}

43
app/assets/stylesheets/themes/minimal.scss
View file

@ -46,26 +46,22 @@
--body-color-inverted: var(--base-inverted);
// Main content containers
--container-bg: var(--base-inverted);
--container-color: var(--base-100);
--container-color-secondary: var(--base-70);
--container-color-tertiary: var(--base-50);
// Secondary content containers
--widget-bg: var(--base-0);
--widget-color: var(--base-90);
--widget-color-secondary: var(--base-70);
--widget-color-tertiary: var(--base-50);
--widget-headline: var(--base-100);
--card-bg: var(--base-inverted);
--card-color: var(--base-100);
--card-color-secondary: var(--base-70);
--card-color-tertiary: var(--base-50);
--card-secondary-bg: var(--base-0);
--card-secondary-color: var(--base-90);
--card-headline-color: var(--base-100);
// Header
--header-bg: var(--base-0);
--header-shadow: rgba(0,0,0,0.1);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: #0a0a0a;
--header-icons-color-hover: #000;
// Logo
--logo-bg: ##e3e5ed;
--logo-bg: #e3e5ed;
--logo-color: #232426;
// Footer
@ -75,17 +71,16 @@
--footer-link-color: var(--base-80);
--footer-link-color-hover: var(--base-100);
// Links in content
--link-brand-color: #757ec6;
--link-brand-color-hover: var(--accent-brand-darker);
// Greyscale links, for places where we don't want to make them use accent color
--link-dimmed-color: var(--base-90);
--link-dimmed-color-secondary: var(--base-80);
--link-dimmed-bg-hover: var(--base-0);
--link-dimmed-color-hover: var(--base-100);
--link-dimmed-bg-current: var(--base-inverted);
--link-dimmed-color-current: var(--base-100);
// Links
--link-color: var(--base-90);
--link-color-hover: var(--accent-brand-darker);
--link-color-current: var(--base-100);
--link-color-secondary: var(--base-70);
--link-color-secondary-hover: var(--base-80);
--link-branded-color: var(--accent-brand);
--link-bg-hover: var(--base-0);
--link-bg-hover-alt: var(--base-10);
--link-bg-current: var(--base-inverted);
// Primary buttons
--button-primary-bg: var(--accent-brand);

41
app/assets/stylesheets/themes/night.scss
View file

@ -46,21 +46,17 @@
--body-color-inverted: var(--base-inverted);
// Main content containers
--container-bg: var(--base-10);
--container-color: var(--base-100);
--container-color-secondary: var(--base-70);
--container-color-tertiary: var(--base-50);
// Secondary content containers
--widget-bg: var(--base-10);
--widget-color: var(--base-90);
--widget-color-secondary: var(--base-70);
--widget-color-tertiary: var(--base-50);
--widget-headline: var(--base-100);
--card-bg: var(--base-10);
--card-color: var(--base-100);
--card-color-secondary: var(--base-70);
--card-color-tertiary: var(--base-50);
--card-secondary-bg: var(--base-10);
--card-secondary-color: var(--base-90);
--card-headline-color: var(--base-100);
// Header
--header-bg: var(--base-10);
--header-shadow: rgba(0,0,0,0.3);
--header-shadow: rgba(0, 0, 0, 0.3);
--header-icons-color: rgba(255, 255, 255, 0.8);
--header-icons-color-hover: #fff;
@ -75,17 +71,16 @@
--footer-link-color: var(--base-80);
--footer-link-color-hover: var(--base-100);
// Links in content
--link-brand-color: #17a1f6;
--link-brand-color-hover: var(--accent-brand-darker);
// Greyscale links, for places where we don't want to make them use accent color
--link-dimmed-color: var(--base-90);
--link-dimmed-color-secondary: var(--base-80);
--link-dimmed-bg-hover: var(--base-0);
--link-dimmed-color-hover: var(--base-100);
--link-dimmed-bg-current: var(--base-inverted);
--link-dimmed-color-current: var(--base-100);
// Links
--link-color: var(--base-90);
--link-color-hover: var(--accent-brand-lighter);
--link-color-current: var(--base-100);
--link-color-secondary: var(--base-70);
--link-color-secondary-hover: var(--base-80);
--link-branded-color: #17a1f6;
--link-bg-hover: var(--base-0);
--link-bg-hover-alt: var(--base-inverted);
--link-bg-current: var(--base-inverted);
// Primary buttons
--button-primary-bg: var(--accent-success);

49
app/assets/stylesheets/themes/pink.scss
View file

@ -26,9 +26,9 @@
--accent-brand-lighter: #ff99b9;
// Success
--accent-success: #71DB92;
--accent-success-darker: #5ABF79;
--accent-success-lighter: #93EDAF;
--accent-success: #71db92;
--accent-success-darker: #5abf79;
--accent-success-lighter: #93edaf;
// Warning
--accent-warning: #ffcf4c;
@ -46,17 +46,13 @@
--body-color-inverted: var(--base-inverted);
// Main content containers
--container-bg: var(--base-inverted);
--container-color: var(--base-100);
--container-color-secondary: var(--base-70);
--container-color-tertiary: var(--base-50);
// Secondary content containers
--widget-bg: var(--base-0);
--widget-color: var(--base-90);
--widget-color-secondary: var(--base-70);
--widget-color-tertiary: var(--base-50);
--widget-headline: var(--base-100);
--card-bg: var(--base-inverted);
--card-color: var(--base-100);
--card-color-secondary: var(--base-70);
--card-color-tertiary: var(--base-50);
--card-secondary-bg: var(--base-0);
--card-secondary-color: var(--base-90);
--card-headline-color: var(--base-100);
// Header
--header-bg: var(--base-40);
@ -75,17 +71,16 @@
--footer-link-color: var(--base-80);
--footer-link-color-hover: var(--base-100);
// Links in content
--link-brand-color: #4e57ef;
--link-brand-color-hover: var(--accent-brand-darker);
// Greyscale links, for places where we don't want to make them use accent color
--link-dimmed-color: var(--base-90);
--link-dimmed-color-secondary: var(--base-80);
--link-dimmed-bg-hover: var(--base-10);
--link-dimmed-color-hover: var(--base-100);
--link-dimmed-bg-current: var(--base-inverted);
--link-dimmed-color-current: var(--base-100);
// Links
--link-color: var(--base-90);
--link-color-hover: var(--base-80);
--link-color-current: var(--base-100);
--link-color-secondary: var(--base-70);
--link-color-secondary-hover: var(--base-80);
--link-branded-color: #4e57ef;
--link-bg-hover: var(--base-0);
--link-bg-hover-alt: var(--base-inverted);
--link-bg-current: var(--base-inverted);
// Primary buttons
--button-primary-bg: var(--accent-brand);
@ -118,11 +113,11 @@
--label-secondary: var(--base-90);
// Default box
--box: var(--container-bg);
--box: var(--card-bg);
--box-darker: var(--base-100);
// Indicators
--indicator-accent-bg: var(--link-brand-color);
--indicator-accent-bg: var(--link-branded-color);
--indicator-accent-color: var(--body-color-inverted);
--indicator-critical-bg: var(--base-80);
--indicator-critical-color: var(--body-color-inverted);

8
app/assets/stylesheets/user-profile-header.scss
View file

@ -9,7 +9,7 @@
width: 1216px;
max-width: 92%;
margin: 24px auto;
background: var(--container-bg);
background: var(--card-bg);
border-radius: 3px;
@media screen and (min-width: 950px) {
max-width: 98%;
@ -185,7 +185,7 @@
padding: 0px 0px;
margin: 0;
font-style: italic;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
width: 94%;
font-size: 0.9em;
margin-top: 12px;
@ -276,7 +276,7 @@
font-size: 0.7em;
font-weight: 800;
margin-bottom: 2px;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
.value {
display: inline-block;
@ -510,7 +510,7 @@
right: 3px;
border: 1px solid $light-medium-gray;
border-radius: 3px;
background: var(--container-bg);
background: var(--card-bg);
z-index: 20;
width: 200px;
box-shadow: $shadow;

2
app/assets/stylesheets/video-collection.scss
View file

@ -67,7 +67,7 @@
color: var(--body-color);
font-size: 0.95em;
&.video-username {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-size: 0.88em;
}
}

32
app/assets/stylesheets/widgets.scss
View file

@ -27,7 +27,7 @@
}
.sidebar-profile--username {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
}
}
@ -46,7 +46,7 @@
right: 0;
width: 100%;
height: 1px;
background: var(--widget-color-tertiary);
background: var(--card-color-tertiary);
opacity: 0.25;
}
@ -141,7 +141,7 @@
}
}
.suggest-podcast {
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
text-decoration: underline;
padding: 0 5px;
}
@ -156,10 +156,10 @@
padding: 8px 0;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
monospace;
color: var(--container-color);
color: var(--card-color);
a {
display: inline-block;
color: var(--container-color);
color: var(--card-color);
h4 {
display: inline-block;
margin: 0;
@ -243,7 +243,7 @@
}
.widget-listing-link-category {
display: inline-block;
color: var(--widget-color-tertiary);
color: var(--card-color-tertiary);
font-size: 0.8em;
line-height: 1;
}
@ -270,7 +270,7 @@
.widget-subtext {
padding: 0;
margin: 0;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
font-size: 0.85em;
}
.widget-user-pic {
@ -320,7 +320,7 @@
theme-container-accent-background,
lighten($bold-blue, 10%)
);
color: var(--container-color);
color: var(--card-color);
}
&.query-type-filter-button {
&:hover {
@ -370,7 +370,7 @@
}
}
.social-icons a {
color: var(--widget-color);
color: var(--card-secondary-color);
margin-right: 8px;
}
.row {
@ -407,7 +407,7 @@
.discuss-list-comment-count {
font-size: 0.8em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
img {
width: 20px;
vertical-align: -3px;
@ -427,7 +427,7 @@
// Sidebar sponsors
.sidebar-sponsor {
margin-bottom: 24px;
color: var(--widget-color-tertiary);
color: var(--card-color-tertiary);
img {
width: 100%;
max-width: 180px;
@ -435,7 +435,7 @@
}
.sidebar-sponsor--footer {
font-size: 0.75em;
color: var(--container-color-tertiary);
color: var(--card-color-tertiary);
a {
background: lighten($purple, 3%);
color: $black;
@ -476,11 +476,11 @@
a.sidebar-nav-link {
@include sidebar-link;
color: var(--link-dimmed-color);
color: var(--link-color);
font-weight: 400;
&.sidebar-nav-link-tag {
color: var(--link-dimmed-color);
color: var(--link-color);
}
}
a.sidebar-nav-link-follow {
@ -507,7 +507,7 @@
margin-bottom: 10px;
font-family: $helvetica-condensed;
font-stretch: condensed;
background: var(--widget-bg);
background: var(--card-secondary-bg);
}
// "Extra" links in sidebar: about, contact, ...
@ -515,6 +515,6 @@
a {
@include sidebar-link;
font-size: 0.9em;
color: var(--link-dimmed-color-secondary);
color: var(--link-color-secondary);
}
}

20
app/views/layouts/_nav_menu.html.erb
View file

@ -3,27 +3,27 @@
<div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">...</div>
<div class="border-0 border-b-1 border-solid border-base-20 p-1">
<a href="/dashboard" class="crayons-nav-block">Dashboard</a>
<a href="/new" class="crayons-nav-block">Write a Post</a>
<a href="/readinglist" class="crayons-nav-block">Reading List</a>
<a href="/settings" class="crayons-nav-block">Settings</a>
<a href="/p/information" class="crayons-nav-block" id="second-last-nav-link">Key Links</a>
<a href="/dashboard" class="crayons-link crayons-link--block">Dashboard</a>
<a href="/new" class="crayons-link crayons-link--block">Write a Post</a>
<a href="/readinglist" class="crayons-link crayons-link--block">Reading List</a>
<a href="/settings" class="crayons-link crayons-link--block">Settings</a>
<a href="/p/information" class="crayons-link crayons-link--block" id="second-last-nav-link">Key Links</a>
</div>
<div class="p-1">
<a href="/signout_confirm" class="crayons-nav-block" id="last-nav-link">Sign Out</a>
<a href="/signout_confirm" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
</div>
<% else %>
<div class="border-0 border-b-1 border-solid border-base-20 p-1">
<a href="/enter" data-no-instant id="first-nav-link" class="crayons-nav-block fw-medium">Sign In/Up</a>
<a href="/enter" data-no-instant id="first-nav-link" class="crayons-link crayons-link--block fw-medium">Sign In/Up</a>
<% if SiteConfig.auth_allowed?("twitter") %>
<a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="crayons-nav-block pl-5" data-no-instant>Via Twitter</a>
<a href="/users/auth/twitter?callback_url=<%= app_url("/users/auth/twitter/callback") %>" class="crayons-link crayons-link--block pl-5" data-no-instant>Via Twitter</a>
<% end %>
<% if SiteConfig.auth_allowed?("github") %>
<a href="/users/auth/github?state=navbar_basic" class="crayons-nav-block pl-5" data-no-instant id="second-last-nav-link">Via GitHub</a>
<a href="/users/auth/github?state=navbar_basic" class="crayons-link crayons-link--block pl-5" data-no-instant id="second-last-nav-link">Via GitHub</a>
<% end %>
</div>
<div class="p-1">
<a href="/p/information" class="crayons-nav-block" id="last-nav-link">All about <%= ApplicationConfig["COMMUNITY_NAME"] %></a>
<a href="/p/information" class="crayons-link crayons-link--block" id="last-nav-link">All about <%= ApplicationConfig["COMMUNITY_NAME"] %></a>
</div>
<% end %>
</div>

346
app/views/pages/crayons.html.erb
View file

@ -50,67 +50,6 @@
}
</style>
<div class="container">
<div class="body">
<h2>Subscribe dropdown</h2>
</div>
<div>
<p>This is default state:</p>
<div class="crayons-btn-group mb-4">
<a href="#" class="crayons-btn crayons-btn--outlined">Subscribe</a>
</div>
<p>This is subscribed state, so it has additional cog button:</p>
<div class="crayons-btn-group mb-4">
<a href="#" class="crayons-btn crayons-btn--outlined">Unsubscribe</a>
<a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--icon-alone">
<%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon", title: "Customize subscription") %>
</a>
</div>
<p>This is subscribed state, and the cog button has <code>.crayons-btn--outlined--active</code> class applied so it has darker border and color.</p>
<div class="crayons-btn-group mb-4">
<a href="#" class="crayons-btn crayons-btn--outlined">Unsubscribe</a>
<a href="#" class="crayons-btn crayons-btn--outlined crayons-btn--outlined--active crayons-btn--icon-alone">
<%= inline_svg_tag("cog.svg", aria: true, class: "crayons-icon", title: "Customize subscription") %>
</a>
</div>
<p>This is our dropdown. It has additional utility classes <code>inline-block static</code> only for purpose of this demo.</p>
<div class="crayons-dropdown inline-block static">
<div class="crayons-fields mb-5">
<div class="crayons-field crayons-field--radio">
<input type="radio" id="subscribe-all" name="subscribe_comments" class="crayons-radio" checked>
<label for="subscribe-all" class="crayons-field__label">
All comments
<p class="crayons-field__description">You’ll receive notifications for all new comments.</p>
</label>
</div>
<div class="crayons-field crayons-field--radio">
<input type="radio" id="subscribe-toplevel" name="subscribe_comments" class="crayons-radio">
<label for="subscribe-toplevel" class="crayons-field__label">
Top-level comments
<p class="crayons-field__description">You’ll receive notifications only for all new top-level comments.</p>
</label>
</div>
<div class="crayons-field crayons-field--radio">
<input type="radio" id="subscribe-author" name="subscribe_comments" class="crayons-radio">
<label for="subscribe-author" class="crayons-field__label">
Post author comments
<p class="crayons-field__description">You’ll receive notifications only if post author sends a new comment.</p>
</label>
</div>
</div>
<button class="crayons-btn w-100">Done</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="body">
<h2>Main Typography</h2>
@ -241,6 +180,93 @@
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Cards</h2>
<p>Cards are basically content containers. There are two types of cards:</p>
<ul>
<li>Primary (default) - main content, like whole article or feed cards.</li>
<li>Secondary - secondary content, used for example for sidebar widgets.</li>
</ul>
<p>The visual difference between the two is basically in color: secodanry cards are a <strong>little</strong> less visible.</p>
</div>
<div class="p-6 bg-base-10">
<div class="crayons-card mb-4">
<div class="crayons-card__body">
Hello, I am a primary card.
</div>
</div>
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__body">
...And I am a secondary card.
</div>
</div>
</div>
<pre><%='
<div class="crayons-card">
<div class="crayons-card__body">
Hello, I am a primary card.
</div>
</div>
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__body">
...And I am a secondary card.
</div>
</div>
'.rstrip %></pre>
<div class="body">
<p>If you need headers, cards do have them as well.</p>
</div>
<div class="p-6 bg-base-10">
<div class="crayons-card crayons-card--secondary mb-4">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">Card title.</h3>
</div>
<div class="crayons-card__body">
I'm a card content.
</div>
</div>
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">Card title.</h3>
<div class="crayons-card__actions">
<a href="#" class="crayons-link--branded">Action</a>
</div>
</div>
<div class="crayons-card__body">
I'm a card content.
</div>
</div>
</div>
<pre><%='
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">Card title.</h3>
</div>
<div class="crayons-card__body">...</div>
</div>
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card__header">
<h3 class="crayons-card__headline">Card title.</h3>
<div class="crayons-card__actions">
<a href="#" class="crayons-link--branded">Action</a>
</div>
</div>
<div class="crayons-card__body">...</div>
</div>
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Form elements</h2>
@ -599,101 +625,12 @@
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Boxes</h2>
<p>“Box” will be a background element used for many other components, for example banners, dropdowns, modals. This component does not have any guidelines in terms of placement or spacing, since it’s supposed to be used to build other components.</p>
<p>There are:</p>
<ul>
<li>2 types: outlined & filled,</li>
<li>5 styles: default, danger, warning, info, success,</li>
<li>4 eleveations: 0, 1, 2, 3.</li>
</ul>
<p>By default use “outlined” type unless you really have to make something stand out - then use “filled”. But double check if it makes sense since “filled” style really steals attention.</p>
<p>Use style that makes the most sense for you current use case. It’s pretty obvious when to use Danger, Warning and Success. But for Default and Info - it’s more up to designer to make a good call :).</p>
<p>Elevations should define what kind of element it is:</p>
<ul>
<li>0: something inside content.</li>
<li>1: that can also be used in content but for elements that need more attention, like notices...</li>
<li>2: dropdowns</li>
<li>3: modals</li>
</ul>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
<div class="crayons-box">box, level 0</div>
<div class="crayons-box crayons-box--level-1">box, level 1</div>
<div class="crayons-box crayons-box--level-2">box, level 2</div>
<div class="crayons-box crayons-box--level-3">box, level 3</div>
<div class="crayons-box crayons-box--filled ">filled box, level 0</div>
<div class="crayons-box crayons-box--filled crayons-box--level-1">filled box, level 1</div>
<div class="crayons-box crayons-box--filled crayons-box--level-2">filled box, level 2</div>
<div class="crayons-box crayons-box--filled crayons-box--level-3">filled box, level 3</div>
<div class="crayons-box crayons-box--danger">box, level 0</div>
<div class="crayons-box crayons-box--danger crayons-box--level-1">box, level 1</div>
<div class="crayons-box crayons-box--danger crayons-box--level-2">box, level 2</div>
<div class="crayons-box crayons-box--danger crayons-box--level-3">box, level 3</div>
<div class="crayons-box crayons-box--danger crayons-box--filled ">filled box, level 0</div>
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-1">filled box, level 1</div>
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-2">filled box, level 2</div>
<div class="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-3">filled box, level 3</div>
<div class="crayons-box crayons-box--warning">box, level 0</div>
<div class="crayons-box crayons-box--warning crayons-box--level-1">box, level 1</div>
<div class="crayons-box crayons-box--warning crayons-box--level-2">box, level 2</div>
<div class="crayons-box crayons-box--warning crayons-box--level-3">box, level 3</div>
<div class="crayons-box crayons-box--warning crayons-box--filled ">filled box, level 0</div>
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-1">filled box, level 1</div>
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-2">filled box, level 2</div>
<div class="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-3">filled box, level 3</div>
<div class="crayons-box crayons-box--success">box, level 0</div>
<div class="crayons-box crayons-box--success crayons-box--level-1">box, level 1</div>
<div class="crayons-box crayons-box--success crayons-box--level-2">box, level 2</div>
<div class="crayons-box crayons-box--success crayons-box--level-3">box, level 3</div>
<div class="crayons-box crayons-box--success crayons-box--filled ">filled box, level 0</div>
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-1">filled box, level 1</div>
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-2">filled box, level 2</div>
<div class="crayons-box crayons-box--success crayons-box--filled crayons-box--level-3">filled box, level 3</div>
<div class="crayons-box crayons-box--info">box, level 0</div>
<div class="crayons-box crayons-box--info crayons-box--level-1">box, level 1</div>
<div class="crayons-box crayons-box--info crayons-box--level-2">box, level 2</div>
<div class="crayons-box crayons-box--info crayons-box--level-3">box, level 3</div>
<div class="crayons-box crayons-box--info crayons-box--filled ">filled box, level 0</div>
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-1">filled box, level 1</div>
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-2">filled box, level 2</div>
<div class="crayons-box crayons-box--info crayons-box--filled crayons-box--level-3">filled box, level 3</div>
</div>
<pre><%='
<!-- default: outlined, black -->
<div class="crayons-box">box, level 0</div>
<-- levels 0-3 -->
<div class="... crayons-box--level-1">box, level 1</div>
<div class="... crayons-box--level-2">box, level 2</div>
<div class="... crayons-box--level-3">box, level 3</div>
<-- filled variation -->
<div class="... crayons-box--filled">filled box, level 0</div>
<-- styles: danger, success, warning, info -->
<div class="... crayons-box--danger">
<div class="... crayons-box--success">
<div class="... crayons-box--warning">
<div class="... crayons-box--info">
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Dropdowns</h2>
<p>Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...</p>
<p>Dropdowns should not be bigger than 320px (unless it's smallest breakpoint, then dropdowns become full width).</p>
<p>Dropdown default padding is set to 16px.</p>
<p>FYI: Dropdowns use “Box” component as background, with Level 3 elevation.</p>
<p>By default dropdowns are hidden with <code>display: none;</code> so keep that in mind if you ever use dropdowns and can't see them :D.</p>
</div>
@ -722,7 +659,6 @@
</ul>
<p>Use your best judgements when choosing the right size.</p>
<p>If you need to utilize entire modal area and you have to get rid of default padding, please use modifier class <code>crayons-modal--padding-0</code>.</p>
<p>FYI: Modals use “Box” component as background, with Level 3 elevation.</p>
</div>
<div>
@ -905,34 +841,80 @@
<div class="container">
<div class="body">
<h2>Navigation: Main nav</h2>
<p>Used as main nav in left sidebar or dropdowns...</p>
<p>This comoponent is being responsive: for resolutions smaller than <code>$breakpoint-s</code> they have some extra padding to make it easier to tap.</p>
<p>Can contain icons.</p>
<h2>Navigation: Link</h2>
<p>Crayons comes with bunch of navigation compontents - each being a variation of <code>.crayons-link</code> which itself is a simple text link.</p>
<p>By defualt <code>.crayons-link</code> has similar color to contnet. But we have a variation to make it stand out if needed.</p>
</div>
<div class="p-6 bg-base-10">
<a href="#" class="crayons-nav-block crayons-nav-block--current"><span class="crayons-icon">🏡</span>Home</a>
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>Podcasts</a>
<a href="#" class="crayons-nav-block"><span class="crayons-icon">🏷</span>Tags</a>
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
<a href="#" class="crayons-nav-block"><span class="crayons-icon">👍</span>Code of Conduct</a>
<a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
<div class="p-6">
<a href="#" class="crayons-link">Hello, I am default link.</a><br><br>
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
</div>
<pre><%='
<a href="#" class="crayons-nav-block">...</a>
<a href="#" class="crayons-nav-block crayons-nav-block--current">...</a>
<a href="#" class="crayons-link">Hello, I am default link.</a>
<a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>
'.rstrip %></pre>
</div>
<!-- icon inside -->
<a href="#" class="crayons-nav-block"><span class="crayons-icon">📻</span>...</a>
<a href="#" class="crayons-nav-block"><svg class="crayons-icon" ...>...</svg>...</a>
<!-- indicator inside -->
<a href="#" class="crayons-nav-block">...<span class="crayons-indicator">3</span></a>
<!-- indented -->
<a href="#" class="crayons-nav-block crayons-nav-block--indented">More...</a>
<div class="container">
<div class="body">
<h2>Navigation: Link: Block</h2>
<p>This component is extension for classic <code>.crayons-link</code> and it comes with more visual hover and current states.</p>
<p>It can be used for example for nav, where links are rather short and stacked one under another. Think of main navigation or contextual navigation in dropdowns.</p>
<p>It's responsive: for resolutions smaller than <code>$breakpoint-s</code> it has extra padding to make it easier to tap.</p>
<p>It can contain extras, like icon or indicator. Or actually anything else - everything will be in the same line since this component has <code>display: flex</code> applied by default.</p>
<p>These links cna also be indented for scenarios like below (see last link "More...").</p>
</div>
<div class="p-6 bg-base-10">
<a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📻</span>Podcasts</a>
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">🏷</span>Tags</a>
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">📑</span>Listings <span class="crayons-indicator">3</span></a>
<a href="#" class="crayons-link crayons-link--block"><span class="crayons-icon">👍</span>Code of Conduct</a>
<a href="#" class="crayons-link crayons-link--block crayons-link--block--indented">More...</a>
</div>
<pre><%='
<a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
<a href="#" class="... crayons-link--block">...</a>
<a href="#" class="... crayons-link--block">... <span class="crayons-indicator">3</span></a>
<a href="#" class="... crayons-link--block crayons-link--block--indented">More...</a>
'.rstrip %></pre>
</div>
<div class="container">
<div class="body">
<h2>Navigation: Link: Contentful</h2>
<p>This component is extension for classic <code>.crayons-link</code> and is meant to be used where we have to display more contnet inside.</p>
<p><code>.crayons-link--contentful</code> can be used in sidebar widgets where we list posts or listings. It can have secondary contnet.</p>
<p>Contenful Links will be automatically divided by a line.</p>
</div>
<div class="p-6 bg-base-0">
<a href="#" class="crayons-link crayons-link--contentful">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
<span class="crayons-link__secondary">
<span class="crayons-indicator crayons-indicator--accent">NEW</span>
Category name
</span>
</a>
<a href="#" class="crayons-link crayons-link--contentful">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi iusto dolorem.</div>
<span class="crayons-link__secondary">
Category name
</span>
</a>
</div>
<pre><%='
<a href="#" class="crayons-link crayons-link--contentful">
<div>Lorem ...</div>
<span class="crayons-link__secondary">Category ...</span>
</a>
'.rstrip %></pre>
</div>
@ -940,21 +922,19 @@
<div class="body">
<h2>Navigation: Tabs</h2>
<p>Use tabs as 2nd level navigation or filtering options.</p>
<p>Tabs can be created by also using <code>.crayons-link</code> elements but wrapped with extra container <code>.crayons-tabs</code>.</p>
</div>
<div>
<div class="crayons-tabs">
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
<a href="#" class="crayons-tabs__item">Popular</a>
<a href="#" class="crayons-tabs__item">Latest</a>
</div>
<div class="crayons-tabs">
<a href="#" class="crayons-link crayons-link--current">Feed</a>
<a href="#" class="crayons-link">Popular</a>
<a href="#" class="crayons-link">Latest</a>
</div>
<pre><%='
<div class="crayons-tabs">
<a href="#" class="crayons-tabs__item crayons-tabs__item--current">Feed</a>
<a href="#" class="crayons-tabs__item">Popular</a>
<a href="#" class="crayons-tabs__item">Latest</a>
<a href="#" class="crayons-link crayons-link--current">Feed</a>
<a href="#" class="crayons-link">Popular</a>
<a href="#" class="crayons-link">Latest</a>
</div>
'.rstrip %></pre>
</div>