From 44cffb918e8e8e442f6993f76eba502eda6d9e9f Mon Sep 17 00:00:00 2001
From: chimchooree <chimchooree@mail.com>
Date: Fri, 14 May 2021 22:49:12 -0500
Subject: [PATCH] updating CSS - diary finished for now

---
 src/diary/entries/200806              |   2 +-
 src/diary/entries/210501              |   2 +-
 src/diary/entries/210513              |   2 +-
 src/index.py                          |  46 +++--
 src/static/css/box.css                |  26 ++-
 src/static/css/contact.css            |  26 ++-
 src/static/css/diary.css              | 223 ++++++++++++++++------
 src/static/css/feature.css            |  61 +++---
 src/static/css/game.css               |  25 ++-
 src/static/css/index.css              |  25 ++-
 src/static/css/presskit.css           |  26 ++-
 src/static/css/projects.css           |  26 ++-
 src/static/img/btn/diaryreadmore.png  | Bin 0 -> 1457 bytes
 src/static/img/btn/grayscale.pal      | 259 ++++++++++++++++++++++++++
 src/static/img/btn/nav_l.png          | Bin 0 -> 1302 bytes
 src/static/img/btn/nav_ll.png         | Bin 0 -> 1327 bytes
 src/static/img/btn/nav_r.png          | Bin 0 -> 1308 bytes
 src/static/img/btn/nav_rr.png         | Bin 0 -> 1323 bytes
 src/static/img/btn/skillbtn_diary.png | Bin 1379 -> 1713 bytes
 src/static/img/btn/skillbtn_press.png | Bin 0 -> 1441 bytes
 src/static/img/ele/diarybottom.png    | Bin 0 -> 1131 bytes
 src/static/img/ele/diarycontent.png   | Bin 0 -> 7598 bytes
 src/static/img/ele/diaryheader.png    | Bin 0 -> 1727 bytes
 src/static/xml/blessfrey.xml          |  14 +-
 src/views/diary.tpl                   | 140 ++++++++++----
 src/views/footer.tpl                  |   2 +-
 src/views/logo-bar.tpl                |   2 +-
 src/views/nav.tpl                     |  12 +-
 28 files changed, 683 insertions(+), 236 deletions(-)
 create mode 100644 src/static/img/btn/diaryreadmore.png
 create mode 100644 src/static/img/btn/grayscale.pal
 create mode 100644 src/static/img/btn/nav_l.png
 create mode 100644 src/static/img/btn/nav_ll.png
 create mode 100644 src/static/img/btn/nav_r.png
 create mode 100644 src/static/img/btn/nav_rr.png
 create mode 100644 src/static/img/btn/skillbtn_press.png
 create mode 100644 src/static/img/ele/diarybottom.png
 create mode 100644 src/static/img/ele/diarycontent.png
 create mode 100644 src/static/img/ele/diaryheader.png

diff --git a/src/diary/entries/200806 b/src/diary/entries/200806
index 6f6bdd4..04b45c9 100644
--- a/src/diary/entries/200806
+++ b/src/diary/entries/200806
@@ -1,7 +1,7 @@
 <!--201217,200903-->
 <h1>what is blessfrey? </h1>
 august 6, 2020<br>
-#gamedescription <br>
+#game <br>
 <br>
 <b>blessfrey</b> is a 2D action RPG developed for PC by chimchooree. <br>
 <br>
diff --git a/src/diary/entries/210501 b/src/diary/entries/210501
index 4e173d6..401695c 100644
--- a/src/diary/entries/210501
+++ b/src/diary/entries/210501
@@ -1,7 +1,7 @@
 <!--210401,210601-->
 <h1>april 2020: will patrols ever work? </h1>
 may 1, 2021<br>
- <br>
+#diary <br>
 <br>
 <br>
 <h3>thursday, april 1 - April Fool's Day </h3>
diff --git a/src/diary/entries/210513 b/src/diary/entries/210513
index d671cb0..d4e6e74 100644
--- a/src/diary/entries/210513
+++ b/src/diary/entries/210513
@@ -1,7 +1,7 @@
 <!--210218,210107-->
 <h1>playing FlightRising with spreadsheets </h1>
 may 13, 2021<br>
-#spreadsheets #petsites <br>
+#offtopic #spreadsheets #petsites <br>
 <br>
 My dragon breeding spreadsheet is really coming together, so I thought sharing it would be a fun break from AI. <br>
 <br>
diff --git a/src/index.py b/src/index.py
index b2d2e15..8becbf8 100644
--- a/src/index.py
+++ b/src/index.py
@@ -118,6 +118,19 @@ def list_headlines(articles):
         result.append(b)
     return result
 
+def find_tags(text):
+    new = text[3].replace('<br>','')
+    new = new.replace('\n','')
+    new = new.split(" ")
+    final = []
+    for n in new:
+        if len(n) <= 0:
+            new.remove(n)
+        if '#' in n:
+            final.append(n)
+    final.sort()
+    return final
+
 # Return title of article, formatted for sharing via social media
 def find_social_title(text):
     return clean(text[1]).replace(' ','+')
@@ -168,6 +181,7 @@ def list_snippets(articles):
         a.append(find_timestamp(text))
         a.append(find_url(path))
         a.append(find_social_title(text))
+        a.append(find_tags(text))
         result.append(a)
     return result
 
@@ -276,6 +290,10 @@ def fill_box(new_file):
     box.sort()
     return box
 
+def find_year():
+    now = datetime.datetime.now()
+    return now.strftime('%Y')
+
 ## Static ##
 
 # Serve CSS
@@ -315,21 +333,21 @@ def download(filename):
 def index():
     """home page"""
     loc = 'diary/entries/'
-    info = {'css': 'index', 'news': list_headlines(gather_and_sort(loc)[0:10]), 'title': 'chimchooree\'s dev space - blessfrey', 'year': datetime.datetime.now()}
+    info = {'css': 'index', 'news': list_headlines(gather_and_sort(loc)[0:10]), 'title': 'chimchooree\'s dev space - blessfrey', 'year': find_year()}
     return template('index.tpl', info)
 
 # Projects Page - Game Template - system, character, story info
 @route('/projects')
 def projects():
     """projects page"""
-    info = {'css': 'projects', 'title': 'chimchooree projects', 'year': datetime.datetime.now()}
+    info = {'css': 'projects', 'title': 'chimchooree projects', 'year': find_year()}
     return template('projects.tpl', info)
 
 # Presskit Page - Presskit Template - product, developer info
 @route('/presskit')
 def presskit():
     """press page"""
-    info = {'css': 'presskit', 'title': 'blessfrey - presskit', 'year': datetime.datetime.now()}
+    info = {'css': 'presskit', 'title': 'blessfrey - presskit', 'year': find_year()}
     return template('presskit.tpl', info)
 
 # Start on first Diary page if no page given
@@ -343,7 +361,7 @@ def diary(page):
     """diary page"""
     loc = 'diary/entries/'
     assert isinstance(page, int)
-    info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': datetime.datetime.now(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
+    info = {'css': 'diary', 'title': 'blessfrey - developer diary', 'year': find_year(), 'snippets': list_snippets(gather_and_sort(loc)), 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'total': len(curate_files(gather_files(loc))), 'limit': 8, 'cluster': 3, 'page': page}
     return template('diary.tpl', info)
 
 # Entry Page - Feature Template - for articles
@@ -353,7 +371,7 @@ def entry(page):
     if not is_it_time(page):
         return error404(404)
     loc = 'diary/entries/'
