From 4264fd0dabb8144f3aa04e34ac07f2a9ce5477da Mon Sep 17 00:00:00 2001 From: sneakers-the-rat Date: Thu, 29 Aug 2024 18:30:11 -0700 Subject: [PATCH] split index file into separate files --- .../assets/styles/abstract/_variables.scss | 13 + .../assets/styles/components/_card.scss | 31 ++ .../assets/styles/components/_icons.scss | 3 + .../assets/styles/components/_navbar.scss | 13 + .../assets/styles/components/_sidebar.scss | 9 + .../assets/styles/contents/_footnotes.scss | 22 ++ .../assets/styles/contents/_tables.scss | 32 ++ .../assets/styles/fonts/_fonts.scss | 61 ++++ .../assets/styles/pages/_lesson.scss | 54 ++++ .../assets/styles/pages/_tutorial.scss | 13 + .../assets/styles/pyos-sphinx-theme.scss | 289 +----------------- .../assets/styles/sections/_container.scss | 9 + 12 files changed, 274 insertions(+), 275 deletions(-) create mode 100644 src/pyos_sphinx_theme/assets/styles/components/_card.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/components/_icons.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/components/_navbar.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/components/_sidebar.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/contents/_footnotes.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/contents/_tables.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/fonts/_fonts.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/pages/_lesson.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/pages/_tutorial.scss create mode 100644 src/pyos_sphinx_theme/assets/styles/sections/_container.scss diff --git a/src/pyos_sphinx_theme/assets/styles/abstract/_variables.scss b/src/pyos_sphinx_theme/assets/styles/abstract/_variables.scss index d2dc93c..c984256 100644 --- a/src/pyos_sphinx_theme/assets/styles/abstract/_variables.scss +++ b/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; diff --git a/src/pyos_sphinx_theme/assets/styles/components/_card.scss b/src/pyos_sphinx_theme/assets/styles/components/_card.scss new file mode 100644 index 0000000..bef25c7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/components/_icons.scss b/src/pyos_sphinx_theme/assets/styles/components/_icons.scss new file mode 100644 index 0000000..2df38f0 --- /dev/null +++ b/src/pyos_sphinx_theme/assets/styles/components/_icons.scss @@ -0,0 +1,3 @@ +.fa-circle-check { + color: #7bcdba; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/components/_navbar.scss b/src/pyos_sphinx_theme/assets/styles/components/_navbar.scss new file mode 100644 index 0000000..fc4fa12 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/components/_sidebar.scss b/src/pyos_sphinx_theme/assets/styles/components/_sidebar.scss new file mode 100644 index 0000000..2960dc7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/contents/_footnotes.scss b/src/pyos_sphinx_theme/assets/styles/contents/_footnotes.scss new file mode 100644 index 0000000..0f02b14 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/contents/_tables.scss b/src/pyos_sphinx_theme/assets/styles/contents/_tables.scss new file mode 100644 index 0000000..2063e36 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/fonts/_fonts.scss b/src/pyos_sphinx_theme/assets/styles/fonts/_fonts.scss new file mode 100644 index 0000000..6011526 --- /dev/null +++ b/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+ */ +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/pages/_lesson.scss b/src/pyos_sphinx_theme/assets/styles/pages/_lesson.scss new file mode 100644 index 0000000..b1a580c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/pages/_tutorial.scss b/src/pyos_sphinx_theme/assets/styles/pages/_tutorial.scss new file mode 100644 index 0000000..1e44a78 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pyos_sphinx_theme/assets/styles/pyos-sphinx-theme.scss b/src/pyos_sphinx_theme/assets/styles/pyos-sphinx-theme.scss index 61192f0..86e0178 100644 --- a/src/pyos_sphinx_theme/assets/styles/pyos-sphinx-theme.scss +++ b/src/pyos_sphinx_theme/assets/styles/pyos-sphinx-theme.scss @@ -1,281 +1,20 @@ @import "pydata_sphinx_theme.css"; +// Vendored/other third party styles +@import "vendor/reboot"; +@import "fonts/fonts"; + // Load theme-specific SCSS @import "abstract/variables"; -@import "base/typography"; @import "base/base"; +@import "base/typography"; +@import "components/card"; +@import "components/icons"; +@import "components/navbar"; +@import "components/sidebar"; @import "contents/admonitions"; -@import "vendor/reboot"; - -@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("fonts/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("fonts/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("fonts/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("fonts/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("fonts/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("fonts/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("fonts/poppins-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ -} - -.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; -} - -#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); - } -} - -.fa-circle-check { - color: #7bcdba; -} - -/* pyOpenSci table styles */ - -.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; - } -} - -@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; - } -} - -td, -th { - border: 1px solid #ccc; /* Light gray border */ - padding: 8px; /* Add some padding for better readability */ -} - -/* anything related to the dark theme */ -html[data-theme="dark"] { - --pst-color-info-bg: #400f59 !important; - --pst-color-tbl-row: #2e2e2e !important; -} - -/* anything related to the light theme */ -html[data-theme="light"] { - --pst-color-tbl-row: #f5f1ff !important; -} - -/* Allow the center content to expand to wide on wide screens */ -@media (min-width: 960px) { - .bd-page-width { - max-width: min(100%, 1600px) !important; - } -} - -/* 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; -} - -/* Navbar */ -/* -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; -} - -/* 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; -} - -.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; -} - -@media (min-width: 960px) { - .col-lg-3 { - width: fit-content; - } -} - -.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; -} +@import "contents/footnotes"; +@import "contents/tables"; +@import "pages/lesson"; +@import "pages/tutorial"; +@import "sections/container"; diff --git a/src/pyos_sphinx_theme/assets/styles/sections/_container.scss b/src/pyos_sphinx_theme/assets/styles/sections/_container.scss new file mode 100644 index 0000000..750cb46 --- /dev/null +++ b/src/pyos_sphinx_theme/assets/styles/sections/_container.scss @@ -0,0 +1,9 @@ +/* Allow the center content to expand to wide on wide screens */ +@media (min-width: $breakpoint-md-lg) { + .bd-page-width { + max-width: min(100%, $breakpoint-xxxl) !important; + } + .col-lg-3 { + width: fit-content; + } +} \ No newline at end of file