AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add styles for quadrant pages

Browse Source
This commit is contained in:
Tom Raithel
2017-02-12 13:33:17 +01:00
parent 1f58dea853
commit c3fa34fc56
12 changed files with 84 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static-pages/index.pug
View File

@@ -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

1
styles/base.css
View File

@@ -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;

5
styles/components/branding.css
View File

@@ -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;

3
styles/components/headline-group.css Normal file
View File

@@ -0,0 +1,3 @@
.headline-group {
margin-bottom: 60px;
}

23
styles/components/item-page.css
View File

@@ -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;
}
}
}

11
styles/components/item.css
View File

@@ -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);

2
styles/components/page.css
View File

@@ -9,6 +9,8 @@
&__header {
flex: 0 0 auto;
margin-bottom: 20px;
position: relative;
z-index: 100;
}
&__content {

1
styles/components/quadrant-grid.css
View File

@@ -2,7 +2,6 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
&__quadrant {
flex: 0 0 45%;

1
styles/components/quadrant-section.css
View File

@@ -8,6 +8,7 @@
}
&__ring {
box-sizing: border-box;
padding: 0 8px;
flex: 0 0 25%;
}

29
templates/default-page.pug
View File

@@ -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.

20
templates/item-page.pug
View File

@@ -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

25
templates/quadrant-page.pug
View File

@@ -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