-    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': datetime.datetime.now(), 'entry': retrieve_article(page, loc), 'recommends': list_rec(page), 'articles': "Articles", 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'page': page}
+    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': find_year(), 'entry': retrieve_article(page, loc), 'recommends': list_rec(page), 'articles': "Articles", 'latest': list_headlines(gather_and_sort(loc)[0:5]), 'page': page}
     abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
     abs_views_path = os.path.join(abs_app_dir_path, 'views')
     TEMPLATE_PATH.insert(0, abs_views_path )
@@ -364,7 +382,7 @@ def entry(page):
 def extra(page):
     """diary extra"""
     loc = 'diary/entries/extra/'
-    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': datetime.datetime.now(), 'entry': retrieve_article(page, loc), 'recommends': list_rec(page), 'articles': "Articles", 'latest': list_headlines(gather_and_sort('diary/entries/')[0:5]), 'page': page}
+    info = {'css': 'feature', 'title': 'blessfrey - developer diary', 'year': find_year(), 'entry': retrieve_article(page, loc), 'recommends': list_rec(page), 'articles': "Articles", 'latest': list_headlines(gather_and_sort('diary/entries/')[0:5]), 'page': page}
     abs_app_dir_path = os.path.dirname(os.path.realpath(__file__))
     abs_views_path = os.path.join(abs_app_dir_path, 'views')
     TEMPLATE_PATH.insert(0, abs_views_path )
@@ -374,14 +392,14 @@ def extra(page):
 @route('/box')
 def box():
     """personal page"""
-    info = {'css': 'box', 'title': 'chimchooree\'s personal page', 'year': datetime.datetime.now()}
+    info = {'css': 'box', 'title': 'chimchooree\'s personal page', 'year': find_year()}
     return template('box.tpl', info)
 
 # Credits Page - Credits Template
 @route('/credits')
 def credits():
     """credits page"""
-    info = {'css': 'contact', 'title': 'blessfrey - credits', 'year': datetime.datetime.now()}
+    info = {'css': 'contact', 'title': 'blessfrey - credits', 'year': find_year()}
     return template('credits.tpl', info)
 
 
@@ -389,27 +407,21 @@ def credits():
 @route('/contact')
 def contact():
     """contact page"""
-    info = {'css': 'contact', 'title': 'blessfrey - contact chimchooree', 'year': datetime.datetime.now()}
+    info = {'css': 'contact', 'title': 'blessfrey - contact chimchooree', 'year': find_year()}
     return template('contact.tpl', info)
 
 # Idea Box Page - Box Template
 @route('/ideabox')
 def ideabox():
     """idea box page"""
-    info = {'css': 'box', 'title': 'blessfrey - idea box - a collection of inspiring concepts', 'words': fill_box('diary/entries/extra/ideabox'), 'limit': 5, 'year': datetime.datetime.now()}
+    info = {'css': 'box', 'title': 'blessfrey - idea box - a collection of inspiring concepts', 'words': fill_box('diary/entries/extra/ideabox'), 'limit': 5, 'year': find_year()}
     return template('ideabox.tpl', info)
 
-# RSS feed
-#@route('/rss')
-#def rss():
-#    """rss feed"""
-#    return static_file("static/xml/rss.xml", root='static/xml', mimetype='text/xml')
-
 # Task Box Page - Box Template
 @route('/taskbox')
 def taskbox():
     """task box page"""
-    info = {'css': 'box', 'title': 'blessfrey - task box - everything needed to complete blessfrey', 'game_words': fill_box('diary/entries/extra/taskbox'), 'web_words': fill_box('diary/entries/extra/websitebox'), 'limit': 5, 'year': datetime.datetime.now()}
+    info = {'css': 'box', 'title': 'blessfrey - task box - everything needed to complete blessfrey', 'game_words': fill_box('diary/entries/extra/taskbox'), 'web_words': fill_box('diary/entries/extra/websitebox'), 'limit': 5, 'year': find_year()}
     return template('taskbox.tpl', info)
 
 ## Main ##
