Skip to content

Use CSS custom properties in stylesheets #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NotWoods wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Use CSS custom properties in stylesheets #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions css/_defs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions css/blue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
12 changes: 6 additions & 6 deletions css/gray.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
12 changes: 6 additions & 6 deletions css/green.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
0 css/_main.scss → css/main.scss
View file
Open in desktop
File renamed without changes.
12 changes: 6 additions & 6 deletions css/red.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%);
}
45 changes: 23 additions & 22 deletions index.source.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<meta name="description" content="Create and visualize setups for the Fiasco tabletop RPG with this free web app">
<script src="/libraries/pdf.js"></script>
<script src="/bundle.js"></script>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/red.css" title="Fiasco Red">
<link rel="alternate stylesheet" href="/css/blue.css" title="Companion Blue">
<link rel="alternate stylesheet" href="/css/green.css" title="Town Green">
Expand Down Expand Up @@ -168,65 +169,65 @@ <h2 class="heading">Add playset</h2>
<div id="help" class="page help-page" data-title="Help">
<div class="document">
<h2 class="title">Help</h2>

<section>
<h3>Playsets</h3>

<h4>Adding a playset</h4>
<p>If you have a <cite>Fiasco</cite> playset PDF, you can use it in Fiascomputer! To add a playset, press the <a href="/add-playset">Add Playset</a> button in either the menu or the <a href="/playsets">playset listing</a>.</p>
<p>Hint: You can add more than one playset at a time.</p>
<p><em>Note: Not all playset PDFs are guaranteed to work in Fiascomputer. For best results, use one of the playsets distributed by the publishers of <cite>Fiasco</cite>, <a href="http://www.bullypulpitgames.com/" target="_blank">Bully Pulpit Games</a>. Many other playsets can be found at <a href="http://fiascoplaysets.com/" target="_blank">FiascoPlaysets.com</a>.</em></p>

<h4>Editing a playset</h4>
<p>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 <a href="/setup">setup page</a> 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.</p>

<h4>Creating a playset</h4>
<p>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.)</p>

<h4>Deleting a playset</h4>
<p>To delete a playset, select the playset in the <a href="/playsets">playset listing</a> 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.</p>

<h4>Where are playsets stored?</h4>
<p>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.

<p><em>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.</em></p>
</section>

<section>
<h3>Setup</h3>

<h4>Selecting items</h4>
<p>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.</p>

<h4>Deleting items</h4>
<p>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.</p>

<h4>Random setups</h4>
<p>To randomize an entire setup, press the Random button. To randomize a single category or element, click the die next to it.</p>

<h4>Changing a player's name</h4>
<p>To change the name of a player, hover over the player's name and press the pencil that appears.</p>

<h4>Online play</h4>
<p>To play with other players online through Google Drive, select "Invite players" in the menu.</p>
</section>

<section>
<h3>Miscellaneous</h3>

<h4>Fullscreen</h4>
<p>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.</p>

<h4>Color themes</h4>
<p>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!</p>
</section>

<section>
<h3>Contact</h3>
<p>If you have questions or feedback relating to Fiascomputer, send an email to <a href="mailto:jakob@tabletopsoftware.net">jakob@tabletopsoftware.net</a>.</p>
<p>Fiascomputer is an unofficial app. If you have questions or feedback relating to the <a href="http://www.bullypulpitgames.com/games/fiasco/" target="_blank"><cite>Fiasco</cite></a> RPG itself, please direct them to <a href="http://www.bullypulpitgames.com/" target="_blank">Bully Pulpit Games</a>.</p>
</section>

<section>
<h3>Credits</h3>
<p>Fiascomputer is developed by <a href="http://jakobkallin.com/" target="_blank">Jakob Kallin</a>. For more software like this, visit <a href="http://tabletopsoftware.net/" target="_blank">TabletopSoftware.net</a>.</p>
Expand All @@ -238,7 +239,7 @@ <h3>Credits</h3>
<h3>Source code</h3>
<p>The source code to Fiascomputer is licensed under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL</a> and available on <a href="https://github.com/JakobKallin/Fiascomputer">GitHub</a>.</p>
</section>

<button class="close-button" id="close-help-control">
<img src="/images/cross-black.svg" alt="Close">
</button>
Expand All @@ -247,7 +248,7 @@ <h3>Source code</h3>
<div id="version" class="page version-page">
<div class="document">
<h2 class="title">New version: <span id="version-number"></span></h2>

<section id="version-1.1" class="version">
<h3>Online play through Google Drive</h3>
<p>Select a playset, then select "Invite players" on the player selection screen. (Experimental feature; <a href="mailto:jakob@tabletopsoftware.net">share your feedback</a>.)</p>
Expand All @@ -257,9 +258,9 @@ <h3>Online play through Google Drive</h3>
<h3>Initial release of Fiascomputer</h3>
<p>Import playsets, edit playsets, create setups, bundled with the 36 official playsets of the month.</p>
</section>

<button type="button" class="start-button">Start</button>

<button type="button" class="close-button" id="close-version-control">
<img src="/images/cross-black.svg" alt="Close">
</button>
Expand Down