Made about page

This commit is contained in:
2018-03-12 12:27:00 +11:00
parent eab2cb622c
commit d83894e283
17 changed files with 470 additions and 23 deletions

View File

@ -0,0 +1,47 @@
/*
* About Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-page--style-about__profile {
width: 100%;
max-width: 256px;
margin: 0 auto;
}
.c-page--style-about__blurb {
font-size: 1.25em;
max-width: 25em;
}
.c-page--style-about__language-container {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
.c-page--style-about__language {
width: 100%;
padding: 1em;
}
.c-page--style-about__language-heading,
.c-page--style-about__language-description {
text-align: center;
}
.c-page--style-about__subheading {
margin-top: 4em;
}
@include t-media-query($s-small-up) {
.c-page--style-about__language {
width: 50%;
}
}

View File

@ -6,7 +6,7 @@
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_style.scss
* styles/components/_page.scss
*
* Version:
* 1.0.0 - 2018/03/10

View File

@ -0,0 +1,12 @@
/*
* Index Page
* Styles for index page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/

View File

@ -10,15 +10,17 @@
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-body {
.c-section--style-body__inner {
background: $s-color--background-default;
padding: 1em;
}
@include t-media-query($s-small-up) {
.c-section--style-body {
margin-left: 4%;
width: 96%;
padding-left: 4%;
}
.c-section--style-body__inner {
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
}

View File

@ -0,0 +1,34 @@
/*
* Section Style Split
* Styles for split style section
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_section.scss
*
* Version:
* 1.0.0 - 2018/03/11
*/
.c-section--style-split {
@include t-flexbox();//Because we're winning a fight
@include t-flex-wrap(wrap);
}
.c-section--style-split__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-section--style-split {
@include t-flex-wrap(nowrap);
@include t-justify-content(space-around);
@include t-align-items(center);
}
.c-section--style-split__split-part {
width: auto;
}
}