Fix: styles adjustment to match pyos branding (#118)

* Fix: cleanup styles
* Fix: add favicon
* Remove commented text

Author: lwasser

_static/pyos.css

@@ -1,28 +1,51 @@
+html, body {
+    font-size: 1.0rem;
+}
+
+/* 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;
+}
+
+/* custom fonts */
+
 html, body {
     font-size: 1.02rem;
+    font-family: 'Poppins', sans-serif!important;
 }
 
 body p {
 }
 
 .admonition {
-    margin-top: 40px;
-    margin-bottom: 40px;
+    margin-top: 60px!important;
+    margin-bottom: 70px!important;
 }
 
-h1, h2, h3, h4 {
+h2, h3, h4 {
+    font-family: 'Poppins', sans-serif!important;
 }
 
 h1 {
-    margin-top: 50px;
+    margin-top: 10px;
     margin-bottom: 40px;
+    font-family: 'Itim'!important;
+    color: #542568;
 }
 h2 {
-    margin-top: 60px;
+    margin-top: 80px;
 }
 
 h3 {
-    margin-top: 40px}
+    margin-top: 60px}
 
 figcaption .caption-text {
     text-align: left!important;
@@ -40,5 +63,107 @@ figcaption {
 
 
 .admonition p {
-    font-size: 1em;
+    font-size: .9em;
+}
+
+
+/* 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;
+}
+
+
+
+html[data-theme=light] {
+    --pst-color-primary: #703c87;
+    --pst-color-primary-text: #fff;
+    --pst-color-primary-highlight: #053f49;
+    --sd-color-primary: var(--pst-color-primary);
+    --sd-color-primary-text: var(--pst-color-primary-text);
+    --sd-color-primary-highlight: var(--pst-color-primary-highlight);
+    --sd-color-primary-bg: #d0ecf1;
+    --sd-color-primary-bg-text: #14181e;
+    --pst-color-secondary: #8045e5;
+    --pst-color-secondary-text: #fff;
+    --pst-color-secondary-highlight: #591bc2;
+    --sd-color-secondary: var(--pst-color-secondary);
+    --sd-color-secondary-text: var(--pst-color-secondary-text);
+    --sd-color-secondary-highlight: var(--pst-color-secondary-highlight);
+    --sd-color-secondary-bg: #e0c7ff;
+    --sd-color-secondary-bg-text: #14181e;
+    --pst-color-success: #00843f;
+    --pst-color-success-text: #fff;
+    --pst-color-success-highlight: #00381a;
+    --sd-color-success: var(--pst-color-success);
+    --sd-color-success-text: var(--pst-color-success-text);
+    --sd-color-success-highlight: var(--pst-color-success-highlight);
+    --sd-color-success-bg: #d6ece1;
+    --sd-color-success-bg-text: #14181e;
+    --pst-color-info: #A66C98; /* general admonition */
+    --pst-color-info-bg: #eac8e2;
+    --pst-heading-color: #542568;
 }

_templates/header.html

@@ -1,6 +1,6 @@
 <!-- custom head content-->
-
-<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@200;300;400;600&display=swap" rel="stylesheet">  -->
+<link href="https://fonts.googleapis.com/css2?family=Itim&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+
 <!-- END custom head content -->

conf.py

@@ -51,7 +51,15 @@
 
 # Link to our repo for easy PR/ editing
 html_theme_options = {
+       "favicons": [
+      {
+         "rel": "icon",
+         "sizes": "16x16",
+         "href": "https://www.pyopensci.org/images/favicon.ico",
+      },
+    ],
     "announcement": "<p><a href='https://www.pyopensci.org/software-peer-review/about/intro.html'>Submit Your Python Package for Peer Review - Learn More!</a></p>🚧 This guide is currently being developed! 🚧 ",
+    #"navbar_center": ["nav"], this can be a way to override the default navigation structure
     "external_links": [
         {
             "url": "https://www.pyopensci.org",
@@ -74,17 +82,19 @@
         },
     ],
     "logo": {
-        "text": "Python Package Guide",
+        "text": "Python Packaging",
         "image_dark": "logo-dark-mode.png",
         "image_light": "logo-light-mode.png",
         "alt_text": "pyOpenSci Python Package Guide. The pyOpenSci logo is a purple flower with pyOpenSci under it. The o in open sci is the center of the flower",
     },
-    "header_links_before_dropdown": 3,
+    "header_links_before_dropdown": 4,
     "use_edit_page_button": True,
+    "show_nav_level": 2,
+    "navigation_depth": 3,
     "show_toc_level": 1,
     # "navbar_align": "left",  # [left, content, right] For testing that the navbar items align properly
     "github_url": "https://github.com/pyopensci/python-package-guide",
-    "twitter_url": "https://twitter.com/pyopensci",
+
     "footer_items": ["copyright"],
 }