diff --git a/configuration/configuration.txt b/configuration/configuration.txt
index 668f7e2..5231a29 100644
--- a/configuration/configuration.txt
+++ b/configuration/configuration.txt
@@ -16,6 +16,7 @@ Landing page template: Landing Page Template
Separator: ยท
// Navigation: about, another-page, Example, [Example](https://example.com)
+Navigation: Now, CV
Files path: /files/
Landing page post count: 8
Landing page post length: 100 words
diff --git a/configuration/template.html b/configuration/template.html
index fa48d20..83affa9 100644
--- a/configuration/template.html
+++ b/configuration/template.html
@@ -18,9 +18,11 @@
+
{body}
+
diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md
index 69315e0..71d29af 100644
--- a/weblog/B0. Template/styles.css.md
+++ b/weblog/B0. Template/styles.css.md
@@ -11,149 +11,174 @@ Location: /styles.css
@import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css');
:root {
- --foreground: #f9f8fa;
- --background: #242129;
- --card-bg: #242129;
- --link: #aa55fe;
- --accent: #845e9e;
+ --foreground: #f9f8fa;
+ --background: #242129;
+ --card-bg: #242129;
+ --link: #aa55fe;
+ --accent: #845e9e;
- --font-main: 'Rubik', sans-serif, 'Noto Color Emoji';
- --font-head: 'Grenze Gotisch', sans-serif, 'Noto Color Emoji';
- --font-code: 'MD IO 0.4', monospace, 'Noto Color Emoji';
- --font-em: 'Courgette', cursive;
+ --font-main: 'Rubik', sans-serif, 'Noto Color Emoji';
+ --font-head: 'Grenze Gotisch', sans-serif, 'Noto Color Emoji';
+ --font-code: 'MD IO 0.4', monospace, 'Noto Color Emoji';
+ --font-em: 'Courgette', cursive;
- --font-main-weight: 400;
- --font-head-weight: 400;
- --font-code-weight: 400;
- --font-em-weight: 400;
+ --font-main-weight: 400;
+ --font-head-weight: 400;
+ --font-code-weight: 400;
+ --font-em-weight: 400;
- --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23888' flood-opacity='.5' stdDeviation='1'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
- --shadow: 1px 2px 0.5em 1px rgba(17,17,17,0.2)
+ --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23888' flood-opacity='.5' stdDeviation='1'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
+ --shadow: 1px 2px 0.5em 1px rgba(17, 17, 17, 0.2)
}
@media (prefers-color-scheme: light) {
- html {
- filter: invert(1) hue-rotate(180deg);
- }
- img,svg,video {
- filter: invert(1) hue-rotate(180deg);
- }
+ html {
+ filter: invert(1) hue-rotate(180deg);
+ }
+
+ img,
+ svg,
+ video {
+ filter: invert(1) hue-rotate(180deg);
+ }
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
body {
- font-family: var(--font-main);
- font-weight: var(--font-main-weight);
- font-optical-sizing: auto;
- font-size: 120%;
- color: var(--foreground);
- background: var(--background);
+ font-family: var(--font-main);
+ font-weight: var(--font-main-weight);
+ font-optical-sizing: auto;
+ font-size: 120%;
+ color: var(--foreground);
+ background: var(--background);
}
-article, main.page {
- display: block;
- max-width: 42em;
- border-radius: 1em;
- margin: 3em auto;
- padding: 2em;
- background-color: var(--card-bg);
- background-image: var(--paper-texture-svg);
- background-repeat: repeat;
- position: relative;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: start;
- box-shadow: var(--shadow);
+article,
+main.page {
+ display: block;
+ max-width: 42em;
+ border-radius: 1em;
+ margin: 3em auto;
+ padding: 2em;
+ background-color: var(--card-bg);
+ background-image: var(--paper-texture-svg);
+ background-repeat: repeat;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: start;
+ box-shadow: var(--shadow);
}
.post-info {
- margin-top: -1rem;
- margin-right: -1rem;
- width:100%;
+ margin-top: -1rem;
+ margin-right: -1rem;
+ width: 100%;
}
-.post-info+h1 {
- /*max-width: calc(100% - 4rem - 2em);*/
-}
-
-.post-info, .post-tags {
- font-size: 85%;
- color: var(--accent);
- text-align: right;
+.post-info,
+.post-tags {
+ font-size: 85%;
+ color: var(--accent);
+ text-align: right;
}
.post-info i:nth-child(2) {
- margin-left: .75em;
+ margin-left: .75em;
}
.post-info>a {
- margin-left: 1em;
+ margin-left: 1em;
}
article p {
- width: 100%;
+ width: 100%;
}
article p:has(img) {
- text-align: center;
- width: 100%;
+ text-align: center;
+ width: 100%;
}
em {
- font-family: var(--font-em);
- font-weight: var(--font-em-weight);
- font-style: normal;
- color: color-mix(in lch, var(--link), var(--foreground));
+ font-family: var(--font-em);
+ font-weight: var(--font-em-weight);
+ font-style: normal;
+ color: color-mix(in lch, var(--link), var(--foreground));
}
iframe {
- margin: 0 auto;
+ margin: 0 auto;
}
.caption {
- text-align: center;
- margin-block-start: 0.5em;
- font-size: smaller;
- color: var(--accent);
- font-family: var(--font-em);
- font-weight: var(--font-em-weight);
+ text-align: center;
+ margin-block-start: 0.5em;
+ font-size: smaller;
+ color: var(--accent);
+ font-family: var(--font-em);
+ font-weight: var(--font-em-weight);
}
-h1, h2, h3, h4, h5, h6 {
- font-family: var(--font-head);
- font-weight: var(--font-head-weight);
- margin: 1rem 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: var(--font-head);
+ font-weight: var(--font-head-weight);
+ margin: 1rem 0;
}
-h1 { font-size: 3em; line-height: 1em; }
-h2 { font-size: 2em; }
-h3 { font-size: 1.5em; }
-h4 { font-size: 1.17em; }
-h5 { font-size: 1em; }
-h6 { font-size: .83em; }
+h1 {
+ font-size: 3em;
+ line-height: 1em;
+}
+
+h2 {
+ font-size: 2em;
+}
+
+h3 {
+ font-size: 1.5em;
+}
+
+h4 {
+ font-size: 1.17em;
+}
+
+h5 {
+ font-size: 1em;
+}
+
+h6 {
+ font-size: .83em;
+}
iframe {
- max-width: 100%;
+ max-width: 100%;
}
[data-emoji] {
- display: inline-block;
- font-size: 2em;
- min-width: 1em;
- font-style: normal;
+ display: inline-block;
+ font-size: 2em;
+ min-width: 1em;
+ font-style: normal;
}
[data-emoji]::before {
- content: attr(data-emoji);
- font-stye: normal;
+ content: attr(data-emoji);
}
-[data-emoji='{emoji}'], [href='{status_url}'], [href='{external_url}'] {
- display:none;
+[data-emoji='{emoji}'],
+[href='{status_url}'],
+[href='{external_url}'] {
+ display: none;
}
@@ -161,100 +186,116 @@ iframe {
header nav ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
}
header nav li {
- display: inline-block;
+ display: inline-block;
}
header nav li a {
- display: block;
- text-decoration: none;
- margin-right: 1em;
+ display: block;
+ text-decoration: none;
+ margin-right: 1em;
}
-p, li {
- line-height: 160%;
+p,
+li {
+ line-height: 160%;
}
-header, main, footer {
- max-width: 60em;
- margin: 2em auto;
- padding: 0 1em;
+header,
+main,
+footer {
+ max-width: 60em;
+ margin: 2em auto;
+ padding: 0 1em;
}
header {
- margin-top: 4em;
+ margin-top: 4em;
}
footer p {
- margin-top: 5em;
- font-size: 90%;
- text-align: center;
+ margin-top: 5em;
+ font-size: 90%;
+ text-align: center;
}
-a:link { color: var(--link); }
-a:visited { color: var(--link); }
-a:hover { color: var(--link); }
-a:active { color: var(--link); }
+a:link {
+ color: var(--link);
+}
+
+a:visited {
+ color: var(--link);
+}
+
+a:hover {
+ color: var(--link);
+}
+
+a:active {
+ color: var(--link);
+}
.tag {
- background: var(--accent);
- color: var(--background) !important;
- padding: .3em .4em;
- margin: .8em 0 0 .4em;
- border-radius: .5em;
- text-decoration: none;
- display: inline-block;
+ background: var(--accent);
+ color: var(--background) !important;
+ padding: .3em .4em;
+ margin: .8em 0 0 .4em;
+ border-radius: .5em;
+ text-decoration: none;
+ display: inline-block;
}
hr {
- border: 0;
- height: 1px;
- background: #333;
- margin: 2em 0;
+ border: 0;
+ height: 1px;
+ background: #333;
+ margin: 2em 0;
}
code {
- padding: .2em .3em;
- border: 1px solid var(--accent);
- white-space: pre-wrap;
- word-wrap: break-word;
+ padding: .2em .3em;
+ border: 1px solid var(--accent);
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
-pre, code {
- font-family: var(--font-code);
- font-weight: var(--font-code-weight);
- font-size: 90%;
+pre,
+code {
+ font-family: var(--font-code);
+ font-weight: var(--font-code-weight);
+ font-size: 90%;
}
pre code {
- background: #000;
- color: #eee;
- display: inline-block;
- padding: 1em;
- white-space: pre-wrap;
- word-wrap: break-word;
+ background: #000;
+ color: #eee;
+ display: inline-block;
+ padding: 1em;
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
img {
- max-width: 100%;
+ max-width: 100%;
}
table {
- border-collapse: collapse;
+ border-collapse: collapse;
}
-td, th {
- padding: .75em;
- text-align: left;
- border: 1px solid var(--accent);
+td,
+th {
+ padding: .75em;
+ text-align: left;
+ border: 1px solid var(--accent);
}
-
+
.weblog-title a {
- text-decoration: none;
- color: var(--foreground);
+ text-decoration: none;
+ color: var(--foreground);
}
\ No newline at end of file