YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reset, reset

Browse Source
This commit is contained in:
Dominic Masters
2018-04-28 17:13:56 +10:00
parent 63d1e21b9a
commit 5eb4d7ee4f
124 changed files with 0 additions and 5899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/styles/components/_app.scss
View File

@ -1,24 +0,0 @@
/*
* App
* Styles for the App itself
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-app__wrapper {
min-height: 100vh;
width: 100%;
}
.c-app {
width: 100%;
height: 100%;
min-height: 100vh;
overflow-x: hidden;
position: relative;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
@include t-flex-flow(column);
}

44
public/styles/components/_background-layer.scss
View File

@ -1,44 +0,0 @@
/*
* Background Layer
* Styles for the background layer component.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/21
*/
$starSize: 1024px;
$starTime: 4s;
$starSizeMobile: 0.5;
$starTimeMobile: $starTime / $starSizeMobile;
.c-background-layers {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
&__wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
perspective: 0px;
}
.c-background-layer {
width: 100%;
background-repeat: repeat;
position: fixed;
top: 0;
left: 0;
@for $i from 0 through 3 {
&--stars-#{$i} {
height: 200% + (50% * $i);
background-image: url('./../images/stars#{$i}.png');
}
}
}

59
public/styles/components/_footer.scss
View File

@ -1,59 +0,0 @@
/*
* Footer
* Styles for footer element
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/03/03
*/
$c-footer--text-color: $s-color--text;
$c-footer--background-color: $s-color--background-default;
$c-footer--z-index: 10;//Should render over most if not all body elements
.c-footer {
width: 100%;
background: $c-footer--background-color;
@extend %t-flexbox;
@include t-flex-wrap(wrap);
z-index: $c-footer--z-index;
}
.c-footer__copyright {
color: $c-footer--text-color;
}
.c-footer__copyright,
.c-footer__links {
width: 100%;
text-align: center;
padding: 1em;
}
.c-footer__link {
display: block;
}
@include t-media-query($s-small-up) {
.c-footer {
@include t-flex-wrap(nowrap);
}
.c-footer__copyright {
text-align: left;
}
.c-footer__links {
text-align: right;
}
.c-footer__link {
display: inline;
+ #{&}:before {
content: " | ";
}
}
}

36
public/styles/components/_form.scss
View File

