Customizing design of About Page, standardizing old W95 styles

public/App.jsx

@@ -16,7 +16,7 @@ import Header from './components/Header';
 import Footer from './components/Footer';
 
 import IndexPage from './components/pages/IndexPage';
-import TestAboutPage from './components/pages/TestAboutPage';
+import AboutPage from './components/pages/AboutPage';
 import PrivacyPolicyPage from './components/pages/PrivacyPolicyPage';
 import ContactPage from './components/pages/ContactPage';
 
@@ -33,7 +33,7 @@ class App extends React.Component {
 
             <Switch>
               <Route exact path="/" component={IndexPage} />
-              <Route exact path="/about" component={TestAboutPage} />
+              <Route exact path="/about" component={AboutPage} />
 
               <Route exact path="/privacy-policy" component={PrivacyPolicyPage} />
               <Route exact path="/privacy" component={PrivacyPolicyPage} />

public/components/pages/AboutPage.jsx

@@ -12,12 +12,14 @@
 import React from 'react';
 
 import Page from './../Page';
-import Poly from './../sections/Poly';
+import BlankPromo from './../sections/BlankPromo';
 import BodySection from './../sections/BodySection';
 import SplitSection from './../sections/SplitSection';
 import { connect } from 'react-redux';
 import Language from './../../language/Language';
 
+import Window95 from './../w95/Window95';
+
 import domsHead from './../../images/profile.png';
 
 const ProgrammingBox = function(props) {
@@ -40,8 +42,8 @@ class AboutPage extends React.Component {
 
   render() {
     return (
-      <Page>
-        <Poly />
+      <Page className="c-page--style-about">
+        <BlankPromo />
 
         <SplitSection
           leftClass="c-page--style-about__profile-container"
@@ -49,8 +51,26 @@ class AboutPage extends React.Component {
 
           right={ <p>{Language.get("about.descriptions.welcome")}</p> }
           rightClass="c-page--style-about__blurb"
+          full
         />
 
+
+        <SplitSection
+          leftClass="c-page--style-about__window-container"
+          left={
+            <Window95 menu={[]} title={Language.get("about.titles.me")} className="c-page--style-about__window">
+              <div className="c-text-field c-page--style-about__window-text">
+                { Language.get("about.descriptions.me") }
+              </div>
+            </Window95>
+          }
+
+          rightClass="c-page--style-about__window-container"
+          right={ <div></div> }
+          full
+        />
+
+
         <BodySection>
           <h1>{Language.get("about.titles.me")}</h1>
           <p>

public/components/sections/SplitSection.jsx

@@ -29,8 +29,9 @@ class SplitSection extends React.Component {
   }
 
   render() {
+
     return (
-      <Section section="split">
+      <Section section="split" full={this.props.full ? true : false}>
         <SplitSectionSection className={this.props.leftClass}>
           {this.props.left}
         </SplitSectionSection>

public/components/w95/Window95.jsx

@@ -52,13 +52,13 @@ class Window95 extends Component {
       menu = <ContextMenu menu={this.state.menu} />;
     }
 
-    let clss = "window ";
+    let clss = "c-window ";
     if(this.props.className) clss += this.props.className;
 
     return (
       <div className={clss}>
         <div className="load_me_stuff"></div>
-        <div className="title">
+        <div className="c-title-bar">
           {this.state.title}
           <div className="buttons">
             {btns}

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;

public/styles/index.scss

@@ -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