Easily Discernible Inline Card Layout

Plugins and Custom CSS CSS
#1

Before

CleanShot 2021-10-20 at 11.57.57
CleanShot 2021-10-20 at 11.57.571003×1584 382 KB

After

CleanShot 2021-10-20 at 11.52.25
CleanShot 2021-10-20 at 11.52.251004×1562 313 KB

CleanShot 2021-10-22 at 21.20.39
CleanShot 2021-10-22 at 21.20.39980×1775 368 KB

All you need to do is just guess how much size is fit for a card and then set the width of a Front Card by tagging

  • w90 → Front width 90px
  • w120 → Front width 120px
  • w150 → Front width 150px
  • w180 → Front width 180px
  • w210 → Front width 210px
  • w240 → Front width 240px
  • w270 → Front width 270px
  • w300 → Front width 300px
  • w330 → Front width 330px
  • w360 → Front width 360px
  • w390 → Front width 390px
  • w420 → Front width 420px
  • w450 → Front width 450px
  • w480 → Front width 480px
[data-rem-tags~="w90"] .basic_card_rem_type,
[data-rem-tags~="w90"] .concept_rem_type,
[data-rem-tags~="w90"] .descriptor_rem_type,
[data-rem-tags~="w90"] .separator-symbol,
[data-rem-tags~="w120"] .basic_card_rem_type,
[data-rem-tags~="w120"] .concept_rem_type,
[data-rem-tags~="w120"] .descriptor_rem_type,
[data-rem-tags~="w120"] .separator-symbol,
[data-rem-tags~="w150"] .basic_card_rem_type,
[data-rem-tags~="w150"] .concept_rem_type,
[data-rem-tags~="w150"] .descriptor_rem_type,
[data-rem-tags~="w150"] .separator-symbol,
[data-rem-tags~="w180"] .basic_card_rem_type,
[data-rem-tags~="w180"] .concept_rem_type,
[data-rem-tags~="w180"] .descriptor_rem_type,
[data-rem-tags~="w180"] .separator-symbol,
[data-rem-tags~="w210"] .basic_card_rem_type,
[data-rem-tags~="w210"] .concept_rem_type,
[data-rem-tags~="w210"] .descriptor_rem_type,
[data-rem-tags~="w210"] .separator-symbol,
[data-rem-tags~="w240"] .basic_card_rem_type,
[data-rem-tags~="w240"] .concept_rem_type,
[data-rem-tags~="w240"] .descriptor_rem_type,
[data-rem-tags~="w240"] .separator-symbol,
[data-rem-tags~="w270"] .basic_card_rem_type,
[data-rem-tags~="w270"] .concept_rem_type,
[data-rem-tags~="w270"] .descriptor_rem_type,
[data-rem-tags~="w270"] .separator-symbol,
[data-rem-tags~="w300"] .basic_card_rem_type,
[data-rem-tags~="w300"] .concept_rem_type,
[data-rem-tags~="w300"] .descriptor_rem_type,
[data-rem-tags~="w300"] .separator-symbol,
[data-rem-tags~="w330"] .basic_card_rem_type,
[data-rem-tags~="w330"] .concept_rem_type,
[data-rem-tags~="w330"] .descriptor_rem_type,
[data-rem-tags~="w330"] .separator-symbol,
[data-rem-tags~="w360"] .basic_card_rem_type,
[data-rem-tags~="w360"] .concept_rem_type,
[data-rem-tags~="w360"] .descriptor_rem_type,
[data-rem-tags~="w360"] .separator-symbol,
[data-rem-tags~="w390"] .basic_card_rem_type,
[data-rem-tags~="w390"] .concept_rem_type,
[data-rem-tags~="w390"] .descriptor_rem_type,
[data-rem-tags~="w390"] .separator-symbol,
[data-rem-tags~="w420"] .basic_card_rem_type,
[data-rem-tags~="w420"] .concept_rem_type,
[data-rem-tags~="w420"] .descriptor_rem_type,
[data-rem-tags~="w420"] .separator-symbol,
[data-rem-tags~="w450"] .basic_card_rem_type,
[data-rem-tags~="w450"] .concept_rem_type,
[data-rem-tags~="w450"] .descriptor_rem_type,
[data-rem-tags~="w450"] .separator-symbol,
[data-rem-tags~="w480"] .basic_card_rem_type,
[data-rem-tags~="w480"] .concept_rem_type,
[data-rem-tags~="w480"] .descriptor_rem_type,
[data-rem-tags~="w480"] .separator-symbol {
    display: inline-block;
    vertical-align: top;
}

[data-slate-node="text"] .basic_card_rem_type,
[data-slate-node="text"] .concept_rem_type,
[data-slate-node="text"] .descriptor_rem_type {
  display: inline;
  width: auto;
}

