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.

Design Tests - Notes Section

TODO: Pull subtitle into page object
html_start_default_section html_end_default_section css_start_default_section css_end_default_section

Debugging Stuff

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

        -- title

Design Tests - Notes Section

-- section/
-- class: neoexamplewrapper flow

-- html/
-- show

<div class="notesSectionAlfa">

  <h3 class="headline">Foxtrot Delta Echo</h3>

  <ul class="list">

    <li class="item">romeo sierra</li>

    <li class="item">oscar delta</li>

  </ul>

</div>


<h2>Testing</h2>


-- /html




-- css/
-- show

.notesSectionAlfa {
  border: 1px solid var(--alfa-primary);
  border-radius: 0.5rem;
  margin: 1.4rem 0.6rem;
  > .headline {
    background-color: var(--alfa-primary);
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    padding: 0.3rem 0 0.2rem 1.3rem;
    margin: 0;
  }
  > .list {
    background-color: var(--alfa-secondary);
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    padding-top: 1rem;
    padding-left: 2.1rem;
    padding-bottom: 1rem;
    list-style: disc;
    margin: 0;
  }
}

-- /css

-- /section



-- h3

Other stuff

These are the baseline resets and styles for
the page. There here because the only thing
coming from an external stylesheet is the
colors. They don't effect the example in
a material way

-- css/
-- hidden 

*, 
*::before, 
*::after { box-sizing: border-box; }

body {
  line-height: 1.5; 
  font-family: var(--alfa-ff-base);
  font-size: var(--alfa-fs-step-0);
}

.pageWrapper {
  width: min(100vw - 3rem, 58ch);
  margin-inline: auto;
}

.flow > :where(:not(:first-child)) {
  margin-top: 1.8rem;
}

.htmlBlock {
  border: 1px solid var(--bravo-primary);
  border-radius: 0.5rem;
  > .headline {
    background-color: var(--bravo-primary);
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    padding: 0.3rem 0 0.2rem 1rem;
    margin: 0;
  }
  > .code{
    background-color: var(--bravo-secondary);
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    padding: 0.7rem 0 1rem 0.8rem;
    margin: 0;
  }
}

.cssBlock {
  border: 1px solid var(--bravo-primary);
  border-radius: 0.5rem;
  > .headline {
    background-color: var(--bravo-primary);
    padding: 0.3rem 0 0.2rem 1rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    margin: 0;
  }
  > .code {
    background-color: var(--bravo-secondary);
    padding: 0.7rem 0 1rem 0.8rem;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    margin: 0;
  }
}


-- /css


-- metadata
-- date: 2023-08-08 00:46:08
-- id: 2tgg7l8m
-- site: aws
-- type: css-experiment
-- status: published