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

More styles

Browse Source
This commit is contained in:
Tom Raithel
2017-02-11 12:04:52 +01:00
parent b73cc8896c
commit fc81624813
15 changed files with 117 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
radar/2016-02-02/languages-and-frameworks/react123.md
View File

@@ -1,6 +1,6 @@
---
title: "React 123"
ring: trial
title: "This is a long title that may break design"
ring: assess
---
React blablab *React* - super "cool"

2
radar/2016-02-02/languages-and-frameworks/vue123.md
View File

@@ -1,6 +1,6 @@
---
title: "Vue 123"
ring: adopt
ring: assess
---
Hier steht eine Einleitung über *React* - super "cool"

15
radar/2016-02-02/languages-and-frameworks/vue1230.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: "Something else"
ring: hold
---
Hier steht eine Einleitung über *React* - super "cool"
Hier noch ein [link](http://www.google.de) zu google
<!--except-->
Hier steht der Rest!
History
-------

31
static-pages/index.pug
View File

@@ -9,21 +9,24 @@ block content
span.hero-headline__alt
= ' '
| March 2017
div
div.quadrant-grid
//-
pre
= JSON.stringify(radar, 0, 2)
each quadrant, quadrantName in radar
.quadrant-section
.quadrant-section__header
h4= translate(quadrantName)
.quadrant-section__lists
each items, ringName in quadrant
.quadrant-section__list
.ring-list
.ring-list__header
span(class=`badge badge--${ringName}`)
= ringName
each item in items
a.ring-list__item(href='/' + quadrantName + '/' + item.name + '.html')
= item.attributes.title
.quadrant-grid__quadrant
.quadrant-section
.quadrant-section__header
h4.headline= translate(quadrantName)
.quadrant-section__rings
each items, ringName in quadrant
.quadrant-section__ring
.ring-list
.ring-list__header
span(class=`badge badge--${ringName}`)
= ringName
each item in items
span.ring-list__item
a.link(href='/' + quadrantName + '/' + item.name + '.html')
= item.attributes.title

4
styles/base.css
View File

@@ -1,5 +1,6 @@
:root {
--color-gray-dark: #475157;
--color-gray-normal: #979797;
--color-gray-light: #7D878D;
--color-white: #fff;
--color-green: #5CB449;
@@ -27,7 +28,8 @@ body {
padding: 0;
font-family: 'DIN';
font-weight: normal;
font-size: 16px;
font-size: 14px;
line-height: 1.5;
& h1 {
color: blue;

12
styles/components/header.css → styles/components/branding.css
View File

@@ -1,10 +1,11 @@
.header {
margin: 40px 0 60px;
.branding {
margin: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
&__logo {
flex: 1 0 auto;
flex: 0 0 200px;
& img {
display: block;
width: 150px;
@@ -12,8 +13,7 @@
}
}
&__nav {
flex: 0 0 auto;
height: 20px;
&__content {
flex: 0 1 auto;
}
}

4
styles/components/footnote.css Normal file
View File

@@ -0,0 +1,4 @@
.footnote {
font-size: 12px;
color: var(--color-gray-normal);
}

5
styles/components/headline.css Normal file
View File

@@ -0,0 +1,5 @@
.headline {
color: var(--color-white);
font-size: 20px;
font-weight: normal;
}

3
styles/components/hero-headline.css
View File

@@ -1,7 +1,8 @@
.hero-headline {
font-size: 30px;
font-size: 40px;
font-weight: 300;
color: var(--color-white);
margin-bottom: 70px;
&__alt {
color: var(--color-gray-light);

8
styles/components/link.css Normal file
View File

@@ -0,0 +1,8 @@
.link {
color: var(--color-white);
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}

17
styles/components/page.css
View File

@@ -1,5 +1,22 @@
.page {
width: 1200px;
min-height: 100%;
margin: 0 auto;
padding: 0 10px;
display: flex;
flex-direction: column;
&__header {
flex: 0 0 auto;
margin-bottom: 20px;
}
&__content {
flex: 1 1 auto;
}
&__footer {
border-top: 1px solid var(--color-gray-normal);
flex: 0 0 auto;
}
}

9
styles/components/quadrant-grid.css Normal file
View File

@@ -0,0 +1,9 @@
.quadrant-grid {
display: flex;
flex-wrap: wrap;
&__quadrant {
flex: 0 0 50%;
margin-bottom: 40px;
}
}

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

@@ -1,13 +1,14 @@
.quadrant-section {
&__header {
margin-bottom: 20px;
}
&__lists {
&__rings {
display: flex;
}
&__list {
flex: 0 0 20%;
&__ring {
padding: 0 8px;
flex: 0 0 25%;
}
}

4
styles/components/ring-list.css
View File

@@ -1,10 +1,10 @@
.ring-list {
&__header {
margin-bottom: 10px;
margin-bottom: 20px;
}
&__item {
font-size: 13px;
display: block;
color: var(--color-white);
margin-bottom: 10px;
}
}

29
templates/layout.pug
View File

@@ -5,12 +5,23 @@ html
link(rel='stylesheet', href='/styles.css')
body
.page
.header
a.header__logo(href='/')
img(src='/assets/logo.svg')
.header__nav
| How to Use Technology Radar?
block content
block scripts
script(src='/bundle.js')
.page__header
.branding
a.branding__logo(href='/')
img(src='/assets/logo.svg')
.branding__content
| How to Use Technology Radar?
.page__content
block content
block scripts
script(src='/bundle.js')
.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.