waalge
/
kompact-io-landing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Double check before redeploying

This commit is contained in:
waalge 2023-07-21 10:19:30 +00:00
parent 94d737f25c
commit f91dfeba3d
81 changed files with 3 additions and 4244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,5 +1,8 @@
.direnv/ .direnv/
_site
_cache
dist dist
dist-* dist-*
cabal-dev cabal-dev

219
app/site.hs
View File

@ -1,219 +0,0 @@
--------------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TupleSections #-}
{-# LANGUAGE DeriveGeneric #-}
--------------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TupleSections #-}
{-# LANGUAGE DeriveGeneric #-}
import Data.Monoid (mappend)
import Hakyll
import Data.Maybe (fromMaybe)
import Text.Read (readMaybe)
import Control.Monad (liftM)
import Data.List ( sortBy, isInfixOf, intercalate )
import Data.Ord (comparing)
-- import HakyllMedia.Image
import System.FilePath.Posix ( takeDirectory
, takeBaseName
, (</>)
, splitFileName
)
import Control.Applicative (empty)
import qualified Data.HashMap.Strict as HMS
import qualified Data.Set as S
import qualified Data.Text as T
import qualified Data.Yaml as Yaml
import qualified Data.Text as T
import qualified Data.Vector as V
import Data.Yaml
import Data.Scientific
import Data.Yaml.Parser (FromYaml (fromYaml), YamlValue (Mapping), YamlParser)
import GHC.Generics (Generic)
import Data.Yaml (FromJSON)
import Data.Yaml.Aeson ((.:))
import qualified Data.Aeson.Key as AK
import qualified Data.Aeson.KeyMap as KeyMap
import Data.Yaml.Aeson (Value(Object))
import Data.Map (mapMaybe)
--------------------------------------------------------------------------------
main :: IO ()
main = hakyll $ do
match "content/images/*" $ do
route rmContentPrefix
compile copyFileCompiler
match "content/css/*" $ do
route rmContentPrefix
compile compressCssCompiler
match "content/cv/*" $ compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/cv-section.html" cvSecCtx
>>= relativizeUrls
>>= rmIndexHtml
match (fromList ["content/about.md", "content/contact.md"]) $ compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/section.html" defaultContext
>>= relativizeUrls
>>= rmIndexHtml
match "content/posts/*" $ do
route $ rmContentPrefix `composeRoutes` niceRoute
compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/post.html" postCtx
>>= loadAndApplyTemplate "templates/default.html" postCtx
-- >>= mkResponsiveImage
>>= relativizeUrls
>>= rmIndexHtml
create ["archive.html"] $ do
route niceRoute
compile $ do
posts <- recentFirst =<< loadAll "content/posts/*"
let archiveCtx =
listField "posts" postCtx (return posts) `mappend`
constField "title" "Archives" `mappend`
defaultContext
makeItem ""
>>= loadAndApplyTemplate "templates/archive.html" archiveCtx
>>= loadAndApplyTemplate "templates/default.html" archiveCtx
>>= relativizeUrls
>>= rmIndexHtml
create ["cv.html"] $ do
route niceRoute
compile $ do
sections <- byPriority =<< loadAll "content/cv/*"
let cvCtx =
listField "sections" defaultContext (return sections) `mappend`
defaultContext
makeItem ""
>>= loadAndApplyTemplate "templates/cv.html" cvCtx
>>= loadAndApplyTemplate "templates/default.html" cvCtx
>>= relativizeUrls
>>= rmIndexHtml
match "content/index.html" $ do
route rmContentPrefix
compile $ do
posts <- fmap (take 3) $ recentFirst =<< loadAll "content/posts/*"
aboutStub <- loadBody "content/about.md"
contactStub <- loadBody "content/contact.md"
let indexCtx =
listField "posts" postCtx (return posts) `mappend`
constField "about" aboutStub `mappend`
constField "contact" contactStub `mappend`
defaultContext
getResourceBody
>>= applyAsTemplate indexCtx
>>= loadAndApplyTemplate "templates/default.html" indexCtx
>>= relativizeUrls
>>= rmIndexHtml
match "templates/*" $ compile templateBodyCompiler
rmContentPrefix = gsubRoute "content/" (const "")
--------------------------------------------------------------------------------
postCtx :: Context String
postCtx =
dateField "date" "%Y-%m-%d" `mappend`
defaultContext
cvSecCtx :: Context String
cvSecCtx =
customCtx "heading" `mappend`
defaultContext `mappend`
skillsCtx
customCtx :: String -> Context a
customCtx key = field key $ \item -> do
metadata <- getMetadata (itemIdentifier item)
return $ fromMaybe "" $ lookupString key metadata
skillsCtx :: Context String
skillsCtx = field "skills" $ \item -> do
metadata <- getMetadata (itemIdentifier item)
let skills :: Maybe String
skills = case KeyMap.lookup (AK.fromString "skills") metadata of
Just (Array a) -> do
let
x = V.toList $ V.catMaybes $ fmap getName a
Just $ intercalate "<br/>" x
_ -> Just ("" :: String)
return $ fromMaybe "" skills
getName :: Value -> Maybe String
getName (Object v) = case KeyMap.lookup (AK.fromString "name") v of
Just (String x) -> Just (T.unpack x)
_ -> Nothing
getName _ = Nothing
priority :: MonadMetadata m => Item a -> m Int
priority i = do
mStr <- getMetadataField (itemIdentifier i) "priority"
return $ fromMaybe 0 (mStr >>= readMaybe)
byPriority :: MonadMetadata m => [Item a] -> m [Item a]
byPriority = sortByM priority
where
sortByM :: (Monad m, Ord k) => (a -> m k) -> [a] -> m [a]
sortByM f xs = map fst . sortBy (comparing snd) <$>
mapM (\x -> fmap (x,) (f x)) xs
niceRoute :: Routes
niceRoute = customRoute createIndexRoute
where createIndexRoute identifier =
takeDirectory p </> takeBaseName p </> "index.html"
where p = toFilePath identifier
rmIndexHtml :: Item String -> Compiler (Item String)
rmIndexHtml item = return $ fmap (withUrls rmIndexStr) item
rmIndexStr :: String -> String
rmIndexStr url = case splitFileName url of
(dir, "index.html") | isLocal dir -> dir
| otherwise -> url
_ -> url
where
isLocal :: String -> Bool
isLocal uri = not ("://" `isInfixOf` uri)
data Skill = Skill
{ skillName :: T.Text
, skillIntensity :: Float
}
deriving (Eq, Show, Generic)
instance FromJSON Skill where
-- fromYaml (Mapping yv _ ) = Skill <$> yv .: "name" <*> (read . T.unpack <$> yv .: "intensity")
-- fromYaml _ = error "bad input"
-- lookupStringList :: String -> Metadata -> Maybe [String]
-- lookupStringList key meta =
-- HMS.lookup (T.pack key) meta >>= Yaml.toList >>= mapM Yaml.toString
--
lookupStringList :: String -> Metadata -> Maybe [String]
lookupStringList key meta =
KeyMap.lookup (AK.fromString key) meta >>= yamlToList >>= mapM yamlToString
yamlToString :: Yaml.Value -> Maybe String
yamlToString (Yaml.String t) = Just (T.unpack t)
yamlToString (Yaml.Bool True) = Just "true"
yamlToString (Yaml.Bool False) = Just "false"
yamlToString (Yaml.Number d) | isInteger d = Just (formatScientific Fixed (Just 0) d)
| otherwise = Just (show d)
yamlToString _ = Nothing
yamlToList :: Yaml.Value -> Maybe [Yaml.Value]
yamlToList (Yaml.Array a) = Just (V.toList a)
yamlToList _ = Nothing

2
example/.gitignore vendored
View File

@ -1,2 +0,0 @@
_site
_cache

14
example/README.md
View File

@ -1,14 +0,0 @@
## Commands
recompile css
```sh
tailwindcss -i ./content/css/main.css -o ./content/css/mini.css --minify
```
build, serve and watch
```sh
cabal run site -- watch
```

17
example/content/about.rst
View File

@ -1,17 +0,0 @@
---
title: About
---
Nullam imperdiet sodales orci vitae molestie. Nunc quam orci, pharetra a
rhoncus vitae, eleifend id felis. Suspendisse potenti. Etiam vitae urna orci.
Quisque pellentesque dignissim felis, egestas tempus urna luctus vitae. In hac
habitasse platea dictumst. Morbi fringilla mattis odio, et mattis tellus
accumsan vitae.
1. Amamus Unicode 碁
2. Interdum nex magna.
Vivamus eget mauris sit amet nulla laoreet lobortis. Nulla in diam elementum
risus convallis commodo. Cras vehicula varius dui vitae facilisis. Proin
elementum libero eget leo aliquet quis euismod orci vestibulum. Duis rhoncus
lorem consequat tellus vestibulum aliquam. Quisque orci orci, malesuada porta
blandit et, interdum nec magna.

6
example/content/contact.markdown
View File

@ -1,6 +0,0 @@
---
title: Contact
---
I live in a small hut in the mountains of Kumano Kodō on Kii Hantō and would not
like to be contacted.

34
example/content/css/custom.css
View File

@ -1,34 +0,0 @@
.components-flex {
display: flex;
gap: 1.4em;
flex-direction: row;
align-items: center;
justify-content: center;
}
.components-grid {
display: grid;
grid-column-gap: 1.4em;
grid-template-columns: auto;
grid-template-rows: auto;
align-items: center;
justify-content: center;
}
.image-grid {
display: grid;
grid-template-rows: auto;
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
grid-template-columns: repeat(
auto-fit,
minmax(calc(var(--page-width) / 12), 1fr)
);
}
@media only screen and (min-width: 45em) {
.components-grid {
grid-template-columns: 3fr 9fr;
}
}

141
example/content/css/default.css
View File

@ -1,141 +0,0 @@
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
color: #000;
}
header {
border-bottom: 0.2rem solid #000;
}
nav {
text-align: right;
}
nav a {
font-size: 1.8rem;
font-weight: bold;
color: black;
text-decoration: none;
text-transform: uppercase;
}
footer {
margin-top: 3rem;
padding: 1.2rem 0;
border-top: 0.2rem solid #000;
font-size: 1.2rem;
color: #555;
}
h1 {
font-size: 2.4rem;
}
h2 {
font-size: 2rem;
}
article .header {
font-size: 1.4rem;
font-style: italic;
color: #555;
}
.logo a {
font-weight: bold;
color: #000;
text-decoration: none;
}
@media (max-width: 319px) {
body {
width: 90%;
margin: 0;
padding: 0 5%;
}
header {
margin: 4.2rem 0;
}
nav {
margin: 0 auto 3rem;
text-align: center;
}
footer {
text-align: center;
}
.logo {
text-align: center;
margin: 1rem auto 3rem;
}
.logo a {
font-size: 2.4rem;
}
nav a {
display: block;
line-height: 1.6;
}
}
@media (min-width: 320px) {
body {
width: 90%;
margin: 0;
padding: 0 5%;
}
header {
margin: 4.2rem 0;
}
nav {
margin: 0 auto 3rem;
text-align: center;
}
footer {
text-align: center;
}
.logo {
text-align: center;
margin: 1rem auto 3rem;
}
.logo a {
font-size: 2.4rem;
}
nav a {
display: inline;
margin: 0 0.6rem;
}
}
@media (min-width: 640px) {
body {
width: 60rem;
margin: 0 auto;
padding: 0;
}
header {
margin: 0 0 3rem;
padding: 1.2rem 0;
}
nav {
margin: 0;
text-align: right;
}
nav a {
margin: 0 0 0 1.2rem;
display: inline;
}
footer {
text-align: right;
}
.logo {
margin: 0;
text-align: left;
}
.logo a {
float: left;
font-size: 1.8rem;
}
}

10
example/content/css/main.css
View File

@ -1,10 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
/* Set in tailwindconfig */
font-family: "jetbrains-mono";
src: local("jetbrains-mono"),
url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

1
example/content/css/mini.css
View File

File diff suppressed because one or more lines are too long

349
example/content/css/normalize.css vendored
View File

@ -1,349 +0,0 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

994
example/content/css/terminal.css
View File

@ -1,994 +0,0 @@
:root {
--global-font-size: 20px;
--global-line-height: 1.6em;
--global-space: 12px;
--font-stack: "JetBrains Mono", Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
serif;
--mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
serif;
--background-color: #222225;
--page-width: 60em;
--font-color: #e8e9ed;
--invert-font-color: #222225;
--secondary-color: #a3abba;
--tertiary-color: #a3abba;
--primary-color: #62c4ff;
--error-color: #ff3c74;
--progress-bar-background: #3f3f44;
--progress-bar-fill: #62c4ff;
--code-bg-color: #3f3f44;
--input-style: solid;
--display-h1-decoration: none;
}
* {
box-sizing: border-box;
text-rendering: geometricPrecision;
}
*::-moz-selection {
background: var(--primary-color);
color: var(--invert-font-color);
}
*::selection {
background: var(--primary-color);
color: var(--invert-font-color);
}
body {
font-size: var(--global-font-size);
color: var(--font-color);
line-height: var(--global-line-height);
margin: 0;
font-family: var(--font-stack);
word-wrap: break-word;
background-color: var(--background-color);
}
h1,
h2,
h3,
h4,
h5,
h6,
.logo {
line-height: var(--global-line-height);
}
a {
cursor: pointer;
color: var(--primary-color);
text-decoration: none;
}
a:hover {
background-color: var(--primary-color);
color: var(--invert-font-color);
}
em {
font-size: var(--global-font-size);
font-style: italic;
font-family: var(--font-stack);
color: var(--font-color);
}
blockquote,
code,
em,
strong {
line-height: var(--global-line-height);
}
blockquote,
code,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
li,
ol,
p,
section,
ul,
.logo {
float: none;
margin: 0;
padding: 0;
}
blockquote,
h1,
ol,
p,
ul,
.logo {
margin-top: calc(var(--global-space) * 2);
margin-bottom: calc(var(--global-space) * 2);
}
h1,
.logo {
position: relative;
display: inline-block;
display: table-cell;
padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
margin: 0;
overflow: hidden;
font-weight: 600;
}
h1::after {
content: "====================================================================================================";
position: absolute;
bottom: 5px;
left: 0;
display: var(--display-h1-decoration);
}
h1 + *,
.logo + * {
margin-top: 0;
}
h2,
h3,
h4,
h5,
h6 {
position: relative;
margin-bottom: var(--global-line-height);
font-weight: 600;
}
blockquote {
position: relative;
padding-left: calc(var(--global-space) * 2);
padding-left: 2ch;
overflow: hidden;
}
blockquote::after {
content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
white-space: pre;
position: absolute;
top: 0;
left: 0;
line-height: var(--global-line-height);
color: #9ca2ab;
}
code {
font-weight: inherit;
background-color: var(--code-bg-color);
font-family: var(--mono-font-stack);
}
code::after,
code::before {
content: "`";
display: inline;
}
pre code::after,
pre code::before {
content: "";
}
pre {
display: block;
word-break: break-all;
word-wrap: break-word;
color: var(--secondary-color);
background-color: var(--background-color);
border: 1px solid var(--secondary-color);
padding: var(--global-space);
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}
pre code {
overflow-x: scroll;
padding: 0;
margin: 0;
display: inline-block;
min-width: 100%;
font-family: var(--mono-font-stack);
}
.terminal blockquote,
.terminal code,
.terminal h1,
.terminal h2,
.terminal h3,
.terminal h4,
.terminal h5,
.terminal h6,
.terminal strong,
.terminal .logo {
font-size: var(--global-font-size);
font-style: normal;
font-family: var(--font-stack);
color: var(--font-color);
}
.terminal-prompt {
position: relative;
white-space: nowrap;
}
.terminal-prompt::before {
content: "> ";
}
.terminal-prompt::after {
content: "";
animation: cursor 1200ms infinite;
background: var(--primary-color);
border-radius: 0;
display: inline-block;
height: 1em;
margin-left: 0.2em;
width: 3px;
bottom: -2px;
position: relative;
}
@-webkit-keyframes cursor {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes cursor {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
li,
li > ul > li {
position: relative;
display: block;
padding-left: calc(var(--global-space) * 2);
}
nav > ul > li {
padding-left: 0;
}
li::after {
position: absolute;
top: 0;
left: 0;
}
ul > li::after {
content: "-";
}
nav ul > li::after {
content: "";
}
ol li::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
ol ol li::before {
content: counters(item, ".") " ";
counter-increment: item;
}
.terminal-menu li::after,
.terminal-menu li::before {
display: none;
}
ol {
counter-reset: item;
}
ol li:nth-child(n+10)::after {
left: -7px;
}
ol ol {
margin-top: 0;
margin-bottom: 0;
}
.terminal-menu {
width: 100%;
}
.terminal-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
}
ul ul {
margin-top: 0;
margin-bottom: 0;
}
.terminal-menu ul {
list-style-type: none;
padding: 0 !important;
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
font-size: var(--global-font-size);
margin-top: 0;
}
.terminal-menu li {
display: flex;
margin: 0 0 0.5em 0;
padding: 0;
}
ol.terminal-toc li {
border-bottom: 1px dotted var(--secondary-color);
padding: 0;
margin-bottom: 15px;
}
.terminal-menu li:last-child {
margin-bottom: 0;
}
ol.terminal-toc li a {
margin: 4px 4px 4px 0;
background: var(--background-color);
position: relative;
top: 6px;
text-align: left;
padding-right: 4px;
}
.terminal-menu li a:not(.btn) {
text-decoration: none;
display: block;
width: 100%;
border: none;
color: var(--secondary-color);
}
.terminal-menu li a.active {
color: var(--font-color);
}
.terminal-menu li a:hover {
background: none;
color: inherit;
}
ol.terminal-toc li::before {
content: counters(item, ".") ". ";
counter-increment: item;
position: absolute;
right: 0;
background: var(--background-color);
padding: 4px 0 4px 4px;
bottom: -8px;
}
ol.terminal-toc li a:hover {
background: var(--primary-color);
color: var(--invert-font-color);
}
hr {
position: relative;
overflow: hidden;
margin: calc(var(--global-space) * 4) 0;
border: 0;
border-bottom: 1px dashed var(--secondary-color);
}
p {
margin: 0 0 var(--global-line-height);
color: var(--global-font-color);
}
.container {
max-width: var(--page-width);
}
.container,
.container-fluid {
margin: 0 auto;
padding: 0 calc(var(--global-space) * 2);
}
img {
width: 100%;
}
.progress-bar {
height: 8px;
background-color: var(--progress-bar-background);
margin: 12px 0;
}
.progress-bar.progress-bar-show-percent {
margin-top: 38px;
}
.progress-bar-filled {
background-color: var(--progress-bar-fill);
height: 100%;
transition: width 0.3s ease;
position: relative;
width: 0;
}
.progress-bar-filled::before {
content: "";
border: 6px solid transparent;
border-top-color: var(--progress-bar-fill);
position: absolute;
top: -12px;
right: -6px;
}
.progress-bar-filled::after {
color: var(--progress-bar-fill);
content: attr(data-filled);
display: block;
font-size: 12px;
white-space: nowrap;
position: absolute;
border: 6px solid transparent;
top: -38px;
right: 0;
-ms-transform: translateX(50%);
transform: translateX(50%);
}
.progress-bar-no-arrow > .progress-bar-filled::before,
.progress-bar-no-arrow > .progress-bar-filled::after {
content: "";
display: none;
visibility: hidden;
opacity: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: var(--global-line-height) 0;
color: var(--font-color);
font-size: var(--global-font-size);
}
table td,
table th {
vertical-align: top;
border: 1px solid var(--font-color);
line-height: var(--global-line-height);
padding: calc(var(--global-space) / 2);
font-size: 1em;
}
table thead th {
font-size: 1em;
}
table tfoot tr th {
font-weight: 500;
}
table caption {
font-size: 1em;
margin: 0 0 1em 0;
}
table tbody td:first-child {
font-weight: 700;
color: var(--secondary-color);
}
.form {
width: 100%;
}
fieldset {
border: 1px solid var(--font-color);
padding: 1em;
}
label {
font-size: 1em;
color: var(--font-color);
}
input[type="email"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="search"] {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: 0.7em 0.5em;
font-size: 1em;
font-family: var(--font-stack);
-webkit-appearance: none;
border-radius: 0;
}
input[type="email"]:active,
input[type="text"]:active,
input[type="number"]:active,
input[type="password"]:active,
input[type="search"]:active,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid {
border-color: var(--error-color);
}
input,
textarea {
color: var(--font-color);
background-color: var(--background-color);
}
input::placeholder,
textarea::placeholder {
color: var(--secondary-color) !important;
opacity: 1;
}
textarea {
height: auto;
width: 100%;
resize: none;
border: 1px var(--input-style) var(--font-color);
padding: 0.5em;
font-size: 1em;
font-family: var(--font-stack);
-webkit-appearance: none;
border-radius: 0;
}
textarea:focus {
outline: none;
-webkit-appearance: none;
border: 1px solid var(--font-color);
}
textarea:not(:placeholder-shown):invalid {
border-color: var(--error-color);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid var(--font-color);
-webkit-text-fill-color: var(--font-color);
box-shadow: 0 0 0 1000px var(--invert-font-color) inset;
-webkit-box-shadow: 0 0 0 1000px var(--invert-font-color) inset;
transition: background-color 5000s ease-in-out 0s;
}
.form-group {
margin-bottom: var(--global-line-height);
overflow: auto;
}
.btn {
border-style: solid;
border-width: 1px;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
outline: none;
padding: 0.65em 2em;
font-size: 1em;
font-family: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
z-index: 1;
}
.btn:active {
box-shadow: none;
}
.btn.btn-ghost {
border-color: var(--font-color);
color: var(--font-color);
background-color: transparent;
}
.btn.btn-ghost:focus,
.btn.btn-ghost:hover {
border-color: var(--tertiary-color);
color: var(--tertiary-color);
z-index: 2;
}
.btn.btn-ghost:hover {
background-color: transparent;
}
.btn-block {
width: 100%;
display: -ms-flexbox;
display: flex;
}
.btn-default {
background-color: var(--font-color);
border-color: var(--invert-font-color);
color: var(--invert-font-color);
}
.btn-default:hover,
.btn-default:focus:not(.btn-ghost) {
background-color: var(--secondary-color);
color: var(--invert-font-color);
}
.btn-default.btn-ghost:focus,
.btn-default.btn-ghost:hover {
border-color: var(--secondary-color);
color: var(--secondary-color);
z-index: 2;
}
.btn-error {
color: var(--invert-font-color);
background-color: var(--error-color);
border: 1px solid var(--error-color);
}
.btn-error:hover,
.btn-error:focus:not(.btn-ghost) {
background-color: var(--error-color);
border-color: var(--error-color);
}
.btn-error.btn-ghost {
border-color: var(--error-color);
color: var(--error-color);
}
.btn-error.btn-ghost:focus,
.btn-error.btn-ghost:hover {
border-color: var(--error-color);
color: var(--error-color);
z-index: 2;
}
.btn-primary {
color: var(--invert-font-color);
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-primary:hover,
.btn-primary:focus:not(.btn-ghost) {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary.btn-ghost {
border-color: var(--primary-color);
color: var(--primary-color);
}
.btn-primary.btn-ghost:focus,
.btn-primary.btn-ghost:hover {
border-color: var(--primary-color);
color: var(--primary-color);
z-index: 2;
}
.btn-small {
padding: 0.5em 1.3em !important;
font-size: 0.9em !important;
}
.btn-group {
overflow: auto;
}
.btn-group .btn {
float: left;
}
.btn-group .btn-ghost:not(:first-child) {
margin-left: -1px;
}
.terminal-card {
border: 1px solid var(--secondary-color);
}
.terminal-card > header {
color: var(--invert-font-color);
text-align: center;
background-color: var(--secondary-color);
padding: 0.5em 0;
}
.terminal-card > div:first-of-type {
padding: var(--global-space);
}
.terminal-timeline {
position: relative;
padding-left: 70px;
}
.terminal-timeline::before {
content: ' ';
background: var(--secondary-color);
display: inline-block;
position: absolute;
left: 35px;
width: 2px;
height: 100%;
z-index: 400;
}
.terminal-timeline .terminal-card {
margin-bottom: 25px;
}
.terminal-timeline .terminal-card::before {
content: ' ';
background: var(--invert-font-color);
border: 2px solid var(--secondary-color);
display: inline-block;
position: absolute;
margin-top: 25px;
left: 26px;
width: 15px;
height: 15px;
z-index: 400;
}
.terminal-alert {
color: var(--font-color);
padding: 1em;
border: 1px solid var(--font-color);
margin-bottom: var(--global-space);
}
.terminal-alert-error {
color: var(--error-color);
border-color: var(--error-color);
}
.terminal-alert-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
@media screen and (max-width: 960px) {
label {
display: block;
width: 100%;
}
pre::-webkit-scrollbar {
height: 3px;
}
}
@media screen and (max-width: 480px) {
form {
width: 100%;
}
}
@media only screen and (min-width: 30em) {
.terminal-nav {
flex-direction: row;
align-items: center;
}
.terminal-menu ul {
flex-direction: row;
justify-items: flex-end;
align-items: center;
justify-content: flex-end;
margin-top: calc(var(--global-space) * 2);
}
.terminal-menu li {
margin: 0;
margin-right: 2em;
}
.terminal-menu li:last-child {
margin-right: 0;
}
}
.terminal-media:not(:last-child) {
margin-bottom: 1.25rem;
}
.terminal-media-left {
padding-right: var(--global-space);
}
.terminal-media-left,
.terminal-media-right {
display: table-cell;
vertical-align: top;
}
.terminal-media-right {
padding-left: var(--global-space);
}
.terminal-media-body {
display: table-cell;
vertical-align: top;
}
.terminal-media-heading {
font-size: 1em;
font-weight: 700;
}
.terminal-media-content {
margin-top: 0.3rem;
}
.terminal-placeholder {
background-color: var(--secondary-color);
text-align: center;
color: var(--font-color);
font-size: 1rem;
border: 1px solid var(--secondary-color);
}
figure > img {
padding: 0;
}
.terminal-avatarholder {
width: calc(var(--global-space) * 5);
height: calc(var(--global-space) * 5);
}
.terminal-avatarholder img {
padding: 0;
}
figure {
margin: 0;
}
figure > figcaption {
color: var(--secondary-color);
text-align: center;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--block-background-color);
color: var(--font-color);
}
.hljs-comment,
.hljs-quote {
color: var(--secondary-color);
}
.hljs-variable {
color: var(--font-color);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: var(--primary-color);
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: var(--secondary-color);
}
.hljs-string {
color: var(--secondary-color);
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: var(--primary-color);
}
.hljs-doctag {
color: var(--secondary-color);
}
.hljs-attr {
color: var(--primary-color);
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: var(--primary-color);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}

1
example/content/css/terminal.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
example/content/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
example/content/fonts/JetBrainsMono-Bold.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-BoldItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-ExtraBold.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-ExtraBoldItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-ExtraLight.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-ExtraLightItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-Italic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-Light.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-LightItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-Medium.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-MediumItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-Regular.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-SemiBold.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-SemiBoldItalic.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-Thin.woff2
View File

Binary file not shown.

BIN
example/content/fonts/JetBrainsMono-ThinItalic.woff2
View File

Binary file not shown.

BIN
example/content/images/haskell-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.5 KiB

1
example/content/images/icons/github.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
example/content/images/icons/linkedin.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 672 B

1
example/content/images/icons/twitter.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

0
example/content/index.html
View File

59
example/content/posts/2015-08-12-spqr.markdown
View File

@ -1,59 +0,0 @@
---
title: S.P.Q.R.
---
Mauris in lorem nisl. Maecenas tempus facilisis ante, eget viverra nisl
tincidunt et. Donec turpis lectus, mattis ac malesuada a, accumsan eu libero.
Morbi condimentum, tortor et tincidunt ullamcorper, sem quam pretium nulla, id
convallis lectus libero nec turpis. Proin dapibus nisi id est sodales nec
ultrices tortor pellentesque. Vivamus vel nisi ac lacus sollicitudin vulputate
ac ut ligula. Nullam feugiat risus eget eros gravida in molestie sapien euismod.
Nunc sed hendrerit orci. Nulla mollis consequat lorem ac blandit. Ut et turpis
mauris. Nulla est odio, posuere id ullamcorper sit amet, tincidunt vel justo.
Curabitur placerat tincidunt varius. Nulla vulputate, ipsum eu consectetur
mollis, dui nibh aliquam neque, at ultricies leo ligula et arcu. Proin et mi
eget tellus sodales lobortis. Sed tempor, urna vel pulvinar faucibus, lectus
urna vehicula ante, at facilisis dolor odio at lorem. Morbi vehicula euismod
urna, et imperdiet urna ornare vitae.
Sed tincidunt sollicitudin ultrices. In hac habitasse platea dictumst. Morbi
ligula lectus, egestas at ultricies nec, fringilla et tellus. Duis urna lorem,
bibendum a ornare sed, euismod sed nunc. Aliquam tempor massa at velit fringilla
fringilla. Praesent sit amet tempor felis. Maecenas id felis ac velit aliquam
tempor a sit amet orci. Nunc placerat nulla pellentesque sem commodo cursus.
Praesent quis sapien orci, quis ultricies augue. Nam vestibulum sem non augue
semper tincidunt pellentesque ipsum volutpat. Duis congue, nunc a aliquam
luctus, quam ante convallis nisi, ac pellentesque lacus orci vel turpis. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Suspendisse hendrerit nisl eu felis sagittis faucibus. Nunc eu congue
lorem. Quisque non nibh nisi, et ultrices massa. Sed vitae erat vitae nulla
pellentesque fermentum.
Ut diam nunc, consectetur ut ultrices eu, iaculis sed felis. Sed lacinia, odio
et accumsan luctus, arcu ipsum accumsan erat, sit amet malesuada libero lacus et
velit. Donec accumsan tristique tristique. Proin a metus magna, vitae mattis
nisl. Integer a libero ipsum. Mauris faucibus eleifend metus id sodales. Morbi
ornare, nibh nec facilisis imperdiet, turpis sem commodo lorem, id commodo
mauris metus vitae justo. Etiam at pellentesque tortor. Proin mollis accumsan
ligula, nec tempus augue auctor quis. Nulla lacinia, mi quis lobortis auctor,
nisi diam posuere dui, pulvinar feugiat dui libero eget quam. Fusce eu risus
nunc, a consectetur orci. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Maecenas venenatis aliquet orci, a
ultricies sem facilisis eu. Donec dolor purus, porta condimentum convallis nec,
dignissim nec libero.
Etiam rutrum ultricies dui, et interdum metus elementum et. Nulla sapien nunc,
interdum tristique porttitor in, laoreet vitae mi. Ut vehicula auctor mauris sit
amet bibendum. Phasellus adipiscing mattis libero, eget adipiscing erat
dignissim at. Vivamus convallis malesuada metus nec cursus. Ut cursus, lorem
eleifend sollicitudin condimentum, felis tortor sodales augue, ac tempus lacus
ipsum vitae quam. Vestibulum vitae lacus non tortor vehicula iaculis faucibus
quis massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Duis malesuada neque nec ante porttitor accumsan. Suspendisse potenti.
Aliquam in lacus magna, imperdiet laoreet lectus. Praesent id diam nec ante
commodo rhoncus nec vel augue. Pellentesque tortor massa, dignissim ut sagittis
sed, hendrerit vitae nunc. Nam gravida, urna vitae hendrerit rutrum, felis augue
vulputate tortor, ut varius velit libero nec lectus. In adipiscing massa in est
scelerisque ullamcorper. Vivamus in nisi metus.

46
example/content/posts/2015-10-07-rosa-rosa-rosam.markdown
View File

@ -1,46 +0,0 @@
---
title: Rosa Rosa Rosam
author: Ovidius
---
Suspendisse pharetra ullamcorper sem et auctor. Suspendisse vitae tellus eu
turpis dignissim gravida ut ut tortor. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Morbi aliquam sapien quis nisl
sodales non aliquet nisl iaculis. Curabitur fermentum orci vel sapien
pellentesque id condimentum metus vehicula. Curabitur turpis purus, scelerisque
at interdum quis, placerat sit amet tortor. Aliquam erat volutpat.
Integer posuere felis non arcu suscipit ullamcorper. Nam tempus risus venenatis
orci sagittis eu aliquam ante tincidunt. Aenean vehicula ipsum id sapien
tincidunt commodo. Aliquam erat volutpat. Curabitur vehicula libero ac turpis
cursus consectetur. Praesent posuere egestas purus et dapibus. Mauris egestas,
lectus vitae scelerisque ultricies, metus lorem tempor nisi, sed vehicula tortor
mauris nec urna. Quisque urna tellus, facilisis at mollis eget, adipiscing in
nisl. Proin quam arcu, euismod et imperdiet sed, ultricies sed orci.
Nulla malesuada sem eget lectus scelerisque nec rhoncus metus interdum. In dui
felis, rhoncus id scelerisque eget, vulputate id sem. Nulla facilisi. Vestibulum
eleifend, metus dignissim lacinia ornare, magna nulla vehicula nisi, sed
molestie mauris ipsum vel turpis. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nulla urna leo, vehicula
eget dignissim a, hendrerit ut risus. Fusce ultricies elementum placerat. Nam at
dolor sed nisi mollis sollicitudin vitae at urna. Vestibulum iaculis adipiscing
eros et mollis.
Phasellus ultricies elit eu risus sagittis eu dictum ante ultrices. Nulla
congue, augue ac placerat tempor, orci mi luctus nisi, at varius ipsum sem sed
eros. Vivamus eget velit eget felis posuere ornare. In sed metus non est iaculis
facilisis dapibus sit amet enim. Aliquam viverra tortor eget neque volutpat in
auctor urna rutrum. Aliquam ligula augue, congue sit amet rutrum in, semper vel
nulla. Sed tempus porttitor faucibus. Donec cursus sodales nulla, quis lacinia
mi vehicula vel. Sed nec purus orci. Nam leo sapien, rutrum a ultrices quis,
placerat vel ligula. Donec massa quam, pellentesque et molestie nec, hendrerit
id mauris. In hac habitasse platea dictumst. Cras quis quam sem. Curabitur in
arcu diam, in interdum mauris.
Proin lorem sapien, iaculis et faucibus nec, dictum sed nunc. Pellentesque in
purus justo. Vestibulum facilisis rutrum nisi, a egestas nunc suscipit sed. Ut
quis tortor a arcu bibendum placerat non sed ante. Praesent orci sem, posuere
sit amet cursus molestie, volutpat ut purus. Curabitur aliquam, purus in
pharetra viverra, lorem leo aliquam tellus, vel consequat felis neque et mauris.
Aliquam erat volutpat.

50
example/content/posts/2015-11-28-carpe-diem.markdown
View File

@ -1,50 +0,0 @@
---
title: Carpe Diem
---
Fusce tortor quam, egestas in posuere quis, porttitor vel turpis. Donec
vulputate porttitor augue at rhoncus. Proin iaculis consectetur sagittis.
Curabitur venenatis turpis sit amet purus tristique nec posuere risus laoreet.
Nullam nisi sem, dapibus id semper id, egestas vel arcu. Morbi porttitor ipsum
placerat erat consequat sed consequat purus feugiat. Donec auctor elit ut risus
mattis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin vulputate sapien facilisis leo ornare pulvinar. Fusce tempus massa a risus
semper iaculis. Suspendisse sollicitudin posuere nunc, sit amet rutrum leo
facilisis mattis. Sed ornare auctor dui, vitae rutrum neque auctor sit amet.
Proin ac dui magna. Mauris vehicula interdum augue, nec ultrices libero egestas
quis. Nunc convallis euismod ipsum, id sollicitudin orci consequat ac. Fusce
bibendum congue libero, in rutrum nulla congue non. Cras sit amet risus tortor,
eu pellentesque dui. Phasellus euismod enim non nibh sodales quis consectetur
lorem laoreet. Vivamus a egestas quam. Curabitur in tortor augue, vitae varius
tellus. Integer varius, elit ac gravida suscipit, eros erat pellentesque nisi,
et tristique augue odio id nulla. Aliquam sit amet nunc vel tellus hendrerit
tempus ac vel sem.
Aenean tincidunt sollicitudin sapien ut porttitor. Curabitur molestie adipiscing
lorem vel scelerisque. Donec vitae interdum est. Proin rutrum vulputate
faucibus. Suspendisse sit amet felis odio, non volutpat ante. Sed eu lectus
quam. Curabitur tristique rhoncus est, vel commodo tortor suscipit semper.
Maecenas feugiat vestibulum nisi id facilisis. Nulla non tincidunt libero.
Praesent ultrices interdum commodo. Sed euismod nisl auctor leo ultrices rutrum.
Aliquam nibh felis, congue molestie blandit at, bibendum at eros. Aenean
tincidunt, tortor iaculis placerat sollicitudin, lorem justo tempor diam, et
posuere sapien leo et magna. Quisque vel aliquam mauris.
Proin varius tempus fermentum. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Sed tincidunt nunc id magna
adipiscing non sollicitudin turpis tempor. Etiam vel elit ipsum, quis euismod
velit. Quisque elementum magna vitae quam venenatis lacinia. Sed at arcu ipsum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Donec ut lorem ac sapien cursus lacinia sit amet mollis dolor.
Vivamus tempus odio nec magna faucibus sed hendrerit lorem tempor.
Vestibulum eu nisi arcu. Curabitur nisi risus, fermentum ut lacinia ut, interdum
nec magna. Nunc aliquet gravida massa, eu aliquam lorem faucibus at. Sed
sollicitudin volutpat velit id tempor. In nibh justo, pharetra et pretium
dignissim, tempus in turpis. Phasellus eget lobortis nisl. Phasellus sed
fermentum diam. Nam tempus pharetra odio, quis congue eros imperdiet eu. Aliquam
dui eros, hendrerit et vulputate vel, porta eu eros. Nullam nisi dui, commodo
eget pharetra ut, ornare sit amet nunc. Fusce vel neque urna. Maecenas nulla
ante, egestas at consequat quis, fermentum a enim. Aliquam id tristique urna.
Integer augue justo, scelerisque et consectetur id, rhoncus eget enim.

58
example/content/posts/2015-12-07-tu-quoque.markdown
View File

@ -1,58 +0,0 @@
---
title: Tu Quoque
author: Julius
---
Vestibulum leo turpis, dignissim quis ultrices sit amet, iaculis ac ligula.
Pellentesque tristique, velit eget scelerisque scelerisque, est dolor ultrices
arcu, quis ullamcorper justo arcu luctus mauris. Integer congue molestie nisi id
posuere. Fusce pellentesque gravida tempus. Integer viverra tortor nec eros
mollis quis convallis sem laoreet. Nulla id libero ac erat varius laoreet. Proin
sed est est. Curabitur lacinia fermentum lorem, elementum malesuada ipsum
malesuada ut. Donec suscipit elit id leo vehicula mattis non sed leo. Morbi
varius eleifend varius. Nulla vestibulum, neque vitae aliquam eleifend, nisi
tellus placerat nunc, quis suscipit elit turpis eu tortor. Etiam euismod
convallis lectus quis venenatis. Phasellus laoreet magna in nibh cursus eu
egestas nulla convallis. Aliquam vel ullamcorper risus. Fusce dictum, massa id
consequat viverra, nulla ante tristique est, a faucibus nisi enim nec dui. Donec
metus ligula, condimentum at porttitor eget, lobortis at quam.
Aenean vel libero in magna ultricies congue in a odio. Donec faucibus rutrum
ornare. Fusce dictum eleifend fermentum. Vestibulum vel nibh a metus porttitor
rhoncus. Pellentesque id quam neque, eget molestie arcu. Integer in elit vel
neque viverra ultricies in eget massa. Nam ut convallis est. Pellentesque eros
eros, sodales non vehicula et, tincidunt ut odio. Cras suscipit ultrices metus
sit amet molestie. Fusce enim leo, vehicula sed sodales quis, adipiscing at
ipsum.
Nunc tempor dignissim enim, sed tincidunt eros bibendum quis. Curabitur et dolor
augue, id laoreet mi. Nulla cursus felis id dui vehicula vitae ornare lorem
blandit. Cras eget dui nec odio volutpat pharetra. Fusce hendrerit justo justo,
vel imperdiet enim. Vivamus elit risus, interdum ultrices accumsan eleifend,
vestibulum vitae sapien. Integer bibendum ullamcorper tristique. Nulla quis odio
lectus, quis eleifend augue. Integer a ligula mauris. Aenean et tempus tortor.
Quisque at tortor mi. Vivamus accumsan feugiat est a blandit. Sed vitae enim ut
dolor semper sodales. Duis tristique, ante et placerat elementum, nulla tellus
pellentesque sapien, quis posuere velit mi eget nulla. Sed vestibulum nunc non
est porttitor ut rutrum nibh semper. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
Nulla adipiscing ultricies lobortis. Vivamus iaculis nisl vitae tellus laoreet
vitae aliquet lacus mollis. Phasellus ut lacus urna, sed sagittis ante. Etiam
consectetur pretium nisl sed dignissim. Pellentesque convallis, nisl eget
commodo mollis, sem magna consequat arcu, sed pretium ipsum arcu sit amet neque.
Aliquam erat volutpat. Morbi sed mi sed urna vestibulum placerat vitae vel
metus. Fusce ac ante at justo pharetra vehicula. Vivamus vel tortor eget augue
aliquet aliquet at vel odio. Nunc venenatis, magna quis facilisis fringilla,
augue tellus varius neque, in vulputate est eros ut tortor. Duis lorem neque,
aliquam congue posuere id, condimentum non dui. Phasellus ut dui massa,
porttitor suscipit augue. Praesent quis tellus quam, vel volutpat metus. Vivamus
enim est, aliquam in imperdiet et, sagittis eu ligula. Vestibulum hendrerit
placerat orci et aliquet. Cras pharetra, dolor placerat lobortis tempor, metus
odio cursus ligula, et posuere lacus ligula quis dui.
Donec a lectus eu nibh malesuada aliquam. Proin at metus quam, et tincidunt leo.
Quisque lacus justo, scelerisque sodales pulvinar sed, dignissim ut sapien.
Vivamus diam felis, adipiscing sollicitudin ultricies id, accumsan ac felis. In
eu posuere ligula. Suspendisse potenti. Donec porttitor dictum dui id vehicula.
Integer ante velit, congue id dictum et, adipiscing a tortor.

16
example/content/scripts/nav.js
View File

@ -1,16 +0,0 @@
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the "main-nav" element
var $target = document.getElementById('main-nav');
// Toggle the class on "main-nav"
$target.classList.toggle('hidden');
});
});
}
});

