Add Herman style

1 files changed, 180 insertions, 0 deletions

diff --git a/assets/herman.css b/assets/herman.css
new file mode 100644
index 0000000..509af4a
--- /dev/null
+++ b/assets/herman.css
@@ -0,0 +1,180 @@
+:root {
+  --color-dark: hsl(228, 15%, 11%); /* 1a1a1a */
+  --color-light: #fafafa;
+  --color-primary: #1a8fe3;
+  --spacing: 1.5rem;
+}
+
+body {
+  background: var(--color-dark);
+  color: var(--color-light);
+  padding: 2.5rem;
+  font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic',
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1.2rem;
+  line-height: 1.4;
+  min-height: 100vh;
+  max-width: 1600px;
+  margin: 0 auto;
+  word-wrap: break-word;
+}
+
+header,
+main,
+footer {
+  max-width: 70ch;
+  margin-inline: auto;
+}
+
+header {
+  padding-bottom: var(--spacing);
+}
+
+nav a, a.blog-tags {
+  margin-right: calc(var(--spacing) / 3);
+}
+a.blog-tags {
+  line-height: 1.8;
+}
+
+main {
+  padding-bottom: var(--spacing);
+}
+
+footer {
+  text-align: center;
+  padding-top: var(--spacing);
+}
+
+a {
+  color: currentColor;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 0.3ex;
+  text-underline-offset: 0.3ex;
+}
+
+a:hover {
+  text-decoration-thickness: 0.4ex;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+h1 {
+  font-size: 3.55rem;
+}
+h2 {
+  font-size: 2.66rem;
+}
+h3 {
+  font-size: 2rem;
+}
+h4 {
+  font-size: 1.5rem;
+}
+h5 {
+  font-size: 1.13rem;
+}
+
+ul,
+ol {
+  padding-inline-start: var(--spacing);
+}
+li {
+  margin-block-start: var(--spacing);
+}
+
+blockquote {
+  padding-inline-start: var(--spacing);
+  border-inline-start: 0.2em solid;
+  font-style: italic;
+}
+
+:is(h1, h2, h3, h4, h5, blockquote) {
+  margin-block-end: calc(var(--spacing) / 2);
+}
+:is(h1, h2, h3, h4, h5) + * {
+  margin-block-start: calc(var(--spacing) / 3);
+}
+:is(h1, h2, h3, h4, h5) + :where(h2, h3, h4, h5) {
+  margin-block-start: calc(var(--spacing) * 2);
+}
+
+blockquote {
+  max-width: 50ch;
+}
+
+.title {
+  text-decoration: none;
+}
+.title h1 {
+  font-size: 2rem;
+  margin-top: calc(var(--spacing) / 2);
+}
+
+ul.blog-posts {
+  list-style-type: none;
+  padding: unset;
+}
+ul.blog-posts li {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 600px) {
+  ul.blog-posts li {
+    flex-direction: row;
+    gap: calc(var(--spacing) / 2);
+  }
+}
+ul.blog-posts li span {
+  min-width: 11ch;
+}
+time {
+  opacity: 0.5;
+  font-style: normal;
+}
+
+code {
+  padding: 1px calc(var(--spacing) / 4);
+  color: #f8f8f2;
+  background-color: #282a36;
+  font-size: 1rem;
+}
+
+pre code {
+  display: block;
+  padding: calc(var(--spacing) / 2);
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+}
+table,
+th,
+td {
+  border: 1px solid;
+  border-collapse: collapse;
+  border-color: var(--color-light);
+  padding: calc(var(--spacing) / 2);
+}
+
+.disabled {
+  color: currentColor;
+  cursor: not-allowed;
+  opacity: 0.5;
+}