December 14th, 2020

• Roam Change Log
  • Customize display of Roam Blocks based on the links in them, and the links above them.
    • {{video: https://www.loom.com/embed/06b03473bcda4728b5bef40929e5012f}}

      • Horizontal Children

        • Testing css customizations horizontal
          • How it works .
            • Put some code like this in a page called roam/css
            • This will have every set of nested children grouped into columns

          • .roam-block-container[data-page-links*="horizontal"] 
            .rm-block-children {
              display: flex;
              flex-direction: row;
             
            }
            .roam-block-container[data-page-links*="horizontal"] 
             .rm-block__controls {
              display: none;
             
            }
            

            • .roam-block-container[data-page-links*="horizontal"] .rm-block-children { display: flex; flex-direction: row; }
      • Now let's hide that tag
        Hide the tag

        • span.rm-page-ref[data-tag="rm-h"] {
              display: none;
          }
          
          .roam-block-container[data-page-links*="rm-h"] .rm-block-children {
            display: flex;
            flex-direction: row;
          }
          
          

        rm-h click and you'll see rm-h
        • A
        • B
        • C

      • .rm-grid

        • Let's try a quick grid rm-grid
          Grid #rm-grid

          • 
            .roam-block-container[data-page-links*="rm-grid"] .rm-block-children {
              display: grid;
              background-color: #F7F8F8;
              
             grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
            }
            

          • A
          • B
          • C
          • D
          • E
          • F
          • G
        • We can mix the tags up too rm-blue-border--children rm-grid
          • a
          • b
        • And let's make a particular item span two columns
          • rm-grid rm-blue-border--children
          • A rm-col-span2
          • B
          • C
          • D
          • F rm-col-span2
          • E
        • And make another that has two rows - while we're at it
          • rm-grid rm-blue-border--children
          • A rm-col-span2
          • B
          • C
          • D is a larger block of text which will span 2 rows rm-row-span2
          • F rm-col-span2 rm-row-span2
          • A
          • B
          • E rm-col-span2 rm-row-span2
          • C
          • D
        • And as our last trick - let's just make every tag that starts with rm-hidden rm-hide
          • rm-grid rm-blue-border--children

            .roam-block-container[data-page-links*="rm-hide"]
            span.rm-page-ref[data-tag*="rm"] 
            {
              display: none;
            }
            

          • A rm-col-span2
          • B
          • Crm-row-span2
          • F rm-col-span2
            

            • 
          • D
          • D is a larger block of text which will span 2 rows rm-row-span2
          • E
          • A
          • B

          • This is a Bigger Area rm-row-span2

          • C
          • Another
          • The last one
  • New Features
    • Expandable Parentheticals
      • How it works::
        • If you type ((with text inside - but NOT converted into a block reference)) it will now display like this ((91CCj9YQc that's the symbol you see here ))
          • thanks to @Juvoni for showing us the [[Unicode Astrolabe]]
        • Clicking on the astrolabe will expand the parenthetical.
        • Clicking on either parenthesis of the open block will close the Parenthetical
      • Limitations::
        • ((Links and )) ((other formatted)) text will not parse ((c3NvrBVHc))
          • Workaround::
            • Block References do parse - so you can extract any rich text into a block and then wrap the block ref in a parenthetical
      • Ancestors and inspiration
        • We're tempted to call this Telescopic Text - but the real version of that seems much more impressive
          • The Ones Who Crossed The Rubicon::
            • https://twitter.com/azlenelza/status/1331583299957911554?s=20
            • https://getcoleman.com/
            • https://www.telescopictext.org/text/KPx0nlXlKTciC
            • Stretch Text from Ted Nelson
              • https://en.wikipedia.org/wiki/StretchText