[data-rem-tags~="w90"] .basic_card_rem_type,
[data-rem-tags~="w90"] .concept_rem_type,
[data-rem-tags~="w90"] .descriptor_rem_type {width: 90px;}
[data-rem-tags~="w120"] .basic_card_rem_type,
[data-rem-tags~="w120"] .concept_rem_type,
[data-rem-tags~="w120"] .descriptor_rem_type {width: 120px;}
[data-rem-tags~="w150"] .basic_card_rem_type,
[data-rem-tags~="w150"] .concept_rem_type,
[data-rem-tags~="w150"] .descriptor_rem_type {width: 150px;}
[data-rem-tags~="w180"] .basic_card_rem_type,
[data-rem-tags~="w180"] .concept_rem_type,
[data-rem-tags~="w180"] .descriptor_rem_type {width: 180px;}
[data-rem-tags~="w210"] .basic_card_rem_type,
[data-rem-tags~="w210"] .concept_rem_type,
[data-rem-tags~="w210"] .descriptor_rem_type {width: 210px;}
[data-rem-tags~="w240"] .basic_card_rem_type,
[data-rem-tags~="w240"] .concept_rem_type,
[data-rem-tags~="w240"] .descriptor_rem_type {width: 240px;}
[data-rem-tags~="w270"] .basic_card_rem_type,
[data-rem-tags~="w270"] .concept_rem_type,
[data-rem-tags~="w270"] .descriptor_rem_type {width: 270px;}
[data-rem-tags~="w300"] .basic_card_rem_type,
[data-rem-tags~="w300"] .concept_rem_type,
[data-rem-tags~="w300"] .descriptor_rem_type {width: 300px;}
[data-rem-tags~="w330"] .basic_card_rem_type,
[data-rem-tags~="w330"] .concept_rem_type,
[data-rem-tags~="w330"] .descriptor_rem_type {width: 330px;}
[data-rem-tags~="w360"] .basic_card_rem_type,
[data-rem-tags~="w360"] .concept_rem_type,
[data-rem-tags~="w360"] .descriptor_rem_type {width: 360px;}
[data-rem-tags~="w390"] .basic_card_rem_type,
[data-rem-tags~="w390"] .concept_rem_type,
[data-rem-tags~="w390"] .descriptor_rem_type {width: 390px;}
[data-rem-tags~="w420"] .basic_card_rem_type,
[data-rem-tags~="w420"] .concept_rem_type,
[data-rem-tags~="w420"] .descriptor_rem_type {width: 420px;}
[data-rem-tags~="w450"] .basic_card_rem_type,
[data-rem-tags~="w450"] .concept_rem_type,
[data-rem-tags~="w450"] .descriptor_rem_type {width: 450px;}
[data-rem-tags~="w480"] .basic_card_rem_type,
[data-rem-tags~="w480"] .concept_rem_type,
[data-rem-tags~="w480"] .descriptor_rem_type {width: 480px;}

[data-rem-tags~="w90"] .separator-symbol,
[data-rem-tags~="w120"] .separator-symbol,
[data-rem-tags~="w150"] .separator-symbol,
[data-rem-tags~="w180"] .separator-symbol,
[data-rem-tags~="w210"] .separator-symbol,
[data-rem-tags~="w240"] .separator-symbol,
[data-rem-tags~="w270"] .separator-symbol,
[data-rem-tags~="w300"] .separator-symbol,
[data-rem-tags~="w330"] .separator-symbol,
[data-rem-tags~="w360"] .separator-symbol,
[data-rem-tags~="w390"] .separator-symbol,
[data-rem-tags~="w420"] .separator-symbol,
[data-rem-tags~="w450"] .separator-symbol,
[data-rem-tags~="w480"] .separator-symbol {
    display: inline;
    vertical-align: top;
}

[data-rem-tags~="w90"] .only_in_answer,
[data-rem-tags~="w120"] .only_in_answer,
[data-rem-tags~="w150"] .only_in_answer,
[data-rem-tags~="w180"] .only_in_answer,
[data-rem-tags~="w210"] .only_in_answer,
[data-rem-tags~="w240"] .only_in_answer,
[data-rem-tags~="w270"] .only_in_answer,
[data-rem-tags~="w300"] .only_in_answer,
[data-rem-tags~="w330"] .only_in_answer,
[data-rem-tags~="w360"] .only_in_answer,
[data-rem-tags~="w390"] .only_in_answer,
[data-rem-tags~="w420"] .only_in_answer,
[data-rem-tags~="w450"] .only_in_answer,
[data-rem-tags~="w480"] .only_in_answer {
    display: inline-block;
    vertical-align: top;
}

[data-rem-tags~="w90"] .only_in_answer {width: calc(100% - 125px);}
[data-rem-tags~="w120"] .only_in_answer {width: calc(100% - 155px);}
[data-rem-tags~="w150"] .only_in_answer {width: calc(100% - 185px);}
[data-rem-tags~="w180"] .only_in_answer {width: calc(100% - 215px);}
[data-rem-tags~="w210"] .only_in_answer {width: calc(100% - 245px);}
[data-rem-tags~="w240"] .only_in_answer {width: calc(100% - 275px);}
[data-rem-tags~="w270"] .only_in_answer {width: calc(100% - 305px);}
[data-rem-tags~="w300"] .only_in_answer {width: calc(100% - 335px);}
[data-rem-tags~="w330"] .only_in_answer {width: calc(100% - 365px);}
[data-rem-tags~="w360"] .only_in_answer {width: calc(100% - 395px);}
[data-rem-tags~="w390"] .only_in_answer {width: calc(100% - 425px);}
[data-rem-tags~="w420"] .only_in_answer {width: calc(100% - 455px);}
[data-rem-tags~="w450"] .only_in_answer {width: calc(100% - 485px);}
[data-rem-tags~="w480"] .only_in_answer {width: calc(100% - 515px);}

/*********** Tag Declutter ***********/
[data-rem-tags~="w90"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w90"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w120"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w120"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w150"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w150"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w180"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w180"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w210"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w210"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w240"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w240"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w270"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w270"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w300"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w300"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w330"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w330"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w360"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w360"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w390"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w390"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w420"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w420"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w450"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w450"] .hierarchy-editor__tag-bar__tag span {display: none;}
[data-rem-tags~="w480"] .items-center.hierarchy-editor__tag-bar__tag {background-color: transparent;}
[data-rem-tags~="w480"] .hierarchy-editor__tag-bar__tag span {display: none;}

If post editing is disabled, a further update will be continued here.
Any suggestions, Contributions are always welcome.

3 Likes