Skip to content

Commit

Permalink
Updated colors, favicon, introduction
Browse files Browse the repository at this point in the history
  • Loading branch information
jackobpy committed Dec 14, 2024
1 parent c8c15b3 commit c9c3d6f
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 80 deletions.
7 changes: 1 addition & 6 deletions book/_config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,13 @@ execute:
only_build_toc_files: true

html:
favicon : "figures/TB_favicon.ico"
favicon : "figures/TUD_favicon.svg"
baseurl : "https://teachbooks.io/TU-Delft-Theme-Example/main/content/intro.html"

sphinx:
config:
html_js_files:
- https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js
thebe_config:
use_thebe_lite: true
exclude_patterns: ["**/_*.yml", "**/*.md", "**/*.ipynb"]
html_theme_options:
logo:
text: TU Delft Theme
Expand All @@ -29,8 +26,6 @@ sphinx:
use_edit_page_button: true
use_repository_button: true
use_issues_button : true
launch_buttons:
thebe: true
html_show_copyright: false
html_last_updated_fmt: '%B %-d, %Y'
local_extensions:
Expand Down
152 changes: 86 additions & 66 deletions book/_ext/tudelftstyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ body.custom-style-enabled .logo__title {
--orange-min: #EC684210;
--orange-mid: #EC684225;
--cyan: #00A6D6;
--cyan-min: #00A6D610;
--cyan-mid: #00A6D625;
--gray: #7d7d7d;
--gray-min: #7d7d7d05;
--gray-mid: #7d7d7d20;
Expand All @@ -63,6 +65,23 @@ body.custom-style-enabled .logo__title {
}

/* BLOCK COMPONENTS (admonitions, proofs, exercises) */

/* Admonition */
body.custom-style-enabled div.admonition {
border-color: var(--cyan);
background-color: var(--cyan-min);
}
body.custom-style-enabled div.admonition > .admonition-title {
background-color: var(--cyan-mid);
}
body.custom-style-enabled div.admonition > .admonition-title::after {
color: var(--cyan);
}

/* Proof */
body.custom-style-enabled div.admonition.proof {
background-color:#FFF;
}

/* Grasple */
body.custom-style-enabled div.grasple p.admonition-title::after {
Expand Down Expand Up @@ -108,78 +127,62 @@ body.custom-style-enabled .logo__title {
body.custom-style-enabled div.definition > p.admonition-title {
background-color: var(--blue-mid);
}

/* Criterion */
body.custom-style-enabled div.criterion p.admonition-title::after {
content: "\f058";
color: var(--orange);
}
body.custom-style-enabled div.criterion {
border-color: var(--orange);
background-color: var(--orange-min);
}
body.custom-style-enabled div.criterion > p.admonition-title {
background-color: var(--orange-mid);
}

/* Axiom, Lemma, Conjecture */
/* Axiom, Conjecture, Assumption */
body.custom-style-enabled div.axiom p.admonition-title::after,
body.custom-style-enabled div.lemma p.admonition-title::after,
body.custom-style-enabled div.assumption p.admonition-title::after,
body.custom-style-enabled div.conjecture p.admonition-title::after {
content: "\f0e3";
color: var(--yellow);
content: "\f19c";
color: var(--red);
}
body.custom-style-enabled div.axiom,
body.custom-style-enabled div.lemma,
body.custom-style-enabled div.assumption,
body.custom-style-enabled div.conjecture{
border-color: var(--yellow);
background-color: var(--yellow-min);
border-color: var(--red);
background-color: var(--red-min);
}
body.custom-style-enabled div.axiom > p.admonition-title,
body.custom-style-enabled div.lemma > p.admonition-title,
body.custom-style-enabled div.assumption > p.admonition-title,
body.custom-style-enabled div.conjecture > p.admonition-title{
background-color: var(--yellow-mid);
background-color: var(--red-mid);
}

/* Property */
body.custom-style-enabled div.property p.admonition-title::after {
/* Property, Observation */
body.custom-style-enabled div.property p.admonition-title::after,
body.custom-style-enabled div.admonition.observation > .admonition-title::after {
content: "\f02b";
color: var(--orange);
}
body.custom-style-enabled div.property{
body.custom-style-enabled div.property,
body.custom-style-enabled div.admonition.observation{
border-color: var(--orange);
background-color: var(--orange-min);
}
body.custom-style-enabled div.property > p.admonition-title{
body.custom-style-enabled div.property > p.admonition-title,
body.custom-style-enabled div.admonition.observation > .admonition-title{
background-color: var(--orange-mid);
}

/* Assumption */
body.custom-style-enabled div.assumption p.admonition-title::after {
color: var(--yellow);
}
body.custom-style-enabled div.assumption{
border-color: var(--yellow);
background-color: var(--yellow-min);
}
body.custom-style-enabled div.assumption > p.admonition-title{
background-color: var(--yellow-mid);
}

/* Theorem, Preposition, Corollary */
/* Theorem, Lemma, Preposition, Corollary, Criterion */
body.custom-style-enabled div.theorem p.admonition-title::after,
body.custom-style-enabled div.criterion p.admonition-title::after,
body.custom-style-enabled div.lemma p.admonition-title::after,
body.custom-style-enabled div.proposition p.admonition-title::after,
body.custom-style-enabled div.corollary p.admonition-title::after {
content: "\f51b";
color: var(--darkGreen);
}
body.custom-style-enabled div.theorem,
body.custom-style-enabled div.criterion,
body.custom-style-enabled div.lemma,
body.custom-style-enabled div.proposition,
body.custom-style-enabled div.corollary {
border-color: var(--darkGreen);
background-color: var(--darkGreen-min);
}
body.custom-style-enabled div.theorem > p.admonition-title,
body.custom-style-enabled div.criterion > p.admonition-title,
body.custom-style-enabled div.lemma > p.admonition-title,
body.custom-style-enabled div.proposition > p.admonition-title,
body.custom-style-enabled div.corollary >p.admonition-title {
background-color: var(--darkGreen-mid);
Expand Down Expand Up @@ -207,7 +210,6 @@ body.custom-style-enabled .logo__title {
}
body.custom-style-enabled div.admonition.solution > .admonition-title {
background-color: var(--purple-mid);
/* color: white; */
}
body.custom-style-enabled div.admonition.solution > .admonition-title::after {
content: "\e5a0";
Expand All @@ -229,17 +231,17 @@ body.custom-style-enabled .logo__title {

/* Algorithm */
body.custom-style-enabled div.algorithm > .admonition-title::after {
content: "\f120";
color: var(--blue);
content: "\f051";
color: var(--darkBlue);
}
body.custom-style-enabled div.algorithm {
border-color: var(--blue);
background-color: var(--blue-min);
border-color: var(--darkBlue);
background-color: var(--darkBlue-min);
}
body.custom-style-enabled div.algorithm > .admonition-title {
background-color: var(--blue-mid);
border-top: .15rem solid var(--blue-mid);
border-bottom: .15rem solid var(--blue-mid);
background-color: var(--darkBlue-mid);
border-top: .15rem solid var(--darkBlue-mid);
border-bottom: .15rem solid var(--darkBlue-mid);
}

/* Bonus */
Expand Down Expand Up @@ -288,33 +290,35 @@ body.custom-style-enabled .logo__title {
color: var(--red);
}

/* Hint, Note, SeeAlso, Tip, Remark, Observation */
/* Hint, Note, SeeAlso, Tip, Remark */
body.custom-style-enabled div.admonition.hint,
body.custom-style-enabled div.admonition.note,
body.custom-style-enabled div.admonition.seealso,
body.custom-style-enabled div.admonition.tip,
body.custom-style-enabled div.admonition.remark,
body.custom-style-enabled div.admonition.observation {
body.custom-style-enabled div.admonition.remark {
border-color: var(--green);
background-color: var(--green-min);
}
body.custom-style-enabled div.admonition.hint > .admonition-title,
body.custom-style-enabled div.admonition.note > .admonition-title,
body.custom-style-enabled div.admonition.seealso > .admonition-title,
body.custom-style-enabled div.admonition.tip > .admonition-title,
body.custom-style-enabled div.admonition.remark > .admonition-title,
body.custom-style-enabled div.admonition.observation > .admonition-title {
body.custom-style-enabled div.admonition.remark > .admonition-title {
background-color: var(--green-mid);
}
body.custom-style-enabled div.admonition.hint > .admonition-title::after,
body.custom-style-enabled div.admonition.note > .admonition-title::after,
body.custom-style-enabled div.admonition.seealso > .admonition-title::after,
body.custom-style-enabled div.admonition.tip > .admonition-title::after,
body.custom-style-enabled div.admonition.remark > .admonition-title::after,
body.custom-style-enabled div.admonition.observation > .admonition-title::after {
body.custom-style-enabled div.admonition.remark > .admonition-title::after {
color: var(--green);
}

/* Sticky note for remark */
body.custom-style-enabled div.admonition.remark > .admonition-title::after {
content: "\f249";
}

/* Topic */
body.custom-style-enabled aside.topic {
background-color: var(--gray-mid);
Expand Down Expand Up @@ -370,17 +374,15 @@ body.custom-style-enabled .logo__title {
border-radius: .45rem;
}

/* primary, info */
body.custom-style-enabled .sd-bg-primary,
body.custom-style-enabled .sd-bg-info{
/* primary */
body.custom-style-enabled .sd-bg-primary{
color: #FFFFFF !important;
background-color: var(--blue) !important;
background-color: var(--cyan) !important;
}
/* primary-line, info-line */
body.custom-style-enabled .sd-outline-primary,
body.custom-style-enabled .sd-outline-info{
color: var(--blue) !important;
border-color: var(--blue) !important;
/* primary-line */
body.custom-style-enabled .sd-outline-primary{
color: var(--cyan) !important;
border-color: var(--cyan) !important;
}

/* secondary */
Expand All @@ -406,6 +408,17 @@ body.custom-style-enabled .logo__title {
border-color: var(--darkGreen) !important;
}

/* info */
body.custom-style-enabled .sd-bg-info{
color: #FFFFFF !important;
background-color: var(--blue) !important;
}
/* info-line */
body.custom-style-enabled .sd-outline-info{
color: var(--blue) !important;
border-color: var(--blue) !important;
}

/* warning */
body.custom-style-enabled .sd-bg-warning{
color: #FFFFFF !important;
Expand Down Expand Up @@ -497,12 +510,12 @@ body.custom-style-enabled .logo__title {
border: 0 !important;
}

/* primary, info */
/* primary */
body.custom-style-enabled .sd-btn-primary,
body.custom-style-enabled .sd-btn-info{
color: #FFFFFF !important;
background-color: var(--blue) !important;
border-color: var(--blue) !important;
background-color: var(--cyan) !important;
border-color: var(--cyan) !important;
}

/* secondary */
Expand All @@ -519,6 +532,13 @@ body.custom-style-enabled .logo__title {
border-color: var(--darkGreen) !important;
}

/* info */
body.custom-style-enabled .sd-btn-info{
color: #FFFFFF !important;
background-color: var(--blue) !important;
border-color: var(--blue) !important;
}

/* warning */
body.custom-style-enabled .sd-btn-warning{
color: #FFFFFF !important;
Expand Down
16 changes: 12 additions & 4 deletions book/content/intro.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
(intro)=
# TU Delft Theme Example Book

This book aims to present the style changes applied by the Sphinx TU Delft theme extension. It demonstrates examples of components such as admonitions, proofs, and exercises, showcasing their appearance with and without the TU Delft theme styling. The goal is to help the reader understand how the TU Delft theme looks like when applied to educational content.
This book aims to present the style changes applied by the Sphinx TU Delft theme extension. It demonstrates examples of the following components:
- admonitions (e.g. hint, note, tip, error, etc.),
- proofs (e.g. theorem, axiom, lemma, corllary, etc.),
- exercises,
- buttons,
- badges,
- custom components.

We understand that the names above are very vague, therefore it is recommended to visit every section one by one and learn what these components represent visually. The book showcases their appearance with and without the TU Delft theme styling. The goal is to help the reader understand how the TU Delft theme looks like when applied to educational content.

In this book, you will find:

- Explanations of how to use various components like admonitions, proofs, exercises, and more.
- Differences between the default Sphinx styling and the TU Delft theme styling.
- Examples that demonstrate what components are available.
- **Explanations** of how to use various components like admonitions, buttons, and more.
- **Differences** between the default Sphinx styling and the TU Delft theme styling.
- **Examples** that demonstrate what components are available.

::::::{admonition} Hint!
:class: hint
Expand Down
Loading

0 comments on commit c9c3d6f

Please sign in to comment.