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

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);
}
}
}
}
}