hydn 0.0.0

data/_sass/hydn/main.scss

@@ -0,0 +1,48 @@
+// You can import web fonts at here.
+// If you want to use HTML to import web fonts, go to _layouts/default.
+
+@import "./variables.scss";
+
+* {
+  margin: 0;
+}
+
+body {
+  font-family: $font-main;
+}
+
+li {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+  color: $color-text-link;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: $color-text-link-visited;
+}
+
+code, pre {
+  font-family: $font-mono;
+}
+
+%flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@import "./layout.scss";
+@import "./typo.scss";
+@import "./code.scss";
+@import "./about_layout.scss";
+@import "./tagpost.scss";
+@import "./header.scss";
+@import "./footer.scss";
+@import "./postlist-item.scss";

data/_sass/hydn/postlist-item.scss

@@ -0,0 +1,9 @@
+.postlist {
+  border-bottom: 1px solid #efefef;
+  margin: 48px 0;
+
+  .postlist-title,
+  .postlist-excerpt {
+    margin-bottom: $text-margin-bottom;
+  }
+}

data/_sass/hydn/tagpost.scss

@@ -0,0 +1,7 @@
+.tagbox {
+  display: grid;
+  padding: 5px 0px 5px 5px;
+  margin-bottom: 5px;
+  border-bottom: 3px solid #efefef;
+  font-size: 18px;
+}

data/_sass/hydn/typo.scss

