Made about page
This commit is contained in:
47
public/styles/components/_page--style-about.scss
Normal file
47
public/styles/components/_page--style-about.scss
Normal 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%;
|
||||
}
|
||||
}
|
@ -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
|
||||
|
12
public/styles/components/_page--style-index.scss
Normal file
12
public/styles/components/_page--style-index.scss
Normal 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
|
||||
*/
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
34
public/styles/components/_section--style-split.scss
Normal file
34
public/styles/components/_section--style-split.scss
Normal 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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user