diff --git a/config.yaml b/config.yaml index 0bedc9e..6941764 100644 --- a/config.yaml +++ b/config.yaml @@ -101,7 +101,7 @@ params: link: "https://github.com/stijn-dejongh/systems-thinking-kata" footer: - logo: logo_trans_border_scaled.webp + logo: LOGO_BASE_SMALL.webp socialmediatitle: Socials socialmedia: - link: https://github.com/stijn-dejongh/systems-thinking-kata diff --git a/content/diagram_tutorial.md b/content/diagram_tutorial.md index 6844542..40ed648 100644 --- a/content/diagram_tutorial.md +++ b/content/diagram_tutorial.md @@ -81,7 +81,7 @@ The relationship between these two nodes is that `chickens` lay `eggs`, and `egg the amount of `chickens` increases the amount of `eggs`, which in turn increases the amount of `chickens`. This gives us a causal loop diagram that looks like this: -{{< image src="/images/diagramming/chickens_and_eggs.svg" alt="Causal Loop Diagram for chickens and eggs" size="50%" >}} +{{< image src="/images/diagramming/chickens_and_eggs.svg" alt="Causal Loop Diagram for chickens and eggs" size="40%" >}} ### Chickens and Roads @@ -94,7 +94,7 @@ So, as the amount of `chickens` increases, the amount of `road crossings` also i And as any road safety officer will tell you, the more `road crossings` you have, the more likely you are to have `chickens` being run over. Hence: as the amount of road crossing increases, the amount of chickens decreases. -{{< image src="/images/diagramming/chickens_and_roads.svg" alt="Causal Loop Diagram for chickens crossing the road" size="50%" >}} +{{< image src="/images/diagramming/chickens_and_roads.svg" alt="Causal Loop Diagram for chickens crossing the road" size="40%" >}} ### Chickens, Eggs, and Roads @@ -102,7 +102,7 @@ Now, let's combine these two systems into one big system. We end up with our thr road crossings`. Note that there is no direct relationship between `eggs` and `road crossings`, so we don't need to draw a link between them. This gives us a causal loop diagram that looks like this: -{{< image src="/images/diagramming/chickens_eggs_roads.svg" alt="Causal Loop Diagram for chickens, eggs, and road crossings" size="80%" >}} +{{< image src="/images/diagramming/chickens_eggs_roads.svg" alt="Causal Loop Diagram for chickens, eggs, and road crossings" size="40%" >}} We have now created a simple causal loop diagram that shows the relationships between chickens, eggs, and road crossings. This diagram helps us reason about the system and understand how changes in one element can affect the others. As we add more nodes and links to the diagram, we can @@ -116,17 +116,69 @@ These will help you create more detailed and accurate models of complex systems ## Feedback Loops -### Balancing Feedback +A key concept in systems thinking is the idea of `feedback loops`. +Feedback loops are the mechanisms through which changes in one part of a system are amplified or dampened by the system itself. +It is important to understand the different types of feedback loops, as they can have a significant impact on the behavior of a system. ### Reinforcing Feedback +Consider our "chickens and eggs" example. +The relationship between the elements `chickens` and `eggs` is an example of a `reinforcing feedback loop`. +Meaning that an increase in one element leads to an increase in the other, which in turn leads to a further increase in the first element. +Note that as the relationship is identical, a decrease in one element will lead to a decrease in the other. + +{{< info text="This type of feedback loop can lead to exponential growth or decline in a system." >}} + +In some depictions, this type of feedback loop is indicated by an 'R' character with a loop around it. Reinforcing feedback loops +are also called `positive feedback loops` sometimes. + +### Balancing Feedback + +In our "chickens and roads" example, the amount of 'road crossings' evolves similarly to the amount of 'chickens'. +This means that as the number of 'chickens' increases, the number of 'road crossings' increases as well. +And when the number of 'children' decreases, the number of 'road crossings' decreases as well. +Many of those chickens will be run over, which will decrease the number of chickens. So as the amount of `road crossings` increases, the amount +of chickens decreases, which in turn decreases the amount of `road crossings`. + +This is a prime example of a **"balancing feedback loop"**. A balancing feedback loop is a stabilizing mechanism that tends to keep a system in +some sort of equilibrium (a fancy word for "balance"). As time goes on, the system will tend to stabilize itself around a certain value. +In nature, this is often referred to as the "homeostasis" of an ecosystem. Think about the predator-prey relationship between wolves and deer. +As the number of wolves increases, they eat more deer, which decreases the number of deer. The wolves then have less to eat, so their numbers +start dwindling. This in turn allows the deer population to recover, and the cycle starts anew. + +{{< info text="This type of feedback loop can lead to oscillations around a certain value. Even if the system is never truly in an equilibrium, it will average out around it" >}} + +In some depictions, this type of feedback loop is indicated by a 'B' character with a loop around it. +Balancing feedback loops are also called `negative feedback loops` sometimes. + ## Real-world Examples -{{< image src="/images/diagramming/economic_feedback_loop.png" - alt="Causal loop diagram illustrating economical concepts." - size="80%" caption="Economical impact of electrical mini-grids. Image by Michael Stadler, et al. source: ResearchGate" >}} +Below are some real-world examples of causal loop diagrams. These diagrams are used to model complex systems and understand the relationships +between various elements within them. They can help us identify the feedback loops that exist within the system and predict how seemingly small, +local, changes can have far-reaching consequences. +### Electrical Mini-Grids +The diagram below illustrates the economical impact of using electrical mini-grids to counter challenges with centralized electrical +facilities. Most notably, they are seen as a way to provide electricity to remote areas that are not connected to the main grid. They can also +be used to ensure a more stable local supply of electricity, to reduce the risk of full-scale blackouts and ensure a more stable supply of +electrical power. If you are interested in the full research paper, you can find it [on the Research Gate website](https://www.researchgate.net/publication/320282073_The_economic_impact_of_electrical_mini-grids_in_rural_India). + +{{< image src="/images/diagramming/economic_feedback_loop.png" + alt="Causal loop diagram illustrating economical concepts." + size="80%" caption="Economical impact of electrical mini-grids. Image by Michael Stadler, et al. source: ResearchGate" >}} +The included diagram shows the relationships between the different elements of the system. The diagram is used to illustrate the economical +impact of introducing electrical mini-grids in rural India. We can identify several feedback loops in the diagram, such as the reinforcing loop +on the "local economical demand". And we can easily spot the balancing feedback loop between "Electricity usage" and "Power availability". + +{{< tip text=` +To grasp the full complexity of systems, such as this one, try and figure out what happens when you change the value of a single element in +the diagram. For example, what happens if the "local economical demand" increases? Or what happens if the "power availability" decreases? + +Follow the arrows (trace them with your finger or a pen) and see how the changes propagate through the system. More often than not, you will +have touched upon nearly all elements in the diagram and usually end up back at the starting point. You will have a better understanding of the +modelled system interactions and the impact a single change can have. You might also end up with a slight headache. +` >}} diff --git a/src/images/example_loop.puml b/src/images/example_loop.puml index 9177caa..2d5968f 100644 --- a/src/images/example_loop.puml +++ b/src/images/example_loop.puml @@ -13,6 +13,6 @@ Sticky(roadCrossings, " # Road \n Crossings") eggs -> chickens: " " chickens -> eggs: " " chickens -> roadCrossings: " " -roadCrossings -> chickens: "O" +roadCrossings [ยด]-> chickens: "O" @enduml \ No newline at end of file diff --git a/src/templates/puml-theme-stickies.puml b/src/templates/puml-theme-stickies.puml index bdebe9e..dfb7851 100644 --- a/src/templates/puml-theme-stickies.puml +++ b/src/templates/puml-theme-stickies.puml @@ -12,8 +12,8 @@ skinparam backgroundColor $BGCOLOR -!$STICKY_FONT_SIZE = 20 -!$TECHN_FONT_SIZE = 10 +!$STICKY_FONT_SIZE = 22 +!$TECHN_FONT_SIZE = 14 !$WHITE = "#fff" !$GRAY_DARK = "#5a5a5a" @@ -81,16 +81,16 @@ skinparam backgroundColor $BGCOLOR '' '' Global Default Values '' -skinparam defaultFontName "Verdana" -skinparam defaultFontSize 14 +skinparam defaultFontName "d-din" +skinparam defaultFontSize 18 skinparam dpi 100 skinparam shadowing true skinparam roundcorner 20 skinparam ParticipantPadding 30 -skinparam BoxPadding 40 +skinparam BoxPadding 42 skinparam Padding 14 skinparam ArrowColor $PRIMARY_DARK -skinparam nodesep 62 +skinparam nodesep 68 skinparam ranksep 42 skinparam maxMessageSize 224 skinparam wrapWidth 224 @@ -152,12 +152,17 @@ skinparam agent { skinparam arrow { ' FontName Impact Thickness 2.5 - FontSize 18 + FontSize 16 Color $PRIMARY_DARK FontColor $PRIMARY_DARK } !endsub +skinparam arrow<> { + Color $DANGER_DARK + FontColor $DANGER_DARK +} + !startsub boundary skinparam boundary { $primary_scheme() @@ -238,7 +243,7 @@ skinparam class { BorderThickness 2 BorderColor $PRIMARY_DARK AttributeFontColor $LIGHT - AttributeFontSize 12 + AttributeFontSize 14 } !endsub @@ -249,7 +254,7 @@ skinparam object { StereotypeFontColor $DARK BorderThickness 1 AttributeFontColor $LIGHT - AttributeFontSize 11 + AttributeFontSize 14 } !endsub diff --git a/static/css/custom.css b/static/css/custom.css index 1c12c0f..78fbee3 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -3,12 +3,22 @@ url('/fonts/literta-font') } +@font-face { + font-family: d-din; + url('/fonts/d-din') +} + + +.content h2:not(:first-child) { + margin-top: 3.75rem; +} + .pattern { - h3::before, h4::before { + h3::before, h4::before, h2::before { content: ""; display: block; height: 6rem; /* fixed header height*/ - margin: -6rem 0 0; /* negative fixed header height */ + margin: -4.75rem 0 0; /* negative fixed header height */ } } @@ -18,6 +28,24 @@ body { line-height: 1.75rem; } +h1, h2, h3, h4, h5, h6 { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; +} + +.title-wrapper .title .title-wrapper .subtitle{ + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif !important; +} + +.navbar { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; + font-size: 1.125rem; +} + +.sidebar { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; + font-size: 0.85rem; +} + .navbar { border-bottom: 2px solid #1e75c050; } @@ -168,6 +196,10 @@ body { color: #1c3337; } +.content h1, h2, h3, h4 { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; +} + .content h2, h3, h4 { text-align: left; text-indent: 0; @@ -471,4 +503,8 @@ footer.footer-dark .footer-column ul.link-list a:hover { .section.is-medium { padding: 5.25rem 4.5rem; } +} + +code { + color: #1e75c0; } \ No newline at end of file diff --git a/static/css/custom.min.css b/static/css/custom.min.css index a7c5c33..2e75f00 100644 --- a/static/css/custom.min.css +++ b/static/css/custom.min.css @@ -1 +1 @@ -@font-face{font-family:literta;url('/fonts/literta-font')}.pattern{h3::before,h4::before{content:"";display:block;height:6rem;margin:-6rem 0 0}}body{font-family:literta,"Gill Sans",'Open Sans',sans-serif;font-size:16px;line-height:1.75rem}.navbar{border-bottom:2px solid #1e75c050}#navbar-clone{z-index:999 !important}@media all and (max-width:1024px){body{font-size:14px;line-height:1.65rem}.wide{margin-left:-1.125rem;margin-right:-1.1255rem}.footer .columns{margin-left:-0.25rem;margin-right:-0.25rem}.title.is-1{font-size:2.5rem}}.wrapped-columns{display:flex;flex-wrap:wrap}.flex-column{display:flex;flex-basis:0;flex-grow:1;flex-shrink:1;padding:.75rem;justify-content:space-around}.chapter{padding:1.125rem;margin-bottom:2.5rem}.chapter a{color:#9c671a}.chapter a:hover{color:#f39200}.container a{color:#9c671a}.container p a{text-decoration:underline}.container a:hover{color:#f39200}.nav-item{display:block;font-weight:350;color:#f39200;margin:.5rem}.page-navigation{display:flex;flex-direction:row;justify-content:space-around;border-top:2px solid #f39200;margin-top:4.275rem;padding:1.25rem;font-weight:450}.content-hero{margin-top:2.25rem;margin-bottom:1.25rem}.hero-links{display:flex;flex-direction:row;justify-content:center}.hero-body{padding:5rem 4.5rem}@media all and (min-width:1024px){.hero-body{padding:3.75rem 2.25rem !important;margin-bottom:1.75rem}}@media(max-width:1024px){.hero-links{flex-direction:column}.hero-body{padding:2.75rem 1.75rem}}.hero-link{margin:.45rem 1.25rem}.title.is-3{font-size:2.25rem;letter-spacing:.125rem}.content{text-align:justify;text-align-all:left;text-justify:inter-word;text-wrap:pretty;letter-spacing:.05rem;text-indent:.5em}@media all and (max-width:1024px){.content{text-indent:.25em}}.content p::first-letter {font-size:1.125rem;color:#1c3337}.content h2,h3,h4{text-align:left;text-indent:0;margin-bottom:.25rem}.content:not(.pattern) h2{clear:both}.content h3{font-size:1.35em}.content:not(.pattern) h3{clear:both}.content h4{font-size:1.15em;margin-top:2.125em;color:#556975}.content:not(.pattern) h5{clear:both}.content ul{margin-top:.85rem;text-indent:0}.content ul li{margin-bottom:.45rem;text-align:left}.content a{color:#b56f07;font-weight:600}.content a:hover{color:#f39200;font-weight:600}@media all and (max-width:1024px){.content pre{padding:.75em .25em;margin-left:-0.5rem;margin-right:-0.5rem;text-indent:.25rem;tab-size:2}pre code{text-indent:-0.75rem}}.full{width:100%;max-width:100% !important;padding:0 !important}.reference{max-width:100%;word-break:break-word;font-size:.85rem}.reference a{font-weight:600}.content .reference a{font-size:.7rem;text-transform:uppercase;font-weight:600}.content .footnotes ol li{margin:1.25rem 0}.content em{font-style:italic;color:#3c5d79;font-family:Georgia,serif;font-size:.975rem;font-kerning:auto;letter-spacing:.02em}.highlight{margin:2.75rem 0;font-size:.95rem;line-height:1.5rem}.increased-width{max-width:80%}.spacer-wide{width:48% !important}.title-wrapper{margin-bottom:3.75rem}.footer-logo{display:flex}.company-name{font-weight:900;margin-left:.125rem;border-bottom:2px solid #1e75c0;padding-left:.75rem;padding-right:.25rem}.company{flex-basis:200px}.company-info{color:#98a9c3;font-size:.75rem;font-weight:450;line-height:1.75;margin-top:.125rem;padding:.125rem 0 0 3.45rem}.company-info a{color:#98a9c3}.company-info a:hover{color:#fefefe}pre{text-indent:0}@media all and (max-width:1024px){.content pre{text-indent:.75rem;padding-left:2rem}}.pattern-buttons{display:flex;flex-direction:column;gap:.75rem;justify-content:center;align-content:center}.pattern-buttons-title{font-size:.9rem;color:#f39200;text-transform:uppercase;font-weight:600;text-align:center;display:block;margin-bottom:.75rem}.fitted{width:fit-content}.title-wrapper{max-width:600px}.vert-align{align-content:center}.media .content{text-align:justify;text-justify:inter-word;text-wrap:pretty;letter-spacing:.05rem;text-indent:0;padding-top:1.25rem}@media all and (max-width:1024px){.media .content{text-align:left}}.has-text-centered{text-align:center;.title{text-align:center}.subtitle{text-align:center}}#practices{padding-top:.75rem}#concepts{padding-top:.75rem}.half-width{max-width:50%;margin-left:auto;margin-right:auto;clear:both}@media all and (max-width:1024px){.half-width{max-width:100%}}hr{border-top:1px solid #f3920045;background:0;display:block;height:4px;margin:1.5rem 0}footer{margin-top:3.75rem;border-top:2px solid #f39200}footer.footer-dark{background:linear-gradient(rgba(1,13,24,0.95),rgba(1,13,24,0.85),rgba(1,13,24,0.95),rgba(1,13,24,0.95),rgba(1,13,24,1)),url("/images/tiles.webp") repeat}footer.footer-dark .footer-column ul.link-list a{padding-left:.75rem;border-left:2px solid transparent}footer.footer-dark .footer-column ul.link-list a:hover{border-left:2px solid #f39200}.title-wrapper-dark{float:none;display:block;width:100%;margin:0;padding:3rem 3rem 2.75rem;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-top:2px solid #162431;border-bottom:4px solid #535353;border-radius:0;.title{color:#fefefe;margin-left:auto;margin-right:auto;clear:both;text-transform:capitalize}.subtitle{color:#f39200;font-weight:300;margin-left:auto;margin-right:auto;clear:both}}@media(min-width:1024px){.section.is-medium{padding:5.25rem 4.5rem}} \ No newline at end of file +@font-face{font-family:literta;url('/fonts/literta-font')}@font-face{font-family:d-din;url('/fonts/d-din')}.content h2:not(:first-child){margin-top:3.75rem}.pattern{h3::before,h4::before,h2::before{content:"";display:block;height:6rem;margin:-4.75rem 0 0}}body{font-family:literta,"Gill Sans",'Open Sans',sans-serif;font-size:16px;line-height:1.75rem}h1,h2,h3,h4,h5,h6{font-family:d-din,"Gill Sans",'Open Sans',sans-serif}.title-wrapper .title .title-wrapper .subtitle{font-family:d-din,"Gill Sans",'Open Sans',sans-serif !important}.navbar{font-family:d-din,"Gill Sans",'Open Sans',sans-serif;font-size:1.125rem}.sidebar{font-family:d-din,"Gill Sans",'Open Sans',sans-serif;font-size:.85rem}.navbar{border-bottom:2px solid #1e75c050}#navbar-clone{z-index:999 !important}@media all and (max-width:1024px){body{font-size:14px;line-height:1.65rem}.wide{margin-left:-1.125rem;margin-right:-1.1255rem}.footer .columns{margin-left:-0.25rem;margin-right:-0.25rem}.title.is-1{font-size:2.5rem}}.wrapped-columns{display:flex;flex-wrap:wrap}.flex-column{display:flex;flex-basis:0;flex-grow:1;flex-shrink:1;padding:.75rem;justify-content:space-around}.chapter{padding:1.125rem;margin-bottom:2.5rem}.chapter a{color:#9c671a}.chapter a:hover{color:#f39200}.container a{color:#9c671a}.container p a{text-decoration:underline}.container a:hover{color:#f39200}.nav-item{display:block;font-weight:350;color:#f39200;margin:.5rem}.page-navigation{display:flex;flex-direction:row;justify-content:space-around;border-top:2px solid #f39200;margin-top:4.275rem;padding:1.25rem;font-weight:450}.content-hero{margin-top:2.25rem;margin-bottom:1.25rem}.hero-links{display:flex;flex-direction:row;justify-content:center}.hero-body{padding:5rem 4.5rem}@media all and (min-width:1024px){.hero-body{padding:3.75rem 2.25rem !important;margin-bottom:1.75rem}}@media(max-width:1024px){.hero-links{flex-direction:column}.hero-body{padding:2.75rem 1.75rem}}.hero-link{margin:.45rem 1.25rem}.title.is-3{font-size:2.25rem;letter-spacing:.125rem}.content{text-align:justify;text-align-all:left;text-justify:inter-word;text-wrap:pretty;letter-spacing:.05rem;text-indent:.5em}@media all and (max-width:1024px){.content{text-indent:.25em}}.content p::first-letter {font-size:1.125rem;color:#1c3337}.content h1,h2,h3,h4{font-family:d-din,"Gill Sans",'Open Sans',sans-serif}.content h2,h3,h4{text-align:left;text-indent:0;margin-bottom:.25rem}.content:not(.pattern) h2{clear:both}.content h3{font-size:1.35em}.content:not(.pattern) h3{clear:both}.content h4{font-size:1.15em;margin-top:2.125em;color:#556975}.content:not(.pattern) h5{clear:both}.content ul{margin-top:.85rem;text-indent:0}.content ul li{margin-bottom:.45rem;text-align:left}.content a{color:#b56f07;font-weight:600}.content a:hover{color:#f39200;font-weight:600}@media all and (max-width:1024px){.content pre{padding:.75em .25em;margin-left:-0.5rem;margin-right:-0.5rem;text-indent:.25rem;tab-size:2}pre code{text-indent:-0.75rem}}.full{width:100%;max-width:100% !important;padding:0 !important}.reference{max-width:100%;word-break:break-word;font-size:.85rem}.reference a{font-weight:600}.content .reference a{font-size:.7rem;text-transform:uppercase;font-weight:600}.content .footnotes ol li{margin:1.25rem 0}.content em{font-style:italic;color:#3c5d79;font-family:Georgia,serif;font-size:.975rem;font-kerning:auto;letter-spacing:.02em}.highlight{margin:2.75rem 0;font-size:.95rem;line-height:1.5rem}.increased-width{max-width:80%}.spacer-wide{width:48% !important}.title-wrapper{margin-bottom:3.75rem}.footer-logo{display:flex}.company-name{font-weight:900;margin-left:.125rem;border-bottom:2px solid #1e75c0;padding-left:.75rem;padding-right:.25rem}.company{flex-basis:200px}.company-info{color:#98a9c3;font-size:.75rem;font-weight:450;line-height:1.75;margin-top:.125rem;padding:.125rem 0 0 3.45rem}.company-info a{color:#98a9c3}.company-info a:hover{color:#fefefe}pre{text-indent:0}@media all and (max-width:1024px){.content pre{text-indent:.75rem;padding-left:2rem}}.pattern-buttons{display:flex;flex-direction:column;gap:.75rem;justify-content:center;align-content:center}.pattern-buttons-title{font-size:.9rem;color:#f39200;text-transform:uppercase;font-weight:600;text-align:center;display:block;margin-bottom:.75rem}.fitted{width:fit-content}.title-wrapper{max-width:600px}.vert-align{align-content:center}.media .content{text-align:justify;text-justify:inter-word;text-wrap:pretty;letter-spacing:.05rem;text-indent:0;padding-top:1.25rem}@media all and (max-width:1024px){.media .content{text-align:left}}.has-text-centered{text-align:center;.title{text-align:center}.subtitle{text-align:center}}#practices{padding-top:.75rem}#concepts{padding-top:.75rem}.half-width{max-width:50%;margin-left:auto;margin-right:auto;clear:both}@media all and (max-width:1024px){.half-width{max-width:100%}}hr{border-top:1px solid #f3920045;background:0;display:block;height:4px;margin:1.5rem 0}footer{margin-top:3.75rem;border-top:2px solid #f39200}footer.footer-dark{background:linear-gradient(rgba(1,13,24,0.95),rgba(1,13,24,0.85),rgba(1,13,24,0.95),rgba(1,13,24,0.95),rgba(1,13,24,1)),url("/images/tiles.webp") repeat}footer.footer-dark .footer-column ul.link-list a{padding-left:.75rem;border-left:2px solid transparent}footer.footer-dark .footer-column ul.link-list a:hover{border-left:2px solid #f39200}.title-wrapper-dark{float:none;display:block;width:100%;margin:0;padding:3rem 3rem 2.75rem;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-top:2px solid #162431;border-bottom:4px solid #535353;border-radius:0;.title{color:#fefefe;margin-left:auto;margin-right:auto;clear:both;text-transform:capitalize}.subtitle{color:#f39200;font-weight:300;margin-left:auto;margin-right:auto;clear:both}}@media(min-width:1024px){.section.is-medium{padding:5.25rem 4.5rem}}code{color:#1e75c0} \ No newline at end of file diff --git a/static/css/images.css b/static/css/images.css index 0165874..97b382c 100644 --- a/static/css/images.css +++ b/static/css/images.css @@ -40,6 +40,11 @@ padding-bottom: 0.5rem; } +.content figure figcaption { + font-style: italic; + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; +} + .text_image { max-height: 65rem; max-width: 50rem; diff --git a/static/css/images.min.css b/static/css/images.min.css index e5efa31..bd10e72 100644 --- a/static/css/images.min.css +++ b/static/css/images.min.css @@ -1 +1 @@ -.img-gallery{width:90%;display:flex;flex-flow:row wrap;justify-content:space-around;overflow:auto;text-align:center;margin-bottom:1.25rem;margin-left:auto;margin-right:auto;clear:both;border-radius:.75rem}.img-gallery figure{background:rgba(254,244,238,0.15);margin-right:.25rem;margin-left:.25rem;margin-bottom:1.25rem;clear:both}.img-gallery figure img{padding:.75rem .75rem 0;max-width:100%;height:auto;align-content:center;display:block;object-fit:contain;margin:auto}.img-gallery figcaption{text-align:center;color:#1f3c48;background:rgba(254,244,238,0.15);font-size:.975rem;font-weight:350;font-style:oblique;padding-bottom:.5rem}.text_image{max-height:65rem;max-width:50rem;text-align:center;width:auto;height:auto;object-fit:contain}.text_image a{object-fit:contain;cursor:zoom-in}.text_image a img{max-height:65rem;max-width:50rem;width:95%}@media(max-width:800px){.text_image{max-width:98%;max-height:480px;margin-left:-0.25rem;margin-right:-0.5rem}.text_image a img{max-width:100%;max-height:480px}}.center{clear:both;margin:2.75rem auto 1.25rem}.left{float:left;clear:both;padding:0 1.5rem 0 .125rem;margin:auto .75rem 1.25rem auto}.right{float:right;clear:both;padding:0 .125rem 0 1.5rem;margin:auto auto 1.25rem .75rem}@media(max-width:800px){.left{float:none;max-width:100% !important}.right{float:none;max-width:100% !important}} \ No newline at end of file +.img-gallery{width:90%;display:flex;flex-flow:row wrap;justify-content:space-around;overflow:auto;text-align:center;margin-bottom:1.25rem;margin-left:auto;margin-right:auto;clear:both;border-radius:.75rem}.img-gallery figure{background:rgba(254,244,238,0.15);margin-right:.25rem;margin-left:.25rem;margin-bottom:1.25rem;clear:both}.img-gallery figure img{padding:.75rem .75rem 0;max-width:100%;height:auto;align-content:center;display:block;object-fit:contain;margin:auto}.img-gallery figcaption{text-align:center;color:#1f3c48;background:rgba(254,244,238,0.15);font-size:.975rem;font-weight:350;font-style:oblique;padding-bottom:.5rem}.content figure figcaption{font-style:italic;font-family:d-din,"Gill Sans",'Open Sans',sans-serif}.text_image{max-height:65rem;max-width:50rem;text-align:center;width:auto;height:auto;object-fit:contain}.text_image a{object-fit:contain;cursor:zoom-in}.text_image a img{max-height:65rem;max-width:50rem;width:95%}@media(max-width:800px){.text_image{max-width:98%;max-height:480px;margin-left:-0.25rem;margin-right:-0.5rem}.text_image a img{max-width:100%;max-height:480px}}.center{clear:both;margin:2.75rem auto 1.25rem}.left{float:left;clear:both;padding:0 1.5rem 0 .125rem;margin:auto .75rem 1.25rem auto}.right{float:right;clear:both;padding:0 .125rem 0 1.5rem;margin:auto auto 1.25rem .75rem}@media(max-width:800px){.left{float:none;max-width:100% !important}.right{float:none;max-width:100% !important}} \ No newline at end of file diff --git a/static/css/patterns.css b/static/css/patterns.css index 096e2af..c5c8339 100644 --- a/static/css/patterns.css +++ b/static/css/patterns.css @@ -893,6 +893,7 @@ } .related summary { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; font-size: 1.125rem; padding: 0.75rem; text-align: center; @@ -905,6 +906,7 @@ } .related .related-content { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; font-size: 0.875rem; padding: 0 2.75rem 1.5rem 2.75rem; } diff --git a/static/css/patterns.min.css b/static/css/patterns.min.css index 9bbab57..90f41e5 100644 --- a/static/css/patterns.min.css +++ b/static/css/patterns.min.css @@ -1 +1 @@ -.pattern_container{background-color:rgba(255,248,244,0.55);border-top:2px solid #f39200;margin-bottom:3.5rem;padding:1.125rem .75rem;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:scroll;align-content:center;justify-content:start;flex-basis:340px;scroll-snap-type:x mandatory;scrollbar-color:#f39200 #fff;scrollbar-width:thin}@media(min-width:1024px){.pattern_container{display:grid;grid-gap:.5rem;grid-template-columns:auto auto auto;grid-template-rows:repeat(auto-fill,minmax(16rem,auto));margin-bottom:2.125rem}.pattern-card{min-height:16rem}}.pattern_container::-webkit-scrollbar{height:1.125rem}.pattern_container::-webkit-scrollbar-thumb,.pattern_container::-webkit-scrollbar-track{border-radius:6rem}.cards::-webkit-scrollbar-thumb{background:#f39200}.cards::-webkit-scrollbar-track{background:#f39200}@media(max-width:1024px){.pattern_container{flex-direction:row;overflow-x:scroll;padding:.65rem .25rem;display:flex;flex-wrap:nowrap;justify-content:start;align-content:center;flex-basis:340px;scroll-snap-type:x mandatory;scrollbar-color:#f39200 #fff;scrollbar-width:thin}}.blocklink{position:absolute;top:0;left:0;width:100%;height:90%;z-index:1;background-color:#fe0000;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=70);opacity:0}.pattern-card{display:flex;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:calc(calc(100% / 3) - 1.25rem);height:auto;margin:.35rem .5rem .35rem .25rem;align-content:normal;background-image:linear-gradient(#fefefe,#fdfdfd);border-radius:3px;border:1px solid rgba(224,205,193,0.99);padding:1.125rem;scroll-snap-align:start}.pattern-card .card-icon img{height:120px;margin-top:20px}.pattern-card .card-title{margin-bottom:.5rem;flex-grow:1;align-content:center;width:85%}@media(min-width:1024px){.pattern-card{width:auto}.pattern-card:hover{background-image:linear-gradient(#fbf1e9,#fdf1de,#fdf1de,#fbebd4,#fbf1e9);border:1px solid #f39200}.pattern-card .card-title{margin-bottom:.125rem;width:100%;padding:.125rem;margin-top:-0.7rem;margin-left:-2.95rem}.delay-1{animation-delay:0s;animation-duration:0s}.animated{opacity:1;-webkit-animation:none !important;-moz-animation:none !important;-o-animation:none !important;-ms-animation:none !important;animation:none !important}}@media(max-width:1024px){.pattern-card{width:calc(calc(100%) - 0.15rem);flex-shrink:0;margin:.15rem .35rem .15rem 0}.delay-1{animation-delay:.25s;animation-duration:.5s}}.pattern-card .card-title h4{font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:600;color:#1e1e3f;padding:0 .75rem}.pattern-card .card-title h5{font-family:'Open Sans',sans-serif;font-size:1rem;font-weight:450;color:#4a4a77;padding:0 .75rem;line-height:1.25}.pattern-content{display:flex;flex-direction:column;justify-content:space-between;padding:0;height:100%}.card-stretch{flex-grow:1}.pattern-card .card-text{color:#2c3e50;padding-left:.25rem;font-size:.9rem;text-align:justify;text-align-last:left;flex-grow:0;display:flex;flex-direction:column}.pattern-card .card-text p{padding:0 .5rem;margin-top:1.25rem;text-justify:inter-word;word-break:break-word}.pattern-card .card-text p .item-title{color:#1f586f85;font-stretch:extra-condensed;text-transform:uppercase;font-weight:350;font-size:.75rem;display:block}@media(min-width:1024px){.pattern-card .card-text p{padding:0 .5rem;margin-top:.25rem;margin-bottom:.5rem}.pattern-card .card-action{display:none}}@media(max-width:1024px){.pattern-card .card-action{padding-top:.5rem;margin-bottom:.25rem;margin-top:.45rem;display:flex;justify-content:end}}.pattern-list{margin-top:.5rem}.pattern-list .subtitle::after{content:'scroll for more >>';font-size:.65rem;font-weight:650;color:#f39200;text-transform:uppercase;text-shadow:2px 2px 0 #fbfbfb,-2px 2px 0 #fbfbfb,-2px -2px 0 #fbfbfb,2px -2px 0 #fbfbfb;text-align:right;position:absolute;right:0;padding-top:1.5rem}@media(min-width:1024px){.pattern-list .subtitle::after{content:''}}@media(max-width:1024px){.pattern-list .subtitle::after{content:'swipe for more >>'}.pattern-list{margin-top:3.75rem}}.pattern-tags{display:flex;flex-direction:row;align-content:flex-start;flex-wrap:wrap;padding:0 .35rem;max-width:100%;margin-top:.65rem;margin-bottom:.25rem}.summary-content .pattern-tags{justify-content:center;padding:0;gap:.1rem}.summary-content .pattern-tags .pattern-tag{font-size:.65rem}.pattern-tags .pattern-tag{display:block;font-size:.65rem;font-weight:bold;padding:.25rem .3rem;color:#7d4b01;background:#f9d3b265;text-transform:uppercase;border-radius:.25rem;margin:0 .5rem .5rem 0}.pattern-tags .pattern-tag a{color:#7d4b01}.pattern-tags .pattern-tag a:hover{color:#f39200}.summary-content a{color:#363636;border-bottom:1px dashed #f39200}.summary-content a:hover{color:#f39200 !important;border-bottom:1px dashed #363636 !important}.fa-circle-info{font-size:.65rem;color:#34626f;margin-right:.25rem;margin-left:.25rem}.pattern-summary{display:flex;padding:2.125rem;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:calc(calc(100% / 3) - 1.25rem);align-content:normal;background-image:linear-gradient(#fefefe,#fdfdfd);border-radius:6px;border:1px solid rgba(224,205,193,0.99);scroll-snap-align:start;margin:.25rem .25rem 3rem 4.5rem}.pattern-summary .title-wrapper{flex-grow:1;align-content:center;margin-bottom:.5rem;margin-top:.75rem;padding:.25rem}.pattern-summary .spacer-wide{width:80% !important;clear:both;margin:auto auto 1.75rem}.card-image{display:flex;flex-direction:row;justify-content:center;align-content:center;margin-bottom:.5rem;text-align:center}.card-image img{border-radius:1.5rem;border:8px solid #fdf9f7;max-width:90%;width:auto;height:auto}.card-title-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between;align-content:center;gap:.125rem}@media(max-width:1024px){.card-title-wrapper{flex-direction:row}}.card-title-wrapper .card-image{max-width:8rem;max-height:8rem;align-content:center;margin-left:auto;margin-right:auto;clear:both}.summary-wrapper{display:flex;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:100%;align-content:normal;padding:.125rem;margin:auto;clear:both}.card-title-wrapper .card-image img{border-radius:3.75rem;overflow:hidden}.pattern-summary .card-title-wrapper .card-title h4{font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:600;color:#1e1e3f;padding:0 .75rem;text-align:center;justify-content:center}.pattern-summary .summary-title{padding:0 .5rem;align-content:center;color:#1f586f85;font-stretch:extra-condensed;text-transform:uppercase;font-weight:350;font-size:.6rem;display:block;line-height:.95rem;max-width:20%}.pattern-summary .summary-content{font-size:.75rem;padding:0 .5rem;line-height:1.25;text-align:right;max-width:80%;display:flex;flex-direction:column;justify-content:space-between}.pattern-summary .summary-item .summary-formats{font-size:.75rem;padding:0 .5rem;line-height:1.25;text-align:right;max-width:80%;display:flex;justify-content:end;gap:.5rem;flex-direction:row}.info-line{padding:.25rem;text-align:center;font-size:.6rem;font-weight:300;text-transform:uppercase}.summary-item{display:flex;flex-direction:row;justify-content:space-between;margin-top:.125rem;padding:.35rem;z-index:500}.pattern-related{margin-top:3.5rem;font-size:.85rem;border-top:1px dotted #f39200;padding-top:2.75rem}.ammerse{margin-top:.5rem}.fas{padding-left:.15rem}.ammerse-values{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;margin-top:.125rem;padding:.25rem;gap:.25rem;max-width:30rem;margin-left:auto;margin-right:auto}.ammerse-values .ammerse-value{display:block;font-size:.85rem;padding:.5rem;border-radius:.25rem;text-align:center;flex:1 1 0px;align-content:center;max-width:2.25rem}@media(min-width:1024px){.pattern-summary .title-wrapper .divider{display:none}.pattern-summary{display:block;width:100%;margin:0;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-bottom:2px solid #030303;border-radius:0}.pattern-summary .title-wrapper{width:100%;max-width:100%;max-height:9.5rem;height:9.5rem;background:#08141f;padding-top:1.75rem;border-top:2px solid #162431;border-bottom:2px solid #162431;padding-bottom:1.125rem;padding-right:6.5rem;margin-bottom:2.75rem;margin-left:6.5rem;.title{color:#fefefe}.subtitle{color:#f39200;font-weight:300}}.card-image{max-width:12.5rem;max-height:12.5rem;position:absolute;top:6.5rem;left:5.5rem}.summary-wrapper{display:flex;flex-direction:row;width:94%;clear:none;flex-wrap:wrap;justify-content:space-evenly}.pattern-summary .card-image img{border-radius:6.75rem;border:4px solid #08141f;max-width:95%;width:auto;height:auto}.card-title-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-content:center;gap:.125rem;max-height:4.5rem}.card-title-wrapper .card-image{position:relative;left:-2.125rem;top:-2.125rem;align-content:center}.pattern-summary .summary-content{justify-content:start;max-width:100%;padding:.75rem .95rem 1.75rem;border-left:1px solid #f39200;color:#fefefe;font-weight:650;background:#08141f85}.pattern-summary .summary-title{max-width:100%;padding-left:1.75rem;margin-top:-0.75rem;color:#f39200;font-weight:500}.pattern-summary .summary-item:before{border-top:1px solid #f39200;border-left:1px solid #f39200;content:'';display:block;width:1.125rem;height:.5rem;margin-bottom:-0.25rem}.summary-item{flex-direction:column;justify-content:flex-end;padding-left:.35rem;margin:.25rem .75rem 0;a{color:#fefefe;border-bottom:1px dashed #f39200}a:hover{color:#f39200;border-bottom:1px dashed #fefefe}.fa-circle-info{font-size:.65rem;color:#f39200}}.summary-item::after{border-bottom:1px solid #f39200;border-right:4px solid #f39200;border-left:1px solid #f39200;content:'';width:100%;height:.5rem;display:block;background:#08141f85}.pattern-summary .summary-item .summary-formats{display:block;padding:.75rem .95rem 1.75rem;max-width:100%;a{padding:.5rem}}.summary-content .pattern-tags{flex-direction:column;padding:0 .5rem}}@media(max-width:1024px){.pattern-summary{width:100%;padding:.25rem;margin:0;flex-shrink:0;float:none;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-bottom:2px solid #030303;border-radius:0}.pattern-summary .title-wrapper{background:#08141f;padding-bottom:1.5rem;padding-top:1.75rem;margin-top:0;margin-bottom:1.5rem;.title{color:#fefefe}.subtitle{color:#f39200;font-weight:300}}.pattern-summary .divider{height:3px;border-radius:50px;margin-top:2.75rem;margin-bottom:.5rem}.card-title-wrapper .card-image{max-width:5.5rem;max-height:5.5rem;position:relative}.card-image picture{max-width:10.5rem;max-height:10.5rem;position:relative}.pattern-summary .summary-item{margin:1.75rem .25rem .75rem .5rem;padding-left:.5rem;padding-top:.75rem;justify-content:space-between;border-top:1px solid #f39200;border-right:1px solid #f39200;border-radius:0;background:#08141f85;a{color:#fefefe;border-bottom:1px dashed #f39200}.fa-circle-info{font-size:.65rem;color:#f39200}}.pattern-summary .summary-item::before{content:'';width:0;margin-left:-0.5rem;margin-top:-0.75rem;height:.75rem;border-left:6px solid #f39200}.pattern-summary .summary-title{max-width:100%;padding-left:.75rem;color:#f39200;font-weight:500}.pattern-summary .summary-content{justify-content:start;padding:.75rem .95rem 1.75rem;color:#fefefe;font-weight:650;flex-grow:1;max-width:100%;display:block;width:100%}.summary-title{flex-grow:1}.pattern-tags{flex-direction:column;align-content:flex-end}.ammerse-wrapper{flex-direction:column;.summary-content{padding:.75rem .25rem}}}.pattern-summary .ammerse-values{.fas{padding-left:10%}.ammerse-value{background:#08141f}.base{background:#08141f;color:#9e9e9e;border:1px solid #9e9e9e}.down{background:#08141f;color:#cd0c1a;border:1px solid #cd0c1a}.double-down{background:#08141f;color:#cd0c1a;border:1px solid #d50c1a}.up{background:#08141f;color:#0786a6;border:1px solid #0786a6}.double-up{background:#08141f;color:#0786a6;border:1px solid #0786a6}}.pattern-summary .pattern-tags .pattern-tag{padding:.35rem .65rem;text-align:right;color:#fefefe;background:#08141f;a{color:#fefefe}}.base{color:#7d4b0165;border:1px solid #7d4b0165}.up{color:#256f82;border:1px solid #256f8265}.double-up{color:#056780;border:1px solid #256f8265}.down{color:#ab101b;border:1px solid #ab101b65}.double-down{color:#ab101b;border:1px solid #ab101b65}.comments{background:#fefefe;padding-top:1.75rem;margin-top:1.25rem;padding-left:8rem}@media(max-width:1024px){.comments{padding-left:.75rem;padding-right:.75rem}}.related{margin-top:3.75rem;background:#fefefe;padding:.25rem !important;border-radius:6px;border:1px solid rgba(224,205,193,0.99)}.related summary{font-size:1.125rem;padding:.75rem;text-align:center;margin-left:auto;margin-right:auto}.related summary::marker{color:#f39200}.related .related-content{font-size:.875rem;padding:0 2.75rem 1.5rem 2.75rem}@media(max-width:1024px){.related .related-content{padding:0 .5rem 1.5rem .5rem}}@media(max-width:1024px){.table-responsive{display:block;overflow-x:auto;white-space:nowrap}}@media(max-width:1024px){.img-gallery{width:98% !important;max-width:98% !important}}.pattern h2,h3,h4{margin-bottom:.75em}.cutout{border-bottom:2px solid #f39200;border-top:2px solid #f39200;.pattern-summary{border-bottom:4px solid #0b1a25;border-top:4px solid #0b1a25}} \ No newline at end of file +.pattern_container{background-color:rgba(255,248,244,0.55);border-top:2px solid #f39200;margin-bottom:3.5rem;padding:1.125rem .75rem;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:scroll;align-content:center;justify-content:start;flex-basis:340px;scroll-snap-type:x mandatory;scrollbar-color:#f39200 #fff;scrollbar-width:thin}@media(min-width:1024px){.pattern_container{display:grid;grid-gap:.5rem;grid-template-columns:auto auto auto;grid-template-rows:repeat(auto-fill,minmax(16rem,auto));margin-bottom:2.125rem}.pattern-card{min-height:16rem}}.pattern_container::-webkit-scrollbar{height:1.125rem}.pattern_container::-webkit-scrollbar-thumb,.pattern_container::-webkit-scrollbar-track{border-radius:6rem}.cards::-webkit-scrollbar-thumb{background:#f39200}.cards::-webkit-scrollbar-track{background:#f39200}@media(max-width:1024px){.pattern_container{flex-direction:row;overflow-x:scroll;padding:.65rem .25rem;display:flex;flex-wrap:nowrap;justify-content:start;align-content:center;flex-basis:340px;scroll-snap-type:x mandatory;scrollbar-color:#f39200 #fff;scrollbar-width:thin}}.blocklink{position:absolute;top:0;left:0;width:100%;height:90%;z-index:1;background-color:#fe0000;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=70);opacity:0}.pattern-card{display:flex;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:calc(calc(100% / 3) - 1.25rem);height:auto;margin:.35rem .5rem .35rem .25rem;align-content:normal;background-image:linear-gradient(#fefefe,#fdfdfd);border-radius:3px;border:1px solid rgba(224,205,193,0.99);padding:1.125rem;scroll-snap-align:start}.pattern-card .card-icon img{height:120px;margin-top:20px}.pattern-card .card-title{margin-bottom:.5rem;flex-grow:1;align-content:center;width:85%}@media(min-width:1024px){.pattern-card{width:auto}.pattern-card:hover{background-image:linear-gradient(#fbf1e9,#fdf1de,#fdf1de,#fbebd4,#fbf1e9);border:1px solid #f39200}.pattern-card .card-title{margin-bottom:.125rem;width:100%;padding:.125rem;margin-top:-0.7rem;margin-left:-2.95rem}.delay-1{animation-delay:0s;animation-duration:0s}.animated{opacity:1;-webkit-animation:none !important;-moz-animation:none !important;-o-animation:none !important;-ms-animation:none !important;animation:none !important}}@media(max-width:1024px){.pattern-card{width:calc(calc(100%) - 0.15rem);flex-shrink:0;margin:.15rem .35rem .15rem 0}.delay-1{animation-delay:.25s;animation-duration:.5s}}.pattern-card .card-title h4{font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:600;color:#1e1e3f;padding:0 .75rem}.pattern-card .card-title h5{font-family:'Open Sans',sans-serif;font-size:1rem;font-weight:450;color:#4a4a77;padding:0 .75rem;line-height:1.25}.pattern-content{display:flex;flex-direction:column;justify-content:space-between;padding:0;height:100%}.card-stretch{flex-grow:1}.pattern-card .card-text{color:#2c3e50;padding-left:.25rem;font-size:.9rem;text-align:justify;text-align-last:left;flex-grow:0;display:flex;flex-direction:column}.pattern-card .card-text p{padding:0 .5rem;margin-top:1.25rem;text-justify:inter-word;word-break:break-word}.pattern-card .card-text p .item-title{color:#1f586f85;font-stretch:extra-condensed;text-transform:uppercase;font-weight:350;font-size:.75rem;display:block}@media(min-width:1024px){.pattern-card .card-text p{padding:0 .5rem;margin-top:.25rem;margin-bottom:.5rem}.pattern-card .card-action{display:none}}@media(max-width:1024px){.pattern-card .card-action{padding-top:.5rem;margin-bottom:.25rem;margin-top:.45rem;display:flex;justify-content:end}}.pattern-list{margin-top:.5rem}.pattern-list .subtitle::after{content:'scroll for more >>';font-size:.65rem;font-weight:650;color:#f39200;text-transform:uppercase;text-shadow:2px 2px 0 #fbfbfb,-2px 2px 0 #fbfbfb,-2px -2px 0 #fbfbfb,2px -2px 0 #fbfbfb;text-align:right;position:absolute;right:0;padding-top:1.5rem}@media(min-width:1024px){.pattern-list .subtitle::after{content:''}}@media(max-width:1024px){.pattern-list .subtitle::after{content:'swipe for more >>'}.pattern-list{margin-top:3.75rem}}.pattern-tags{display:flex;flex-direction:row;align-content:flex-start;flex-wrap:wrap;padding:0 .35rem;max-width:100%;margin-top:.65rem;margin-bottom:.25rem}.summary-content .pattern-tags{justify-content:center;padding:0;gap:.1rem}.summary-content .pattern-tags .pattern-tag{font-size:.65rem}.pattern-tags .pattern-tag{display:block;font-size:.65rem;font-weight:bold;padding:.25rem .3rem;color:#7d4b01;background:#f9d3b265;text-transform:uppercase;border-radius:.25rem;margin:0 .5rem .5rem 0}.pattern-tags .pattern-tag a{color:#7d4b01}.pattern-tags .pattern-tag a:hover{color:#f39200}.summary-content a{color:#363636;border-bottom:1px dashed #f39200}.summary-content a:hover{color:#f39200 !important;border-bottom:1px dashed #363636 !important}.fa-circle-info{font-size:.65rem;color:#34626f;margin-right:.25rem;margin-left:.25rem}.pattern-summary{display:flex;padding:2.125rem;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:calc(calc(100% / 3) - 1.25rem);align-content:normal;background-image:linear-gradient(#fefefe,#fdfdfd);border-radius:6px;border:1px solid rgba(224,205,193,0.99);scroll-snap-align:start;margin:.25rem .25rem 3rem 4.5rem}.pattern-summary .title-wrapper{flex-grow:1;align-content:center;margin-bottom:.5rem;margin-top:.75rem;padding:.25rem}.pattern-summary .spacer-wide{width:80% !important;clear:both;margin:auto auto 1.75rem}.card-image{display:flex;flex-direction:row;justify-content:center;align-content:center;margin-bottom:.5rem;text-align:center}.card-image img{border-radius:1.5rem;border:8px solid #fdf9f7;max-width:90%;width:auto;height:auto}.card-title-wrapper{display:flex;flex-direction:row-reverse;justify-content:space-between;align-content:center;gap:.125rem}@media(max-width:1024px){.card-title-wrapper{flex-direction:row}}.card-title-wrapper .card-image{max-width:8rem;max-height:8rem;align-content:center;margin-left:auto;margin-right:auto;clear:both}.summary-wrapper{display:flex;flex-shrink:0;flex-flow:column nowrap;justify-content:start;width:100%;align-content:normal;padding:.125rem;margin:auto;clear:both}.card-title-wrapper .card-image img{border-radius:3.75rem;overflow:hidden}.pattern-summary .card-title-wrapper .card-title h4{font-family:'Open Sans',sans-serif;font-size:1.2rem;font-weight:600;color:#1e1e3f;padding:0 .75rem;text-align:center;justify-content:center}.pattern-summary .summary-title{padding:0 .5rem;align-content:center;color:#1f586f85;font-stretch:extra-condensed;text-transform:uppercase;font-weight:350;font-size:.6rem;display:block;line-height:.95rem;max-width:20%}.pattern-summary .summary-content{font-size:.75rem;padding:0 .5rem;line-height:1.25;text-align:right;max-width:80%;display:flex;flex-direction:column;justify-content:space-between}.pattern-summary .summary-item .summary-formats{font-size:.75rem;padding:0 .5rem;line-height:1.25;text-align:right;max-width:80%;display:flex;justify-content:end;gap:.5rem;flex-direction:row}.info-line{padding:.25rem;text-align:center;font-size:.6rem;font-weight:300;text-transform:uppercase}.summary-item{display:flex;flex-direction:row;justify-content:space-between;margin-top:.125rem;padding:.35rem;z-index:500}.pattern-related{margin-top:3.5rem;font-size:.85rem;border-top:1px dotted #f39200;padding-top:2.75rem}.ammerse{margin-top:.5rem}.fas{padding-left:.15rem}.ammerse-values{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;margin-top:.125rem;padding:.25rem;gap:.25rem;max-width:30rem;margin-left:auto;margin-right:auto}.ammerse-values .ammerse-value{display:block;font-size:.85rem;padding:.5rem;border-radius:.25rem;text-align:center;flex:1 1 0px;align-content:center;max-width:2.25rem}@media(min-width:1024px){.pattern-summary .title-wrapper .divider{display:none}.pattern-summary{display:block;width:100%;margin:0;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-bottom:2px solid #030303;border-radius:0}.pattern-summary .title-wrapper{width:100%;max-width:100%;max-height:9.5rem;height:9.5rem;background:#08141f;padding-top:1.75rem;border-top:2px solid #162431;border-bottom:2px solid #162431;padding-bottom:1.125rem;padding-right:6.5rem;margin-bottom:2.75rem;margin-left:6.5rem;.title{color:#fefefe}.subtitle{color:#f39200;font-weight:300}}.card-image{max-width:12.5rem;max-height:12.5rem;position:absolute;top:6.5rem;left:5.5rem}.summary-wrapper{display:flex;flex-direction:row;width:94%;clear:none;flex-wrap:wrap;justify-content:space-evenly}.pattern-summary .card-image img{border-radius:6.75rem;border:4px solid #08141f;max-width:95%;width:auto;height:auto}.card-title-wrapper{display:flex;flex-direction:row;justify-content:space-between;align-content:center;gap:.125rem;max-height:4.5rem}.card-title-wrapper .card-image{position:relative;left:-2.125rem;top:-2.125rem;align-content:center}.pattern-summary .summary-content{justify-content:start;max-width:100%;padding:.75rem .95rem 1.75rem;border-left:1px solid #f39200;color:#fefefe;font-weight:650;background:#08141f85}.pattern-summary .summary-title{max-width:100%;padding-left:1.75rem;margin-top:-0.75rem;color:#f39200;font-weight:500}.pattern-summary .summary-item:before{border-top:1px solid #f39200;border-left:1px solid #f39200;content:'';display:block;width:1.125rem;height:.5rem;margin-bottom:-0.25rem}.summary-item{flex-direction:column;justify-content:flex-end;padding-left:.35rem;margin:.25rem .75rem 0;a{color:#fefefe;border-bottom:1px dashed #f39200}a:hover{color:#f39200;border-bottom:1px dashed #fefefe}.fa-circle-info{font-size:.65rem;color:#f39200}}.summary-item::after{border-bottom:1px solid #f39200;border-right:4px solid #f39200;border-left:1px solid #f39200;content:'';width:100%;height:.5rem;display:block;background:#08141f85}.pattern-summary .summary-item .summary-formats{display:block;padding:.75rem .95rem 1.75rem;max-width:100%;a{padding:.5rem}}.summary-content .pattern-tags{flex-direction:column;padding:0 .5rem}}@media(max-width:1024px){.pattern-summary{width:100%;padding:.25rem;margin:0;flex-shrink:0;float:none;background:linear-gradient(rgba(11,28,42,0.9),rgba(1,13,24,0.95)),url("/images/tiles.webp") repeat;border:0;border-bottom:2px solid #030303;border-radius:0}.pattern-summary .title-wrapper{background:#08141f;padding-bottom:1.5rem;padding-top:1.75rem;margin-top:0;margin-bottom:1.5rem;.title{color:#fefefe}.subtitle{color:#f39200;font-weight:300}}.pattern-summary .divider{height:3px;border-radius:50px;margin-top:2.75rem;margin-bottom:.5rem}.card-title-wrapper .card-image{max-width:5.5rem;max-height:5.5rem;position:relative}.card-image picture{max-width:10.5rem;max-height:10.5rem;position:relative}.pattern-summary .summary-item{margin:1.75rem .25rem .75rem .5rem;padding-left:.5rem;padding-top:.75rem;justify-content:space-between;border-top:1px solid #f39200;border-right:1px solid #f39200;border-radius:0;background:#08141f85;a{color:#fefefe;border-bottom:1px dashed #f39200}.fa-circle-info{font-size:.65rem;color:#f39200}}.pattern-summary .summary-item::before{content:'';width:0;margin-left:-0.5rem;margin-top:-0.75rem;height:.75rem;border-left:6px solid #f39200}.pattern-summary .summary-title{max-width:100%;padding-left:.75rem;color:#f39200;font-weight:500}.pattern-summary .summary-content{justify-content:start;padding:.75rem .95rem 1.75rem;color:#fefefe;font-weight:650;flex-grow:1;max-width:100%;display:block;width:100%}.summary-title{flex-grow:1}.pattern-tags{flex-direction:column;align-content:flex-end}.ammerse-wrapper{flex-direction:column;.summary-content{padding:.75rem .25rem}}}.pattern-summary .ammerse-values{.fas{padding-left:10%}.ammerse-value{background:#08141f}.base{background:#08141f;color:#9e9e9e;border:1px solid #9e9e9e}.down{background:#08141f;color:#cd0c1a;border:1px solid #cd0c1a}.double-down{background:#08141f;color:#cd0c1a;border:1px solid #d50c1a}.up{background:#08141f;color:#0786a6;border:1px solid #0786a6}.double-up{background:#08141f;color:#0786a6;border:1px solid #0786a6}}.pattern-summary .pattern-tags .pattern-tag{padding:.35rem .65rem;text-align:right;color:#fefefe;background:#08141f;a{color:#fefefe}}.base{color:#7d4b0165;border:1px solid #7d4b0165}.up{color:#256f82;border:1px solid #256f8265}.double-up{color:#056780;border:1px solid #256f8265}.down{color:#ab101b;border:1px solid #ab101b65}.double-down{color:#ab101b;border:1px solid #ab101b65}.comments{background:#fefefe;padding-top:1.75rem;margin-top:1.25rem;padding-left:8rem}@media(max-width:1024px){.comments{padding-left:.75rem;padding-right:.75rem}}.related{margin-top:3.75rem;background:#fefefe;padding:.25rem !important;border-radius:6px;border:1px solid rgba(224,205,193,0.99)}.related summary{font-family:d-din,"Gill Sans",'Open Sans',sans-serif;font-size:1.125rem;padding:.75rem;text-align:center;margin-left:auto;margin-right:auto}.related summary::marker{color:#f39200}.related .related-content{font-family:d-din,"Gill Sans",'Open Sans',sans-serif;font-size:.875rem;padding:0 2.75rem 1.5rem 2.75rem}@media(max-width:1024px){.related .related-content{padding:0 .5rem 1.5rem .5rem}}@media(max-width:1024px){.table-responsive{display:block;overflow-x:auto;white-space:nowrap}}@media(max-width:1024px){.img-gallery{width:98% !important;max-width:98% !important}}.pattern h2,h3,h4{margin-bottom:.75em}.cutout{border-bottom:2px solid #f39200;border-top:2px solid #f39200;.pattern-summary{border-bottom:4px solid #0b1a25;border-top:4px solid #0b1a25}} \ No newline at end of file diff --git a/static/css/quotes.css b/static/css/quotes.css index 8fbc63a..287592a 100644 --- a/static/css/quotes.css +++ b/static/css/quotes.css @@ -43,9 +43,10 @@ .groucho { position: relative; - font-family: 'Sanchez', serif; + font-family: 'd-din', 'Sanchez', serif; + font-weight: 250; font-size: 1.3em; - line-height: 1.4em; + line-height: 1.25em; color: #0b121b; } @@ -63,12 +64,11 @@ box-sizing: border-box; } -/* Some generic stuff. Don't worry about it */ -/* Some generic stuff. Don't worry about it */ .content blockquote { margin: 0 0 0 0; + padding: 0.75em 1.5em; background-color: transparent; - font-family: 'Open Sans', sans-serif; + font-family: 'd-din', 'Open Sans', sans-serif; font-size: 1.125rem; text-align: justify-all; font-style: oblique; @@ -76,15 +76,15 @@ } .alert-container { - padding: 1.75rem; - margin: 1.75rem 0 1.75rem 0; + padding: 0.75em 1.5rem; + margin: 1.25rem 0 1.25rem 0; width: auto; display: flex; } .quote { color: #1f2226; - border-left: 5px solid #471a8b !important; + border-left: 4px solid #471a8b !important; } .quote:after { @@ -105,7 +105,7 @@ .warning { color: #1f2226; - border-left: 5px solid #f0ad4e !important; + border-left: 4px solid #f0ad4e !important; } .warning:after { @@ -131,9 +131,23 @@ padding: 0.25rem; } +.info { + color: #123254; + border-left: 4px solid #255787 !important; +} + +.info-title { + color: #255787; + text-transform: uppercase; + font-size: 1.25rem; + font-weight: 650; + margin-right: 0.75rem; + padding: 0.25rem; +} + .tip { color: #1f2226; - border-left: 5px solid #126fbe !important; + border-left: 4px solid #126fbe !important; } .tip-title { diff --git a/static/css/quotes.min.css b/static/css/quotes.min.css index 7611172..9eb3438 100644 --- a/static/css/quotes.min.css +++ b/static/css/quotes.min.css @@ -1 +1 @@ -.small-padding{padding:.5rem !important}.brooks{position:relative;font-family:'Sanchez',serif;font-size:2.4em;line-height:1.5em;font-style:italic}.brooks:before{content:'\201C';position:absolute;top:.25em;left:-0.15em;color:#e6e6e6;font-size:6em;z-index:-1}.ludwig{position:relative;padding-left:1em;border-left:.2em solid #4d91b3;font-family:'Roboto',serif;font-size:2.4em;line-height:1.5em;font-weight:100}.ludwig:before,.ludwig:after{content:'\201C';font-family:'Sanchez';color:#4d91b3}.ludwig:after{content:'\201D'}.groucho{position:relative;font-family:'Sanchez',serif;font-size:1.3em;line-height:1.4em;color:#0b121b}.groucho footer{font-family:'Noto Sans',sans-serif;font-size:.6em;font-weight:700;color:#d1d1d1;text-align:right;margin-top:1.75rem}.groucho footer:before{content:'\2015';box-sizing:border-box}.content blockquote{margin:0;background-color:transparent;font-family:'Open Sans',sans-serif;font-size:1.125rem;text-align:justify-all;font-style:oblique;text-indent:0}.alert-container{padding:1.75rem;margin:1.75rem 0 1.75rem 0;width:auto;display:flex}.quote{color:#1f2226;border-left:5px solid #471a8b !important}.quote:after{content:'\201D';position:absolute;top:.28em;right:0;font-size:6em;font-style:italic;color:#471a8b85;z-index:-1;box-sizing:border-box}.quote footer{color:#190735}.warning{color:#1f2226;border-left:5px solid #f0ad4e !important}.warning:after{content:'!';position:absolute;top:.28em;right:0;font-size:3.35em;font-weight:900;font-family:'Operator Mono','Fira Code',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-style:italic;color:#f0ad4e;z-index:-1;box-sizing:border-box}.warning-title{color:#f0ad4e;text-transform:uppercase;font-size:1.25rem;font-weight:650;margin-right:.75rem;padding:.25rem}.tip{color:#1f2226;border-left:5px solid #126fbe !important}.tip-title{color:#126fbe;text-transform:uppercase;font-size:1.25rem;font-weight:650;margin-right:.75rem;padding:.25rem}.muted{border-left:2px solid #cecece !important;padding:.75rem 1.5rem;text-align:justify;color:#1f3c48;font-style:italic;font-size:1.125rem}.muted-title{color:#898989;text-transform:uppercase;font-style:normal;font-weight:350;margin-right:.75rem}@media(max-width:800px){.alert-container{padding:.75rem;margin:1.125rem 0 1.125rem 0}.content blockquote{padding:.95em .75em;font-size:.95rem;text-align-last:left;text-align:justify;margin-left:-0.45rem}.quote:after{font-size:2.5em;color:#471a8b75}}.whatis{font-size:.85rem !important} \ No newline at end of file +.small-padding{padding:.5rem !important}.brooks{position:relative;font-family:'Sanchez',serif;font-size:2.4em;line-height:1.5em;font-style:italic}.brooks:before{content:'\201C';position:absolute;top:.25em;left:-0.15em;color:#e6e6e6;font-size:6em;z-index:-1}.ludwig{position:relative;padding-left:1em;border-left:.2em solid #4d91b3;font-family:'Roboto',serif;font-size:2.4em;line-height:1.5em;font-weight:100}.ludwig:before,.ludwig:after{content:'\201C';font-family:'Sanchez';color:#4d91b3}.ludwig:after{content:'\201D'}.groucho{position:relative;font-family:'d-din','Sanchez',serif;font-weight:250;font-size:1.3em;line-height:1.25em;color:#0b121b}.groucho footer{font-family:'Noto Sans',sans-serif;font-size:.6em;font-weight:700;color:#d1d1d1;text-align:right;margin-top:1.75rem}.groucho footer:before{content:'\2015';box-sizing:border-box}.content blockquote{margin:0;padding:.75em 1.5em;background-color:transparent;font-family:'d-din','Open Sans',sans-serif;font-size:1.125rem;text-align:justify-all;font-style:oblique;text-indent:0}.alert-container{padding:.75em 1.5rem;margin:1.25rem 0 1.25rem 0;width:auto;display:flex}.quote{color:#1f2226;border-left:4px solid #471a8b !important}.quote:after{content:'\201D';position:absolute;top:.28em;right:0;font-size:6em;font-style:italic;color:#471a8b85;z-index:-1;box-sizing:border-box}.quote footer{color:#190735}.warning{color:#1f2226;border-left:4px solid #f0ad4e !important}.warning:after{content:'!';position:absolute;top:.28em;right:0;font-size:3.35em;font-weight:900;font-family:'Operator Mono','Fira Code',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-style:italic;color:#f0ad4e;z-index:-1;box-sizing:border-box}.warning-title{color:#f0ad4e;text-transform:uppercase;font-size:1.25rem;font-weight:650;margin-right:.75rem;padding:.25rem}.info{color:#123254;border-left:4px solid #255787 !important}.info-title{color:#255787;text-transform:uppercase;font-size:1.25rem;font-weight:650;margin-right:.75rem;padding:.25rem}.tip{color:#1f2226;border-left:4px solid #126fbe !important}.tip-title{color:#126fbe;text-transform:uppercase;font-size:1.25rem;font-weight:650;margin-right:.75rem;padding:.25rem}.muted{border-left:2px solid #cecece !important;padding:.75rem 1.5rem;text-align:justify;color:#1f3c48;font-style:italic;font-size:1.125rem}.muted-title{color:#898989;text-transform:uppercase;font-style:normal;font-weight:350;margin-right:.75rem}@media(max-width:800px){.alert-container{padding:.75rem;margin:1.125rem 0 1.125rem 0}.content blockquote{padding:.95em .75em;font-size:.95rem;text-align-last:left;text-align:justify;margin-left:-0.45rem}.quote:after{font-size:2.5em;color:#471a8b75}}.whatis{font-size:.85rem !important} \ No newline at end of file diff --git a/static/css/toc.css b/static/css/toc.css index 1545349..addb505 100644 --- a/static/css/toc.css +++ b/static/css/toc.css @@ -2,6 +2,10 @@ html { scroll-behavior: smooth; } +.tableOfContentContainer { + font-family: d-din, "Gill Sans", 'Open Sans', sans-serif; +} + @media (max-width: 1024px) { .tableOfContentContainer { display: none; diff --git a/static/css/toc.min.css b/static/css/toc.min.css index 86970e5..340f6fb 100644 --- a/static/css/toc.min.css +++ b/static/css/toc.min.css @@ -1 +1 @@ -html{scroll-behavior:smooth}@media(max-width:1024px){.tableOfContentContainer{display:none}}@media(min-width:1024px){.tableOfContentContainer{font-weight:500;margin-top:1.125rem;padding-top:3.125rem;padding-left:.75rem;padding-bottom:2.75rem;border-left:2px solid #1e75c050;border-radius:.125rem;position:sticky;top:2rem;align-self:start;h2{font-size:.75rem;font-weight:650;margin-bottom:.75rem;color:#1e75c075;width:100%;padding-left:.125rem;text-transform:uppercase}ul,ol{list-style:none;margin:0;padding:0}li{margin-left:1rem}}.tableOfContentContainer a{text-decoration:none;display:block;padding:.125rem .25rem;color:#ccc;transition:all 50ms ease-in-out}.section-nav a{transition:all 75ms ease-in-out}.active>a,.tableOfContentContainer a:hover{border-right:4px solid #f39200;background:linear-gradient(to left,#f3920005 15%,#fefefe 85%);color:#1e75c0}*{box-sizing:border-box}.main{display:grid;grid-template-columns:1fr 14em;max-width:100em;width:90%;margin:0 2.75rem 0 auto;grid-gap:2.75rem}.container{padding-right:4.25rem}.content{padding-top:3.75rem}.section.is-medium.main{padding:1.25rem .125rem 5.25rem 4.5rem}} \ No newline at end of file +html{scroll-behavior:smooth}.tableOfContentContainer{font-family:d-din,"Gill Sans",'Open Sans',sans-serif}@media(max-width:1024px){.tableOfContentContainer{display:none}}@media(min-width:1024px){.tableOfContentContainer{font-weight:500;margin-top:1.125rem;padding-top:3.125rem;padding-left:.75rem;padding-bottom:2.75rem;border-left:2px solid #1e75c050;border-radius:.125rem;position:sticky;top:2rem;align-self:start;h2{font-size:.75rem;font-weight:650;margin-bottom:.75rem;color:#1e75c075;width:100%;padding-left:.125rem;text-transform:uppercase}ul,ol{list-style:none;margin:0;padding:0}li{margin-left:1rem}}.tableOfContentContainer a{text-decoration:none;display:block;padding:.125rem .25rem;color:#ccc;transition:all 50ms ease-in-out}.section-nav a{transition:all 75ms ease-in-out}.active>a,.tableOfContentContainer a:hover{border-right:4px solid #f39200;background:linear-gradient(to left,#f3920005 15%,#fefefe 85%);color:#1e75c0}*{box-sizing:border-box}.main{display:grid;grid-template-columns:1fr 14em;max-width:100em;width:90%;margin:0 2.75rem 0 auto;grid-gap:2.75rem}.container{padding-right:4.25rem}.content{padding-top:3.75rem}.section.is-medium.main{padding:1.25rem .125rem 5.25rem 4.5rem}} \ No newline at end of file diff --git a/static/fonts/d-din/A.java b/static/fonts/d-din/A.java new file mode 100644 index 0000000..9516d27 --- /dev/null +++ b/static/fonts/d-din/A.java @@ -0,0 +1,9 @@ +/home/stijnd/Downloads/d-din/D-DIN.otf +/home/stijnd/Downloads/d-din/D-DIN-Bold.otf +/home/stijnd/Downloads/d-din/D-DINCondensed.otf +/home/stijnd/Downloads/d-din/D-DINCondensed-Bold.otf +/home/stijnd/Downloads/d-din/D-DINExp.otf +/home/stijnd/Downloads/d-din/D-DINExp-Bold.otf +/home/stijnd/Downloads/d-din/D-DINExp-Italic.otf +/home/stijnd/Downloads/d-din/D-DIN-Italic.otf +/home/stijnd/Downloads/d-din/SIL Open Font License.txt \ No newline at end of file diff --git a/static/images/diagramming/chickens_and_eggs.svg b/static/images/diagramming/chickens_and_eggs.svg index 76dd124..c58387c 100644 --- a/static/images/diagramming/chickens_and_eggs.svg +++ b/static/images/diagramming/chickens_and_eggs.svg @@ -1 +1 @@ -Causal Loop Diagram: Chickens and EggsCausal Loop Diagram: Chickens and Eggs  # Eggs   # Chickens    \ No newline at end of file +Causal Loop Diagram: Chickens, Eggs, and Road CrossingsCausal Loop Diagram: Chickens, Eggs, and Road Crossings  # Eggs   # Chickens    \ No newline at end of file diff --git a/static/images/diagramming/chickens_and_roads.svg b/static/images/diagramming/chickens_and_roads.svg index 423bf35..eacb8d7 100644 --- a/static/images/diagramming/chickens_and_roads.svg +++ b/static/images/diagramming/chickens_and_roads.svg @@ -1 +1 @@ -Causal Loop Diagram: Chickens crossing the roadCausal Loop Diagram: Chickens crossing the road  # Chickens   # Road Crossings  O \ No newline at end of file +Causal Loop Diagram: Chickens, Eggs, and Road CrossingsCausal Loop Diagram: Chickens, Eggs, and Road Crossings  # Chickens   # Road Crossings  O \ No newline at end of file diff --git a/static/images/diagramming/chickens_eggs_roads.svg b/static/images/diagramming/chickens_eggs_roads.svg index 037d9fd..cbf8b30 100644 --- a/static/images/diagramming/chickens_eggs_roads.svg +++ b/static/images/diagramming/chickens_eggs_roads.svg @@ -1 +1 @@ -Causal Loop Diagram: Chickens, Eggs, and Road CrossingsCausal Loop Diagram: Chickens, Eggs, and Road Crossings  # Eggs   # Chickens   # Road Crossings    O \ No newline at end of file +Causal Loop Diagram: Chickens, Eggs, and Road CrossingsCausal Loop Diagram: Chickens, Eggs, and Road Crossings  # Eggs   # Chickens   # Road Crossings    O \ No newline at end of file diff --git a/static/images/favicon.ico b/static/images/favicon.ico index 661986d..7252257 100644 Binary files a/static/images/favicon.ico and b/static/images/favicon.ico differ diff --git a/static/images/logos/LOGO_BASE_SMALL.webp b/static/images/logos/LOGO_BASE_SMALL.webp new file mode 100644 index 0000000..8cdac5e Binary files /dev/null and b/static/images/logos/LOGO_BASE_SMALL.webp differ diff --git a/static/images/logos/ppp_logo.png b/static/images/logos/ppp_logo.png deleted file mode 100644 index 6503ed9..0000000 Binary files a/static/images/logos/ppp_logo.png and /dev/null differ diff --git a/static/images/logos/ppp_spinoff.png b/static/images/logos/ppp_spinoff.png index 6f52ffb..0a1b6bb 100644 Binary files a/static/images/logos/ppp_spinoff.png and b/static/images/logos/ppp_spinoff.png differ