/*===
    CSS rules from Week 8 Lecture 2
       (and added comments and tweaked a bit after class)

    by: Sharon Tuttle
    last modified: 2024-03-07
===*/

/*===
    demo of centering a block element -- here, paragraphs
===*/

p
{
    width: 20em;
    margin-left: auto;
    margin-right: auto;
    border: .05em solid red;
}

/*===
    and centering any forms as well
===*/

form
{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/*===
    if you have a div element with class="submit-part" that
        contains a submit button, this shows two ways to
        center the submit button within that div
===*/

.submit-part
{
    /* so the submit button is not "smushed" against the
       textfield above it */

    margin-top: 1em;
    
    /* centering using width, margin-left and margin-right */
    
    /* width: 4em;
    margin-left: auto;
    margin-right: auto; */

    /* centering using flexbox layout */
    
    display: flex;
    justify-content: center;
}

/*===
    trying out flexbox layout some more -
        here's a container using flexbox layout
===*/

.flex-demo
{
    border: .1em green solid;
    padding: .2em;
    
    display: flex;
    /*flex-direction: column;*/
    gap: .1em;
    justify-content: space-around;
    flex-wrap: wrap;
}

/*===
    here are some block elements that happen to be 
        flex items
===*/

.flex-demo div
{
    padding: .3em;
    font-size: 2em;
    border: .1em solid blue;
}

/*===
    here's a container using grid layout --
        specifying that want 4 columns of different widths,
        and row heights no smaller than 2em, no larger than auto
            (I think auto here is based on the content),
        and a small gap between items in the grid
===*/

.grid-demo-1
{
    display: grid;
    grid-template-columns: 10% 40% 25% 25%;
    grid-auto-rows: minmax(2em, auto);
    gap: 0.15em;
}

/*===
    for div elements contained in a container with 
        class="grid-demo-1",
    give them a green border
===*/

.grid-demo-1 div
{
    border: .1em solid green;
}

/*===
    using the grid-column and grid-row properties to
        specify placement of an grid element within a grid container

    here, the element with class="one" 
        within container with class="grid-demo-1"
        is to be placed from column line 1 to column line 3,
        starting at row line 1 (since no 2nd number given, will
            just take up 1 row)
===*/

.grid-demo-1 .one
{
    grid-column: 1 / 3;   /* go from column line 1 to column line 3 */
    grid-row: 1;          /* start at row line 1, fill 1 row */
    background-color: yellow;
}

/*===
    here, the element with class="two"
        within container with class="grid-demo-1"
        is to be placed from column line 3 to column line 5,
        starting at row line 1 and going down to row line 3
===*/

.grid-demo-1 .two
{
    grid-column: 3 / 5;  /* go from column line 3 to column line 5 */
    grid-row: 1 / 3;     /* go from row line 1 to row line 3 */
    background-color: lightgreen;
}

/*===
    here, the element with class="three"
        within container with class="grid-demo-1"
        is to be placed starting at column line 1 (since no 2nd
            number given, will just take up 1 column,
        starting at row line 2 and going down to row line 5
===*/

.grid-demo-1 .three
{
    grid-column: 1;   /* start at column line 1, fill 1 column */
    grid-row: 2 / 5;  /* go from row line 2 to row line 5 */
    background-color: beige;
}

/*===
    QUESTION: do the grid-area properties naming grid areas
        need to be defined before a rule for a grid container
        can use them?
    NO, does not seem to be required --
        after class, I moved this rule for the grid container before the
        rules naming its child grid areas, and it still works!
===*/

/*===
    here's another container using grid layout ---
    using property grid-template-areas to specify the
    grid children placement via their grid-area names

    (and using . to indicate a cell NOT specifying an
    element for)

    and using the same grid-auto-rows and gap properties
    as for the earlier grid container

    (and, after class, adding the grid-template-columns
    property to show CAN still use that to specify column
    WIDTHS if you would like...!)
===*/

.grid-demo-2
{
    display: grid;
    grid-template-columns: 10% 40% 25% 25%;
    
    grid-template-areas:    /* specifying that:                             */
        "one one two two"   /*     area one takes up 2 columns in 1st row,  */
        "three . two two"   /*     area two takes up 2 columns and 2 rows,  */
        "three . . ."       /*     and area three takes up 1 col and 3 rows */
        "three . . .";
    grid-auto-rows: minmax(2em, auto);
    gap: 0.15em;
}

/*===
    giving all the div elements contained in an element
        with class="grid-demo-2" a tasteful blue border
===*/

.grid-demo-2 div
{
    border: .1em solid blue;
}

/*===
    note how grid-area is used in the following three rules
        to give the selected element an area name
===*/

.grid-demo-2 .one
{
    grid-area: one;
    background-color: yellow;
}

.grid-demo-2 .two
{
    grid-area: two;
    background-color: lightgreen;
}

.grid-demo-2 .three
{
    grid-area: three;
    background-color: beige;
}

/*===
    AFTER-class test:
    double-checking that this makes an element with
        class="post-class-tests" a grid container
        with two same-width columns
===*/

.post-class-tests
{
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.3em;
}

/*===
    giving div elements within a container with class="post-class-tests"
        a tasteful purple border
===*/

.post-class-tests div
{
    border: .1em solid purple;
}