UPDATE - redesign - new nav bar, new organization, new main pages, new art page, study page (no content yet), games page with STTMT, update to me; new diary entry

src/diary/entries/220831

@@ -1,14 +1,11 @@
-<!---->
+<!--220831-->
 <h1>blessfrey.me under construction </h1>
-august 31, 2022<br>
 #webdev <br>
 <br>
-The website doesn't look how I want it yet! <br>
+<p>The website doesn't look how I want it to yet! </p>
-<br>
+
 <h2>working on it </h2>
+<p>Iterating over the website. Lots of placeholder pages are up, but few are close to my current plan. This version will be better than ever, with embedded HTML5 applications and more artwork. </p>
 <br>
-Iterating over the website again. Lots of placeholder pages are up, but few are close to my current plan. This version will be better than ever, with embedded HTML5 applications, a content mix planned for articles, and more artwork. <br>
+Last updated May 8, 2023 <br>
-<br>
-<br>
-Last updated August 31, 2022 <br>
 <br>

src/diary/entries/230227

@@ -1,15 +1,14 @@
 <!---->
-<h1>Godot Tutorial: Chat Room using WebSocket </h1>
+<h1>Godot 3 Tutorial: Chat Room using WebSocket </h1>
-august 31, 2022<br>
+#godot #webdev <br>
-#webdev <br>
 <br>
-<p>Follow along to make your first mini WebSocket application in GDScript (with a little JSON). The client and the server will be two separate projects. I build upon the <a href="http://web.archive.org/web/20220928131714/http://www.narwalengineering.com/2018/07/01/godot-tutorial-simple-chat-room-using-multiplayer-api/">NetworkedMultiplayerENet chat room tutorial by Miziziziz</a>(archive link) and the <a href="https://docs.godotengine.org/en/stable/tutorials/networking/websocket.html">HTML5 and WebSocket tutorial in the Godot documentation</a>. </p>
+<p>Follow along to make your first mini WebSocket application in GDScript (with a little JSON). The client and the server will be two separate projects. I build upon the <a href="http://web.archive.org/web/20220928131714/http://www.narwalengineering.com/2018/07/01/godot-tutorial-simple-chat-room-using-multiplayer-api/">NetworkedMultiplayerENet chat room tutorial</a>(archive link) by <a href="https://www.deeproot.dev/">Miziziziz</a> and the <a href="https://docs.godotengine.org/en/stable/tutorials/networking/websocket.html">HTML5 and WebSocket tutorial in the Godot documentation</a>. </p>
 
 <hr>
 
 <h2>Why WebSocket over UDP? </h2>
 <p>UDP is fast but inaccurate. It is best used for real-time action gameplay. TCP is slow but accurate. It is best for sharing data. You can read more about it on the <a href="https://docs.godotengine.org/en/stable/tutorials/networking/high_level_multiplayer.html">Multiplayer doc page</a>. </p>
-<p>WebSocket uses a TCP connection. Ultimately, I am studying Godot to make a slow-paced adventure browser game, so this is one of the protocols I am considering and the protocol we will use for the tutorial. </p>
+<p>WebSocket uses a TCP connection. Ultimately, I am studying Godot to make a slow-paced adventure browser game, so this is one of the protocols I am considering and the protocol we will use in this tutorial. </p>
 
 <h2>Do I need a dedicated server for testing? </h2>
 <p>Nope! You can test client & server code on your own computer. I am only testing on a single computer at home for now without accessing an outside VPS, etc. </p>
@@ -689,6 +688,8 @@ func _ready():
 	join_button.connect("button_up", self, "join_chat")
 </code></pre>
 
+<p>Enjoy^^ </p>
+
 <br>
 <p>Last updated February 26, 2022 </p>
 <br>

src/diary/entries/230508