diff --git a/src/static/css/box.css b/src/static/css/box.css
index 1ce3435..d27e4de 100755
--- a/src/static/css/box.css
+++ b/src/static/css/box.css
@@ -93,20 +93,18 @@ body {
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 table, th, td {
diff --git a/src/static/css/contact.css b/src/static/css/contact.css
index f929fdc..8f2c7cd 100644
--- a/src/static/css/contact.css
+++ b/src/static/css/contact.css
@@ -95,20 +95,18 @@ body {
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 .footer-content {
diff --git a/src/static/css/diary.css b/src/static/css/diary.css
index e5b8152..3105f11 100755
--- a/src/static/css/diary.css
+++ b/src/static/css/diary.css
@@ -1,6 +1,7 @@
 * {
     padding:0;
     margin:0;
+    font-family: "Ubuntu", "Open Sans", "Calibri", "Arial", sans-serif;
 }
 
 a {
@@ -85,19 +86,32 @@ ul { list-style-position: inside; }
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 .nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #ecd5d2;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
@@ -110,24 +124,58 @@ ul { list-style-position: inside; }
 
 .diary-dir {
     background-color: #080410;
-    color: #F9B3D7;
-    font-size: 20px;
-    padding-top: 5px;
+    font-size: 23px;
+    padding: 0px;
+    margin: 0px;
+    color: #AAA39D;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #080410,
+        0   -1px 1px #080410,
+        2px -1px 1px #080410,
+        2px  0   1px #080410,
+        2px  2px 1px #080410,
+        0    2px 1px #080410,
+        -1px  2px 1px #080410,
+        -1px  0   1px #080410;
+}
+.diary-dir a {
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #080410,
+        0   -1px 1px #080410,
+        2px -1px 1px #080410,
+        2px  0   1px #080410,
+        2px  2px 1px #080410,
+        0    2px 1px #080410,
+        -1px  2px 1px #080410,
+        -1px  0   1px #080410;
 }
-.diary-dir a:link {
-    color: #C9C2D6;
+.diary-dir.top {
+    grid-area: 3 / 1 / 4 / 5;
+    padding-top: 3px;
 }
-.diary-dir a:visited {
-    color: #C9C2D6;
+.diary-dir-left {
+    display: inline-block;
+    vertical-align: middle;
 }
-.diary-dir a:hover {
-    color: #F9B3D7;
+.diary-dir-numbers {
+    height: 29px;
+    display: inline-block;
+    white-space: nowrap;
 }
-.diary-dir a:active {
-    color: #f463ad;
+.diary-dir-number {
+    background-color: #404664;
+    display: inline-block;
+    white-space: nowrap;
+    border-radius: 25px;
+    padding-left: 4px;
+    padding-right: 4px;
 }
-.diary-dir.top {
-    grid-area: 3 / 1 / 4 / 5;
+.diary-dir-right {
+    display: inline-block;
+    vertical-align: middle;
 }
 
 .body-row {
@@ -140,23 +188,86 @@ ul { list-style-position: inside; }
 }
 
 .snippet {
-    background-color: #C9C2D6;
-    color: #080410;
-    padding: 20px;
     margin-top: 0px;
-    margin-bottom: 30px;
-}
-.snippet a:link {
-    color: #401231;
-}
-.snippet a:visited {
-    color: #401231;
+    margin-bottom: 50px;
 }
-.snippet a:hover {
-    color: #902771;
-}
-.snippet a:active {
-    color: #900C3F;
+
+.snippet-title {
+    background-image: url(../img/ele/diaryheader.png);
+    background-size: 100%;
+    height: 40px;
+    padding: 10px;
+    font-size: 10px;
+}
+.snippet-title a {
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #324832,
+        0   -1px 1px #324832,
+        2px -1px 1px #324832,
+        2px  0   1px #324832,
+        2px  2px 1px #324832,
+        0    2px 1px #324832,
+        -1px  2px 1px #324832,
+        -1px  0   1px #324832;
+}
+.snippet-title a:hover {
+    color: #ecd5d2;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px #324832,
+        0   -1px 1px #324832,
+        2px -1px 1px #324832,
+        2px  0   1px #324832,
+        2px  2px 1px #324832,
+        0    2px 1px #324832,
+        -1px  2px 1px #324832,
+        -1px  0   1px #324832;
+}
+.snippet-content {
+    background-color: #ecd5d2;
+    padding: 10px;
+    font-size: 15px;
+}
+.snippet-info {
+    background-color: #ecd5d2;
+    padding: 10px;
+    font-size: 15px;
+}
+.snippet-info a {
+    color: black;
+    font-weight: bold;
+}
+.snippet-info a:hover {
+    color: #404664;
+    font-weight: bold;
+}
+.snippet-tags {
+    background-color: #ecd5d2;
+    padding: 10px;
+    font-size: 15px;
+}
+.snippet-tag {
+    background-color: #b9b4af;
+    border-radius: 25px;
+    padding: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+    color: black;
+    font-size: 15px;
+    font-weight: bold;
+    display: inline-block;
+}
+.snippet-link {
+    margin-top: -35px;
+    float: right;
+    font-size: 15px;
+}
+.snippet-bottom {
+    background-image: url(../img/ele/diarybottom.png);
+    background-size: 100%;
+    height: 25px;
 }
 
 .sidebar {
@@ -170,21 +281,22 @@ ul { list-style-position: inside; }
     padding-left: 7px;
 }
 .sidebar a:link {
-    color: #C9C2D6;
-}
-.sidebar a:visited {
-    color: #C9C2D6;
+    color: #213021;
 }
 .sidebar a:hover {
-    color: #F9B3D7;
+    color: #486438;
+}
+.sidebar a:visited {
+    color: #213021;
 }
 .sidebar a:active {
-    color: #F9B3D7;
+    color: #945634;
 }
 .about-box {
     grid-area: 4 / 3 / 5 / 4;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -193,8 +305,9 @@ ul { list-style-position: inside; }
 }
 .twitter-box {
     grid-area: 5 / 3 / 6 / 4;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -202,8 +315,9 @@ ul { list-style-position: inside; }
 }
 .latest {
     grid-area: 6 / 3 / 7 / 4;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     list-style-position: inside;
     margin: 15px;
@@ -216,8 +330,9 @@ ul { list-style-position: inside; }
 }
 .disclosure {
     grid-area: 7 / 3 / 8 / 4;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -235,7 +350,7 @@ ul { list-style-position: inside; }
 
 .footer-content {
     background-color: #080410;
-    color: #F9B3D7;
+    color: #ecd5d2;
     padding-top: 5px;
     padding-right: 25px;
     box-shadow: 0 100vh 0 100vh #581845;
diff --git a/src/static/css/feature.css b/src/static/css/feature.css
index 1e82c47..77c6f89 100644
--- a/src/static/css/feature.css
+++ b/src/static/css/feature.css
@@ -1,6 +1,7 @@
 * {
     padding:0;
     margin:0;
+    font-family: "Ubuntu", "Open Sans", "Calibri", "Arial", sans-serif;
 }
 
 a {
@@ -85,19 +86,18 @@ ul,ol { list-style-position: inside; }
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
@@ -129,21 +129,21 @@ ul,ol { list-style-position: inside; }
     margin-top: 40px;
 }
 .sidebar a:link {
-    color: #C9C2D6;
-}
-.sidebar a:visited {
-    color: #C9C2D6;
+    color: #213021;
 }
 .sidebar a:hover {
-    color: #F9B3D7;
+    color: #486438;
+}
+.sidebar a:visited {
+    color: #213021;
 }
 .sidebar a:active {
-    color: #F9B3D7;
+    color: #945634;
 }
 .about-box {
-    grid-area: 1 / 1 / 2 / 2;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -152,8 +152,9 @@ ul,ol { list-style-position: inside; }
 }
 .twitter-box {
     grid-area: 2 / 1 / 3 / 2;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -161,8 +162,9 @@ ul,ol { list-style-position: inside; }
 }
 .latest {
     grid-area: 3 / 1 / 4 / 2;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     list-style-position: inside;
     margin: 15px;
@@ -175,8 +177,9 @@ ul,ol { list-style-position: inside; }
 }
 .disclosure {
     grid-area: 4 / 1 / 5 / 2;
-    background-color: #581845; 
-    color: #F9B3D7;
+    border-radius: 25px;
+    background-color: #95939F; 
+    color: #111718;
     text-align: center;
     margin: 15px;
     padding: 5px;
@@ -210,7 +213,7 @@ ul,ol { list-style-position: inside; }
 
 .footer-content {
     background-color: #080410;
-    color: #F9B3D7;
+    color: #ecd5d2;
     padding-top: 5px;
     padding-right: 25px;
     box-shadow: 0 100vh 0 100vh #581845;
diff --git a/src/static/css/game.css b/src/static/css/game.css
index 403a492..7066c03 100644
--- a/src/static/css/game.css
+++ b/src/static/css/game.css
@@ -93,19 +93,18 @@ ul { list-style-position: inside; }
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
diff --git a/src/static/css/index.css b/src/static/css/index.css
index 65fb4e7..1410b9a 100755
--- a/src/static/css/index.css
+++ b/src/static/css/index.css
@@ -84,19 +84,18 @@ a {
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
diff --git a/src/static/css/presskit.css b/src/static/css/presskit.css
index fd37a6f..8264792 100644
--- a/src/static/css/presskit.css
+++ b/src/static/css/presskit.css
@@ -86,20 +86,18 @@ ul { list-style-position: inside; }
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
diff --git a/src/static/css/projects.css b/src/static/css/projects.css
index 1cb5680..160cd49 100644
--- a/src/static/css/projects.css
+++ b/src/static/css/projects.css
@@ -86,20 +86,18 @@ ul { list-style-position: inside; }
     transform: translate(-50%, -50%)
 }
 .nav-link a {
-    font-size: 18px;
-}
-
-.nav-link a:link {
-    color: #66C7F4;
-}
-.nav-link a:visited {
-    color: #CB9CF2;
-}
-.nav-link a:hover {
-    color: #F9B3D7;
-}
-.nav-link a:active {
-    color: #f463ad;
+    font-size: 21px;
+    color: #E6E8EF;
+    font-weight: bold;
+    text-shadow:
+        -1px -1px 1px black,
+        0   -1px 1px black,
+        2px -1px 1px black,
+        2px  0   1px black,
+        2px  2px 1px black,
+        0    2px 1px black,
+        -1px  2px 1px black,
+        -1px  0   1px black;
 }
 
 /* Body */
diff --git a/src/static/img/btn/diaryreadmore.png b/src/static/img/btn/diaryreadmore.png
new file mode 100644
index 0000000000000000000000000000000000000000..350444fbbf69983395d33258030e0f0c5ac0ce35
GIT binary patch
literal 1457
zcmeAS@N?(olHy`uVBq!ia0vp^$v_;!!3-o9&Z^u5q}WS5eO=j~vhp+VnDbo=-2xO6
zFL8}13C>R|DNig)WpMX#0UD!FmRh7>tY=c#y5u2H2}enRpF2>-7|3SuYS5GiQY`6?
zzK#qG8~eHcB(gFvFf#=Bgt&6B2)w!WVCR<g24+4oY8no1DLrWpJ=1!ogqdWdl^A&#
zd8AmRR~3Sc83m&uFziCW<>F#ceql`Vc6XUlpYA0J<S>;4`33)Hc)H!d3n=s5)5S5Q
zV$R;1H~S7N@UR9f_7D~N|9}5w9bU#gG15kLS*s6B-1th(RMo;R_W`%&hTY+tcv%@F
z4;wJHT;vfjki1#Ixk^bg&oQt<S*3$3yM<FOv4^uU+%0)h!i0M>#3Wkd6slV8DOk0{
zDMq#2Q<Q3nQ<}%I*VRU#s&~bSdZ}w)zw~N2C5UawWjvZ$Be?&QiBZCv6VF_VOmiNs
zaCbO)wc*nak@JmDZ=aCAQK0qHqh*81szOZ-ArqU_pOPFGCFU{To;agXdwF9>jY&Z2
zdaJ}t1GX+7$r(o33SOo@?glxj=6*_f7jAy7R()T%*Q)1t?TH6LC--OYFkkEmJZY-;
zSnaUe^&>^nUsTk4HtXnIl#qI4P_@WZ<cL|u;zOK!6_pztRf`WLbev)_lxj-iRyruD
zBP_0xT=J+Xt>pU4CN~`eoy2<@M}_ufU+zhiyDXP^tfA%bfe9N7lBb+8Up{fiJJ-8y
zAA2JbELy7k-x}E*%2hbASzw+A<KiD3SqvUN6*k389v&x7W>>WOr_b>CsQyv;RlU(a
z*?>p&y<a_~darss>e=e?sCTNzq@GfbNxh*SmwHS+F7>jW+MsNl9O?UE^P;6qCZD6c
zIyUcin10svhW9*2tJ#$kS!$=f3J^Ishts)->qgtz2!<3Hp6|icHC;OGJ?$aP@juw_
XWi8g%d^hPaD9L-e`njxgN@xNALu(%p

literal 0
HcmV?d00001

diff --git a/src/static/img/btn/grayscale.pal b/src/static/img/btn/grayscale.pal
new file mode 100644
index 0000000..576ed51
--- /dev/null
+++ b/src/static/img/btn/grayscale.pal
@@ -0,0 +1,259 @@
+JASC-PAL
+0100
+256
+8 4 16
+185 180 175
+236 213 210
+103 122 113
+107 255 123
+144 151 144
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
+0 0 0
diff --git a/src/static/img/btn/nav_l.png b/src/static/img/btn/nav_l.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bd0eea64408427bfd7880ad493d8cd7fee0abc4
GIT binary patch
literal 1302
zcmd^7@oO7(6u-JH4K>v;j#_8MQ|ggP7{_|Vp!wn2UDHebu7tLPV?@2lEeqp@w{pY~
z6^|0nI1WAVNMi{S#x<NHxD1Y%LX;pOT(xReYKc%J;#q?`FyLT{&U*VN{KXHv_xbSN
z<2`uqy&GMa8yz_@0zuGdgd!Ime$25)-A5dM_lphAp<y9%c6RvZV-G)Ya^$nE$Nf&|
z5n+}VmR?N=ubp4H0L=l?X@jILtRPdT@GEa?KRP9DfnS(&GE<I*=EajwICS*l^x0_$
zy7~Ttf1f`FK}Vn{Se{iMqTENl%9`SH`D8@sheWHeY_?7NpnoxQ#r|$b&dc^*&)hRh
z&lNU}8~pJg5oVJKL5<-Ps1FMOIYD?4JtzFpEL$EoO|d~DJ>bLsP%K1;F$_h#W1ex;
z%LOJqFi1)Tx!f@FjNj$)!w5!+y55B6i{_qf@3qW>{+(T!Dfe0#(&O@p=D?~6%sk@{
z_`G927$q<iFf<DSJ~mZUrMMgpvN0kQ6Sa0vm*})qEw!6W-Z09F$3;+5)%;Q?c~LLx
zMr|KP>1@8Cm)`*BxL)p(lDR7bAIW9|h%ceryBcu0^+X89c>u$VR3{Re-PY^_GiO-6
za?+~Ho~QVVJqTt@4u<3TPP1$zjlNZ@8u=_IiL#VyN>Lck88z8%x3r$EOF7SRez322
zLIs2_X}i{-Ee?A69lKIV5uLWop_B1sv8f3;nq_D)l&UBKwM-Yxe6?$I`{im=%Heb=
zxnkPw9;Y=c`6@nNY^7BDDwj+N+$E5fOx^D*ArnH?%(c4Kb-5J?%4x2jV%3x?UrOq!
zWL45BF9p!3NQi})DxW4fTw%f*9%JQN10w+uCUTnENNCo3IT95JHf_|5PTK-FUq}><
zOud3ropZc?wJT2$9NXYyRaN7+!;~u20j6@#L{*Fhh@!7|N}26e0C4$21tBUkf)Z=?
z5=@KaIYhQ%pp>lFV+AE#U?~v}L`gTItQr`e)`J2FMEzsn{<r>zID{bAhi|Pr6Ng@T
zVUCRd+J)8}4GD`2ONak&KudRrpLQ1WQiPmdP8T<Jwnm{RJ!fti%0JKl_4W2O**o;p
zS5`Ltj@zz(wDsl>x0S^ct0n%~aWwne#Hw~n|9<9!n>$!={o3itdsCm@_!#^B^T@{L
oAy_+e>d(#n%P+^j{pMa{=*8EY=WY*vxqScVk=X_ElNo09UoU){tpET3

literal 0
HcmV?d00001

diff --git a/src/static/img/btn/nav_ll.png b/src/static/img/btn/nav_ll.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e9fffbb93fae706dd43ed10fd2f9bb3f2e48ea6
GIT binary patch
literal 1327
zcmd^7@oO7(6u-4y8fK=k9^EPh&r!qaf`s*mL84siHNAG<mAKY$NPoD=Ej!1-Zso{A
z6?$ylah5~xhcn(v#DK^37(p{QV|0au5yCNt#;wL86Ee7#fQROX!UV;7`zQRx54`vJ
z@ZRG+czixc&rKgb^z0!Bf)3A+#A%<O_hTg3?`Qd$uRrx^P?$M2HMn!|sXlZx9k`bC
zOGkt$N|?Wp6)v4wItxt$!e4{r&MqP2FJl+48V~)Epuo>f`<-!LL$l(G&-pZPZsODg
z1l{=PiNDVrgrI&X4Hl-fC&}PISp7sr1E_)s-K6O13r^GVcDv`6FM2=SQwoaL?l^6y
z^s4@i{Utw?z*7vH6|@XC8bM=mpk(ndV#&gvb<+(6DUwOx`5vE&CNoJY6^liX@Nnp8
zB+SLfLNH(@T`@Q90v!#6qA(I8Ma!zgvqh)vdF_U?+uhqzXtUE;CPD#Jbb4-8pl9i5
z91Rbna0HJ<08KF<jxxETCM_zd1e3v&8PRBVEQ!iXl~S`#7i`;9LjjzWD$X5?;6=-{
z?CJwJLai1yE%SX4Ick~Pgyd`~0412!ID%#^Z_5CIpp{L+7!P2WmTGv`@S29V>&Uj-
zF<G~!gpToLua{VMI2c|mwCbkK+FiF=u?wr5Br1|zm(nmM+f~JDHjIvENpfh2?>$gM
zNgbg|#+KV_ioK4t=atJjywy~=$k-xVtQ&$%F*GG6b7fT^7bx8+RJQHyu34!|GDely
zCC6)aIHO)JRIu4%Bd2+59Gerk^B^xdRunBEqe8`z8{6)6r4dgkd9Isdw4A1#XRRDt
zkt{Myf=F7#MLnY_CkPHx>6C$G7^S)yBLJSlWkcJ{8t#WO5fN}EZ&&SB(*+o>XN&f7
zt&EYaw|Q%ATN%YUW|PlUG=smJA~m4~VjA~ST8l9NQLXh>Y58s=4!D9|M)2~apl0fw
zEZrb@4pH0;D6zF#MpsihLyB-bO#~73vK_<nRzd*rbaWUzcI$tLeFzF%TUqxn9(d>E
zG{Jty?H%(qB%Gd`-~WFDntwF-g8!IHGsMI~zWDL|lS5)G*x%v@eqW)A?GZ3@{Fk>v
z7ak5iy_5Lt%?<{xoOtCub9}?O7gT$%=||A|*ysIk@b9kQ=)145;+2~>cZ#>IuYS0_
zvi9>|@>R01@oSiPG#NhrqtXrD`NzBU`X43r+l{eB;?{2)`#XK*DdYPCBjNUAH_S}U
K5noKwm;VLqQlY^B

literal 0
HcmV?d00001

diff --git a/src/static/img/btn/nav_r.png b/src/static/img/btn/nav_r.png
new file mode 100644
index 0000000000000000000000000000000000000000..5aa5dccc6d15fc8734145e880fc88d17fa39cc7a
GIT binary patch
literal 1308
zcmd^7?~B`X7?0jvuWmh8k8s|(6NAiHXVJ1{rHsDF9l2ia{O%}gsX>ZlBkPqBF}sCY
z%MQbFhHM0_61sX;Rz@h{R%d0Qt57gPsbL#f-Pu(cQX!s20u~+U3)#&63E%j@^L#!$
zKjC?v^U;;Xi9Jv4fgosNi6o9YxZlyI-6M`=W54Dc80VLcEsXy%w(rsB(I-Ak&N;3p
z`2~uPy_w?QI<a;NS_FjC2FaXSLk_=$oq1RN*-3Hp+{&U8IqYy~S$N?Y2S!)tjydI@
zzrXjN6JroG0!2Z5L3x~Xk9zYL^FEhPM)*Nku!?cBZQ8qo)!Z5T`|sp}Y<K%+*DN0`
zexZNHO@{CYlTPtU0-HsBfgq4mxEIkR{%@mVdE6Aqgz)T;i}=HdFck>|P{cdsnMS>A
z@PG#fX|X6*ntFluyF7jv36O%O8Srw+?Ams>W$q5{?Z|Yc-^vjlmrpQ<R-LDpX@Ah?
zo$|pb9zX$2F(Bw;G9^V!%8?M0z{3eaZTB^i%8Ipe+n@`&Udel0I4Rc58ydk0T1C_A
zcVU#;EHt&sIe<=Ul^!9QJ2LPQ%w`brr8Ij-1unOi3d0x&V3-ygcuKX~s=aGUy4A0w
zt%mG*maE#sP|jpwI9ccz6+NvFta?o^Y_g&ti;^KmVNBBNvfXZ}eOnVH&m=dzoA-o^
z2vt^htYKRi_O*L<wVJ^@ZJ9+6B-15B<t2)tDIuJx=6Nzs70p7er}qYxnjuOURZg#&
zcDv82Mzv7GmP@USVqaj>8J;~2vZAT^ePv{pubEP-XKl-^U`WoggAAi&6!~;o%cN_f
zMtVtrMg?3bCKUM)!D4wjqGAa~t~Ub&z$3V%D$SH?y(bYUk26`lu6NoNz_?<nq~{t{
zjO@I|X%~9(EY31bE>Tld?pB0U_y!0l?7^rKU;vWWwmRk9tyU1Qg<=)KtMhz5Vf0gU
zi{My9wi2M6ZZs0be5A;b0vwDIZX~~<2e7Ob;z2O#p8^lR^*@vc5ajykoh@hLBPU;3
zB$B`Npo<QN_~R?F2mfz@Vt<W4=PZU<BIe@R(x<m?P8f)1q*FESfBg1L`CKe8wY{}>
z@^`59)yb>1JJ;TbZ~u7y(DIcRac=tC)Yz-*GmRsoM>cLBo&O=ax<7YT`Vy3`zy9YR
t>z7}?eCgo$2bXSq^3BaVGs@ZZ`}-c#fBIU)yTb6{>6aE(h^zDT#=q=1m(u_M

literal 0
HcmV?d00001

diff --git a/src/static/img/btn/nav_rr.png b/src/static/img/btn/nav_rr.png
new file mode 100644
index 0000000000000000000000000000000000000000..a247296eee1c52a7192a6acad6b3054972433f3e
GIT binary patch
literal 1323
zcmd^7;cMIk6wlW7dd%xQYOGZYW}_Z)oO0d5ap<9GO|NOq%55z%NX1OEENl_8F5J$W
zU??@j5i}pdH5(`1hY+Kj^TcpFwZeTkjxdH6t@YF@CuHT&2!{^zL#1Z_gkSu@d%qv=
zJ>G-I@6GJ|%+P@c4gdf!G>c;=13nbQ{o%eKEB9P~C!j%b_W1PRt%1Au!vo066T3m_
zK5?277hYk-i>H=P12Y5`tbuZ;m!V^iA?M#Pe+fpyqA))bbdCiYn3EoPD4_l`lgB3k
z;N!RN+C4P@0DVA~Se(`m;^F?Nwx+=$ScSxHTJnrVx8?df-7|&r{<mMNMb+QxxLa=d
zapP0xBVjm&W*CkYbrKni!HFcHvS<{t74h$e<we32&ZN+MPsqg6WSYt(5-}(`5*dv}
z`Q&&6Bskent#zkJ$3u}g2qkdIwj1DF$=&k(t){!vy}hZ@R;O9OA|Y6EdtObX=jeD6
zj*h@!3{Aucnqr6~%;ZYCyrgDQ42h;m$!v9Onaa!6a;rfX9mmolArzOZ?hP9gB-^r`
z+BO)YR*UPl^%@ZywXHTLyPGNjW6Ww2f?3<&G>K5yX44=d5Fkj)b(A&zmg(=fisN-G
z&a11D!$QUHr3x+&f=k7XhUIWh*Q-^X;wmpos;o5REQlyhP4!z%v*X*c5*ZeH+gc=T
zKvdb>^m;9+*RgN=l}ZlXXsLW`e2FVHOi`g2nv&AFiYDTVl;IYuZKvI}sts8|s4}<g
z`mGLcHY&v`GFNKmbpJBX<wX80k(XUN4ws=ZvFa+#w)cVBOs3R4-_0?4PFK%zc8;sc
zHXg-^SXM$MgVfcd7>{Ul#zaU)t*s|80?nX`sjsu9_m+aiM3l)pHD{yc5r|;0C8toY
zAo#{}f_=HIj-foWE|68-6mDj4U91xcoj;P*6AS@q_SKDY;bt>Q@I|8np_M67BO4u-
zZejutsUAs`xq6*6w2Z;v5}3?lVMtqX5=h=oi9|9RA0h6z^*_WO0EDi*el@tb@5N_k
zu%%zyz*?XI@#Or%-v1lG!e4_A2amZhi%l-(OCNr7;-HiW_hk#KKkrp9WQMX9cld>&
zOB3?MgP)9^!>^Q{WuE|c{ToN3{eN8a{cGXp$M+v1f1FwY&aor*tHUonjg9?d%-*Z{
zD^Drk?VULKXL>~Xz4^oY?|uHozOSyoo8$L=_UNwj+fSFi2cEoTez{dz+rHz3+39)g
I+7!L=FY)G`MF0Q*

literal 0
HcmV?d00001

diff --git a/src/static/img/btn/skillbtn_diary.png b/src/static/img/btn/skillbtn_diary.png
index ad77ded78e0fd29fd446a9145262543482c91644..a0c21da13e7eaa4348e1a87354119bab685c3160 100644
GIT binary patch
delta 827
zcmV-B1H}B}3b754Ee8`DJETA7MX@wn1AhpH-j#X)000GaQchF<|Ns90`?d~K0008?
zNkl<Zc%0Rk+mhlS5QaHKGU&Yjqk3bu*gir-z_PaD#kMBS5c=b%LpK_?fyFBgfew)Q
zaiwJd1NGtamF6Ev%|2#-o#p8B=Hesgm}9xdfRytiBGu=Mm}o!~>Qze7Vx?XPEq~>|
zpoVZcHH5HVO$8*_zf#FrygQlP9@f+_*nk|lVQfZfaK@<SxLao~%C(<c>v(G=%5ifk
z7G$U~3a2x`A~%k$)+$naDK#R~%?w)OzE3Zay&N*Vw_^oix&?EhtDv;jxWRvZa0x7Y
z%_KV-RM3dSn!l+|wrI7U<dC~Y3xBU}FjJ;M4TYmrm!l0?Io%p4><C_l*@*=rj!9Y%
z;0dxwTvTkR@;E%jdkVhe&xKfT2i;f*Iovv}LMhI4?{2}NO&mlx(@?ab9^ScOZkSt;
z9%;t|UP%+B{YA-`5@k{1ONmYi8}USb_=1i#V*_I?W-!QHp(a8Sn1Kl1D}Qw#sObbv
zN!}{9p8*jW%vd^l>PY01p;oc23lf8<O(JYcO;un@`z*2=(kfOIQ`<ldBXt>BA<`!)
zr6A~VE9yBGGUvJsTGVA7Xb4Eplse#2TWdA4jmkjM8(8W<4OOZMtX;k{v2?$f8Pw}U
zts#}b4$+v1<yF8?aXD*!lYa&ivB@wIz_aVAH67LABkCS>$?DoTQ_aGfq}qt3ZX`3M
z*50V8QFoKlHGYf5Ro7N%vY6UcZLVin>!l3VVyt!ckUFcq3)b$o8R!n(s4uCT&BFq_
z>Zt{o>vsbn^4_T1#AjwFvE!B}Hb!7!cE5Qu=7jp{`*`Kqc`n4>(SJVF+VS3ry_>V8
z&H~#w=DvLvS*x|{%OLu`QAqM9kp+8>RHf0oaeTLhPsFaZjv=V`O2;Z|vA5@`i85BR
zPV=y(x)xeZ=X2gtO9;PWEo1+5D#x#lPFKQOEF910(@c_n$Ew&`HFO*3ip+blffd)^
zvG|+YgkYp5-RgCaGbpuU^*8r-o)3KKS;lvsyL{sr(O(bjWp$ZcYmfi{002ovPDHLk
FV1oJsl`{YU

delta 490
zcmV<G0TuqS4dV)sEe8WJ0TF&tudy^+1An+pzb5to000GaQchF<|Ns90`?d~K0004|
zNkl<Zc%0SP%aVg25Cu?aqE^TM|5Z1cs!W5ZJQ{4Ab}@G`3)JH+21(-ZqFBv1a3B&F
z%^<;~E(SGY7N?@IX!L^C;A^l8qDA}F2}y{Hb*e!n(}lF4YBhDShpLEvzyCr7P=8ke
zVAfWNq})~g#o_9t<~9y>6|!Vx?m|9Xs2ejU*;&X&kIZc~_fCL0$g2=k7`D*HIF17s
z8nyGx9`gAlr*45@4iz&#_j2%vS6imfPwQY*mZVd?xU)O@N-nNlvJV1xuuQXT94lAZ
zvS-Twm#`~SwmEBVz48k+U7piaUw^Xk;|0f4P+9+}P^gtBp+nuuR@Jy{pDHZdrC!V|
zuih)mO+lY3E!(Y%$|kB>*?zTE_O8m6EvFz=wWgq36_r&{i?R@Z8j3Q~hS=C=>4fk}
zb*hb%W%>9m_noSeFlE`zyHCBkC!<QHpi=hj5{;>JeMf(9sj``k)jzKSmsd4cMY&wF
zw^Z&%Yf}|X0atciQ`oDfw_S0gFrT~S)v429XLenE<IM`cxyvshw>HH6H}^B|2OfHt
g@yvUdC*BeL0v(zo#%`4QFaQ7m07*qoM6N<$f}=<6djJ3c

diff --git a/src/static/img/btn/skillbtn_press.png b/src/static/img/btn/skillbtn_press.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9e1dbdeb009d1afd990b7c54cfad9217a382a24
GIT binary patch
literal 1441
zcmeAS@N?(olHy`uVBq!ia0vp^p+IcT!3-q5#J^brDfSXiUsv|0tbD>8k^&o^8v}*J
zOI#yLg7ec#$`gxH8QgtbfW|14r4}g|>zNd`E_n!4!ckJ-=MIzsDQEC%(3A&KEa{HE
zjtmSN`?>!lvNA9*GX(gAxN@)v?A)?`N|;G{Rblr3Y6rIzj}(iZG>43|lAdWj24+5Q
zu04=Z(=hTd0+}=lMnhnDg~0P&Z@&S3#F*sm?!wT)D(eB{u$Bb*1^)*EhTq%xf`O7x
zJY5_^D&{<$aeGs<0*|YpRiecI|MmO|I~&>_@Yv10n-#rPd$vGe$^JDPf>~b}8O^nx
zYGe_7Uis~nLa{6>C#!Fot;&C6EP}Z-ci5g<GUZ&r3in$_bWUw?yZdyDhCr$Em7V{6
zzJ^Axl-t_>s`XpIUxj9_>w)Vha9@cy(ti6usn+XX!XcR_RJ9oPTiZ;C3*PJWmg#^*
zf|suQ%`1N5(aX))xtHuV(R#YJZM|NF;bPwv;$qT#Pg!#xe(Ta`kUp@iN{=}%amg=h
zx1QVEUc|`;zrKIL%;g)G3#-7D$b3Q5ZBM?%t=xGj+xz+!HiM0;qD)@dcHG!$78-c(
z?>;u4SIIK@L3g89U6>NJadO)+vyQzBcZp{8A7?Q8x{+hn^6z_}7BmQoG}$gMp7^RW
zD!QFJ_-TMH(>eFtW!HkY2en@RC{*zF)cn_1s@bX@Y>oT$YN}F0+P;M+t#qD*s%-0B
z8(0y#a$30G!Mm$7YNs>a)(%`~+<hf&ni50bOtGu0;}}=+t7hNbYr5*q?;F<-1Xt<=
zeVr`k_G(qQmsZ_OmW}IJgEueU>9{&1vE`H23ZwO9d(R2|eo^~j)j8gyCs`|GpT4T?
zIausmD)*Xq{Ue`a%9(Pj&+pu8wlBlH(Bk>OXFm_PpEuf9`R>zE<3;w?tKD}$ej*hK
OO5dKYelF{r5}E*D2Q#Sv

literal 0
HcmV?d00001

diff --git a/src/static/img/ele/diarybottom.png b/src/static/img/ele/diarybottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee6cf22259bf444a95dad6d69ddd88c2f31379fa
GIT binary patch
literal 1131
zcmeAS@N?(olHy`uVBq!ia0y~yU=jtgr8t;@r1|H#4M2*$#M9T6{V6M-n51TMwOI;K
zNW8=~q9iy!t)x7$D3!t8#|3DNLRo5&g0Y@SVe68IKqVX{1%B>88Dk)u!K*=29!RmI
zJNh~@Fl_AS{*%bcz`)E9;1lA?!6LA8%lbE0FQr!%X8*6AFnt0@$0!&LfsqjcI`8b&
zfIekR@^*KbQlIVx%75%7L4Lvi!GJ-^o7oL0w8qoLF{EP7+baionGHEu1K%+Joj!-b
ztjvjVx6o%Thomp5O#h#}Wd7h3(%7XH5Xh=E^YKgJ4|>g70RgP5Ry64pNQN{vX$8F1
zI>D3~z{<7CA=R=Y+)*rI58G5vF^`K)Mq)cExEC$zVcljbdS5F^=LC~A%W5a}$O9=N
zVXTn{=4kBcn#&q%Vzy3WQP&x!y=yhXM60qK!>={`3lWSBa0~zUC+A_v#KZ+lty%su
YhzO^<Zkl`MBPa$vUHx3vIVCg!0L)~8CIA2c

literal 0
HcmV?d00001

diff --git a/src/static/img/ele/diarycontent.png b/src/static/img/ele/diarycontent.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf1ee7ffc95c33d06fbdd250e8ddf795a52c8138
GIT binary patch
literal 7598
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
aSBz4%EVs*|=7s<Kcd0?OmES8`h5Z|{bY}4Y

literal 0
HcmV?d00001

diff --git a/src/static/img/ele/diaryheader.png b/src/static/img/ele/diaryheader.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa8fe20b37e60f77d50c304f87ade52e6babaa9c
GIT binary patch
literal 1727
zcmeAS@N?(olHy`uVBq!ia0y~yU=jtgPjD~;$qd%VQ-BnEiKnkC`%_jvF=@d{|2Gvt
zA@LH|h?3y^w370~qErTV9~Yo83T3H93dVXSg{?~-0+n!-6!^IVWsHGr2CoK9c_77-
z?&#~tz_78O`%fY(0|PTdfKP}k2aCX)YY%pAS#MzGBcrC_;Fi*p=Fl^(XG)k!Mp}uH
zhml8$MS4{s$e2+u8Un*E1Y9mI2IUvVByV?@DfQ`Ip!~;N666>B|3Aa^Q@p_Z!p!37
z;uumf=k3jddA9->TphOyMIQM7Kc71=_`wZDLza~4wDyFLOR6`tO4jw?*esjO$Roa<
zFXu|#s;=+b@86jB+Mw;TT3oF~+zW{VrJ|D_yjAXgXw)Ts_iDw~(>iURHR5Vb;$GNv
zJBsYFKK&@-Xq<@5xy=%GdZO#?gwJoVo>}pEPuE@zv!w6$f3W*0zVQ#;5t4HxuUxyk
zUc5V5bkU8LyYIRqWma3<b(mM<FfUJhv3&LZ))h(8Qb$Wf*+X*<dx$)aoD=@>jq|7A
zW8(6?Nw1O?c5RiEueIR{%{g-9&HeRB|F?H7pF2z5)b5Xq@MQl@eC>O+!ct0pp4150
z$a|Tw#<r_pE290qt6}I-N72=bxLySYu1Io~D_a?Gw97_^D|F3?!;1or&RWq_6(X`K
zLNwIiks(k)s+>@(*0pDXK<2__$3u^n#k~D_bJutGg<YvTW_>xf@4MT=F4rBizCPQx
z>PFN1_toJ*y)BZ=_k~-v#1gL^`n)*csL`3|iaelj$ISb`D}m-{rq#b+Uw^d@s3NIO
zw0-t@b0<;nLVwZr^KujW1CAEm5kC5TMUrF4!5Pn8fY$uFsS$FJBQ)T+R?0!uP=VjU
zq6MC!R}8-8%SbQh%KE{2J;ZTkQxNM?E-%q3S{k7Ns}_t3;0li`^7?x|IjrBiekG^?
N@O1TaS?83{1OP<0j#K~u

literal 0
HcmV?d00001

diff --git a/src/static/xml/blessfrey.xml b/src/static/xml/blessfrey.xml
index c06682a..e3eb783 100644
--- a/src/static/xml/blessfrey.xml
+++ b/src/static/xml/blessfrey.xml
@@ -7,6 +7,13 @@
 <language>en-us</language>
 <webMaster>chimchooree@mail.com (chimchooree)</webMaster>
 <item>
+<title>playing FlightRising with spreadsheets </title>
+<link>https://www.blessfrey.me/diary/entries/210513</link>
+<description>My dragon breeding spreadsheet is really coming together, so I thought sharing it would be a fun ... </description>
+<pubDate>Thu, 13 May 2021 05:00:05 GMT</pubDate>
+<guid>https://www.blessfrey.me/diary/entries/210513</guid>
+</item>
+<item>
 <title>april 2020: will patrols ever work? </title>
 <link>https://www.blessfrey.me/diary/entries/210501</link>
 <description>thursday, april 1 - April Fool's Day I got gnomed by my group leader, and FlightRising's ... </description>
@@ -104,12 +111,5 @@
 <pubDate>Fri, 01 Jan 2021 05:00:05 GMT</pubDate>
 <guid>https://www.blessfrey.me/diary/entries/210101</guid>
 </item>
-<item>
-<title>blessfrey graphic updates + mockups </title>
-<link>https://www.blessfrey.me/diary/entries/201224</link>
-<description>I iterate over the graphics periodically, so I can practice without worrying about polish. Here's ... </description>
-<pubDate>Thu, 24 Dec 2020 05:00:05 GMT</pubDate>
-<guid>https://www.blessfrey.me/diary/entries/201224</guid>
-</item>
 </channel>
 </rss>
diff --git a/src/views/diary.tpl b/src/views/diary.tpl
index 3aff561..7757105 100644
--- a/src/views/diary.tpl
+++ b/src/views/diary.tpl
@@ -14,21 +14,36 @@
             page = max_pages
         end 
 %>
+        <div class="diary-dir-left">
         % # << is always active link pointing to 0
-        <a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        <a href=/diary/0>
+            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
+        </a>
 
         % # < points to 0 if page 0 or below
         % if page <= 0:
-            <a href=/diary/0 rel="nofollow">&lt;</a>
+            % #<a href=/diary/0 rel="nofollow">&lt;</a>
+            <a href=/diary/0>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
         % # < points to previous page otherwise
         % else:
-            <a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            <a href=/diary/{{page - 1}}>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
         % end
 
+        </div>
+        <div class="diary-dir-numbers">
+
         % # fill out number cluster to the left when page is high
         % if max_pages > cluster and page > max_pages - cluster:
             % for j in range(cluster - max_pages + page):
-                <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                </div>
             % end
         % end
 
@@ -36,30 +51,49 @@
         % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
             % # bold current page number
             % if i == page:
-                <b>{{i}}</b>
+                <div class="diary-dir-number">
+                    <b>{{i}}</b>
+                </div>
             % # form neighboring numbers into links
             % else:
-                <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                </div>
             % end
         % end
 
         % # fill out number cluster to the right when page is low
         % if page <= cluster - 1 and max_pages > page + cluster:
             % for j in range(cluster - page):
-                <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                </div>
             % end
         % end
 
+        </div>
+        <div class="diary-dir-right">
+
         % # > points to max if page is at or above maximum
         % if page >= max_pages:
-            <a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{max_pages}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
         % # > point to next page otherwise
         % else:
-            <a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{page + 1}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
         % end
 
         % # >> is always active link to maximum page
-        <a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        <a href=/diary/{{max_pages}}>
+            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
+        </a>
+        </div>
     </center>
     </div>
 
@@ -75,22 +109,24 @@
                     {{!s[1]}}
                 </div>
                 <div class="snippet-info">
-                    <b>{{!s[2]}} 
-                    • <a class="social-link social-twitter" 
-                        href='http://twitter.com/share?text={{s[4]}}
-                        &url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' 
-                        target="_blank">tweet</a> 
-                    <!--• <a class="social-link social-fb" 
-                        href='http://www.facebook.com/share.php?u={{s[3]}}'>facebook</a> -->
-                    % message = "Hey,+check+out+this+post:+" + s[1] + ".,+" + s[3]
-                    % message = message.replace('+','\+')
-                    % message = re.sub('\s+?','+', message)
-                    % message = message.replace('\\','')
-                    % message = re.sub('<.*?>','', message)
-                    <!--• <a class="social-link social-email" href='mailto:?body={{message}}'>email</a>--></b>
+                    <b>{{!s[2]}}</b> 
+                    • <a class="social-link social-twitter" href='http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree' target="_blank">tweet</a> 
+                    % if len(s[5]) >= 1:
+                        <div class=snippet-tags>
+                            % for j in s[5]:
+                            <div class="snippet-tag">
+                                {{j}}
+                            </div>
+                            % end
+                        </div>
+                    % end
                 </div>
                 <div class="snippet-link">
-                    <a href={{s[3]}} rel="nofollow"><b>read more</b></a>
+                    <a href={{s[3]}}>
+                        <img src="/static/img/btn/diaryreadmore.png" alt="read more" width="99" height="84">
+                    </a>
+                </div>
+                <div class="snippet-bottom">
                 </div>
             </div>
         % end
@@ -108,22 +144,36 @@
             page = max_pages
         end 
 %>
+        <div class="diary-dir-left">
         % # << is always active link pointing to 0
-        <a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        % #<a href=/diary/0 rel="nofollow">&lt;&lt;</a>
+        <a href=/diary/0>
+            <img src="/static/img/btn/nav_ll.png" alt="&lt;&lt;" width="33" height="29">
+        </a>
 
         % # < points to 0 if page 0 or below
         % if page <= 0:
-            <a href=/diary/0 rel="nofollow">&lt;</a>
+            % #<a href=/diary/0 rel="nofollow">&lt;</a>
+            <a href=/diary/0>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
         % # < points to previous page otherwise
         % else:
-            <a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            % #<a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
+            <a href=/diary/{{page - 1}}>
+                <img src="/static/img/btn/nav_l.png" alt="&lt;" width="27" height="29">
+            </a>
         % end
 
+        </div>
+        <div class="diary-dir-numbers">
+
         % # fill out number cluster to the left when page is high
         % if max_pages > cluster and page > max_pages - cluster:
             % for j in range(cluster - max_pages + page):
-                <a href=/diary/{{max_pages - cluster * 2 + j}} 
-                    rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{max_pages - cluster * 2 + j}} rel="nofollow">{{max_pages - cluster * 2 + j}}</a>
+                </div>
             % end
         % end
 
@@ -131,31 +181,49 @@
         % for i in range(max(0,page - cluster), min(max_pages + 1,page + cluster + 1)):
             % # bold current page number
             % if i == page:
-                <b>{{i}}</b>
+                <div class="diary-dir-number">
+                    <b>{{i}}</b>
+                </div>
             % # form neighboring numbers into links
             % else:
-                <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{i}} rel="nofollow">{{i}}</a>
+                </div>
             % end
         % end
 
         % # fill out number cluster to the right when page is low
         % if page <= cluster - 1 and max_pages > page + cluster:
             % for j in range(cluster - page):
-                <a href=/diary/{{page + j + cluster + 1}} 
-                    rel="nofollow">{{page + j + cluster + 1}}</a>
+                <div class="diary-dir-number">
+                    <a href=/diary/{{page + j + cluster + 1}} rel="nofollow">{{page + j + cluster + 1}}</a>
+                </div>
             % end
         % end
 
+        </div>
+        <div class="diary-dir-right">
+
         % # > points to max if page is at or above maximum
         % if page >= max_pages:
-            <a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{max_pages}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
         % # > point to next page otherwise
         % else:
-            <a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            % #<a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
+            <a href=/diary/{{page + 1}}>
+                <img src="/static/img/btn/nav_r.png" alt="&gt;" width="27" height="29">
+            </a>
         % end
 
         % # >> is always active link to maximum page
-        <a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        % #<a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
+        <a href=/diary/{{max_pages}}>
+            <img src="/static/img/btn/nav_rr.png" alt="&gt;&gt;" width="33" height="29">
+        </a>
+        </div>
     </center>
     </div>
 % include diary-boxes.tpl
diff --git a/src/views/footer.tpl b/src/views/footer.tpl
index 0522f4b..ed71641 100644
--- a/src/views/footer.tpl
+++ b/src/views/footer.tpl
@@ -1,6 +1,6 @@
 <!--Footer-->
     <footer>
         <div class="footer-content">
-            &#169; chimchooree {{year}}<br>
+            &#169; chimchooree 2020-{{year}}<br>
         </div>
     </footer>
diff --git a/src/views/logo-bar.tpl b/src/views/logo-bar.tpl
index 1e7c234..5dd8b56 100644
--- a/src/views/logo-bar.tpl
+++ b/src/views/logo-bar.tpl
@@ -1,5 +1,5 @@
     <div class="whitespace"> </div>
 
     <div class="blessfrey-logo">
-        <center><b>blessfrey.me</b></center><br>
+        <center><b></b></center><br>
     </div>
diff --git a/src/views/nav.tpl b/src/views/nav.tpl
index 37583e6..593ae8f 100644
--- a/src/views/nav.tpl
+++ b/src/views/nav.tpl
@@ -4,7 +4,7 @@
         <div class="nav-bar"></div>
         <div class="nav-index">
             <a href="/">
-                <img src="/static/img/btn/skillbtn.png" alt="home" style="width:85px;height:55px;">
+                <img src="/static/img/btn/skillbtn_home.png" alt="home" style="width:85px;height:55px;">
             </a>
             <div class="nav-link">
                 <a href="/">home</a>
@@ -12,15 +12,15 @@
         </div>
         <div class="nav-game">
             <a href="/projects">
-                <img src="/static/img/btn/skillbtn.png" alt="projects" style="width:85px;height:55px;">
+                <img src="/static/img/btn/skillbtn_games.png" alt="projects" style="width:85px;height:55px;">
             </a>
             <div class="nav-link">
-                <a href="/projects">projects</a>
+                <a href="/projects">games</a>
             </div>
         </div>
         <div class="nav-diary">
             <a href="/diary">
-                <img src="/static/img/btn/skillbtn.png" alt="diary" style="width:85px;height:55px;">
+                <img src="/static/img/btn/skillbtn_diary.png" alt="diary" style="width:85px;height:55px;">
             </a>
             <div class="nav-link">
                 <a href="/diary">diary</a>
@@ -28,10 +28,10 @@
         </div>
         <div class="nav-presskit">
             <a href="/presskit">
-                <img src="/static/img/btn/skillbtn.png" alt="presskit" style="width:85px;height:55px;">
+                <img src="/static/img/btn/skillbtn_press.png" alt="presskit" style="width:85px;height:55px;">
             </a>
             <div class="nav-link">
-                <a href="/presskit">presskit</a>
+                <a href="/presskit">press</a>
             </div>
         </div>
     </div>