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

Customizing design of About Page, standardizing old W95 styles

Browse Source
This commit is contained in:
Dominic Masters
2018-03-13 06:02:44 +11:00
parent 9e0350322b
commit 666bafe98a
12 changed files with 146 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,24 @@
max-width: 25em;
}
.c-page--style-about__blurb,
.c-page--style-about__profile-container {
text-align: center;
}
.c-page--style-about__window {
display: block;
width: 90%;
margin: 0 auto;
}
.c-page--style-about__window-text {
width: 100%;
resize: none;
}
/*
.c-page--style-about__language-container {
@extend %t-flexbox;
@include t-flex-wrap(wrap);
@ -48,9 +66,16 @@
.c-page--style-about__subheading {
margin-top: 4em;
}
*/
@include t-media-query($s-small-up) {
.c-page--style-about__language {
.c-page--style-about__window-container {
width: 50%;
}
.c-page--style-about__window {
width: 50%;
}
/*.c-page--style-about__language {
width: 50%;
}*/
}

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

@ -1,4 +1,11 @@
$windowBG: #C0C0C0;
@import './w95/settings.scss';
@import './w95/_mixins.scss';
@import './w95/_window.scss';
@import './w95/_title-bar.scss';
@import './w95/_text-field.scss';
/*$windowBG: #C0C0C0;
$highlight: #0000BF;
$disabled: #808080;
@ -194,3 +201,4 @@ $imageScale: 1;
.window {
@include window95(2);
}
*/

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

@ -0,0 +1,52 @@
@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 Normal file
View File

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

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

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

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

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

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

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

9
public/styles/index.scss
View File

@ -50,16 +50,17 @@
@import './components/_menu.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_page--style-about.scss';
@import './components/_page--style-contact.scss';
@import './components/_page--style-index.scss';
@import './components/_section.scss';
@import './components/_section--style-blank-promo.scss';
@import './components/_section--style-body.scss';
@import './components/_section--style-poly.scss';
@import './components/_section--style-split.scss';
@import './components/_section--style-three.scss';
//@import './components/_w95.scss';
@import './components/_w95.scss';
@import './components/_page--style-about.scss';
@import './components/_page--style-contact.scss';
@import './components/_page--style-index.scss';
//Utilities