From f07ca6591d843e89c6fd490c23e2478ddd13148f Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Sun, 13 Feb 2022 15:56:38 -0800 Subject: [PATCH] Use CSS custom properties in stylesheets --- css/_defs.scss | 15 ++++++++---- css/blue.scss | 12 +++++----- css/gray.scss | 12 +++++----- css/green.scss | 12 +++++----- css/{_main.scss => main.scss} | 0 css/red.scss | 12 +++++----- index.source.html | 45 ++++++++++++++++++----------------- 7 files changed, 57 insertions(+), 51 deletions(-) rename css/{_main.scss => main.scss} (100%) diff --git a/css/_defs.scss b/css/_defs.scss index dc0b667..f64f7b1 100644 --- a/css/_defs.scss +++ b/css/_defs.scss @@ -18,6 +18,11 @@ src: url("/fonts/VERTRG_.ttf") format('truetype'); } +$background-color: var(--background-color); +$dark-background-color: var(dark-background-color); +$heading-color: var(--heading-color); +$other-background-color: var(--other-background-color); + $text-red: #9e032a; $black: black; $white: white; @@ -287,7 +292,7 @@ $shadow-color: hsla(0, 0%, 0%, 0.25); position: absolute; top: 0; opacity: 0; - + @if $position == outside { left: 100%; margin-left: 0.5em; @@ -341,20 +346,20 @@ $shadow-color: hsla(0, 0%, 0%, 0.25); h3 { @include subheading; } - + h4 { @include subsubheading; } - + p { margin-top: 1rem; margin-bottom: 1rem; } - + em { font-style: italic; } - + a { display: inline; color: $blue; diff --git a/css/blue.scss b/css/blue.scss index ae1b686..aa9700d 100644 --- a/css/blue.scss +++ b/css/blue.scss @@ -1,6 +1,6 @@ -$background-color: hsl(210, 60%, 40%); -$dark-background-color: hsl(210, 100%, 15%); -$heading-color: hsl(30, 45%, 80%); -$other-background-color: hsl(0, 70%, 35%); - -@import '_main'; +:root { + --background-color: hsl(210, 60%, 40%); + --dark-background-color: hsl(210, 100%, 15%); + --heading-color: hsl(30, 45%, 80%); + --other-background-color: hsl(0, 70%, 35%); +} diff --git a/css/gray.scss b/css/gray.scss index 59040c8..6f30873 100644 --- a/css/gray.scss +++ b/css/gray.scss @@ -1,6 +1,6 @@ -$background-color: hsl(0, 0%, 25%); -$dark-background-color: hsl(0, 0%, 10%); -$heading-color: hsl(30, 45%, 80%); -$other-background-color: hsl(0, 70%, 35%); - -@import '_main'; +:root { + --background-color: hsl(0, 0%, 25%); + --dark-background-color: hsl(0, 0%, 10%); + --heading-color: hsl(30, 45%, 80%); + --other-background-color: hsl(0, 70%, 35%); +} diff --git a/css/green.scss b/css/green.scss index 0f55703..620e879 100644 --- a/css/green.scss +++ b/css/green.scss @@ -1,6 +1,6 @@ -$background-color: hsl(150, 60%, 30%); -$dark-background-color: hsl(150, 100%, 10%); -$heading-color: hsl(30, 45%, 80%); -$other-background-color: hsl(0, 70%, 35%); - -@import '_main'; +:root { + --background-color: hsl(150, 60%, 30%); + --dark-background-color: hsl(150, 100%, 10%); + --heading-color: hsl(30, 45%, 80%); + --other-background-color: hsl(0, 70%, 35%); +} diff --git a/css/_main.scss b/css/main.scss similarity index 100% rename from css/_main.scss rename to css/main.scss diff --git a/css/red.scss b/css/red.scss index 09f5c4b..94b7d05 100644 --- a/css/red.scss +++ b/css/red.scss @@ -1,6 +1,6 @@ -$background-color: hsl(0, 70%, 35%); -$dark-background-color: hsl(0, 100%, 15%); -$heading-color: hsl(35, 50%, 70%); -$other-background-color: hsl(150, 60%, 30%); - -@import '_main'; +:root { + --background-color: hsl(0, 70%, 35%); + --dark-background-color: hsl(0, 100%, 15%); + --heading-color: hsl(35, 50%, 70%); + --other-background-color: hsl(150, 60%, 30%); +} diff --git a/index.source.html b/index.source.html index 13a3b84..cbdc1c4 100644 --- a/index.source.html +++ b/index.source.html @@ -9,6 +9,7 @@ + @@ -168,65 +169,65 @@

