eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Tweak the railroad js and CSS files

Browse source
This commit is contained in:
Eryn Wells 2022-08-20 17:30:00 -07:00
parent 8478b049f0
commit 2c919735c3
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/scripts/railroad.js
View file

@ -23,7 +23,7 @@ export const Options = {
VS: 8, // minimum vertical separation between things. For a 3px stroke, must be at least 4 VS: 8, // minimum vertical separation between things. For a 3px stroke, must be at least 4
AR: 10, // radius of arcs AR: 10, // radius of arcs
DIAGRAM_CLASS: 'railroad-diagram', // class to put on the root <svg> DIAGRAM_CLASS: 'railroad-diagram', // class to put on the root <svg>
STROKE_ODD_PIXEL_LENGTH: true, // is the stroke width an odd (1px, 3px, etc) pixel length? STROKE_ODD_PIXEL_LENGTH: false, // is the stroke width an odd (1px, 3px, etc) pixel length?
INTERNAL_ALIGNMENT: 'center', // how to align items when they have extra space. left/right/center INTERNAL_ALIGNMENT: 'center', // how to align items when they have extra space. left/right/center
CHAR_WIDTH: 8.5, // width of each monospace character. play until you find the right value for your font CHAR_WIDTH: 8.5, // width of each monospace character. play until you find the right value for your font
COMMENT_CHAR_WIDTH: 7, // comments are in smaller text by default COMMENT_CHAR_WIDTH: 7, // comments are in smaller text by default

12
static/styles/railroad.css
View file

@ -11,45 +11,55 @@
svg.railroad-diagram path { svg.railroad-diagram path {
stroke-width: 2; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--body-foreground-color);
fill: var(--body-foreground-color); fill: none;
} }
svg.railroad-diagram text { svg.railroad-diagram text {
font-family: var(--monospace-font-family); font-family: var(--monospace-font-family);
text-anchor: middle; text-anchor: middle;
white-space: pre; white-space: pre;
color: var(--body-foreground-color); color: var(--body-foreground-color);
} }
svg.railroad-diagram text.diagram-text { svg.railroad-diagram text.diagram-text {
font-size: 12px; font-size: 12px;
} }
svg.railroad-diagram text.diagram-arrow { svg.railroad-diagram text.diagram-arrow {
font-size: 16px; font-size: 16px;
} }
svg.railroad-diagram text.label { svg.railroad-diagram text.label {
text-anchor: start; text-anchor: start;
} }
svg.railroad-diagram text.comment { svg.railroad-diagram text.comment {
font: italic 12px monospace; font: italic 12px monospace;
} }
svg.railroad-diagram g.non-terminal text { svg.railroad-diagram g.non-terminal text {
/*font-style: italic;*/ /*font-style: italic;*/
} }
svg.railroad-diagram rect { svg.railroad-diagram rect {
stroke-width: 2; stroke-width: 2;
stroke: var(--body-foreground-color); stroke: var(--body-foreground-color);
fill: var(--rect-fill); fill: var(--rect-fill);
} }
svg.railroad-diagram rect.group-box { svg.railroad-diagram rect.group-box {
stroke: gray; stroke: gray;
stroke-dasharray: 10 5; stroke-dasharray: 10 5;
fill: none; fill: none;
} }
svg.railroad-diagram path.diagram-text { svg.railroad-diagram path.diagram-text {
stroke-width: 3; stroke-width: 3;
stroke: var(--body-foreground-color); stroke: var(--body-foreground-color);
fill: var(--body-background-color); fill: var(--body-background-color);
cursor: help; cursor: help;
} }
svg.railroad-diagram g.diagram-text:hover path.diagram-text { svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eee; fill: #eee;
} }