Use zola

1 files changed, 402 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..7eeb4e0
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,402 @@
+/* Font Faces */
+@font-face {
+  font-family: 'Libre Caslon';
+  src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations');
+  font-weight: 400 700;
+  font-stretch: 75% 100%;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Libre Caslon';
+  src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations');
+  font-weight: 400 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Theme */
+:root {
+  --primary-color: #0000f5;
+  --background: #fff;
+  --foreground: #000019;
+  --foreground-emphasis: #191919;
+  --selection-color: #ccc;
+  --font-display: 'Libre Caslon', 'Times New Roman', 'Georgia', serif;
+  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --root-font-size: 1rem;
+  --base-grid: 1.25rem;
+  --radius: 4px;
+  --border-width: 1px;
+  --outer-radius: calc(var(--radius) - var(--border-width));
+}
+
+::selection {
+  background-color: var(--selection-color);
+  -webkit-text-stroke: 0;
+  color: var(--primary-color);
+}
+
+/* CSS Reset */
+* {margin: 0; padding: 0; box-sizing: border-box}
+html { scroll-behavior: smooth }
+
+/* Base Elements */
+h1,h2,h3,h4 { font-weight: 300 }
+li,p {
+  hyphens: auto;
+  text-align: justify;
+  transform: translateY(4px);
+}
+strong {
+  color: var(--foreground-emphasis);
+  font-weight: 700;
+}
+p { margin-bottom: var(--base-grid); }
+a[role="button"],
+button {
+  border: var(--border-width) solid var(--foreground);
+  border-radius: var(--radius);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 700;
+  display: inline-block;
+  text-decoration: none;
+  transition: 0.1s all linear;
+  padding: calc(0.5lh - var(--border-width)) 1lh;
+  margin-bottom: 1lh;
+
+  &:active {
+    background-color: var(--foreground);
+    color: var(--background);
+  }
+
+  label {
+    line-height: 1.25;
+    cursor: pointer;
+  }
+}
+
+.textured {
+  h2, p, ul {
+    -webkit-text-stroke: calc(4 * var(--border-width)) var(--background);
+    paint-order: stroke fill;
+  }
+}
+
+/* The Contents */
+body {
+  font-family: var(--font-body);
+  font-synthesis: none;
+  color: var(--foreground);
+  background: var(--primary-color);
+  font-size: var(--root-font-size);
+  line-height: 1.25;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100vh;
+  
+
+/* Header */
+
+  & > header {
+    color: #fff;
+    display: flex;
+    background: var(--primary-color);
+    font-family: var(--font-display);
+    padding: var(--base-grid);
+    position: relative;
+
+    h1 {
+      font-size: 2rem;
+      flex: 0 0 auto;
+      line-height: 1.25;
+
+      @media (max-width: 600px) {
+        font-size: 1rem;
+        line-height: 1.25;
+      }
+    }
+
+    p {
+      font-size: 4.5rem;
+      font-style: italic;
+      line-height: 5rem;
+      margin: 0.5lh auto 0.25lh;
+      transform: translateY(-5px);
+      white-space: pre;
+      width: min-content;
+
+      @media (max-width: 800px) {
+        font-size: 3rem;
+        line-height: 3.75rem;
+        margin: 1lh auto var(--base-grid);
+        transform: translateY(-7px)
+      }
+
+      @media (max-width: 600px) {
+        font-size: 2rem;
+        line-height: 1.25;
+        margin: 0.75lh auto 0.25lh;
+        transform: translateY(-1px)
+      }
+
+      @media (max-width: 360px) {
+        font-size: 1rem;
+        margin: 2lh auto 0;
+        transform: translateY(4px);
+      }
+    }
+
+    a {
+      color: #fff;
+      display: block;
+      margin-top: 9px;
+      text-decoration: none;
+      width: min-content;
+      word-spacing: 100vw;
+
+      @media (max-width: 600px) {
+        margin-top: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    /* Animation */
+
+    canvas {
+      background: var(--primary-color);
+      display: block;
+      height: 60px;
+      width: 60px;
+
+      @media (max-width: 600px) {
+        height: 40px;
+        width: 40px;
+      }
+    }
+  }
+}
+/* The Main Body */
+
+main {
+  flex-grow: 1;
+  background-color: var(--background);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  h2 {
+    font-size: 1.5rem;
+    line-height: 1.6667;
+    font-family: var(--font-display);
+    font-weight: 500;
+    transform: translateY(-8px);
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1;
+    font-weight: 500;
+    transform: translateY(2px);
+    margin: 2lh 0 1lh;
+  }
+
+  h4 {
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.25;
+    transform: translateY(4px);
+    margin: 1lh 0;
+  }
+
+  ul {
+    list-style: none;
+    margin-left: 0;
+    margin-bottom: var(--base-grid);
+  }
+  li {
+    position: relative;
+    padding-left: var(--base-grid);
+    
+    &::before {
+      content: "✳";
+      width: var(--base-grid);
+      display: inline-block;
+      margin-left: calc(-1 * var(--base-grid));
+      text-align: left;
+    }
+  }
+}
+
+#introduction  {
+
+  padding: var(--base-grid);
+
+  .content {
+    column-gap: var(--base-grid);
+    width: 100%;
+    max-width: calc(35 * var(--base-grid));
+    background: var(--background);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+#services {
+  column-gap: calc(2 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  max-width: calc(83 * var(--base-grid));
+  background: var(--background);
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+    max-width: calc(25 * var(--base-grid));
+
+    ul {
+      margin-bottom: 0;
+    }
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 2 * var(--base-grid));
+    }
+  }
+
+}
+
+#skills {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="2" y="2" width="1" height="1" fill="black"/></svg>');
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  display: flex;
+  column-gap: calc(4 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  flex-wrap: wrap;
+
+  @media (max-width: 360px) {
+    padding: calc(2 * var(--base-grid)) var(--base-grid);
+  }
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 3 * var(--base-grid));
+    }
+  }
+}
+
+#testimonials {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><rect x="0" y="0" width="1" height="1" fill="black"/><rect x="3" y="3" width="1" height="1" fill="black"/></svg>');
+  padding: calc(2 * var(--base-grid));
+  width: 100%;
+  display: flex;
+  column-gap: calc(4 * var(--base-grid));
+  row-gap: calc(3 * var(--base-grid));
+  flex-wrap: wrap;
+
+  @media (max-width: 360px) {
+    padding: calc(2 * var(--base-grid)) var(--base-grid);
+  }
+
+  section {
+    flex: 1;
+    min-width: calc(17 * var(--base-grid));
+
+    @media (max-width: 360px) {
+      min-width: calc(100vw - 3 * var(--base-grid));
+    }
+  }
+}
+
+footer {
+
+  color: #fff;
+  padding: calc(2 * var(--base-grid));
+
+  ul {
+    list-style-position: inside;
+  }
+  li {
+    padding: 0 var(--base-grid);
+    list-style-position: inside;
+    float: left;
+  }
+
+  a {
+    color: #fff;
+  }
+}
+
+#text  {
+  max-width: calc(35 * var(--base-grid));
+  padding: var(--base-grid);
+}
+
+/* The Floating Window */
+.cutoff-corners {
+  background-color: #fff;
+  border: var(--border-width) solid #000;
+  border-radius: var(--radius);
+}
+
+.window {
+
+  .titlebar {
+    border-bottom: var(--border-width) solid #000;
+    padding: calc(3 * var(--border-width)) calc(8 * var(--border-width)) calc(4 * var(--border-width)) ;
+    line-height: calc(9 * var(--border-width));
+    text-align: center;
+    font-weight: 700;
+    background: repeating-linear-gradient(
+      0deg,
+      black,
+      black var(--border-width),
+      white var(--border-width),
+      white calc(var(--border-width) * 2)
+    );
+    background-clip: content-box;
+    background-origin: content-box;
+    list-style: none;
+
+    &::marker {
+      content: "";
+    }
+
+    .label {
+      background-color: #fff;
+      padding: var(--border-width) calc(5 * var(--border-width));
+      line-height: calc(12 * var(--border-width));
+      height: calc(12 * var(--border-width));
+      display: inline-block;
+    }
+  }
+
+  .content {
+    padding: calc(var(--base-grid) - 1px) var(--base-grid);
+  }
+
+  hr.divider {
+    margin-left: -6px;
+    margin-right: -6px;
+  }
+}
+
+aside {
+  background: var(--background)
+}