update may 2024

.github/workflows/documentation.yml

@@ -0,0 +1,28 @@
+name: GitHub Actions
+on: [push]
+jobs:
+  Pages:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: [3.10.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v2
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install dependencies
+        run: pip install poetry
+      - name: Activate venv
+        run: poetry install
+      - name: Build the book
+        run: poetry run mkdocs build --site-dir public
+      - name: GitHub Pages action
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public
+          
+
+

docs/css/neoteroi-cards.css

@@ -0,0 +1,102 @@
+.nt-cards.nt-grid {
+  display: grid;
+  grid-auto-columns: 1fr;
+  gap: 0.5rem;
+  max-width: 100vw;
+  overflow-x: auto;
+  padding: 1px;
+}
+.nt-cards.nt-grid.cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+.nt-cards.nt-grid.cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.nt-cards.nt-grid.cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.nt-cards.nt-grid.cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.nt-cards.nt-grid.cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+.nt-cards.nt-grid.cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media only screen and (max-width: 400px) {
+  .nt-cards.nt-grid {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+}
+.nt-card {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+.nt-card:hover {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 3px 1px -2px rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.22);
+}
+
+[data-md-color-scheme=slate] .nt-card {
+  box-shadow: 0 2px 2px 0 rgba(4, 40, 33, 0.14), 0 3px 1px -2px rgba(40, 86, 94, 0.47), 0 1px 5px 0 rgba(139, 252, 255, 0.64);
+}
+[data-md-color-scheme=slate] .nt-card:hover {
+  box-shadow: 0 2px 2px 0 rgba(0, 255, 206, 0.14), 0 3px 1px -2px rgba(33, 156, 177, 0.47), 0 1px 5px 0 rgba(96, 251, 255, 0.64);
+}
+
+.nt-card > a {
+  color: var(--md-default-fg-color);
+}
+
+.nt-card > a > div {
+  cursor: pointer;
+}
+
+.nt-card {
+  padding: 5px;
+  margin-bottom: 0.5rem;
+}
+
+.nt-card-title {
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 4px 0 8px 0;
+  line-height: 22px;
+}
+
+.nt-card-content {
+  padding: 0.4rem 0.8rem 0.8rem 0.8rem;
+}
+
+.nt-card-text {
+  font-size: 14px;
+  padding: 0;
+  margin: 0;
+}
+
+.nt-card .nt-card-image {
+  text-align: center;
+  border-radius: 2px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  min-height: 120px;
+}
+
+.nt-card .nt-card-image.tags img {
+  margin-top: 12px;
+}
+
+.nt-card .nt-card-image img {
+  height: 105px;
+  margin-top: 5px;
+}
+
+.nt-card a:hover,
+.nt-card a:focus {
+  color: var(--md-accent-fg-color);
+}
+
+.nt-card h2 {
+  margin: 0;
+}

docs/css/neoteroi-gantt.css

@@ -0,0 +1,328 @@
+/**
+ *  Extra CSS for the neoteroi.projects.gantt extension.
+ *
+ *  https://github.com/Neoteroi/mkdocs-plugins
+**/
+:root {
+  --nt-scrollbar-color: #2751b0;
+  --nt-plan-actions-height: 24px;
+  --nt-units-background: #ff9800;
+  --nt-months-background: #2751b0;
+  --nt-plan-vertical-line-color: #a3a3a3ad;
+}
+
+.nt-pastello {
+  --nt-scrollbar-color: #9fb8f4;
+  --nt-units-background: #f5dc82;
+  --nt-months-background: #5b7fd1;
+}
+
+[data-md-color-scheme=slate] {
+  --nt-units-background: #003773;
+}
+[data-md-color-scheme=slate] .nt-pastello {
+  --nt-units-background: #3f4997;
+}
+
+.nt-plan-root {
+  min-height: 200px;
+  scrollbar-width: 20px;
+  scrollbar-color: var(--nt-scrollbar-color);
+  display: flex;
+}
+.nt-plan-root ::-webkit-scrollbar {
+  width: 20px;
+}
+.nt-plan-root ::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px grey;
+  border-radius: 10px;
+}
+.nt-plan-root ::-webkit-scrollbar-thumb {
+  background: var(--nt-scrollbar-color);
+  border-radius: 10px;
+}
+.nt-plan-root .nt-plan {
+  flex: 80%;
+}
+.nt-plan-root.no-groups .nt-plan-periods {
+  padding-left: 0;
+}
+.nt-plan-root.no-groups .nt-plan-group-summary {
+  display: none;
+}
+.nt-plan-root .nt-timeline-dot.bigger {
+  top: -10px;
+}
+.nt-plan-root .nt-timeline-dot.bigger[title] {
+  cursor: help;
+}
+
+.nt-plan {
+  white-space: nowrap;
+  overflow-x: auto;
+  display: flex;
+}
+.nt-plan .ug-timeline-dot {
+  left: 368px;
+  top: -8px;
+  cursor: help;
+}
+
+.months {
+  display: flex;
+}
+
+.month {
+  flex: auto;
+  display: inline-block;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px inset;
+  background-color: var(--nt-months-background);
+  color: white;
+  text-transform: uppercase;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  padding: 2px 5px;
+  font-size: 12px;
+  border: 1px solid #000;
+  width: 150px;
+  border-radius: 8px;
+}
+
+.nt-plan-group-activities {
+  flex: auto;
+  position: relative;
+}
+
+.nt-vline {
+  border-left: 1px dashed var(--nt-plan-vertical-line-color);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  margin-left: -0.5px;
+  top: 0;
+  -webkit-transition: all 0.5s linear !important;
+  -moz-transition: all 0.5s linear !important;
+  -ms-transition: all 0.5s linear !important;
+  -o-transition: all 0.5s linear !important;
+  transition: all 0.5s linear !important;
+  z-index: -2;
+}
+
+.nt-plan-activity {
+  display: flex;
+  margin: 2px 0;
+  background-color: rgba(187, 187, 187, 0.2509803922);
+}
+
+.actions {
+  height: var(--nt-plan-actions-height);
+}
+
+.actions {
+  position: relative;
+}
+
+.period {
+  display: inline-block;
+  height: var(--nt-plan-actions-height);
+  width: 120px;
+  position: absolute;
+  left: 0px;
+  background: #1da1f2;
+  border-radius: 5px;
+  transition: all 0.5s;
+  cursor: help;
+  -webkit-transition: width 1s ease-in-out;
+  -moz-transition: width 1s ease-in-out;
+  -o-transition: width 1s ease-in-out;
+  transition: width 1s ease-in-out;
+}
+.period .nt-tooltip {
+  display: none;
+  top: 30px;
+  position: relative;
+  padding: 1rem;
+  text-align: center;
+  font-size: 12px;
+}
+.period:hover .nt-tooltip {
+  display: inline-block;
+}
+
+.period-0 {
+  left: 340px;
+  visibility: visible;
+  background-color: rgb(69, 97, 101);
+}
+
+.period-1 {
+  left: 40px;
+  visibility: visible;
+  background-color: green;
+}
+
+.period-2 {
+  left: 120px;
+  visibility: visible;
+  background-color: pink;
+  width: 80px;
+}
+
+.period-3 {
+  left: 190px;
+  visibility: visible;
+  background-color: darkred;
+  width: 150px;
+}
+
+.weeks > span,
+.days > span {
+  height: 25px;
+}
+
+.weeks > span {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+.weeks > span .week-text {
+  font-size: 10px;
+  position: absolute;
+  display: inline-block;
+  padding: 3px 4px;
+}
+
+.days {
+  z-index: -2;
+  position: relative;
+}
+
+.day-text {
+  font-size: 10px;
+  position: absolute;
+  display: inline-block;
+  padding: 3px 4px;
+}
+
+.period span {
+  font-size: 12px;
+  vertical-align: top;
+  margin-left: 4px;
+  color: black;
+  background: rgba(255, 255, 255, 0.6588235294);
+  border-radius: 6px;
+  padding: 0 4px;
+}
+
+.weeks,
+.days {
+  height: 20px;
+  display: flex;
+  box-sizing: content-box;
+}
+
+.months {
+  display: flex;
+}
+
+.week,
+.day {
+  height: 20px;
+  position: relative;
+  border: 1;
+  flex: auto;
+  border: 2px solid white;
+  border-radius: 4px;
+  background-color: var(--nt-units-background);
+  cursor: help;
+}
+
+.years {
+  display: flex;
+}
+
+.year {
+  text-align: center;
+  border-right: 1px solid var(--nt-plan-vertical-line-color);
+  font-weight: bold;
+}
+.year:first-child {
+  border-left: 1px solid var(--nt-plan-vertical-line-color);
+}
+.year:first-child:last-child {
+  width: 100%;
+}
+
+.quarters {
+  display: flex;
+}
+
+.quarter {
+  width: 12.5%;
+  text-align: center;
+  border-right: 1px solid var(--nt-plan-vertical-line-color);
+  font-weight: bold;
+}
+.quarter:first-child {
+  border-left: 1px solid var(--nt-plan-vertical-line-color);
+}
+
+.nt-plan-group {
+  margin: 20px 0;
+  position: relative;
+}
+
+.nt-plan-group {
+  display: flex;
+}
+
+.nt-plan-group-summary {
+  background: #2751b0;
+  width: 150px;
+  white-space: normal;
+  padding: 0.1rem 0.5rem;
+  border-radius: 5px;
+  color: #fff;
+  z-index: 3;
+}
+.nt-plan-group-summary p {
+  margin: 0;
+  padding: 0;
+  font-size: 0.6rem;
+  color: #fff;
+}
+
+.nt-plan-group-summary,
+.month,
+.period,
+.week,
+.day,
+.nt-tooltip {
+  border: 3px solid white;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.nt-plan-periods {
+  padding-left: 150px;
+}
+
+.months {
+  z-index: 2;
+  position: relative;
+}
+
+.weeks {
+  position: relative;
+  top: -2px;
+  z-index: 0;
+}
+
+.month,
+.quarter,
+.year,
+.week,
+.day,
+.nt-tooltip {
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+}

docs/css/neoteroi-spantable.css

@@ -0,0 +1,56 @@
+/**
+ *   Extra CSS file recommended for MkDocs and neoteroi.spantable extension.
+ *
+ *   https://github.com/Neoteroi/mkdocs-plugins
+**/
+.span-table-wrapper table {
+  border-collapse: collapse;
+  margin-bottom: 2rem;
+  border-radius: 0.1rem;
+}
+
+.span-table td,
+.span-table th {
+  padding: 0.2rem;
+  background-color: var(--md-default-bg-color);
+  font-size: 0.64rem;
+  max-width: 100%;
+  overflow: auto;
+  touch-action: auto;
+  border-top: 0.05rem solid var(--md-typeset-table-color);
+  padding: 0.9375em 1.25em;
+  vertical-align: top;
+}
+
+.span-table tr:first-child td {
+  font-weight: 700;
+  min-width: 5rem;
+  padding: 0.9375em 1.25em;
+  vertical-align: top;
+}
+
+.span-table td:first-child {
+  border-left: 0.05rem solid var(--md-typeset-table-color);
+}
+
+.span-table td:last-child {
+  border-right: 0.05rem solid var(--md-typeset-table-color);
+}
+
+.span-table tr:last-child {
+  border-bottom: 0.05rem solid var(--md-typeset-table-color);
+}
+
+.span-table [colspan],
+.span-table [rowspan] {
+  font-weight: bold;
+  border: 0.05rem solid var(--md-typeset-table-color);
+}
+
+.span-table tr:not(:first-child):hover td:not([colspan]):not([rowspan]),
+.span-table td[colspan]:hover,
+.span-table td[rowspan]:hover {
+  background-color: rgba(0, 0, 0, 0.035);
+  box-shadow: 0 0.05rem 0 var(--md-default-bg-color) inset;
+  transition: background-color 125ms;
+}

docs/css/neoteroi-timeline.css

@@ -0,0 +1,341 @@
+/**
+ *  Extra CSS file for MkDocs and the neoteroi.timeline extension.
+ *
+ *  https://github.com/Neoteroi/mkdocs-plugins
+**/
+.nt-error {
+  border: 2px dashed darkred;
+  padding: 0 1rem;
+  background: #faf9ba;
+  color: darkred;
+}
+
+.nt-timeline {
+  margin-top: 30px;
+}
+.nt-timeline .nt-timeline-title {
+  font-size: 1.1rem;
+  margin-top: 0;
+}
+.nt-timeline .nt-timeline-sub-title {
+  margin-top: 0;
+}
+.nt-timeline .nt-timeline-content {
+  font-size: 0.8rem;
+  border-bottom: 2px dashed #ccc;
+  padding-bottom: 1.2rem;
+}
+.nt-timeline.horizontal .nt-timeline-items {
+  flex-direction: row;
+  overflow-x: scroll;
+}
+.nt-timeline.horizontal .nt-timeline-items > div {
+  min-width: 400px;
+  margin-right: 50px;
+}
+.nt-timeline.horizontal.reverse .nt-timeline-items {
+  flex-direction: row-reverse;
+}
+.nt-timeline.horizontal.center .nt-timeline-before {
+  background-image: linear-gradient(rgba(252, 70, 107, 0) 0%, rgb(252, 70, 107) 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 2px;
+  background-position: 0 center;
+}
+.nt-timeline.horizontal.center .nt-timeline-after {
+  background-image: linear-gradient(180deg, rgb(252, 70, 107) 0%, rgba(252, 70, 107, 0) 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 2px;
+  background-position: 0 center;
+}
+.nt-timeline.horizontal.center .nt-timeline-items {
+  background-image: radial-gradient(circle, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 2px;
+  background-position: 0 center;
+}
+.nt-timeline.horizontal .nt-timeline-dot {
+  left: 50%;
+}
+.nt-timeline.horizontal .nt-timeline-dot:not(.bigger) {
+  top: calc(50% - 4px);
+}
+.nt-timeline.horizontal .nt-timeline-dot.bigger {
+  top: calc(50% - 15px);
+}
+.nt-timeline.vertical .nt-timeline-items {
+  flex-direction: column;
+}
+.nt-timeline.vertical.reverse .nt-timeline-items {
+  flex-direction: column-reverse;
+}
+.nt-timeline.vertical.center .nt-timeline-before {
+  background: linear-gradient(rgba(252, 70, 107, 0) 0%, rgb(252, 70, 107) 100%) no-repeat center/2px 100%;
+}
+.nt-timeline.vertical.center .nt-timeline-after {
+  background: linear-gradient(rgb(252, 70, 107) 0%, rgba(252, 70, 107, 0) 100%) no-repeat center/2px 100%;
+}
+.nt-timeline.vertical.center .nt-timeline-items {
+  background: radial-gradient(circle, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%) no-repeat center/2px 100%;
+}
+.nt-timeline.vertical.center .nt-timeline-dot {
+  left: calc(50% - 10px);
+}
+.nt-timeline.vertical.center .nt-timeline-dot:not(.bigger) {
+  top: 10px;
+}
+.nt-timeline.vertical.center .nt-timeline-dot.bigger {
+  left: calc(50% - 20px);
+}
+.nt-timeline.vertical.left {
+  padding-left: 100px;
+}
+.nt-timeline.vertical.left .nt-timeline-item {
+  padding-left: 70px;
+}
+.nt-timeline.vertical.left .nt-timeline-sub-title {
+  left: -100px;
+  width: 100px;
+}
+.nt-timeline.vertical.left .nt-timeline-before {
+  background: linear-gradient(rgba(252, 70, 107, 0) 0%, rgb(252, 70, 107) 100%) no-repeat 30px/2px 100%;
+}
+.nt-timeline.vertical.left .nt-timeline-after {
+  background: linear-gradient(rgb(252, 70, 107) 0%, rgba(252, 70, 107, 0) 100%) no-repeat 30px/2px 100%;
+}
+.nt-timeline.vertical.left .nt-timeline-items {
+  background: radial-gradient(circle, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%) no-repeat 30px/2px 100%;
+}
+.nt-timeline.vertical.left .nt-timeline-dot {
+  left: 21px;
+  top: 8px;
+}
+.nt-timeline.vertical.left .nt-timeline-dot.bigger {
+  top: 0px;
+  left: 10px;
+}
+.nt-timeline.vertical.right {
+  padding-right: 100px;
+}
+.nt-timeline.vertical.right .nt-timeline-sub-title {
+  right: -100px;
+  text-align: left;
+  width: 100px;
+}
+.nt-timeline.vertical.right .nt-timeline-item {
+  padding-right: 70px;
+}
+.nt-timeline.vertical.right .nt-timeline-before {
+  background: linear-gradient(rgba(252, 70, 107, 0) 0%, rgb(252, 70, 107) 100%) no-repeat calc(100% - 30px)/2px 100%;
+}
+.nt-timeline.vertical.right .nt-timeline-after {
+  background: linear-gradient(rgb(252, 70, 107) 0%, rgba(252, 70, 107, 0) 100%) no-repeat calc(100% - 30px)/2px 100%;
+}
+.nt-timeline.vertical.right .nt-timeline-items {
+  background: radial-gradient(circle, rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%) no-repeat calc(100% - 30px)/2px 100%;
+}
+.nt-timeline.vertical.right .nt-timeline-dot {
+  right: 21px;
+  top: 8px;
+}
+.nt-timeline.vertical.right .nt-timeline-dot.bigger {
+  top: 10px;
+  right: 10px;
+}
+
+.nt-timeline-items {
+  display: flex;
+  position: relative;
+}
+.nt-timeline-items > div {
+  min-height: 100px;
+  padding-top: 2px;
+  padding-bottom: 20px;
+}
+
+.nt-timeline-before {
+  content: "";
+  height: 15px;
+}
+
+.nt-timeline-after {
+  content: "";
+  height: 60px;
+  margin-bottom: 20px;
+}
+
+.nt-timeline-sub-title {
+  position: absolute;
+  width: 50%;
+  top: 4px;
+  font-size: 18px;
+  color: var(--nt-color-50);
+}
+
+[data-md-color-scheme=slate] .nt-timeline-sub-title {
+  color: var(--nt-color-51);
+}
+
+.nt-timeline-item {
+  position: relative;
+}
+
+.nt-timeline.vertical.center:not(.alternate) .nt-timeline-item {
+  padding-left: calc(50% + 40px);
+}
+.nt-timeline.vertical.center:not(.alternate) .nt-timeline-item .nt-timeline-sub-title {
+  left: 0;
+  padding-right: 40px;
+  text-align: right;
+}
+.nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(odd) {
+  padding-left: calc(50% + 40px);
+}
+.nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(odd) .nt-timeline-sub-title {
+  left: 0;
+  padding-right: 40px;
+  text-align: right;
+}
+.nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(even) {
+  text-align: right;
+  padding-right: calc(50% + 40px);
+}
+.nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(even) .nt-timeline-sub-title {
+  right: 0;
+  padding-left: 40px;
+  text-align: left;
+}
+
+.nt-timeline-dot {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: #fc5b5b;
+  position: absolute;
+  top: 0px;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  border: 3px solid white;
+}
+.nt-timeline-dot:not(.bigger) .icon {
+  font-size: 10px;
+}
+.nt-timeline-dot.bigger {
+  width: 40px;
+  height: 40px;
+  padding: 3px;
+}
+.nt-timeline-dot .icon {
+  color: white;
+}
+
+/* Fix for webkit (Chrome, Safari) */
+@supports not (-moz-appearance: none) {
+  /*
+  This fix is necessary, for some reason, to render the timeline properly
+  inside `details` elements used by pymdownx. Firefox doesn't need this fix,
+  it renders elements properly.
+  */
+  details .nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(odd) .nt-timeline-sub-title,
+details .nt-timeline.vertical.center:not(.alternate) .nt-timeline-item .nt-timeline-sub-title {
+    left: -40px;
+  }
+  details .nt-timeline.vertical.center.alternate .nt-timeline-item:nth-child(even) .nt-timeline-sub-title {
+    right: -40px;
+  }
+  details .nt-timeline.vertical.center .nt-timeline-dot {
+    left: calc(50% - 12px);
+  }
+  details .nt-timeline-dot.bigger {
+    font-size: 1rem !important;
+  }
+}
+/* default colors */
+.nt-timeline-item:nth-child(0) .nt-timeline-dot {
+  background-color: var(--nt-color-0);
+}
+
+.nt-timeline-item:nth-child(1) .nt-timeline-dot {
+  background-color: var(--nt-color-1);
+}
+
+.nt-timeline-item:nth-child(2) .nt-timeline-dot {
+  background-color: var(--nt-color-2);
+}
+
+.nt-timeline-item:nth-child(3) .nt-timeline-dot {
+  background-color: var(--nt-color-3);
+}
+
+.nt-timeline-item:nth-child(4) .nt-timeline-dot {
+  background-color: var(--nt-color-4);
+}
+
+.nt-timeline-item:nth-child(5) .nt-timeline-dot {
+  background-color: var(--nt-color-5);
+}
+
+.nt-timeline-item:nth-child(6) .nt-timeline-dot {
+  background-color: var(--nt-color-6);
+}
+
+.nt-timeline-item:nth-child(7) .nt-timeline-dot {
+  background-color: var(--nt-color-7);
+}
+
+.nt-timeline-item:nth-child(8) .nt-timeline-dot {
+  background-color: var(--nt-color-8);
+}
+
+.nt-timeline-item:nth-child(9) .nt-timeline-dot {
+  background-color: var(--nt-color-9);
+}
+
+.nt-timeline-item:nth-child(10) .nt-timeline-dot {
+  background-color: var(--nt-color-10);
+}
+
+.nt-timeline-item:nth-child(11) .nt-timeline-dot {
+  background-color: var(--nt-color-11);
+}
+
+.nt-timeline-item:nth-child(12) .nt-timeline-dot {
+  background-color: var(--nt-color-12);
+}
+
+.nt-timeline-item:nth-child(13) .nt-timeline-dot {
+  background-color: var(--nt-color-13);
+}
+
+.nt-timeline-item:nth-child(14) .nt-timeline-dot {
+  background-color: var(--nt-color-14);
+}
+
+.nt-timeline-item:nth-child(15) .nt-timeline-dot {
+  background-color: var(--nt-color-15);
+}
+
+.nt-timeline-item:nth-child(16) .nt-timeline-dot {
+  background-color: var(--nt-color-16);
+}
+
+.nt-timeline-item:nth-child(17) .nt-timeline-dot {
+  background-color: var(--nt-color-17);
+}
+
+.nt-timeline-item:nth-child(18) .nt-timeline-dot {
+  background-color: var(--nt-color-18);
+}
+
+.nt-timeline-item:nth-child(19) .nt-timeline-dot {
+  background-color: var(--nt-color-19);
+}
+
+.nt-timeline-item:nth-child(20) .nt-timeline-dot {
+  background-color: var(--nt-color-20);
+}
+

docs/index.md

@@ -0,0 +1,43 @@
+---
+hide:
+  - navigation
+  - toc
+---
+
+<p align="center"><img src="images/logo.png#gh-light-mode-only" alt=""><img src="images/logo-dark.png#gh-dark-mode-only" alt=""></p>
+<h1 align="center">What the f*ck Python! 😱</h1>
+<p align="center">Exploring and understanding Python through surprising snippets.</p>
+
+## Sections
+<br>
+
+::cards:: cols=5
+
+- title: English
+  content: Original language
+  image: images/usa.png
+  url: usa
+
+- title: Translations
+  content: Other languages
+  image: images/world.png
+  url: cn
+
+- title: Website
+  content: Interactive Website
+  image: images/website.png
+  url: https://wtfpython-interactive.vercel.app/
+
+- title: Notebook
+  content: Interactive Notebook
+  image: images/jupyter.png
+  url: https://colab.research.google.com/github/satwikkansal/wtfpython/blob/master/irrelevant/wtf.ipynb
+
+- title: CLI
+  content: Installation
+  image: images/cli.png
+  url: https://pypi.org/project/wtfpython/
+
+::/cards::
+
+

mkdocs.yml

@@ -0,0 +1,91 @@
+# Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
+
+# Project information
+site_name: What the f*ck Python!
+site_url: https://github.com/satwikkansal/wtfpython
+site_author: Francisco Alfaro
+site_description:
+
+# Repository
+repo_name: satwikkansal/wtfpython
+repo_url: https://github.com/satwikkansal/wtfpython
+edit_uri: ''
+
+# Markdown extensions
+markdown_extensions:
+  - pymdownx.superfences
+  - pymdownx.tabbed:
+      alternate_style: true
+  - neoteroi.cards
+  - neoteroi.timeline
+  - neoteroi.projects
+  - admonition
+  - pymdownx.details
+
+extra_css:
+  - css/neoteroi-mkdocs.css
+
+# Theme
+theme:
+  name: material
+  language: es
+  logo: https://www.svgrepo.com/show/405305/face-screaming-in-fear.svg
+  favicon: https://www.svgrepo.com/show/405305/face-screaming-in-fear.svg
+  palette:
+  - media: '(prefers-color-scheme: light)'
+    scheme: default
+    primary: deep purple
+    accent: deep purple
+    toggle:
+      icon: material/lightbulb
+      name: Switch to dark mode
+  - media: '(prefers-color-scheme: dark)'
+    scheme: slate
+    primary: deep purple
+    accent: deep purple
+    toggle:
+      icon: material/lightbulb-outline
+      name: Switch to light mode
+  features:
+  - search.suggest
+  - search.highlight
+  - content.tabs.link
+  - navigation.indexes
+  - content.tooltips
+  - navigation.path
+  - content.code.annotate
+  - content.code.copy
+  - content.code.select
+  - navigation.tabs
+
+# Customization
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/satwikkansal
+    - icon: fontawesome/brands/twitter
+      link: https://twitter.com/satwikkansal
+    - icon: fontawesome/solid/globe
+      link: https://satwikkansal.xyz/
+
+# Plugins
+plugins:
+  - search
+
+# Extra javascript
+extra_javascript:
+  - javascripts/mathjax.js
+  - https://polyfill.io/v3/polyfill.min.js?features=es6
+  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
+
+#TOC
+nav:
+    - 🏠 Home: index.md
+    - 🐍 Original: USA.md
+    - 🌎 World:
+        - Chinese: CN.md
+        - Vietnamese: VI.md
+        - Korean: KO.md
+        - Russian: RU.md
+        - German: GE.md
+

pyproject.toml

@@ -0,0 +1,13 @@
+[tool.poetry]
+name = "docs"
+version = "0.1.0"
+description = "mkdocs - courses"
+authors = ["Francisco Alfaro <francisco.alfaro.496@gmail.com>"]
+license = "MIT"
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+mkdocs-material = "*"
+neoteroi-mkdocs = "*"
+mkdocs-jupyter = "*"