From c3fa34fc566f23d10006dff7d65f93c29d45deeb Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Sun, 12 Feb 2017 13:33:17 +0100 Subject: [PATCH] Add styles for quadrant pages --- static-pages/index.pug | 11 +++++----- styles/base.css | 1 + styles/components/branding.css | 5 +++++ styles/components/headline-group.css | 3 +++ styles/components/item-page.css | 23 +++++++++++++------- styles/components/item.css | 11 ++++++++++ styles/components/page.css | 2 ++ styles/components/quadrant-grid.css | 1 - styles/components/quadrant-section.css | 1 + templates/default-page.pug | 29 +++++++++++++++----------- templates/item-page.pug | 20 +++++------------- templates/quadrant-page.pug | 25 +++++++++++++++------- 12 files changed, 84 insertions(+), 48 deletions(-) create mode 100644 styles/components/headline-group.css diff --git a/static-pages/index.pug b/static-pages/index.pug index 5d215b5..baaf1e3 100644 --- a/static-pages/index.pug +++ b/static-pages/index.pug @@ -4,11 +4,12 @@ block vars - var title='Overview' block content - .hero-headline - | Technology Radar - span.hero-headline__alt - = ' ' - | March 2017 + .headline-group + .hero-headline + | Technology Radar + span.hero-headline__alt + = ' ' + | March 2017 div.quadrant-grid //- pre diff --git a/styles/base.css b/styles/base.css index 38f735e..86e88b9 100644 --- a/styles/base.css +++ b/styles/base.css @@ -1,6 +1,7 @@ :root { --color-gray-dark: #475157; --color-gray-dark-alt: #4F585E; + --color-gray-dark-alt2: #525C63; --color-gray-normal: #979797; --color-gray-light: #7D878D; diff --git a/styles/components/branding.css b/styles/components/branding.css index 7628db8..880a58b 100644 --- a/styles/components/branding.css +++ b/styles/components/branding.css @@ -3,6 +3,11 @@ display: flex; align-items: center; justify-content: space-between; + min-height: 60px; + + &__backlink { + flex: 0 0 auto; + } &__logo { flex: 0 0 200px; diff --git a/styles/components/headline-group.css b/styles/components/headline-group.css new file mode 100644 index 0000000..584ea3d --- /dev/null +++ b/styles/components/headline-group.css @@ -0,0 +1,3 @@ +.headline-group { + margin-bottom: 60px; +} diff --git a/styles/components/item-page.css b/styles/components/item-page.css index 57d70b6..4d24ad6 100644 --- a/styles/components/item-page.css +++ b/styles/components/item-page.css @@ -1,32 +1,39 @@ .item-page { display: flex; - height: 100vh; + min-height: 100vh; + width: 100vw; + position: fixed; + top: 0; + left: 0; + &__nav, &__content { - height: 100%; + box-sizing: border-box; + padding-top: 150px; + height: 100vh; + position: relative; } &__header { min-height: 40px; - margin: 50px 0 25px; + margin: 0 0 25px; } &__nav { - flex: 0 0 30%; - background: var(--color-gray-dark); + flex: 0 0 37%; &__inner { float: right; width: 375px; - margin: 60px 40px 0 0; + margin: 0 40px 0 0; } } &__content { - flex: 0 0 70%; + flex: 0 0 63%; background: var(--color-white); &__inner { width: 680px; - margin: 60px 0 0 110px; + margin: 0 0 0 100px; } } } diff --git a/styles/components/item.css b/styles/components/item.css index 6e3f6cf..9bea5a3 100644 --- a/styles/components/item.css +++ b/styles/components/item.css @@ -3,15 +3,26 @@ border-bottom: 1px solid var(--color-gray-normal); display: block; text-decoration: none; + transition: background 200ms ease-out; &.is-active { background: var(--color-gray-dark-alt); } + &:hover { + background: var(--color-gray-dark-alt2); + } + &:first-child { border-top: 1px solid var(--color-gray-normal); } + &--no-leading-border { + &:first-child { + border-top: none; + } + } + &__title { font-size: 16px; color: var(--color-white); diff --git a/styles/components/page.css b/styles/components/page.css index 188d92d..074deec 100644 --- a/styles/components/page.css +++ b/styles/components/page.css @@ -9,6 +9,8 @@ &__header { flex: 0 0 auto; margin-bottom: 20px; + position: relative; + z-index: 100; } &__content { diff --git a/styles/components/quadrant-grid.css b/styles/components/quadrant-grid.css index 82f69b6..70e1ad9 100644 --- a/styles/components/quadrant-grid.css +++ b/styles/components/quadrant-grid.css @@ -2,7 +2,6 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - margin-top: 60px; &__quadrant { flex: 0 0 45%; diff --git a/styles/components/quadrant-section.css b/styles/components/quadrant-section.css index 845731a..3f6f655 100644 --- a/styles/components/quadrant-section.css +++ b/styles/components/quadrant-section.css @@ -8,6 +8,7 @@ } &__ring { + box-sizing: border-box; padding: 0 8px; flex: 0 0 25%; } diff --git a/templates/default-page.pug b/templates/default-page.pug index 8d83239..93ca524 100644 --- a/templates/default-page.pug +++ b/templates/default-page.pug @@ -4,8 +4,12 @@ block body .page .page__header .branding - a.branding__logo(href='/') - img(src='/assets/logo.svg') + if noLogo + .branding__backlink + a.icon-link(href='/') AOE Technology Radar + if !noLogo + a.branding__logo(href='/') + img(src='/assets/logo.svg') .branding__content .nav .nav__item @@ -14,13 +18,14 @@ block body a.icon-link(href='/') Technologies Overview .page__content block content - .page__footer - .branding - span.branding__logo - img(src='/assets/logo.svg') - .branding__content - span.footnote - | AOE is a leading provider of Enterprise Open Source web solutions. - | Using current agile development methods, more than 250+ developers - | and consultants in 8 global locations develop customized Open Source - | solutions for global companies and corporations. + if !noFooter + .page__footer + .branding + span.branding__logo + img(src='/assets/logo.svg') + .branding__content + span.footnote + | AOE is a leading provider of Enterprise Open Source web solutions. + | Using current agile development methods, more than 250+ developers + | and consultants in 8 global locations develop customized Open Source + | solutions for global companies and corporations. diff --git a/templates/item-page.pug b/templates/item-page.pug index d3f1de5..8b4cc1f 100644 --- a/templates/item-page.pug +++ b/templates/item-page.pug @@ -1,16 +1,14 @@ -extends layout.pug +extends default-page.pug block vars - //- - - var title=item.attributes.title + - var noLogo=true + - var noFooter=true + - var title=item.attributes.title -block body +block content .item-page .item-page__nav .item-page__nav__inner - .nav - .nav__item - a.icon-link.icon-link--primary.icon-link--big(href='/') AOE Technology Radar .item-page__header h3.headline = translate(item.quadrant) @@ -30,14 +28,6 @@ block body .item__info= ringItem.attributes.info .item-page__content .item-page__content__inner - .split - .split__left - .split__right - .nav - .nav__item - a.icon-link(href='/') How to Use Technology Radar? - .nav__item - a.icon-link(href='/') Technologies Overview .item-page__header .split .split__left diff --git a/templates/quadrant-page.pug b/templates/quadrant-page.pug index aee6055..3920f6d 100644 --- a/templates/quadrant-page.pug +++ b/templates/quadrant-page.pug @@ -1,13 +1,24 @@ extends default-page.pug block vars - - var title='Quadrant' + - var noLogo=true + - var title=`${translate(quadrantName)}` block content - // - h1 + .headline-group + h1.hero-headline = translate(quadrantName) - ul - each radarItem, itemName in quadrant - li - a(href='/' + quadrantName + '/' + itemName + '.html')= radarItem.attributes.title + .quadrant-section + .quadrant-section__rings + each items, ringName in quadrant + .quadrant-section__ring + .item-list + .item-list__header + span(class=`badge badge--big badge--${ringName}`) + = ringName + .item-list__list + each ringItem in items + a.item.item--no-leading-border(href=`/${ringItem.quadrant}/${ringItem.name}.html`) + .item__title= ringItem.attributes.title + if ringItem.attributes.info + .item__info= ringItem.attributes.info