@@ -0,0 +1,44 @@
+<!--220831-->
+<h1>blessfrey.me - new look, new me </h1>
+#webdev <br>
+<br>
+<p>Redesign time! Blessfrey.me is my personal website full of my own interests, art, and research, and it doesn't need to be any more than that. </p>
+
+<h2>redefining the goals </h2>
+    <p>College, social media, other people's blogs, everyone tells you to laser-focus on a niche, release updates at an algorithm-dictated frequency, and always work towards SEO optimization. When I do something, I try to do it right, but that is a silly amount of energy to put towards the content mix over actually enjoying programming and art. I don't have the same goals as these people with a full-time social media job, and I'm okay with that. </p>
+    <p>I also never looked up to any influencers, so it's not like that advice helps me emulate my role models. The bloggers and game devs I admired as a kid in the 90s-00s had inconsistent updates, wrote about whatever they felt like, and clearly worked more for their own pleasure than their target audience and "the algorithm." No refined professional touch, no politically correct tone, and no telling when updates would drop, but they had something the repetitive mills and the smaller content creators who emulate them don't. I can't even articulate what that something is, but I learned a lot more from those kinds of people. </p>
+    <p>I'm no entrepeneurial mommy blog influencer on the first page Google results, so I just shouldn't care about their process. Even if I was, it would still be important for me to have some cute little site on the side! Maybe it won't bring in $10K/month or clout, but there's still value to a dinky online portfolio. </p>
+
+<h3>made for me </h3>
+    <p>From this point forward(?), I'm going to update my diary whenever I feel like it instead of postponing and rearranging entries to meet a biweekly schedule and recommended content mix. </p>
+    <p>I'll worry more about blog-worthy topics than meeting the godot indiedev niche. And I'll share more of my work in general. I draw and write, but most of it stays locked up in a hard drive. Why not share? And even if no one ever cares but me, it's nice to look back on them in a curated little gallery. </p>
+    <p>Also, it's just convenient to host my OCs and art somewhere. <a href="https://toyhou.se/">Toyhou.se</a> and alternatives are popular for a reason, and, if I don't really care to participate in the community over there, a custom coded website is so much less clunky. </p>
+
+<h3>hosting my study wiki </h3>
+    <p>More than art, I'd like to have my research on here. I spend a lot of time studying and taking classes and have produced notes that, depending on the circumstances, are more valuable to me than Google. (Not that Google's that great of a resource anyway these days.) Other people ask to see my notes sometimes, too. I think they may be useful to others if I host an online copy instead of printing off a few pages and keeping the rest sealed away, only viewable through private software. So why not? </p>
+    <p>Of course, this necessitates the next big tech upgrade: adding wiki software to Blessfrey.me. Once my husband's LazyWiki project is installed on the server, I can make a wiki with lazy linking, meaning all I need to do is write the articles and all the wiki links will be generated by the software as the page loads. Wikis with large communities may be able to insert individual links with more intentionality and at a step that saves on computing power, but lazy evaluation suits Blessfrey.me's needs perfectly. The only change is, I'd like the online copy to be read-only to prevent vandalism and people using my website to transmit illegal things. </p>
+    <p>I think the best way to use wikis would be to give each topic its own database. So one can hold my Bible, church history, and Bible scholar notes, then I'm sure I'll want a more technical one. But it may be cool to keep another as a worldbuilding bible or game manual or something.  </p>
+    <p>When this functionality is added, the wikis will be kept on the <a href="/study">study</a> page. </p>
+
+<h2>reorganization</h2>
+    <p>Since Blessfrey.me is more general now, the hierarchy of the site will no longer revolve around the current game I'm working on. Instead, I break the navigation into diary, games, characters, art, study, and an about me page. </p>
+    <p>HTML5 lets you embed games directly into your pages, so I finally added some to the <a href="/games">games</a> page. My other gamedev and tech topics like <a href="/gdd">gdd</a>, <a href="/milestones">software requirements</a>, and repos can branch off that page, too, but I think most people would be more interested in the games, hence the page's name. </p>
+    <p><a href="/characters">Characters</a> will be my OC database, so people can see them for Artfight or rp or whatever. But honestly, I just like looking at them displayed on their own page. It reminds me of the cast page of a promo site for an otome game. Those are always the most stylish pages with the most prose. Flash's death killed my old favorite designs, so here's <a href="https://www.otomate.jp/code-realize/switch/chara/?page=cardia">whatever the latest Otomate game is</a> as an example of what I mean. </p>
+    <p>The <a href="/art">art</a> page can show my pictures. With the exception of OotD/MotD, fashion (designing, patternmaking, sewing, styling) takes a much longer time to produce blogworthy updates than programming and drawing, so it's always awkward to decide if and how to include it with everything else. I think photos and the occasional blog post is the easiest solution for now. Plus, with the variety of media it brings to the page, it makes me feel more comfortable sharing game screenshots and other fun-but-not-necessarily-art pictures. </p>
+    <p>For the <a href="/me">about me</a> page, I want to provide a brief description of what I do, how to contact me, and what Blessfrey.me is. I'm kind of private and kind of boring, so there isn't much to explain anyway. It was too general before, sharing too much information about each project, when that information is better situated on the projects' pages. </p>
+    <p>More specific pages were moved under these main pages. Also, more specific pages, like the gdd page, has become a hub for all my game design documents rather than just featuring my latest game. </p>
+
+<h2>nav redesign </h2>
+<p>The biggest visual change is the navigation bar. It used to be modeled after an RPG skillbar, and I was even trying to mimic the 'cooldown' animation after clicking an icon. </p>
+<img src="/static/img/ent/oldblessfrey_navbar.png" alt="(Screenshot: The old nav bar was between a life meter and an energy meter. Each link was represented by a skill icon.)"> <br>
+<p>The icons are supposed to be plumb between the heart and star. There are also text labels, so ESL users can machine translate or deaf users can hear them or whatever. They are supposed to be small and nestled unobstructively under the corresponding icons. As you can see in this recent screenshot, it takes a lot of maintenance to keep that look over time. After the most recent css break, I gave up. I just got rid of it. Maybe again someday, but that thing's gone. </p>
+<p>A simple fixed stripe of periwinkle across the bottom with some links is all I need for now. Also, I can add the cute hover, active text decoration that mobile users unfortunately don't even realize is there. <a href="https://www.dafont.com/mitochondria.font">Mitochondria</a> is such a cute font. </p>
+
+<h2>eternally refactoring </h2>
+<p>You know I haven't updated the website without removing lots of redundant, outdated code, and finding shortcuts. </p>
+
+<h2>enjoy </h2>
+<p>I'm really happy with what I've made so far. Maybe I'll actually show it to people more often instead of always thinking, "when I have something better, I'll show them." I already have lots of cool things, so why not share now? </p>
+<br>
+Last updated May 8, 2023 <br>
+<br>