@@ -0,0 +1,209 @@
+h1 {
+  font-size: $font-size-1;
+  font-weight: 700;
+  letter-spacing: -1.5px;
+  color: $color-text-soft;
+}
+
+h2 {
+  font-size: $font-size-2;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  color: $color-text-soft;
+}
+
+h3 {
+  font-size: $font-size-3;
+  font-weight: 700;
+  color: $color-text-soft;
+}
+
+h4 {
+  font-size: $font-size-4;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  color: $color-text;
+}
+
+h5 {
+  font-size: $font-size-5;
+  font-weight: 700;
+  color: $color-text;
+}
+
+h6 {
+  font-size: $font-size-6;
+  font-weight: 700;
+  color: $color-text;
+}
+
+p,
+ol,
+ul {
+  font-size: $font-size-p;
+  font-weight: 400;
+  line-height: 1.7;
+  color: $color-text;
+}
+
+p.meta {
+  font-size: 14px;
+  font-weight: 700;
+  color: $color-text;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+}
+
+%typo-margin {
+  h1 {
+    margin-top: $text-margin-top-1;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  h2 {
+    margin-top: $text-margin-top-2;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  h3 {
+    margin-top: $text-margin-top-3;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  h4 {
+    margin-top: $text-margin-top-4;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  h5 {
+    margin-top: $text-margin-top-5;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  h6 {
+    margin-top: $text-margin-top-6;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  p,
+  ol,
+  ul {
+    margin-top: $text-margin-top-p;
+    margin-bottom: $text-margin-bottom;
+  }
+
+  p.meta {
+    margin: 0 0 8px;
+  }
+}
+
+.typo-margin {
+  @extend %typo-margin;
+}
+
+article {
+  @extend %typo-margin;
+
+  margin: 0 auto;
+  padding: 40px 0 40px;
+  > * {
+    padding: 0 $gap;
+  }
+
+  div[class*="language"] {
+    padding: 0;
+    margin: 20px 0;
+    pre {
+      padding: $gap;
+      line-height: 1.5;
+      border-radius: $gap;
+      overflow: auto;
+      code {
+        color: white;
+      }
+    }
+  }
+
+  a,
+  a > code {
+    color: $color-text-link;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  blockquote {
+    background-color: $color-background-gray;
+    margin: 24px 0;
+    padding: 20px;
+    border-radius: 20px;
+    p {
+      margin: 0;
+      color: $color-text-hard;
+    }
+  }
+
+  ol,
+  ul {
+    margin: 24px 20px;
+  }
+
+  li {
+    margin: 8px 0;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin: 8px 0 8px 32px;
+    padding: 0;
+  }
+
+  li::marker {
+    font-weight: 700;
+  }
+
+  ol > li {
+    list-style-type: numeric;
+  }
+
+  ul > li {
+    list-style-type: disc;
+  }
+
+  table {
+    display: block;
+    margin-bottom: $text-margin-bottom;
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+    tr {
+      &:nth-child(even) {
+        background-color: $color-background-diff;
+      }
+    }
+    th, td {
+      padding: 8px 12px;
+    }
+    th {
+      background-color: $color-background-gray;
+      border: 1px solid $color-background-gray;
+    }
+    td {
+      border: 1px solid $color-background-gray;
+    }
+  }
+}
+

data/_sass/hydn/variables.scss

@@ -0,0 +1,89 @@
+/*  BRAND COLOR
+    - TODO
+*/
+$color-primary: rgb(26, 194, 157);
+$color-primary-light: rgb(110, 240, 212);
+$color-primary-dark: rgb(10, 117, 94);
+
+$color-secondary: rgb(138, 42, 216);
+$color-secondary-light: rgb(171, 83, 243);
+$color-secondary-dark: rgb(92, 23, 148);
+
+
+/*  BACKGROUND COLOR
+    - DIFF color is TODO
+    - GRAY color is TODO
+*/
+$color-background: #f5f5f5;
+$color-background-diff: #f4f4f4;
+$color-background-gray: #e0e0e0;
+
+
+/*  TEXT COLOR
+    - SOFT color is for big text.
+    - HARD color is for text 
+      where more contrast is required (such as quote).
+*/
+$color-text: #0d0d0d;
+$color-text-soft: #333333;
+$color-text-hard: #000000;
+
+$color-text-link: rgb(26, 87, 167);
+$color-text-link-visited: rgb(75, 36, 167);
+
+
+/*  DARK MODE
+    - TODO
+*/
+$color-dark-background: rgb(27, 27, 27);
+$color-dark-background-diff: rgb(14, 14, 14);
+$color-dark-background-gray: rgb(44, 44, 44);
+
+$color-dark-text: rgb(255, 255, 255);
+$color-dark-text-soft: rgb(255, 255, 255);
+$color-dark-text-hard: rgb(255, 255, 255);
+
+$color-dark-text-link: rgb(110, 173, 255);
+$color-dark-text-link-visited: rgb(176, 142, 255);
+
+
+/*  FONT
+    - TODO
+*/
+$font-sans: "Pretendard", "Inter", "Noto Sans KR", sans-serif;
+$font-serif: "Noto Serif KR", serif;
+$font-display: "Outfit", "Montserrat", sans-serif;
+$font-mono: "Roboto Mono", "Jetbrains Mono", "Fira Code", "Fira Mono", monospace;
+$font-main: $font-sans;
+
+
+/*  FONT SIZE
+    - TODO
+*/
+$font-size-p: 1rem;
+
+$font-size-1: 3rem;
+$font-size-2: 2.5rem;
+$font-size-3: 2rem;
+$font-size-4: 1.5rem;
+$font-size-5: 1.25rem;
+$font-size-6: 1rem;
+
+
+/*  TEXT MARGIN FOR POST ARTICLE
+    - IMPORTANT: It applies ONLY in <article> tag.
+*/
+$text-margin-bottom: 1rem;
+$text-margin-top-weight: 1.5;
+
+
+/*  ADVANCED TEXT MARGIN FOR POST ARTICLE
+    - You CAN edit this, but we highly recommend not editing this.
+*/
+$text-margin-top-p: 0;
+$text-margin-top-1: $font-size-1 * $text-margin-top-weight;
+$text-margin-top-2: $font-size-2 * $text-margin-top-weight;
+$text-margin-top-3: $font-size-3 * $text-margin-top-weight;
+$text-margin-top-4: $font-size-4 * $text-margin-top-weight;
+$text-margin-top-5: $font-size-5 * $text-margin-top-weight;
+$text-margin-top-6: $font-size-6 * $text-margin-top-weight;

data/assets/css/style.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import "hydn/main";

data/assets/img/hydn/menu_white_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#FFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>