diff --git a/README.md b/README.md index 042c1b9..52707ee 100644 --- a/README.md +++ b/README.md @@ -41,11 +41,11 @@ If an item is overwritten in a new release, the attributes from the new item are ## Todos +- [x] Add Icons +- [x] Add pjax - [ ] Final CSS (Icons, etc) - [ ] Get contents for how-to-use page - [ ] Show item history on details - [ ] Better semantic and SEO - [ ] Implement search? -- [ ] Radar View? - [ ] Make mobile friendly -- [x] Add pjax diff --git a/assets/icons/back.svg b/assets/icons/back.svg new file mode 100644 index 0000000..b3aabe3 --- /dev/null +++ b/assets/icons/back.svg @@ -0,0 +1,10 @@ + + + + Combined Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/assets/icons/overview.svg b/assets/icons/overview.svg new file mode 100644 index 0000000..f0a88d9 --- /dev/null +++ b/assets/icons/overview.svg @@ -0,0 +1,10 @@ + + + + Slice 1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/assets/icons/pie.svg b/assets/icons/pie.svg new file mode 100644 index 0000000..78d1376 --- /dev/null +++ b/assets/icons/pie.svg @@ -0,0 +1,10 @@ + + + + Slice 1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/assets/icons/question.svg b/assets/icons/question.svg new file mode 100644 index 0000000..2cdafb6 --- /dev/null +++ b/assets/icons/question.svg @@ -0,0 +1,13 @@ + + + + Group + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000..e01a7cd --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1,10 @@ + + + + Page 1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static-pages/howto.pug b/static-pages/howto.pug new file mode 100644 index 0000000..63f99b4 --- /dev/null +++ b/static-pages/howto.pug @@ -0,0 +1,14 @@ +extends ../templates/default-page.pug + +block vars + - var noLogo=true + - var title="How to Use Technology Radar" + +block content + .headline-group + h1.hero-headline + | How to Use Technology Radar + .markdown + h2 What are quadrants? + p + | TODO diff --git a/static-pages/index.pug b/static-pages/index.pug index 16910ad..c12b8d0 100644 --- a/static-pages/index.pug +++ b/static-pages/index.pug @@ -19,7 +19,9 @@ block content .split__left h4.headline= translate(quadrantName) .split__right - a.icon-link(href=`/${quadrantName}.html`) Quadrant Overview + a.icon-link(href=`/${quadrantName}.html`) + span.icon.icon--pie.icon-link__icon + | Quadrant Overview .quadrant-section__rings each items, ringName in quadrant .quadrant-section__ring diff --git a/styles/base.css b/styles/base.css index 9cf6705..a81b295 100644 --- a/styles/base.css +++ b/styles/base.css @@ -2,7 +2,7 @@ --color-gray-dark: #475157; --color-gray-dark-alt: #4F585E; --color-gray-dark-alt2: #525C63; - --color-gray-normal: #979797; + --color-gray-normal: #A1A6AA; --color-gray-light: #7D878D; --color-white: #fff; diff --git a/styles/components/icon-link.css b/styles/components/icon-link.css index 9184533..02ed96a 100644 --- a/styles/components/icon-link.css +++ b/styles/components/icon-link.css @@ -2,7 +2,6 @@ display: inline-block; position: relative; text-decoration: none; - padding-left: 30px; height: 25px; font-size: 14px; line-height: 25px; @@ -16,19 +15,13 @@ font-size: 16px; } + &__icon { + margin-right: 6px; + position: relative; + top: -1px; + } + &:hover { text-decoration: underline; } - - &:before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 25px; - height: 25px; - /* TODO icon*/ - background: var(--color-gray-normal); - border-radius: 50%; - } } diff --git a/styles/components/icon.css b/styles/components/icon.css new file mode 100644 index 0000000..5d35991 --- /dev/null +++ b/styles/components/icon.css @@ -0,0 +1,29 @@ +.icon { + display: inline-block; + width: 22px; + height: 22px; + background-size: 22px 22px; + background-repeat: no-repeat; + background-position: 0 0; + vertical-align: middle; + + &--pie { + background-image: url('/assets/icons/pie.svg'); + } + + &--question { + background-image: url('/assets/icons/question.svg'); + } + + &--overview { + background-image: url('/assets/icons/overview.svg'); + } + + &--search { + background-image: url('/assets/icons/search.svg'); + } + + &--back { + background-image: url('/assets/icons/back.svg'); + } +} diff --git a/styles/components/item-details.css b/styles/components/markdown.css similarity index 96% rename from styles/components/item-details.css rename to styles/components/markdown.css index a8638dd..6f14208 100644 --- a/styles/components/item-details.css +++ b/styles/components/markdown.css @@ -1,4 +1,4 @@ -.item-details { +.markdown { color: var(--color-gray-normal); font-size: 16px; diff --git a/templates/default-page.pug b/templates/default-page.pug index 34cfbae..89e0286 100644 --- a/templates/default-page.pug +++ b/templates/default-page.pug @@ -6,16 +6,26 @@ block body .branding if noLogo .branding__backlink - a.icon-link.icon-link--primary(href='/') AOE Technology Radar + a.icon-link.icon-link--primary.icon-link--big(href='/') + span.icon.icon--back.icon-link__icon + | AOE Technology Radar if !noLogo a.branding__logo(href='/') img(src='/assets/logo.svg') .branding__content .nav .nav__item - a.icon-link(href='/howto.html') How to Use Technology Radar? + a.icon-link(href='/howto.html') + span.icon.icon--question.icon-link__icon + | How to Use Technology Radar? .nav__item - a.icon-link(href='/overview.html') Technologies Overview + a.icon-link(href='/overview.html') + span.icon.icon--overview.icon-link__icon + | Technologies Overview + .nav__item + a.icon-link(href='#todo') + span.icon.icon--search.icon-link__icon + | Search .page__content block content if !noFooter diff --git a/templates/item-page.pug b/templates/item-page.pug index 8b4cc1f..5086c55 100644 --- a/templates/item-page.pug +++ b/templates/item-page.pug @@ -19,7 +19,9 @@ block content span(class=`badge badge--big badge--${item.attributes.ring}`) = item.attributes.ring .split__right - a.icon-link(href=`/${item.quadrant}.html`) Quadrant Overview + a.icon-link(href=`/${item.quadrant}.html`) + span.icon.icon--pie.icon-link__icon + | Quadrant Overview .item-list__list each ringItem in itemsInRing a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`) @@ -36,7 +38,7 @@ block content .split__right span(class=`badge badge--big badge--${item.attributes.ring}`) = item.attributes.ring - .item-details + .markdown != item.body //- a(href='/' + item.quadrant + '.html')= translate(item.quadrant)