added font "Roboto" and indented breadcrumbs slightly

This commit is contained in:
Felix Hamann 2018-06-09 20:20:18 +02:00
parent 033117adf4
commit 6c03063029
2 changed files with 16 additions and 13 deletions

View File

@ -465,7 +465,7 @@ instance Yesod UniWorX where
hasPageActions = any isPageActionPrime menuTypes hasPageActions = any isPageActionPrime menuTypes
pc <- widgetToPageContent $ do pc <- widgetToPageContent $ do
addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900|Roboto:300,400,600"
addScript $ StaticR js_zepto_js addScript $ StaticR js_zepto_js
addScript $ StaticR js_fetchPolyfill_js addScript $ StaticR js_fetchPolyfill_js
addScript $ StaticR js_urlPolyfill_js addScript $ StaticR js_urlPolyfill_js

View File

@ -1,13 +1,14 @@
.breadcrumbs__container { .breadcrumbs__container {
position: relative; position: relative;
color: white;
z-index: 10;
align-self: flex-end; align-self: flex-end;
margin-bottom: 10px; background-color: var(--color-dark);
transition: margin-bottom .2s ease; color: white;
margin-left: -40px; margin-left: -40px;
margin-right: -40px; margin-right: -40px;
background-color: var(--color-dark); margin-bottom: 10px;
padding-left: 30px;
transition: margin-bottom .2s ease;
z-index: 10;
} }
.breadcrumbs__container--animated { .breadcrumbs__container--animated {
transition: left .2s ease; transition: left .2s ease;
@ -22,9 +23,11 @@
padding-right: 4px; padding-right: 4px;
position: relative; position: relative;
line-height: 28px; line-height: 28px;
--color-bg-odd: var(--color-dark);
--color-bg-even: var(--color-primary);
&:nth-child(even) { &:nth-child(even) {
background-color: var(--color-light); background-color: var(--color-bg-even);
} }
&:first-child { &:first-child {
@ -32,26 +35,26 @@
} }
&:nth-child(even) { &:nth-child(even) {
background-color: var(--color-light); background-color: var(--color-bg-even);
&::before { &::before {
border-left-color: var(--color-primary) !important; border-left-color: var(--color-bg-odd) !important;
} }
&::after { &::after {
border-left-color: var(--color-light) !important; border-left-color: var(--color-bg-even) !important;
} }
} }
&:nth-child(odd) { &:nth-child(odd) {
background-color: var(--color-primary); background-color: var(--color-bg-odd);
&::before { &::before {
border-left-color: var(--color-light) !important; border-left-color: var(--color-bg-even) !important;
} }
&::after { &::after {
border-left-color: var(--color-primary) !important; border-left-color: var(--color-bg-odd) !important;
} }
} }