VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Added styling for jargon gatsby plugin

Browse source
This commit is contained in:
Joost De Cock 2019-10-12 15:39:17 +02:00
parent 9e6b4481b6
commit bc46cc9f1b
4 changed files with 62 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/css-theme/README.md
View file

@ -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),
as well as [examples](https://freesewing.dev/en/freesewing/examples),
and [best practices](https://freesewing.dev/en/do).
our [API reference](https://freesewing.dev/api),
as well as [our turorial](https://freesewing.dev/tutorial),
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.

4
packages/css-theme/package.json
View file

@ -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",

1
packages/css-theme/src/_elements.scss
View file

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

51
packages/css-theme/src/elements/_jargon.scss Normal file
View file

@ -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;
}
}