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

65 lines
1.2 KiB
CSS
Raw Normal View History

Include Railroad.js files in <head>
2022-08-18 20:18:05 -07:00
:root {
Define all color vars as triples, and create semantic colors that convert the triples to rgb colors
2022-10-03 19:54:14 -07:00
--rect-fill: rgba(var(--mid-blue), 0.1);
Include Railroad.js files in <head>
2022-08-18 20:18:05 -07:00
}
@media (prefers-color-scheme: dark) {
:root {
Define all color vars as triples, and create semantic colors that convert the triples to rgb colors
2022-10-03 19:54:14 -07:00
--rect-fill: rgb(var(--mid-blue), 0.9);
Include Railroad.js files in <head>
2022-08-18 20:18:05 -07:00
}
}
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram path {
stroke-width: 2;
Move all the root styles to fragment files Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay!
2023-05-19 17:05:49 -07:00
stroke: var(--color);
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
fill: none;
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram text {
Create a monospace font family stack
2022-10-03 19:54:55 -07:00
font-family: var(--font-family-monospace);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
text-anchor: middle;
white-space: pre;
Move all the root styles to fragment files Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay!
2023-05-19 17:05:49 -07:00
fill: var(--color);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram text.diagram-text {
Create a monospace font family stack
2022-10-03 19:54:55 -07:00
font-size: 11px;
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram text.diagram-arrow {
font-size: 16px;
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram text.label {
text-anchor: start;
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram text.comment {
Create a monospace font family stack
2022-10-03 19:54:55 -07:00
font: italic 12px var(--font-family-monospace);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram g.non-terminal text {
/*font-style: italic;*/
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram rect {
stroke-width: 2;
Move all the root styles to fragment files Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay!
2023-05-19 17:05:49 -07:00
stroke: var(--color);
Include Railroad.js files in <head>
2022-08-18 20:18:05 -07:00
fill: var(--rect-fill);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram rect.group-box {
stroke: gray;
stroke-dasharray: 10 5;
fill: none;
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram path.diagram-text {
Define all color vars as triples, and create semantic colors that convert the triples to rgb colors
2022-10-03 19:54:14 -07:00
stroke-width: 2;
Move all the root styles to fragment files Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay!
2023-05-19 17:05:49 -07:00
stroke: var(--color);
Use JS to show/hide railroad diagrams based on page width (thanks @hober!)
2022-10-21 11:06:13 -07:00
fill: var(--html-background-color);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
cursor: help;
}
Tweak the railroad js and CSS files
2022-08-20 17:30:00 -07:00
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
Define all color vars as triples, and create semantic colors that convert the triples to rgb colors
2022-10-03 19:54:14 -07:00
fill: var(--rect-fill);
Add Tab's railroad.js to the blog - Include railroad.js from http://tabatkins.github.io/railroad-diagrams/ - Include railroad.css from the same, and tweak it to match my style a bit better - Add a railroad-utils.js file that declares a railroadDiagram function. It takes a builder function and an element ID, calls the builder and adds the resulting diagram to the element with the given ID. - Add a railroad_diagram shortcode that wraps that all up so you can write a diagram inline with a post. - Add script includes if the railroad_diagram shortcode is used. The shortcut sets a variable in the page's .Scratch that is looked up in the head partial template to determine whether to include these scripts.
2022-08-16 09:06:30 -07:00
}
Reference in a new issue Copy permalink