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

center settings page and fix text colors

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-05 09:34:18 +02:00
committed by Benedikt Rötsch
parent d2493528ae
commit 17b52868e2
5 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/stylesheets/base/typography.css
View File

@@ -1,4 +1,9 @@
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: 'robotomedium', 'Arial Black', sans-serif;
font-weight: normal;
line-height: 1.31;
color: var(--color-text-headlines);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }

8
assets/stylesheets/layout/layout-centered.css
View File

@@ -1,5 +1,13 @@
@block layout-centered { @block layout-centered {
width: 100%;
max-width: var(--content-max-width); max-width: var(--content-max-width);
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;
} }
@block layout-centered-small {
width: 100%;
max-width: calc(var(--content-max-width) - 360px);
margin: 0 auto;
padding: 0 2vw;
}

3
assets/stylesheets/variables.css
View File

@@ -15,7 +15,8 @@
--color-palette-blue-dark: #3072be; --color-palette-blue-dark: #3072be;
--color-palette-red: #cd3f39; --color-palette-red: #cd3f39;
--color-text-default: #2a3039; --color-text-default: #536171;
--color-text-headlines: #2a3039;
--color-text-grey: #8091a5; --color-text-grey: #8091a5;
--color-text-dark-bg: #fff; --color-text-dark-bg: #fff;
--color-text-dark-bg-grey: #a9b9c0; --color-text-dark-bg-grey: #a9b9c0;

23
public/stylesheets/style.css
View File

@@ -498,6 +498,13 @@ template {
font-style: italic; font-style: italic;
} }
h1, h2, h3, h4, h5, h6 {
font-family: 'robotomedium', 'Arial Black', sans-serif;
font-weight: normal;
line-height: 1.31;
color: #2a3039
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0; margin-top: 0;
} }
@@ -821,11 +828,19 @@ input[type="reset"]:focus,
} }
.layout-centered { .layout-centered {
width: 100%;
max-width: 980px; max-width: 980px;
margin: 0 auto; margin: 0 auto;
padding: 0 2vw; padding: 0 2vw;
} }
.layout-centered-small {
width: 100%;
max-width: 620px;
margin: 0 auto;
padding: 0 2vw;
}
.layout-sidebar { .layout-sidebar {
padding: 0 2vw; padding: 0 2vw;
max-width: 980px; max-width: 980px;
@@ -1260,7 +1275,7 @@ display: flex;
.table-of-contents__link:hover, .table-of-contents__link:hover,
.table-of-contents__link.active { .table-of-contents__link.active {
font-family: 'robotomedium', Helvetica, sans-serif; font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039; color: #536171;
} }
.table-of-contents__link.active { .table-of-contents__link.active {
@@ -1326,7 +1341,7 @@ display: flex;
.sidebar-menu__link.active { .sidebar-menu__link.active {
font-family: 'robotomedium', Helvetica, sans-serif; font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039; color: #536171;
} }
.main-navigation ul { .main-navigation ul {
@@ -1375,12 +1390,12 @@ display: flex;
} }
.main-navigation ul li a.active { .main-navigation ul li a.active {
color: #2a3039; color: #536171;
} }
body { body {
background-color: #fff; background-color: #fff;
color: #2a3039; color: #536171;
font-family: 'roboto', Helvetica, sans-serif; font-family: 'roboto', Helvetica, sans-serif;
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;

2
views/settings.pug
View File

@@ -1,7 +1,7 @@
extends layout extends layout
block content block content
.layout-centered .layout-centered-small
h1= title h1= title
p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token. p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token.