building example. needs tidy
This commit is contained in:
waalge
commit
747173bcf4
|
|
@ -0,0 +1,25 @@
|
||||||
|
.direnv/
|
||||||
|
|
||||||
|
dist
|
||||||
|
dist-*
|
||||||
|
cabal-dev
|
||||||
|
*.o
|
||||||
|
*.hi
|
||||||
|
*.hie
|
||||||
|
*.chi
|
||||||
|
*.chs.h
|
||||||
|
*.dyn_o
|
||||||
|
*.dyn_hi
|
||||||
|
.hpc
|
||||||
|
.hsenv
|
||||||
|
.cabal-sandbox/
|
||||||
|
cabal.sandbox.config
|
||||||
|
*.prof
|
||||||
|
*.aux
|
||||||
|
*.hp
|
||||||
|
*.eventlog
|
||||||
|
.stack-work/
|
||||||
|
cabal.project.local
|
||||||
|
cabal.project.local~
|
||||||
|
.HTF/
|
||||||
|
.ghc.environment.*
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
{-# 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
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
_site
|
||||||
|
_cache
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Contact
|
||||||
|
---
|
||||||
|
|
||||||
|
I live in a small hut in the mountains of Kumano Kodō on Kii Hantō and would not
|
||||||
|
like to be contacted.
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
---
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
---
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
---
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
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.*
|
||||||
|
ghc-options: -threaded -rtsopts -with-rtsopts=-N
|
||||||
|
default-language: Haskell2010
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
{-# LANGUAGE OverloadedStrings #-}
|
||||||
|
import Data.Monoid (mappend)
|
||||||
|
import Hakyll
|
||||||
|
|
||||||
|
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
main :: IO ()
|
||||||
|
main = hakyll $ do
|
||||||
|
match "content/images/*" $ do
|
||||||
|
route rmContentPrefix
|
||||||
|
compile copyFileCompiler
|
||||||
|
|
||||||
|
match "content/css/*" $ do
|
||||||
|
route rmContentPrefix
|
||||||
|
compile compressCssCompiler
|
||||||
|
|
||||||
|
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 "")
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
Here you can find all my previous posts:
|
||||||
|
$partial("assets/templates/post-list.html")$
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>My Hakyll Blog - $title$</title>
|
||||||
|
<link rel="stylesheet" href="/css/default.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/">My Hakyll Blog</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<a href="/about.html">About</a>
|
||||||
|
<a href="/contact.html">Contact</a>
|
||||||
|
<a href="/archive.html">Archive</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main role="main">
|
||||||
|
<h1>$title$</h1>
|
||||||
|
$body$
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
Site proudly generated by
|
||||||
|
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<ul>
|
||||||
|
$for(posts)$
|
||||||
|
<li>
|
||||||
|
<a href="$url$">$title$</a> - $date$
|
||||||
|
</li>
|
||||||
|
$endfor$
|
||||||
|
</ul>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<article>
|
||||||
|
<section class="header">
|
||||||
|
Posted on $date$
|
||||||
|
$if(author)$
|
||||||
|
by $author$
|
||||||
|
$endif$
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
$body$
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"devshell": {
|
||||||
|
"inputs": {
|
||||||
|
"nixpkgs": "nixpkgs",
|
||||||
|
"systems": "systems"
|
||||||
|
},
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1683635384,
|
||||||
|
"narHash": "sha256-9goJTd05yOyD/McaMqZ4BUB8JW+mZMnZQJZ7VQ6C/Lw=",
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "devshell",
|
||||||
|
"rev": "5143ea68647c4cf5227e4ad2100db6671fc4c369",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "devshell",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"flake-parts": {
|
||||||
|
"inputs": {
|
||||||
|
"nixpkgs-lib": "nixpkgs-lib"
|
||||||
|
},
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1683560683,
|
||||||
|
"narHash": "sha256-XAygPMN5Xnk/W2c1aW0jyEa6lfMDZWlQgiNtmHXytPc=",
|
||||||
|
"owner": "hercules-ci",
|
||||||
|
"repo": "flake-parts",
|
||||||
|
"rev": "006c75898cf814ef9497252b022e91c946ba8e17",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"id": "flake-parts",
|
||||||
|
"type": "indirect"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"flake-root": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1680964220,
|
||||||
|
"narHash": "sha256-dIdTYcf+KW9a4pKHsEbddvLVSfR1yiAJynzg2x0nfWg=",
|
||||||
|
"owner": "srid",
|
||||||
|
"repo": "flake-root",
|
||||||
|
"rev": "f1c0b93d05bdbea6c011136ba1a135c80c5b326c",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "srid",
|
||||||
|
"repo": "flake-root",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"haskell-flake": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1684180957,
|
||||||
|
"narHash": "sha256-qtEZf4gcmQU5ePbFtltqpAS0PajWLURVC7nuoS46dSk=",
|
||||||
|
"owner": "srid",
|
||||||
|
"repo": "haskell-flake",
|
||||||
|
"rev": "4e1c76de8795608bb47295c018b37a563c492fd2",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "srid",
|
||||||
|
"repo": "haskell-flake",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1677383253,
|
||||||
|
"narHash": "sha256-UfpzWfSxkfXHnb4boXZNaKsAcUrZT9Hw+tao1oZxd08=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "9952d6bc395f5841262b006fbace8dd7e143b634",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixpkgs-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs-lib": {
|
||||||
|
"locked": {
|
||||||
|
"dir": "lib",
|
||||||
|
"lastModified": 1682879489,
|
||||||
|
"narHash": "sha256-sASwo8gBt7JDnOOstnps90K1wxmVfyhsTPPNTGBPjjg=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "da45bf6ec7bbcc5d1e14d3795c025199f28e0de0",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"dir": "lib",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs_2": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1684385584,
|
||||||
|
"narHash": "sha256-O7y0gK8OLIDqz+LaHJJyeu09IGiXlZIS3+JgEzGmmJA=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "48a0fb7aab511df92a17cf239c37f2bd2ec9ae3a",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs_3": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1680945546,
|
||||||
|
"narHash": "sha256-8FuaH5t/aVi/pR1XxnF0qi4WwMYC+YxlfdsA0V+TEuQ=",
|
||||||
|
"owner": "nixos",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "d9f759f2ea8d265d974a6e1259bd510ac5844c5d",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "nixos",
|
||||||
|
"ref": "nixos-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"devshell": "devshell",
|
||||||
|
"flake-parts": "flake-parts",
|
||||||
|
"flake-root": "flake-root",
|
||||||
|
"haskell-flake": "haskell-flake",
|
||||||
|
"nixpkgs": "nixpkgs_2",
|
||||||
|
"treefmt-nix": "treefmt-nix"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"systems": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1681028828,
|
||||||
|
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "nix-systems",
|
||||||
|
"repo": "default",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"treefmt-nix": {
|
||||||
|
"inputs": {
|
||||||
|
"nixpkgs": "nixpkgs_3"
|
||||||
|
},
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1684416994,
|
||||||
|
"narHash": "sha256-KkZ9diPRl3Y05TngWYs/QhZKnI/3tA3s+2Hhmei8FnE=",
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "treefmt-nix",
|
||||||
|
"rev": "42045102f90cfd23ca44ae4ef8362180fefcd7fd",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "treefmt-nix",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
{
|
||||||
|
description = "Description for the project";
|
||||||
|
|
||||||
|
inputs = {
|
||||||
|
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
|
||||||
|
devshell.url = "github:numtide/devshell";
|
||||||
|
treefmt-nix.url = "github:numtide/treefmt-nix";
|
||||||
|
haskell-flake.url = "github:srid/haskell-flake";
|
||||||
|
flake-root.url = "github:srid/flake-root";
|
||||||
|
};
|
||||||
|
|
||||||
|
outputs = inputs@{ flake-parts, ... }:
|
||||||
|
flake-parts.lib.mkFlake { inherit inputs; } {
|
||||||
|
imports = [
|
||||||
|
# To import a flake module
|
||||||
|
# 1. Add foo to inputs
|
||||||
|
# 2. Add foo as a parameter to the outputs function
|
||||||
|
# 3. Add here: foo.flakeModule
|
||||||
|
inputs.devshell.flakeModule
|
||||||
|
inputs.treefmt-nix.flakeModule
|
||||||
|
inputs.haskell-flake.flakeModule
|
||||||
|
inputs.flake-root.flakeModule
|
||||||
|
];
|
||||||
|
systems = [ "x86_64-linux" "aarch64-darwin" ];
|
||||||
|
perSystem = { config, self', inputs', pkgs, system, ... }: {
|
||||||
|
# Per-system attributes can be defined here. The self' and inputs'
|
||||||
|
# module parameters provide easy access to attributes of the same
|
||||||
|
# system.
|
||||||
|
|
||||||
|
haskellProjects.default = {
|
||||||
|
# packages.haskell-template.root = ./.; # Auto-discovered by haskell-flake
|
||||||
|
overrides = self: super: { };
|
||||||
|
devShell = {
|
||||||
|
tools = hp: {
|
||||||
|
treefmt = config.treefmt.build.wrapper;
|
||||||
|
} // config.treefmt.build.programs;
|
||||||
|
hlsCheck.enable = false;
|
||||||
|
};
|
||||||
|
autoWire = [ "packages" "apps" "checks" ]; # Wire all but the devShell
|
||||||
|
};
|
||||||
|
|
||||||
|
packages.default = self'.packages.kompact-site;
|
||||||
|
|
||||||
|
treefmt.config = {
|
||||||
|
inherit (config.flake-root) projectRootFile;
|
||||||
|
package = pkgs.treefmt;
|
||||||
|
flakeFormatter = false; # For https://github.com/numtide/treefmt-nix/issues/55
|
||||||
|
|
||||||
|
programs.ormolu.enable = true;
|
||||||
|
programs.nixpkgs-fmt.enable = true;
|
||||||
|
programs.cabal-fmt.enable = true;
|
||||||
|
programs.hlint.enable = true;
|
||||||
|
|
||||||
|
# We use fourmolu
|
||||||
|
programs.ormolu.package = pkgs.haskellPackages.fourmolu;
|
||||||
|
settings.formatter.ormolu = {
|
||||||
|
options = [
|
||||||
|
"--ghc-opt"
|
||||||
|
"-XImportQualifiedPost"
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
programs.prettier.enable = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
# Equivalent to inputs'.nixpkgs.legacyPackages.hello;
|
||||||
|
devShells.default = pkgs.mkShell {
|
||||||
|
inputsFrom = [
|
||||||
|
config.haskellProjects.default.outputs.devShell
|
||||||
|
config.flake-root.devShell
|
||||||
|
];
|
||||||
|
packages = with pkgs; [
|
||||||
|
caddy
|
||||||
|
nil
|
||||||
|
nodePackages_latest.vscode-html-languageserver-bin
|
||||||
|
nodePackages_latest.prettier
|
||||||
|
haskellPackages.hakyll
|
||||||
|
zlib
|
||||||
|
];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
flake = {
|
||||||
|
# The usual flake attributes can be defined here, including system-
|
||||||
|
# agnostic ones like nixosModule and system-enumerating ones, although
|
||||||
|
# those are more easily expressed in perSystem.
|
||||||
|
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
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
|
||||||
|
|
@ -0,0 +1,349 @@
|
||||||
|
/*! 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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,994 @@
|
||||||
|
: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;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,93 @@
|
||||||
|
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.
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
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.
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,971 @@
|
||||||
|
<!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>Terminal CSS</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="A modern and minimal CSS framework for terminal lovers."
|
||||||
|
/>
|
||||||
|
<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="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"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.components-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-column-gap: 1.4em;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 70em) {
|
||||||
|
.components-grid {
|
||||||
|
grid-template-columns: 3fr 9fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="terminal">
|
||||||
|
<div class="container">
|
||||||
|
<div class="terminal-nav">
|
||||||
|
<header class="terminal-logo">
|
||||||
|
<div class="logo terminal-prompt">
|
||||||
|
<a href="https://terminalcss.xyz" 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">
|
||||||
|
<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'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 'terminal.css'</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"><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /></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"/>
|
||||||
|
</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><code></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><body class="terminal"></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>
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
module Main where
|
||||||
|
|
||||||
|
main :: IO ()
|
||||||
|
main = putStrLn "Hello, Haskell!"
|
||||||
Loading…
Reference in New Issue