pulled in images + style sheets from PHP version; index, game, and presskit pages display original HTML with subtle use of variables

src/index.py

@@ -1,7 +1,28 @@
-from bottle import route, run
+from bottle import route, run, template
 
-@route('/hello')
-def hello():
-    return "Hello World!"
+@route('/')
+def index():
+    """home page"""
+    info = {'news': 'News goes here'}
+    return template('index.tpl', info)
 
-run(host='localhost', port=8080, debug=True)
+@route('/game')
+def game():
+    """game page"""
+    info = {}
+    return template('game.tpl')
+
+@route('/presskit')
+def presskit():
+    """press page"""
+    info = {}
+    return template('presskit.tpl')
+
+#@route('/diary')
+#def diary():
+#    """diary page"""
+#    info = {}
+#    return template('diary.tpl', info)
+
+if __name__ == '__main__':
+    run()

src/res/styles/diary.css

@@ -0,0 +1,207 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+  color: red;
+}
+a:visited {
+  color: hotpink;
+}
+a:hover {
+  color: green;
+}
+a:active {
+  color: blue;
+}
+mark {
+  background-color: #900C3F;
+  color: hotpink;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 533px 267px auto;
+    grid-template-rows: 25px 90px 40px repeat(4, 1fr) auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 5;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #3B429F;
+}
+
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 4; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 5;
+    background-color: #AA7DCE;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 4; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+/* Body */
+
+.dir-row {
+    grid-area: 3 / 1 / 4 / 5;
+    background-color: #F5D7E3;
+}
+
+.diary-dir {
+    grid-area: 3 / 2 / 4 / 4;
+    background-color: #900C3F;
+}
+
+.body-row {
+    grid-area: 4 / 1 / 8 / 5;
+    background-color: #b56c4d;
+}
+
+.diary-pages {
+    grid-area: 4 / 2 / 8 / 3;
+    background-color: #F4A5AE;
+    padding: 5px;
+}
+
+.about-box {
+    grid-area: 4 / 3 / 5 / 4;
+    background-color: #993759;
+    text-align: center;
+}
+
+.twitter-box {
+    grid-area: 5 / 3 / 6 / 4;
+    background-color: #faa275;
+    text-align: center;
+}
+
+.latest {
+    grid-area: 6 / 3 / 7 / 4;
+    background-color: #ff8c61;
+    text-align: center;
+    list-style-position: inside;
+}
+
+.latest-text {
+    background-color: #512806;
+    text-align: left;
+    list-style-position: inside;
+
+}
+
+.disclosure {
+    grid-area: 7 / 3 / 8 / 4;
+    background-color: #ce6a85;
+    text-align: center;
+}
+
+.footer-row {
+    grid-area: 8 / 1 / 9 / 5; 
+    background-color: #A8577E;
+    text-align: center;
+}
+
+.footer {
+    background-color: #5c374c; 
+    padding-top: 5px;
+    padding-right: 25px;
+    box-shadow: 0 100vh 0 100vh #581845;
+    text-align: right;
+    overflow: hidden;
+}

src/res/styles/feature.css

@@ -0,0 +1,195 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+  color: red;
+}
+a:visited {
+  color: hotpink;
+}
+a:hover {
+  color: green;
+}
+a:active {
+  color: blue;
+}
+mark {
+  background-color: #900C3F;
+  color: hotpink;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 533px 267px auto;
+    grid-template-rows: 25px 90px repeat(4, 1fr) 40px auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 5;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #3B429F;
+}
+
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 4; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 5;
+    background-color: #AA7DCE;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 4; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+/* Body */
+
+.dir-row {
+    grid-area: 7 / 1 / 8 / 5;
+    background-color: #F5D7E3;
+}
+
+.body-row {
+    grid-area: 3 / 1 / 7 / 5;
+    background-color: #b56c4d;
+}
+
+.diary-entry {
+    grid-area: 3 / 2 / 7 / 3;
+    background-color: #F4A5AE;
+    padding: 5px;
+}
+
+.about-box {
+    grid-area: 3 / 3 / 4 / 4;
+    background-color: #993759;
+}
+
+.twitter-box {
+    grid-area: 4 / 3 / 5 / 4;
+    background-color: #faa275;
+}
+
+.latest {
+    grid-area: 5 / 3 / 6 / 4;
+    background-color: #ff8c61;
+}
+
+.latest-text {
+    background-color: #512806;
+    text-align: left;
+
+}
+
+.disclosure {
+    grid-area: 6 / 3 / 7 / 4;
+    background-color: #ce6a85;
+}
+
+.footer-row {
+    grid-area: 8 / 1 / 9 / 5; 
+    background-color: #A8577E;
+}
+
+.footer {
+    background-color: #5c374c; 
+    padding-top: 5px;
+    padding-right: 25px;
+    box-shadow: 0 100vh 0 100vh #581845;
+    text-align: right;
+    overflow: hidden;
+}

