« From Jason | Free typos included.

Experimenting with markdown & CSS in write.as

Objective: I'd like to style the extended metadata I use in each article which include Type, Regarding, Created, Last Edited.

Ideally, I could style a <div> to look like a bootstrap-style “card” with padding and a border.

Challenge: The issue is that hashtags in write.as don't activate within HTML tags added in the editor. But if the html is added using markdown the hashtags work.

So, I'll need a markdown solution that:

  1. Wraps an html tag around the metadata so I can reference in CSS.
  2. Isn't an element I'll use for anything else since I cannot use CSS IDs or Classes with the write.as implementation of markdown.

Option 1: Unordered List

I can use unordered lists as markdown wraps them in <ul>. A screenshot of what it looks like with a bit of CSS:

Styled unordered list

Con: Reserving unordered lists exclusively for this purpose doesn't seem reasonable.

Pro: I at least have ordered lists <ol> as a second option for everything else.

Pro: It appears I have more styling control over lists than tables.

Option 2: Table

I can use tables as markdown wraps it with <table> tags. Here's a screenshot:

Styled table

Con: But, again, I'd have to reserve tables exclusively for this use. At least with lists, I have a second option. If I take tables off the uh, table, that's it. I can't use it anymore.

Con: I have less CSS control, apparently. Tables are set to display: table-row-group which won't allow me to add padding or border radius to the <table> tag. I guess I could try changing the display value but it could mess up something else.

Pro: Tables default to columns. Single-column lists create a lot of wasted space. I would have to play with the float properties which, blah.

Experiments

For Option 1, there's a lot of wasted space as the list can only populate in a single column by default. I'm wondering if I can created a nested list and then float the parent <li> to make two columns.

Take 1: Looks like I get close to what I need with the display: table properties:

Styled nested list with display table

Take 2: Taking shape on desktop:

Styled nested list with display table

Take 3: Mobile formatting:

Mobile Version

Current View

Conclusion

I opted for the unordered list solution for now. We'll see how well it holds up and scales. I'll update with more if I change stuff up.

Bug: The <hr> loses its margins in the #collection view on the homepage for some reason. Can't figure out why.

Bug with homepage

Code

The markdown and css is below. I also put on my Notion for easier copy / paste.

https://fromjason.notion.site/Code-Experimenting-with-markdown-CSS-in-write-as-8c50bc0e767445c78f99c1e460330424?pvs=4

# Markdown for nested list

* Categories
    * Type: #Experiment
    * Re: #Markdown #DigitalGarden
* Dates
    * Created: 9/30/2023
    * Last Edited: 9/30/2023


 
/* Css for styling nested list in article*/
 #post article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
}
 #post article ul li{
     display: table-cell;
}
 #post article ul li ul{
     display: table-row !important;
     border: 0;
}
 #post article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #post article ul li ul li{
     display: table-row;
}
 #post article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
/* reverts back to inline-block for mobile */
 @media only screen and (max-width: 576px) {
     #post article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #post article ul li{
         display: inline-block !important;
    }
     #post article ul li:nth-child(2){
         margin-top: 15px;
    }
     #post article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #post article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #post article ul li ul li{
         display: inline-block;
    }
     #post article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}

p.description a{
     color: #555;
}
 p.description a:visited{
     color: #555;
}
 p.description span{
     color: #888;
}
/* list css for extended meta data in article*/
 #post article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
}
 #post article ul li{
     display: table-cell;
}
 #post article ul li ul{
     display: table-row !important;
     border: 0;
}
 #post article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #post article ul li ul li{
     display: table-row;
}
 #post article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
 @media only screen and (max-width: 576px) {
     #post article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #post article ul li{
         display: inline-block !important;
    }
     #post article ul li:nth-child(2){
         margin-top: 15px;
    }
     #post article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #post article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #post article ul li ul li{
         display: inline-block;
    }
     #post article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}

/* Collection View: list css for extended meta data in article*/

 #collection article ul{
     border: 1px solid #ccc;
     padding: 30px;
     list-style-type: none;
     border-radius: 5px;
     font-size: 0.85em;
     color: #555;
     display: table !important;
     width: 90%;
     margin-top: 20px;
     margin-bottom: 20px;
}
 #collection article ul li{
     display: table-cell;
}
 #collection article ul li ul{
     display: table-row !important;
     border: 0;
}
 #collection article ul li ul:before{
     display: block;
     content: '';
     margin-bottom: 10px;
     border-bottom: 1px solid #ccc;
}
 #collection article ul li ul li{
     display: table-row;
}
 #collection article ul li a{
    /* color: #222;
     Change color of hashtag link inside list*/
}
/* reverts back to inline-block for mobile */
 @media only screen and (max-width: 576px) {
     #collection article ul{
         padding: 0px;
         border-radius: 4px;
         display: block !important;
         width: 100%;
         border: 0;
    }
     #collection article ul li{
         display: inline-block !important;
    }
     #collection article ul li:nth-child(2){
         margin-top: 15px;
    }
     #collection article ul li ul{
         display: block !important;
         border: 0;
         margin-top: 5px;
    }
     #collection article ul li ul:before{
         display: block;
         content: '';
         margin-bottom: 5px;
         border-bottom: 1px solid #ccc;
    }
     #collection article ul li ul li{
         display: inline-block;
    }
     #collection article ul li ul li:nth-child(2){
         margin-top: 5px;
    }
}

Sources

http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

https://www.sitepoint.com/community/t/display-table-row-and-padding/6032/2