mirror of
https://github.com/by-jp/www.byjp.me.git
synced 2025-08-09 01:35:56 +01:00
Improve Political compass
- Ensures SVGs in "figure" shortcodes are imported, not referenced (so `currentColor` can work) - Ensures SVGs aren't undersized when in the document - Replaces the Inward compass with my own representation of it that works in dark & light modes
This commit is contained in:
JP Hastings-Spital
parent
57cac8378f
commit
dc9d1021cf
6 changed files with 56 additions and 11 deletions
|
|
@ -232,10 +232,13 @@ article, section {
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
video, img {
|
||||
video, img, svg {
|
||||
max-width: 100%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.postcard {
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-content svg, &-info svg {
|
||||
.reference-to svg, &-info svg {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
vertical-align: -0.125em;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,36 @@
|
|||
<svg viewBox="0 0 141.818 141.818" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>text {font-family: sans-serif; letter-spacing: 0;}</style>
|
||||
<g transform="translate(-29.24 -59.585)">
|
||||
<g>
|
||||
<path d="M113.09-28.543v50h.018a50 50 0 0 1 14.626-35.355A50 50 0 0 1 163.09-28.54v-.002z" fill="#3dd934" fill-opacity=".75" transform="rotate(45)"/>
|
||||
<path d="M127.734-13.898a50 50 0 0 0-14.61 35.355h37.805a12.45 12.45 0 0 1 3.638-8.803 12.45 12.45 0 0 1 8.522-3.642v-37.55a50 50 0 0 0-35.355 14.64z" fill="#3dd934" fill-opacity=".5" transform="rotate(45)"/>
|
||||
<path d="M163.09 71.423v.035h50v-50h-.035a50 50 0 0 1-14.61 35.355 50 50 0 0 1-35.356 14.61z" fill="#d9bc34" fill-opacity=".75" transform="rotate(45)"/>
|
||||
<path d="M163.09 33.899v37.524a50 50 0 0 0 35.355-14.61 50 50 0 0 0 14.61-35.356H175.81a12.45 12.45 0 0 1-3.638 8.804 12.45 12.45 0 0 1-9.084 3.638z" fill="#d9bc34" fill-opacity=".5" transform="rotate(45)"/>
|
||||
<path d="M113.09 21.457v50h50v-.018a50 50 0 0 1-35.356-14.626 50 50 0 0 1-14.626-35.356Z" fill="#d93534" fill-opacity=".75" transform="rotate(45)"/>
|
||||
<path d="M113.124 21.457a50.002 50.002 0 0 0 14.61 35.356 50 50 0 0 0 35.355 14.61V33.899a12.284 12.284 0 0 1-.235-.014 12.441 12.441 0 0 1-.47-.029 12.45 12.45 0 0 1-1.155-.14 12.451 12.451 0 0 1-.35-.073 12.452 12.452 0 0 1-.972-.24 12.452 12.452 0 0 1-.392-.116 12.45 12.45 0 0 1-1.14-.433c-.107-.049-.214-.1-.32-.151a12.45 12.45 0 0 1-.947-.497 12.357 12.357 0 0 1-.244-.14 12.451 12.451 0 0 1-1.308-.929 12.45 12.45 0 0 1-.99-.876 12.45 12.45 0 0 1-.88-.993l-.182-.226a12.45 12.45 0 0 1-.884-1.326 12.448 12.448 0 0 1-.561-1.069 12.858 12.858 0 0 1-.123-.293c-.131-.308-.25-.622-.356-.94a12.4 12.4 0 0 1-.131-.394 12.449 12.449 0 0 1-.357-1.578 12.44 12.44 0 0 1-.13-1.074l-.003-.023c-.008-.16-.014-.32-.016-.48a13.22 13.22 0 0 1-.015-.408zm37.805 0h.014-.014zm12.16 12.442c-100.28-12.442-100.28-12.442 0 0z" fill="#d93534" fill-opacity=".5" transform="rotate(45)"/>
|
||||
<path d="M163.09-28.543v.002a50 50 0 0 1 35.355 14.643 50 50 0 0 1 14.626 35.355h.019v-50z" fill="#3451d9" fill-opacity=".75" transform="rotate(45)"/>
|
||||
<path d="M163.09-28.538v37.55a12.45 12.45 0 0 1 9.083 3.642 12.45 12.45 0 0 1 3.638 8.806h37.244a50 50 0 0 0-14.61-35.358 50 50 0 0 0-35.356-14.64Z" fill="#3451d9" fill-opacity=".5" transform="rotate(45)"/>
|
||||
</g>
|
||||
<circle cx="100.361" cy="130.758" fill="gray" fill-opacity=".5" r="12.45" stroke="currentColor" stroke-width=".397"/>
|
||||
<g fill="currentColor" font-size="4.4" stroke-width=".25" text-anchor="middle">
|
||||
<text x="100.361" y="132.28">Centrist</text>
|
||||
<text x="100.361" y="101.91">Nationalist</text>
|
||||
<text x="131" y="132.28">Corporatist</text>
|
||||
<text x="100.361" y="162.8">Liberal</text>
|
||||
<text x="69.72" y="132.28">Socialist</text>
|
||||
<text transform="rotate(45)" x="163.37" y="-38.572">Survive</text>
|
||||
<text transform="rotate(45)" x="163.643" y="84.638">Thrive</text>
|
||||
<text transform="rotate(-45)" x="-21.367" y="103.502">Obliged</text>
|
||||
<text transform="rotate(-45)" x="-21.357" y="226.782">Atomised</text>
|
||||
</g>
|
||||
<g font-size="4.4" stroke-width=".1" text-anchor="middle">
|
||||
<text fill="currentColor" x="-57.333645" y="117.79646" transform="rotate(-45)">Communist</text>
|
||||
<text x="100.361" y="189.425">Anarchist</text>
|
||||
<text fill="currentColor" x="201.06932" y="-23.498301" transform="rotate(45)">Feudalist</text>
|
||||
<text x="100.361" y="72.663269">Fascist</text>
|
||||
</g>
|
||||
<circle cx="100.192" cy="130.469" fill="none" r="49.802" stroke="currentColor" stroke-width=".397"/>
|
||||
<path d="m100.149 59.783 70.71 70.71-70.71 70.711-70.71-70.71z" fill="none" stroke="currentColor" stroke-width=".397"/>
|
||||
<path fill="currentColor" d="m59.113 89.457.223.447c.344.687.69 1.749.69 2.4v.403l.285-.283s.187-.189.353-.45a1.19 1.19 0 0 0 .163-.448l30.54 30.54a.25.25 0 0 0 .353 0 .25.25 0 0 0 0-.353l-30.54-30.54c.165-.027.32-.081.449-.163.26-.166.45-.354.45-.354l.284-.285h-.402c-.651 0-1.713-.346-2.4-.69zM91.549 139.24a.25.25 0 0 0-.176.074L60.827 169.86a1.193 1.193 0 0 0-.163-.45c-.166-.26-.353-.447-.353-.447l-.286-.285v.402c0 .652-.345 1.713-.69 2.4l-.222.447.448-.224c.687-.343 1.749-.69 2.4-.69h.402l-.285-.282s-.188-.19-.45-.356a1.178 1.178 0 0 0-.447-.161l30.546-30.546a.25.25 0 0 0 0-.354.25.25 0 0 0-.178-.074zM141.582 89.457l-.447.225c-.688.343-1.75.69-2.4.69h-.403l.285.284s.187.188.447.354c.129.082.285.136.451.163l-30.542 30.54a.25.25 0 0 0 0 .353.25.25 0 0 0 .353 0l30.542-30.54c.027.165.082.32.163.449.166.26.354.449.354.449l.285.283v-.403c0-.651.346-1.713.69-2.4zM109.153 139.246a.25.25 0 0 0-.178.074.25.25 0 0 0 0 .354l30.54 30.54c-.166.025-.322.08-.45.161-.261.166-.448.356-.448.356l-.285.283h.402c.652 0 1.713.346 2.4.69l.448.223-.223-.447c-.343-.687-.689-1.748-.689-2.4v-.402l-.285.285s-.188.187-.354.447a1.193 1.193 0 0 0-.163.45l-30.54-30.54a.25.25 0 0 0-.175-.074z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -14,7 +14,9 @@ references:
|
|||
to meme-fodder. This popularised version of …
|
||||
summary: A friend explores some changes and additions to their favourite political compass.
|
||||
---
|
||||
A friend explores some changes and additions to their favourite political compass. Changes I _really_ like! I certainly plan on spending some time thinking about a 3D version that popped itself into my head as I was reading. (Because everyone needs their own version of the political compass 😅)
|
||||
A friend explores some changes and additions to their favourite political compass. Changes I _really_ like! I particularly appreciate that it shows (what I see as) real and understandable motivation for each of the directions and places upon it; it's relatable to consider someone operating in both a "thriving" or "surviving" mindset, similarly I can understand an "obliged" mindset as much as I can an "atomised" one. I firmly believe that _good_ political outcomes derive from being able to _understand_ those who disagree with you, and this helps!
|
||||
|
||||
I certainly plan on spending some time thinking about a 3D version that popped itself into my head as I was reading. (Because everyone needs their own version of the political compass 😅)
|
||||
|
||||
### Highlights
|
||||
|
||||
|
|
@ -46,7 +48,7 @@ This seems like an excellent choice.
|
|||
|
||||
> My take on the political compass therefore looks like this:
|
||||
|
||||
{{< figure alt="A square balanced on its border with four quadrants separated again into three rings from centre outwards. Centrist sits at the centre, with Nationalist above, and Fascist at the upward extreme. To the right beyond centrist is Corporatist then Feudalist. Downwards has Liberal then Anarchist. Finally leftward is Socialist then Communist." caption="Atlas Pragmatica’s political compass (CC BY-SA 4.0)" src="./atlas-pragmatica-inward-compass.png" >}}
|
||||
{{< figure alt="A square balanced on its border with four quadrants separated again into three rings from centre outwards. Centrist sits at the centre, with Nationalist above, and Fascist at the upward extreme. To the right beyond centrist is Corporatist then Feudalist. Downwards has Liberal then Anarchist. Finally leftward is Socialist then Communist." caption="My own (SVG) replica of Atlas Pragmatica’s “inward” political compass. Yes, it works in both dark and light modes and yes, it took much longer to make than I'd care to admit… (CC BY-SA 4.0)" src="./atlas-pragmatica-inward-compass.svg" >}}
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@
|
|||
{{- if .Get "link" -}}
|
||||
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
|
||||
{{- end }}
|
||||
{{ if eq (path.Ext (.Get "src")) ".svg" }}
|
||||
{{ readFile (path.Join $.Page.File.Dir (.Get "src")) | safeHTML }}
|
||||
{{ else }}
|
||||
<img src="{{ path.Join $.Page.RelPermalink (.Get "src") }}"
|
||||
{{- if or (.Get "alt") (.Get "caption") }}
|
||||
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
|
||||
{{- end -}}
|
||||
{{- with .Get "width" }} width="{{ . }}"{{ end -}}
|
||||
{{- with .Get "height" }} height="{{ . }}"{{ end -}}
|
||||
/> <!-- Closing img tag -->
|
||||
/>
|
||||
{{ end }}
|
||||
{{- if .Get "link" }}</a>{{ end -}}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
|
||||
<figcaption>
|
||||
|
|
|
|||
Loading…
Reference in a new issue