Premade Pages and Posts

The approach of small components added to a document is useful, it can lead to inconsistencies that do no always look good, especially when the creative mood is not there. This list of style pages and posts are here to help out.

The basic idea behind the styles is that it makes the page easy to read, the page looks good, and it is practical as the page may be used very often. Obviously there is some conflict with style choices for a working page vs a page that is left there for other people to read.

In general for this type of work-space, documents should be short, and have plenty of pictures if possible, long sections of text might be ignored in a lot of cases.

Article Tags: Used for various reasons to mark a contents list, article, or page

Article Tags class or type: used to define core reason for an article. This can help retain a focus in future edits, and may help divide the article into smaller parts as the article may have several focuses, or core reasons in some cases (especially the case in notes, and reports that may cover broad subjects).

New Contact Style

Most are simple lists with basic relevant information. Some are divided into separate lists with headings.

Sample Heading That Can Be Used

Code:

This is the type of style that might be made for parts of the list after alignment is detemined (if that option is chosen, sometimes the alignment is obvious, such as a product or service seller)

No Longer Available@example_linkbasic description of what they did, or reason for interest in them. here we use an on purpose broken link for display https://youtu.be/R-udEFNvihw ❧

The normal way to display links that are no longer available: @example_link. But other reasons for the loss a link might alter the design. The above “No Longer Available” example does not use that style for the most part.

The normal contact list is shown below

“Short bio often from contact of interest” links list: @example_link; Gharr’s thoughts on what contact does; Reference tweet text sample or summary; Ref Tweet/link: Sample Tweet of link that might be an interesting reference, or shout out of who contact is

How the above style look like in practice, if all the placeholders are filled with information. This persons alignment seems clear, and need not be guessed at or have a documented approach to remember it, thus it’s not really necciary to have a alignment section for him.

“Bold Capital, Author of Abundance & BOLD. Passionate about space, Abundance & Longevity. #SingularityU #XPrize #Planetary_Resources;” Links List: @PeterDiamandis; Certainly a person who is also of interest to the #Transhuman culture (and related political parties), and The Venus Project. He also seems to be a person who encourages projects such as mining in space, and possibly colonization of the solar system which may increase humanities chances of survival for much larger time scales, than if we remain on earth only; “In a world of accelerating change, understanding how exponential tech works is critical to a child’s #future” Ref Tweet: https://twitter.com/PeterDiamandis/status/813928689297686528

Code:

<ul>
<li><span style="color: #ff00ff;">No Longer Available</span> <span style="color: #747400;">@example_link</span> <span style="color: #808080;">basic description of what they did, or reason for interest in them. here we use an on purpose broken link for display <code><span style="color: #aa8888; border-bottom: 2px solid #e0e0ff; border-top: 2px solid #e0e0ff; background-color: #e8ffe8; font-size: medium;"><span class="Delimiter">h</span>ttps://youtu.be/R-udEFNvihw</span></code> ❧</span></li>
<li>The normal way to display links that are no longer available: <span style="color: #aa8888; border-bottom: 2px solid #e0e0ff; border-top: 2px solid #e0e0ff; background-color: #e8ffe8;">@example_link</span>. But other reasons for the loss a link might alter the design. The above "No Longer Available" example does not use that style for the most part.</li>
<li>The normal contact list is shown below</li>
<li><strong style="color: #404444;">"Short bio often from contact of interest"</strong> links list: @example_link<span style="color: #2222dd;">; <span style="color: #502888;">Gharr's thoughts on what contact does</span>; Reference tweet text sample or summary; Ref Tweet/link: Sample Tweet of link that might be an interesting reference, or shout out of who contact is</span></li>
<li>How the above style look like in practice, if all the placeholders are filled with information. This persons alignment seems clear, and need not be guessed at or have a documented approach to remember it, thus it's not really necciary to have a alignment section for him.</li>
<li><strong style="color: #404444;">"Bold Capital, Author of Abundance &amp; BOLD. Passionate about space, Abundance &amp; Longevity. #SingularityU #XPrize #Planetary_Resources;"</strong> Links List: @<a href="https://twitter.com/PeterDiamandis" target="_blank" rel="noopener">PeterDiamandis</a><span style="color: #2222dd;">;<span style="color: #502888;"> Certainly a person who is also of interest to the #Transhuman culture (and related political parties), and The Venus Project. He also seems to be a person who encourages projects such as mining in space, and possibly colonization of the solar system which may increase humanities chances of survival for much larger time scales, than if we remain on earth only</span>; "In a world of accelerating change, understanding how exponential tech works is critical to a child’s #future" Ref Tweet: <a href="https://twitter.com/PeterDiamandis/status/813928689297686528" target="_blank" rel="noopener">https://twitter.com/PeterDiamandis/status/813928689297686528</a></span></li>
</ul>

