[css] split index file into separate files

src/pyos_sphinx_theme/assets/styles/abstract/_variables.scss

@@ -42,13 +42,26 @@ html[data-theme="light"] {
   --sd-color-success-bg-text: #14181e;
   --pst-color-info: #a66c98; /* general admonition */
   --pst-color-info-bg: #eac8e2;
+  --pst-color-tbl-row: #f5f1ff;
   --pst-heading-color: var(--pyos-color-dark);
   --pyos-h1-color: var(--pyos-color-dark);
 }
 
 html[data-theme="dark"] {
+  --pst-color-info-bg: #400f59;
   --pst-color-primary: var(--pyos-dm-color-primary);
   --pst-color-link: var(--pyos-color-light);
   --pst-color-link-hover: var(--pyos-dm-color-primary);
+  --pst-color-tbl-row: #2e2e2e;
   --pyos-h1-color: var(--pyos-color-light);
 }
+
+// Layout
+// Mimicking Bootstrap 5.0
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-md-lg: 960px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+$breakpoint-xxl: 1400px;
+$breakpoint-xxxl: 1600px;

src/pyos_sphinx_theme/assets/styles/components/_card.scss

@@ -0,0 +1,31 @@
+.sd-card-title {
+  margin-bottom: 0.5rem;
+  background-color: var(--pst-color-info-bg) !important;
+  padding: 0.5rem;
+  border-bottom: 2px solid #999;
+  font-size: 1.2rem;
+  font-weight: 600 !important;
+}
+
+.sd-card-header {
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.sd-card-body {
+  padding: 0 0 !important;
+
+  .left-aligned & ul li {
+    text-align: left;
+  }
+}
+
+.sd-card {
+  padding-bottom: 1.5em;
+}
+
+.sd-card-text {
+  text-align: left;
+  padding-right: 1.5em;
+  padding-left: 1.5em;
+}

src/pyos_sphinx_theme/assets/styles/components/_icons.scss

@@ -0,0 +1,3 @@
+.fa-circle-check {
+  color: #7bcdba;
+}

src/pyos_sphinx_theme/assets/styles/components/_navbar.scss

@@ -0,0 +1,13 @@
+/* Make sure the header nav is centered  - not sure why it's not overriding*/
+.navbar-header-items .me-auto,
+.me-auto .navbar-header-items__center {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.bd-header .navbar-nav li a.nav-link:hover {
+  text-decoration: none;
+  text-decoration-thickness: none;
+  border-bottom: max(3px, 0.1875rem, 0.12em) solid var(--pst-color-link-hover);
+  text-underline-offset: none;
+}

src/pyos_sphinx_theme/assets/styles/components/_sidebar.scss

@@ -0,0 +1,9 @@
+/*
+Don't fill all vertical space beneath TOC, which causes
+readthedocs version selector to fall off the page and the
+ugly scrollbar to show all the time
+*/
+.bd-sidebar-primary .sidebar-primary-items__end {
+  margin-bottom: unset;
+  margin-top: unset;
+}

src/pyos_sphinx_theme/assets/styles/contents/_footnotes.scss

@@ -0,0 +1,22 @@
+#footnotes {
+  font-size: 0.8em;
+  line-height: 1.1;
+  &span.label {
+    font-weight: 400;
+  }
+}
+
+aside.footnote {
+  margin-bottom: 0.5rem;
+  &:last-child {
+    margin-bottom: 1rem;
+  }
+  span.label,
+  span.backrefs {
+    font-weight: 400 !important;
+  }
+
+  &:target {
+    background-color: var(--pst-color-target);
+  }
+}

src/pyos_sphinx_theme/assets/styles/contents/_tables.scss

@@ -0,0 +1,32 @@
+.pyos-table {
+  & th.head,
+  .pyos-table th.head.stub {
+    background-color: #33205c !important;
+
+    & p {
+      color: #fff;
+    }
+  }
+  & th.stub {
+    background-color: var(--pst-color-tbl-row);
+    font-weight: 500;
+  }
+  & td {
+    vertical-align: middle;
+    text-align: center;
+  }
+}
+
+td,
+th {
+  border: 1px solid #ccc; /* Light gray border */
+  padding: 8px; /* Add some padding for better readability */
+}
+
+@media (prefers-color-scheme: dark) {
+  td:not(.row-header):nth-child(1) {
+    background-color: var(--pst-color-tbl-row); /* Adjust the dark mode color */
+    color: #ffffff; /* Adjust the text color for better contrast */
+    font-weight: 500;
+  }
+}

src/pyos_sphinx_theme/assets/styles/fonts/_fonts.scss

@@ -0,0 +1,61 @@
+
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: url("poppins-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* poppins-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: italic;
+  font-weight: 400;
+  src: url("poppins-v20-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* poppins-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 700;
+  src: url("poppins-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* poppins-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: italic;
+  font-weight: 700;
+  src: url("poppins-v20-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* itim-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Itim";
+  font-style: normal;
+  font-weight: 400;
+  src: url("itim-v14-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* poppins-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 500;
+  src: url("poppins-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* poppins-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  src: url("poppins-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/pyos_sphinx_theme/assets/styles/pages/_lesson.scss

@@ -0,0 +1,54 @@
+.lesson-div {
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+  color: #333;
+}
+
+.lesson-div a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.lesson-div:hover {
+  background-color: #ccc;
+}
+
+/* Different colors and their shades */
+.lesson-div:nth-child(1) {
+  background-color: #216a6b;
+  color: #fff;
+}
+
+.lesson-div:nth-child(2) {
+  background-color: #6d597a;
+  color: #fff;
+}
+
+.lesson-div:nth-child(3) {
+  background-color: #b56576;
+  color: #fff;
+}
+
+.lesson-div:nth-child(4) {
+  background-color: #3a8c8e; /* Shade of #216A6B */
+}
+
+.lesson-div:nth-child(5) {
+  background-color: #8f7b8d; /* Shade of #6D597A */
+}
+
+.lesson-div:nth-child(6) {
+  background-color: #d78287; /* Shade of #B56576 */
+}
+
+.lesson-div:nth-child(7) {
+  background-color: #185355; /* Darker shade of #216A6B */
+  color: #fff;
+}

src/pyos_sphinx_theme/assets/styles/pages/_tutorial.scss

@@ -0,0 +1,13 @@
+/* Tutorial block page */
+.left-div {
+  background-color: #3498db;
+  color: #fff;
+  text-align: center;
+  padding: 20px;
+  width: 35%;
+  border-radius: 10px;
+}
+
+.right-div {
+  margin-top: 10px;
+}