pederbs
/
RPGs3_card_insanity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the cards colorfull

This commit is contained in:
Peder Bergebakken Sundt 2020-03-07 02:35:08 +01:00
parent 79af3cb715
commit 73aaec7407
2 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
style.scss
View File

@ -2,14 +2,32 @@
--figure-size: 0.9in; --figure-size: 0.9in;
--figure-size: 1.35in; --figure-size: 1.35in;
--figure-size: 1.5in; --figure-size: 1.5in;
--color-border: MidnightBlue;
--color-bg-figure: white;
--color-bg: PaleTurquoise; // PaleTurquoise;
--color-bg-body: LightCyan; // PaleTurquoise;
--color-bg-frame: PaleTurquoise; // LightSkyBlue;
--color-bg-costbar: SandyBrown; // DarkOrange;
--color-text-title: MidnightBlue;
--color-text-body: black;
--color-text-costbar: white;
--color-shadow-costbar: 0.08em 0 0.05em Maroon,
-0.08em 0 0.05em Maroon,
0 0.08em 0.05em Maroon,
0 -0.08em 0.05em Maroon;
--figure-color: #555;
width: 2.5in; width: 2.5in;
height: 3.5in; height: 3.5in;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0mm; border-radius: 0mm;
border-width: 0.3mm; border-width: 0.3mm;
border-color: black; border-color: var(--color-border);
border-style: solid; border-style: solid;
background-color: #fff; background-color: var(--color-bg);
overflow: hidden; overflow: hidden;
font-size: 2.5mm; font-size: 2.5mm;
@ -25,35 +43,38 @@
"description description"; "description description";
header { header {
font-family: montserrat, sans-serif;
font-style: normal;
font-weight: 200;
grid-area: title; grid-area: title;
font-size: 1.8em; font-size: 1.8em;
line-height: 1em; line-height: 1em;
margin-left: -1em; margin-left: -1em;
border-radius: 1mm 1mm 0 0; border-radius: 1mm 1mm 0 0;
text-align: center; text-align: center;
background-color: #ddd; background-color: var(--color-bg-frame);
border-radius: 0; border-radius: 0;
color: #333; color: var(--color-text-title);
} }
.symbol { .symbol {
grid-area: symbol; grid-area: symbol;
text-align: center; text-align: center;
background-color: #ddd; background-color: var(--color-bg-frame);
color: #333; color: var(--color-text-title);
padding-top: 0.6mm; padding-top: 0.6mm;
padding-left: 0.8mm; padding-left: 0.8mm;
white-space: nowrap; white-space: nowrap;
} }
figure { figure {
grid-area: figure; grid-area: figure;
background-color: #fff; background-color: var(--color-bg-figure);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
.layer { .layer {
--figure-color: #555;
color: var(--figure-color); color: var(--figure-color);
position: absolute; position: absolute;
top:0;right:0;left:0;bottom:0; top:0;right:0;left:0;bottom:0;
@ -90,7 +111,7 @@
.playcosts { .playcosts {
grid-area: playcosts; grid-area: playcosts;
border-left: solid 0.3mm #ccc; border-left: solid 0.3mm #ccc;
background-color: #ddd; background-color: var(--color-bg-frame);
color: #444 ; color: #444 ;
padding: 0.5mm; padding: 0.5mm;
ul { ul {
@ -106,8 +127,9 @@
.costbar { .costbar {
grid-area: costbar; grid-area: costbar;
border-radius: 0; border-radius: 0;
background-color: #555; background-color: var(--color-bg-costbar);
color: white; color: var(--color-text-costbar);
text-shadow: var(--color-shadow-costbar);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -128,7 +150,8 @@
grid-area: description; grid-area: description;
margin: 1mm; margin: 1mm;
border-radius: 1mm; border-radius: 1mm;
background-color: #ddd; background-color: var(--color-bg-body);
color: var(--color-text-body);
font-size: 0.9em; font-size: 0.9em;
position: relative; position: relative;
@ -167,6 +190,7 @@
} }
.fjomp_card.item,
.fjomp_card.figure, .fjomp_card.figure,
.fjomp_card.repertoire { .fjomp_card.repertoire {
--figure-size: 2.4in; --figure-size: 2.4in;

1
templates/card_header.html.j2
View File

@ -12,3 +12,4 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" {{async}}/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" {{async}}/>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" {{async}}/> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" {{async}}/>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Montserrat'>