Standard Heading: Topic Based Style

Introduction text. Often related to the heading, or if the heading is general in nature, it may describe what type of subjects will be mentioned under this heading. Links and associated text is often the focus of sharing, in this type of article the links and surrounding text is bold.

Topic Heading

Topic text is just standard paragraph text. It’s related to the topic. Previously twitter discussions were mentioned here, but they get a little messy as links mix in with text. A list will follow that shows how this might be handled. In general only one or possibly two heading levels is needed for these type of articles. 📌 Plain text comments that may also be sharedOptional descriptive text or introductory text to a link. This text might no be part of the share, it may be here in case people visit the article, and might appreciate the shared link to flow with the surrounding text. The reason this text is bold is that shares are critical parts of any article here. This of course assumes that the article itself is not meant to be shared often: ☆ The link text [bio]:http://wp.me/p10Tww-1xM.

Twitter Discussions and or Interview Heading

This is an example of a two person discussion on twitter: Tribute Article to @Antwaanmusic for his 50’th Video–Let Us All Unite! (The Great Dictator speech) [article]: http://wp.me/p10Tww-1Wl Twitter discussion can be quite complex, and trying to record them can also be very difficult. The below example, is not easy to make, but the twitter conversation is probably a lot clearer, and follows the general twitter rule of mentioning the people that you intend the message to go to.

@person_two — “@person_one @person_three Comment text that is usually a part of a conversation with person one possibly[2].”

@person_three — “@person_one @person_two Comment text that is usually a part of a conversation with person one and or two. You can see how both people are mentioned in this example. This style of mention is based on twitter rules and is copied here[3].”

Break from stream: explanation text. Twitter tends to form tree like discussions, and it can be hard to follow what is going on afterwards. The break from stream often allows for this, or it may simply leave out parts that might be relevant to the topic or interview. Normally a twitter conversation or interview could continue below this point.

@person_one — “@person_two @person_three thank you for this interview or discussion[4].”

Code To Get Page or Post Style

Introduction text. Often related to the heading, or if the heading is general in nature, it may describe what type of subjects will be mentioned under this heading.
Links and associated text is often the focus of sharing, in this type of article the links and surrounding text is bold.
<h1><span style="color: #99ccff;">Topic Heading</span></h1>
Topic text is just standard paragraph text. It's related to the topic. Previously twitter discussions were mentioned here, but they get a little messy as links mix in with text. A list will follow that shows how this might be handled. In general only one or possibly two heading levels is needed for these type of articles.
<strong><span style="color: #707777;">📌 Plain text comments that may also be shared</span></strong>
<strong>Optional descriptive text or introductory text to a link. This text might no be part of the share, it may be here in case people visit the article, and might appreciate the shared link to flow with the surrounding text. The reason this text is bold is that shares are critical parts of any article here. This of course assumes that the article itself is not meant to be shared often: <span style="color: #0000ff;">☆ The link text [bio]:</span> <a href="http://Actual Link" target="_blank">http://wp.me/p10Tww-1xM</a>.</strong>
<h2><span style="color: #ffaa55;">Twitter Discussions and or Interview Heading
</span></h2>
Twitter discussion can be quite complex, and trying to record them can also be very difficult. The below example, is not easy to make, but the twitter conversation is probably a lot clearer, and follows the general twitter rule of mentioning the people that you intend the message to go to.
<ul>
<li><strong><span style="color: #550303;">@person_one</span></strong> — "<span style="color: #707777;">@person_two @person_three</span> Comment text<sup><a href="#Anchor1">[1]</a></sup>."</li>
<li><strong><span style="color: #550303;">@person_two</span></strong> — "<span style="color: #707777;">@person_one @person_three</span> Comment text that is usually a part of a conversation with person one possibly<sup><a href="#Anchor1">[2]</a></sup>."</li>
<li><strong><span style="color: #550303;">@person_three</span></strong> — "<span style="color: #707777;">@person_one @person_two</span> Comment text that is usually a part of a conversation with person one and or two. You can see how both people are mentioned in this example. This style of mention is based on twitter rules and is copied here<sup><a href="#Anchor1">[3]</a></sup>."</li>
<li><strong><span style="color: #000080;">Break from stream</span></strong><span style="color: #707777;">: explanation text. Twitter tends to form tree like discussions, and it can be hard to follow what is going on afterwards. The break from stream often allows for this, or it may simply leave out parts that might be relevant to the topic or interview. Normally a twitter conversation or interview could continue below this point.</span></li>
<li><strong><span style="color: #550303;">@person_one</span></strong> — "<span style="color: #707777;">@person_two @person_three</span> thank you for this interview or discussion<sup><a href="#Anchor1">[4]</a></sup>."</li>
</ul>
<h1><span style="color: #99ccff;">End Notes</span></h1>
The reference points don't need to be hyperlinked, but it can be nice to have such links.
<a id="Anchor1"></a>[1] Reference text and/or link
<a id="Anchor2"></a>[2] Reference text and/or link
<a id="Anchor3"></a>[3] Reference text and/or link
<a id="Anchor4"></a>[4] Reference text and/or link