Add playset

Help

- +

Playsets

- +

Adding a playset

If you have a Fiasco playset PDF, you can use it in Fiascomputer! To add a playset, press the Add Playset button in either the menu or the playset listing.

Hint: You can add more than one playset at a time.

Note: Not all playset PDFs are guaranteed to work in Fiascomputer. For best results, use one of the playsets distributed by the publishers of Fiasco, Bully Pulpit Games. Many other playsets can be found at FiascoPlaysets.com.

- +

Editing a playset

If you want to add your own touch to a playset, or if the playset was not correctly imported by Fiascomputer, you can edit it. To do so, open the setup page and click any category or element to select it. In the table that appears, hover over the item that you want to edit and click the pencil that appears. You can also a playset's title in this way.

- +

Creating a playset

Fiascomputer does not currently offer a way of creating entirely new playsets. That being said, you can still add an existing playset and then edit the items in it (as described above) to get something almost as good. (Just be sure not to save your only copy of a playset in Fiascomputer, as mentioned below.)

- +

Deleting a playset

To delete a playset, select the playset in the playset listing and then press the Delete Playset button. You will return to the playset listing and the playset will be grayed out to show that it will be deleted. If you select the playset again, you can recover the playset. If you don't, the playset is permanently deleted when you close Fiascomputer.

- +

Where are playsets stored?

After you have added a playset, it is stored inside your browser, which means that it won't be available on other computers or in other browsers on the same computer. - +

Note: Fiascomputer does not currently support saving playsets as files or otherwise exporting them from the app. For that reason, do not use Fiascomputer to store your only copy of a playset.

- +

Setup

- +

Selecting items

To select the category or element for a relationship, press the text of that category or element. The same goes for details, but you first have to select whether that detail should be a Need, a Location, or an Object.

- +

Deleting items

To delete a detail, category, or element, hover over it and press the cross that appears. To remove a relationship from the game altogether, select a different number of players in the available dropdown menu.

- +

Random setups

To randomize an entire setup, press the Random button. To randomize a single category or element, click the die next to it.

- +

Changing a player's name

To change the name of a player, hover over the player's name and press the pencil that appears.

- +

Online play

To play with other players online through Google Drive, select "Invite players" in the menu.

- +

Miscellaneous

- +

Fullscreen

To enter fullscreen mode, press Enter Fullscreen in the menu. To leave fullscreen mode, press Leave Fullscreen in the menu or use your browser's built-in functionality for doing so.

- +

Color themes

If you're feeling blue or otherwise think that Fiasco's red color theme doesn't suit your setup, try one of the other color themes available in the menu!

- +

Contact

If you have questions or feedback relating to Fiascomputer, send an email to jakob@tabletopsoftware.net.

Fiascomputer is an unofficial app. If you have questions or feedback relating to the Fiasco RPG itself, please direct them to Bully Pulpit Games.

- +

Credits

Fiascomputer is developed by Jakob Kallin. For more software like this, visit TabletopSoftware.net.

@@ -238,7 +239,7 @@

Credits

Source code

The source code to Fiascomputer is licensed under GNU GPL and available on GitHub.

- + @@ -247,7 +248,7 @@

Source code

New version:

- +

Online play through Google Drive

Select a playset, then select "Invite players" on the player selection screen. (Experimental feature; share your feedback.)

@@ -257,9 +258,9 @@

Online play through Google Drive

Initial release of Fiascomputer

Import playsets, edit playsets, create setups, bundled with the 36 official playsets of the month.

- + - +