The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Neopolitan - Nested Sections

TODO: Pull subtitle into page object

This let's me do things like put things in grides from directly in the content. For example, this:

code_start_default_section code_end_default_section

Produces this:

Alfa Bravo

Charlie Delta

There's no external CSS or JS called. That's all directly from the content snippet.

I'm using the fact that extra dashes can be added to the start of sections to make it a little easier to see the breaks. That's not necessary though. Or, you could flip it and have the `div`` tags only be two dashes with the longer set of dashing added to the `p`` tags

Previous: Preformatted Content Types ~ Next: Implicit Inline Tags

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Neopolitan - Nested Sections

Nested sections are also possible. For
example, I use `/`` in my naming convention
to denote the starting and ending points.
Things like 

-- list

- `-- div/`` 

- `-- /div``

-- p

This let's me do things like put things in grides
from directly in the content. For example, this:

-- code/

----------------------------- div/
-- class: make_grid

-- p

Alfa Bravo

-- p

Charlie Delta

----------------------------- /div


----------------------------- css

.make_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.make_grid p {
  text-align: center;
  margin: 2rem;
  background-color: goldenrod;
}


-- /code


-- p 

Produces this:


-- div/
-- class: make_grid

-- p

Alfa Bravo

-- p

Charlie Delta

-- /div


-- p

There's no external CSS or JS called. That's all
directly from the content snippet.

I'm using the fact that extra dashes can be added
to the start of sections to make it a little easier
to see the breaks. That's not necessary though. Or,
you could flip it and have the `div`` tags only be two 
dashes with the longer set of dashing added to
the `p`` tags




-- css

.make_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.make_grid p {
  text-align: center;
  margin: 2rem;
  background-color: goldenrod;
}

-- p 

Previous: <<ilink|Preformatted Content Types|2adoqviq>>
~ 
Next: <<ilink|Implicit Inline Tags|2ae0e92v>>


-- categories
-- Neopolitan 

-- metadata
-- date: 2024-01-07 16:13:17
-- id: 2adwvuzk
-- site: aws
-- type: post
-- status: published