/* 1. 2.

*/ /* ---------------------------------------------------------------------- */ /* !!! 1. !!! */ body { height: 100vh; margin: 0; display: grid; grid-template: minmax(min-content, 1fr) minmax(min-content, 3fr) / minmax(min-content, 1fr) minmax(min-content, 6fr); grid-template-areas: "aside header" "aside main"; font-family: Roboto; } svg { fill: currentColor; } /* ---------------------------------------------------------------------- */ /* !!! 2.

!!! */ header { grid-area: header; background-color: white; display: grid; grid-template: minmax(min-content, 1fr) minmax(min-content, 1fr) / minmax(min-content, 5fr) minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr); grid-template-areas: "headerSearchBar headerNotificationBell headerHeadingHgroup headerHeadingHgroup" "headerHiThere headerNew headerUpload headerShare"; } #headerSearchBar { grid-area: headerSearchBar; display: flex; gap: 1em; justify-content: center; align-items: center; border-radius: 0.5em; background-color: rgb(204, 204, 204); } #headerSearchBar input { width: 80%; height: 60%; border: none; border-radius: 1em; font-size: 1.2em; } #headerSearchBar input::placeholder { padding-left: 1em; } #headerSearchBar label button { cursor: pointer; border-radius: 0.5em; } #headerSearchBar label button svg { max-width: 2em; height: auto; } #headerNotificationBell { grid-area: headerNotificationBell; margin: auto; } #headerNotificationBell svg { max-width: 3em; height: auto; margin: auto; } #headerHeadingHgroup { grid-area: headerHeadingHgroup; display: flex; gap: 1em; justify-content: center; align-items: center; border-radius: 1em; background-color: rgb(204, 204, 204); } #headerHeadingHgroup svg { max-width: 3em; height: auto; } #headerHiThere { grid-area: headerHiThere; display: flex; flex-direction: column; justify-content: center; padding-left: 4em; } #headerHiThere span { display: flex; gap: 0.5em; align-items: center; } #headerHiThere span svg { max-width: 2em; height: auto; } #headerNew { grid-area: headerNew; } #headerUpload { grid-area: headerUpload; } #headerShare { grid-area: headerShare; } #headerNew, #headerUpload, #headerShare { display: flex; justify-content: center; align-items: center; } #headerNew button, #headerUpload button, #headerShare button { width: 80%; height: 3em; border: none; border-radius: 2em; background-color: #0080ff; color: white; font-size: 1em; font-weight: bold; } /* ---------------------------------------------------------------------- */ /* !!! 3.

!!! */ aside { grid-area: aside; background-color: #0080ff; color: white; } aside hgroup { display: flex; gap: 0.5em; align-items: center; padding: 0 0.85em; } aside hgroup svg { max-width: 2em; height: auto; } aside nav ul { list-style-type: none; padding: 0 1em 1em 1em; } aside nav li { margin: 1em auto; } aside nav li a { text-decoration: none; color: white; font-weight: bold; display: flex; align-items: center; } aside nav li a svg { max-width: 1em; height: auto; padding-right: 1em; } /* ---------------------------------------------------------------------- */ /* !!! 4.

!!! */ main { grid-area: main; background-color: rgb(204, 204, 204); padding-bottom: 2em; display: grid; grid-template: minmax(min-content, 1fr) / minmax(min-content, 2fr) minmax(min-content, 1fr); grid-template-areas: "mainSection mainArticle"; } /* ---------------------------------------------------------------------- */ /* !!! 5.

!!! */ section { grid-area: mainSection; padding: 0 0 0 2em; } #mainSectionContainer { display: grid; grid-template: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr) / minmax(min-content, 1fr) minmax(min-content, 1fr); grid-auto-flow: row; grid-auto-rows: minmax(min-content, 1fr); gap: 2em; } #mainSectionContainer div { padding: 0.5em 1em; border: 0.2em solid orange; border-radius: 0.5em; background-color: white; } #mainSectionContainer div p { max-height: 13em; overflow: hidden; text-overflow: ellipsis; } #mainSectionContainer div a { text-decoration: none; } #mainSectionContainer div a:first-of-type { padding-left: 60%; } #mainSectionContainer div a svg { max-width: 1.3em; height: auto; padding: 0 0.5em 0.5em 0.5em; color: black; } /* ---------------------------------------------------------------------- */ /* !!! 6.

!!! */ article { grid-area: mainArticle; padding: 0 2em 2em 2em; } #mainArticleAnnouncementsContainer div { padding: 0 1em; border: 0.1em solid rgb(204, 204, 204); border-radius: 0.5em; background-color: white; } #mainArticleAnnouncementsContainer div p { max-height: 7em; overflow: hidden; text-overflow: ellipsis; } #mainArticleTrendingContainer div { padding: 1em; display: flex; align-items: center; gap: 1em; border: 0.1em solid rgb(204, 204, 204); border-radius: 0.5em; background-color: white; } #mainArticleTrendingContainer div span { display: flex; flex-direction: column; } #mainArticleTrendingContainer div svg { max-width: 3em; height: auto; }