diff --git a/public/App.jsx b/public/App.jsx index 55a9641..18f0c92 100644 --- a/public/App.jsx +++ b/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 { - + diff --git a/public/components/pages/AboutPage.jsx b/public/components/pages/AboutPage.jsx index 4805da8..cddd371 100644 --- a/public/components/pages/AboutPage.jsx +++ b/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 ( - - + + {Language.get("about.descriptions.welcome")}

} rightClass="c-page--style-about__blurb" + full /> + + +
+ { Language.get("about.descriptions.me") } +
+ + } + + rightClass="c-page--style-about__window-container" + right={
} + full + /> + +

{Language.get("about.titles.me")}

diff --git a/public/components/sections/SplitSection.jsx b/public/components/sections/SplitSection.jsx index b026312..026cf45 100644 --- a/public/components/sections/SplitSection.jsx +++ b/public/components/sections/SplitSection.jsx @@ -29,8 +29,9 @@ class SplitSection extends React.Component { } render() { + return ( -

+
{this.props.left} diff --git a/public/components/w95/Window95.jsx b/public/components/w95/Window95.jsx index 8f93936..cd9d8e6 100644 --- a/public/components/w95/Window95.jsx +++ b/public/components/w95/Window95.jsx @@ -52,13 +52,13 @@ class Window95 extends Component { menu = ; } - let clss = "window "; + let clss = "c-window "; if(this.props.className) clss += this.props.className; return (
-
+
{this.state.title}
{btns} diff --git a/public/styles/components/_page--style-about.scss b/public/styles/components/_page--style-about.scss index d320142..4ed624f 100644 --- a/public/styles/components/_page--style-about.scss +++ b/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%; + }*/ } diff --git a/public/styles/components/_w95.scss b/public/styles/components/_w95.scss index 2c1f4da..8962012 100644 --- a/public/styles/components/_w95.scss +++ b/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); } +*/ diff --git a/public/styles/components/w95/_mixins.scss b/public/styles/components/w95/_mixins.scss new file mode 100644 index 0000000..6efd77d --- /dev/null +++ b/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; + } + } +} diff --git a/public/styles/components/w95/_text-field.scss b/public/styles/components/w95/_text-field.scss new file mode 100644 index 0000000..96ffb1b --- /dev/null +++ b/public/styles/components/w95/_text-field.scss @@ -0,0 +1,6 @@ +.c-text-field { + @include frame95($w95Scale); + background: white; + color: black; + cursor: text; +} diff --git a/public/styles/components/w95/_title-bar.scss b/public/styles/components/w95/_title-bar.scss new file mode 100644 index 0000000..d57c34f --- /dev/null +++ b/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; +} diff --git a/public/styles/components/w95/_window.scss b/public/styles/components/w95/_window.scss new file mode 100644 index 0000000..3ebc11d --- /dev/null +++ b/public/styles/components/w95/_window.scss @@ -0,0 +1,3 @@ +.c-window { + @include window95($w95Scale); +} diff --git a/public/styles/components/w95/settings.scss b/public/styles/components/w95/settings.scss new file mode 100644 index 0000000..05e10d9 --- /dev/null +++ b/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; diff --git a/public/styles/index.scss b/public/styles/index.scss index ed6238a..0add71a 100644 --- a/public/styles/index.scss +++ b/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