~zenomat/scripts

b267106b1418af1f29e091b9f1577188ac8dc965 — zenomat 1 year, 6 months ago 41df30e
add template and css for notes
2 files changed, 240 insertions(+), 0 deletions(-)

A deploy_notes/style.css
A deploy_notes/template.html
A deploy_notes/style.css => deploy_notes/style.css +172 -0
@@ 0,0 1,172 @@
:root {
    --bg-col: #1c1e26;
    --fg-col: #ffffff;
    --accent: #e93c58;
    --sec-accent: #9a9a9a;
}

* {
  box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-col);
    color: var(--fg-col);
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.5;
}

a, a:visited {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--sec-accent);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    font-weight: 400;
	text-align: center;
}

h1 {
	font-size: 2.25rem;
}

h2 {
	font-size: 1.85rem;
  	margin-top: 3rem;
}

h3 {
	font-size: 1.55rem;
  margin-top: 3rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.15rem;
}

h6 {
	font-size: .9rem;
}

hr {
    margin-top: 15px;
    margin-bottom: 15px;
}

hr {
    color: #ffffff;
}

p.title {
    color: var(--accent);
    font-weight: 400;
	font-size: 2.25rem;
	text-align: center;
}

p.meta {
    color: var(--sec-accent);
    margin-top: -1em;
	text-align: center;
}

blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 15px;
  border-left: 5px solid #ccc;
  color: #7e7e7e;
} 

nav {
    margin-bottom: 10px;
    margin-top: 10px;
}

table {
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid var(--fg-col);
  border-collapse: collapse;
}
td,
th {
  padding: .25rem .5rem;
  border: 1px solid var(--fg-col);
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
    background-color: #3b3f4f;
}

.container {
  max-width: 38rem;
  padding-left:  1rem;
  padding-right: 1rem;
  margin-left:  auto;
  margin-right: auto;
}

footer {
  bottom: 0px;
  text-align: center;
  font-size: 12px;
  padding-top: 20px;
}

.message {
  margin-bottom: 1rem;
  padding: 1rem;
  color: var(--sec-accent);
  border: solid var(--fg-col);
}

code {
  padding: .25em;
  font-size: 85%;
  color: var(--fg-col);
  background-color: #3b3f4f;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 5px;
  font-size: .8rem;
  line-height: 1.4;
  overflow-x: auto;
  background-color: #272727;
}
pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}

@media only screen and (max-width: 600px) {
  html, body {
    font-size: 15px;
  }
  .container {
    padding-left: 0.0rem;
    padding-right: 0.0rem;
    max-width: 45rem;
  }
  blockquote {
  }
}

A deploy_notes/template.html => deploy_notes/template.html +68 -0
@@ 0,0 1,68 @@
<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	$for(author-meta)$
	<meta name="author" content="$author-meta$" />
	$endfor$
	$if(date-meta)$
	<meta name="dcterms.date" content="$date-meta$" />
	$endif$
	$if(keywords)$
	<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
	$endif$
	$if(description-meta)$
	<meta name="description" content="$description-meta$" />
	$endif$
	<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
	<style>
$styles.html()$
	</style>
	$for(css)$
	<link rel="stylesheet" href="$css$" />
	$endfor$
	$if(math)$
	$math$
	$endif$
	$for(header-includes)$
	$header-includes$
	$endfor$
</head>
<body>
	$for(include-before)$
	$include-before$
	$endfor$
	<div class="container">
		$if(title)$
		<h1 class="title">$title$</h1>
		$endif$
		$if(home)$
		<p class="meta">
		<a href="$home$">home</a>
		</p>
		$endif$
		$if(subtitle)$
		<p class="meta">$subtitle$</p>
		$endif$
		$if(author)$
		$for(author)$
		<p class="meta">$author$</p>
		$endfor$
		$endif$
		$if(date)$
		<p class="meta">Last edited: $date$</p>
		$endif$
		$if(toc)$
		<nav id="$idprefix$TOC" role="doc-toc">
			$if(toc-title)$
			<h2 id="$idprefix$toc-title">$toc-title$</h2>
			$endif$
			$table-of-contents$
		</nav>
		$endif$
		$body$
	</div>
	$for(include-after)$
	$include-after$
	$endfor$
</body>
</html>