lib/bhook/theme/page.erb in bhook-0.3.1 vs lib/bhook/theme/page.erb in bhook-0.3.2
- old
+ new
@@ -3,29 +3,63 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
- <link href='https://fonts.googleapis.com/css?family=Fira+Sans' rel='stylesheet' type='text/css'>
+ <link href='https://fonts.googleapis.com/css?family=Fira+Sans:500,400&display=swap' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
+ :root {
+ --header-margin-top: 0.5em;
+ --header-margin-bottom: 0.5em;
+ --body-font-size: 1.1rem;
+ --title-font-family: 'Fira Sans';
+ --title-font-size: 3.5rem;
+ --title-font-weight: 500;
+ --header-font-family: 'Fira Sans';
+ --header-font-weight: 500;
+ --content-font-family: 'Fira Sans';
+ --content-line-height: 1.7rem;
+ --content-font-weight: 400;
+ --paragraph-spacing: 1rem;
+ --toc-font-weight: 400;
+ }
+
body {
- font-family: 'Fira Sans', sans-serif;
+ font-family: sans-serif;
+ font-size: var(--body-font-size);
color: #000000;
}
- h2, h3, h4, h5 {
- margin-bottom: 0.5em;
- margin-top: 0.5em;
+ div.content-wrapper {
}
+ div.content {
+ line-height: var(--content-line-height);
+ font-weight: var(--content-font-weight);
+ font-family: var(--content-font-family);
+ }
+
+ h1 {
+ font-family: var(--title-font-family);
+ font-size: var(--title-font-size);
+ font-weight: var(--title-font-weight);
+ }
+
h2 {
border-bottom: 1px solid #eaeaea;
}
+ h2, h3, h4, h5 {
+ font-family: var(--header-font-family);
+ font-weight: var(--header-font-weight);
+ margin-bottom: var(--header-margin-top);
+ margin-top: var(--header-margin-bottom);
+ }
+
h2 a.header-anchor, h3 a.header-anchor,
h4 a.header-anchor, h5 a.header-anchor {
float: left;
margin-left: -20px;
text-decoration: none;
@@ -44,10 +78,18 @@
h2:hover a.header-anchor:after, h3:hover a.header-anchor:after,
h4:hover a.header-anchor:after, h5:hover a.header-anchor:after {
visibility: visible;
}
+ div.content p {
+ margin-bottom: var(--paragraph-spacing);
+ }
+
+ ol#markdown-toc {
+ font-weight: var(--toc-font-weight);
+ }
+
div.after-h1 {
border-bottom: 1px solid #bbbbbb;
margin-bottom: 1.5em;
}
@@ -56,13 +98,10 @@
width: 100%;
justify-content: center;
display: flex;
}
- div.content {
- }
-
div.footer {
margin: 0.5em 0 0.5em 0;
}
div.bhook-cta a {
@@ -102,11 +141,11 @@
</script>
<title><%= src_title -%></title>
</head>
<body>
<div class="body container">
- <div class="content row justify-content-center">
- <div class="col-10">
+ <div class="content-wrapper row justify-content-center">
+ <div class="content col-10">
<%= output %>
</div>
</div>
<div class="footer d-flex justify-content-center">
<div>