Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace screenshoted images with real ones plus style footer

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-29 13:21:23 +02:00
committed by Benedikt Rötsch
parent 926b59aaaa
commit 19cf4d1c56
16 changed files with 290 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/stylesheets/footer.css
View File

@@ -1,11 +1,13 @@
@block footer {
margin: var(--grid-gutter) 0;
margin-top: var(--grid-gutter) 0;
padding-top: var(--grid-gutter);
border-top: 2px solid var(--color-bg-separator);
@element upper {
display: flex;
flex-wrap: wrap;
min-height: 80px;
border-bottom: 2px solid var(--color-bg-separator);
& > * {
display: flex;
@@ -14,31 +16,20 @@
}
@element navigation {
flex: 1 0 auto;
font-size: 0.9em;
& ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
& li {
margin: 0;
& + li {
margin-left: calc(var(--grid-gutter) * 2);
}
}
}
flex: 1 1 auto;
}
@element apps {
flex: 0 0 auto;
flex: 1 0 auto;
justify-content: center;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& a {
display: inline-block;
width: 150px;
width: 138px;
& + a {
margin-left: var(--grid-gutter);
@@ -53,16 +44,31 @@
@element lower {
display: flex;
min-height: 80px;
}
@element disclaimer {
flex: 1 0 auto;
flex: 1 1 auto;
display: flex;
align-items: center;
font-size: 0.7em;
color: var(--color-text-grey);
}
@element social {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0 var(--grid-gutter);
& a + a {
margin-left: var(--grid-gutter);
}
& img {
width: 24px;
height: auto;
}
}
}

47
assets/stylesheets/global.css
View File

@@ -22,13 +22,9 @@ body {
}
.wrapper {
max-width: 1024px;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
@media (--breakpoint-desktop) {
padding: 0;
}
}
@block wrapper-with-sidebar {
@@ -151,3 +147,44 @@ body {
}
}
}
@block main-navigation {
& ul {
display: flex;
list-style: none;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& li {
margin: 0;
& + li {
margin-left: calc(var(--grid-gutter) / 4);
}
& a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: var(--color-text-grey);
border-radius: var(--border-radius);
&.active,
&:hover {
background: var(--color-bg-grey);
}
&.active {
color: var(--color-text-default);
}
}
}
}
}

46
assets/stylesheets/header.css
View File

@@ -19,6 +19,12 @@
@media (--breakpoint-desktop) {
flex: 0 0 200px;
}
& img {
width: 100%;
height: auto;
max-width: 169px;
}
}
@element navarea {
@@ -33,46 +39,6 @@
}
}
@element navigation {
& ul {
display: flex;
list-style: none;
flex-wrap: wrap;
margin: 0;
padding: 0;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& li {
margin: 0;
& + li {
margin-left: calc(var(--grid-gutter) / 4);
}
& a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: var(--color-text-grey);
border-radius: var(--border-radius);
&.active,
&:hover {
background: var(--color-bg-grey);
}
&.active {
color: var(--color-text-default);
}
}
}
}
}
@element navarea {
& form {
display: flex;

6
assets/stylesheets/module-landing.css
View File

@@ -1,12 +1,8 @@
.module {
max-width: 1024px;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
@media (--breakpoint-desktop) {
padding: 0;
}
& img {
width: 100%;
height: auto;

3
assets/stylesheets/variables.css
View File

@@ -1,6 +1,7 @@
@custom-media --breakpoint-desktop (min-width: 700px);
:root {
--content-max-width: 980px;
--grid-gutter: 22px;
--border-radius: 3px;
@@ -15,7 +16,7 @@
--color-bg-default: #fff;
--color-bg-grey: #f7f9fa;
--color-bg-separator: #f2f5f7;
--color-bg-separator: #e5ebed;
--color-sidebar-bg: #f7f9fa;

BIN
public/images/app-store-badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

14
public/images/badge-app-store.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 44">
<defs>
<path id="a" d="M0 0h138v44H0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill-rule="nonzero" mask="url(#b)">
<path fill="#000" d="M3.08 0A3.07 3.07 0 0 0 0 3.07v37.86A3.07 3.07 0 0 0 3.08 44h131.7a3.07 3.07 0 0 0 3.08-3.07V3.07A3.07 3.07 0 0 0 134.8 0H3.06z"/>
<path fill="#FFF" d="M40.64 8.24v6.82h2.3c2.22 0 3-1.45 3-3.42 0-2-.8-3.4-3-3.4h-2.3zm1.03.94h1.17c1.5 0 2.05 1 2.05 2.48 0 1.7-.7 2.46-2.1 2.46h-1.2V9.18zm7.84.52c-1.3 0-2.3.93-2.3 2.37v.7c0 1.53 1 2.38 2.3 2.38 1.4 0 2.4-.86 2.4-2.4v-.68c0-1.5-.9-2.37-2.3-2.37zm0 .87c.9 0 1.3.66 1.3 1.55v.6c0 .9-.4 1.55-1.3 1.55-.8 0-1.3-.65-1.3-1.55v-.6c0-.9.5-1.55 1.3-1.55zm10.4-.8h-1l-.9 4.05-1.2-4.04h-.9l-1.1 4.04-.9-4.04h-1.1l1.4 5.28h1.1l1.1-3.9 1.18 3.9h1zM61 15.1h1v-3c0-.87.45-1.5 1.33-1.5.66 0 1.08.37 1.08 1.18v3.26h1.1V11.5c0-1.2-.7-1.8-1.8-1.8-1 0-1.4.62-1.6 1.03H62v-.95h-1v5.28zm6.16 0h1V7.9h-1zM72 9.68c-1.36 0-2.32.93-2.32 2.37v.7c0 1.53.95 2.38 2.3 2.38 1.36 0 2.33-.86 2.33-2.4v-.68c0-1.5-.9-2.37-2.3-2.37zm0 .87c.8 0 1.28.66 1.28 1.55v.6c0 .9-.45 1.55-1.3 1.55-.84 0-1.3-.65-1.3-1.55v-.6c0-.9.5-1.55 1.3-1.55zm5.22 4.58c.78 0 1.25-.37 1.5-.77h.04v.68h.96v-3.58c0-1.3-.9-1.78-2.03-1.78-1.3 0-2 .6-2 1.47h.9c.1-.35.3-.6 1-.6.6 0 1 .28 1 .9v.5h-1.3c-1.2 0-1.9.63-1.9 1.56 0 1 .7 1.7 1.7 1.7zm.3-.84c-.53 0-1-.3-1-.9 0-.5.28-.8.96-.8h1.23v.5c0 .6-.5 1-1.1 1zm5.7-4.6c-1.26 0-2.05.9-2.05 2.2v.9c0 1.4.8 2.2 2.02 2.2.8 0 1.4-.5 1.5-.9v.9h1V7.9h-1v2.7h-.1c-.2-.46-.7-.87-1.6-.87zm.23.9c.78 0 1.33.5 1.33 1.3v.8c0 .9-.52 1.4-1.3 1.4-.8 0-1.3-.6-1.3-1.5V12c0-1 .5-1.53 1.27-1.53zm8.46-.9c-1.3 0-2.3.9-2.3 2.3v.7c0 1.5 1 2.4 2.3 2.4 1.4 0 2.4-.9 2.4-2.4V12c0-1.5-.9-2.37-2.3-2.37zm0 .8c.9 0 1.3.6 1.3 1.5v.6c0 .9-.4 1.5-1.3 1.5-.8 0-1.3-.7-1.3-1.6V12c0-.9.5-1.52 1.3-1.52zm3.8 4.5h1v-2.9c0-.9.5-1.5 1.4-1.5.7 0 1.1.3 1.1 1.1V15h1.1v-3.5c0-1.2-.7-1.8-1.8-1.8s-1.4.62-1.6 1.03v-.95h-1v5.28zm8.8-5.3h-.8v.8h.8v2.9c0 1 .3 1.5 1.6 1.5.2 0 .6-.1.7-.1V14l-.4.05c-.6 0-.8-.14-.8-.7v-2.8h1.2v-.8h-1.2V8.5h-1v1.32zm3.6 5.2h1V12c0-.86.5-1.5 1.3-1.5.7 0 1.2.4 1.2 1.2V15h1v-3.5c0-1.2-.7-1.8-1.7-1.8-1.1 0-1.5.66-1.6 1.03V7.88h-1v7.18zm8.2.1c1.4 0 2-.9 2.1-1.5h-1c-.1.3-.5.6-1.1.6-.8 0-1.3-.6-1.3-1.3v-.3h3.5V12c0-1.44-.9-2.36-2.2-2.36-1.3 0-2.2.86-2.2 2.35v.7c0 1.5.9 2.3 2.3 2.3zm-1.3-3.2v-.1c0-.8.5-1.4 1.3-1.4s1.3.5 1.3 1.3v.1H115zM41.7 33.5l1.16-3.67h4.72l1.16 3.68h2.6L46.7 19.9h-2.8l-4.67 13.6h2.44zm3.58-11.18L47.03 28h-3.67l1.8-5.68h.1zM58.5 33.65c2.42 0 4-1.72 4-4.78V27.6c0-3.08-1.6-4.8-3.97-4.8-1.65 0-2.72.7-3.14 1.66h-.1v-1.53H53v14.15h2.36v-5.06h.1c.44.9 1.4 1.63 3.04 1.63zm-.73-1.92c-1.52 0-2.42-1.3-2.42-3v-1.08c0-1.77.9-2.94 2.38-2.94 1.46 0 2.37 1.1 2.37 3.1v.9c0 2.1-1 3.1-2.36 3.1zm12.53 1.92c2.4 0 4-1.72 4-4.78V27.6c0-3.08-1.6-4.8-4-4.8-1.64 0-2.7.7-3.13 1.66h-.1v-1.53h-2.3v14.15h2.35v-5.06h.1c.44.9 1.4 1.63 3.04 1.63zm-.75-1.92c-1.52 0-2.42-1.3-2.42-3v-1.08c0-1.77.9-2.94 2.38-2.94s2.4 1.1 2.4 3.1v.9c0 2.1-.9 3.1-2.3 3.1zm10.3-2.04c.05 1.8 1.33 4 5.18 4 3.17 0 5.33-1.6 5.33-4.2 0-2.4-1.6-3.4-3.63-3.8l-2.2-.6c-1.26-.3-1.9-.9-1.9-1.8 0-1.2 1.03-1.9 2.55-1.9 1.72 0 2.6.9 2.7 2h2.3c-.06-2.5-2.23-4-4.98-4-2.7 0-5 1.4-5 4.03 0 2.23 1.6 3.3 3.4 3.7l2.2.53c1.43.36 2.13.9 2.13 1.9 0 1.24-1 2.04-2.73 2.04-1.9 0-2.9-1-3-2.1h-2.35zM93.4 23h-1.52v1.85h1.48v5.66c0 2.2.76 3.1 3.37 3.1.48 0 .9 0 1.1-.1v-1.8c-.13.1-.32.1-.52.1-1.1 0-1.6-.3-1.6-1.4v-5.5h2.1V23h-2.1v-2.65h-2.3V23zm10.7-.26c-3.18 0-4.76 2.17-4.76 5.08v.75c0 3.1 1.58 5.1 4.76 5.1 3.2 0 4.76-2.03 4.76-5.12v-.75c0-3-1.57-5.07-4.76-5.07zm0 1.86c1.84 0 2.37 1.58 2.37 3.3v.6c0 1.7-.52 3.3-2.37 3.3s-2.4-1.6-2.4-3.3v-.6c0-1.7.56-3.3 2.4-3.3zm7.13 8.9h2.4v-6.2c0-1.42.6-2.46 2.37-2.46.4 0 .8.02.98.08v-2.07c-.2-.04-.46-.07-.78-.07-1.68 0-2.26.87-2.52 1.53h-.1V23h-2.35v10.5zm11.54.17c3 0 4.17-1.87 4.34-3.3h-2.2c-.1.75-.7 1.42-2 1.42-1.6 0-2.4-1.3-2.4-2.8v-.4h6.9v-1c0-3-1.6-5.1-4.6-5.1-2.9 0-4.6 1.95-4.6 5.02v.9c0 3.1 1.7 5 4.8 5zm-2.4-6.54v-.02c0-1.4.86-2.5 2.28-2.5 1.4 0 2.26 1.1 2.26 2.6v.1h-4.5zM25.2 22.8c-.02-3.27 2.7-4.87 2.82-4.94-1.54-2.25-3.92-2.55-4.75-2.58-2-.2-3.94 1.2-4.96 1.2s-2.6-1.18-4.3-1.14c-2.1.03-4.2 1.3-5.3 3.25-2.3 4-.6 9.8 1.6 13.1 1.1 1.5 2.4 3.3 4.1 3.2 1.7-.1 2.3-1.1 4.3-1.1s2.6 1 4.3 1c1.8 0 2.9-1.6 4-3.2 1.3-1.8 1.8-3.6 1.8-3.7 0 0-3.4-1.3-3.4-5.3zm-3.24-9.64c.9-1.1 1.5-2.63 1.33-4.17-1.3 0-2.9.9-3.9 1.9-.8.9-1.6 2.5-1.4 4 1.4.1 2.9-.7 3.8-1.8z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

41
public/images/badge-google-play.svg Normal file
View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 44">
<defs>
<path id="a" d="M0 0h138v44H0z"/>
<linearGradient id="c" x1="60.16%" x2="33.56%" y1="91.85%" y2="-59.59%">
<stop offset="0%" stop-color="#D6FFA1"/>
<stop offset="32.64%" stop-color="#93E2A7"/>
<stop offset="100%" stop-color="#00A3B5"/>
</linearGradient>
<linearGradient id="d" x1="-32.17%" x2="80.17%" y1="-129.74%" y2="114%">
<stop offset="0%" stop-color="#FF177B"/>
<stop offset="67.21%" stop-color="#FFA976"/>
<stop offset="100%" stop-color="#FFEC73"/>
</linearGradient>
<linearGradient id="e" x1="50.82%" x2="-.03%" y1="74.66%" y2="-29.34%">
<stop offset="0%" stop-color="#63FFD4"/>
<stop offset="48.54%" stop-color="#32A0BA"/>
<stop offset="83.49%" stop-color="#1262A9"/>
<stop offset="100%" stop-color="#064AA2"/>
</linearGradient>
<linearGradient id="f" x1="119.51%" x2="-23.11%" y1="35.53%" y2="61.01%">
<stop offset="0%" stop-color="#FF4521"/>
<stop offset="34.11%" stop-color="#D43E65"/>
<stop offset="79.35%" stop-color="#9F36B9"/>
<stop offset="100%" stop-color="#8A33DB"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<g fill-rule="nonzero" mask="url(#b)">
<path fill="#000" d="M3.07 0A3.07 3.07 0 0 0 0 3.07v37.86A3.07 3.07 0 0 0 3.07 44h131.86a3.07 3.07 0 0 0 3.07-3.07V3.07A3.07 3.07 0 0 0 134.93 0H3.07z"/>
<path fill="#FFF" d="M37.83 13.23h-2.25l-.47 1.35h-1l2.2-5.82h.9l2.2 5.82h-1.1l-.4-1.35zm-1.96-.82h1.68L36.7 10l-.83 2.4zm8.77 2.2h-1l-2.6-4.1v4.2h-1V8.8h1l2.6 4.15V8.8h1zm1.2 0V8.8h1.7c.52 0 .98.12 1.38.34.4.23.7.56.92.98.22.42.33.9.33 1.45v.3c0 .54-.1 1.03-.33 1.44-.22.4-.53.8-.94 1-.4.3-.87.4-1.4.4h-1.67zm1-5v4.2h.66c.53 0 .94-.1 1.22-.5.28-.3.43-.8.43-1.4v-.3c0-.6-.13-1.1-.4-1.4-.28-.3-.68-.5-1.2-.5h-.7zm6.47 2.8h-1.1v2.3h-1V8.8h2.1c.7 0 1.2.15 1.6.45.4.3.6.8.6 1.37 0 .4-.1.7-.3.98a1.78 1.78 0 0 1-.8.6l1.4 2.46v.05h-1.1l-1.2-2.2zm-1.1-.8h1.1c.4 0 .6-.1.8-.2.2-.1.3-.4.3-.7 0-.3-.1-.5-.3-.7-.1-.1-.4-.2-.8-.2h-1.1v2zm8.8.3c0 .6-.1 1.1-.3 1.5-.2.5-.5.8-.8 1-.3.3-.8.4-1.2.4s-.9-.1-1.2-.3a2.3 2.3 0 0 1-.8-1c-.2-.4-.3-.9-.3-1.4v-.3c0-.5.1-1 .3-1.5.2-.4.5-.7.9-1a2.3 2.3 0 0 1 1.2-.3c.5 0 .9.1 1.3.4.4.2.7.6.9 1 .2.5.3 1 .3 1.5v.3zm-1-.3c0-.6-.1-1.1-.4-1.5-.2-.3-.6-.5-1-.5s-.7.2-1 .5c-.2.4-.3.8-.3 1.5v.4c0 .7.2 1.2.4 1.5.3.4.6.5 1.1.5.5 0 .8-.1 1.1-.5.3-.3.4-.8.4-1.5v-.3zm3 3h-1V8.8h1zm1.3 0V8.8H66c.5 0 .96.12 1.35.34.5.2.8.5 1 .9.2.44.34.9.34 1.47v.3c0 .6-.1 1.1-.4 1.5-.2.5-.6.8-1 1-.4.2-.9.4-1.4.4h-1.7zm1-5v4.2h.7c.6 0 1-.1 1.3-.5.3-.3.5-.8.5-1.4v-.3c0-.6-.1-1.1-.4-1.4-.3-.4-.7-.5-1.2-.5h-.7zm9.7 3.7h-2.3l-.4 1.4h-1.1l2.2-5.9h.9l2.2 5.9h-1.1l-.4-1.3zm-2-.8h1.7l-.8-2.4-.8 2.4zm5.2 0v2.2h-1V8.8h2.2c.7 0 1.2.17 1.6.5.4.35.6.8.6 1.35 0 .6-.2 1.1-.5 1.4-.4.3-.9.5-1.6.5h-1.2zm0-.8h1.2c.4 0 .7-.1.9-.2.2-.1.3-.4.3-.7 0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.8-.3h-1.2v2zm5.3.8v2.2h-1V8.8h2.2c.7 0 1.2.17 1.6.5.4.35.6.8.6 1.35 0 .6-.1 1.1-.5 1.4-.3.3-.9.5-1.5.5h-1.2zm0-.8h1.2c.4 0 .7-.1.9-.2.2-.1.3-.4.3-.7 0-.3-.1-.5-.3-.7-.2-.2-.4-.3-.8-.3h-1.3v2zm10.9.2c0 .6-.1 1.1-.3 1.5-.2.5-.4.8-.8 1-.4.3-.8.4-1.3.4s-.9-.1-1.3-.3a2.3 2.3 0 0 1-.9-1c-.2-.4-.3-.9-.3-1.4v-.3c0-.5.1-1 .3-1.5.2-.4.5-.7.9-1a2.3 2.3 0 0 1 1.3-.4c.5 0 .9.2 1.3.4s.7.6.9 1c.2.5.3 1 .3 1.5v.3zm-1-.3c0-.6-.1-1.1-.3-1.5-.2-.3-.6-.5-1-.5s-.8.2-1 .5c-.2.4-.4.8-.4 1.5v.4c0 .7.1 1.2.4 1.5.3.4.6.5 1.1.5.4 0 .7-.1 1-.5.2-.3.36-.8.36-1.5v-.3zm6.6 3.1h-1l-2.6-4.1v4.2h-1v-6h1L99 13V8.8h1z"/>
<path fill="url(#c)" d="M14.46 7.57L1.02.2C.66 0 .32-.04 0 .06l11.04 11 3.42-3.48z" transform="translate(8.33 16.577)"/>
<path fill="url(#d)" d="M3.48 6.9l4.6-2.5c.92-.5.92-1.33 0-1.84L3.48 0 0 3.43 3.48 6.9z" transform="translate(19.37 24.2)"/>
<path fill="url(#e)" d="M.66 0C.26.15 0 .56 0 1.18v19.75c0 .6.26 1.02.66 1.17L11.7 11.05.66 0z" transform="translate(7.667 16.577)"/>
<path fill="url(#f)" d="M0 11.05c.3.1.66.05 1.02-.15l13.44-7.42L11.04 0 0 11.05z" transform="translate(8.33 27.628)"/>
<path fill="#FFF" d="M119.97 37.86l5.76-13.3h-1.87l-2.67 6.63h-.1l-2.8-6.7h-1.9l3.8 8.6-2.2 4.6h1.7m-11.7-11c.3-.8 1.4-2.2 3.7-2.2 2.2 0 4.1 1.3 4.1 3.9V34h-1.7v-1.26h-.1c-.5.76-1.5 1.56-3.1 1.56-1.9 0-3.5-1.15-3.5-3.05 0-2.07 1.8-3.2 4-3.2 1.2 0 2.1.36 2.5.57v-.26c0-1.38-1.1-2.22-2.4-2.22-1 0-1.9.47-2.2 1.32l-1.6-.67zm1.4 4.5c0 .9 1 1.4 1.9 1.4 1.4 0 2.8-1.2 2.8-2.7 0 0-.8-.6-2.2-.6-1.8 0-2.6.9-2.6 1.8zM105 20.9h1.5v13.3H105zm-10.3 0h4.5c2.2 0 4.17 1.6 4.17 3.9s-1.95 3.9-4.16 3.9h-2.8v5.34H95V20.9zm1.7 6.3h2.84c1.53 0 2.4-1.2 2.4-2.3s-.86-2.3-2.4-2.3h-2.8v4.7zM89 32.3c-.5.8-1.7 2-3.8 2-2.6 0-4.5-1.9-4.5-4.4 0-2.7 1.92-4.5 4.3-4.5 2.32 0 3.5 1.8 3.9 2.8l.2.5-6.1 2.5c.45.9 1.2 1.34 2.2 1.34 1 0 1.7-.5 2.22-1.24l1.53 1zm-3.97-5.2c-1 0-2.4.9-2.38 2.6l4.1-1.6c-.25-.6-.9-1-1.7-1zm-7.3 7h2V20.9h-2zm-1.38-.4c0 3.3-2 4.7-4.35 4.7-2.2 0-3.5-1.5-4-2.6l2-.8c.3.7 1.08 1.57 2.3 1.57 1.5 0 2.43-.9 2.43-2.62v-.64h-.07c-.45.6-1.3 1-2.4 1-2.26 0-4.34-1.9-4.34-4.4s2.07-4.5 4.34-4.5c1.08 0 1.94.5 2.4 1h.06v-.7h1.9v8.1zm-6.7-3.8c0 1.6 1.1 2.7 2.5 2.7s2.4-1.1 2.4-2.7-1.05-2.7-2.4-2.7c-1.4 0-2.53 1.2-2.53 2.7zm-2.86 0c0 2.6-2.1 4.5-4.6 4.5-2.5 0-4.6-1.9-4.6-4.5s2-4.5 4.5-4.5 4.52 1.9 4.52 4.5zm-7.1 0c0 1.6 1.1 2.7 2.5 2.7s2.6-1.1 2.6-2.7-1.2-2.7-2.6-2.7-2.6 1.1-2.6 2.7zm-2.9 0c0 2.6-2.1 4.5-4.6 4.5-2.5 0-4.6-1.9-4.6-4.5s2.02-4.5 4.53-4.5c2.5 0 4.6 1.9 4.6 4.5zm-7.1 0c0 1.6 1.2 2.7 2.5 2.7 1.4 0 2.6-1.1 2.6-2.7s-1.2-2.7-2.6-2.7c-1.4 0-2.58 1.1-2.58 2.7zm-9.2 4.4c2.1 0 3.6-.6 4.9-1.9 1.3-1.2 1.6-3 1.6-4.4a6.1 6.1 0 0 0-.1-1.2h-6.4v1.9h4.6c-.2 1-.5 1.8-1.1 2.4-.66.6-1.7 1.4-3.54 1.4a5.02 5.02 0 0 1-5.1-5.1 5.02 5.02 0 0 1 5.1-5.1 4.95 4.95 0 0 1 3.5 1.3l1.3-1.34c-1.2-1.1-2.7-1.93-4.87-1.93-3.9 0-7.13 3.1-7.13 6.92s3.3 6.94 7.2 6.94z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
public/images/google-play-badge.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

6
public/images/icon-facebook.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="#A9B9C0" fill-rule="nonzero" d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm3.6 11.5h-2.1v7h-3v-7h-2v-2h2V8.34c0-1.1.35-2.82 2.65-2.82h2.35v2.3h-1.4c-.25 0-.6.13-.6.66V9.5h2.34l-.24 2z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 370 B

6
public/images/icon-info.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd">
<path d="M-2 22h24V-2H-2z"/>
<path fill="#FFF" fill-rule="nonzero" d="M10 20C4.48 20 0 15.52 0 10S4.48 0 10 0s10 4.48 10 10-4.48 10-10 10zm1-15H9v2h2V5zm0 4H9v6h2V9z" opacity=".6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

6
public/images/icon-twitter.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<path fill="#A9B9C0" fill-rule="nonzero" d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm5.26 9.38v.34c0 3.48-2.64 7.5-7.48 7.5A7.45 7.45 0 0 1 5.75 16a5.3 5.3 0 0 0 3.9-1.08A2.64 2.64 0 0 1 7.2 13.1c.37.1.8.06 1.16-.04a2.63 2.63 0 0 1-2.1-2.58v-.05c.35.2.76.32 1.2.33a2.63 2.63 0 0 1-.83-3.5A7.46 7.46 0 0 0 12.07 10a2.63 2.63 0 0 1 4.48-2.4c.6-.12 1.95-.27 1.95-.27-.35.53-.72 1.66-1.24 2.03z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 567 B

BIN
public/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

17
public/images/logo.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 43">
<g fill="none" fill-rule="evenodd">
<g transform="translate(0 2)">
<path fill="#D9453F" d="M3.75 37v-7.1H28V37z"/>
<circle cx="9.3" cy="14.3" r="9.3" fill="#F5A623"/>
<path fill="#3C80CF" d="M35 27.6L19 .4h16z"/>
</g>
<g font-size="20">
<text fill="#2A3039" font-family="AvenirNext-Bold, Avenir Next" font-weight="bold" letter-spacing="-.3" transform="translate(45 18)">
<tspan x="0" y="20">example app</tspan>
</text>
<text fill="#8091A5" font-family="PTSerif-Italic, PT Serif" font-style="italic" transform="translate(45 -27)">
<tspan x="0" y="43">The</tspan>
</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

201
public/stylesheets/style.css
View File

@@ -846,18 +846,11 @@ body {
}
.wrapper {
max-width: 1024px;
max-width: 980px;
margin: 0 auto;
padding: 0 2vw;
}
@media (min-width: 700px) {
.wrapper {
padding: 0;
}
}
@media (min-width: 700px) {
.wrapper-with-sidebar {
@@ -1012,6 +1005,55 @@ body {
font-weight: bold;
}
.main-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
padding: 0;
}
@media (min-width: 700px) {
.main-navigation ul {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.main-navigation ul li {
margin: 0;
}
.main-navigation ul li + li {
margin-left: 5.5px;
}
.main-navigation ul li a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: #8091a5;
border-radius: 3px;
}
.main-navigation ul li a.active,
.main-navigation ul li a:hover {
background: #f7f9fa;
}
.main-navigation ul li a.active {
color: #2a303a;
}
.header {
display: -webkit-box;
display: -ms-flexbox;
@@ -1022,7 +1064,7 @@ body {
margin: 22px 0;
padding-bottom: 22px;
border-bottom: 2px solid #f2f5f7;
border-bottom: 2px solid #e5ebed;
}
@media (min-width: 700px) {
@@ -1054,6 +1096,12 @@ body {
}
}
.header__logo img {
width: 100%;
height: auto;
max-width: 169px;
}
.header__navarea {
display: -webkit-box;
display: -ms-flexbox;
@@ -1079,52 +1127,6 @@ body {
}
}
.header__navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
@media (min-width: 700px) {
.header__navigation ul {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.header__navigation ul li {
margin: 0;
}
.header__navigation ul li + li {
margin-left: 5.5px;
}
.header__navigation ul li a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 0.7em 1em;
color: #8091a5;
border-radius: 3px;
}
.header__navigation ul li a.active,
.header__navigation ul li a:hover {
background: #f7f9fa;
}
.header__navigation ul li a.active {
color: #2a303a;
}
.header__navarea form {
display: -webkit-box;
display: -ms-flexbox;
@@ -1174,16 +1176,19 @@ body {
}
.footer {
margin: 22px 0;
margin-top: 22px 0;
padding-top: 22px;
border-top: 2px solid #f2f5f7;
}
.footer__upper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
min-height: 80px;
border-bottom: 2px solid #e5ebed;
}
.footer__upper > * {
@@ -1197,37 +1202,31 @@ body {
.footer__navigation {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
font-size: 0.9em;
}
.footer__navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.footer__navigation ul li {
margin: 0;
}
.footer__navigation ul li + li {
margin-left: 44px;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.footer__apps {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 700px) {
.footer__apps {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.footer__apps a {
display: inline-block;
width: 150px;
width: 138px;
}
.footer__apps a + a {
@@ -1243,12 +1242,19 @@ body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 80px;
}
.footer__disclaimer {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.7em;
color: #8091a5;
}
@@ -1257,6 +1263,22 @@ body {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 22px;
}
.footer__social a + a {
margin-left: 22px;
}
.footer__social img {
width: 24px;
height: auto;
}
.course-card {
@@ -1323,16 +1345,9 @@ body {
}
.module {
max-width: 1024px;
max-width: 980px;
margin: 0 auto;
padding: 0 2vw;
}
@media (min-width: 700px) {
.module {
padding: 0;
}
padding: 0 2vw
}
.module img {

20
views/layout.pug
View File

@@ -10,7 +10,7 @@ html
header.header
section.header__logo
a.header__logo-link(href='#')
img(src='/images/logo.png' alt='Contentful University')
img(src='/images/logo.svg' alt='Contentful Example App')
section.header__navarea
section.header__controls
form(action="" method="get")
@@ -24,7 +24,7 @@ html
select(name='locale' onChange='this.form.submit()')
option(value='en-US' selected=query.locale === 'en-US') English
option(value='de-DE' selected=query.locale === 'de-DE') German
nav.header__navigation
nav.header__navigation.main-navigation
ul
li
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
@@ -42,7 +42,7 @@ html
.wrapper
footer.footer
.footer__upper
nav.footer__navigation
nav.footer__navigation.main-navigation
ul
li
a(href=`/${queryString}` class=(currentPath === '/'? 'active' : '')) Home
@@ -54,15 +54,19 @@ html
a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings
.footer__apps
a(href='#')
img(src='/images/app-store-badge.png')
img(src='/images/badge-app-store.svg')
a(href='#')
img(src='/images/google-play-badge.png')
img(src='/images/badge-google-play.svg')
.footer__lower
.footer__disclaimer
p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
p
span This website and the materials found on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
a(href='#todo') View details.
.footer__social
p
a(href='#') FB
a(href='#') TW
a(href='https://www.facebook.com/contentful/' target='_blank')
img(src='/images/icon-facebook.svg' alt='Our Facebook profile')
a(href='https://twitter.com/contentful' target='_blank')
img(src='/images/icon-twitter.svg' alt='Our Twitter profile')
script(src='/scripts/highlight.pack.js')
script hljs.initHighlightingOnLoad();