16
example/content/try_hakyll.html
View File

@ -1,16 +0,0 @@
---
title: Home
---
<h2>Welcome</h2>
<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
<p>Welcome to my blog!</p>
<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
<h2>Posts</h2>
$partial("templates/post-list.html")$
<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>

839
example/content/try_terminal.html
View File

@ -1,839 +0,0 @@
---
title: Kompact.io
---
<hr/>
<div class="components components-flex">
<div style="font-size: 7em; display: flex; align-items: center; justify-content: center; min-height: 1em">⟨K⟩</div>
<section>
<div class="terminal-card" style="font-size: 1.4em; text-align: center;">
<header>Kompact.io</header>
<div>
~> Lean dapp development
</div>
</div>
<br />
</section>
</div>
<hr/>
<p>A modern and minimal CSS framework for terminal lovers. ==> </p>
<h2 id="project-goals">Project Goals</h2>
<p>
Terminal CSS has no overhead and is lightweight
<strong>(~ 3k gzip)</strong>. The source is written in
<strong>pure css</strong> to be accessible for everybody and easy to
contribute.
</p>
<h2 id="markdown-terminal-css">Markdown ❤️ Terminal CSS</h2>
<p>
It&#39;s perfect for your <em>personal website</em>, <em>blog</em>, or
<em>side project</em>.
</p>
<h2 id="how-to-use">How to use</h2>
<p>
When using something like Webpack just install with
<code>npm i terminal.css</code>.
</p>
<pre><code class="language-js">import &#39;terminal.css&#39;</code></pre>
<p>
Terminal CSS is also available via
<a href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css"
>CDN</a
>
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css&quot; /&gt;</code></pre>
<h2 id="themes">Themes</h2>
<p>
To create your own theme just open the dev-tools and edit the CSS
Variables. Copy and paste it to your website. Done!
</p>
<br />
<h2 id="contributors">Contributors</h2>
<ul>
<li><a href="https://othyn.com/">Ben</a></li>
<li><a href="https://matiaskorhonen.fi/">Matias Korhonen</a></li>
<li><a href="https://github.com/nektro">Meghan</a></li>
<li><a href="https://ccat3z.xyz">Lingfeng Zhang</a></li>
</ul>
<br />
<p>With ❤️ by <a href="https://jduri.com">Jonas D.</a></p>
<hr />
<div class="components components-grid">
<aside id="menu">
<h2>Components</h2>
<nav>
<ul>
<li><a href="#GridSystem">Grid System</a></li>
<li><a href="#Navigation">Navigation</a></li>
<li><a href="#NavigationList">Navigation List</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Typography">Typography</a></li>
<li><a href="#Tables">Tables</a></li>
<li>
<a href="#SpecialElements">Special Elements</a>
<ul>
<li><a href="#Blockquote">Blockquote</a></li>
<li><a href="#Misc">Misc</a></li>
</ul>
</li>
<li><a href="#Forms">Forms</a></li>
<li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Buttons">Buttons</a></li>
<li><a href="#Cards">Cards</a></li>
<li><a href="#Timeline">Timeline</a></li>
<li><a href="#Alerts">Alerts</a></li>
<li><a href="#Media">Media</a></li>
<li><a href="#Figure">Image with caption</a></li>
<li><a href="#highlightjs">Supports Highlight.js</a></li>
</ul>
</nav>
<h2>Documentation</h2>
<nav>
<ul>
<li><a href="#DocVariables">Variables</a></li>
<li><a href="#DocTypography">Typography</a></li>
</ul>
</nav>
</aside>
<main>
<section>
<header>
<h2 id="GridSystem">Grid System</h2>
<p>
Terminal CSS has no build-in grid system. However, you can roll
your own with Flexbox or CSS Grid.
</p>
</header>
<div class="image-grid">
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&1"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&2"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&3"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&4"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&5"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&6"
width="auto"
height="auto"
alt="random image"
/></a>
<a href="https://picsum.photos" style="border: none"
><img
src="https://picsum.photos/200/300?random&7"
width="auto"
height="auto"
alt="random image"
/></a>
</div>
</section>
<hr />
<section>
<header><h2 id="Navigation">Navigation</h2></header>
<div class="terminal-nav">
<div class="terminal-logo">
<div class="logo terminal-prompt">
<a href="#" class="no-style">Logo</a>
</div>
</div>
<nav class="terminal-menu">
<ul>
<li><a class="menu-item" href="#">Item #1</a></li>
<li>
<a class="menu-item active" href="#">Active Item #2</a>
</li>
<li><a class="menu-item" href="#">Item #3</a></li>
</ul>
</nav>
</div>
</section>
<hr />
<section>
<header><h2 id="NavigationList">Navigation Lists</h2></header>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Settings</a></li>
<li>
<a href="#">Profile</a>
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Billing</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</section>
<hr />
<section>
<header><h2 id="Lists">Lists</h2></header>
<ul>
<li>This is a list item</li>
<li>So is this - there could be more</li>
<li>
Make sure to style list items to:
<ul>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
</ul>
</li>
<li>A couple more</li>
<li>Top-level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>
Aliquam tincidunt mauris eu risus
<ol>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<p><strong>Description lists </strong>are also included.</p>
<dl>
<dt>Description list title 01</dt>
<dd>Description list description 01</dd>
<dt>Description list title 02</dt>
<dd>Description list description 02</dd>
<dd>Description list description 03</dd>
</dl>
<p>
A <strong>Table of content</strong>, which can be used as an index
for a blog archive.
</p>
<p>
Unlike regular lists, the TOC component
<em>only supports a single depth level.</em>
</p>
<ol class="terminal-toc">
<li>
<a href="#"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li>
<a href="#"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
<li>
<a href="#"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
</ol>
</section>
<hr />
<section>
<header>
<h2 id="Typography">Typography</h2>
<h1>Level 1 Heading</h1>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<h2>Level 2 Heading</h2>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<h3>Level 3 Heading</h3>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam,
feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
</header>
</section>
<hr />
<section>
<header>
<h2 id="Tables">Tables</h2>
</header>
<table>
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
</tr>
</tbody>
</table>
</section>
<hr />
<section>
<header><h2 id="SpecialElements">Special Elements</h2></header>
<p>Terminal CSS also supports a range of special elements.</p>
<h3 id="Blockquote">Blockquote</h3>
<blockquote>
<p>
<em>This is a properly formatted blockquote, btw.</em> Measuring
programming progress by lines of code is like measuring aircraft
building progress by weight.
</p>
<footer>
<cite
><a href="http://www.thegatesnotes.com">Bill Gates</a></cite
>
</footer>
</blockquote>
<h3 id="Misc">Misc</h3>
<h5 class="terminal-prompt">Terminal Prompt</h5>
<p>
I am <a href="?abc123">the a tag</a> example<br />
I am <abbr title="test">the abbr tag</abbr> example<br />
I am <b>the b tag</b> example<br />
I am <cite>the cite tag</cite> example<br />
I am <code>the code tag</code> example<br />
I am <del>the del tag</del> example<br />
I am <dfn>the dfn tag</dfn> example<br />
I am <em>the em tag</em> example<br />
I am <i>the i tag</i> example<br />
I am <ins>the ins tag</ins> example<br />
I am <kbd>the kbd tag</kbd> example<br />
I am <q>the q tag</q> example<br />
I am <samp>the samp tag</samp> example<br />
I am <small>the small tag</small> example<br />
I am <span>the span tag</span> example<br />
I am <strong>the strong tag</strong> example<br />
I am <sub>the sub tag</sub> example<br />
I am <sup>the sup tag</sup> example<br />
I am <var>the var tag</var> example<br />
</p>
<h4 id="Address">Address</h4>
<address>
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
</address>
<br />
</section>
<hr />
<section>
<header><h2 id="Forms">Forms</h2></header>
<form action="#">
<fieldset>
<legend>Form legend</legend>
<div class="form-group">
<label for="email">Email input:</label>
<input
id="email"
name="email"
type="email"
required
minlength="5"
placeholder="test"
/>
</div>
<div class="form-group">
<label for="text">Text input:</label>
<input
id="text"
name="text"
type="text"
required
minlength="5"
placeholder="test"
/>
</div>
<div class="form-group">
<label for="itext">Invalid input (min-length 10):</label>
<input id="itext" name="itext" type="text" minlength="10" />
</div>
<div class="form-group">
<label for="pw">Password input:</label>
<input type="password" id="pw" name="pw" value="password" />
</div>
<div class="form-group">
<label for="radio">Radio input:</label>
<input name="radio" type="radio" id="radio" />
</div>
<div class="form-group">
<label for="check">Checkbox input:</label>
<input for="check" type="checkbox" id="check" />
</div>
<div class="form-group">
<label for="select">Select field:</label>
<select id="select" name="select">
<option>Option 01</option>
<option>Option 02</option>
</select>
</div>
<div class="form-group">
<label for="tarea">Textarea:</label>
<textarea id="tarea" cols="30" rows="5" name=="tarea">
</textarea
</div>
<div class="form-group">
<label for="submit">Input Button:</label>
<button
class="btn btn-default"
type="submit"
role="button"
name="submit"
id="submit"
>
Submit
</button>
</div>
</fieldset>
</form>
</section>
<hr />
<section>
<header><h2 id="Progress">Progress Bar</h2></header>
<br />
<p>With only an arrow</p>
<div class="progress-bar">
<div class="progress-bar-filled" style="width: 40%"></div>
</div>
<p>With a percentage showing above the arrow</p>
<div class="progress-bar progress-bar-show-percent">
<div
class="progress-bar-filled"
style="width: 30%"
data-filled="Loading 30%"
></div>
</div>
<p>Without arrow</p>
<div class="progress-bar progress-bar-no-arrow">
<div
class="progress-bar-filled"
style="width: 60%"
data-filled="Loading 60%"
></div>
</div>
<br />
</section>
<hr />
<section>
<header><h2 id="Buttons">Buttons</h2></header>
<button class="btn btn-default">Default</button><br /><br />
<button class="btn btn-primary">Primary</button><br /><br />
<button class="btn btn-error">Error</button><br /><br />
<button class="btn btn-default btn-ghost">Ghost Button</button
><br /><br />
<button class="btn btn-primary btn-ghost">Ghost Button</button
><br /><br />
<button class="btn btn-error btn-ghost">Ghost Button</button
><br /><br />
<button class="btn btn-primary btn-block">Block Level Button</button
><br /><br />
<p>Button Group</p>
<div class="btn-group">
<button class="btn btn-default btn-ghost">Left</button>
<button class="btn btn-default btn-ghost">Middle</button>
<button class="btn btn-default btn-ghost">Right</button>
</div>
<br />
</section>
<hr />
<section>
<header><h2 id="Cards">Cards</h2></header>
<div class="terminal-card">
<header>Card Title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Expedita, quas ex vero enim in doloribus officiis ullam vel nam
esse sapiente velit incidunt. Eaque quod et, aut maiores
excepturi sint.
</div>
</div>
<br />
</section>
<hr />
<section>
<header><h2 id="Timeline">Timeline</h2></header>
<div class="terminal-timeline">
<div class="terminal-card">
<header>Card Title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Expedita, quas ex vero enim in doloribus officiis ullam vel
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
excepturi sint.
</div>
</div>
<div class="terminal-card">
<header>Card Title</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Expedita, quas ex vero enim in doloribus officiis ullam vel
nam esse sapiente velit incidunt. Eaque quod et, aut maiores
excepturi sint.
</div>
</div>
</div>
<br />
</section>
<hr />
<section>
<header><h2 id="Alerts">Alerts</h2></header>
<div class="terminal-alert">Default message</div>
<div class="terminal-alert terminal-alert-primary">
Primary message
</div>
<div class="terminal-alert terminal-alert-error">Error message</div>
</section>
<hr />
<section>
<header><h2 id="Figure">Image with caption</h2></header>
<figure>
<img
src="https://picsum.photos/1000/600?random&imageWithCaption"
alt="Image with caption"
title="Image with caption"
/>
<figcaption>Image with caption</figcaption>
</figure>
</section>
<hr />
<section>
<header>
<h2 id="highlightjs">Supports Highlight.js</h2>
<p>
Terminal CSS comes with a build in theme for
<a
href="https://highlightjs.org/"
target="_black"
rel="noopener noreferrer"
>Highlight.js</a
>
</p>
</header>
<pre>
<code>
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--block-background-color);
color: var(--font-color);
}
.hljs-comment,
.hljs-quote {
color: var(--secondary-color);
}
.hljs-variable {
color: var(--font-color);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: var(--primary-color);
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: var(--secondary-color);
}
.hljs-string {
color: var(--secondary-color);
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: var(--primary-color);
}
.hljs-doctag {
color: var(--secondary-color);
}
.hljs-attr {
color: var(--primary-color);
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: var(--primary-color);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</code>
</pre>
</section>
<hr />
<section>
<header><h2>Documentation</h2></header>
<p>
Most of the documentation is still at an early stage. For more
details, please have a look at the source of this website.
</p>
<section>
<header>
<h2 id="DocVariables">Variables</h2>
</header>
<p>
Customizing the style of Terminal CSS with CSS Variables is
easy.
</p>
<dl class="custom-dl">
<style>
.custom-dl dt {
font-weight: 600;
}
.custom-dl dd.italic {
font-style: italic;
}
</style>
<dt>--global-font-size</dt>
<dd>The Base font size</dd>
<dt>--global-line-height</dt>
<dd>
The base line height. Modify this to achieve the best
readability.
</dd>
<dt>--font-stack</dt>
<dd>The fonts for the website.</dd>
<dd>
Use <code>@font-face</code> or any other font provider to
include your custom fonts.
</dd>
<dt>--mono-font-stack</dt>
<dd>Same as above but for <code>code</code>.</dd>
<dt>--background-color</dt>
<dd>The page background color</dd>
<dt>--font-color</dt>
<dd>
The base font color for text, headlines, blockquotes, lists,
etc.
</dd>
<dt>--invert-font-color</dt>
<dd>
Sometimes text appears on a colored background. Adjust this
color to improve readability.
</dd>
<dt>--primary-color</dt>
<dd>The primary color is used for links and buttons.</dd>
<dt>--secondary-color</dt>
<dd>
The secondary color is more subtle then the primary color.
It's used for code highlighting and image captions.
</dd>
<dt>--error-color</dt>
<dd>Used for error alerts and form validation.</dd>
<dt>--progress-bar-background</dt>
<dd>The background color of progress bars.</dd>
<dt>--progress-bar-fill</dt>
<dd>
The fill color, indicating the progress in progress bars.
</dd>
<dt>--code-bg-color</dt>
<dd>
The background color of <code>&lt;code&gt;</code> elements.
</dd>
<dt>--input-style</dt>
<dd>
The style of input element borders. Possible values are:
</dd>
<dd class="italic">
none, solid, dotted, dashed, double, groove, ridge, inset,
outset, hidden, inherit, initial, unset
</dd>
<dt>--display-h1-decoration</dt>
<dd>
Show a double dash below <code>h1</code> elements. Possible
values are:
</dd>
<dd class="italic">block, none</dd>
</dl>
</section>
<hr />
<section>
<header>
<h2 id="DocTypography">Typography</h2>
</header>
<p>
Terminal CSS uses a single font size for almost all elements.
However, there is a way to use browser default font sizes if you
wish.
</p>
<dl class="custom-dl">
<dt>Single font size</dt>
<dd>
Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If
you leave that option, it will fallback to browser defaults.
See <a href="/sans-serif/">here</a>.
</dd>
</dl>
</section>
</section>
<hr />
<footer>
<p>
This project is inspired by
<a
href="https://egoist.sh/"
target="_blank"
rel="noopener noreferer"
>@egoist's</a
>
work -
<a href="https://github.com/egoist/hack" rel="noopener noreferer"
>hack.css</a
>
</p>
</footer>
<hr />
<section>
<header></header>
<p>Version: 0.7.2 <a href="#menu">Top</a></p>
</section>
</main>
</div>

12
example/example.cabal
View File

@ -1,12 +0,0 @@
name: example
version: 0.1.0.0
build-type: Simple
cabal-version: >= 1.10
executable site
main-is: site.hs
build-depends: base == 4.*
, hakyll == 4.15.*
, hip == 1.5.*
ghc-options: -threaded -rtsopts -with-rtsopts=-N
default-language: Haskell2010

614
example/output.css
View File

@ -1,614 +0,0 @@
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: jetbrains-mono;
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.block {
display: block;
}
.flex {
display: flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.border {
border-width: 1px;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.font-bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.underline {
text-decoration-line: underline;
}
@font-face {
font-family: "jetbrains-mono";
src: local("jetbrains-mono"),
url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
body {
font-family: "jetbrains-mono";
}

80
example/site.hs
View File

@ -1,80 +0,0 @@
--------------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
import Data.Monoid (mappend)
import Hakyll
--------------------------------------------------------------------------------
main :: IO ()
main = hakyll $ do
match "content/favicon.png" $ do
route rmContentPrefix
compile copyFileCompiler
match "content/images/*" $ do
route rmContentPrefix
compile copyFileCompiler
match "content/scripts/*" $ do
route rmContentPrefix
compile copyFileCompiler
match "content/css/*" $ do
route rmContentPrefix
compile compressCssCompiler
match "content/fonts/*" $ do
route rmContentPrefix
compile copyFileCompiler
match (fromList ["content/about.rst", "content/contact.markdown"]) $ do
route $ setExtension "html"
compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/default.html" defaultContext
>>= relativizeUrls
match "content/posts/*" $ do
route $ setExtension "html"
compile $ pandocCompiler
>>= loadAndApplyTemplate "templates/post.html" postCtx
>>= loadAndApplyTemplate "templates/default.html" postCtx
>>= relativizeUrls
create ["archive.html"] $ do
route idRoute
compile $ do
posts <- recentFirst =<< loadAll "content/posts/*"
let archiveCtx =
listField "posts" postCtx (return posts) `mappend`
constField "title" "Archives" `mappend`
defaultContext
makeItem ""
>>= loadAndApplyTemplate "templates/archive.html" archiveCtx
>>= loadAndApplyTemplate "templates/default.html" archiveCtx
>>= relativizeUrls
match "content/index.html" $ do
route rmContentPrefix
compile $ do
posts <- recentFirst =<< loadAll "content/posts/*"
let indexCtx =
listField "posts" postCtx (return posts) `mappend`
defaultContext
getResourceBody
>>= applyAsTemplate indexCtx
>>= loadAndApplyTemplate "templates/default.html" indexCtx
>>= relativizeUrls
match "templates/*" $ compile templateBodyCompiler
--------------------------------------------------------------------------------
postCtx :: Context String
postCtx =
dateField "date" "%B %e, %Y" `mappend`
defaultContext
rmContentPrefix = gsubRoute "content/" (const "")

15
example/tailwind.config.js
View File

@ -1,15 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./content/**/*.{html,js}",
"./templates/**/*.{html,js}",
],
theme: {
extend: {},
fontFamily: {
'sans' : ['jetbrains-mono',],
}
},
plugins: [],
}

27
example/templates/about.html
View File

@ -1,27 +0,0 @@
<section id="about" class="py-12 px-2 flex flex-col gap-12">
<header class="text-3xl">
# about
</header>
<div>
Kompact.io is dapp dev house.
Our focus:
<ul class="list-decoration">
<li>
safety-first
</li>
<li>
fast turn around
</li>
<li>
integration support
</li>
</ul>
<div>
Our typical process:
<div>
Idea -> Spec -> Impl -> Test -> Handover
</div>
</div>
</div>
</section>

2
example/templates/archive.html
View File

@ -1,2 +0,0 @@
Here you can find all my previous posts:
$partial("assets/templates/post-list.html")$

11
example/templates/contact.html
View File

@ -1,11 +0,0 @@
<section id="contact" class="py-12 px-2 flex flex-col gap-12">
<header class="text-3xl">
# contact
</header>
<div class="text-gray-700 mt-4">
Questions? We'll be happy to help answer any of your questions. Send us an email and we'll get back to you shortly.
</div>
<div>
Reach us on : <a href="mailto:hello@kompact.io">hello@kompact.io</a>
</div>
</section>

30
example/templates/default.html
View File

@ -1,30 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/favicon.png">
<link href="/css/mini.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto">
<hr />
$partial("templates/nav.html")$
<hr />
$partial("templates/hero.html")$
<hr />
$partial("templates/services.html")$
<hr />
$partial("templates/pricing.html")$
<hr />
$partial("templates/contact.html")$
<hr />
$partial("templates/footer.html")$
<hr />
$body$
</div>
</body>
</html>

21
example/templates/footer.html
View File

@ -1,21 +0,0 @@
<section id="footer" class="py-12 px-2 flex flex-row gap-12 mx-2 sm:mx-4 items-start justify-between">
<div class="text-sm text-gray-700">
&reg; 2023 kompact.io &trade; All Rights Reserved.
</div>
<div class="text-gray-700 flex flex-row gap-4">
<a href="https://www.linkedin.com/in/dominic-algernon-wallis-123b42187/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="20" preserveAspectRatio="xMidYMid meet">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
</svg>
</a>
<a href="https://twitter.com/waalge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" preserveAspectRatio="xMidYMid meet">
<!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg>
</a>
</div>
</section>

12
example/templates/hero.html
View File

@ -1,12 +0,0 @@
<section id="hero" class="py-8 px-2 h-96 min-h-[50vh] m-auto">
<div class="h-full flex justify-around align-center items-center">
<div class="text-6xl">
⟨K⟩
</div>
<div class="flex flex-col gap-2 truncate">
<div>withKompact &#36; <span class="text-red-500">do</span> </div>
<div><span class="text-gray-400">· ·</span> dapp <- lean dev </div>
<div><span class="text-gray-400">· ·</span> run dapp </div>
</div>
</div>
</section>

26
example/templates/nav.html
View File

@ -1,26 +0,0 @@
<nav class="mx-2 sm:mx-4">
<div class="relative flex h-16 items-center justify-between ">
<div>
Kompact.io
</div>
<div>
<ul class="flex flex-row gap-4 md:gap-8">
<li>
<a href="#services">
services
</a>
</li>
<li>
<a href="#pricing">
pricing
</a>
</li>
<li>
<a href="#contact">
contact
</a>
</li>
</ul>
</div>
</div>
</nav>

7
example/templates/post-list.html
View File

@ -1,7 +0,0 @@
<ul>
$for(posts)$
<li>
<a href="$url$">$title$</a> - $date$
</li>
$endfor$
</ul>

11
example/templates/post.html
View File

@ -1,11 +0,0 @@
<article>
<section class="header">
Posted on $date$
$if(author)$
by $author$
$endif$
</section>
<section>
$body$
</section>
</article>

46
example/templates/pricing.html
View File

@ -1,46 +0,0 @@
<section id="pricing" class="py-12 px-2 flex flex-col gap-12">
<header class="text-3xl">
# pricing
</header>
<div class="text-gray-700 mt-4">
Plutus development has traditionally meant long development schedules, and expensive ( &#36; 25k+/mo FTE) engineers.
We can work with you at competitive rates in either deliverable or retainer based engagements.
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8 md:mx-24">
<div class="max-w-48">
<div class="text-1xl font-bold">
## retainer
</div>
<div class="text-gray-700 mt-4">
Time-based
</div>
<div class="text-gray-700 mt-4">
Still figuring out your project scope?
</div>
<div class="text-gray-700 mt-4">
Need an extra pair of hands on an existing project?
</div>
<div class="text-gray-700 mt-4">
Then a retainer based engagement is for you.
</div>
</div>
<div class="max-w-48">
<div class="text-1xl font-bold">
## deliverable
</div>
<div class="text-gray-700 mt-4">
Output-based
</div>
<div class="text-gray-700 mt-4">
You know what you want and need help implementing it?
</div>
<div class="text-gray-700 mt-4">
We'll first produce a spec on how the dapp will operate technically.
This involves discussing different options and trade-offs on things from UX to validator complexity.
</div>
<div class="text-gray-700 mt-4">
Once settled we'll begin the implementation phase and finally integration phase.
</div>
</div>
</div>
</section>

35
example/templates/services.html
View File

@ -1,35 +0,0 @@
<section id="services" class="py-12 px-2 flex flex-col gap-12">
<header class="text-3xl">
# services
</header>
<div class="text-gray-700 mt-4">
We are cardano native dapp dev outfit focused on helping you going from 0 to launch ASAP.
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-8">
<div class="max-w-48">
<div class="text-1xl font-bold">
## strategy
</div>
<div class="text-gray-700 mt-4">
We'll work with you to validate your concept, and translate it into an implementable Proof of Concept
</div>
</div>
<div class="max-w-48">
<div class="text-1xl font-bold">
## implementation
</div>
<div class="text-gray-700 mt-4">
Cook up appropriate Plutus validators to meet your needs
</div>
</div>
<div class="max-w-48">
<div class="text-1xl font-bold">
## deployment
</div>
<div class="text-gray-700 mt-4">
We facilitate integrating the on-chain aspects with the rest of your stack
</div>
</div>
</div>
</section>

89
example/templates/tailwind-nav-example.html
View File

@ -1,89 +0,0 @@
<nav class="">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!--
Icon when menu is open.
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Team</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Projects</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Team</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Projects</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
</div>
</div>
</nav>

126
example/templates/terminal_default.html
View File

@ -1,126 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/favicon/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
<title>$title$</title>
<meta
name="description"
content="Lean dapp development"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/terminal.css" />
<link rel="stylesheet" href="/css/custom.css" />
<link
rel="apple-touch-icon"
sizes="57x57"
href="/favicon/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/favicon/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/favicon/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/favicon/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/favicon/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/favicon/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/favicon/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/favicon/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/favicon/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/favicon/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
</head>
<body class="terminal">
<div class="container">
<div class="terminal-nav">
<header class="terminal-logo">
<div class="logo terminal-prompt">
<a href="https://kompact.io" class="no-style">kompact.io</a>
</div>
</header>
<nav class="terminal-menu">
<ul vocab="https://schema.org/" typeof="BreadcrumbList">
<li>
<a href="https://terminalcss.xyz" class="menu-item active"
><span>Light</span></a
><meta property="position" />
</li>
</ul>
</nav>
</div>
</div>
<div class="container">$body$</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("pre code").forEach((block) => {
window.hljs.highlightBlock(block);
});
});
</script>
</body>
</html>

29
kompact-site.cabal
View File

@ -1,29 +0,0 @@
cabal-version: 3.0
name: kompact-site
version: 0.1.0.0
license: NONE
author: waalge
maintainer: waalge@proton.me
build-type: Simple
common warnings
ghc-options: -Wall
executable site
main-is: site.hs
build-depends: base == 4.*
, hakyll == 4.15.*
, filepath >= 1.4.2
, yaml >= 0.11.8.0
, text >= 1.2.5.0
, unordered-containers >= 0.2.19.1
, containers >= 0.6.4.1
, vector >= 0.13.0.0
, scientific >= 0.3.7.0
, aeson >= 2.1.0.0
, lens-aeson >= 1.2.2
, lens >= 5.2
ghc-options: -threaded -rtsopts -with-rtsopts=-N
hs-source-dirs: app
default-language: GHC2021

BIN
site/fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf
View File

Binary file not shown.

93
site/fonts/JetBrains_Mono/OFL.txt
View File

@ -1,93 +0,0 @@
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

79
site/fonts/JetBrains_Mono/README.txt
View File

@ -1,79 +0,0 @@
JetBrains Mono Variable Font
============================
This download contains JetBrains Mono as both variable fonts and static fonts.
JetBrains Mono is a variable font with this axis:
wght
This means all the styles are contained in these files:
JetBrainsMono-VariableFont_wght.ttf
JetBrainsMono-Italic-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for JetBrains Mono:
static/JetBrainsMono-Thin.ttf
static/JetBrainsMono-ExtraLight.ttf
static/JetBrainsMono-Light.ttf
static/JetBrainsMono-Regular.ttf
static/JetBrainsMono-Medium.ttf
static/JetBrainsMono-SemiBold.ttf
static/JetBrainsMono-Bold.ttf
static/JetBrainsMono-ExtraBold.ttf
static/JetBrainsMono-ThinItalic.ttf
static/JetBrainsMono-ExtraLightItalic.ttf
static/JetBrainsMono-LightItalic.ttf
static/JetBrainsMono-Italic.ttf
static/JetBrainsMono-MediumItalic.ttf
static/JetBrainsMono-SemiBoldItalic.ttf
static/JetBrainsMono-BoldItalic.ttf
static/JetBrainsMono-ExtraBoldItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Bold.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-BoldItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBold.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBoldItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLight.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLightItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Italic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Light.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-LightItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Medium.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-MediumItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBoldItalic.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttf
View File

Binary file not shown.

BIN
site/fonts/JetBrains_Mono/static/JetBrainsMono-ThinItalic.ttf
View File

Binary file not shown.

4
src/Main.hs
View File

@ -1,4 +0,0 @@
module Main where
main :: IO ()
main = putStrLn "Hello, Haskell!"