src/res/styles/game.css

@@ -0,0 +1,189 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+  color: red;
+}
+a:visited {
+  color: hotpink;
+}
+a:hover {
+  color: green;
+}
+a:active {
+  color: blue;
+}
+mark {
+  background-color: #900C3F;
+  color: hotpink;
+}
+ul { list-style-position: inside; }
+
+.textbox {
+    margin: 20px;
+}
+
+.grid {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: auto 800px auto;
+    grid-template-rows: 25px 90px 1fr 100px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #3B429F;
+}
+
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 3; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 4;
+    background-color: #AA7DCE;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 4;
+    background-color: #d08d11;
+}
+
+.pages {
+    grid-area: 3 / 2 / 4 / 3;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background-color: #F0565C;
+    word-wrap: break-word;
+}
+
+.desc {
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: #F45693;
+}
+.story {
+    grid-area:  2 / 1 / 3 / 2;
+    background-color: #D67476;
+}
+.system {
+    grid-area:  3 / 1 / 4 / 2;
+    background-color: #F0787E;
+}
+.graphics {
+    grid-area: 4 / 1 / 5 / 2;
+    background-color: #F75155;
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 4;
+    background-color: #EC424A;
+    text-align: right;
+    padding-top: 5px;
+    padding-right: 25px;
+}
+
+.footer {
+    background-color: #060d1a; 
+}

src/res/styles/index.css

