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

style courses listing and fix grid list

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 16:05:54 +02:00
committed by Benedikt Rötsch
parent 60d2c02ce7
commit 478633c398
11 changed files with 166 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
assets/stylesheets/course/card.css
View File

@@ -1,39 +1,56 @@
@block course-card {
display: flex;
flex-direction: column;
min-height: 30vh;
padding: var(--grid-gutter);
border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow);
& > * + * {
margin-top: var(--grid-gutter);
}
@element categories{
@element categories {
flex: 0 0 var(--line-height);
margin-bottom: var(--grid-gutter);
height: var(--line-height);
}
@element category{
@element category {
display: inline-block;
margin-right: var(--grid-gutter);
color: var(--color-text-grey);
font-size: 0.75em;
letter-spacing: 2px;
&:after {
content: '/';
display: inline-block;
padding: 0 0.3em;
}
&:last-child:after {
display: none;
}
}
@element title {
flex: 1 1 auto;
margin-bottom: 0;
flex: 0 1 12vh;
margin: 0;
overflow: hidden;
padding-bottom: var(--grid-gutter);
margin-bottom: var(--grid-gutter);
border-bottom: 1px solid var(--color-bg-separator);
font-family: var(--font-medium);
font-weight: normal;
font-size: 1.625em;
line-height: 1.38;
}
@element description-wrapper {
flex: 1 1 auto;
@element description {
flex: 0 1 20vh;
overflow: hidden;
margin: 0 0 var(--grid-gutter);
& p {
margin: 0;
}
line-height: 1.63;
color: var(--color-course-card-description);
}
@element link-wrapper {

2
assets/stylesheets/global/header.css
View File

@@ -109,7 +109,7 @@
color: inherit;
font-weight: normal;
font-family: var(--font-light);
font-family: var(--font-medium);
font-size: 0.8em;
background: transparent;

28
assets/stylesheets/global/sidebar-menu.css
View File

@@ -1,20 +1,24 @@
.sidebar-menu {
& ul {
@block sidebar-menu {
@element list {
list-style: none;
margin: var(--grid-gutter) 0;
margin: 0;
padding: 0;
}
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
@element item {
margin: 0 0 calc(var(--grid-gutter) / 4);
padding: 0;
font-size: 0.9em;
line-height: 1.8;
}
& a {
display: block;
@element link {
display: block;
color: var(--color-text-grey);
&.active {
font-weight: bold;
}
&.active {
font-family: var(--font-medium);
color: var(--color-text-default);
}
}
}

12
assets/stylesheets/layout/grid-list.css Normal file
View File

@@ -0,0 +1,12 @@
@block grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
@element item {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

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

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

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

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

13
assets/stylesheets/layout/layout-sidebar.css
View File

@@ -10,19 +10,22 @@
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
border-radius: 7px;
flex: 0 0 auto;
width: var(--layout-sidebar-sidebar-width);
border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow);
}
}
@element sidebar-header {
padding: var(--grid-gutter);
padding: 1em var(--grid-gutter);
border-bottom: 1px solid var(--color-sidebar-seperator);
}
@element sidebar-title {
font-family: var(--font-medium);
font-size: 1.25em;
font-weight: normal;
margin: 0;
}
@@ -35,9 +38,9 @@
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
flex: 1 1 auto;
flex: 0 1 auto;
width: var(--layout-sidebar-content-width);
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}

10
assets/stylesheets/variables.css
View File

@@ -3,12 +3,12 @@
:root {
--content-max-width: 980px;
--grid-gutter: 22px;
--border-radius: 3px;
--border-radius: 4px;
--line-height: 1.5em;
--font-regular: 'roboto', Helvetica, sans-serif;
--font-light: 'robotomedium', Helvetica, sans-serif;
--font-medium: 'robotomedium', Helvetica, sans-serif;
--color-palette-blue: #5c9fef;
--color-palette-blue-medium: #3c80cf;
@@ -29,8 +29,12 @@
--color-sidebar-seperator: #eeeeee;
--color-course-active: #536171;
--color-course-card-description: #536171;
--card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
--layout-sidebar-sidebar-width: 228px;
--layout-sidebar-content-width: 732px;
--card-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
--cta-color: #fff;
--cta-bg: var(--color-palette-blue);