chore: Added styling for jargon gatsby plugin

packages/css-theme/README.md

@@ -1,7 +1,7 @@
 <p align="center">
-<a title="Go to freesewing.org" href="https://freesewing.org/"><img src="https://freesewing.org/img/logo/black.svg" align="center" width="150px" alt="Freesewing logo"/></a>
+<a title="Go to freesewing.org" href="https://freesewing.org/"><img src="https://freesewing.org/logo.svg" align="center" width="150px" alt="FreeSewing logo"/></a>
 <br>
-<a href="https://freesewing.org/">FreeSewing v2</a>
+<a href="https://freesewing.org/">FreeSewing</a>
 </p>
 <p align="center">An open source platform for made-to-measure sewing patterns</p>
 <p align='center'><a
@@ -56,19 +56,19 @@ A CSS theme for FreeSewing web UIs
 
 Where the world of makers and developers collide, that's where you'll find FreeSewing.
 
-Our [core library](https://freesewing.dev/en/freesewing) is a *batteries-included* toolbox
+Our [core library](https://freesewing.dev/) is a *batteries-included* toolbox
 for parametric design of sewing patterns. It's a modular system (check our list
-of [plugins](https://freesewing.dev/en/plugins) and getting started is as simple as:
+of [plugins](https://freesewing.dev/plugins) and getting started is as simple as:
 
 ```bash
 npm init freesewing-pattern
 ```
 
-The [getting started] section on [freesewing.dev](https://freesewing.dev/) is a good
+The [getting started](https://freesewing.dev/start) section on [freesewing.dev](https://freesewing.dev/) is a good
 entrypoint to our documentation, but you'll find a lot more there, including
-our [API documentation](https://freesewing.dev/en/freesewing/api),
+our [API reference](https://freesewing.dev/api),
-as well as [examples](https://freesewing.dev/en/freesewing/examples),
+as well as [our turorial](https://freesewing.dev/tutorial),
-and [best practices](https://freesewing.dev/en/do).
+and [best practices](https://freesewing.dev/do).
 
 If you're a maker, checkout [freesewing.org](https://freesewing/) where you can generate
 our sewing patterns adapted to your measurements.

packages/css-theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freesewing/css-theme",
-  "version": "2.1.0",
+  "version": "2.1.1-beta.0",
   "description": "A CSS theme for FreeSewing web UIs",
   "author": "Joost De Cock <joost@decock.org> (https://github.com/joostdecock)",
   "homepage": "https://freesewing.org/",
@@ -39,7 +39,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "next"
   },
   "engines": {
     "node": ">=8.0.0",

packages/css-theme/src/_elements.scss

@@ -6,3 +6,4 @@
 @import "elements/figure";
 @import "elements/table";
 @import "elements/button";
+@import "elements/jargon";

packages/css-theme/src/elements/_jargon.scss

@@ -0,0 +1,51 @@
+.jargon-term {
+  text-decoration: underline dashed $fc-link-light;
+}
+.jargon-term::after {
+  content: "?";
+  font-weight: bold;
+  display: inline-block;
+  transform: translate(0, -0.5em);
+  font-size: 75%;
+  color: $fc-link-light;
+  margin-left: 3px;
+}
+
+.jargon-term:hover {
+  position: relative;
+  text-decoration: none;
+  cursor: help;
+}
+.jargon-term .jargon-info {
+  display: none
+}
+.jargon-term:hover .jargon-info {
+  display: block;
+  position: absolute;
+  top: 1.5em;
+  left: 0;
+  background: $fc-bg-light;
+  color: $fc-text-light;
+  border: 1px solid #DCDCDC;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 90%;
+  min-width: 250px;
+  max-width: 450px;
+  z-index: 1;
+}
+.theme-wrapper.dark {
+  .jargon-term {
+    text-decoration: underline dashed $fc-link-dark;
+  }
+  .jargon-term::after {
+    color: $fc-link-dark;
+  }
+  .jargon-term:hover .jargon-info {
+    background: $fc-bg-dark;
+    color: $fc-text-dark;
+    border: 1px solid #5A5A5A;
+  }
+}
+
+