-
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add dark mode theme to website (#139)
- Loading branch information
Showing
25 changed files
with
1,407 additions
and
1,337 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,168 +1,19 @@ | ||
| /* Overrides for the PyBaMM hero on the homepage */ | ||
| /* White backgrounds behind images */ | ||
|
|
||
| /* We use these styles to provide precedence over submodule theme changes to come close | ||
| to near-parity with NumPy and SciPy websites (which use older versions of the theme) */ | ||
|
|
||
|
|
||
| /* Make PyBaMM logo smaller */ | ||
| .hero-logo { | ||
| max-height: 75px; | ||
| padding: 0px 0 0 15px; | ||
| } | ||
|
|
||
| /* Hero button should be left aligned */ | ||
| .hero-cta { | ||
| padding: 15px 0; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-self: normal; | ||
| } | ||
|
|
||
| /* Add space between navbar and hero, reduce distance between title and subtitle */ | ||
| .hero-title-content { | ||
| margin: 6vh auto; | ||
| max-width: 1200px; | ||
| } | ||
|
|
||
| /* Move PyBaMM logo in hero to text superscript */ | ||
| .hero-title { | ||
| align-content: auto; | ||
| align-items: normal; | ||
| display: flex; | ||
| flex-direction: row; | ||
| font-family: var(--fontFamily), sans-serif; | ||
| font-weight: 900; | ||
| font-size: 6em; | ||
| color: var(--colorPrimaryDark); | ||
| } | ||
|
|
||
| /* Removes padding between hero title and subtitle */ | ||
| .hero-title { | ||
| padding: 0 0 0 0; | ||
| } | ||
|
|
||
| /* General improvements */ | ||
|
|
||
| /* Do not induce padding on code blocks */ | ||
| .highlight { | ||
| padding: 10px 0px; | ||
| } | ||
|
|
||
| /* Media settings for narrower screens */ | ||
|
|
||
| @media only screen and (max-width: 1090px) { | ||
| .hero-content { | ||
| flex-direction: column; | ||
| padding: 0; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .hero-title-content { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| align-self: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| button.cta-button { | ||
| align-items: center; | ||
| align-self: center; | ||
| } | ||
|
|
||
| .hero-cta { | ||
| align-self: center; | ||
| } | ||
|
|
||
| .flex-column { | ||
| /* align all items center */ | ||
| align-items: center; | ||
| } | ||
|
|
||
| .footer-column { | ||
| padding-inline-end: 20px; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 600px) { | ||
| .flex-column { | ||
| margin: 0 30px; | ||
| } | ||
|
|
||
| .hero-title { | ||
| font-size: 4em; | ||
| } | ||
|
|
||
| .hero-subtitle { | ||
| text-align: center; | ||
| padding-top: 20px; | ||
| } | ||
|
|
||
| .hero-cta { | ||
| align-self: center; | ||
| } | ||
|
|
||
| .hero-title { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| @media only screen and (max-width: 400px) { | ||
| .hero-title { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .hero-logo { | ||
| align-self: center; | ||
| } | ||
| } | ||
|
|
||
| /* Accessibility improvements */ | ||
|
|
||
| .footer-link, .footer-link:hover { | ||
| line-height: 2rem; | ||
| } | ||
|
|
||
| .copyright { | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| .footer-link:hover { | ||
| color: var(--colorHighlight); | ||
| } | ||
|
|
||
| /* Individual highlights */ | ||
|
|
||
| .cta-button:hover { | ||
| color: var(--colorHighlight); | ||
| } | ||
|
|
||
| .news-title a:hover, .news-date a:hover { | ||
| color: var(--colorHighlight); | ||
| } | ||
|
|
||
| /* Animations */ | ||
|
|
||
| a, a:hover, a:active { | ||
| transition: color 0.25s ease-in-out; | ||
| } | ||
|
|
||
| /* Adjustments for headings */ | ||
|
|
||
| .content-container h2, .content-container h3, .content-container h4, .content-container h5, .content-container h6 { | ||
| margin-top: 0.75rem; | ||
| } | ||
|
|
||
| .title:not(.is-spaced) + .subtitle { | ||
| margin-top: -0.2rem; | ||
| figure { | ||
| background-color: white; | ||
| padding: 15px; | ||
| border-radius: 15px; | ||
| } | ||
|
|
||
| /* Navigation bar dropdown */ | ||
| /* Captions should be black above white background */ | ||
|
|
||
| .navbar.is-fresh .navbar-item.has-dropdown .navbar-link { | ||
| color: var(--colorPrimaryDark); | ||
| figure figcaption p span { | ||
| color: black !important; | ||
| } | ||
|
|
||
| .navbar.is-fresh .navbar-item.has-dropdown .navbar-link:hover { | ||
| color: #4DABCF | ||
| /* Let table of contents inherit the bounds set by the | ||
| content-container class */ | ||
| #TableOfContents { | ||
| position: inherit; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| title: Homepage | ||
| --- | ||
|
|
||
| {{< grid columns="1 2 2 3" >}} | ||
| [[item]] | ||
| type = 'card' | ||
| title = 'Enhanced Simulation Performance' | ||
| body = ''' | ||
| PyBaMM enables efficient simulations of battery performance and aging, accelerating battery design and innovation. | ||
| ''' | ||
|
|
||
| [[item]] | ||
| type = 'card' | ||
| title = 'Modular Framework' | ||
| body = ''' | ||
| The flexible nature of PyBaMM allows for quick model interchangeability, making it useful in different stages of battery R&D. | ||
| ''' | ||
|
|
||
| [[item]] | ||
| type = 'card' | ||
| title = 'Open Source' | ||
| body = ''' | ||
| PyBaMM is open source, which means anyone can use, modify, and distribute the software. This makes it accessible to researchers worldwide, enhancing global battery technology research. | ||
| ''' | ||
|
|
||
| [[item]] | ||
| type = 'card' | ||
| title = 'Comprehensive Model Library' | ||
| body = ''' | ||
| PyBaMM's model library includes a wide range of physics-based models, making it a vital tool in diverse battery research. | ||
| ''' | ||
|
|
||
| [[item]] | ||
| type = 'card' | ||
| title = 'Detailed Visualization Tools' | ||
| body = ''' | ||
| PyBaMM includes data visualization tools that enable researchers to better interpret their simulation results, facilitating the identification of trends and potential improvements. | ||
| ''' | ||
|
|
||
| [[item]] | ||
| type = 'card' | ||
| title = 'Python Ecosystem' | ||
| body = ''' | ||
| PyBaMM can be combined with any of the advanced data science and machine learning tools in Python's extensive ecosystem. | ||
| ''' | ||
| {{< /grid >}} |
Oops, something went wrong.