src/diary/entries/230522

@@ -0,0 +1,11 @@
+<!---->
+<h1>ditching the Bible in a year reading plan </h1>
+#christian #bible <br>
+<br>
+<p>The website doesn't look how I want it to yet! </p>
+
+<h2>working on it </h2>
+<p>Iterating over the website. Lots of placeholder pages are up, but few are close to my current plan. This version will be better than ever, with embedded HTML5 applications and more artwork. </p>
+<br>
+Last updated May 8, 2023 <br>
+<br>

src/diary/entries/250831

@@ -1,6 +1,5 @@
 <!---->
 <h1>starting a new game project? don't forget to add these!</h1>
-august 31, 2022<br>
 #gamedev <br>
 <br>
 All the new gamedev project essentials. <br>

src/index.py

@@ -126,7 +126,7 @@ def find_gallery(name):
         gal.append([["AnimeEnding.png","A still from an attempt to emulate the Little Busters ending animation. Man, animating is hard."],["Bless+Rune.png","Rune and his dinosaur mother"],["Blessfrey.png","Emulating old RPG coverart like Elden Gate in mixed media. Don't feel like working on it anymore."],["FlightRising.png","his oc dragon form in FlightRising"],["RuneHeadshot.png","emulating the art style of Battle Girl High School"],["CawfeeCakes_Artfight.png","2022 Artfight attack by CawfeeCakes"],["Teriuuuu_Artfight.png","2020 Artfight attack by Teriuuuu"]])
     if name == "Silke":
         gal.append("Verpets")
