Customizing design of About Page, standardizing old W95 styles

public/styles/components/_page--style-about.scss

@@ -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%;
+  }*/
 }

public/styles/components/_w95.scss

@@ -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);
 }
+*/

public/styles/components/w95/_mixins.scss

@@ -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;
+    }
+  }
+}

public/styles/components/w95/_text-field.scss

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

public/styles/components/w95/_title-bar.scss

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

public/styles/components/w95/_window.scss

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

public/styles/components/w95/settings.scss

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