diff --git a/The Relentless Age/Dark Pack logo.png b/The Relentless Age/Dark Pack logo.png new file mode 100644 index 0000000000..45e4bff6c7 Binary files /dev/null and b/The Relentless Age/Dark Pack logo.png differ diff --git a/The Relentless Age/TheRelentlessAge.css b/The Relentless Age/TheRelentlessAge.css new file mode 100644 index 0000000000..1873adf0e7 --- /dev/null +++ b/The Relentless Age/TheRelentlessAge.css @@ -0,0 +1,480 @@ +@import url("https://fonts.googleapis.com/css2?family=Titan+One&family=Nova+Cut&family=Imperial+Script&display=swap"); + + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; +} +.charsheet input { + display: inline-block; + width: fit-content; + font-family: "Imperial Script" ; + font-style: italic; + font-weight: 450; + /* font-family: Titan One, Ballet, 'Ballet', 'Imperial Script', sans-serif; */ +} + +.charsheet { + background-color: white; + font-family: Nova Cut, sans-serif; +} + +.sheet-container { + display: grid; + overflow: visible; /* previously "scoll", which was causing a second vertical scroll bar */ + grid-template-columns: repeat(3, minmax(270px, 1fr)); + grid-template-rows: repeat(10, fit-content); + grid-template-areas: "header header header" + "character1 character2 character3" + "subhead1 subhead1 subhead1" + "attrib1 attrib2 attrib3" + "subhead2 subhead2 subhead2" + "ability1 ability2 ability3" + "subhead3 subhead3 subhead3" + "advantage1 advantage2 advantage3" + "extra1-1 extra1-2 extra1-3" + "subhead4 subhead4 subhead4" + "extra2-1 extra2-2 extra2-3" + "extra3-1 extra3-2 extra3-3"; + grid-gap: 8px; + margin: 0 2% 0 2%; +} + +.sheet-header { + grid-area: header; + text-align: center; +} +.sheet-character1 { + grid-area: character1; + font-family: "Imperial Script", sans-serif; + font-weight: 650; + + text-align: center; +} +.sheet-character2 { + grid-area: character2; + font-weight: 650; + text-align: center; +} +.sheet-character3 { + grid-area: character3; + font-family: "Nova Cut", sans-serif; + font-weight: 650; + text-align: center; +} + +.sheet-subhead1 { + grid-area: subhead1; + text-align: center; +} + +.sheet-attrib1 { + grid-area: attrib1; + text-align: center; +} + +.sheet-attrib2 { + grid-area: attrib2; + text-align: center; +} + +.sheet-attrib3 { + grid-area: attrib3; + text-align: center; +} + +.sheet-subhead2 { + grid-area: subhead2; + text-align: center; +} + +.sheet-ability1 { + grid-area: ability1; + text-align: center; +} + +.sheet-ability2 { + grid-area: ability2; + text-align: center; +} + +.sheet-ability3 { + grid-area: ability3; + text-align: center; +} + +.sheet-subhead3 { + grid-area: subhead3 ; + text-align: center; +} + +.sheet-advantage1 { + grid-area: advantage1; + text-align: center; +} +.sheet-advantage2 { + grid-area: advantage2; + text-align: center; +} +.sheet-advantage3 { + grid-area: advantage3; + text-align: center; +} + +.sheet-subhead4 { + grid-area: subhead4 ; + text-align: center; +} + +.sheet-extra1-1 { + grid-area: extra1-1; +} +.sheet-extra1-2 { + grid-area: extra1-2 ; +} +.sheet-extra1-3 { + grid-area: extra1-3; +} +.sheet-extra2-1 { + grid-area: extra2-1; + text-align: center; +} +.sheet-extra2-2 { + grid-area: extra2-2; + text-align: center; +} +.sheet-extra2-3 { + grid-area: extra2-3; + text-align: center; +} +.sheet-extra3-1 { + grid-area: extra3-1; +} +.sheet-extra3-2 { + grid-area: extra3-2; +} +.sheet-extra3-3 { + grid-area: extra3-3; +} + +.sheet-break-line { + height: 2px; + border-width: 0; + color: gray; + background-color: gray; + width: 60% +} + +.sheet-dotrow { + display: grid; + grid-template-columns: 3fr 3fr;/* 2fr 3fr; */ + grid-gap: 5px; + justify-content: center; + align-items: center; + justify-items: stretch; + padding: 2px 0 2px 2px; +} + +.sheet-willpower { + margin: auto; + width: fit-content; + display: grid; + grid-template-columns: auto 32px; + grid-gap: 1px; +} + +.sheet-willpower-pool { + display: grid; + grid-template-rows: repeat(2, 15px); + grid-gap: 1px; +} + +.sheet-two_col_header { + display: grid; + grid-template-columns: auto auto; + justify-content: center; + grid-gap: 10px; +} + +.sheet-dotrow > label { + padding: 10px 0 0 0; + font-weight: 650; + width: 100%; +} + +.sheet-dotrow > input[type="text"] { + padding: 3px 0 0 0; + width: 100%; +} + +.sheet-list > input[type="text"] { + width: 90%; +} + +.sheet-dotrow > label > input[type="text"] { + padding: 3px 0 0 0; + width: 100%; +} + +.sheet-textbox { + display: grid; + grid-template-rows: repeat(2, fit-content); + grid-template-columns: 1fr; + justify-content: center; + text-align: center; + padding-top: 1px; +} + +.sheet-textbox > label { + font-weight: 300; + text-align: center; +} + +.sheet-textbox > textarea { + width: 90%; + justify-self: center; +} + +.sheet-dotline10 { + margin: auto; + display: grid; + grid-template-columns: repeat(10, 15px); + grid-gap: 1px; +} + +.sheet-dotline11 { + margin: auto; + display: grid; + grid-template-columns: repeat(11, 15px); + grid-gap: 1px; +} + +.sheet-dotline12 { + margin: auto; + display: grid; + grid-template-columns: repeat(12, 15px); + grid-gap: 1px; +} + +.sheet-numberrow { + display: grid; + grid-template-columns: minmax(100px, auto) auto; + justify-content: center; + align-items: stretch; +} + +.sheet-list { + display: grid; + grid-template-columns: 1fr; + justify-content: center; + align-items: stretch; +} + +.sheet-numberrow > label { + font-size: 1.2em; + padding: 2px 0 2px 0; + font-weight: 600; +} + +.sheet-numberrow > input { + margin: 2px 0 2px 0; + justify-self: center; +} + +.sheet-healthrow { + display: grid; + grid-template-columns: 1fr 10px 40px; + grid-gap: 20px; + justify-content: center; + text-align: left; + padding: 4px 0 0px 0; +} + +.sheet-healthrow > select { + width: fit-content; +} + +.sheet-dicepool { + display: grid; + grid-template-columns: 18px repeat(2, 1fr) 32px; + grid-gap: 2px; + justify-content: center; + padding: 5px 0 5px 0; +} + +.sheet-dicepool > select { + width: 80%; + justify-self: center; +} + +.sheet-experience { + justify-content: center; + display: grid; + grid-template-rows: repeat(4, fit-content); + text-align: center; +} + +/* Hide actual dot/checkbox */ +input[type="radio"], +input[type="checkbox"] { + position: absolute; + opacity: 0; + width: 15px; + cursor: pointer; + z-index: 1; + margin-top: 2px; +} + +/* Styles common to fake dot and checkbox */ +input[type="radio"] + span::before, +input[type="checkbox"] + span::before { + border: solid 1px #a8a8a8; + line-height: 14px; + text-align: middle; + display: inline-block; + vertical-align: middle; + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + background: #f6f6f6; + background: -moz-radial-gradient(#f6f6f6, #dfdfdf); + background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); + background: -ms-radial-gradient(#f6f6f6, #dfdfdf); + background: -o-radial-gradient(#f6f6f6, #dfdfdf); + background: radial-gradient(#f6f6f6, #dfdfdf); +} + +/* Styles unique to fake dot (checked or left of checked) */ +input[type="radio"] + span::before { + content: "•"; + width: 12px; + height: 12px; + font-size: 36px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + +/* Styles unique to fake checkbox (unchecked) */ +input[type="checkbox"] + span::before { + position: relative; + content: ""; + opacity: 0.25; + width: 14px; + height: 14px; + font-size: 12px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +input[type="radio"].sheet-used + span::before { + content: "✖"; + width: 12px; + height: 12px; + font-size: 12px; + -moz-border-radius: 0%; + -webkit-border-radius: 0%; + border-radius: 0%; +} + +input.sheet-zero + span::before { + font-size: 12px; + content: "✖"; + opacity: 0.25; +} + +input.sheet-DP1Spec + span::before, +input.sheet-DP2Spec + span::before, +input.sheet-DP3Spec + span::before, +input.sheet-DP4Spec + span::before, +input.sheet-DP5Spec + span::before { + opacity: 1; + margin-bottom: 10px; +} + +input.sheet-zero:checked + span::before { + opacity: 0; +} + +input.sheet-zero:hover + span::before { + opacity: 1; +} + +/* Styles unique to fake checkbox (checked) */ +input[type="checkbox"]:checked + span::before { + content: "✖"; + color: #a00; + -moz-box-shadow: 0 0 2px transparent; + -webkit-box-shadow: 0 0 2px transparent; + box-shadow: 0 0 2px transparent; +} + +/* Remove dot from all radios _after_ selected one */ +input[type="radio"]:checked ~ input[type="radio"] + span::before { + content: ""; +} + +div.sheet-DP, +div.sheet-DP1, +div.sheet-DP2, +div.sheet-DP3, +div.sheet-DP4, +div.sheet-DP5 { + display: inline; +} + +input.sheet-DPSpec[type="checkbox"] + span::before { + position: relative; + content: ""; + opacity: 1; + width: 14px; + height: 14px; + font-size: 12px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +input.sheet-DPSpec[type="checkbox"]:checked + span::before { + content: "✖"; + color: #a00; + -moz-box-shadow: 0 0 2px transparent; + -webkit-box-shadow: 0 0 2px transparent; + box-shadow: 0 0 2px transparent; +} + +input.sheet-DPSpec ~ button.sheet-nospec, +input.sheet-DP1Spec ~ button.sheet-nospec, +input.sheet-DP2Spec ~ button.sheet-nospec, +input.sheet-DP3Spec ~ button.sheet-nospec, +input.sheet-DP4Spec ~ button.sheet-nospec, +input.sheet-DP5Spec ~ button.sheet-nospec { + display: inline; +} + +input.sheet-DPSpec ~ button.sheet-spec, +input.sheet-DP1Spec ~ button.sheet-spec, +input.sheet-DP2Spec ~ button.sheet-spec, +input.sheet-DP3Spec ~ button.sheet-spec, +input.sheet-DP4Spec ~ button.sheet-spec, +input.sheet-DP5Spec ~ button.sheet-spec { + display: none; +} + +input.sheet-DPSpec:checked ~ button.sheet-nospec, +input.sheet-DP1Spec:checked ~ button.sheet-nospec, +input.sheet-DP2Spec:checked ~ button.sheet-nospec, +input.sheet-DP3Spec:checked ~ button.sheet-nospec, +input.sheet-DP4Spec:checked ~ button.sheet-nospec, +input.sheet-DP5Spec:checked ~ button.sheet-nospec { + display: none; +} + +input.sheet-DPSpec:checked ~ button.sheet-spec, +input.sheet-DP1Spec:checked ~ button.sheet-spec, +input.sheet-DP2Spec:checked ~ button.sheet-spec, +input.sheet-DP3Spec:checked ~ button.sheet-spec, +input.sheet-DP4Spec:checked ~ button.sheet-spec, +input.sheet-DP5Spec:checked ~ button.sheet-spec { + display: inline; +} diff --git a/The Relentless Age/TheRelentlessAge.html b/The Relentless Age/TheRelentlessAge.html new file mode 100644 index 0000000000..8a6e70e693 --- /dev/null +++ b/The Relentless Age/TheRelentlessAge.html @@ -0,0 +1,1419 @@ +
+
+