imdhemy-jekyll-theme 0.1.0 → 0.4.0

data/_sass/components/_core.scss

@@ -0,0 +1,304 @@
+#main-header {
+  ion-icon[name="menu-outline"],
+  ion-icon[name="close"] {
+    font-size: 3rem;
+    color: rgb(17 24 39);
+  }
+
+  .menu-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    line-height: 1;
+  }
+}
+
+.organization-logo {
+  filter: invert(51%) sepia(4%) saturate(1703%) hue-rotate(179deg) brightness(85%) contrast(89%);
+}
+
+.bg-social {
+  background-image: url(../images/social.png);
+}
+
+.content {
+  color: #333;
+
+  p {
+    margin-bottom: 1.5rem;
+  }
+
+  hr {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    font-weight: 800;
+    line-height: 1.5;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+  }
+
+  h5 {
+    font-size: 1rem;
+  }
+
+  h6 {
+    font-size: 0.9rem;
+  }
+
+  ul,
+  ol,
+  dd {
+    margin-bottom: 1.5rem;
+    margin-left: 1rem;
+    padding-left: 0.25rem;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol,
+  ul {
+    li {
+      display: list-item;
+      margin-bottom: 0.75rem;
+      text-align: -webkit-match-parent;
+    }
+  }
+
+  a:link,
+  a:visited {
+    text-decoration: underline;
+    text-decoration-color: #4d41e0;
+    transition: all 0.2s ease-in-out;
+  }
+
+  a:hover,
+  a:active {
+    text-decoration: none;
+  }
+
+  strong {
+    color: #000;
+    font-weight: 500;
+  }
+
+  > table {
+    box-sizing: border-box;
+    display: block;
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+    overflow: auto;
+    border-spacing: 0;
+    font-size: 0.9rem;
+
+    thead {
+      display: table-header-group;
+      background: #f8fafc;
+      color: #94a3b8;
+      font-size: 1.1em;
+      vertical-align: middle;
+      unicode-bidi: isolate;
+    }
+
+    th {
+      border: 1px solid #eee;
+      padding: 0.5rem;
+      color: inherit;
+      font-weight: 500;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    td {
+      padding: 0.5rem;
+      white-space: nowrap;
+    }
+
+    tbody tr:nth-child(odd) {
+      background: #fff;
+
+      td {
+        border: 1px solid #f9f9f9;
+      }
+    }
+
+    tbody tr:nth-child(even) {
+      background: #f8fafc;
+
+      td {
+        border: 1px solid #eee;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  iframe {
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+  }
+
+  mjx-container {
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  blockquote,
+  div.note,
+  div.tip,
+  div.info,
+  div.caution,
+  div.danger {
+    position: relative;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    padding: 2rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  blockquote::before,
+  div.note::before,
+  div.tip::before,
+  div.info::before,
+  div.caution::before,
+  div.danger::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+    content: "";
+    opacity: 0.08;
+    pointer-events: none;
+  }
+
+  blockquote::after,
+  div.note::after,
+  div.tip::after,
+  div.info::after,
+  div.caution::after,
+  div.danger::after {
+    position: absolute;
+    top: 40px;
+    left: 10px;
+    z-index: 1;
+    color: #4d41e0;
+    font-family: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
+    font-size: 3rem;
+    line-height: 0;
+    content: "";
+    pointer-events: none;
+  }
+
+  blockquote {
+    &::before {
+      background: #4d41e0;
+    }
+
+    &::after {
+      font-size: 9rem;
+      font-style: italic;
+      content: "\0022";
+    }
+  }
+
+  div.note {
+    &::before {
+      border: 1px solid #000;
+    }
+
+    &::after {
+      color: #000;
+      content: "\0021";
+    }
+  }
+
+  div.tip {
+    &::before {
+      background: #4d41e0;
+    }
+
+    &::after {
+      content: "\0021";
+    }
+  }
+
+  div.info {
+    &::before {
+      border: 1px solid #4bb3d4;
+      background: #eef9fc;
+      opacity: 0.2;
+    }
+
+    &::after {
+      color: #4bb3d4;
+      content: "\0021";
+    }
+  }
+
+  div.caution {
+    &::before {
+      border: 1px solid #f0c14b;
+      background: #fff9e6;
+      opacity: 0.2;
+    }
+
+    &::after {
+      color: #f0c14b;
+      content: "\0021";
+    }
+  }
+
+  div.danger {
+    &::before {
+      border: 1px solid #e03e2d;
+      background: #ffe6e6;
+      opacity: 0.2;
+    }
+
+    &::after {
+      color: #e03e2d;
+      content: "\0021";
+    }
+  }
+}

data/_sass/style.scss

@@ -1,275 +1,11 @@
-* {
-  -webkit-font-smoothing: antialiased;
-}
+@forward "base/reset";
+@forward "base/typography";
 
-::selection {
-  background: #4d41e0;
-  color: #fff;
-}
+@forward "utilities/layout";
+@forward "utilities/visual";
+@forward "utilities/typography";
+@forward "utilities/interactive";
+@forward "utilities/responsive";
 
-::-moz-selection {
-  background: #4d41e0;
-  color: #fff;
-}
-
-#main-header {
-  ion-icon[name="menu-outline"], ion-icon[name="close-outline"] {
-    font-size: 3rem;
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", Georgia, Cambria, Times New Roman, Times, serif;
-}
-
-.organization-logo {
-  filter: invert(51%) sepia(4%) saturate(1703%) hue-rotate(179deg) brightness(85%) contrast(89%)
-}
-
-.post-title {
-  //line-height: 4rem;
-}
-
-.content {
-  color: #333;
-
-  p {
-    margin-bottom: 1.5rem;
-  }
-
-  hr {
-    margin-bottom: 4rem;
-    margin-top: 4rem;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
-    font-weight: 800;
-  }
-
-  h1 {
-    font-size: 2.5rem;
-  }
-
-  h2 {
-    font-size: 2rem;
-  }
-
-  h3 {
-    font-size: 1.75rem;
-  }
-
-  h4 {
-    font-size: 1.5rem;
-  }
-
-  h5 {
-    font-size: 1.25rem;
-  }
-
-  h6 {
-    font-size: 1rem;
-  }
-
-  ul, ol, dd {
-    margin-left: 1rem;
-    padding-left: 0.25rem;
-    margin-bottom: 1.5rem;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol, ul {
-    li {
-      margin-bottom: 0.75rem;
-      display: list-item;
-      text-align: -webkit-match-parent;
-    }
-  }
-
-  a:link, a:visited {
-    text-decoration: underline;
-    text-decoration-color: #4d41e0;
-    transition: all 0.2s ease-in-out;
-  }
-
-  a:hover, a:active {
-    text-decoration: none;
-  }
-
-  strong {
-    font-weight: 500;
-    color: #000;
-  }
-
-  > table {
-    font-size: 0.9rem;
-    max-width: 100%;
-    overflow: auto;
-    border-collapse: collapse;
-    border-spacing: 0;
-    margin-bottom: 1.5rem;
-
-    thead {
-      background: #f9f9f9;
-    }
-
-    th {
-      font-weight: 700;
-      border: 1px solid #eee;
-      padding: 0.5rem;
-      text-align: left;
-    }
-
-    td {
-      padding: 0.5rem;
-    }
-
-    tbody tr:nth-child(odd) {
-      background: #fff;
-
-      td {
-        border: 1px solid #f9f9f9;
-      }
-    }
-
-    tbody tr:nth-child(even) {
-      background: #f9f9f9;
-
-      td {
-        border: 1px solid #eee;
-      }
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  iframe {
-    max-width: 100%;
-    margin-bottom: 1.5rem;
-  }
-
-  mjx-container {
-    max-width: 100%;
-    overflow: auto;
-  }
-
-  blockquote, div.note, div.tip, div.info, div.caution, div.danger {
-    position: relative;
-    padding: 2rem;
-    margin-bottom: 1.5rem;
-    margin-top: 1.5rem;
-    font-size: 1.25rem;
-    line-height: 1.5;
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  blockquote::before, div.note::before, div.tip::before, div.info::before, div.caution::before, div.danger::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: .08;
-    border-radius: 1rem;
-  }
-
-  blockquote::after, div.note::after, div.tip::after, div.info::after, div.caution::after, div.danger::after {
-    font-family: "Noto Serif", Georgia, Cambria, Times New Roman, Times, serif;
-    position: absolute;
-    top: 40px;
-    left: 10px;
-    z-index: 1;
-    font-size: 3rem;
-    line-height: 0;
-    color: #4d41e0;
-  }
-
-  blockquote {
-    &::before {
-      background: #4d41e0;
-    }
-
-    &::after {
-      content: "\0022";
-      font-style: italic;
-      font-size: 9rem;
-    }
-  }
-
-  div.note {
-    &::before {
-      border: 1px solid #000;
-    }
-
-    &::after {
-      content: "\0021";
-      color: #000;
-    }
-  }
-
-  div.tip {
-    &::before {
-      background: #4d41e0;
-    }
-
-    &::after {
-      content: "\0021";
-    }
-  }
-
-  div.info {
-    &::before {
-      background: #eef9fc;
-      border: 1px solid #4bb3d4;
-      opacity: 0.2;
-    }
-
-    &::after {
-      content: "\0021";
-      color: #4bb3d4;
-    }
-  }
-
-  div.caution {
-    &::before {
-      background: #fff9e6;
-      border: 1px solid #f0c14b;
-      opacity: 0.2;
-    }
-
-    &::after {
-      content: "\0021";
-      color: #f0c14b;
-    }
-  }
-
-  div.danger {
-    &::before {
-      background: #ffe6e6;
-      border: 1px solid #e03e2d;
-      opacity: 0.2;
-    }
-
-    &::after {
-      content: "\0021";
-      color: #e03e2d;
-    }
-  }
-}
-
-@import "highlight";
+@forward "components/core";
+@forward "components/highlight";

data/_sass/utilities/_interactive.scss

@@ -0,0 +1,100 @@
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.duration-300 {
+  transition-duration: 0.3s;
+}
+
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ease-linear {
+  transition-timing-function: linear;
+}
+
+.hover\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+.hover\:border-indigo-600:hover {
+  border-color: rgb(79 70 229);
+}
+
+.hover\:border-b-violet-600:hover {
+  border-bottom-color: rgb(124 58 237);
+}
+
+.hover\:bg-indigo-600:hover {
+  background-color: rgb(79 70 229);
+}
+
+.hover\:bg-violet-800:hover {
+  background-color: rgb(91 33 182);
+}
+
+.hover\:text-blue-600:hover {
+  color: rgb(37 99 235);
+}
+
+.hover\:text-gray-700:hover {
+  color: rgb(55 65 81);
+}
+
+.hover\:text-white:hover {
+  color: rgb(255 255 255);
+}
+
+.active\:text-blue-600:active {
+  color: rgb(37 99 235);
+}
+
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:-left-\[10px\]::before {
+  content: var(--tw-content);
+  left: -10px;
+}
+
+.before\:top-\[50px\]::before {
+  content: var(--tw-content);
+  top: 50px;
+}
+
+.before\:block::before {
+  content: var(--tw-content);
+  display: block;
+}
+
+.before\:font-sans::before {
+  content: var(--tw-content);
+  font-family: "Noto Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.before\:font-serif::before {
+  content: var(--tw-content);
+  font-family: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+.before\:text-\[182px\]::before {
+  content: var(--tw-content);
+  font-size: 182px;
+}
+
+.before\:opacity-10::before {
+  content: var(--tw-content);
+  opacity: 0.1;
+}
+
+.before\:content-\[\'\\0022\'\]::before {
+  --tw-content: "\0022";
+  content: var(--tw-content);
+}