index.css

/*------------------------------------------------------------
|                          DEBUGGING                          |
--------------------------------------------------------------

body { 
    background: red;
}

.content {
    border: 1px solid red;
}

nav {
    background: rgb(248, 198, 104);
}

nav ul {
    background: chartreuse;
}

nav ul a li {
    border: 1px solid salmon;
}

nav ul a {
    background: blue;
}

main { 
    background: yellow;
}

section {
    background: teal;
}

article {
    background: rgb(106, 175, 202);
}

h2 {
    background: salmon;
}

nav {
    background: blue;
}

.nav-expander {
    background: green;
}

*/

/*------------------------------------------------------------
|                           GLOBALS                           |
--------------------------------------------------------------*/

:root {
    --primary: hsl(36, 100%, 99%);
    --new-section: hsl(35, 77%, 62%); /* soft orange */
    --links: hsl(5, 85%, 63%); /* soft red */
    --soft: hsl(233, 8%, 79%); /* grayish blue */
    --text: hsl(236, 13%, 42%); /* dark grayish blue */
    --secondary: hsl(240, 100%, 5%); /* very dark blue */
}

/* borrowed off Josh Comeau */

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

* {
    margin: 0;
    padding: 0;
}
  
html {
    height: 100%;
}
  
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 0.9375rem; /* 15 px equivalent */
}
  
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
  
input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

#root, #__next {
    isolation: isolate;
}

/* other suggested global styles from Codecademy full stack pathway */

html {
    font-size: 100%; 
}

/* my own defaults */

a {
    text-decoration: none; /* get rid of link underlines */
}

/*------------------------------------------------------------
|                            MOBILE                           |
--------------------------------------------------------------*/

body {
    font-family: 'Inter', /* find another font fall-back before sans serif */ sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* initially had place content which only works if the value of both justify-content and align-content are center */
    background-color: var(--primary);
    min-height: 100%;
}

.content {
    display: grid;
    grid-auto-flow: row;
    gap: 24px;
    padding: 24px 0;
    margin: auto 24px;
    height: fit-content;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.home:hover .logo { /* hover over parent, but animate the child */
    transform: translateY(-5px);
}

nav ul {
    display: none; /* hide tablet and desktop menu version */
}

.mobile-menu {
    position: fixed;
    height: 100%;
    width: 65%;
    padding: 24px;
    top: 0;
    right: -65%; /* offset menu when not called to prepare for animation */
    background-color: var(--primary);
    transition: transform ease-in-out 300ms;
}

.clicked {
    transform: translateY(5px);
    transition: transform ease-in 10ms;
}

.display-menu {
    transform: translateX(-100%); /* shift menu in by its own width */
    display: flex;
    flex-direction: column;
}

nav button {
    cursor: pointer;
    background: none;
    margin: 0;
}

button.nav-close {
    position: relative;
    margin: 10px 0 80px 0;
    transition: transform ease-in 10ms;
}

button.nav-close img {
    position: absolute;
    top: 0;
    right: 0;
}

.screen {
    position: fixed;
    background: black;
    height: 100%;
    width: 200%;
    top: 0;
    opacity: 0;
    transform: translateX(-100%);
    margin-left: -200px;
    transition: ease 500ms;
}    

.show {
    transform: translateX(0);
    opacity: 0.5;
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
    list-style: none;  
    font-size: 1.2rem;
}

.mobile-menu ul li {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--secondary);
}

nav a li:hover,
nav a li:focus {
    color: var(--links);
}

a img {
    display: flex;
    align-content: center;
}

nav img,
.logo,
nav a li,
button a,
section.new a article h4,
a article .other-summary h6 {
    transition: ease 150ms;
}

h2 { 
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 800;
}

h3 { /* applied to "new" section heading */
    font-size: 2rem;
    line-height: 2rem;
    padding-bottom: 24px;
    font-weight: 600;
    color: var(--new-section);
}

h4 { /* new section article headings */
    font-size: 1.1rem;
    line-height: 1.5rem;
    padding-bottom: 0.5rem;
    font-weight: 800;
    color: hsl(36, 100%, 99%);
}

h5 { /* other section numbers ? unsure if these have semantic meaning */ 
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: 800; /* ? need to double check this weight */
    color: var(--soft);
}

h6 { /* other section headings */
    font-size: 1rem;
    font-weight: 800; /* ? need to double check this weight */
    color: black;
}

p {
    color: hsl(236, 13%, 42%);
}

button {
    display: flex;
    border: none;
    margin-top: 24px;
}

button a {
    font-size: 0.8rem;
    color: hsl(36, 100%, 99%);
    letter-spacing: 5px;
    font-weight: 700;
    padding: 10px 20px;
    background-color: var(--links);
    transition: ease 150ms;
}

button a:hover {
    background: var(--secondary);
}

main {
    display: contents;
}

main img { 
    height: calc(100vw - 48px); /* ? not sure if specifying dimension is ok, how to make height same as width of mobile screen */
    /* how to swap out images in html doc? unless i use image as background in css? */
    object-fit: cover;
}

