| | |
| | | line-height: 1.4rem; |
| | | |
| | | &:has(> img) { |
| | | background-color: none; |
| | | background-color: transparent; |
| | | border-radius: 0; |
| | | padding: 0; |
| | | } |
| | |
| | | column-gap: #{map-get($desktopGrid, columnGap)}; |
| | | row-gap: #{map-get($desktopGrid, rowGap)}; |
| | | grid-template-areas: #{map-get($desktopGrid, templateAreas)}; |
| | | @media all and ($desktop) { |
| | | @media all and ($tablet) { |
| | | grid-template-columns: #{map-get($tabletGrid, templateColumns)}; |
| | | grid-template-rows: #{map-get($tabletGrid, templateRows)}; |
| | | column-gap: #{map-get($tabletGrid, columnGap)}; |
| | |
| | | grid-template-areas: #{map-get($mobileGrid, templateAreas)}; |
| | | } |
| | | |
| | | @media all and ($desktop) { |
| | | @media all and not ($desktop) { |
| | | padding: 0 1rem; |
| | | } |
| | | @media all and ($mobile) { |
| | |
| | | |
| | | & .sidebar.left { |
| | | z-index: 1; |
| | | grid-area: sidebar-left; |
| | | grid-area: grid-sidebar-left; |
| | | flex-direction: column; |
| | | @media all and ($mobile) { |
| | | gap: 0; |
| | |
| | | } |
| | | |
| | | & .sidebar.right { |
| | | grid-area: sidebar-right; |
| | | grid-area: grid-sidebar-right; |
| | | margin-right: 0; |
| | | flex-direction: column; |
| | | @media all and ($mobile) { |
| | | margin-left: inherit; |
| | | margin-right: inherit; |
| | | } |
| | | @media all and ($desktop) { |
| | | @media all and not ($desktop) { |
| | | position: initial; |
| | | height: unset; |
| | | width: 100%; |
| | |
| | | } |
| | | |
| | | & .page-header { |
| | | grid-area: page-header; |
| | | grid-area: grid-header; |
| | | margin: $topSpacing 0 0 0; |
| | | @media all and ($mobile) { |
| | | margin-top: 0; |
| | |
| | | } |
| | | |
| | | & .center > article { |
| | | grid-area: page-center; |
| | | grid-area: grid-center; |
| | | } |
| | | |
| | | & .page-footer { |
| | | grid-area: page-footer; |
| | | & footer { |
| | | grid-area: grid-footer; |
| | | } |
| | | |
| | | & .center, |
| | |
| | | min-width: 100%; |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | @media all and ($desktop) { |
| | | @media all and ($tablet) { |
| | | margin-right: 0; |
| | | } |
| | | @media all and ($mobile) { |
| | | margin-right: 0; |
| | | margin-left: 0; |
| | | } |
| | | } |
| | |
| | | & > li:last-of-type { |
| | | margin-bottom: 30px; |
| | | } |
| | | &:after { |
| | | /*&:after { |
| | | pointer-events: none; |
| | | content: ""; |
| | | width: 100%; |
| | |
| | | opacity: 1; |
| | | transition: opacity 0.3s ease; |
| | | background: linear-gradient(transparent 0px, var(--light)); |
| | | } |
| | | }*/ |
| | | } |
| | | |
| | | .transclude { |