diff --git a/assets/stylesheets/global/header.css b/assets/stylesheets/global/header.css index 44aa08c..aa771e1 100644 --- a/assets/stylesheets/global/header.css +++ b/assets/stylesheets/global/header.css @@ -15,19 +15,20 @@ display: flex; flex-wrap: wrap; align-items: center; - justify-content: center; + justify-content: space-between; font-size: 0.8em; - - @media (--breakpoint-desktop) { - justify-content: space-between; - } } @element upper-first { + flex: 1 1 auto; display: flex; + justify-content: space-between; + margin-bottom: calc(var(--grid-gutter) / 2); @media (--breakpoint-desktop) { + flex: 0 1 auto; + margin-bottom: 0; & div + div { margin-left: var(--grid-gutter); } @@ -35,9 +36,13 @@ } @element upper-second { + flex: 1 1 auto; display: flex; + justify-content: space-between; + @media (--breakpoint-desktop) { + flex: 0 1 auto; & div + div { margin-left: var(--grid-gutter); } @@ -105,7 +110,7 @@ @element controls { display: flex; - flex: 0 0 100%; + flex: 1 1 auto; flex-direction: column; justify-content: space-around; color: var(--color-header-upper-text-primary); diff --git a/assets/stylesheets/layout/layout-centered.css b/assets/stylesheets/layout/layout-centered.css index 325c844..a124a7a 100644 --- a/assets/stylesheets/layout/layout-centered.css +++ b/assets/stylesheets/layout/layout-centered.css @@ -1,14 +1,10 @@ @block layout-centered { - box-sizing: border-box; - width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0 2vw; } @block layout-centered-small { - box-sizing: border-box; - width: 100%; max-width: calc(var(--content-max-width) - 360px); margin: 0 auto; padding: 0 2vw; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 6c41e2a..59ef5e7 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -838,18 +838,12 @@ input[type="reset"]:focus, } .layout-centered { - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; max-width: 980px; margin: 0 auto; padding: 0 2vw; } .layout-centered-small { - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; max-width: 620px; margin: 0 auto; padding: 0 2vw; @@ -978,43 +972,60 @@ display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; font-size: 0.8em; } -@media (min-width: 700px) { - - .header__upper { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - } -} - .header__upper-first { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 11px; } @media (min-width: 700px) { + .header__upper-first { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + margin-bottom: 0; + } + .header__upper-first div + div { margin-left: 22px; } } .header__upper-second { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } @media (min-width: 700px) { + .header__upper-second { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + } + .header__upper-second div + div { margin-left: 22px; } @@ -1108,9 +1119,9 @@ display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;