-        gal.append([["Silke.png","emulating the art style of Yuu Watase in pixelart"],["Verpets.png","Silke's sprite in Verpets"]])
+        gal.append([["Silke.png","emulating the art style of Yuu Watase in pixelart"],["Silke_png.png","still emulating the art style of Yuu Watase"],["Verpets.png","Silke's sprite in Verpets"]])
     if name == "Tessa":
         gal.append("Blessfrey")
         gal.append([["Tessa.png","Pixelart of Tessa in athletic wear"],["picrew.png","made in あの子がこっちを見ている on Picrew"],["FlightRising.png","her oc dragon form in FlightRising"],["RamblingRoses_Artfight.png","2020 Artfight attack by RamblingRoses"],["Lune_Archon_Artfight.jpeg","2022 Artfight attack by Lune_Archon"],["ElissaKarminakria_Artfight.png","2020 Artfight attack by ElissaKarminakria"],["gemhue_Artfight.png","2020 Artfight attack by gemhue"],["Cyan_moo_Artfight.png","2020 Artfight attack by Cyan_moo"]])
@@ -161,11 +161,12 @@ def list_snippets(articles):
         text = article2list(article, loc)
         a.append(find_title(text))
         a.append(prepare_article(text, path))
-        a.append(find_timestamp(text))
+        a.append(find_timestamp(article))
         a.append(find_url(path))
         a.append(find_social_title(text))
         a.append(find_tags(text))
         result.append(a)
+        print(result)
     return result
 
 # List latest 5 articles as headline links
@@ -215,13 +216,13 @@ def find_content(text):
     pos = 0
     for line in text:
         # skip to line 5
-        if pos > 4 and pos < length:
+        if pos > 3 and pos < length:
             content += line
         pos += 1
     return content
 
 def find_tags(text):
-    new = text[3].replace('<br>','')
+    new = text[2].replace('<br>','')
     new = new.replace('\n','')
     new = new.split(" ")
     final = []
@@ -242,8 +243,10 @@ def find_url(path):
     return '/' + path.replace('.tpl','')
 
 # Return clean timestamp
-def find_timestamp(text):
+def find_timestamp(page):
-    return text[2].replace('<br>','')
+    date = str(page)
+    #timestamp is based off file name. Leading zeroes are removed from day; year assumes 21th century.
+    return datetime.datetime.strptime(str(page)[2:4], "%m").strftime("%B").lower() + " " + re.sub("^0+(?!$)", "", (date)[4:]) + ", 20" + (date)[:2]
 
 # Return clean title
 def find_title(text):
@@ -305,7 +308,7 @@ def prepare_diary_entry(page, loc):
         text = article2list(str(page), loc)
         result.append(find_title(text))
         result.append(retrieve_diary_entry_content(page, loc))
-        result.append(find_timestamp(text))
+        result.append(find_timestamp(page))
         result.append(find_url(loc + str(page)))
         result.append(find_social_title(text))
         result.append(find_tags(text))
@@ -432,10 +435,7 @@ def about():
 @route('/art')
 def art():
     """art"""
-    info = {'css': 'me', 'title': 'art gallery', 'year': find_year(),
+    info = {'css': 'art', 'title': 'blessfrey art gallery', 'year': find_year()}
-    'pixelart': ["Abbey_EmmArrGus_BrodyChar.png","Aisu+Luna_pix.png","artfight_blessfrey_Tessa.png","chimchooree_moonelf_twitter.png","chimchooree_silke_12colors.png","boss.png","gamecharacter.png","chimchooree_Airi.gif","customsofficer.png"],
-    'digital': ["WISE.png","ringoffire.jpeg"],
-    'fanart': ["trineaRemake.png","persona3demake.png","kamaAD1.gif"]}
     return template('art.tpl', info)
 
 # OC Page
@@ -462,12 +462,12 @@ def credits():
     info = {'css': 'doc', 'title': 'blessfrey credits', 'year': find_year()}
     return template('credits.tpl', info)
 