section.new {
    background: var(--secondary);
    margin-top: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section.new a article:hover h4 { /* targeting titles of section "new" when we hover over the entire article block */
    color: var(--new-section);
}

section.new p {
    color: var(--soft);
}

section.new .border-bottom {
    border-bottom: 1px solid var(--soft);
    padding-top: 24px;
    margin-bottom: 24px;
}

section.other article {
    margin: 24px 0px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.other article:last-child { 
    margin-bottom: 0;
}

.other-summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}

a article:hover .other-summary h6 { /* targeting titles of section "new" when we hover over the entire article block */
    color:hsl(5, 85%, 63%);
}

section.other img {
    width: 100px;
    object-fit: cover;
}

.other-summary {
    margin-left: 16px;
}

.divider { /* extra spacing between "other" section and top two */
    display: none;
}

aside { 
    font-size: 11px; 
    text-align: center; 
    padding-bottom: 12px;
}

aside a { 
    color: hsl(228, 45%, 44%); 
}

/*------------------------------------------------------------
|                            TABLET                           |
--------------------------------------------------------------*/

@media (min-width: 520px) {
    
    .content {
        grid-template-columns: 1fr 1fr;
    } 

    .nav-wrapper {
        display: block;
        position: static;
    }

    .mobile-menu,
    .nav-expander {
        display: none;
    }

    h2 {
        font-size: 3rem;
        line-height: 3rem;
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    nav {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .menu-expanded {
        display: none;
    }

    .screen {
        display: none;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        list-style: none;
        background: none;
        align-items: center;      
        font-size: 0.9rem;
        margin-right: -10px; /* get last item in list to align with end of  "new" section */
    }

    nav ul a li {
        padding: 0 10px;
        color: var(--soft);
        margin-left: 10px;
    }

    nav ul:last-child {
        padding-right: 0px;
    }
    
    picture {
        display: contents;
    }

    main img {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        height: 100%;
    }

    .main-summary {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
    }

    section.new {
        margin-top: 24px;
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    section.other {
        grid-column: 2 / -1;
        grid-row: 4 / 5;
        display: flex;
        flex-direction: column;
    }

    section.other article {
        margin-bottom: 24px;
    }

}

/*------------------------------------------------------------
|                        1280px DESKTOP                       |
--------------------------------------------------------------*/

@media (min-width: 1000px) {

    .content {
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 1280px;
    }

    h2 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        line-height: 3.5rem;
        padding-right: 20px;
    }

    h3 {
        padding-bottom: 0px;
    }

    source {
        display: none;
    }

    main img {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        min-height: 340px; /* close to max size that image grows to on tablet to minimise sudden changes */
    }

    .main-summary {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    section.new {
        margin-top: 0;
        grid-column: 3 / 4;
        grid-row: 2 / 4;
    }

    section.new .border-bottom {
        border-bottom: 1px solid var(--soft);
        padding-top: 0px;
        margin-bottom: 0px;
    } 

    .divider { /* extra spacing between "other" section and top two */
        display: block;
        grid-column: 1 / -1;
        grid-row: 4 / 5;
    }
    
    section.other {
        display: contents;
    }

    section.other a article {
        margin: 0;
        padding-bottom: 0;
    }

    aside {
        grid-column: 1 / 4;
        grid-row: 6 / 7;
    }

}


/*------------------------------------------------------------
|                        1920px DESKTOP                       |
--------------------------------------------------------------*/

@media (min-width: 1920px) {

    .content {
        max-width: 1400px;
    }

}

/*------------------------------------------------------------
|                        2560px DESKTOP                       |
--------------------------------------------------------------
multiply all mobile values by 1.25
*/

@media (min-width: 2560px) {

    .content {
        max-width: 1920px;
    }

    body {
        font-size: 1.171875rem;
        line-height: 1.875;
    }

    .logo {
        width: 62.5px;
        height: 62.5px;
    }

    nav ul {
        font-size: 1.171875rem;
    }

    nav ul a li {
        padding: 0 15px;
    }

    h2 { 
        font-size: 3.125rem;
        line-height: 3.75rem;
    }
    
    h3 { /* applied to "new" section heading */
        font-size: 3.125rem;
        line-height: 3.125rem;
        padding-bottom: 30.15625px;
    }
    
    h4 { /* new section article headings */
        font-size: 1.375rem;
        line-height: 1.875rem;
        padding-bottom: 0.5rem;
    }
    
    h5 { /* other section numbers ? unsure if these have semantic meaning */ 
        font-size: 1.75rem;
        line-height: 1.75rem;
    }
    
    h6 { /* other section headings */
        font-size: 1.25rem;
    }
    
    button a {
        font-size: 1rem;
        letter-spacing: 6.25px;
        padding: 12.5px 25px;
    }

    button {
        margin-top: 30px;
    }

    section.new {
        padding: 30px;
    }

    section.other img {
        width: 150px;
    }

    aside { 
        font-size:13.75px; 
    }

}

/*------------------------------------------------------------
|                         4k DESKTOP                         |
--------------------------------------------------------------
multiply all mobile values by 2 
*/

@media (min-width: 3840px) {

    .content {
        max-width: 3000px;
        gap: 48px;
        padding: 48px 0;
        margin: auto 48px;
    }

    body {
        font-size: 1.875rem;
        line-height: 3rem;
    }

    main img {
        min-height: 825px;
        object-fit: cover;
    }

    .logo {
        width: 100px;
        height: 100px;
    }

    nav ul {
        font-size: 2rem;
    }

    nav ul a li {
        padding: 0 20px;
    }

    h2 { 
        font-size: 5rem;
        line-height: 6.25rem;
    }
    
    h3 { /* applied to "new" section heading */
        font-size: 4rem;
        line-height: 6rem;
        padding-bottom: 24px;
    }
    
    h4 { /* new section article headings */
        font-size: 2.2rem;
        line-height: 3rem;
        padding-bottom: 1rem;
    }
    
    h5 { /* other section numbers ? unsure if these have semantic meaning */ 
        font-size: 2.8rem;
        line-height: 2.8rem;
    }
    
    h6 { /* other section headings */
        font-size: 2rem;
    }

    button {
        margin-top: 48px;
    }
    
    button a {
        font-size: 1.5rem;
        letter-spacing: 10px;
        padding: 20px 40px;
    }

    section.new {
        padding: 48px;
    }

    section.other img {
        width: 200px;
    }

    aside { 
        font-size: 22px; 
    }

}