@ -1,36 +0,0 @@
/*
* Form
* Styles for form elements
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/07
*/;
$c-form--shadow-offset: 5px;
.c-form {
}
.c-form__label {
display: block;
padding-bottom: 0.25em;
}
.c-form__group {
margin-bottom: 1.5em;
}
//Form input
.c-form-input {
width: 400px;
max-width: 100%;
border: $s-color--border--default;
padding: 0.5em;
@include t-box-shadow(-$c-form--shadow-offset, $c-form--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
}
.c-form-input--multiline {
min-height: 10em;
max-width: 100%;
}

12
public/styles/components/_header.scss
View File

@ -1,12 +0,0 @@
/*
* Header
* Styles for header element
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
.c-header {
position: relative;
}

116
public/styles/components/_menu.scss
View File

@ -1,116 +0,0 @@
/*
* Menu
* Styles for the menu
*
* Dependencies:
* styles/settings/animation.scss
* styles/settings/responsive.scss
* styles/tools/_mixin.absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/03/04
*/
$c-menu--z-index: 1000;
$c-menu--button--z-index: $c-menu--z-index + 10;
$c-menu--list--z-index: $c-menu--z-index + 20;
body.is-menu-open {
overflow: hidden;
}
.c-menu__wrapper {
position: relative;
}
.c-menu__button {
font-size: 1.5em;
padding: 0.5em 0.75em;
position: relative;
z-index: $c-menu--button--z-index;
}
.c-menu {
position: absolute;
top: 50%;
left: 50%;
border-left: 1px solid red;
}
.c-menu__fix {
position: relative;
}
.c-menu__container {
@extend %t-absolute-center-x-y;
width: 0px;
height: 0px;
border-radius: 50%;
z-index: $c-menu--z-index;
background: white;
overflow: hidden;
transition:
width 0.2s $s-animation--ease-out-curve,
height 0.2s $s-animation--ease-out-curve,
;
&.open {
width: 250vmax;
height: 250vmax;
}
}
.c-menu__body {
position: absolute;
top: 50%;
left: 50%;
z-index: $c-menu--list--z-index;
}
.c-menu__groups {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
/*position: absolute;
left: 2em;
top: -1.5em;*/
top: 0l;
width: 100vw;
height: 100vh;
position: fixed;
overflow-y: auto;
}
.c-menu__group {
padding: 1em;
width: 100%;
}
.c-menu__group-title {
}
.c-menu__item {
display: block;
padding: 0.25em 0;
}
@include t-media-query($s-xsmall-up) {
.c-menu__button {
padding: 0.75em 1em;
}
.c-menu__group {
width: 50%;
}
}
@include t-media-query($s-medium-up) {
.c-menu__group {
width: (100% / 3);
}
}
@include t-media-query($s-large-up) {
.c-menu__group {
width: 25%;
}
}

92
public/styles/components/_navbar.scss
View File

@ -1,92 +0,0 @@
/*
* Navbar
* Styles for Navbar
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss
* styles/tools/_box-shadow.scss
* styles/tools/_flex.scss
* styles/tools/_responsive.scss
* styles/tools/_transform.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
$c-navbar--z-index: 100;
$c-navbar--background: $s-color--background-default;
$c-navbar--link-offset: 5px;
.c-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: $c-navbar--background;
z-index: $c-navbar--z-index;
@extend %t-flexbox;
}
//Logo
.c-navbar__logo-container {
@include t-align-self(center);
width: 12.5em;
}
.c-navbar__logo {
width: 100%;
height: 100%;
}
//Links
.c-navbar__links {
width: 100%;
text-align: right;
display: none;
@include t-justify-content(flex-end);
}
.c-navbar__link {
@extend %s-font--navigation;
font-size: 1.2em;
padding: 0 1.5em;
@extend %t-inline-flex;
@include t-align-items(center);
&.active {
border-bottom: $s-thickness--border-thick solid $s-color--links;
}
}
.c-navbar__link-text {
//vertical-align: middle;
}
@include t-media-query($s-small-up) {
.c-navbar {
width: 90%;
top: 1em;
left: 1em;
@include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
}
.c-navbar__links {
@include t-flexbox;
}
.c-navbar__link {
background: $s-color--background-default;
transition: all 0.2s $s-animation--ease-out-curve;
margin-left: $c-navbar--link-offset;
@include t-translate(0em, 0em);
@include t-box-shadow(0px, 0px, 0px, rgba(0, 0, 0, 0.5));
&:hover {
@include t-translate($c-navbar--link-offset, -$c-navbar--link-offset);
@include t-box-shadow(-$c-navbar--link-offset, $c-navbar--link-offset, 0px, rgba(0, 0, 0, 0.5));
}
}
}

73
public/styles/components/_page--style-about.scss
View File

@ -1,73 +0,0 @@
/*
* 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
*/
//Body Section Margin
.c-about-page__body-section {
margin-bottom: 3em;
}
//About Section
.c-page--style-about__bio-section {
margin-bottom: 5em;
}
.c-page--style-about {
}
.c-page--style-about__profile-container {
}
.c-window--style-about {
max-width: 25em;
margin: 0 auto;
display: block;
width: 90%;
}
.c-page--style-about__profile {
width: 100%;
max-width: 256px;
margin: 0 auto;
}
.c-page--style-about__blurb {
font-size: 1.25em;
}
.c-page--style-about__profile-container {
text-align: center;
}
//Window adjustments for about section
.c-page--style-about__window {
display: block;
width: 90%;
margin: 0 auto;
}
.c-page--style-about__window-text {
width: 100%;
resize: none;
}
//Media queries
@include t-media-query($s-small-up) {
.c-page--style-about__blurb {
}
.c-page--style-about__window-container {
width: 50%;
}
.c-page--style-about__window {
width: 50%;
}
}

35
public/styles/components/_page--style-contact.scss
View File

@ -1,35 +0,0 @@
/*
* Contact Page
* Styles for page elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_repsonsive.scss
* styles/tools/_flex.scss
* styles/components/_page.scss
*
* Version:
* 1.0.0 - 2018/03/10
*/
.c-page--style-contact {
}
.c-page--style-container__split {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
.c-page--style-container__split-part {
width: 100%;
}
@include t-media-query($s-small-up) {
.c-page--style-container__split {
@include t-flex-wrap(nowrap);
}
.c-page--style-container__split-part {
width: 50%;
}
}

12
public/styles/components/_page--style-index.scss
View File

@ -1,12 +0,0 @@
/*
* 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
*/

25
public/styles/components/_page.scss
View File

@ -1,25 +0,0 @@
/*
* Page
* Styles for page elements
*
* Dependencies:
* styles/settings/colors.scss - Used for colors
* styles/tools/_gradients.scss - Used for background gradients.
*
* Version:
* 1.0.0 - 2018/02/24
*/
.c-page {
min-height: 100%;
@include t-flex-grow(1);
@include t-gradient-directional($s-color--background-bottom, $s-color--background-top, 45deg);
padding-bottom: 5em;
//background-attachment: fixed;
//background-color: #000019;
//background-image: url('./../images/space.png');
//background-repeat: repeat-x;
//background-position: center bottom;
//background-size: (16px / 1) (384px / 1);
}

27
public/styles/components/_scene-component.scss
View File

@ -1,27 +0,0 @@
/*
* Scene Component
* Styles for THREE JS Scene elements.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/08
*/
.c-scene-component {
position: relative;
width: 100%;
height: 100%;
}
.c-scene-component__canvas-space {
width: 100%;
height: 100%;
}
.c-scene-component__canvas {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

12
public/styles/components/_section--style-blank-promo.scss
View File

@ -1,12 +0,0 @@
/*
* Blank Promo Section Style
* Styles for blank promo style section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-blank-promo {
height: 30vmin;
}

26
public/styles/components/_section--style-body.scss
View File

@ -1,26 +0,0 @@
/*
* Section Body Style
* Styles for body style section
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section--style-body__inner {
background: $s-color--background-default;
}
.c-body-section__wrapper {
padding: 1em;
}
@include t-media-query($s-small-up) {
.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
View File

@ -1,34 +0,0 @@
/*
* 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;
}
}

29
public/styles/components/_section--style-title.scss
View File

@ -1,29 +0,0 @@
/*
* Section Title Style
* Styles for title section
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/04/06
*/
$c-section--style-title__title-z-index: 5;
.c-section--style-title {
padding-top: 30vmin;
padding-bottom: 20vmin;
padding-left: 1em;
position: relative;
}
.c-section--style-title__model-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-section--style-title__title {
position: relative;
z-index: $c-section--style-title__title-z-index;
}

23
public/styles/components/_section.scss
View File

@ -1,23 +0,0 @@
/*
* Section
* Styles for section elements
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/02/28
*/
.c-section {
width: 100%;
display: block;
max-width: $s-layout--page-max;
z-index: 1;
position:relative;
margin: 0 auto;
}
.c-section--full-width {
max-width: none;
}

206
public/styles/components/_w95.scss
View File

@ -1,206 +0,0 @@
@import './w95/settings.scss';
@import './w95/_mixins.scss';
@import './w95/_window.scss';
@import './w95/_title-bar.scss';
@import './w95/_window-button.scss';
@import './w95/_text-field.scss';
@import './w95/_window-menu.scss';
/*$windowBG: #C0C0C0;
$highlight: #0000BF;
$disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$imageScale: 1;
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $imageScale)+'x/95button_icons.png');
background-color: $windowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $imageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $windowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
> .load_me_stuff {
position: fixed;
left: -1000vmax;
top: -1000vmax;
border-image-source: url('./../images/95/'+($scale * $imageScale)+'x/95button_inverted.png');
}
> .title {
width: 100%;
color: white;
background: #000080;
padding: 2px * $scale;
font-weight: bold;
margin-bottom: 1px * $scale;
> .icon {
}
> .buttons {
height: 100%;
float: right;
font-size: 0;
> .btn {
@include button95($scale);
width: 16px*$scale;
height: 14px*$scale;
font-size: 12px*$scale;
&.close {
margin-left: 2px*$scale;
background-position-x: 0px*$scale;
}
&.help {
background-position-x: 36px*$scale;
}
&.minimize {
background-position-x: 24px*$scale;
}
&.maximize {
background-position-x: 12px*$scale;
}
}
}
}
> .context-menu {
width: 100%;
overflow: visible;
> .btn {
padding: (1px*$scale) (5px*$scale);
border: 1px*$scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .menu {
display: block;
}
}
&.disabled {
color: $disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
> .menu {
@include border95($scale);
border-top-width: 2px*$scale;
position: absolute;
display: none;
background: $windowBG;
left: -1px*$scale;
margin-top: 2px*$scale;
width: auto;
> .menu-option {
padding-left: 22px*$scale;
padding-right: 22px*$scale;
padding-bottom: 3px*$scale;
padding-top: 1px*$scale;
white-space: nowrap;
&:hover {
background: $highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $disabled;
&:hover {background: inherit;color: $disabled;}
}
}
}
}
}
&.inactive {
> .title {
background-color: $disabled;
}
}
> .textarea {
@include frame95($scale);
background: white;
color: black;
cursor: text;
}
}
.window {
@include window95(2);
}
*/

52
public/styles/components/w95/_mixins.scss
View File

@ -1,52 +0,0 @@
@mixin border95($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95window.png');
border-image-slice: 3 * $thickness;
}
@mixin button95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
border-image-slice: 2 * $thickness;
display: inline-block;
color: black;
background-image: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_icons.png');
background-color: $w95WindowBG;
background-position: 0px 0px;
background-size: 48px*$thickness 20px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button_inverted.png');
}
&.disabled {
background-position-y: 10px*$thickness;
&:active {
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95button.png');
}
}
}
@mixin frame95($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/95/'+($thickness * $w95ImageScale)+'x/95frame.png');
border-image-slice: 2 * $thickness;
}
@mixin window95($scale) {
@extend %no-select;
@include border95($scale);
background: $w95WindowBG;
font-family: $w95Font;
font-size: 12px*$scale;
display: inline-block;
&.inactive {
> .title {
background-color: $w95Disabled;
}
}
}

6
public/styles/components/w95/_text-field.scss
View File

@ -1,6 +0,0 @@
.c-text-field {
@include frame95($w95Scale);
background: white;
color: black;
cursor: text;
}

8
public/styles/components/w95/_title-bar.scss
View File

@ -1,8 +0,0 @@
.c-title-bar {
width: 100%;
color: white;
background: #000080;
padding: 2px * $w95Scale;
font-weight: bold;
margin-bottom: 1px * $w95Scale;
}

29
public/styles/components/w95/_window-button.scss
View File

@ -1,29 +0,0 @@
.c-window-buttons {
height: 100%;
float: right;
font-size: 0;
}
.c-window-btn {
@include button95($w95Scale);
width: 16px*$w95Scale;
height: 14px*$w95Scale;
font-size: 12px*$w95Scale;
&.close {
margin-left: 2px*$w95Scale;
background-position-x: 0px*$w95Scale;
}
&.help {
background-position-x: 36px*$w95Scale;
}
&.minimize {
background-position-x: 24px*$w95Scale;
}
&.maximize {
background-position-x: 12px*$w95Scale;
}
}

78
public/styles/components/w95/_window-menu.scss
View File

@ -1,78 +0,0 @@
.c-context-menu {
width: 100%;
overflow: visible;
}
.c-context-menu__btn {
padding: (1px*$w95Scale) (5px*$w95Scale);
border: 1px*$w95Scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
&:hover {
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&.active {
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
> .c-context-menu__menu {
display: block;
}
}
&.disabled {
color: $w95Disabled;
&:hover,.active {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
}
.c-context-menu__menu {
@include border95($w95Scale);
border-top-width: 2px*$w95Scale;
position: absolute;
display: none;
background: $w95WindowBG;
left: -1px*$w95Scale;
margin-top: 2px*$w95Scale;
width: auto;
}
.c-context-menu__menu-option {
padding-left: 22px*$w95Scale;
padding-right: 22px*$w95Scale;
padding-bottom: 3px*$w95Scale;
padding-top: 1px*$w95Scale;
white-space: nowrap;
&:hover {
background: $w95Highlight;
color: white;
}
&:first-child {font-weight: bold;}
&::first-letter {
text-decoration: underline;
}
&.disabled {
color: $w95Disabled;
&:hover {background: inherit;color: $w95Disabled;}
}
}

3
public/styles/components/w95/_window.scss
View File

@ -1,3 +0,0 @@
.c-window {
@include window95($w95Scale);
}

7
public/styles/components/w95/settings.scss
View File

@ -1,7 +0,0 @@
$w95WindowBG: #C0C0C0;
$w95Highlight: #0000BF;
$w95Disabled: #808080;
$w95Font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$w95ImageScale: 1;
$w95Scale: 2;

19
public/styles/elements/_a.scss
View File

@ -1,19 +0,0 @@
/*
* A
* Base A/Anchor Seettings
*
* Dependencies:
* styles/settings/colors.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
a {
text-decoration: none;
color: $s-color--links
}
a:hover {
text-decoration: underline;
color: $s-color--links-hover;
}

12
public/styles/elements/_all.scss
View File

@ -1,12 +0,0 @@
/*
* All
* Base * Seettings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
* {
box-sizing: border-box;
}

15
public/styles/elements/_body.scss
View File

@ -1,15 +0,0 @@
/*
* Body
* Base Body Seettings
*
* Dependencies:
* styles/settings/typography.scss - Used for fonts
*
* Version:
* 1.0.0 - 2018/02/23
*/
body {
font-family: $s-font--stack-default;
font-size: $s-font--size--base;
min-height: 100%;
}

16
public/styles/elements/_button.scss
View File

@ -1,16 +0,0 @@
/*
* Button
* Styles for Buttons
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
button {
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}

25
public/styles/elements/_dt.scss
View File

@ -1,25 +0,0 @@
/*
* DT, DL, DD
* Base Definition List Settings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
dt {
font-weight: bold;
}
dl {
}
dd {
margin-left: 2em;
}
dt ~ dt,
dl ~ dt {
margin-top: 1em;
}

13
public/styles/elements/_headings.scss
View File

@ -1,13 +0,0 @@
/*
* Headings
* Styles for headings 1 through 6
*
* Dependencies:
* styles/settings/typography`.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
h1,h2,h3,h4,h5,h6 {
font-family: $s-font--stack-headings;
}

13
public/styles/elements/_html.scss
View File

@ -1,13 +0,0 @@
/*
* HTML
* Base HTML Settings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
html {
width: 100%;
min-height: 100%;
}

11
public/styles/elements/_p.scss
View File

@ -1,11 +0,0 @@
/*
* P
* Base P/Paragraph Seettings
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/11
*/
p {
}

10
public/styles/elements/_table.scss
View File

@ -1,10 +0,0 @@
/*
* Table Element Styles
* Styles for body style section
*
* Version:
* 1.0.0 - 2018/03/02
*/
table {
width: 100%;
}

73
public/styles/index.scss
View File

@ -1,73 +0,0 @@
@charset "UTF-8";
/*
* domsPlace Styles
* Copyright 2018 Dominic "YouWish" Masters
*
* Version:
* 0.0.1 - 2018/03/03
*/
//Settings
@import './settings/animation.scss';
@import './settings/colors.scss';
@import './settings/layout.scss';
@import './settings/responsive.scss';
@import './settings/typography.scss';
//Tools
@import './tools/prefix.scss';
@import './tools/_box-shadow.scss';
@import './tools/_flex.scss';
@import './tools/_gradients.scss';
@import './tools/_responsive.scss';
@import './tools/_text-selection.scss';
@import './tools/_transform.scss';
@import './tools/_mixin.absolute-centering.scss';
//Resets
@import './../../node_modules/normalize.css/normalize.css';
//Elements
@import './elements/_all.scss';
@import './elements/_a.scss';
@import './elements/_body.scss';
@import './elements/_button.scss';
@import './elements/_dt.scss';
@import './elements/_headings.scss';
@import './elements/_html.scss';
@import './elements/_p.scss';
@import './elements/_table.scss';
//Objects
@import './objects/_button.scss';
@import './objects/_skill-box.scss';
@import './objects/_video-title.scss';
//Components
@import './components/_app.scss';
@import './components/_background-layer';
@import './components/_footer.scss';
@import './components/_form.scss';
@import './components/_header.scss';
@import './components/_menu.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_scene-component.scss';
@import './components/_section.scss';
@import './components/_section--style-blank-promo.scss';
@import './components/_section--style-body.scss';
@import './components/_section--style-split.scss';
@import './components/_section--style-title.scss';
@import './components/_w95.scss';
@import './components/_page--style-about.scss';
@import './components/_page--style-contact.scss';
@import './components/_page--style-index.scss';
//Utilities
//Vendor
@import './vendor/fonts.scss';
//Trumps

35
public/styles/objects/_button.scss
View File

@ -1,35 +0,0 @@
/*
* Form
* Styles for form elements
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/07
*/
$c-button--shadow-offset: 5px;
$c-button--background: white;
$c-button--border: $s-color--border--default;
$c-button--text: $s-color--text;
.o-button {
display: inline-block;
padding: 0.5em 1em;
border: $c-button--border;
@include t-box-shadow(-$c-button--shadow-offset, $c-button--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
background: $c-button--background;
text-decoration: none;
color: $c-button--text;
transition: all 0.1s $s-animation--ease-out-curve;
&:hover {
text-decoration: none;
color: $c-button--text;
@include t-box-shadow(-0, 0, 0px, rgba(0, 0, 0, 0.5));
@include t-transform(translate(-$c-button--shadow-offset, $c-button--shadow-offset))
}
~ .o-button {
margin-left: $c-button--shadow-offset * 2;
}
}

29
public/styles/objects/_skill-box.scss
View File

@ -1,29 +0,0 @@
/*
* Skill Box
* Little skill box.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/03/18
*/
.o-skill-box {
width: 100%;
padding: 2em 1em;
}
.o-skill-box__heading,
.o-skill-box__description {
text-align: center;
}
.o-skill-box__container {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
}
@include t-media-query($s-small-up) {
.o-skill-box {
width: 50%;
}
}

47
public/styles/objects/_video-title.scss
View File

@ -1,47 +0,0 @@
/*
* Video Title
* Video title.
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
* styles/tools/_mixin.absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/03/18
*/
.o-video-title {
width: 100%;
position: relative;
line-height: 0;
display: block;
}
.o-video-title__video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.o-video-title__heading {
color: white;
z-index: 10;
position: relative;
margin: 0;
padding: 2em 0.5em;
font-size: 2em;
}
@include t-media-query($s-xsmall-up) {
.o-video-title__video {
position: relative;
}
.o-video-title__heading {
@include t-absolute-center-y();
left: 5%;
padding: 0;
}
}

18
public/styles/settings/animation.scss
View File

@ -1,18 +0,0 @@
/*
* Animation
* Animation settings.
*
* Version:
* 1.0.0 - 2018/02/23
*/
$s-animation--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$s-animation--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$s-animation--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
$s-animation--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
$s-animation--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$s-animation--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
$s-animation--ease-in-out-curve: $s-animation--ease-in-out-quart;
$s-animation--ease-in-curve: $s-animation--ease-in-quart;
$s-animation--ease-out-curve: $s-animation--ease-out-quart;

24
public/styles/settings/colors.scss
View File

@ -1,24 +0,0 @@
/*
* Color Settings
* Provides settings for colors
*
* Dependencies:
*
* Version:
* 1.1.0 - 2018/02/23
*/
//Fonts
$s-color--text: black;
$s-color--links: #FC78DE;
$s-color--links-hover: $s-color--links;
//Backgrounds
$s-color--background-default: #FEFCF8;
$s-color--background-top: #F9F;
$s-color--background-bottom: #BEF;
//Borders
$s-thickness--border-default: 1px;
$s-thickness--border-thick: 3px;
$s-color--border--default: $s-thickness--border-default solid #DDD;

10
public/styles/settings/layout.scss
View File

@ -1,10 +0,0 @@
/*
* Layout Settings
* Provides settings for layouts
*
* Dependencies:
*
* Version:
* 1.0.1 - 2018/02/24
*/
$s-layout--page-max: 1200px;

43
public/styles/settings/responsive.scss
View File

@ -1,43 +0,0 @@
/*
* Responsive Settings
* Provides settings for responsive tools
*
* Dependencies:
*
* Version:
* 1.0.1 - 2018/02/23
*/
//Pixel size definitions
$s-screen-xsmall: 500px;
$s-screen-small: 750px;
$s-screen-medium: 1000px;
$s-screen-large: 1250px;
$s-screen-xlarge: 1500px;
//Size definitions
$s-xsmall: 'xsmall';
$s-small: 'small';
$s-medium: 'medium';
$s-large: 'large';
$s-xlarge: 'xlarge';
//Groups
$s-xsmall-up: 'xsmall-up';
$s-small-up: 'small-up';
$s-medium-up: 'medium-up';
$s-large-up: 'large-up';
//Breakpoints
$s-breakpoints: (
$s-xsmall '(max-width: #{$s-screen-small - 1})',
$s-small '(min-width: #{$s-screen-small}) and (max-width: #{$s-screen-medium - 1})',
$s-medium '(min-width: #{$s-screen-medium}) and (max-width: #{$s-screen-large - 1})',
$s-large '(min-width: #{$s-screen-large}) and (max-width: #{$s-screen-xlarge - 1})',
$s-xlarge '(min-width: #{$s-screen-xlarge})',
$s-xsmall-up '(min-width: #{$s-screen-xsmall})',
$s-small-up '(min-width: #{$s-screen-small})',
$s-medium-up '(min-width: #{$s-screen-medium})',
$s-large-up '(min-width: #{$s-screen-large})'
);

16
public/styles/settings/typography.scss
View File

@ -1,16 +0,0 @@
/*
* Typography Settings
* Provides the type variables for use throughout the theme
*
* Version:
* 1.0.0 - 2018/02/23
*/
$s-font--stack-default: Arial, Helvetica, sans-serif;
$s-font--stack-headings: 'Bitter', serif;
$s-font--size--base: 16px;
%s-font--navigation {
font-family: $s-font--stack-headings;
}

20
public/styles/tools/_box-shadow.scss
View File

@ -1,20 +0,0 @@
/*
* Box-Shadow
* Box shadow tools
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/02/23
*/
@mixin t-box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
box-shadow:inset $top $left $blur $color;
} @else {
-webkit-box-shadow: $top $left $blur $color;
-moz-box-shadow: $top $left $blur $color;
box-shadow: $top $left $blur $color;
}
}

159
public/styles/tools/_flex.scss
View File

@ -1,159 +0,0 @@
/*
* Flex
* Used to simplify the flexbox and it's styles
*
* Many of these mixins were taken from mastastealth/sass-flex-mixin:
* https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
//Flex/Flexbox
@mixin t-flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
%t-flexbox {
@include t-flexbox;
}
//Inline Flex/Inline Flexbox
@mixin t-inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%t-inline-flex {
@include t-inline-flex;
}
//Align-items
@mixin t-align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
//Align-self
@mixin t-align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
//Align content
@mixin t-align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
//Justify Content
@mixin t-justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: distribute;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
//Wrapping
@mixin t-flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
//Flowing
@mixin t-flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
//t-flex-direction
@mixin t-flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
//Flex Grow
@mixin t-flex-grow($int: 0) {
-webkit-box-flex: $int;
-webkit-flex-grow: $int;
-moz-flex-grow: $int;
-ms-flex-positive: $int;
flex-grow: $int;
}

13
public/styles/tools/_gradients.scss
View File

@ -1,13 +0,0 @@
/*
* Gradients
* Various cross browser gradients
*
* Version:
* 1.0.0 - 2018/02/23
*/
@mixin t-gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}

40
public/styles/tools/_mixin.absolute-centering.scss
View File

@ -1,40 +0,0 @@
/*
* Absolute Position Centering
* Provides mixins to center using absolute positioning and transforms
*
* Dependencies:
* tools/_mixin.transform.scss
*
* Version:
* 1.0.0 - 2018/01/29
*/
@mixin t-absolute-center-x-y() {
position: absolute;
left: 50%;
top: 50%;
@include t-translate(-50%, -50%);
}
@mixin t-absolute-center-x() {
position: absolute;
left: 50%;
@include t-translate-x(-50%);
}
@mixin t-absolute-center-y() {
position: absolute;
top: 50%;
@include t-translate-y(-50%);
}
%t-absolute-center-x-y {
@include t-absolute-center-x-y();
}
%t-absolute-center-x {
@include t-absolute-center-x();
}
%t-absolute-center-y {
@include t-absolute-center-y();
}

31
public/styles/tools/_responsive.scss
View File

@ -1,31 +0,0 @@
/*
* Responsive Tools
* Responsive tools
*
* Dependencies:
* styles/settings/responsive.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
@mixin t-media-query($media-query) {
$breakpoint-found: false;
@each $breakpoint in $s-breakpoints {
$name: nth($breakpoint, 1);
$declaration: nth($breakpoint, 2);
@if $media-query == $name and $declaration {
$breakpoint-found: true;
@media only screen and #{$declaration} {
@content;
}
}
}
@if $breakpoint-found == false {
@warn 'Breakpoint "#{$media-query}" does not exist';
}
}

14
public/styles/tools/_text-selection.scss
View File

@ -1,14 +0,0 @@
/*
* Text Selection
* Various text selection tools.
*
* Dependencies:
* styles/tools/prefix.scss
*
* Version:
* 1.0.0 - 2018/02/23
*/
%no-select {
@include t-prefix-property(user-select, none, webkit khtml moz ms spec);
-webkit-touch-callout: none; /* iOS Safari */
}

34
public/styles/tools/_transform.scss
View File

@ -1,34 +0,0 @@
/*
* Transform Mixins
* Provides mixins for transforms
*
* Dependencies:
* styles/tools/mixin.prefix.scss - Used to prefix browser support
*
* Version:
* 1.0.0 - 2018/02/23
*/
@mixin t-transform($transforms) {
@include t-prefix-property(transform, $transforms, moz o ms webkit spec);
}
@mixin t-translate($x, $y) {
@include t-transform(translate($x, $y));
}
@mixin t-translate-x($x) {
@include t-transform(translateX($x));
}
@mixin t-translate-y($y) {
@include t-transform(translateY($y));
}
@mixin t-scale($amt) {
@include t-transform(scale($amt));
}
@mixin t-rotate($amt) {
@include t-transform(rotate($amt));
}

42
public/styles/tools/prefix.scss
View File

@ -1,42 +0,0 @@
/*
* Prefix Mixins
* Mixins used to add browser prefix to values and/or properties
*
* Version:
* 1.0.0 - 2018/02/23
*/
@mixin t-prefix-property($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
-webkit-#{$property}: $value;
} @else if $prefix == moz {
-moz-#{$property}: $value;
} @else if $prefix == ms {
-ms-#{$property}: $value;
} @else if $prefix == o {
-o-#{$property}: $value;
} @else if $prefix == spec {
#{$property}: $value;
} @else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}
@mixin t-prefix-value($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
#{$property}: -webkit-#{$value};
} @else if $prefix == moz {
#{$property}: -moz-#{$value};
} @else if $prefix == ms {
#{$property}: -ms-#{$value};
} @else if $prefix == o {
#{$property}: -o-#{$value};
} @else if $prefix == spec {
#{$property}: #{$value};
} @else {
@warn 'Unrecognized prefix: #{$prefix}';
}
}
}

8
public/styles/vendor/fonts.scss vendored
View File

@ -1,8 +0,0 @@
/*
* Fonts
* Imports the fonts used throughout the theme.
*
* Version:
* 1.0.0 - 2018/01/23
*/
@import url('https://fonts.googleapis.com/css?family=Bitter');