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

split up layout and global file and clean up markup

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 15:10:24 +02:00
committed by Benedikt Rötsch
parent 090e0e332a
commit bf1e00c1e9
22 changed files with 395 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/stylesheets/course/index.css
View File

@@ -1 +1 @@
@include './card'
@import './card';

48
assets/stylesheets/global/fonts.css Executable file
View File

@@ -0,0 +1,48 @@
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
url('/fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
url('/fonts/roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
url('/fonts/roboto-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'roboto';
src: url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
url('/fonts/roboto-bolditalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'robotomedium';
src: url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
url('/fonts/roboto-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotomedium';
src: url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
url('/fonts/roboto-mediumitalic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}

107
assets/stylesheets/global/index.css
View File

@@ -1,7 +1,10 @@
@import './layout';
@import './header';
@import './footer';
@import './table-of-contents';
@import './sidebar-menu';
@import './main-navigation';
body {
background-color: var(--color-bg-default);
color: var(--color-text-default);
@@ -24,105 +27,3 @@ body {
#main__footer {
flex: 0 0 auto;
}
.table-of-contents {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
padding-left: calc(var(--grid-gutter) * 2);
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
position: relative;
font-weight: bold;
&:before,
&:after {
position: absolute;
top: 0;
}
&:before {
content: '';
left: calc(var(--grid-gutter) * 3 * -1);
bottom: 0;
width: 3px;
background: var(--color-course-active);
}
&:after {
content: '👁';
left: calc(var(--grid-gutter) * 2 * -1);
}
}
}
}
}
.sidebar-menu {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
font-weight: bold;
}
}
}
}
@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);
}
}
}
}
}

65
assets/stylesheets/global/layout.css
View File

@@ -1,65 +0,0 @@
.wrapper {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
}
@block wrapper-with-sidebar {
@media (--breakpoint-desktop) {
display: flex;
align-items: flex-start;
}
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
padding: var(--grid-gutter);
border-radius: 7px;
box-shadow: var(--card-box-shadow);
& > h2 {
margin-bottom: calc(var(--grid-gutter) * 3);
}
}
}
@element content {
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

40
assets/stylesheets/global/main-navigation.css Normal file
View File

@@ -0,0 +1,40 @@
@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);
}
}
}
}
}

20
assets/stylesheets/global/sidebar-menu.css Normal file
View File

@@ -0,0 +1,20 @@
.sidebar-menu {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
font-weight: bold;
}
}
}
}

39
assets/stylesheets/global/table-of-contents.css Normal file
View File

@@ -0,0 +1,39 @@
.table-of-contents {
& ul {
list-style: none;
margin: var(--grid-gutter) 0;
padding: 0;
padding-left: calc(var(--grid-gutter) * 2);
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
& a {
display: block;
&.active {
position: relative;
font-weight: bold;
&:before,
&:after {
position: absolute;
top: 0;
}
&:before {
content: '';
left: calc(var(--grid-gutter) * 3 * -1);
bottom: 0;
width: 3px;
background: var(--color-course-active);
}
&:after {
content: '👁';
left: calc(var(--grid-gutter) * 2 * -1);
}
}
}
}
}

29
assets/stylesheets/layout/grid-lists.css Normal file
View File

@@ -0,0 +1,29 @@
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

3
assets/stylesheets/layout/index.css Normal file
View File

@@ -0,0 +1,3 @@
@import 'layout-centered';
@import 'layout-sidebar';
@import 'grid-lists';

5
assets/stylesheets/layout/layout-centered.css Normal file
View File

@@ -0,0 +1,5 @@
@block layout-centered {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 2vw;
}

43
assets/stylesheets/layout/layout-sidebar.css Normal file
View File

@@ -0,0 +1,43 @@
@block layout-sidebar {
padding: 0 2vw;
max-width: var(--content-max-width);
margin: 0 auto;
@media (--breakpoint-desktop) {
display: flex;
align-items: flex-start;
}
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
border-radius: 7px;
box-shadow: var(--card-box-shadow);
}
}
@element sidebar-header {
padding: var(--grid-gutter);
border-bottom: 1px solid var(--color-sidebar-seperator);
}
@element sidebar-title {
font-size: 1.25em;
margin: 0;
}
@element sidebar-content {
background: var(--color-sidebar-bg);
padding: var(--grid-gutter);
}
@element content {
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}

2
assets/stylesheets/style.css
View File

@@ -4,6 +4,8 @@
@import './base';
@import './layout';
@import './global';
@import './hljs-github';

3
assets/stylesheets/variables.css
View File

@@ -14,7 +14,7 @@
--color-palette-blue-medium: #3c80cf;
--color-palette-blue-dark: #3072be;
--color-text-default: #2a303a;
--color-text-default: #2a3039;
--color-text-grey: #8091a5;
--color-text-dark-bg: #fff;
--color-text-dark-bg-grey: #a9b9c0;
@@ -26,6 +26,7 @@
--color-bg-separator: #e5ebed;
--color-sidebar-bg: #f7f9fa;
--color-sidebar-seperator: #eeeeee;
--color-course-active: #536171;