-# Blessfrey Demo Page
+# Blessfrey Games Page
-@route('/demo')
+@route('/games')
-def demo():
+def games():
-    """demo"""
+    """games"""
-    info = {'css': 'demo', 'title': 'blessfrey demo', 'year': find_year()}
+    info = {'css': 'games', 'title': 'blessfrey games', 'year': find_year()}
-    return template('demo.tpl', info)
+    return template('games.tpl', info)
 
 # Diary Page
 @route('/')
@@ -589,21 +589,39 @@ def loc(page):
 #    return template(os.path.join(abs_views_path,'char.tpl'), info)
 
 # Me Page
-@route('/dev')
+@route('/about-me')
 def me():
     """me"""
     info = {'css': 'me', 'title': 'about chimchooree (that\'s me)', 'year': find_year()}
     return template('me.tpl', info)
 
+# Feature Requirements
+@route('/milestones')
+def milestones():
+    """feature requirements"""
+    info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
+    return template('milestones.tpl', info)
 # Blessfrey - Feature Requirements Page
 @route('/blessfrey-milestones')
 def milestones():
-    return milestones()
+    info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
-@route('/milestones')
+    return template('milestones-bf.tpl', info)
+# Lemonland - Feature Requirements Page
+@route('/lemonland-milestones')
+def milestones():
+    info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
+    return template('milestones-ll.tpl', info)
+# Blue Planet - Feature Requirements Page
+@route('/blueplanet-milestones')
+def milestones():
+    info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
+    return template('milestones-bp.tpl', info)
+# LazyWiki - Feature Requirements Page
+@route('/lazywiki-milestones')
 def milestones():
     """feature requirements"""
     info = {'css': 'doc', 'title': 'blessfrey milestones', 'year': find_year()}
-    return template('milestones.tpl', info)
+    return template('milestones-lw.tpl', info)
 
 # Planner Page
 @route('/planner')
@@ -656,6 +674,13 @@ def setting():
     info = {'css': 'doc', 'title': 'blessfrey gdd - setting', 'year': find_year()}
     return template('setting.tpl', info)
 
+# Blessfrey Wiki Page
+@route('/study')
+def study():
+    """study"""
+    info = {'css': 'games', 'title': 'blessfrey wiki', 'year': find_year()}
+    return template('study.tpl', info)
+
 # Search Diary by Tag
 @route('/diary/tag/<tagin>') # Start on first Diary tag page if no page given
 def tag2(tagin):

src/static/css/all.css

@@ -35,10 +35,10 @@
 html, body {padding:0; margin:0; height:100%;}
 footer {
     position: fixed; bottom: 0; left: 0;
-    color: #C0AAC0;
     background-color: transparent;
     width: 100vw;
 }
+
 a, a:link, a:visited, a:hover, a:active, b, p {
     text-decoration: none;
     background-color: transparent; 

src/static/css/art.css

@@ -0,0 +1,40 @@
+.content-grid {  
+    color: white;
+    margin: 2em;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 200px);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border: 2px solid #C0AAC0;
+    margin-bottom: 5em;
+}
+
+.gallery img {
+    height: 200px;
+    width: 200px;
+    border-radius: 5%;
+}
+
+.galitem {
+  position: relative;
+    height: 200px;
+    width: 200px;
+}
+
+.subtitle {
+    color: white;
+    width: 200px;
+    position: absolute;
+    background: rgba(0,0,0,0.7);
+    text-align: center;
+    overflow: hidden;
+    bottom: 0em;
+}
+
+.cats {
+    display: block;
+    text-align: center;
+}

src/static/css/demo.css

@@ -1,27 +0,0 @@
-.content-grid {  
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, auto);
-    grid-column-gap: 0px;
-    grid-row-gap: 0em;
-    color: white;
-}
-
-.edition { 
-    grid-area: 1 / 1 / 2 / 2; 
-    }
-
-.demo { grid-area: 2 / 1 / 3 / 2; } 
-   
-.demo iframe {
-    border: 2px solid #df85a5;
-    padding: 10px;
-    display: block;
-    margin: auto;
-}
-.guide {
-    grid-area: 3 / 1 / 4 / 2;
-    width: 80%;
-    padding: 2em;
-    margin: auto;
-}

src/static/css/diary.css

