{{title}}
-
- {% for author in authors %}
- 
- {{body}}
+ {{body}}
- -
+
+
-
+
\ No newline at end of file
diff --git a/templates/assets b/templates/assets
index ec2e4be..bae6859 120000
--- a/templates/assets
+++ b/templates/assets
@@ -1 +1 @@
-../assets
\ No newline at end of file
+../assets/
\ No newline at end of file
diff --git a/templates/css/code-theme.css b/templates/css/code-theme.css
new file mode 100644
index 0000000..ea7ff6b
--- /dev/null
+++ b/templates/css/code-theme.css
@@ -0,0 +1,273 @@
+.content code .a {
+ color: #483D8B;
+}
+.content code .b {
+ color: #B22222;
+}
+.content code .c {
+ color: #008B8B;
+}
+.content code .d {
+ color: #483D8B;
+}
+.content code .e {
+ color: #228B22;
+}
+.content code .f {
+ text-decoration-color: #FF0000;
+ text-decoration: underline wavy;
+}
+.content code .g {
+ text-decoration-color: #008B8B;
+ text-decoration: underline wavy;
+}
+.content code .h {
+ text-decoration-color: #228B22;
+ text-decoration: underline wavy;
+}
+.content code .i {
+ text-decoration-color: #FF8C00;
+ text-decoration: underline wavy;
+}
+.content code .j {
+ color: #EE9A00;
+}
+.content code .k {
+ color: #EE0000;
+}
+.content code .l {
+ color: #00CD00;
+}
+.content code .m {
+ color: #FF0000;
+}
+.content code .n {
+ color: #0000FF;
+}
+.content code .o {
+ color: #483D8B;
+}
+.content code .p {
+ color: #0000FF;
+}
+.content code .q {
+ color: #483D8B;
+}
+.content code .r {
+ color: #483D8B;
+}
+.content code .s {
+ color: #008B8B;
+}
+.content code .t {
+ color: #228B22;
+}
+.content code .u {
+ color: #A020F0;
+}
+.content code .v {
+ color: #483D8B;
+}
+.content code .w {
+ font-weight: bold;
+}
+.content code .x {
+ color: #FFD700;
+ font-weight: bold;
+}
+.content code .y {
+ color: #0000FF;
+}
+.content code .z {
+ color: #A0522D;
+}
+.content code .aa {
+ color: #A020F0;
+}
+.content code .ab {
+ color: #B22222;
+}
+.content code .ac {
+ color: #228B22;
+}
+.content code .ad {
+ color: #008B8B;
+}
+.content code .ae {
+ color: #999999;
+}
+.content code .af {
+ font-style: italic;
+}
+.content code .ag {
+ color: #3A5FCD;
+}
+.content code .ah {
+ color: #3A5FCD;
+ text-decoration: underline;
+}
+.content code .ai {
+ color: #000000;
+}
+.content code .aj {
+ color: #999999;
+}
+.content code .ak {
+ color: #008B8B;
+}
+.content code .al {
+ color: #008B8B;
+}
+.content code .am {
+}
+.content code .an {
+ color: #008B8B;
+}
+.content code .ao {
+ color: #008B8B;
+}
+.content code .ap {
+ color: #A020F0;
+}
+.content code .aq {
+ color: #000000;
+}
+.content code .ar {
+ color: #0000FF;
+}
+.content code .as {
+ color: #8B2252;
+}
+.content code .at {
+ color: #8B2252;
+ font-weight: bold;
+}
+.content code .au {
+ color: #0000FF;
+}
+.content code .av {
+ color: #228B22;
+}
+.content code .aw {
+ color: #483D8B;
+}
+.content pre {
+ border: 1px solid #999;
+ color: #000000;
+ background-color: #FFFFFF;
+}
+.content code .ay {
+ color: #000000;
+ background-color: #FFFFFF;
+}
+.content code .az {
+ color: #5C5C5C;
+ background-color: #E5E5E5;
+ text-decoration: underline;
+}
+.content code .ba {
+ color: #000000;
+ background-color: #FCFCFC;
+}
+.content code .bb {
+ background-color: #BFBFBF;
+}
+.content code .bc {
+ color: #FFFFFF;
+ background-color: #B3B3B3;
+}
+.content code .bd {
+ color: #FF0000;
+ background-color: #000000;
+}
+.content code .be {
+ color: #000000;
+ background-color: #40E0D0;
+}
+.content code .bf {
+ color: #FFFFFF;
+ background-color: #000000;
+}
+.content code .bg {
+ color: #FFFFFF;
+ background-color: #000000;
+}
+.content code .bh {
+ background-color: #B4EEB4;
+}
+.content code .bi {
+ background-color: #B4EEB4;
+}
+.content code .bj {
+ color: #8B0000;
+ background-color: #FFF8DC;
+}
+.content code .bk {
+ color: #999999;
+}
+.content code .bl {
+ color: #CCCCCC;
+}
+.content code .bm {
+ color: #000000;
+ background-color: #FFF8DC;
+}
+.content code .bn {
+ color: #8B0000;
+ background-color: #ADD8E6;
+}
+.content code .bo {
+ color: #000000;
+ background-color: #F7F7F7;
+}
+.content code .bp {
+ color: #000000;
+ background-color: #F7F7F7;
+}
+.content code .bq {
+ background-color: #FFEC8B;
+}
+.content code .br {
+ background-color: #EEDC82;
+}
+.content code .bs {
+ color: #000000;
+ background-color: #BFBFBF;
+}
+.content code .bt {
+ color: #333333;
+ background-color: #E5E5E5;
+}
+.content pre code {
+ display: block;
+ padding: 20px;
+ width: fit-content;
+ color: #000000;
+}
+.content code .bv {
+ color: #000000;
+ background-color: #B4EEB4;
+}
+.content code .bw {
+ color: #BFBFBF;
+}
+.content code .bx {
+ background-color: #F2F2F2;
+}
+.content code .by {
+}
+.content code .bz {
+ color: #000000;
+}
+.content code .ca {
+ color: #A0522D;
+}
+.content code .cb {
+ color: #483D8B;
+}
+.content code .cc {
+ color: #A0522D;
+}
+.content code .cd {
+ color: #FF8C00;
+}
diff --git a/templates/css/compute-c23f91.webflow.css b/templates/css/compute-c23f91.webflow.css
index 8587062..764e871 100644
--- a/templates/css/compute-c23f91.webflow.css
+++ b/templates/css/compute-c23f91.webflow.css
@@ -1,12 +1,15 @@
:root {
--white: white;
--black: black;
+ --gap: calc(1rem * 12.5 / 16);
}
-.w-layout-vflex {
- flex-direction: column;
- align-items: flex-start;
- display: flex;
+body {
+ font-family: 'Arimo', 'Arial', sans-serif;
+}
+
+code {
+ font-family: 'Fira Code', monospace;
}
.w-layout-blockcontainer {
@@ -44,7 +47,38 @@
}
article {
- margin: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 25px;
+ gap: var(--gap);
+}
+
+.content section {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap);
+ word-wrap: break-word;
+ margin-top: calc(2 * var(--gap));
+ margin-bottom: 0;
+}
+
+.content img {
+ margin: var(--gap) 0;
+}
+
+.content ul,
+.content ol {
+ display: flex;
+ flex-direction: column;
+ padding: 0 0 0 2em;
+}
+
+
+.content * {
+ line-height: 1.5;
+ margin: 0 0;
+ padding: 0 0;
}
h1 {
@@ -54,8 +88,6 @@ h1 {
}
p {
- margin-bottom: 10px;
- margin-top: 10px;
font-size: 18px;
}
@@ -97,12 +129,10 @@ li {
}
.flex-block-2.purple {
- color: #333;
- background-color: #552a85;
- flex-flow: column;
- justify-content: space-around;
padding-top: 0;
+ align-items: center;
display: flex;
+ background-color: #552a85;
overflow-x: hidden;
}
@@ -177,9 +207,8 @@ li {
background-image: linear-gradient(90deg, #f6c415, rgba(246, 196, 21, .3));
-webkit-background-clip: text;
background-clip: text;
- margin-bottom: 20px;
- margin-left: 20px;
- margin-right: 20px;
+ font-size: 64px;
+ margin-bottom: 8px;
}
.image {
@@ -187,18 +216,32 @@ li {
background-clip: border-box;
border-radius: 50%;
margin-bottom: 0;
- margin-left: 20px;
margin-right: 10px;
}
.flex-block-3 {
align-items: center;
- margin-bottom: 20px;
}
.text-block-2 {
- color: #fff;
+ color: white;
font-size: 18px;
+ margin-right: 20px;
+}
+
+article>* {
+ width: 96vw;
+ max-width: 940px;
+}
+
+#header-elements {
+ max-width: 940px;
+ display: flex;
+ justify-content: space-around;
+ flex-direction: column;
+ margin: 20px;
+ align-items: flex-start;
+ gap: 14px;
}
@media screen and (max-width: 991px) {
@@ -207,13 +250,16 @@ li {
min-height: 0%;
}
- .grid {
- grid-template-columns: 1fr;
+ article>* {
+ max-width: min(575px, 85vw);
}
- .heading-8 {
- margin-bottom: 20px;
- font-size: 64px;
+ #header-elements {
+ max-width: 575px;
+ }
+
+ .grid {
+ grid-template-columns: 1fr;
}
}
@@ -235,10 +281,6 @@ li {
.heading-3.unwrapped-compute.compute-gradiant {
display: none;
}
-
- .heading-8 {
- font-size: 64px;
- }
}
@media screen and (max-width: 479px) {
diff --git a/templates/js/code_copy.js b/templates/js/code_copy.js
new file mode 100644
index 0000000..3373856
--- /dev/null
+++ b/templates/js/code_copy.js
@@ -0,0 +1,32 @@
+const copyButtonLabel = "Copy Code";
+
+// use a class selector if available
+if (navigator.clipboard) {
+ let blocks = document.querySelectorAll("pre");
+
+ blocks.forEach((block) => {
+ // only add button if browser supports Clipboard API
+ let button = document.createElement("button");
+
+ button.innerText = copyButtonLabel;
+ block.parentNode.insertBefore(button, block);
+
+ button.addEventListener("click", async (event) => {
+ await copyCode(block, event.target);
+ });
+ });
+}
+
+async function copyCode(block, button) {
+ let code = block.querySelector("code");
+ let text = code.innerText;
+
+ await navigator.clipboard.writeText(text);
+
+ // visual feedback that task is completed
+ button.innerText = "Code Copied";
+
+ setTimeout(() => {
+ button.innerText = copyButtonLabel;
+ }, 700);
+}
diff --git a/templates/opengraph.svg b/templates/opengraph.svg
new file mode 100644
index 0000000..31a961d
--- /dev/null
+++ b/templates/opengraph.svg
@@ -0,0 +1,78 @@
+
+
+
+
diff --git a/templates/opengraph.toml b/templates/opengraph.toml
new file mode 100644
index 0000000..385f383
--- /dev/null
+++ b/templates/opengraph.toml
@@ -0,0 +1,10 @@
+faces = ["/usr/share/fonts/noto/NotoSans-Bold.ttf"]
+
+[[text]]
+x = 425.15115
+y = 8.0
+width = 736.84885
+height = 594.60768
+value = "{{title}}"
+font = "Noto Sans"
+bold = true
diff --git a/templates/raw.html b/templates/raw.html
deleted file mode 100644
index 63f5415..0000000
--- a/templates/raw.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
- {{title}}
-
-
-
-
-
-
-
-
-
-
- {% for author in authors %}
-
-
-
- {% endfor %}
-
-
-
-
-
-
- View full webpage
- {{body}}
-
-
-
{{author.full_name}}
- {% endfor %}
+
+
-
+
- {{title}}
+
+ {% for author in authors %}
+
+
+ {{author.full_name}}
+ {% endfor %}
+ + {{read_time}} minute read ยท Published: {{published}} +
{{published}}
- -