diff --git a/src/components/Footer/style.css b/src/components/Footer/style.css index 1ecd3f7..174b480 100644 --- a/src/components/Footer/style.css +++ b/src/components/Footer/style.css @@ -11,7 +11,7 @@ footer { & ul { @apply --inline-list; - @apply --with-separator; + @apply --with-separator-left; flex: 1; } diff --git a/src/components/Form/style.css b/src/components/Form/style.css index 62a7f21..4999664 100644 --- a/src/components/Form/style.css +++ b/src/components/Form/style.css @@ -50,12 +50,14 @@ @media (min-width: 700px) { @apply --inline-list; - @apply --with-separator; + @apply --with-separator-left; float: right; } & svg { + width: 1em; height: 1em; + margin-right: 0.5rem; vertical-align: middle; } } diff --git a/src/components/Header/style.css b/src/components/Header/style.css index a8d5dc9..49fb87f 100644 --- a/src/components/Header/style.css +++ b/src/components/Header/style.css @@ -44,11 +44,12 @@ & ul { @apply --inline-list; + @apply --with-separator-right; text-align: right; } & li { - margin-left: 1em; + line-height: 2.4rem; & a:hover, & a:active { diff --git a/src/globals.css b/src/globals.css index 5a9049c..34a7a3a 100644 --- a/src/globals.css +++ b/src/globals.css @@ -30,14 +30,52 @@ white-space: nowrap; } } - --with-separator: { - & li:after { + --list-separator-width: 2ex; + --separator-style: { content: '//'; padding: 0 0.5rem; + display: inline-block; + box-sizing: border-box; + width: var(--list-separator-width); + } + --with-separator-left: { + overflow: hidden; + + & li { + padding-right: var(--list-separator-width); + } + + & li:before { + @apply --separator-style; + margin-left: -var(--list-separator-width); + } + + & li:last-child { + padding-right: 0; + } + + & li:first-child:before { + visibility: hidden; + } + } + --with-separator-right: { + overflow: hidden; + + & li { + padding-left: var(--list-separator-width); + } + + & li:after { + @apply --separator-style; + margin-right: -var(--list-separator-width); + } + + & li:first-child { + padding-left: 0; } & li:last-child:after { - content: ''; + visibility: hidden; } } }