@@ -0,0 +1,206 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+    color: red;
+}
+a:visited {
+    color: hotpink;
+}
+a:hover {
+    color: green;
+}
+a:active {
+    color: blue;
+}
+mark {
+    background-color: #900C3F;
+    color: hotpink;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 75px 400px 25px 225px 75px auto;
+    grid-template-rows: 25px 90px 457px auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 8;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #DAF7A6;
+}
+
+.blessfrey-logo { grid-area: 1 / 3 / 2 / 6; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 8; 
+    background-color: #FFC300;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 7; 
+    display: flex;
+    flex-direction:row;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+}
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+/* Body */
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 8; 
+    background-color: #FF5733;
+}
+
+.social {
+    grid-area: 3 / 6 / 4 / 7;
+    justify-content: center;
+}
+
+.bg {
+    grid-area: 3 / 3 / 4 / 6; 
+    background-color: #C70039;
+    background-image: url(http://images.verpets.com/pets/peesh/peesh_viral_2.png);
+    width: 650px;
+    height: 457px;
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 8; 
+    background-color: #900C3F;
+}
+
+.tweets { 
+    grid-area: 4 / 3 / 5 / 4; 
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.news { 
+    grid-area: 4 / 5 / 5 / 6; 
+    display: flex;
+    flex-direction:column;
+    background-color: #581845; 
+    height: 85px;
+    overflow-y: scroll; 
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 15px;
+    margin-bottom: 0px; 
+    padding-top: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    padding-left: 8px;
+}
+
+.headline {
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px; 
+    padding-top: 3px;
+    padding-right: 1px;
+    padding-bottom: 3px;
+    padding-left: 1px;
+}
+
+.footer {
+    background-color: #581845; 
+    padding-top: 5px;
+    padding-right: 25px;
+    box-shadow: 0 100vh 0 100vh #581845;
+    text-align: right;
+    overflow: hidden;
+}

src/res/styles/presskit.css

@@ -0,0 +1,211 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+  color: red;
+}
+a:visited {
+  color: hotpink;
+}
+a:hover {
+  color: green;
+}
+a:active {
+  color: blue;
+}
+mark {
+  background-color: #900C3F;
+  color: hotpink;
+}
+ul { list-style-position: inside; }
+
+.textbox {
+    margin: 20px;
+}
+
+.grid {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: auto 800px auto;
+    grid-template-rows: 25px 90px 1fr 100px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #3B429F;
+}
+
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 3; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 4;
+    background-color: #AA7DCE;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 4;
+    background-color: #d08d11;
+}
+
+.pages {
+    grid-area: 3 / 2 / 4 / 3;
+    display: grid;
+    grid-template-columns: 800px;
+    grid-template-rows: repeat(9, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background-color: #F0565C;
+    word-wrap: break-word;
+}
+
+.fact {
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: #F45693;
+}
+.desc {
+    grid-area: 2 / 1 / 3 / 2;
+    background-color: #9b0017;
+}
+.features {
+    grid-area: 3 / 1 / 4 / 2;
+    background-color: #f84c09;
+}
+.dev {
+    grid-area: 4 / 1 / 5 / 2;
+    background-color: #900C3F;
+}
+.videos {
+    grid-area: 5 / 1 / 6 / 2;
+    background-color: #ff8600;
+}
+.graphics {
+    grid-area: 6 / 1 / 7 / 2;
+    background-color: #b61643;
+    justify-content:center;
+    align-items: center;
+}
+.contact {
+    grid-area: 7 / 1 / 8 / 2;
+    background-color: #4f000b;
+}
+.credits {
+    grid-area: 8 / 1 / 9 / 2;
+    background-color: #720026;
+}
+.permissions {
+    grid-area: 9 / 1 / 10 / 2;
+    background-color: #fc60a8;
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 4;
+    background-color: #EC424A;
+    text-align: right;
+    padding-top: 5px;
+    padding-right: 25px;
+}
+
+.footer {
+    background-color: #060d1a; 
+}

src/res/styles/style.css

@@ -0,0 +1,45 @@
+/* blessfrey css by chimchooree, written in xed */
+
+body {
+    color: #4f000b;
+    font-family: lato; calibri; arial; sans-serif;
+    font-size: 20px;
+    background-color: #ff7f51;
+    background-image: url(https://i.imgur.com/Pp71lWt.png);
+    /*background-image: url(/res/img/medallion.png);*/
+    background-size: 70px 70px;
+    background-repeat: repeat;
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 94px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 94px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}

src/res/styles/weekly.css

@@ -0,0 +1,186 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a:link {
+  color: red;
+}
+a:visited {
+  color: hotpink;
+}
+a:hover {
+  color: green;
+}
+a:active {
+  color: blue;
+}
+mark {
+  background-color: #900C3F;
+  color: hotpink;
+}
+ul { list-style-position: inside; }
+
+.textbox {
+    margin: 20px;
+}
+
+.grid {
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: auto 800px auto;
+    grid-template-rows: 25px 90px 1fr 100px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #3B429F;
+}
+
+.blessfrey-logo { grid-area: 1 / 2 / 2 / 3; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 4;
+    background-color: #AA7DCE;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+} 
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 4;
+    background-color: #d08d11;
+}
+
+.pages {
+    grid-area: 3 / 2 / 4 / 3;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    background-color: #F0565C;
+    word-wrap: break-word;
+}
+
+.desc {
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: #F45693;
+}
+.story {
+    grid-area:  2 / 1 / 3 / 2;
+    background-color: #D67476;
+}
+.system {
+    grid-area:  3 / 1 / 4 / 2;
+    background-color: #F0787E;
+}
+.graphics {
+    grid-area: 4 / 1 / 5 / 2;
+    background-color: #F75155;
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 4;
+    background-color: #EC424A;
+    text-align: right;
+    padding-top: 5px;
+    padding-right: 25px;
+}
+
+.footer {
+    background-color: #060d1a; 
+}

src/views/game.tpl

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>blessfrey - action rpg in godot engine</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="res/styles/game.css">
+  <link rel="icon" type="image/png" href="res/img/fav.ico" sizes="32x32" />
+</head>
+
+<!-- Body -->
+<body>
+
+<div class="grid">
+    <div class="whitespace">
+        blessfrey.me<br>
+    </div>
+
+    <div class="blessfrey-logo"></div>
+    <div class="nav-row"></div>
+
+<!--Navigation Bar-->
+    <div class="nav-grid">
+        <div class="nav-bar"></div>
+        <div class="nav-index">
+            <a href="index.html">
+                <div class="button">home</div>
+            </a>
+        </div>
+        <div class="nav-game">
+            <a href="game.html">
+                <div class="button">game</div>
+            </a>
+        </div>
+        <div class="nav-diary">
+            <a href="diary.php">
+                <div class="button">diary</div>
+            </a>
+        </div>
+        <div class="nav-presskit">
+            <a href="presskit.html">
+                <div class="button">presskit</div>
+            </a>
+        </div>
+    </div>
+
+    <div class="body-row"> </div>
+
+<!--Content-->
+    <div class="pages">
+        <div class="textbox desc">
+            Blessfrey is an action rpg made in Godot Engine. Follow its development on Twitter <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
+        </div>
+        <div class="textbox story">
+            <h1>Story</h1><br>
+            <br>
+            You play as a transfer student to a southern American town. <br>
+            <br>
+            There's a popular rumor that the local shopping center closes early because it's haunted, evidenced by strange noises and lights. <br>
+            <br>
+            Your classmates haze you into spending the night, and you discover that the mall fills with slimes at night, and they bubble up from secret tunnels underneath the stores. <br>
+        </div>
+        <div class="textbox system">
+            <h1>System</h1><br>
+            <br>
+            You and your controllable AI companions each have two classes and 8-skill skillbar to manage to take on the various combat and puzzle challenges in the Abyss.<br>
+            <br>
+            <h2>Team</h2><br>
+            <br>
+            Throughout the game, you will control between zero and five AI companions, whose Second Classes and Skillbars you will be able to customize.<br>
+            <br>
+            <h2>Multiclassing</h2><br>
+            <br>
+            Blessfrey has a multiclassing system to give the player freedom to express his playstyle. You choose your First Class at the beginning of the game and can unlock Second Classes through gameplay. The First Class is permanent and grants an exclusive bonus effect, such as higher Health or increased item efficacy, and a set of skills. The Second Class can be changed in safe areas to gain access to more skills. For example, a Heavy / Disciple will have plenty of tanking and healing options, while a Heavy / Chemist will have more focus on tanking and debuffing.<br>
+            <br>
+            <h2>Skills</h2><br>
+            <br>
+Skills are individual powers gained through gameplay which give specific effects according to their rules, which can be read in the player's Skill Library. Skills generally have a cost (usually Energy), an Activation Time (the time from pressing the skill to applying it), a Cooldown Time (time until skill can be used again), and a target. Skills may have an Initial Effect (effect immediately applied at activation), a main Effect (the effect applied after activation), and an End Effect (an effect applied after a specified time after activation).<br>
+            <br>
+            The skillbar only has 8 slots and can only be edited in safe areas, so you must build strategies + synergies against the areas you plan to explore. All skills must come from your current First or Second Class, duplicate skills are removed, and only one Elite Skill, an especially strong skill, is allowed per bar.<br>
+            <br>
+            Stat Points can be pumped into the classes' stats to increase the effectiveness of the skills associated with the given stat. <br>
+            <br>
+            The only permanent decision is the First Class. Stat Points can be redistributed and skills are never unlearned or replaced. The player is free to explore hundreds of combinations, including builds tailored for a specific level, general builds that can work in any area, or joke builds.<br>
+            <br>
+            <h2>Explore</h2><br>
+            <br>
+            You gain new skills and unlock more detailed UI information through exploring the world. Meeting new people, reaching new areas, fighting masses of the same enemy type, consuming items, and more all contribute to the player's knowledge base.<br>
+            <br>
+            The Main Character applies her experiences to her combat, unlocking new skills. For instance, suffering from Burning, visiting lava pools, and eating flambé foods all contribute to the Fire track and will unlock skills related to fire resistance, fire projectiles, and so on.<br>
+            <br>
+            The Main Character will also be able to apply her experience to the player's UI. As you face more encounters with particular enemies, the UI will display more specific information about them. Over the course of the game, "rainbow sludge monster" will become "Road Oil," non-specific Health bars will become numeric, and "using poison projectile" will become "using Toxic Dart."<br>
+        </div>
+        <div class="textbox graphics">
+            <h1>Graphics</h1>
+            <br><center>
+            <a target="_blank" href="https://i.imgur.com/1MLHsuV.png">
+                <img src="https://i.imgur.com/1MLHsuV.png" alt="in-engine screenshot of the schoolyard" width="200" height="156">
+            </a>
+            <a target="_blank" href="https://i.imgur.com/aIyPuO7.png">
+                <img src="https://i.imgur.com/aIyPuO7.png" alt="character concept art of Angel, Chloe, and Tessa" width="200" height="156">
+            </a>
+            <br>
+            <a target="_blank" href="https://i.imgur.com/UtuanB1.gif">
+                <img src="https://i.imgur.com/UtuanB1.gif" alt="in-engine footage of pathfinding projectile" width="200" height="156">
+            </a>
+            <a target="_blank" href="https://i.imgur.com/9bTDe5X.png">
+                <img src="https://i.imgur.com/9bTDe5X.png" alt="screenshot of the godot editor" width="200" height="156">
+            </a>
+            </center>
+        </div>
+    </div>
+
+    <div class="footer-row">
+        <footer>
+            &#169 chimchooree <?php echo date("Y");?>
+        </footer>
+    </div>
+</div>
+
+</body>
+
+</html>

src/views/index.tpl

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<!-- Header -->
+<head>
+  <title>chimchooree's dev space - blessfrey</title>
+  <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="res/styles/index.css"/>
+</head>
+
+<!-- Body -->
+<body>
+
+<div class="grid">
+    <div class="whitespace">
+        blessfrey.me<br>
+    </div>
+
+    <div class="blessfrey-logo"></div>
+    <div class="nav-row"></div>
+
+<!--Navigation Bar-->
+    <div class="nav-grid">
+        <div class="nav-bar"></div>
+        <div class="nav-index">
+            <a href="index.html">
+                <div class="button">home</div>
+            </a>
+        </div>
+        <div class="nav-game">
+            <a href="game.html">
+                <div class="button">game</div>
+            </a>
+        </div>
+        <div class="nav-diary">
+            <a href="diary.php">
+                <div class="button">diary</div>
+            </a>
+        </div>
+        <div class="nav-presskit">
+            <a href="presskit.html">
+                <div class="button">presskit</div>
+            </a>
+        </div>
+    </div>
+
+    <div class="body-row"> </div>
+
+    <div class="social">
+        <a href="https://twitter.com/lilchimchooree"><img class="img-social-ribbon" src="res/img/ele/twitter-ribbon.png"></a>
+    </div>
+
+    <div class="bg">
+        <img class="img-bg-home">
+    </div>
+
+    <div class="footer-row"> </div>
+
+    <div class="tweets">
+        <a class="twitter-timeline" data-width="400" data-height="200" data-theme="dark" href="https://twitter.com/lilchimchooree?ref_src=twsrc%5Etfw">Tweets by lilchimchooree</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+    </div>
+
+    <div class="news">
+        <center>.      •        . <strong>news</strong> ☆            ..   . <br></center>
+        <br>
+        {{news}}
+        <br>
+<center>.            ★            ..             •           .            ☆</center>
+    </div>
+</div>
+
+<!--Footer-->
+<footer>
+    <div class="footer">
+        &#169 chimchooree<br>
+    </div>
+</footer>
+</body>

src/views/presskit.tpl

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>blessfrey presskit</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="res/styles/presskit.css">
+  <link rel="icon" type="image/png" href="res/img/fav.ico" sizes="32x32" />
+</head>
+
+<body>
+
+<div class="grid">
+    <div class="whitespace">
+        blessfrey.me<br>
+    </div>
+
+    <div class="blessfrey-logo"></div>
+    <div class="nav-row"></div>
+
+<!--Navigation Bar-->
+    <div class="nav-grid">
+        <div class="nav-bar"></div>
+        <div class="nav-index">
+            <a href="index.html">
+                <div class="button">home</div>
+            </a>
+        </div>
+        <div class="nav-game">
+            <a href="game.html">
+                <div class="button">game</div>
+            </a>
+        </div>
+        <div class="nav-diary">
+            <a href="diary.php">
+                <div class="button">diary</div>
+            </a>
+        </div>
+        <div class="nav-presskit">
+            <a href="presskit.html">
+                <div class="button">presskit</div>
+            </a>
+        </div>
+    </div>
+
+    <div class="body-row"> </div>
+
+<!--Content-->
+    <div class="pages">
+
+        <div class="textbox fact"> 
+            <h1>Fact Sheet</h1>
+            <ul><br>
+                <li><b>Description:</b> Build synergies across your skillbar and teammates to survive the local smalltown dungeon.</li>
+                <li><b>Developer:</b> chimchooree, US indie dev</li>
+                <li><b>Genre:</b> Singleplayer Action RPG</li>
+                <li><b>Release Date:</b> Spring 2030</li>
+                <li><b>Platforms:</b> Windows, Linux, possibly more</li>
+                <li><b>Engine:</b> Godot Engine</li>
+                <li><b>Website:</b> blessfrey.com</li>
+                <li><b>Price:</b> $105.00 USD</li>
+                <li><b>Press Contact:</b> <a href="https://twitter.com/lilchimchooree">Twitter @lilchimchooree</a></li>
+                <li><b>Social:</b> <a href="https://twitter.com/lilchimchooree">Twitter</a></li>
+            </ul><br>
+        </div>
+
+        <div class="textbox desc">
+            <h1>Description</h1>
+            <br>
+            In active development, Blessfrey is the first game by US-based indie game developer chimchooree. <br>
+<br>
+            Blessfrey is a 2D action RPG set in a rural southern town riddled with secret tunnels and dungeons. 
+The multiclass and skill system emphasizes player skill, personal expression, and exploration. Delve deeper under the town by discovering new skills, building synergies within your skillbar, and recruiting AI teammates. Bosses, traps, and a secret world await. <br>
+<br>
+            
+        </div>
+
+        <div class="textbox features"> 
+            <h1>Features </h1>
+            <ul><br>
+                <li>Try tens of possible dual-class combinations</li>
+                <li>Experiment with hundreds of possible skillbar combinations</li>
+                <li>Freely relocate skill points and swap out skills in safe areas</li>
+                <li>Learn new skills through exploration and gameplay</li>
+                <li>Explore an underground world</li>
+            </ul><br>
+        </div>
+
+        <div class="textbox dev">
+            <h1>Developer </h1>
+            <br>
+            chimchooree is learning to code through gamedev, automating the boring stuff, and taking online classes. See some of her code on <a href="https://gitlab.com/chimchooree">GitLab</a> and some of her design process + planning on her <a href="diary.php">blog</a> and on <a href="https://twitter.com/lilchimchooree">Twitter</a>. <br>
+<br>
+            Her most complex projects are blessfrey, a 2D action RPG written in Godot Engine's GDScript and Cat Store, a text-based breeding sim written in Java using IntelliJ. <br>
+        </div>
+
+        <div class="textbox videos"> </div>
+
+        <div class="textbox graphics">
+            <h1>Graphics</h1>
+            <br><center>
+            <a target="_blank" href="https://i.imgur.com/1MLHsuV.png">
+                <img src="https://i.imgur.com/1MLHsuV.png" alt="in-engine screenshot of the schoolyard" width="200" height="156">
+            </a>
+            <a target="_blank" href="https://i.imgur.com/aIyPuO7.png">
+                <img src="https://i.imgur.com/aIyPuO7.png" alt="character concept art of Angel, Chloe, and Tessa" width="200" height="156">
+            </a>
+            <br>
+            <a target="_blank" href="https://i.imgur.com/UtuanB1.gif">
+                <img src="https://i.imgur.com/UtuanB1.gif" alt="in-engine footage of pathfinding projectile" width="200" height="156">
+            </a>
+            <a target="_blank" href="https://i.imgur.com/9bTDe5X.png">
+                <img src="https://i.imgur.com/9bTDe5X.png" alt="screenshot of the godot editor" width="200" height="156">
+            </a>
+            </center>
+        </div>
+
+        <div class="textbox contact">
+            <h1>Contact</h1>
+            <br>
+            Please message me on <a href="https://twitter.com/lilchimchooree">Twitter @lilchimchooree</a>.
+        </div>
+
+        <div class="textbox credits">
+            <h1>Credits</h1>
+            <ul><br>
+            <li>Code: chimchooree</li>
+            <li>Art: chimchooree</li>
+            <li>Design: chimchooree</li>
+            <li>Engine: Godot Engine</li>
+            <li><a href="credits.html">Full Credits</a></li>
+            </ul><br>
+        </div>
+
+        <div class="textbox permissions">
+            <h1>Permission</h1>
+            <br>
+            Freely use all of the content on this page, even for commercial use, at your own risk. <br>
+        </div>
+    </div>
+
+    <div class="footer-row">
+        <footer>
+            &#169 chimchooree <?php echo date("Y");?>
+        </footer>
+    </div>
+</div> 
+
+</body>
+
+</html>