Use zola

1 files changed, 0 insertions, 356 deletions

diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 795a205..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,356 +0,0 @@
-/* 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: 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);
-  }
-
-  ul {
-    list-style: none;
-    margin-left: 0;
-  }
-  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: calc(1 * 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));
-
-    @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));
-    }
-  }
-}
-
-/* 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)
-}