Journaling App

CSS and work-skin for a fake local journaling app for use in fics. Use it to style journal/diary entries for a character who wouldn't post their innermost thoughts in a blog, but would put them in a device for themselves.

Notes:

Inspired by How to Mimic Email Windows by La_Temperanza

(See the end of the work for other works inspired by this one.)

Chapter 1: Instructions

Chapter Text

I was working on a fic when I decided I needed a section which resembled an offline journaling app to house a character's journal entry, so I edited the coding from "How to Mimic Email Windows" linked above to create what I was looking for. I used the light mode version in my fic, but realized some people might want a dark mode, so I've provided the code for that as well.

The fic is currently in an exchange, so I've tossed the coding into an anon collection until reveals. Once reveals happen, I'll also add a link here to the github repository for easier download.

GitHub Repo Link: here

Rules for Use

☆ None! Literally.
☆ Credit (or not) if you want to.
☆ Edit at will (or not).
☆ Feel free to comment with links to fics where this has been used (not required).

Where To Get Help

If you run into issues with implementing this, please feel free to ask here or by opening an issue on the github repo once linked!

Previews

date: [Entry Date/Time]

title: [Entry Title]

tags: (optional) separate tags with commas

mood: (optional)

Your journal entry goes here.

You can even keep your separate paragraphs! Once this gets long enough it will scroll for you.

You can also add images.

date: [Entry Date/Time]

title: [Entry Title]

tags: (optional) separate tags with commas

mood: (optional)

Your journal entry goes here.

You can even keep your separate paragraphs! Once this gets long enough it will scroll for you.

You can also add images.

How To Use

Follow Steps 1-4 of the AO3 Tutorial A Step-by-Step Guide to Work Skins. At step 3 "Write the CSS", put the contents of the css code from the following chapters for the mode you want to use into the CSS box.
Tip: Use the "Both" chapter css contents if you think you might want to use both light mode and dark mode in a single or multiple fics. This will prevent you from needing to create multiple work skins.
To insert the journal app window into your fic:
1. Make sure your fic is on html mode.
2. Copy and paste the contents of the html section for the mode you want to use into the body of your fic where you want the app to appear.
Profit.

Styling Tips

To keep paragraphs in your journal app surround them by  , i.e.


<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

To add images use <img src="direct_image_link">.
The "(optional)" description in the tags and mood are intended to be used for characters who wouldn't complete that information. Add whatever tags and moods you think the character would use.
You can use emoji in any and all fields! In tags, in the mood section, or even in entries. Just insert them as you would normally.
I highly recommend underlining "tags" in the tags section using  , i.e.
```
tags: tag 1, tag 2, tag 3
```
This makes them look like they are clickable within the "app" without needing any fancy coding.

Chapter 2: Light Mode CSS & HTML

Chapter Text

CSS

#workskin .journalapp {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}

#workskin .journalbar {
background-color: #959AE3;
color: #FFFFFF;
border-color: #959AE3;
border-style: solid;
border-width: 1px;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
height: 1.5em;
overflow: hidden;
text-overflow: clip;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#workskin .journalbar::before {
content: 'Journal.me';
display: inline-block;
position: relative;
float: left;
font-weight: bold;
padding: 0 3px;
width: 85%;
}

#workskin .journalbar::after {
content: '≡';
display: inline-block;
position: relative;
font-weight: bold;
padding-right: 5px;
float: right;
color: #ffffff;
cursor: pointer;
}

#workskin .requiredmeta {
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
border-bottom: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
color: #000000;
background-color: #FFFFFF;
}

#workskin .optionalmeta {
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
border-bottom: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
color: #999999;
background-color: #FFFFFF;
}

#workskin .entry {
width: 75%;
padding-top: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
color: #000000;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
overflow: auto;
display: block;
height: 300px;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
}

#workskin .entry p {
padding-left: 5px;
padding-right: 5px;
}

#workskin .entry::-webkit-scrollbar {
-webkit-appearance: none;
}

#workskin .entry::-webkit-scrollbar:vertical {
width: 12px;
}

#workskin .entry::-webkit-scrollbar:horizontal {
height: 12px;
}

#workskin .entry::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}

#workskin .entry::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}

#workskin .actionbar {
border-color: #cfcfcf;
background-color: #f5f5f5;
color: #999999;
border-style: solid;
border-width: 1px;
border-top: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
height: 1.5em;
overflow: hidden;
text-overflow: clip;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#workskin .actionbar::after {
content: '✐ ↑ ␡';
display: inline-block;
position: relative;
float: right;
padding: 0 3px;
cursor: pointer;
}

HTML

<div class="journalapp">
 
date: [Entry Date/Time]
title: [Entry Title]
tags: (optional) separate tags with commas
mood: (optional)</div><div class="entry">
Your journal entry goes here.
You can even keep your separate paragraphs! Once this gets long enough it will scroll for you.
You can also add images.
<img src="https://i.imgur.com/tVxlStA.png" /></div>

Chapter 3: Dark Mode CSS & HTML

Chapter Text

CSS

#workskin .journalapp {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}

#workskin .djournalbar {
background-color: #5F6290;
color: #202225;
border-color: #5F6290;
border-style: solid;
border-width: 1px;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
height: 1.5em;
overflow: hidden;
text-overflow: clip;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#workskin .djournalbar::before {
content: 'Journal.me';
display: inline-block;
position: relative;
float: left;
font-weight: bold;
padding: 0 3px;
width: 85%;
}

#workskin .djournalbar::after {
content: '≡';
display: inline-block;
position: relative;
font-weight: bold;
padding-right: 5px;
float: right;
color: #202225;
cursor: pointer;
}

#workskin .drequiredmeta {
border-color: #202225;
border-style: solid;
border-width: 1px;
border-bottom: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
color: #ffffff;
background-color: #36393F;
}

#workskin .doptionalmeta {
border-color: #202225;
border-style: solid;
border-width: 1px;
border-bottom: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
color: #72767D;
background-color: #36393F;
}

#workskin .dentry {
width: 75%;
padding-top: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
color: #ffffff;
background-color: #36393F;
margin-left: auto;
margin-right: auto;
overflow: auto;
display: block;
height: 300px;
border-color: #202225;
border-style: solid;
border-width: 1px;
}

#workskin .dentry p {
padding-left: 5px;
padding-right: 5px;
}

#workskin .dentry::-webkit-scrollbar {
-webkit-appearance: none;
}

#workskin .dentry::-webkit-scrollbar:vertical {
width: 12px;
}

#workskin .dentry::-webkit-scrollbar:horizontal {
height: 12px;
}

#workskin .dentry::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #36393F;
}

#workskin .dentry::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #36393F;
}

#workskin .dactionbar {
border-color: #202225;
background-color: #2F3136;
color: #72767D;
border-style: solid;
border-width: 1px;
border-top: none;
margin-top: 0;
margin-bottom: 0;
width: 75%;
padding: 5px;
height: 1.5em;
overflow: hidden;
text-overflow: clip;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#workskin .dactionbar::after {
content: '✐ ↑ ␡';
display: inline-block;
position: relative;
float: right;
padding: 0 3px;
cursor: pointer;
}

HTML

<div class="journalapp">
 
date: [Entry Date/Time]
title: [Entry Title]
tags: (optional) separate tags with commas
mood: (optional)</div><div class="dentry">
Your journal entry goes here.
You can even keep your separate paragraphs! Once this gets long enough it will scroll for you.
You can also add images.
<img src="https://i.imgur.com/tVxlStA.png" /></div>

Chapter 4: Both CSS