diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 47a7ac4d..d7cb2e99 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -791,24 +791,22 @@ blockquote p:last-child { /* Tabs */ .nav-tabs { - list-style: none; display: flex; - justify-content: start; - border-bottom: 1px solid black; - position: relative; + flex-direction: column; + border: none; + list-style: none; - /* Lines extend 1rem into gutter on both sides */ - width: calc(100% + 2rem); - margin-left: -1rem; + width: 100%; + margin-left: 0; + padding: 0; > :not(:last-child) { - border-right: none; + border-bottom: none; } } .nav-item { - border: 1px solid var(--color-tabs-divider); - border-bottom: none; + border: 1px solid black; padding: 10px; position: relative; @@ -821,53 +819,80 @@ blockquote p:last-child { } } -.nav-item:has(.active) { - /* Change the border colors of li that is has a child with a class "active" */ - border-top: 1px solid black; - border-left: 1px solid black; +.tab-content { + .tab-pane { + display: none; + } - /* Change the border of next child */ - + li { - border-left: 1px solid black; + .tab-pane * { + margin-left: 0; } - &::after { - content: ""; - position: absolute; - display: block; - border-bottom: 1px solid white; - bottom: -1px; /* Moves the line down 1px (aka the thickness of the border) */ - left: 0; - width: 100%; - z-index: 9999; + .active { + display: block !important; } } -.nav-item:last-child:has(.active) { - /* If on last tab, change the right border since it does not have a next sibling */ - border-right: 1px solid black; -} +@media (min-width: 429px) { + /* iPhone 12+ Pro Max */ + .nav-tabs { + flex-direction: row; + justify-content: start; + border-bottom: 1px solid black; + position: relative; -.tab-content { - border-bottom: 1px solid black; + /* Lines extend 1rem into gutter on both sides */ + width: calc(100% + 2rem); + margin-left: -1rem; + + > :not(:last-child) { + border-right: none; + } + } - /* Lines extend 1rem into gutter on both sides */ - width: calc(100% + 2rem); - margin-left: -1rem; + .nav-item { + border: 1px solid var(--color-tabs-divider); + border-bottom: none; + } - .tab-pane { - display: none; + .nav-item:has(.active) { + /* Change the border colors of li that is has a child with a class "active" */ + border-top: 1px solid black; + border-left: 1px solid black; - /* Push the content 1rem right due to the gutter displacement */ - margin-left: 1rem; + /* Change the border of next child */ + + li { + border-left: 1px solid black; + } + + &::after { + content: ""; + position: absolute; + display: block; + border-bottom: 1px solid white; + bottom: -1px; /* Moves the line down 1px (aka the thickness of the border) */ + left: 0; + width: 100%; + z-index: 9999; + } } - .tab-pane * { - margin-left: 0; + .nav-item:last-child:has(.active) { + /* If on last tab, change the right border since it does not have a next sibling */ + border-right: 1px solid black; } - .active { - display: block !important; + .tab-content { + border-bottom: 1px solid black; + + /* Lines extend 1rem into gutter on both sides */ + width: calc(100% + 2rem); + margin-left: -1rem; + + .tab-pane { + /* Push the content 1rem right due to the gutter displacement */ + margin-left: 1rem; + } } }