Standard Heading: Music List Style Page of Post

List: Often Used With Music

Artist One

☆ Artist’s or group’s name — Song, or Music Name [song/music]: link to music #Vocaloid

Standard Heading: Nexus Style Post or Pages

Nexus pages or posts are an attempt to centralize articles that are posted all over the place. They have a quite individual style.

The nexus pages or posts also have a page that summarizes where they are. It can be found here: ☆ Happy (Miku Hatsune PV) – English lyrics translation [song/music]: http://bit.ly/oWR4ah.

The thought of placing the listing of the nexus pages here is that one of the earliest posts made should keep Gharr’s interest, it is the starting point to all of this, but it should also be updated and expanded, it should not be a museum piece as most of the stuff here live and active.

It’s quite of lot of effort to promote stuff, and many artists are promoted here. Some posts have band details, and the many social media sites they can be found on. This information can be useful for shares, or to assist in helping understanding which members might be in charge of posting the bands updates for example. But updating such information can take a lot of time, so unless it is a interview, such extra details should be avoided, and the bands own links should provide most of the up to date information. Again this is a rule that will have grey areas, and will be broken in certain cases.

Topic Heading: Nexus Style

The band or artist’s name often goes into the heading. Neutrino actually has all green, but typical nexus will have both blue/green colors, the variation is pleasing.

Standard Heading: Story Style Post or Pages

Here the green text works just fine and looks good: ✎ Cybernated Farm Systems welcomes you to the 21’st century [article]: http://wp.me/p10Tww-2IJ

Story style is the idea that not only #hashtags can help promote things, but adding a story (in the above: Japanese Myth and Stories) to the promoted thing will also help. While there is no style how a page or post is structured, with Verge there was a tendency to publish suggested articles as premade tweets and that did not work well, so Directive Text was designed to help prevent that, so the story or additional information will not harm the promotion of a song for instance.

The original premade tweet text was changed from green to blue to make it easier on the eyes.

This page uses standard headings for the term, and paragraphs or other methods in the text below the heading to define what the term in the heading means: Words and phrases [article]: http://wp.me/P10Tww-1IF

This definition method can be achieved with more control by using indentations or bullet lists and indentation.

A Gadget

1) A thing or device of some sort that might have a function.

2) A fictional inspector with lots of gadgets.

3) A mechanical device

Term: <dl> tag

Definition: The <dl> tag is used to code a description list consisting
of description terms alternating with groups of one or more detail descriptions.

Term: <dt> tag

Definition: The <dt> tag is used to code a description term
in a description list, leading into one or more detail description elements.

Term: <dd> tag

Definition: The <dd> detail description tag is used to code the
description of an item inside a dl element for a description list.

Term: Fix

Definition: repair something

Term: Thing

Definition: An undefined item of some kind

Term: Surf

Definition: To roam

Code To Get Page or Post Style

<dl><dt>A <dfn>Gadget</dfn></dt>
<dd>1) A thing or device of some sort that might have a function.</dd>
<dd>2) A fictional inspector with lots of gadgets.</dd>
<dd>3) A mechanical device</dd></dl>
<dl><dt>Term: <dfn><dl> tag</dfn></dt><dd>Definition: The <dl> tag is used to code a description list consisting
of description terms alternating with groups of one or more detail descriptions.</dd>
<dt>Term: <dfn><dt> tag</dfn></dt><dd>Definition: The <dt> tag is used to code a description term
in a description list, leading into one or more detail description elements.</dd>
<dt>Term: <dfn><dd> tag</dfn></dt><dd>Definition: The <dd> detail description tag is used to code the
description of an item inside a <b>dl</b> element for a description list.</dd></dl>
<dl><dt>Term: <dfn>Fix</dfn></dt><dd>Definition: repair something</dd>
<dt>Term: <dfn>Thing</dfn></dt><dd>Definition: An undefined item of some kind</dd>
<dt>Term: <dfn>Surf</dfn></dt><dd>Definition: To roam</dd></dl>