@@ -58,6 +58,7 @@
     .diary-dir-numbers {
         height: 0em;
         display: inline-block;
+        vertical-align: middle;
         white-space: nowrap;
         margin-left: .3em;
         margin-right: .3em;
@@ -65,6 +66,7 @@
     .diary-dir-number {
         background-color: #886488; 
         display: inline-block;
+        vertical-align: middle;
         white-space: nowrap;
         border-radius: .3em;
         padding-left: .3em;

src/static/css/games.css

@@ -0,0 +1,11 @@
+.content-grid {  
+    color: white;
+}
+
+   
+iframe {
+    border: 2px solid #df85a5;
+    padding: 10px;
+    display: block;
+    margin: auto;
+}

src/static/css/nav.css

@@ -1,112 +1,22 @@
-/*set heart and star to 0px if viewport too small*/
+footer { 
-
-@media (max-width: 625px) {
-    .heart {
-    width: auto;
-    }
-}
-.heart { 
-    grid-area: 1 / 1 / 2 / 2;
-    background-color: transparent;
-    background-image: url(../img/nav/heart.png); 
-    background-repeat: no-repeat;
-    background-position: bottom right;
-    background-size: contain;
-}
-.nav-grid {
-    grid-area: 1 / 2 / 2 / 3;
-    background-color: transparent;
-    background-image: url(../img/nav/field.png);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: contain;
-    display: grid;
-    grid-template-columns: auto; 
-    grid-template-rows: repeat(4, auto);
-    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    align-items: center;
-}
-.star { 
-    grid-area: 1 / 3 / 2 / 4;
-    background-color: transparent;
-    background-image: url(../img/nav/star.png); 
-    background-repeat: no-repeat;
-    background-position: bottom left;
-    background-size: contain;
-} 
-
-.nav-diary { 
-    grid-area: 1 / 1 / 2 / 2;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80% 20%;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    flex-direction: column;
-    min-width: 48px;
-}
-.nav-play { 
-    grid-area:  1 / 2 / 2 / 3;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80% 20%;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    flex-direction: column;
-    min-width: 48px;
-}
-.nav-about {
-    grid-area: 1 / 3 / 2 / 4;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80% 20%;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    flex-direction: column;
-    min-width: 48px;
-}
-.nav-dev {
-    grid-area: 1 / 4 / 2 / 5;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80% 20%;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    flex-direction: column;
-    min-width: 48px;
-}
-.navlink {
-    font-size: 110%;
-    font-weight: bold;
     color: #C0AAC0;
+    background-color: #404164; 
+    width: 100vw;
     text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 1em;
 }
-.navlink a:link {
+footer a:link {
     color: #C0AAC0;
 }
-.navlink a:visited {
+footer a:visited {
     color: #C0AAC0;
 }
-.navlink a:hover {
+footer a:hover {
     color: #E1B9E6;
+    font-family: 'mitochondriaregular', sans-serif;
 }
-.navlink a:active {
+footer a:active {
     color: #C0AAC0;
+    font-family: 'mitochondriaregular', sans-serif;
 }
-.nav-grid img {
-    height: auto;
-    width: 100%;
-}
-.links { 
-    grid-area: 2 / 1 / 3 / 2;
-    background-color: black; 
-    width: 100vw;
-    text-align: center;
-    padding-top: 0.5em;
-    padding-bottom: 1em;
-}
-.links a {
-    color: #C0AAC0;
-} 

src/static/css/sidebar.css

@@ -39,21 +39,20 @@
     .about-box {
         grid-area: 1 / 1 / 2 / 2;
     }
-    .twitter-box {
+    .social-box {
         grid-area: 2 / 1 / 3 / 2;
     }
     .latest {
         grid-area: 3 / 1 / 4 / 2;
     }
-    .latest-text {
-        text-align: left;
-        padding: 0em;
-        background-color: #A88AA8; 
-    }
     .wordcloud {
         grid-area: 4 / 1 / 5 / 2;
     }
     .disclosure {
         grid-area: 5 / 1 / 6 / 2;
     }
-
+    .diary-box ul {
+        text-align: left;
+        padding: 0em;
+        background-color: #A88AA8; 
+    }