3 files changed, 150 insertions, 0 deletions
diff --git a/themes/CodeIT/assets/css/_core/_base.scss b/themes/CodeIT/assets/css/_core/_base.scss
new file mode 100644
index 0000000..510a103
--- /dev/null
+++ b/themes/CodeIT/assets/css/_core/_base.scss
@@ -0,0 +1,55 @@
+html {
+  font-family: $global-font-family;
+  font-weight: $global-font-weight;
+  font-display: swap;
+  font-size: $global-font-size;
+  line-height: $global-line-height;
+  width: 100%;
+}
+
+/* scrollbar, only support webkit */
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $scrollbar-color;
+
+  &:hover {
+    background-color: $scrollbar-hover-color;
+  }
+}
+
+::selection {
+  background-color: $selection-color;
+
+  [theme="dark"] & {
+    background-color: $selection-color-dark;
+  }
+}
+
+body {
+  background-color: $global-background-color;
+  color: $global-font-color;
+  @include overflow-wrap(break-word);
+  scrollbar-color: auto;
+
+  &[theme="dark"] {
+    color: $global-font-color-dark;
+    background-color: $global-background-color-dark;
+  }
+}
+
+@include ms;
+@include link(true, true);
+
+@import "../_partial/mask";
+@import "../_partial/icon";
+@import "../_partial/details";
+@import "../_partial/fixed-button";
+@import "../_partial/cookieconsent";
+
+img {
+  @include object-fit(contain);
+}
diff --git a/themes/CodeIT/assets/css/_core/_layout.scss b/themes/CodeIT/assets/css/_core/_layout.scss
new file mode 100644
index 0000000..154f3a6
--- /dev/null
+++ b/themes/CodeIT/assets/css/_core/_layout.scss
@@ -0,0 +1,15 @@
+/** Layout **/
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+
+  main {
+    flex: 1 0 auto;
+
+    .container {
+      padding: 0 1rem;
+    }
+  }
+}
diff --git a/themes/CodeIT/assets/css/_core/_media.scss b/themes/CodeIT/assets/css/_core/_media.scss
new file mode 100644
index 0000000..047fda5
--- /dev/null
+++ b/themes/CodeIT/assets/css/_core/_media.scss
@@ -0,0 +1,80 @@
+@media only screen and (max-width: 1440px) {
+  .page {
+    width: 56%;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .page {
+    width: 52%;
+  }
+
+  #header-desktop .header-wrapper {
+    padding-right: 1rem;
+  }
+
+  .search-dropdown.desktop {
+    right: 1rem;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  #toc-auto {
+    display: none;
+  }
+
+  #toc-static {
+    display: block;
+  }
+
+  .page {
+    width: 80%;
+  }
+
+  #header-desktop .header-wrapper {
+    padding-left: 1rem;
+  }
+}
+
+@media only screen and (max-width: 680px) {
+  #header-desktop {
+    display: none;
+  }
+
+  #header-mobile {
+    display: block;
+  }
+
+  body.blur {
+    overflow: hidden;
+  }
+
+  .page {
+    width: 100%;
+
+    [header-mobile] & {
+      padding-top: $header-height;
+    }
+
+    [header-mobile="normal"] & {
+      padding-top: 0;
+    }
+
+    .categories-card {
+      .card-item {
+        width: 100%;
+      }
+    }
+  }
+
+  .copyright {
+    .copyright-line {
+      .icp-splitter {
+        display: none;
+      }
+      .icp-br {
+        display: block;
+      }
+    }
+  }
+}