style
This commit is contained in:
parent
ba0fe2892a
commit
e846184498
11 changed files with 392 additions and 213 deletions
|
|
@ -1,10 +1,9 @@
|
|||
|
||||
<!-- Page Footer -->
|
||||
<hr>
|
||||
<div class="footer">
|
||||
<p>Copyleft © 2023 <a href="https://spectrasecu.re">Spectra Secure</a> • All wrongs reserved</p>
|
||||
<p>Copyleft © 2025 <a href="https://thergic.ar">Thergic</a> • All wrongs reserved</p>
|
||||
<p>Built with 💚 using <a href="https://github.com/spectrasecure/arise">Arise</a>, a cloud-native static site generator written in Bash.</p>
|
||||
</div>
|
||||
<!-- End Page Footer -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,64 +2,59 @@
|
|||
|
||||
<html lang="{{language}}">
|
||||
<head>
|
||||
<!-- Basic Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="generator" content="Arise" />
|
||||
<!-- Basic Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="generator" content="Arise" />
|
||||
|
||||
<title>{{title}} · {{global_name}}</title>
|
||||
<meta name="description" content="{{description}}">
|
||||
<meta name="author" content="{{author}}">
|
||||
<!-- End Basic Metadata -->
|
||||
<title>{{title}} · {{global_name}}</title>
|
||||
<meta name="description" content="{{description}}">
|
||||
<meta name="author" content="{{author}}">
|
||||
<!-- End Basic Metadata -->
|
||||
|
||||
<!-- OpenGraph Metadata -->
|
||||
<meta property="og:site_name" content="{{global_name}}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{title}} · {{global_name}}" />
|
||||
<meta property="og:description" content="{{description}}" />
|
||||
<meta property="og:url" content="{{canonical_url}}" />
|
||||
<meta property="og:image" content="{{canonical_url}}{{thumbnail}}" />
|
||||
<meta property="article:published_time" content="{{published_date}}" />
|
||||
<meta property="article:modified_time" content="{{modified_date}}" />
|
||||
<!-- End OpenGraph Metadata -->
|
||||
<!-- OpenGraph Metadata -->
|
||||
<meta property="og:site_name" content="{{global_name}}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{title}} · {{global_name}}" />
|
||||
<meta property="og:description" content="{{description}}" />
|
||||
<meta property="og:url" content="{{canonical_url}}" />
|
||||
<meta property="og:image" content="{{canonical_url}}{{thumbnail}}" />
|
||||
<meta property="article:published_time" content="{{published_date}}" />
|
||||
<meta property="article:modified_time" content="{{modified_date}}" />
|
||||
<!-- End OpenGraph Metadata -->
|
||||
|
||||
<!-- Twitter Metadata -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="{{title}} · {{global_name}}" />
|
||||
<meta name="twitter:description" content="{{description}}" />
|
||||
<meta name="twitter:url" content="{{canonical_url}}" />
|
||||
<meta name="twitter:image" content="{{canonical_url}}{{thumbnail}}" />
|
||||
<!-- End Twitter Metadata -->
|
||||
<!-- Twitter Metadata -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="{{title}} · {{global_name}}" />
|
||||
<meta name="twitter:description" content="{{description}}" />
|
||||
<meta name="twitter:url" content="{{canonical_url}}" />
|
||||
<meta name="twitter:image" content="{{canonical_url}}{{thumbnail}}" />
|
||||
<!-- End Twitter Metadata -->
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/config/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/config/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/config/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/config/favicon/site.webmanifest">
|
||||
<link rel="mask-icon" href="/config/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="/config/favicon/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#00aba9">
|
||||
<meta name="msapplication-config" content="/config/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<!-- End Favicon -->
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/config/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/config/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/config/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/config/favicon/site.webmanifest">
|
||||
<link rel="mask-icon" href="/config/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="/config/favicon/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#3b2e1f">
|
||||
<meta name="msapplication-config" content="/config/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#1e1b17">
|
||||
<!-- End Favicon -->
|
||||
|
||||
<!-- Styesheet+Logo -->
|
||||
<style>
|
||||
html * {font-family:monospace,sans-serif;}
|
||||
body {background-color:#121619;margin:40px auto;max-width:650px;padding:0 10px;color:#65f85a;}
|
||||
a {color:#b8f1b4;}
|
||||
hr {color:#65f85a;}
|
||||
.topbar a {color:#65f85a;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/config/main.css">
|
||||
<div class="logo"><a href="/"><img src="/config/logo.png" /></a></div>
|
||||
<!-- End Styles+Logo -->
|
||||
<!-- Styesheet+Logo -->
|
||||
<link rel="stylesheet" href="/config/main.css">
|
||||
<div class="logo"><a href="/"><img src="/config/logo.png" /></a></div>
|
||||
<!-- End Styles+Logo -->
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="topbar">
|
||||
<a href="/">Home</a> ⟛ <a href="/posts">Posts</a> ⟛ <a href="https://github.com/spectrasecure/arise">GitHub</a>
|
||||
</nav>
|
||||
<!-- End Navigation -->
|
||||
<!-- Navigation -->
|
||||
<nav class="topbar">
|
||||
<a href="/">Home</a> <span class="sep">•</span>
|
||||
<a href="/katas">Katas</a> <span class="sep">•</span>
|
||||
<a href="/rehosted">Rehosted</a>
|
||||
</nav>
|
||||
<!-- End Navigation -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,166 +1,185 @@
|
|||
|
||||
/*** Core page styles to set the primary colours and styles to be inherited by everything else ***/
|
||||
|
||||
/* Core Styling */
|
||||
html * {
|
||||
font-family:sans-serif;
|
||||
}
|
||||
body{
|
||||
margin:40px auto;
|
||||
max-width:650px;
|
||||
line-height:1.6;
|
||||
font-size:18px;
|
||||
color:#65f85a;
|
||||
background-color:#121619;
|
||||
padding:0 10px;
|
||||
}
|
||||
/********************************/
|
||||
/********************************/
|
||||
|
||||
/*** Post styling. This section is for defining markup classes to make it easier to write prettier posts. ***/
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin-top:20px;
|
||||
margin-bottom:20px;
|
||||
border-radius:16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
/* === Core Layout === */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "JetBrains Mono", "Fira Code", monospace;
|
||||
background-color: #1e1f22;
|
||||
color: #d9d9d9;
|
||||
line-height: 1.6;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color:#293137;
|
||||
border-radius:16px;
|
||||
padding-left:30px;
|
||||
padding-right:30px;
|
||||
line-height:2em;
|
||||
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
color:#65f85a;
|
||||
font-family:monospace;
|
||||
/* Center content area */
|
||||
body {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
text-align: left;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left:1px solid #65f85a;
|
||||
display:block;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 30px;
|
||||
padding-left: 10px;
|
||||
margin-right: 40px;
|
||||
font-style: italic;
|
||||
color:#46ab3e;
|
||||
}
|
||||
|
||||
hr {
|
||||
color:#65f85a;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#endline { /* Special kind of <hr> for spacing out footnotes from the rest of a post */
|
||||
color:#65f85a;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 300px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#b8f1b4
|
||||
}
|
||||
|
||||
h1{
|
||||
line-height:1.2
|
||||
}
|
||||
|
||||
h2,h3{
|
||||
padding-top:24px;
|
||||
line-height:1.2
|
||||
}
|
||||
|
||||
/* Style for inline dates. These are configured via a separate include file in /config/content_header.html. See notes on Arise page creation for more details. */
|
||||
.date {
|
||||
padding-bottom:0;
|
||||
margin-bottom:0;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.date {
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 901px) {
|
||||
.date {
|
||||
float:right;
|
||||
margin-left:30px;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************/
|
||||
/********************************/
|
||||
|
||||
|
||||
/*** Modular component styles. Includes styling for the headers, navigation controls, and footer. ***/
|
||||
|
||||
/* Site logo. Styled to responsively move to either left or be centred, depending if the page is being viewed on desktop or mobile respectively. */
|
||||
/* === Logo === */
|
||||
.logo {
|
||||
margin-bottom:20px;
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.logo img {
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Navbar styling. */
|
||||
/* === Top Navigation === */
|
||||
.topbar {
|
||||
padding-right:10px;
|
||||
border-top:1px solid #65f85a;
|
||||
border-bottom:1px solid #65f85a;
|
||||
margin-bottom:20px;
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.topbar a {
|
||||
color:#65f85a;
|
||||
text-decoration:none;
|
||||
color: #82aaff;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.topbar a:hover {
|
||||
color: #ffb454;
|
||||
}
|
||||
.topbar .sep {
|
||||
color: #555;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* Site footer styling */
|
||||
.footer {
|
||||
border-top:2px solid #65f85a;
|
||||
font-size:12px;
|
||||
margin-top:120px;
|
||||
text-align:center;
|
||||
/* === Headings === */
|
||||
h1, h2, h3, h4 {
|
||||
color: #82aaff; /* unified cyan accent */
|
||||
font-weight: 600;
|
||||
margin-top: 2.2em;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
/********************************/
|
||||
/********************************/
|
||||
|
||||
|
||||
/*** Other misc garbage ***/
|
||||
|
||||
/* Arise Index Style */
|
||||
.arise-toc-td {
|
||||
border-width: 1px;
|
||||
border-color: #65f85a;
|
||||
border-top-style: solid;
|
||||
h1 {
|
||||
color: #78dce8; /* cool cyan for logo harmony */
|
||||
text-align: center;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 5px
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.arise-toc-th {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px;
|
||||
border-bottom-style: solid;
|
||||
|
||||
/* === Paragraphs & Links === */
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
a {
|
||||
color: #82aaff;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #ffb454;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* === Responsive Images === */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
figcaption {
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
/* === Inline Code === */
|
||||
code {
|
||||
background: #2b2d31;
|
||||
color: #ffd866;
|
||||
padding: 0.15em 0.35em;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* === Code Blocks === */
|
||||
pre.sourceCode {
|
||||
background: #2b2d31;
|
||||
border-radius: 6px;
|
||||
padding: 1em;
|
||||
overflow-x: auto;
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
/* Monokai-style syntax colors */
|
||||
.sourceCode .kw { color: #ff6188; } /* keyword */
|
||||
.sourceCode .co { color: #727072; } /* comment */
|
||||
.sourceCode .st { color: #a9dc76; } /* string */
|
||||
.sourceCode .va { color: #78dce8; } /* variable */
|
||||
.sourceCode .fu { color: #ffd866; } /* function */
|
||||
.sourceCode .op { color: #ffb454; } /* operator */
|
||||
.sourceCode .bu { color: #82aaff; } /* built-in */
|
||||
|
||||
/* === Blockquotes === */
|
||||
blockquote {
|
||||
border-left: 3px solid #82aaff;
|
||||
padding-left: 1em;
|
||||
margin: 1.2em 0;
|
||||
color: #c0c0c0;
|
||||
background: #232428;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* === Lists === */
|
||||
ul, ol {
|
||||
padding-left: 1.6em;
|
||||
}
|
||||
ul li, ol li {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
/* === Tables === */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 1.2em 0;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #2b2d31;
|
||||
padding: 0.6em 0.8em;
|
||||
}
|
||||
th {
|
||||
background: #2b2d31;
|
||||
color: #ffb454;
|
||||
text-align: left;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: #232428;
|
||||
}
|
||||
|
||||
/* === Horizontal Rules === */
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #2b2d31;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 3em;
|
||||
}
|
||||
.footer a {
|
||||
color: #82aaff;
|
||||
}
|
||||
.footer a:hover {
|
||||
color: #ffb454;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 590 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 590 KiB |
13
arise-source/rehosted/index.md
Normal file
13
arise-source/rehosted/index.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!-- BEGIN ARISE ------------------------------
|
||||
Title:: "Index: Rehosted"
|
||||
|
||||
Author:: "Jose Falanga"
|
||||
Description:: "A collection of rehosted content from elsewhere"
|
||||
Language:: "en"
|
||||
Thumbnail:: ""
|
||||
Published Date:: ""
|
||||
Modified Date:: ""
|
||||
|
||||
toc:: "true"
|
||||
content_header:: "false"
|
||||
---- END ARISE \\ DO NOT MODIFY THIS LINE ---->
|
||||
|
|
@ -14,9 +14,9 @@ rss_hide:: "true"
|
|||
|
||||
# Vertical Slice vs. Horizontal Layer
|
||||
|
||||
> Originally posted in the now defunct uber.typepad.com blog. You can find an archived version on [The Internet Archive](https://uber.typepad.com/birthofagame/2009/04/vertical-slice-vs-horizontal-layer.html)
|
||||
> Originally posted in the now defunct uber.typepad.com blog. You can find an archived version on [The Internet Archive](https://web.archive.org/web/20250914133730/https://uber.typepad.com/birthofagame/2009/04/vertical-slice-vs-horizontal-layer.html)
|
||||
|
||||
I've [mentioned before](rehosted/find-the-fun) [(archive)](https://web.archive.org/web/20250914133730/https://uber.typepad.com/birthofagame/2008/10/find-the-fun-fi.html) I think the Vertical Slice (VS) is one of the most abused industry practices. By definition, it ought to be a version of your software that is near final quality in a small subset of its domain that represents the overall product. If you're making Call of Duty 4 it might be "just one mission" complete with working AI controlled enemies, HUD art, polished control scheme, in-mission cinematics, and near final quality art assets. The problem is getting to this vertical slice actually requires completing a huge portion of the game. For example, the subset of character rigs and animations required for the level may be 80% of the animations needed for the entire game. The UI and HUD are an often underestimated amount of work yet having near final quality versions of them for "just one mission" is saying that entire subsystem needs to be nearly complete. The requirements may say 3 weapons out of the 15 that will be in game, but you'll be doing more than 1/5th of the code underneath to meet those requirements. If employed too early in development the VS can derail an entire project or worse put it on the fast track to nowhere.
|
||||
I've [mentioned before](../find-the-fun) [(archive)](https://web.archive.org/web/20250914133730/https://uber.typepad.com/birthofagame/2008/10/find-the-fun-fi.html) I think the Vertical Slice (VS) is one of the most abused industry practices. By definition, it ought to be a version of your software that is near final quality in a small subset of its domain that represents the overall product. If you're making Call of Duty 4 it might be "just one mission" complete with working AI controlled enemies, HUD art, polished control scheme, in-mission cinematics, and near final quality art assets. The problem is getting to this vertical slice actually requires completing a huge portion of the game. For example, the subset of character rigs and animations required for the level may be 80% of the animations needed for the entire game. The UI and HUD are an often underestimated amount of work yet having near final quality versions of them for "just one mission" is saying that entire subsystem needs to be nearly complete. The requirements may say 3 weapons out of the 15 that will be in game, but you'll be doing more than 1/5th of the code underneath to meet those requirements. If employed too early in development the VS can derail an entire project or worse put it on the fast track to nowhere.
|
||||
|
||||
So when is the appropriate time to build a Vertical Slice? I say after the few Horizontal Layer iterations are complete. What's a Horizontal Layer? Glad you asked. When we prototype at Uber, we prototype the entire game from beginning to end. This includes single player, multiplayer, main menus, option screens, cinematics, mission briefings, etc. When the entire experience is laid out in whitebox form, that is with temporary art assets and most likely temporary code, we call that a Horizontal Layer (HL). This gives us the best sense of the actual work required to complete the game, and the iteration on the HL creates a breeding ground of creativity as trying out new ideas is quick and inexpensive.
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Now, you and I well know in the real world there are often constraints and exter
|
|||
|
||||
My diagram-fu is weakened when working on my laptop’s track-pad, but the diagram below still serves to illustrate a few key points.
|
||||
|
||||
![[graph.jpg]]
|
||||
|
||||
|
||||
First, components of the game (Single Player, Tutorial, etc) differ in the amount of work and are so represented by different width blocks. As each HL is complete quality goes up. The VS sits on top of the HL and therefore is elevated in quality by it. In this diagram two vertical slices are created for two different portions of the game; single player and multiplayer. You can see that the slices themselves are of different widths. This represents the amount of the component the VS is meant to demonstrate. For example the single player VS may only be showing off one portion of one campaign mission, whereas the multiplayer VS might be demonstrating nearly fully functional gameplay on a variety of maps. Also note that each slice was started during a different HL iteration. Had the VS for single player began on the 3rd HL iteration it would have achieved a higher quality level.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
User-agent: *
|
||||
Disallow: https://ari.se.net/config/*
|
||||
Disallow: https://log.thergic.ar/config/*
|
||||
|
||||
Sitemap: https://ari.se.net/sitemap.xml
|
||||
Sitemap: https://log.thergic.ar/sitemap.xml
|
||||
|
|
|
|||
13
arise-source/test/index.md
Normal file
13
arise-source/test/index.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!-- BEGIN ARISE ------------------------------
|
||||
Title:: "Index: Test"
|
||||
|
||||
Author:: "Jose Falanga"
|
||||
Description:: "Test"
|
||||
Language:: "en"
|
||||
Thumbnail:: ""
|
||||
Published Date:: ""
|
||||
Modified Date:: ""
|
||||
|
||||
toc:: "true"
|
||||
content_header:: "false"
|
||||
---- END ARISE \\ DO NOT MODIFY THIS LINE ---->
|
||||
BIN
arise-source/test/styles/Great_Wave_off_Kanagawa2.jpg
Normal file
BIN
arise-source/test/styles/Great_Wave_off_Kanagawa2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
140
arise-source/test/styles/index.md
Normal file
140
arise-source/test/styles/index.md
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!-- BEGIN ARISE ------------------------------
|
||||
Title:: "Style Test"
|
||||
|
||||
Author:: "Jose Falanga"
|
||||
Description:: "Style Test"
|
||||
Language:: "en"
|
||||
Thumbnail:: "arise-icon.png"
|
||||
Published Date:: "2009-04-16"
|
||||
Modified Date:: "2025-10-13"
|
||||
|
||||
content_header:: "false"
|
||||
rss_hide:: "true"
|
||||
---- END ARISE \\ DO NOT MODIFY THIS LINE ---->
|
||||
|
||||
|
||||
# Sample Markdown Test
|
||||
|
||||
Welcome to the **Markdown style test** for your library-themed site.
|
||||
This file includes headings, text formatting, lists, links, images, code, blockquotes, tables, and horizontal rules.
|
||||
|
||||
---
|
||||
|
||||
## Text Styles
|
||||
|
||||
**Bold text**
|
||||
*Italic text*
|
||||
***Bold + Italic***
|
||||
~~Strikethrough~~
|
||||
`Inline code`
|
||||
|
||||
> Blockquote text for testing. The border and color should reflect your library style.
|
||||
|
||||
---
|
||||
|
||||
## Links
|
||||
|
||||
[Internal link](/posts)
|
||||
[External link](https://spectrasecu.re)
|
||||
|
||||
Hover over links to see color transition.
|
||||
|
||||
---
|
||||
|
||||
## Lists
|
||||
|
||||
### Unordered List
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Nested item
|
||||
- Item 3
|
||||
|
||||
### Ordered List
|
||||
1. First
|
||||
2. Second
|
||||
3. Third
|
||||
1. Nested first
|
||||
2. Nested second
|
||||
|
||||
---
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
Check image border radius, spacing, and responsiveness.
|
||||
|
||||
---
|
||||
|
||||
## Code Blocks
|
||||
|
||||
### Inline code
|
||||
|
||||
Use `` `inline code` `` inside text.
|
||||
|
||||
### Fenced code block
|
||||
|
||||
```bash
|
||||
# Bash example
|
||||
echo "Hello, world!"
|
||||
for file in *.txt; do
|
||||
echo "Processing $file"
|
||||
done
|
||||
```
|
||||
|
||||
### Syntax Highlight Example (if using spans)
|
||||
```javascript
|
||||
// JavaScript example
|
||||
function greet(name) {
|
||||
console.log("Hello, " + name);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
---
|
||||
|
||||
End of section separator
|
||||
|
||||
---
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> This is a blockquote.
|
||||
>
|
||||
> Multiple lines are supported.
|
||||
>
|
||||
> Nested example:
|
||||
>
|
||||
> > Inner quote.
|
||||
|
||||
---
|
||||
|
||||
## Tables
|
||||
|
||||
| Syntax | Description | Notes |
|
||||
|--------|-------------|-------|
|
||||
| Header | Title | Can include multiple lines |
|
||||
| Cell | Text | Styling applies to td and th |
|
||||
| Row | Example | Check borders and text color |
|
||||
|
||||
---
|
||||
|
||||
## Misc Elements
|
||||
|
||||
- Footnotes[^1]
|
||||
- Task list:
|
||||
- [x] Done item
|
||||
- [ ] Pending item
|
||||
- Emoji: 😃 📚 🔖
|
||||
|
||||
[^1]: This is a footnote example.
|
||||
|
||||
---
|
||||
|
||||
## End of Test File
|
||||
|
||||
This file tests all **common Markdown elements**.
|
||||
Make sure code, blockquotes, headings, links, lists, images, tables, and horizontal rules render correctly with your new color palette.
|
||||
Loading…
Add table
Add a link
Reference in a new issue