mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 12:02:48 +00:00
style lint
This commit is contained in:
Víctor Losada Hernández
@@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
width : 50px;
|
||||
|
||||
i { margin-right : 10px; }
|
||||
}
|
||||
|
||||
@@ -18,22 +18,20 @@
|
||||
margin-bottom : unset;
|
||||
font-family : monospace;
|
||||
|
||||
&[type="date"] {
|
||||
width:14ch;
|
||||
}
|
||||
&[type='date'] { width : 14ch; }
|
||||
}
|
||||
|
||||
textarea {
|
||||
width : 50ch;
|
||||
min-height : 7em;
|
||||
max-height : 20em;
|
||||
resize : vertical;
|
||||
padding : 10px;
|
||||
resize : vertical;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 200px;
|
||||
width : 200px;
|
||||
|
||||
i { margin-right : 10px; }
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.notificationLookup {
|
||||
width : 450px;
|
||||
height : fit-content;
|
||||
height : fit-content;
|
||||
|
||||
.noNotification { margin-block : 20px; }
|
||||
.notificationList {
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
|
||||
|
||||
.anchored-box {
|
||||
position:absolute;
|
||||
@supports (inset-block-start: anchor(bottom)){
|
||||
inset-block-start: anchor(bottom);
|
||||
}
|
||||
justify-self: anchor-center;
|
||||
visibility: hidden;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
position : absolute;
|
||||
visibility : hidden;
|
||||
justify-self : anchor-center;
|
||||
@supports (inset-block-start: anchor(bottom)) {
|
||||
inset-block-start : anchor(bottom);
|
||||
}
|
||||
&.active { visibility : visible; }
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
position : relative;
|
||||
padding : 5px;
|
||||
margin : 0 3px;
|
||||
font-family : "Open Sans";
|
||||
font-family : 'Open Sans';
|
||||
font-size : 11px;
|
||||
cursor : default;
|
||||
&:hover {
|
||||
|
||||
@@ -1,43 +1,39 @@
|
||||
@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
|
||||
|
||||
.brewRenderer {
|
||||
height : 100vh;
|
||||
padding-top : 60px;
|
||||
overflow-y : scroll;
|
||||
will-change : transform;
|
||||
padding-top : 60px;
|
||||
height : 100vh;
|
||||
&:has(.facing, .flow) {
|
||||
padding : 60px 30px;
|
||||
}
|
||||
&.deployment {
|
||||
background-color: darkred;
|
||||
}
|
||||
&:has(.facing, .flow) { padding : 60px 30px; }
|
||||
&.deployment { background-color : darkred; }
|
||||
:where(.pages) {
|
||||
&.facing {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(3, auto);
|
||||
gap: 10px 10px;
|
||||
justify-content: safe center;
|
||||
display : grid;
|
||||
grid-template-rows : repeat(3, auto);
|
||||
grid-template-columns : repeat(2, auto);
|
||||
gap : 10px 10px;
|
||||
justify-content : safe center;
|
||||
&.recto .page:first-child {
|
||||
// sets first page on 'right' ('recto') of the preview, as if for a Cover page.
|
||||
// todo: add a checkbox to toggle this setting
|
||||
grid-column-start: 2;
|
||||
grid-column-start : 2;
|
||||
}
|
||||
& :where(.page) {
|
||||
margin-left: unset !important;
|
||||
margin-right: unset !important;
|
||||
margin-right : unset !important;
|
||||
margin-left : unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: safe center;
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
gap : 10px;
|
||||
justify-content : safe center;
|
||||
& :where(.page) {
|
||||
flex: 0 0 auto;
|
||||
margin-left: unset !important;
|
||||
margin-right: unset !important;
|
||||
flex : 0 0 auto;
|
||||
margin-right : unset !important;
|
||||
margin-left : unset !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -50,9 +46,7 @@
|
||||
margin-left : auto;
|
||||
box-shadow : 1px 4px 14px #000000;
|
||||
}
|
||||
*[id] {
|
||||
scroll-margin-top:100px;
|
||||
}
|
||||
*[id] { scroll-margin-top : 100px; }
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width : 20px;
|
||||
@@ -79,11 +73,9 @@
|
||||
overflow-y : unset;
|
||||
.pages {
|
||||
margin : 0px;
|
||||
zoom: 100% !important;
|
||||
zoom : 100% !important;
|
||||
& > .page { box-shadow : unset; }
|
||||
}
|
||||
}
|
||||
.headerNav {
|
||||
visibility: hidden;
|
||||
}
|
||||
.headerNav { visibility : hidden; }
|
||||
}
|
||||
@@ -1,39 +1,31 @@
|
||||
.headerNav {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 0px;
|
||||
padding: 5px 10px;
|
||||
background-color: #ccc;
|
||||
border-radius: 5px;
|
||||
max-height: calc(100vh - 32px);
|
||||
max-width: 40vw;
|
||||
overflow-y: auto;
|
||||
&.active {
|
||||
padding-bottom: 10px;
|
||||
.navIcon {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.navIcon {
|
||||
cursor: pointer;
|
||||
position : fixed;
|
||||
top : 32px;
|
||||
left : 0px;
|
||||
max-width : 40vw;
|
||||
max-height : calc(100vh - 32px);
|
||||
padding : 5px 10px;
|
||||
overflow-y : auto;
|
||||
background-color : #CCCCCC;
|
||||
border-radius : 5px;
|
||||
&.active {
|
||||
padding-bottom : 10px;
|
||||
.navIcon { padding-bottom : 10px; }
|
||||
}
|
||||
.navIcon { cursor : pointer; }
|
||||
li {
|
||||
list-style-type: none;
|
||||
list-style-type : none;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 12px;
|
||||
padding: 2px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.pageLink {
|
||||
font-weight: 900;
|
||||
}
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
padding : 2px;
|
||||
font-family : 'Open Sans';
|
||||
font-size : 12px;
|
||||
color : inherit;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
&:hover { text-decoration : underline; }
|
||||
&.pageLink { font-weight : 900; }
|
||||
|
||||
@depths: 0,1,2,3,4,5,6,7;
|
||||
|
||||
|
||||
@@ -86,8 +86,8 @@
|
||||
width : 100%;
|
||||
}
|
||||
.blank {
|
||||
height : 1em;
|
||||
margin-top: 0;
|
||||
& + * { margin-top: 0; }
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
@@ -156,7 +156,7 @@
|
||||
min-width : 46px;
|
||||
height : 100%;
|
||||
&:hover { background-color : #444444; }
|
||||
&:focus { border : 1px solid #D3D3D3;outline : none;}
|
||||
&:focus {outline : none; border : 1px solid #D3D3D3;}
|
||||
&:disabled {
|
||||
color : #777777;
|
||||
background-color : unset !important;
|
||||
@@ -182,8 +182,8 @@
|
||||
position : absolute;
|
||||
left : 0;
|
||||
z-index : 5;
|
||||
display : flex;
|
||||
width : 32px;
|
||||
min-width : unset;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'themes/codeMirror/customEditorStyles.less';
|
||||
.editor {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
container: editor / inline-size;
|
||||
position : relative;
|
||||
width : 100%;
|
||||
container : editor / inline-size;
|
||||
|
||||
.codeEditor {
|
||||
height : 100%;
|
||||
@@ -45,26 +45,26 @@
|
||||
color : green;
|
||||
}
|
||||
.emoji:not(.cm-comment) {
|
||||
margin-left : 2px;
|
||||
color : #360034;
|
||||
background : #ffc8ff;
|
||||
border-radius : 6px;
|
||||
font-weight : bold;
|
||||
padding-bottom : 1px;
|
||||
margin-left : 2px;
|
||||
font-weight : bold;
|
||||
color : #360034;
|
||||
outline : solid 2px #FF96FC;
|
||||
outline-offset : -2px;
|
||||
outline : solid 2px #ff96fc;
|
||||
background : #FFC8FF;
|
||||
border-radius : 6px;
|
||||
}
|
||||
.superscript:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : goldenrod;
|
||||
vertical-align : super;
|
||||
font-size : 0.9em;
|
||||
font-weight : bold;
|
||||
vertical-align : super;
|
||||
color : goldenrod;
|
||||
}
|
||||
.subscript:not(.cm-comment) {
|
||||
font-weight : bold;
|
||||
color : rgb(123, 123, 15);
|
||||
vertical-align : sub;
|
||||
font-size : 0.9em;
|
||||
font-weight : bold;
|
||||
vertical-align : sub;
|
||||
color : rgb(123, 123, 15);
|
||||
}
|
||||
.dl-highlight {
|
||||
&.dl-colon-highlight {
|
||||
|
||||
@@ -48,7 +48,7 @@ const MetadataEditor = createClass({
|
||||
|
||||
getInitialState : function(){
|
||||
return {
|
||||
showThumbnail : true
|
||||
showThumbnail : true
|
||||
};
|
||||
},
|
||||
|
||||
@@ -68,7 +68,7 @@ const MetadataEditor = createClass({
|
||||
const inputRules = validations[name] ?? [];
|
||||
const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
|
||||
|
||||
const debouncedReportValidity = _.debounce((target, errMessage) => {
|
||||
const debouncedReportValidity = _.debounce((target, errMessage)=>{
|
||||
callIfExists(target, 'setCustomValidity', errMessage);
|
||||
callIfExists(target, 'reportValidity');
|
||||
}, 300); // 300ms debounce delay, adjust as needed
|
||||
@@ -87,7 +87,7 @@ const MetadataEditor = createClass({
|
||||
return `- ${err}`;
|
||||
}).join('\n');
|
||||
|
||||
|
||||
|
||||
debouncedReportValidity(e.target, errMessage);
|
||||
return false;
|
||||
}
|
||||
@@ -110,6 +110,7 @@ const MetadataEditor = createClass({
|
||||
}
|
||||
this.props.onChange(this.props.metadata, 'renderer');
|
||||
},
|
||||
|
||||
handlePublish : function(val){
|
||||
this.props.onChange({
|
||||
...this.props.metadata,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import 'naturalcrit/styles/colors.less';
|
||||
|
||||
.userThemeName {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-right : 10px;
|
||||
padding-left : 10px;
|
||||
}
|
||||
|
||||
.metadataEditor {
|
||||
@@ -12,20 +12,20 @@
|
||||
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
|
||||
padding : 25px;
|
||||
overflow-y : auto;
|
||||
font-size : 13px;
|
||||
background-color : #999999;
|
||||
font-size : 13px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 40px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin : 0 0 40px;
|
||||
font-weight : bold;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin : 20px 0;
|
||||
font-weight : bold;
|
||||
border-bottom: 2px solid gray;
|
||||
color: #555;
|
||||
margin : 20px 0;
|
||||
font-weight : bold;
|
||||
color : #555555;
|
||||
border-bottom : 2px solid gray;
|
||||
}
|
||||
|
||||
& > div { margin-bottom : 10px; }
|
||||
@@ -54,10 +54,10 @@
|
||||
min-width : 200px;
|
||||
& > label {
|
||||
width : 80px;
|
||||
font-size : 0.9em;
|
||||
font-weight : 800;
|
||||
line-height : 1.8em;
|
||||
text-transform : uppercase;
|
||||
font-size: .9em;
|
||||
}
|
||||
& > .value {
|
||||
flex : 1 1 auto;
|
||||
@@ -74,7 +74,7 @@
|
||||
border : 1px solid gray;
|
||||
&:focus { outline : 1px solid #444444; }
|
||||
}
|
||||
&.thumbnail, &.themes{
|
||||
&.thumbnail, &.themes {
|
||||
label { line-height : 2.0em; }
|
||||
.value {
|
||||
overflow : hidden;
|
||||
@@ -90,14 +90,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.themes{
|
||||
&.themes {
|
||||
.value {
|
||||
overflow : visible;
|
||||
text-overflow : auto;
|
||||
}
|
||||
button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-right : 5px;
|
||||
padding-left : 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -136,8 +136,8 @@
|
||||
margin-right : 15px;
|
||||
font-size : 0.9em;
|
||||
font-weight : 800;
|
||||
white-space : nowrap;
|
||||
vertical-align : middle;
|
||||
white-space : nowrap;
|
||||
cursor : pointer;
|
||||
user-select : none;
|
||||
}
|
||||
@@ -164,9 +164,7 @@
|
||||
.colorButton(@red);
|
||||
}
|
||||
}
|
||||
.authors.field .value {
|
||||
line-height : 1.5em;
|
||||
}
|
||||
.authors.field .value { line-height : 1.5em; }
|
||||
|
||||
.themes.field {
|
||||
& .dropdown-container {
|
||||
@@ -174,9 +172,7 @@
|
||||
z-index : 100;
|
||||
background-color : white;
|
||||
}
|
||||
& .dropdown-options {
|
||||
overflow-y : visible;
|
||||
}
|
||||
& .dropdown-options { overflow-y : visible; }
|
||||
.disabled {
|
||||
font-style : italic;
|
||||
color : dimgray;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
justify-content : flex-end;
|
||||
min-width : 225px;
|
||||
|
||||
&:only-child { margin-left : auto;min-width:unset;}
|
||||
&:only-child {min-width : unset; margin-left : auto;}
|
||||
|
||||
>div {
|
||||
display : flex;
|
||||
@@ -39,9 +39,7 @@
|
||||
text-align : center;
|
||||
cursor : pointer;
|
||||
|
||||
&.editorTool:not(.active) {
|
||||
cursor:not-allowed;
|
||||
}
|
||||
&.editorTool:not(.active) { cursor : not-allowed; }
|
||||
|
||||
&:hover,&.selected { background-color : #999999; }
|
||||
&.text {
|
||||
@@ -151,9 +149,9 @@
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
z-index : 1000;
|
||||
visibility : hidden;
|
||||
padding : 0px;
|
||||
margin-left : -5px;
|
||||
visibility : hidden;
|
||||
background-color : #DDDDDD;
|
||||
.snippet {
|
||||
position : relative;
|
||||
|
||||
@@ -1,36 +1,32 @@
|
||||
@import 'naturalcrit/styles/core.less';
|
||||
.homebrew{
|
||||
.homebrew {
|
||||
height : 100%;
|
||||
.sitePage{
|
||||
.sitePage {
|
||||
display : flex;
|
||||
height : 100%;
|
||||
background-color : @steel;
|
||||
flex-direction : column;
|
||||
height : 100%;
|
||||
overflow-y : hidden;
|
||||
.content{
|
||||
background-color : @steel;
|
||||
.content {
|
||||
position : relative;
|
||||
height : calc(~"100% - 29px"); //Navbar height
|
||||
flex : auto;
|
||||
height : calc(~'100% - 29px'); //Navbar height
|
||||
overflow-y : hidden;
|
||||
}
|
||||
&.listPage .content {
|
||||
overflow-y : scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
&:horizontal{
|
||||
height: 20px;
|
||||
width:auto;
|
||||
width : 20px;
|
||||
&:horizontal {
|
||||
width : auto;
|
||||
height : 20px;
|
||||
}
|
||||
&-thumb {
|
||||
background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
|
||||
&:horizontal{
|
||||
background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
|
||||
}
|
||||
}
|
||||
&-corner {
|
||||
visibility: hidden;
|
||||
background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
|
||||
&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
|
||||
}
|
||||
&-corner { visibility : hidden; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,78 +1,70 @@
|
||||
.navItem.error {
|
||||
position : relative;
|
||||
background-color : @red;
|
||||
position : relative;
|
||||
background-color : @red;
|
||||
}
|
||||
|
||||
.errorContainer{
|
||||
animation-name: glideDown;
|
||||
animation-duration: 0.4s;
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
left : 50%;
|
||||
z-index : 1000;
|
||||
width : 140px;
|
||||
padding : 3px;
|
||||
color : white;
|
||||
background-color : #333;
|
||||
border : 3px solid #444;
|
||||
border-radius : 5px;
|
||||
transform : translate(-50% + 3px, 10px);
|
||||
text-align : center;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
text-transform : uppercase;
|
||||
.lowercase {
|
||||
text-transform : none;
|
||||
.errorContainer {
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
left : 50%;
|
||||
z-index : 1000;
|
||||
width : 140px;
|
||||
padding : 3px;
|
||||
font-size : 10px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-align : center;
|
||||
text-transform : uppercase;
|
||||
background-color : #333333;
|
||||
border : 3px solid #444444;
|
||||
border-radius : 5px;
|
||||
transform : translate(-50% + 3px, 10px);
|
||||
animation-name : glideDown;
|
||||
animation-duration : 0.4s;
|
||||
.lowercase { text-transform : none; }
|
||||
a { color : @teal; }
|
||||
&::before {
|
||||
position : absolute;
|
||||
top : -23px;
|
||||
left : 53px;
|
||||
width : 0px;
|
||||
height : 0px;
|
||||
content : '';
|
||||
border-top : 10px solid transparent;
|
||||
border-right : 10px solid transparent;
|
||||
border-bottom : 10px solid #444444;
|
||||
border-left : 10px solid transparent;
|
||||
}
|
||||
&::after {
|
||||
position : absolute;
|
||||
top : -19px;
|
||||
left : 53px;
|
||||
width : 0px;
|
||||
height : 0px;
|
||||
content : '';
|
||||
border-top : 10px solid transparent;
|
||||
border-right : 10px solid transparent;
|
||||
border-bottom : 10px solid #333333;
|
||||
border-left : 10px solid transparent;
|
||||
}
|
||||
.deny {
|
||||
display : inline-block;
|
||||
width : 48%;
|
||||
padding : 5px;
|
||||
margin : 1px;
|
||||
background-color : #333333;
|
||||
border-left : 1px solid #666666;
|
||||
.animate(background-color);
|
||||
&:hover { background-color : red; }
|
||||
}
|
||||
.confirm {
|
||||
display : inline-block;
|
||||
width : 48%;
|
||||
padding : 5px;
|
||||
margin : 1px;
|
||||
color : white;
|
||||
background-color : #333333;
|
||||
.animate(background-color);
|
||||
&:hover { background-color : teal; }
|
||||
}
|
||||
a{
|
||||
color : @teal;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid #444;
|
||||
left: 53px;
|
||||
top: -23px;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid #333;
|
||||
left: 53px;
|
||||
top: -19px;
|
||||
}
|
||||
.deny {
|
||||
width : 48%;
|
||||
margin : 1px;
|
||||
padding : 5px;
|
||||
background-color : #333;
|
||||
display : inline-block;
|
||||
border-left : 1px solid #666;
|
||||
.animate(background-color);
|
||||
&:hover{
|
||||
background-color : red;
|
||||
}
|
||||
}
|
||||
.confirm {
|
||||
width : 48%;
|
||||
margin : 1px;
|
||||
padding : 5px;
|
||||
background-color : #333;
|
||||
display : inline-block;
|
||||
color : white;
|
||||
.animate(background-color);
|
||||
&:hover{
|
||||
background-color : teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,11 +24,11 @@
|
||||
}
|
||||
|
||||
.homebrew nav {
|
||||
position : relative;
|
||||
z-index : 2;
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
background-color : #333333;
|
||||
position : relative;
|
||||
z-index : 2;
|
||||
display : flex;
|
||||
justify-content : space-between;
|
||||
|
||||
.navSection {
|
||||
display : flex;
|
||||
@@ -82,8 +82,8 @@
|
||||
font-weight : 800;
|
||||
line-height : 13px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
background-color : #333333;
|
||||
i {
|
||||
@@ -106,11 +106,11 @@
|
||||
display : block;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
font-size : 12px;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-align : center;
|
||||
text-overflow : ellipsis;
|
||||
text-transform : initial;
|
||||
white-space : nowrap;
|
||||
background-color : transparent;
|
||||
@@ -170,16 +170,16 @@
|
||||
h4 {
|
||||
box-sizing : border-box;
|
||||
display : block;
|
||||
flex-basis : 20%;
|
||||
flex-grow : 1;
|
||||
flex-basis : 20%;
|
||||
min-width : 76px;
|
||||
padding : 5px 0;
|
||||
color : #BBBBBB;
|
||||
text-align : center;
|
||||
}
|
||||
p {
|
||||
flex-basis : 80%;
|
||||
flex-grow : 1;
|
||||
flex-basis : 80%;
|
||||
padding : 5px 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 10px;
|
||||
@@ -215,10 +215,10 @@
|
||||
z-index : 10000;
|
||||
box-sizing : border-box;
|
||||
display : block;
|
||||
visibility : hidden;
|
||||
width : 100%;
|
||||
padding : 13px 5px;
|
||||
text-align : center;
|
||||
visibility : hidden;
|
||||
background-color : #333333;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,148 +1,129 @@
|
||||
|
||||
.brewItem{
|
||||
.brewItem {
|
||||
position : relative;
|
||||
box-sizing : border-box;
|
||||
display : inline-block;
|
||||
vertical-align : top;
|
||||
box-sizing : border-box;
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
width : 48%;
|
||||
min-height : 105px;
|
||||
margin-right : 15px;
|
||||
margin-bottom : 15px;
|
||||
padding : 5px 15px 2px 6px;
|
||||
padding-right : 15px;
|
||||
border : 1px solid #c9ad6a;
|
||||
margin-right : 15px;
|
||||
margin-bottom : 15px;
|
||||
overflow : hidden;
|
||||
vertical-align : top;
|
||||
background-color : #CAB2802E;
|
||||
border : 1px solid #C9AD6A;
|
||||
border-radius : 5px;
|
||||
box-shadow : 0px 4px 5px 0px #333333;
|
||||
break-inside : avoid;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
box-shadow : 0px 4px 5px 0px #333;
|
||||
background-color : #cab2802e;
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
|
||||
-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
|
||||
opacity: 50%;
|
||||
.thumbnail {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
right : 0;
|
||||
z-index : -1;
|
||||
width : 150px;
|
||||
height : 100%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : right top;
|
||||
background-size : contain;
|
||||
opacity : 50%;
|
||||
-webkit-mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
mask-image : linear-gradient(80deg, #00000000 20%, #005500 40%);
|
||||
}
|
||||
.text {
|
||||
min-height : 54px;
|
||||
h4{
|
||||
h4 {
|
||||
margin-bottom : 5px;
|
||||
font-size : 2.2em;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
position: initial;
|
||||
bottom: 2px;
|
||||
font-family : ScalySansRemake;
|
||||
.info {
|
||||
position : initial;
|
||||
bottom : 2px;
|
||||
font-family : "ScalySansRemake";
|
||||
font-size : 1.2em;
|
||||
&>span{
|
||||
& > span {
|
||||
margin-right : 12px;
|
||||
line-height : 1.5em;
|
||||
|
||||
a {
|
||||
color:inherit;
|
||||
}
|
||||
a { color : inherit; }
|
||||
}
|
||||
}
|
||||
.brewTags span {
|
||||
background-color: #c8ac6e3b;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
border: 1px solid #c8ac6e;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
border-color: currentColor;
|
||||
cursor : pointer;
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
display : inline-block;
|
||||
padding : 2px;
|
||||
margin : 2px;
|
||||
font-weight : bold;
|
||||
white-space : nowrap;
|
||||
cursor : pointer;
|
||||
background-color : #C8AC6E3B;
|
||||
border : 1px solid #C8AC6E;
|
||||
border-color : currentColor;
|
||||
border-radius : 4px;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
}
|
||||
&.type {
|
||||
background-color: #0080003b;
|
||||
color: #008000;
|
||||
&:before{
|
||||
content: '\f0ad';
|
||||
}
|
||||
color : #008000;
|
||||
background-color : #0080003B;
|
||||
&::before { content : '\f0ad'; }
|
||||
}
|
||||
&.group {
|
||||
background-color: #5050503b;
|
||||
color: #000000;
|
||||
&:before{
|
||||
content: '\f500';
|
||||
}
|
||||
color : #000000;
|
||||
background-color : #5050503B;
|
||||
&::before { content : '\f500'; }
|
||||
}
|
||||
&.meta {
|
||||
background-color: #0000803b;
|
||||
color: #000080;
|
||||
&:before{
|
||||
content: '\f05a';
|
||||
}
|
||||
color : #000080;
|
||||
background-color : #0000803B;
|
||||
&::before { content : '\f05a'; }
|
||||
}
|
||||
&.system {
|
||||
background-color: #8000003b;
|
||||
color: #800000;
|
||||
&:before{
|
||||
content: '\f518';
|
||||
}
|
||||
color : #800000;
|
||||
background-color : #8000003B;
|
||||
&::before { content : '\f518'; }
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.links{
|
||||
opacity : 1;
|
||||
}
|
||||
&:hover {
|
||||
.links { opacity : 1; }
|
||||
}
|
||||
&:nth-child(2n + 1){
|
||||
margin-right : 0px;
|
||||
}
|
||||
.links{
|
||||
&:nth-child(2n + 1) { margin-right : 0px; }
|
||||
.links {
|
||||
.animate(opacity);
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
height : 100%;
|
||||
width : 2em;
|
||||
opacity : 0;
|
||||
background-color : fade(black, 60%);
|
||||
height : 100%;
|
||||
text-align : center;
|
||||
a{
|
||||
background-color : fade(black, 60%);
|
||||
opacity : 0;
|
||||
a {
|
||||
.animate(opacity);
|
||||
display : block;
|
||||
margin : 8px 0px;
|
||||
opacity : 0.6;
|
||||
font-size : 1.3em;
|
||||
color : white;
|
||||
text-decoration : unset;
|
||||
&:hover{
|
||||
opacity : 1;
|
||||
}
|
||||
i{
|
||||
cursor : pointer;
|
||||
}
|
||||
opacity : 0.6;
|
||||
&:hover { opacity : 1; }
|
||||
i { cursor : pointer; }
|
||||
}
|
||||
}
|
||||
.googleDriveIcon {
|
||||
height : 18px;
|
||||
height : 18px;
|
||||
padding : 0px;
|
||||
margin : -5px;
|
||||
}
|
||||
.homebreweryIcon {
|
||||
mix-blend-mode : darken;
|
||||
height : 24px;
|
||||
position : relative;
|
||||
top : 5px;
|
||||
left : -5px;
|
||||
height : 24px;
|
||||
mix-blend-mode : darken;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
.noColumns(){
|
||||
.noColumns() {
|
||||
column-count : auto;
|
||||
column-fill : auto;
|
||||
column-gap : normal;
|
||||
@@ -13,177 +13,151 @@
|
||||
height : auto;
|
||||
min-height : 279.4mm;
|
||||
margin : 20px auto;
|
||||
contain : unset;
|
||||
contain : unset;
|
||||
}
|
||||
.listPage{
|
||||
.content{
|
||||
.listPage {
|
||||
.content {
|
||||
z-index : 1;
|
||||
.page{
|
||||
.page {
|
||||
.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
|
||||
&::after{
|
||||
display : none;
|
||||
}
|
||||
.noBrews{
|
||||
&::after { display : none; }
|
||||
.noBrews {
|
||||
margin : 10px 0px;
|
||||
font-size : 1.3em;
|
||||
font-style : italic;
|
||||
}
|
||||
.brewCollection {
|
||||
h1:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
h1:hover { cursor : pointer; }
|
||||
.active::before, .inactive::before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
font-size: 0.6cm;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.active {
|
||||
color: var(--HB_Color_HeaderText);
|
||||
}
|
||||
.active::before {
|
||||
content: '\f107';
|
||||
}
|
||||
.inactive {
|
||||
color: #707070;
|
||||
}
|
||||
.inactive::before {
|
||||
content: '\f105';
|
||||
padding-right : 0.5em;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 0.6cm;
|
||||
font-weight : 900;
|
||||
}
|
||||
.active { color : var(--HB_Color_HeaderText); }
|
||||
.active::before { content : '\f107'; }
|
||||
.inactive { color : #707070; }
|
||||
.inactive::before { content : '\f105'; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.sort-container {
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 30px;
|
||||
background-color : #555;
|
||||
border-top : 1px solid #666;
|
||||
border-bottom : 1px solid #666;
|
||||
color : white;
|
||||
text-align : center;
|
||||
z-index : 1;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
align-items : baseline;
|
||||
column-gap : 15px;
|
||||
row-gap : 5px;
|
||||
flex-wrap : wrap;
|
||||
h6{
|
||||
text-transform : uppercase;
|
||||
position : sticky;
|
||||
top : 0;
|
||||
left : 0;
|
||||
z-index : 1;
|
||||
display : flex;
|
||||
flex-wrap : wrap;
|
||||
row-gap : 5px;
|
||||
column-gap : 15px;
|
||||
align-items : baseline;
|
||||
justify-content : center;
|
||||
width : 100%;
|
||||
height : 30px;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
color : white;
|
||||
text-align : center;
|
||||
background-color : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
h6 {
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : bold;
|
||||
text-transform : uppercase;
|
||||
}
|
||||
.sort-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
color: #ccc;
|
||||
height: 100%;
|
||||
display : flex;
|
||||
align-items : center;
|
||||
height : 100%;
|
||||
padding : 0 8px;
|
||||
color : #CCCCCC;
|
||||
|
||||
&:hover{
|
||||
background-color : #444;
|
||||
}
|
||||
&:hover { background-color : #444444; }
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
background-color: #333;
|
||||
font-weight : bold;
|
||||
color : #DDDDDD;
|
||||
background-color : #333333;
|
||||
|
||||
button {
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
height: 100%;
|
||||
& + .sortDir {
|
||||
padding-left: 5px;
|
||||
button {
|
||||
height : 100%;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
& + .sortDir { padding-left : 5px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.filter-option {
|
||||
margin-left: 20px;
|
||||
background-color : transparent !important;
|
||||
margin-left : 20px;
|
||||
font-size : 11px;
|
||||
i{
|
||||
padding-right : 5px;
|
||||
}
|
||||
background-color : transparent !important;
|
||||
i { padding-right : 5px; }
|
||||
}
|
||||
button {
|
||||
padding : 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : normal;
|
||||
color : #CCCCCC;
|
||||
text-transform : uppercase;
|
||||
background-color : transparent;
|
||||
}
|
||||
button{
|
||||
background-color : transparent;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
text-transform : uppercase;
|
||||
font-weight : normal;
|
||||
font-size : 11px;
|
||||
color : #ccc;
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.tags-container {
|
||||
height : 30px;
|
||||
background-color : #555;
|
||||
border-top : 1px solid #666;
|
||||
border-bottom : 1px solid #666;
|
||||
color : white;
|
||||
display : flex;
|
||||
justify-content : center;
|
||||
align-items : center;
|
||||
column-gap : 15px;
|
||||
row-gap : 5px;
|
||||
flex-wrap : wrap;
|
||||
row-gap : 5px;
|
||||
column-gap : 15px;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
height : 30px;
|
||||
color : white;
|
||||
background-color : #555555;
|
||||
border-top : 1px solid #666666;
|
||||
border-bottom : 1px solid #666666;
|
||||
span {
|
||||
padding : 3px;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 11px;
|
||||
font-weight : bold;
|
||||
color : #DFDFDF;
|
||||
cursor : pointer;
|
||||
border : 1px solid;
|
||||
border-radius : 3px;
|
||||
padding : 3px;
|
||||
cursor : pointer;
|
||||
color: #dfdfdf;
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 12px;
|
||||
margin-right: 3px;
|
||||
&::before {
|
||||
margin-right : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
}
|
||||
&:after {
|
||||
content: '\f00d';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 12px;
|
||||
margin-left: 3px;
|
||||
&::after {
|
||||
margin-left : 3px;
|
||||
font-family : 'Font Awesome 5 Free';
|
||||
font-size : 12px;
|
||||
content : '\f00d';
|
||||
}
|
||||
&.type {
|
||||
background-color: #008000;
|
||||
border-color: #00a000;
|
||||
&:before{
|
||||
content: '\f0ad';
|
||||
}
|
||||
background-color : #008000;
|
||||
border-color : #00A000;
|
||||
&::before { content : '\f0ad'; }
|
||||
}
|
||||
&.group {
|
||||
background-color: #505050;
|
||||
border-color: #000000;
|
||||
&:before{
|
||||
content: '\f500';
|
||||
}
|
||||
background-color : #505050;
|
||||
border-color : #000000;
|
||||
&::before { content : '\f500'; }
|
||||
}
|
||||
&.meta {
|
||||
background-color: #000080;
|
||||
border-color: #0000a0;
|
||||
&:before{
|
||||
content: '\f05a';
|
||||
}
|
||||
background-color : #000080;
|
||||
border-color : #0000A0;
|
||||
&::before { content : '\f05a'; }
|
||||
}
|
||||
&.system {
|
||||
background-color: #800000;
|
||||
border-color: #a00000;
|
||||
&:before{
|
||||
content: '\f518';
|
||||
}
|
||||
background-color : #800000;
|
||||
border-color : #A00000;
|
||||
&::before { content : '\f518'; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.homebrew {
|
||||
.uiPage.sitePage {
|
||||
.content {
|
||||
width : ~"min(90vw, 1000px)";
|
||||
width : ~'min(90vw, 1000px)';
|
||||
padding : 2% 4%;
|
||||
margin-top : 25px;
|
||||
margin-right : auto;
|
||||
@@ -17,19 +17,19 @@
|
||||
border : 2px solid black;
|
||||
border-radius : 5px;
|
||||
button {
|
||||
width : 125px;
|
||||
margin-right : 5px;
|
||||
color : black;
|
||||
background-color : transparent;
|
||||
border : 1px solid black;
|
||||
border-radius : 5px;
|
||||
width : 125px;
|
||||
color : black;
|
||||
margin-right : 5px;
|
||||
&.active {
|
||||
background-color: #0007;
|
||||
color: white;
|
||||
&:before {
|
||||
content: '\f00c';
|
||||
font-family: 'FONT AWESOME 5 FREE';
|
||||
margin-right: 5px;
|
||||
color : white;
|
||||
background-color : #00000077;
|
||||
&::before {
|
||||
margin-right : 5px;
|
||||
font-family : 'FONT AWESOME 5 FREE';
|
||||
content : '\f00c';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -60,11 +60,9 @@
|
||||
list-style : square;
|
||||
}
|
||||
.blank {
|
||||
height: 1em;
|
||||
margin-top: 0;
|
||||
& + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
@keyframes glideDown {
|
||||
0% {transform : translate(-50% + 3px, 0px);
|
||||
opacity : 0;}
|
||||
100% {transform : translate(-50% + 3px, 10px);
|
||||
opacity : 1;}
|
||||
0% {
|
||||
opacity : 0;transform : translate(-50% + 3px, 0px);}
|
||||
100% {
|
||||
opacity : 1;transform : translate(-50% + 3px, 10px);}
|
||||
}
|
||||
.editPage{
|
||||
.navItem.save{
|
||||
.editPage {
|
||||
.navItem.save {
|
||||
position : relative;
|
||||
width : 106px;
|
||||
text-align : center;
|
||||
position : relative;
|
||||
&.saved{
|
||||
&.saved {
|
||||
color : #666666;
|
||||
cursor : initial;
|
||||
color : #666;
|
||||
}
|
||||
}
|
||||
.googleDriveStorage {
|
||||
position : relative;
|
||||
}
|
||||
.googleDriveStorage img{
|
||||
height : 18px;
|
||||
.googleDriveStorage { position : relative; }
|
||||
.googleDriveStorage img {
|
||||
height : 18px;
|
||||
padding : 0px;
|
||||
margin : -5px;
|
||||
|
||||
&.inactive {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
&.inactive { filter : grayscale(1); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,40 @@
|
||||
.homePage{
|
||||
.homePage {
|
||||
position : relative;
|
||||
a.floatingNewButton{
|
||||
a.floatingNewButton {
|
||||
.animate(background-color);
|
||||
position : absolute;
|
||||
display : block;
|
||||
right : 70px;
|
||||
bottom : 50px;
|
||||
z-index : 100;
|
||||
z-index : 5001;
|
||||
display : block;
|
||||
padding : 1em;
|
||||
background-color : @orange;
|
||||
font-size : 1.5em;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
background-color : @orange;
|
||||
box-shadow : 3px 3px 15px black;
|
||||
&:hover{
|
||||
background-color : darken(@orange, 20%);
|
||||
}
|
||||
&:hover { background-color : darken(@orange, 20%); }
|
||||
}
|
||||
.floatingSaveButton{
|
||||
.floatingSaveButton {
|
||||
.animateAll();
|
||||
position : absolute;
|
||||
display : block;
|
||||
right : 200px;
|
||||
bottom : 70px;
|
||||
z-index : 100;
|
||||
z-index : 5000;
|
||||
display : block;
|
||||
padding : 0.8em;
|
||||
cursor : pointer;
|
||||
background-color : @blue;
|
||||
font-size : 0.8em;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
background-color : @blue;
|
||||
box-shadow : 3px 3px 15px black;
|
||||
&:hover{
|
||||
background-color : darken(@blue, 20%);
|
||||
}
|
||||
&.show{
|
||||
right : 350px;
|
||||
}
|
||||
&:hover { background-color : darken(@blue, 20%); }
|
||||
&.show { right : 350px; }
|
||||
}
|
||||
|
||||
.navItem.save{
|
||||
background-color: @orange;
|
||||
&:hover{
|
||||
background-color: @green;
|
||||
}
|
||||
.navItem.save {
|
||||
background-color : @orange;
|
||||
&:hover { background-color : @green; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
.newPage{
|
||||
.navItem.save{
|
||||
background-color: @orange;
|
||||
&:hover{
|
||||
background-color: @green;
|
||||
}
|
||||
.newPage {
|
||||
.navItem.save {
|
||||
background-color : @orange;
|
||||
&:hover { background-color : @green; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
.sharePage{
|
||||
.sharePage {
|
||||
nav .navSection.titleSection {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
.content{
|
||||
overflow-y : hidden;
|
||||
flex-grow : 1;
|
||||
justify-content : center;
|
||||
}
|
||||
.content { overflow-y : hidden; }
|
||||
}
|
||||
|
||||
@@ -1,84 +1,34 @@
|
||||
.fac {
|
||||
display : inline-block;
|
||||
background-color : currentColor;
|
||||
mask-size : contain;
|
||||
mask-repeat : no-repeat;
|
||||
mask-position : center;
|
||||
width : 1em;
|
||||
aspect-ratio : 1;
|
||||
background-color : currentColor;
|
||||
mask-repeat : no-repeat;
|
||||
mask-position : center;
|
||||
mask-size : contain;
|
||||
}
|
||||
.position-top-left {
|
||||
mask-image: url('../icons/position-top-left.svg');
|
||||
}
|
||||
.position-top-right {
|
||||
mask-image: url('../icons/position-top-right.svg');
|
||||
}
|
||||
.position-bottom-left {
|
||||
mask-image: url('../icons/position-bottom-left.svg');
|
||||
}
|
||||
.position-bottom-right {
|
||||
mask-image: url('../icons/position-bottom-right.svg');
|
||||
}
|
||||
.position-top {
|
||||
mask-image: url('../icons/position-top.svg');
|
||||
}
|
||||
.position-right {
|
||||
mask-image: url('../icons/position-right.svg');
|
||||
}
|
||||
.position-bottom {
|
||||
mask-image: url('../icons/position-bottom.svg');
|
||||
}
|
||||
.position-left {
|
||||
mask-image: url('../icons/position-left.svg');
|
||||
}
|
||||
.mask-edge {
|
||||
mask-image: url('../icons/mask-edge.svg');
|
||||
}
|
||||
.mask-corner {
|
||||
mask-image: url('../icons/mask-corner.svg');
|
||||
}
|
||||
.mask-center {
|
||||
mask-image: url('../icons/mask-center.svg');
|
||||
}
|
||||
.book-front-cover {
|
||||
mask-image: url('../icons/book-front-cover.svg');
|
||||
}
|
||||
.book-back-cover {
|
||||
mask-image: url('../icons/book-back-cover.svg');
|
||||
}
|
||||
.book-inside-cover {
|
||||
mask-image: url('../icons/book-inside-cover.svg');
|
||||
}
|
||||
.book-part-cover {
|
||||
mask-image: url('../icons/book-part-cover.svg');
|
||||
}
|
||||
.image-wrap-left {
|
||||
mask-image: url('../icons/image-wrap-left.svg');
|
||||
}
|
||||
.image-wrap-right {
|
||||
mask-image: url('../icons/image-wrap-right.svg');
|
||||
}
|
||||
.davek {
|
||||
mask-image: url('../icons/Davek.svg');
|
||||
}
|
||||
.rellanic {
|
||||
mask-image: url('../icons/Rellanic.svg');
|
||||
}
|
||||
.iokharic {
|
||||
mask-image: url('../icons/Iokharic.svg');
|
||||
}
|
||||
.zoom-to-fit {
|
||||
mask-image: url('../icons/zoom-to-fit.svg');
|
||||
}
|
||||
.fit-width {
|
||||
mask-image: url('../icons/fit-width.svg');
|
||||
}
|
||||
.single-spread {
|
||||
mask-image: url('../icons/single-spread.svg');
|
||||
}
|
||||
.facing-spread {
|
||||
mask-image: url('../icons/facing-spread.svg');
|
||||
}
|
||||
.flow-spread {
|
||||
mask-image: url('../icons/flow-spread.svg');
|
||||
}
|
||||
.position-top-left { mask-image : url('../icons/position-top-left.svg'); }
|
||||
.position-top-right { mask-image : url('../icons/position-top-right.svg'); }
|
||||
.position-bottom-left { mask-image : url('../icons/position-bottom-left.svg'); }
|
||||
.position-bottom-right { mask-image : url('../icons/position-bottom-right.svg'); }
|
||||
.position-top { mask-image : url('../icons/position-top.svg'); }
|
||||
.position-right { mask-image : url('../icons/position-right.svg'); }
|
||||
.position-bottom { mask-image : url('../icons/position-bottom.svg'); }
|
||||
.position-left { mask-image : url('../icons/position-left.svg'); }
|
||||
.mask-edge { mask-image : url('../icons/mask-edge.svg'); }
|
||||
.mask-corner { mask-image : url('../icons/mask-corner.svg'); }
|
||||
.mask-center { mask-image : url('../icons/mask-center.svg'); }
|
||||
.book-front-cover { mask-image : url('../icons/book-front-cover.svg'); }
|
||||
.book-back-cover { mask-image : url('../icons/book-back-cover.svg'); }
|
||||
.book-inside-cover { mask-image : url('../icons/book-inside-cover.svg'); }
|
||||
.book-part-cover { mask-image : url('../icons/book-part-cover.svg'); }
|
||||
.image-wrap-left { mask-image : url('../icons/image-wrap-left.svg'); }
|
||||
.image-wrap-right { mask-image : url('../icons/image-wrap-right.svg'); }
|
||||
.davek { mask-image : url('../icons/Davek.svg'); }
|
||||
.rellanic { mask-image : url('../icons/Rellanic.svg'); }
|
||||
.iokharic { mask-image : url('../icons/Iokharic.svg'); }
|
||||
.zoom-to-fit { mask-image : url('../icons/zoom-to-fit.svg'); }
|
||||
.fit-width { mask-image : url('../icons/fit-width.svg'); }
|
||||
.single-spread { mask-image : url('../icons/single-spread.svg'); }
|
||||
.facing-spread { mask-image : url('../icons/facing-spread.svg'); }
|
||||
.flow-spread { mask-image : url('../icons/flow-spread.svg'); }
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
background-color : #BBBBBB;
|
||||
.dots {
|
||||
display : table-cell;
|
||||
text-align : center;
|
||||
vertical-align : middle;
|
||||
text-align : center;
|
||||
i {
|
||||
display : block !important;
|
||||
margin : 10px 0px;
|
||||
|
||||
@@ -3,127 +3,127 @@
|
||||
@defaultEasing : ease;
|
||||
|
||||
//Animates all properties on an element
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: all @duration @easing;
|
||||
-moz-transition: all @duration @easing;
|
||||
-o-transition: all @duration @easing;
|
||||
transition: all @duration @easing;
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transition : all @duration @easing;
|
||||
-moz-transition : all @duration @easing;
|
||||
-o-transition : all @duration @easing;
|
||||
transition : all @duration @easing;
|
||||
}
|
||||
//Animates Specific property
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: @prop @duration @easing;
|
||||
-moz-transition: @prop @duration @easing;
|
||||
-o-transition: @prop @duration @easing;
|
||||
transition: @prop @duration @easing;
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transition : @prop @duration @easing;
|
||||
-moz-transition : @prop @duration @easing;
|
||||
-o-transition : @prop @duration @easing;
|
||||
transition : @prop @duration @easing;
|
||||
}
|
||||
|
||||
.animateMany(...){
|
||||
.animateMany(...) {
|
||||
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
|
||||
-webkit-transition-property: @value;
|
||||
-moz-transition-property: @value;
|
||||
-o-transition-property: @value;
|
||||
transition-property: @value;
|
||||
-webkit-transition-property : @value;
|
||||
-moz-transition-property : @value;
|
||||
-o-transition-property : @value;
|
||||
transition-property : @value;
|
||||
|
||||
.animateDuration();
|
||||
.animateEasing();
|
||||
}
|
||||
|
||||
.animateDuration(@duration : @defaultDuration){
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
.animateDuration(@duration : @defaultDuration) {
|
||||
-webkit-transition-duration : @duration;
|
||||
-moz-transition-duration : @duration;
|
||||
-o-transition-duration : @duration;
|
||||
transition-duration : @duration;
|
||||
}
|
||||
|
||||
.animateEasing(@easing : @defaultEasing){
|
||||
-webkit-transition-timing-function: @easing;
|
||||
-moz-transition-timing-function: @easing;
|
||||
-o-transition-timing-function: @easing;
|
||||
transition-timing-function: @easing;
|
||||
.animateEasing(@easing : @defaultEasing) {
|
||||
-webkit-transition-timing-function : @easing;
|
||||
-moz-transition-timing-function : @easing;
|
||||
-o-transition-timing-function : @easing;
|
||||
transition-timing-function : @easing;
|
||||
}
|
||||
|
||||
|
||||
.transition (@prop, @duration: @defaultDuration) {
|
||||
-webkit-transition: @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition: @prop @duration, -moz-transform @duration;
|
||||
-o-transition: @prop @duration, -o-transform @duration;
|
||||
-ms-transition: @prop @duration, -ms-transform @duration;
|
||||
transition: @prop @duration, transform @duration;
|
||||
-webkit-transition : @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition : @prop @duration, -moz-transform @duration;
|
||||
-o-transition : @prop @duration, -o-transform @duration;
|
||||
-ms-transition : @prop @duration, -ms-transform @duration;
|
||||
transition : @prop @duration, transform @duration;
|
||||
}
|
||||
.transform (@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-moz-transform: @transform;
|
||||
-o-transform: @transform;
|
||||
-ms-transform: @transform;
|
||||
transform: @transform;
|
||||
-webkit-transform : @transform;
|
||||
-moz-transform : @transform;
|
||||
-o-transform : @transform;
|
||||
-ms-transform : @transform;
|
||||
transform : @transform;
|
||||
}
|
||||
|
||||
|
||||
.delay(@delay){
|
||||
animation-delay:@delay;
|
||||
-webkit-animation-delay:@delay;
|
||||
transition-delay:@delay;
|
||||
-webkit-transition-delay:@delay;
|
||||
.delay(@delay) {
|
||||
-webkit-transition-delay : @delay;
|
||||
transition-delay : @delay;
|
||||
-webkit-animation-delay : @delay;
|
||||
animation-delay : @delay;
|
||||
}
|
||||
.keep(){
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
-ms-animation-fill-mode:forwards;
|
||||
-o-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
.keep() {
|
||||
-webkit-animation-fill-mode : forwards;
|
||||
-moz-animation-fill-mode : forwards;
|
||||
-ms-animation-fill-mode : forwards;
|
||||
-o-animation-fill-mode : forwards;
|
||||
animation-fill-mode : forwards;
|
||||
}
|
||||
|
||||
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
|
||||
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
|
||||
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
|
||||
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
|
||||
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
|
||||
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
|
||||
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
|
||||
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
|
||||
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
|
||||
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
|
||||
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
|
||||
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
|
||||
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
|
||||
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
|
||||
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
|
||||
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
|
||||
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
|
||||
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
|
||||
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
|
||||
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
|
||||
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s) {
|
||||
&:nth-child(1) {.delay(0*@delayInc + @initialDelay); }
|
||||
&:nth-child(2) {.delay(1*@delayInc + @initialDelay); }
|
||||
&:nth-child(3) {.delay(2*@delayInc + @initialDelay); }
|
||||
&:nth-child(4) {.delay(3*@delayInc + @initialDelay); }
|
||||
&:nth-child(5) {.delay(4*@delayInc + @initialDelay); }
|
||||
&:nth-child(6) {.delay(5*@delayInc + @initialDelay); }
|
||||
&:nth-child(7) {.delay(6*@delayInc + @initialDelay); }
|
||||
&:nth-child(8) {.delay(7*@delayInc + @initialDelay); }
|
||||
&:nth-child(9) {.delay(8*@delayInc + @initialDelay); }
|
||||
&:nth-child(10) {.delay(9*@delayInc + @initialDelay); }
|
||||
&:nth-child(11) {.delay(10*@delayInc + @initialDelay); }
|
||||
&:nth-child(12) {.delay(11*@delayInc + @initialDelay); }
|
||||
&:nth-child(13) {.delay(12*@delayInc + @initialDelay); }
|
||||
&:nth-child(14) {.delay(13*@delayInc + @initialDelay); }
|
||||
&:nth-child(15) {.delay(14*@delayInc + @initialDelay); }
|
||||
&:nth-child(16) {.delay(15*@delayInc + @initialDelay); }
|
||||
&:nth-child(17) {.delay(16*@delayInc + @initialDelay); }
|
||||
&:nth-child(18) {.delay(17*@delayInc + @initialDelay); }
|
||||
&:nth-child(19) {.delay(18*@delayInc + @initialDelay); }
|
||||
&:nth-child(20) {.delay(19*@delayInc + @initialDelay); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.createFrames(@name, @from, @to){
|
||||
.createFrames(@name, @from, @to) {
|
||||
@frames: {
|
||||
from { @from(); }
|
||||
to { @to(); }
|
||||
};
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
}
|
||||
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
animation-name: @name;
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
-webkit-animation-timing-function: @easing;
|
||||
-moz-animation-timing-function: @easing;
|
||||
-ms-animation-timing-function: @easing;
|
||||
animation-timing-function: @easing;
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-animation-name : @name;
|
||||
-moz-animation-name : @name;
|
||||
-ms-animation-name : @name;
|
||||
animation-name : @name;
|
||||
-webkit-animation-duration : @duration;
|
||||
-moz-animation-duration : @duration;
|
||||
-ms-animation-duration : @duration;
|
||||
animation-duration : @duration;
|
||||
-webkit-animation-timing-function : @easing;
|
||||
-moz-animation-timing-function : @easing;
|
||||
-ms-animation-timing-function : @easing;
|
||||
animation-timing-function : @easing;
|
||||
}
|
||||
|
||||
|
||||
@@ -132,82 +132,82 @@
|
||||
Standard Animations
|
||||
****************************/
|
||||
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeIn; @duration; @easing);
|
||||
.createFrames(fadeIn,
|
||||
{ opacity : 0; },
|
||||
{ opacity : 0; },
|
||||
{ opacity : 1; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInDown; @duration; @easing);
|
||||
.createFrames(fadeInDown,
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInTop; @duration; @easing);
|
||||
.createFrames(fadeInTop,
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInLeft; @duration; @easing);
|
||||
.createFrames(fadeInLeft,
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeInRight; @duration; @easing);
|
||||
.createFrames(fadeInRight,
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOut; @duration; @easing);
|
||||
.createFrames(fadeOut,
|
||||
{ opacity : 1; },
|
||||
{ opacity : 1; },
|
||||
{ opacity : 0; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutDown; @duration; @easing);
|
||||
.createFrames(fadeOutDown,
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutTop; @duration; @easing);
|
||||
.createFrames(fadeOutTop,
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutLeft; @duration; @easing);
|
||||
.createFrames(fadeOutLeft,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(-20px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(fadeOutRight; @duration; @easing);
|
||||
.createFrames(fadeOutRight,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(20px));}
|
||||
);
|
||||
}
|
||||
@@ -219,50 +219,50 @@
|
||||
Fun Animations
|
||||
****************************/
|
||||
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(spin, @duration, @easing);
|
||||
.spinKeyFrames(){
|
||||
.spinKeyFrames() {
|
||||
from { .transform(rotate(0deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
}
|
||||
@-webkit-keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
}
|
||||
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(bounce, @duration, @easing);
|
||||
.bounceKeyFrames(){
|
||||
.bounceKeyFrames() {
|
||||
0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
|
||||
40% { .transform(translateY(-30px));}
|
||||
60% { .transform(translateY(-15px));}
|
||||
}
|
||||
@-webkit-keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
}
|
||||
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(pulse, @duration, @easing);
|
||||
.pulseKeyFrames(){
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
.pulseKeyFrames() {
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
}
|
||||
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(rubberBand, @duration, @easing);
|
||||
.rubberBandKeyFrames(){
|
||||
.rubberBandKeyFrames() {
|
||||
0% {.transform(scale(1));}
|
||||
30% {.transform(scaleX(1.25) scaleY(0.75));}
|
||||
40% {.transform(scaleX(0.75) scaleY(1.25));}
|
||||
@@ -270,32 +270,32 @@
|
||||
100% {.transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
}
|
||||
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(shake, @duration, @easing);
|
||||
.shakeKeyFrames(){
|
||||
.shakeKeyFrames() {
|
||||
0%, 100% {.transform( translateX(0));}
|
||||
10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
|
||||
20%, 40%, 60%, 80% {.transform( translateX(10px));}
|
||||
}
|
||||
@-webkit-keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
}
|
||||
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transform-origin : top center;
|
||||
-ms-transform-origin : top center;
|
||||
transform-origin : top center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
.swingKeyFrames() {
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
@@ -303,18 +303,18 @@
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
-webkit-transform-origin : center center;
|
||||
-ms-transform-origin : center center;
|
||||
transform-origin : center center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
.swingKeyFrames() {
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
@@ -322,15 +322,15 @@
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(wobble, @duration, @easing);
|
||||
.wobbleKeyFrames(){
|
||||
.wobbleKeyFrames() {
|
||||
0% {.transform(translateX(0%));}
|
||||
15% {.transform(translateX(-25%) rotate(-5deg));}
|
||||
30% {.transform(translateX(20%) rotate(3deg));}
|
||||
@@ -340,22 +340,22 @@
|
||||
100% {.transform(translateX(0%));}
|
||||
}
|
||||
@-webkit-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
}
|
||||
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing) {
|
||||
.createAnimation(popIn, @duration, @easing);
|
||||
.popInKeyFrames(){
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
.popInKeyFrames() {
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
}
|
||||
|
||||
@@ -23,47 +23,47 @@
|
||||
@grey : #7F8C8D;
|
||||
|
||||
#backgroundColors {
|
||||
&.tealLight{ background-color : @tealLight };
|
||||
&.teal{ background-color : @teal };
|
||||
&.greenLight{ background-color : @greenLight };
|
||||
&.green{ background-color : @green };
|
||||
&.blueLight{ background-color : @blueLight };
|
||||
&.blue{ background-color : @blue };
|
||||
&.purpleLight{ background-color : @purpleLight };
|
||||
&.purple{ background-color : @purple };
|
||||
&.steelLight{ background-color : @steelLight };
|
||||
&.steel{ background-color : @steel };
|
||||
&.yellowLight{ background-color : @yellowLight };
|
||||
&.yellow{ background-color : @yellow };
|
||||
&.orangeLight{ background-color : @orangeLight };
|
||||
&.orange{ background-color : @orange };
|
||||
&.redLight{ background-color : @redLight };
|
||||
&.red{ background-color : @red };
|
||||
&.silverLight{ background-color : @silverLight };
|
||||
&.silver{ background-color : @silver };
|
||||
&.greyLight{ background-color : @greyLight };
|
||||
&.grey{ background-color : @grey };
|
||||
&.tealLight { background-color : @tealLight; };
|
||||
&.teal { background-color : @teal; };
|
||||
&.greenLight { background-color : @greenLight; };
|
||||
&.green { background-color : @green; };
|
||||
&.blueLight { background-color : @blueLight; };
|
||||
&.blue { background-color : @blue; };
|
||||
&.purpleLight { background-color : @purpleLight; };
|
||||
&.purple { background-color : @purple; };
|
||||
&.steelLight { background-color : @steelLight; };
|
||||
&.steel { background-color : @steel; };
|
||||
&.yellowLight { background-color : @yellowLight; };
|
||||
&.yellow { background-color : @yellow; };
|
||||
&.orangeLight { background-color : @orangeLight; };
|
||||
&.orange { background-color : @orange; };
|
||||
&.redLight { background-color : @redLight; };
|
||||
&.red { background-color : @red; };
|
||||
&.silverLight { background-color : @silverLight; };
|
||||
&.silver { background-color : @silver; };
|
||||
&.greyLight { background-color : @greyLight; };
|
||||
&.grey { background-color : @grey; };
|
||||
}
|
||||
|
||||
#backgroundColorsHover {
|
||||
&.tealLight:hover{ background-color : @tealLight };
|
||||
&.teal:hover{ background-color : @teal };
|
||||
&.greenLight:hover{ background-color : @greenLight };
|
||||
&.green:hover{ background-color : @green };
|
||||
&.blueLight:hover{ background-color : @blueLight };
|
||||
&.blue:hover{ background-color : @blue };
|
||||
&.purpleLight:hover{ background-color : @purpleLight };
|
||||
&.purple:hover{ background-color : @purple };
|
||||
&.steelLight:hover{ background-color : @steelLight };
|
||||
&.steel:hover{ background-color : @steel };
|
||||
&.yellowLight:hover{ background-color : @yellowLight };
|
||||
&.yellow:hover{ background-color : @yellow };
|
||||
&.orangeLight:hover{ background-color : @orangeLight };
|
||||
&.orange:hover{ background-color : @orange };
|
||||
&.redLight:hover{ background-color : @redLight };
|
||||
&.red:hover{ background-color : @red };
|
||||
&.silverLight:hover{ background-color : @silverLight };
|
||||
&.silver:hover{ background-color : @silver };
|
||||
&.greyLight:hover{ background-color : @greyLight };
|
||||
&.grey:hover{ background-color : @grey };
|
||||
&.tealLight:hover { background-color : @tealLight; };
|
||||
&.teal:hover { background-color : @teal; };
|
||||
&.greenLight:hover { background-color : @greenLight; };
|
||||
&.green:hover { background-color : @green; };
|
||||
&.blueLight:hover { background-color : @blueLight; };
|
||||
&.blue:hover { background-color : @blue; };
|
||||
&.purpleLight:hover { background-color : @purpleLight; };
|
||||
&.purple:hover { background-color : @purple; };
|
||||
&.steelLight:hover { background-color : @steelLight; };
|
||||
&.steel:hover { background-color : @steel; };
|
||||
&.yellowLight:hover { background-color : @yellowLight; };
|
||||
&.yellow:hover { background-color : @yellow; };
|
||||
&.orangeLight:hover { background-color : @orangeLight; };
|
||||
&.orange:hover { background-color : @orange; };
|
||||
&.redLight:hover { background-color : @redLight; };
|
||||
&.red:hover { background-color : @red; };
|
||||
&.silverLight:hover { background-color : @silverLight; };
|
||||
&.silver:hover { background-color : @silver; };
|
||||
&.greyLight:hover { background-color : @greyLight; };
|
||||
&.grey:hover { background-color : @grey; };
|
||||
}
|
||||
@@ -12,37 +12,31 @@
|
||||
font-family : 'CodeBold';
|
||||
src : data-uri('naturalcrit/styles/CODE Bold.otf') format('opentype');
|
||||
}
|
||||
html,body, #reactRoot{
|
||||
html,body, #reactRoot {
|
||||
height : 100vh;
|
||||
min-height : 100vh;
|
||||
margin : 0;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
}
|
||||
*{
|
||||
box-sizing : border-box;
|
||||
}
|
||||
.colorButton(@backgroundColor : @green){
|
||||
* { box-sizing : border-box; }
|
||||
.colorButton(@backgroundColor : @green) {
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : 'Open Sans', sans-serif;
|
||||
font-size : 0.8em;
|
||||
font-weight : 800;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
text-transform : uppercase;
|
||||
border : none;
|
||||
text-decoration : none;
|
||||
cursor : pointer;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @backgroundColor;
|
||||
border : none;
|
||||
&:hover { background-color : darken(@backgroundColor, 5%); }
|
||||
&:active { background-color : darken(@backgroundColor, 10%); }
|
||||
&:disabled {
|
||||
cursor : not-allowed;
|
||||
background-color : @silver !important;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,86 +1,76 @@
|
||||
|
||||
@containerWidth : 1000px;
|
||||
|
||||
html, body{
|
||||
html, body {
|
||||
position : relative;
|
||||
height : 100%;
|
||||
min-height : 100%;
|
||||
background-color : #eee;
|
||||
font-family : 'Lato', sans-serif;
|
||||
color : @copyGrey;
|
||||
background-color : #EEEEEE;
|
||||
}
|
||||
.container{
|
||||
.container {
|
||||
position : relative;
|
||||
max-width : @containerWidth;
|
||||
margin : 0 auto;
|
||||
padding-right : 20px;
|
||||
padding-left : 20px;
|
||||
margin : 0 auto;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 2em;
|
||||
}
|
||||
h2{
|
||||
h2 {
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 1.5em;
|
||||
font-weight : 900;
|
||||
}
|
||||
h3{
|
||||
h3 {
|
||||
margin-top : 5px;
|
||||
margin-bottom : 7px;
|
||||
font-size : 1em;
|
||||
font-weight : 900;
|
||||
}
|
||||
p{
|
||||
p {
|
||||
margin-bottom : 1em;
|
||||
font-size : 16px;
|
||||
color : @copyGrey;
|
||||
line-height : 1.5em;
|
||||
color : @copyGrey;
|
||||
}
|
||||
code{
|
||||
background-color : #F8F8F8;
|
||||
font-family : 'Courier', mono;
|
||||
code {
|
||||
font-family : 'Courier', "mono";
|
||||
color : black;
|
||||
white-space : pre;
|
||||
background-color : #F8F8F8;
|
||||
}
|
||||
a{
|
||||
color : inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight : bold;
|
||||
}
|
||||
button{
|
||||
a { color : inherit; }
|
||||
strong { font-weight : bold; }
|
||||
button {
|
||||
.button();
|
||||
}
|
||||
.button(@backgroundColor : @green){
|
||||
.button(@backgroundColor : @green) {
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : "Lato", Helvetica, Arial, sans-serif;
|
||||
font-family : 'Lato', "Helvetica", "Arial", sans-serif;
|
||||
font-size : 15px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
border : none;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @silver !important;
|
||||
}
|
||||
}
|
||||
.iconButton(@backgroundColor : @green){
|
||||
padding : 0.6em;
|
||||
cursor : pointer;
|
||||
outline : none;
|
||||
background-color : @backgroundColor;
|
||||
border : none;
|
||||
&:hover { background-color : darken(@backgroundColor, 5%); }
|
||||
&:active { background-color : darken(@backgroundColor, 10%); }
|
||||
&:disabled { background-color : @silver !important; }
|
||||
}
|
||||
.iconButton(@backgroundColor : @green) {
|
||||
padding : 0.6em;
|
||||
font-size : 14px;
|
||||
color : white;
|
||||
text-align : center;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
}
|
||||
@@ -1,33 +1,23 @@
|
||||
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){
|
||||
border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0
|
||||
:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video) {padding : 0;margin : 0;font : inherit;font-size : 100%;vertical-align : baseline;
|
||||
border : 0;
|
||||
}
|
||||
|
||||
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section){
|
||||
display:block
|
||||
}
|
||||
:where(article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section) { display : block; }
|
||||
|
||||
:where(body){
|
||||
line-height:1
|
||||
}
|
||||
:where(body) { line-height : 1; }
|
||||
|
||||
:where(ol,ul){
|
||||
list-style:none
|
||||
}
|
||||
:where(ol,ul) { list-style : none; }
|
||||
|
||||
:where(blockquote,q){
|
||||
quotes:none
|
||||
}
|
||||
:where(blockquote,q) { quotes : none; }
|
||||
|
||||
:where(blockquote:before,blockquote:after,q:before,q:after){
|
||||
content:none
|
||||
}
|
||||
:where(blockquote::before,blockquote::after,q::before,q::after) { content : none; }
|
||||
|
||||
:where(table){
|
||||
border-collapse:collapse;border-spacing:0
|
||||
:where(table) {border-spacing : 0;
|
||||
border-collapse : collapse;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
background-color: unset;
|
||||
text-transform: unset;
|
||||
color: unset;
|
||||
color : unset;
|
||||
text-transform : unset;
|
||||
background-color : unset;
|
||||
}
|
||||
|
||||
@@ -2,116 +2,115 @@
|
||||
@tooltipColor : #383838;
|
||||
@arrowSize : 6px;
|
||||
@arrowPosition : 18px;
|
||||
[data-tooltip]{
|
||||
[data-tooltip] {
|
||||
.tooltip(attr(data-tooltip));
|
||||
}
|
||||
[data-tooltip-top]{
|
||||
[data-tooltip-top] {
|
||||
.tooltipTop(attr(data-tooltip-top));
|
||||
}
|
||||
[data-tooltip-bottom]{
|
||||
[data-tooltip-bottom] {
|
||||
.tooltipBottom(attr(data-tooltip-bottom));
|
||||
}
|
||||
[data-tooltip-left]{
|
||||
[data-tooltip-left] {
|
||||
.tooltipLeft(attr(data-tooltip-left));
|
||||
}
|
||||
[data-tooltip-right]{
|
||||
[data-tooltip-right] {
|
||||
.tooltipRight(attr(data-tooltip-right));
|
||||
}
|
||||
.tooltip(@content){
|
||||
.tooltip(@content) {
|
||||
.tooltipBottom(@content);
|
||||
}
|
||||
.tooltipTop(@content){
|
||||
.tooltipTop(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-bottom : -@arrowSize * 2;
|
||||
border-top-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after{
|
||||
&::after { margin-left : -18px; }
|
||||
&::before, &::after {
|
||||
bottom : 100%;
|
||||
left : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateY(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
.tooltipBottom(@content){
|
||||
.tooltipBottom(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-top : -@arrowSize * 2;
|
||||
border-bottom-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-left: -18px; }
|
||||
&:before, &:after{
|
||||
&::after { margin-left : -18px; }
|
||||
&::before, &::after {
|
||||
top : 100%;
|
||||
left : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateY(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
.tooltipLeft(@content){
|
||||
.tooltipLeft(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-right : -@arrowSize * 2;
|
||||
margin-bottom : -@arrowSize;
|
||||
border-left-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
&::after { margin-bottom : -14px;}
|
||||
&::before, &::after {
|
||||
right : 100%;
|
||||
bottom : 50%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateX(-(@arrowSize + 2)));
|
||||
}
|
||||
}
|
||||
.tooltipRight(@content){
|
||||
.tooltipRight(@content) {
|
||||
.tooltipBase(@content);
|
||||
&:before {
|
||||
&::before {
|
||||
margin-bottom : -@arrowSize;
|
||||
margin-left : -@arrowSize * 2;
|
||||
border-right-color : @tooltipColor;
|
||||
}
|
||||
&:after{ margin-bottom: -14px;}
|
||||
&:before, &:after {
|
||||
&::after { margin-bottom : -14px;}
|
||||
&::before, &::after {
|
||||
bottom : 50%;
|
||||
left : 100%;
|
||||
}
|
||||
&:hover:after, &:hover:before, &:focus:after, &:focus:before {
|
||||
&:hover::after, &:hover::before, &:focus::after, &:focus::before {
|
||||
.transform(translateX(@arrowSize + 2));
|
||||
}
|
||||
}
|
||||
.tooltipShow(){
|
||||
}
|
||||
.tooltipBase(@content){
|
||||
.tooltipShow(){ }
|
||||
.tooltipBase(@content) {
|
||||
//position: relative;
|
||||
&:before, &:after{
|
||||
&::before, &::after {
|
||||
.animateAll();
|
||||
position : absolute;
|
||||
z-index : 1000000;
|
||||
opacity : 0;
|
||||
pointer-events : none;
|
||||
opacity : 0;
|
||||
}
|
||||
//Arrow
|
||||
&:before{
|
||||
content : '';
|
||||
&::before {
|
||||
z-index : 1000001;
|
||||
content : '';
|
||||
background : transparent;
|
||||
border : @arrowSize solid transparent;
|
||||
}
|
||||
//Box
|
||||
&:after{
|
||||
content : @content;
|
||||
&::after {
|
||||
visibility : hidden;
|
||||
padding : 8px 10px;
|
||||
background : @tooltipColor;
|
||||
font-size : 12px;
|
||||
color : white;
|
||||
line-height : 12px;
|
||||
color : white;
|
||||
white-space : nowrap;
|
||||
content : @content;
|
||||
background : @tooltipColor;
|
||||
}
|
||||
&:hover:before, &:hover:after {
|
||||
&:hover::before, &:hover::after {
|
||||
visibility : visible;
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
@@ -9,26 +9,22 @@
|
||||
@headerText : #58180D; // Dark maroon
|
||||
@monsterStatBackground : #FDF1DC; // Lighter parchment
|
||||
@captionText : #766649; // Brown
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
counter-reset : phb-page-numbers;
|
||||
}
|
||||
*{
|
||||
-webkit-print-color-adjust : exact;
|
||||
}
|
||||
.useSansSerif(){
|
||||
font-family : ScalySans;
|
||||
em{
|
||||
font-family : ScalySans;
|
||||
@page { margin : 0; }
|
||||
body { counter-reset : phb-page-numbers; }
|
||||
* { -webkit-print-color-adjust : exact; }
|
||||
.useSansSerif() {
|
||||
font-family : "ScalySans";
|
||||
em {
|
||||
font-family : "ScalySans";
|
||||
font-style : italic;
|
||||
}
|
||||
strong{
|
||||
font-family : ScalySans;
|
||||
strong {
|
||||
font-family : "ScalySans";
|
||||
font-weight : 800;
|
||||
letter-spacing : -0.02em;
|
||||
}
|
||||
}
|
||||
.useColumns(@multiplier : 1){
|
||||
.useColumns(@multiplier : 1) {
|
||||
column-count : 2;
|
||||
column-fill : auto;
|
||||
column-gap : 1cm;
|
||||
@@ -40,21 +36,21 @@ body {
|
||||
-webkit-column-gap : 1cm;
|
||||
-moz-column-gap : 1cm;
|
||||
}
|
||||
.phb, .page{
|
||||
.phb, .page {
|
||||
.useColumns();
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
z-index : 15;
|
||||
box-sizing : border-box;
|
||||
overflow : hidden;
|
||||
height : 279.4mm;
|
||||
width : 215.9mm;
|
||||
height : 279.4mm;
|
||||
padding : 1.0cm 1.7cm;
|
||||
padding-bottom : 1.5cm;
|
||||
overflow : hidden;
|
||||
font-family : "BookSanity";
|
||||
font-size : 0.317cm;
|
||||
counter-increment : phb-page-numbers;
|
||||
background-color : @background;
|
||||
background-image : @backgroundImage;
|
||||
font-family : BookSanity;
|
||||
font-size : 0.317cm;
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
@@ -63,199 +59,175 @@ body {
|
||||
contain-intrinsic-size : auto none;
|
||||
}
|
||||
|
||||
.phb{
|
||||
.phb {
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
p{
|
||||
p {
|
||||
padding-bottom : 0.8em;
|
||||
line-height : 1.269em;
|
||||
&+p{
|
||||
margin-top : -0.8em;
|
||||
}
|
||||
& + p { margin-top : -0.8em; }
|
||||
}
|
||||
ul{
|
||||
margin-bottom : 0.8em;
|
||||
ul {
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.269em;
|
||||
list-style-position : outside;
|
||||
list-style-type : disc;
|
||||
}
|
||||
ol{
|
||||
margin-bottom : 0.8em;
|
||||
ol {
|
||||
padding-left : 1.4em;
|
||||
margin-bottom : 0.8em;
|
||||
line-height : 1.269em;
|
||||
list-style-position : outside;
|
||||
list-style-type : decimal;
|
||||
}
|
||||
//Indents after p or lists
|
||||
p+p, ul+p, ol+p{
|
||||
text-indent : 1em;
|
||||
}
|
||||
img{
|
||||
z-index : -1;
|
||||
}
|
||||
strong{
|
||||
p + p, ul + p, ol + p { text-indent : 1em; }
|
||||
img { z-index : -1; }
|
||||
strong {
|
||||
font-weight : bold;
|
||||
letter-spacing : 0.03em;
|
||||
}
|
||||
em{
|
||||
font-style : italic;
|
||||
}
|
||||
sup{
|
||||
em { font-style : italic; }
|
||||
sup {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : super;
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
}
|
||||
sub{
|
||||
vertical-align : sub;
|
||||
sub {
|
||||
font-size : smaller;
|
||||
line-height : 0;
|
||||
vertical-align : sub;
|
||||
}
|
||||
//*****************************
|
||||
// * HEADERS
|
||||
// *****************************/
|
||||
h1,h2,h3,h4{
|
||||
h1,h2,h3,h4 {
|
||||
margin-top : 0.2em;
|
||||
margin-bottom : 0.2em;
|
||||
font-family : MrJeeves;
|
||||
font-family : "MrJeeves";
|
||||
font-weight : 800;
|
||||
color : @headerText;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
column-span : all;
|
||||
font-size : 0.987cm;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
&+p::first-letter{
|
||||
& + p::first-letter {
|
||||
float : left;
|
||||
font-family : Solberry;
|
||||
font-family : "Solberry";
|
||||
font-size : 10em;
|
||||
color : #222;
|
||||
line-height : 0.795em;
|
||||
color : #222222;
|
||||
}
|
||||
}
|
||||
h2{
|
||||
font-size : 0.705cm;
|
||||
}
|
||||
h3{
|
||||
h2 { font-size : 0.705cm; }
|
||||
h3 {
|
||||
font-size : 0.529cm;
|
||||
border-bottom : 2px solid @headerUnderline;
|
||||
}
|
||||
h4{
|
||||
h4 {
|
||||
margin-bottom : 0.00em;
|
||||
font-size : 0.458cm;
|
||||
}
|
||||
h5{
|
||||
h5 {
|
||||
margin-bottom : 0.2em;
|
||||
font-family : ScalySansSmallCaps;
|
||||
font-family : "ScalySansSmallCaps";
|
||||
font-size : 0.423cm;
|
||||
font-weight : 900;
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE
|
||||
// *****************************/
|
||||
table{
|
||||
table {
|
||||
.useSansSerif();
|
||||
width : 100%;
|
||||
margin-bottom : 1em;
|
||||
font-size : 10pt;
|
||||
thead{
|
||||
display: table-row-group;
|
||||
thead {
|
||||
display : table-row-group;
|
||||
font-weight : 800;
|
||||
th{
|
||||
vertical-align : bottom;
|
||||
padding-bottom : 0.3em;
|
||||
th {
|
||||
padding-right : 0.1em;
|
||||
padding-bottom : 0.3em;
|
||||
padding-left : 0.1em;
|
||||
vertical-align : bottom;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
padding : 0.3em 0.1em;
|
||||
}
|
||||
&:nth-child(odd){
|
||||
background-color : @noteGreen;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td { padding : 0.3em 0.1em; }
|
||||
&:nth-child(odd) { background-color : @noteGreen; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * NOTE
|
||||
// *****************************/
|
||||
blockquote{
|
||||
blockquote {
|
||||
.useSansSerif();
|
||||
box-sizing : border-box;
|
||||
margin-bottom : 1em;
|
||||
padding : 5px 10px;
|
||||
margin-bottom : 1em;
|
||||
background-color : @noteGreen;
|
||||
border-style : solid;
|
||||
border-width : 11px;
|
||||
border-image : @noteBorderImage 11;
|
||||
border-image-outset : 9px 0px;
|
||||
box-shadow : 1px 4px 14px #888;
|
||||
p, ul{
|
||||
box-shadow : 1px 4px 14px #888888;
|
||||
p, ul {
|
||||
font-size : 0.352cm;
|
||||
line-height : 1.083em;
|
||||
}
|
||||
}
|
||||
//If a note starts a column, give it space at the top to render border
|
||||
pre+blockquote, h2+blockquote, h3+blockquote, h4+blockquote, h5+blockquote {
|
||||
margin-top : 13px;
|
||||
}
|
||||
pre + blockquote, h2 + blockquote, h3 + blockquote, h4 + blockquote, h5 + blockquote { margin-top : 13px; }
|
||||
//*****************************
|
||||
// * MONSTER STAT BLOCK
|
||||
// *****************************/
|
||||
hr+blockquote{
|
||||
hr+blockquote {
|
||||
position : relative;
|
||||
padding-top : 15px;
|
||||
background-color : @monsterStatBackground;
|
||||
border-style : solid;
|
||||
border-width : 10px;
|
||||
border-image : @monsterBorderImageLegacy 10;
|
||||
h2{
|
||||
h2 {
|
||||
margin-top : -8px;
|
||||
margin-bottom : 0px;
|
||||
&+p{
|
||||
padding-bottom : 0px;
|
||||
}
|
||||
& + p { padding-bottom : 0px; }
|
||||
}
|
||||
h3{
|
||||
font-family : ScalySans;
|
||||
font-weight : 400;
|
||||
h3 {
|
||||
font-family : "ScalySans";
|
||||
font-weight : normal;
|
||||
border-bottom : 1px solid @headerText;
|
||||
}
|
||||
hr+ul{
|
||||
color : @headerText;
|
||||
}
|
||||
ul{
|
||||
hr + ul { color : @headerText; }
|
||||
ul {
|
||||
.useSansSerif();
|
||||
padding-left : 1em;
|
||||
font-size : 0.352cm;
|
||||
}
|
||||
// Monster Ability table
|
||||
hr+table{
|
||||
hr + table {
|
||||
margin : 0;
|
||||
background-color : transparent;
|
||||
border-style : none;
|
||||
border-image : none;
|
||||
tbody{
|
||||
tr:nth-child(odd), tr:nth-child(even){
|
||||
background-color : transparent;
|
||||
}
|
||||
tbody {
|
||||
tr:nth-child(odd), tr:nth-child(even) { background-color : transparent; }
|
||||
}
|
||||
}
|
||||
table{
|
||||
color : @headerText;
|
||||
}
|
||||
p+p{
|
||||
margin-top : 0em;
|
||||
table { color : @headerText; }
|
||||
p + p {
|
||||
padding-bottom : 0.5em;
|
||||
margin-top : 0em;
|
||||
text-indent : 0em;
|
||||
}
|
||||
//Triangle dividers
|
||||
hr{
|
||||
hr {
|
||||
visibility : visible;
|
||||
height : 6px;
|
||||
margin : 4px 0px;
|
||||
@@ -265,100 +237,90 @@ body {
|
||||
}
|
||||
}
|
||||
//Full Width
|
||||
hr+hr+blockquote{
|
||||
hr + hr + blockquote {
|
||||
.useColumns(0.96);
|
||||
column-fill : balance;
|
||||
}
|
||||
//*****************************
|
||||
// * FOOTER
|
||||
// *****************************/
|
||||
&:after{
|
||||
content : "";
|
||||
&:after {
|
||||
position : absolute;
|
||||
bottom : 0px;
|
||||
left : 0px;
|
||||
z-index : 100;
|
||||
height : 50px;
|
||||
width : 100%;
|
||||
height : 50px;
|
||||
content : '';
|
||||
background-image : @footerAccentImage;
|
||||
background-size : cover;
|
||||
}
|
||||
&:nth-child(even){
|
||||
&:after{
|
||||
transform : scaleX(-1);
|
||||
}
|
||||
.pageNumber{
|
||||
left : 2px;
|
||||
}
|
||||
.footnote{
|
||||
&:nth-child(even) {
|
||||
&::after { transform : scaleX(-1); }
|
||||
.pageNumber { left : 2px; }
|
||||
.footnote {
|
||||
left : 80px;
|
||||
text-align : left;
|
||||
}
|
||||
}
|
||||
.pageNumber{
|
||||
.pageNumber {
|
||||
position : absolute;
|
||||
right : 2px;
|
||||
bottom : 22px;
|
||||
width : 50px;
|
||||
font-size : 0.9em;
|
||||
color : #c9ad6a;
|
||||
color : #C9AD6A;
|
||||
text-align : center;
|
||||
&.auto::after {
|
||||
content : counter(phb-page-numbers);
|
||||
}
|
||||
&.auto::after { content : counter(phb-page-numbers); }
|
||||
}
|
||||
.footnote{
|
||||
.footnote {
|
||||
position : absolute;
|
||||
right : 80px;
|
||||
bottom : 32px;
|
||||
z-index : 150;
|
||||
width : 200px;
|
||||
font-size : 0.8em;
|
||||
color : #c9ad6a;
|
||||
color : #C9AD6A;
|
||||
text-align : right;
|
||||
}
|
||||
//*****************************
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
hr{
|
||||
hr {
|
||||
visibility : hidden;
|
||||
margin : 0px;
|
||||
}
|
||||
//Modified unorder list, used in spells
|
||||
hr+ul{
|
||||
margin-bottom : 0.5em;
|
||||
hr + ul {
|
||||
padding-left : 1em;
|
||||
margin-bottom : 0.5em;
|
||||
text-indent : -1em;
|
||||
list-style-type : none;
|
||||
}
|
||||
//Column Break
|
||||
pre, code{
|
||||
pre, code {
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
}
|
||||
//Avoid breaking up
|
||||
p,blockquote,table{
|
||||
p,blockquote,table {
|
||||
z-index : 15;
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
//Better spacing for spell blocks
|
||||
h4+p+hr+ul{
|
||||
margin-top : -0.5em
|
||||
}
|
||||
h4 + p + hr + ul { margin-top : -0.5em; }
|
||||
//Text indent right after table
|
||||
table+p{
|
||||
text-indent : 1em;
|
||||
}
|
||||
table + p { text-indent : 1em; }
|
||||
// Nested lists
|
||||
ul ul,ol ol,ul ol,ol ul{
|
||||
ul ul,ol ol,ul ol,ol ul {
|
||||
margin-bottom : 0px;
|
||||
margin-left : 1.5em;
|
||||
}
|
||||
li{
|
||||
li {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
@@ -367,89 +329,81 @@ body {
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.phb .spellList{
|
||||
.phb .spellList {
|
||||
.useSansSerif();
|
||||
column-count : 4;
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
ul+h5{
|
||||
margin-top : 15px;
|
||||
}
|
||||
p, ul{
|
||||
column-span : all;
|
||||
ul + h5 { margin-top : 15px; }
|
||||
p, ul {
|
||||
font-size : 0.352cm;
|
||||
line-height : 1.263em;
|
||||
}
|
||||
ul{
|
||||
margin-bottom : 0.5em;
|
||||
ul {
|
||||
padding-left : 1em;
|
||||
margin-bottom : 0.5em;
|
||||
text-indent : -1em;
|
||||
list-style-type : none;
|
||||
break-inside : auto;
|
||||
-webkit-column-break-inside : auto;
|
||||
page-break-inside : auto;
|
||||
break-inside : auto;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.phb .wide{
|
||||
column-span : all;
|
||||
.phb .wide {
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
column-span : all;
|
||||
}
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.phb .classTable{
|
||||
.phb .classTable {
|
||||
margin-top : 25px;
|
||||
margin-bottom : 40px;
|
||||
border-collapse : separate;
|
||||
background-color : white;
|
||||
border : initial;
|
||||
border-style : solid;
|
||||
border-image-source : @frameBorderImage;
|
||||
border-image-slice : 150 200 150 200;
|
||||
border-image-width : 47px;
|
||||
border-image-outset : 25px 17px;
|
||||
border-image-repeat : stretch;
|
||||
border-image-slice : 150 200 150 200;
|
||||
border-image-source : @frameBorderImage;
|
||||
border-image-width : 47px;
|
||||
h5{
|
||||
margin-bottom : 10px;
|
||||
}
|
||||
h5 { margin-bottom : 10px; }
|
||||
}
|
||||
//************************************
|
||||
// * DESCRIPTIVE TEXT BOX
|
||||
// ************************************/
|
||||
.phb .descriptive{
|
||||
.phb .descriptive {
|
||||
margin-bottom : 1em;
|
||||
background-color : #faf7ea;
|
||||
font-family : ScalySans;
|
||||
font-family : "ScalySans";
|
||||
background-color : #FAF7EA;
|
||||
border-style : solid;
|
||||
border-width : 7px;
|
||||
border-image : @descriptiveBoxImage 12 stretch;
|
||||
border-image-outset : 4px;
|
||||
box-shadow : 0px 0px 6px #faf7ea;
|
||||
p{
|
||||
box-shadow : 0px 0px 6px #FAF7EA;
|
||||
p {
|
||||
display : block;
|
||||
padding-bottom : 0px;
|
||||
line-height : 1.47em;
|
||||
}
|
||||
p + p {
|
||||
padding-top : .8em;
|
||||
}
|
||||
p + p { padding-top : 0.8em; }
|
||||
em {
|
||||
font-family : ScalySans;
|
||||
font-family : "ScalySans";
|
||||
font-style : italic;
|
||||
}
|
||||
strong {
|
||||
font-family : ScalySans;
|
||||
font-family : "ScalySans";
|
||||
font-weight : 800;
|
||||
letter-spacing : -0.02em;
|
||||
}
|
||||
}
|
||||
.phb pre+.descriptive{
|
||||
margin-top : 8px;
|
||||
}
|
||||
.phb pre + .descriptive { margin-top : 8px; }
|
||||
|
||||
//*****************************
|
||||
// * ARTIST CREDIT BLOCK
|
||||
@@ -457,47 +411,41 @@ body {
|
||||
.phb {
|
||||
.artist {
|
||||
position : absolute;
|
||||
text-align : center;
|
||||
font-family : WalterTurncoat;
|
||||
font-family : "WalterTurncoat";
|
||||
font-size : 0.27cm;
|
||||
color : @captionText;
|
||||
text-align : center;
|
||||
p, p + p {
|
||||
margin : unset;
|
||||
text-indent : unset;
|
||||
line-height : 0.941em;
|
||||
text-indent : unset;
|
||||
}
|
||||
h5 {
|
||||
h5 {
|
||||
font-family : "WalterTurncoat";
|
||||
font-size : 1.3em;
|
||||
font-family : WalterTurncoat;
|
||||
}
|
||||
a{
|
||||
a {
|
||||
color : inherit;
|
||||
text-decoration : unset;
|
||||
&:hover {
|
||||
text-decoration : underline;
|
||||
}
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.phb .toc{
|
||||
.phb .toc {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
a{
|
||||
a {
|
||||
color : black;
|
||||
text-decoration : none;
|
||||
&:hover{
|
||||
text-decoration : underline;
|
||||
}
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
ul{
|
||||
ul {
|
||||
padding-left : 0;
|
||||
list-style-type : none;
|
||||
}
|
||||
&>ul>li{
|
||||
margin-bottom : 10px;
|
||||
}
|
||||
& > ul > li { margin-bottom : 10px; }
|
||||
}
|
||||
|
||||
@@ -7,37 +7,29 @@
|
||||
}
|
||||
|
||||
.page {
|
||||
background-image : url(/assets/DMG_background.png);
|
||||
background-image : url("/assets/DMG_background.png");
|
||||
background-size : cover;
|
||||
|
||||
/*TABLES WITHIN NOTES*/
|
||||
.note table tbody tr:nth-child(odd) {
|
||||
background:#fff;
|
||||
}
|
||||
/* TABLES WITHIN NOTES */
|
||||
.note table tbody tr:nth-child(odd) { background : #FFFFFF; }
|
||||
|
||||
/*DROP CAP*/
|
||||
/* DROP CAP */
|
||||
h1 + p::first-letter {
|
||||
background-image: unset;
|
||||
color:black;
|
||||
color : black;
|
||||
background-image : unset;
|
||||
}
|
||||
|
||||
.quote p:first-child::first-line {
|
||||
all: unset;
|
||||
.quote p:first-child::first-line { all : unset; }
|
||||
|
||||
&::after {
|
||||
height : 58px;
|
||||
background-image : url("/assets/DMG_footerAccent.png");
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image : url(/assets/DMG_footerAccent.png);
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.footnote {
|
||||
bottom : 40px;
|
||||
}
|
||||
.footnote { bottom : 40px; }
|
||||
}
|
||||
|
||||
.page:has(.partCover) {
|
||||
|
||||
.partCover {
|
||||
background-image: @partCoverHeaderDMG;
|
||||
}
|
||||
.partCover { background-image : @partCoverHeaderDMG; }
|
||||
}
|
||||
|
||||
@@ -305,12 +305,12 @@
|
||||
margin-left : -0.16cm;
|
||||
background-color : var(--HB_Color_MonsterStatBackground);
|
||||
background-image : @monsterBlockBackground;
|
||||
background-blend-mode : overlay;
|
||||
border-style : solid;
|
||||
border-width : 7px 6px;
|
||||
border-image : @monsterBorderImage 14 round;
|
||||
border-image-outset : 0px 2px;
|
||||
box-shadow : 1px 4px 14px #888888;
|
||||
background-blend-mode : overlay;
|
||||
}
|
||||
|
||||
position : relative;
|
||||
@@ -335,9 +335,9 @@
|
||||
|
||||
//Triangle dividers
|
||||
hr {
|
||||
visibility : visible;
|
||||
height : 6px;
|
||||
margin : 0.12cm 0cm;
|
||||
visibility : visible;
|
||||
background-image : @redTriangleImage;
|
||||
background-size : 100% 100%;
|
||||
border : none;
|
||||
@@ -355,8 +355,8 @@
|
||||
}
|
||||
|
||||
.bonus {
|
||||
float: right;
|
||||
padding-right: 0.5em;
|
||||
float : right;
|
||||
padding-right : 0.5em;
|
||||
}
|
||||
|
||||
// Monster Ability table
|
||||
@@ -456,8 +456,8 @@
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
hr {
|
||||
margin : 0px;
|
||||
visibility : hidden;
|
||||
margin : 0px;
|
||||
}
|
||||
//Text indent right after table
|
||||
table + p { text-indent : 1em; }
|
||||
@@ -525,10 +525,10 @@
|
||||
content : '';
|
||||
background-image : @classTableDecoration,
|
||||
@classTableDecoration;
|
||||
filter : drop-shadow(0px 0px 1px #C8C5C080);
|
||||
background-repeat : no-repeat, no-repeat;
|
||||
background-position : top, bottom;
|
||||
background-size : contain, contain;
|
||||
filter : drop-shadow(0px 0px 1px #C8C5C080);
|
||||
transform : translateY(-50%) translateX(-50%);
|
||||
}
|
||||
&.decoration.wide::before {
|
||||
@@ -547,38 +547,38 @@
|
||||
&::after { display : none; }
|
||||
.frontCover { position : absolute; }
|
||||
h1 {
|
||||
margin-top : 1.55cm;
|
||||
margin-bottom : 0;
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 2.245cm;
|
||||
font-weight : normal;
|
||||
line-height : 1.9cm;
|
||||
color : white;
|
||||
text-shadow : unset;
|
||||
text-transform : uppercase;
|
||||
-webkit-text-stroke: 0.2cm black;
|
||||
paint-order:stroke;
|
||||
margin-top : 1.55cm;
|
||||
margin-bottom : 0;
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 2.245cm;
|
||||
font-weight : normal;
|
||||
line-height : 1.9cm;
|
||||
color : white;
|
||||
text-transform : uppercase;
|
||||
text-shadow : unset;
|
||||
-webkit-text-stroke : 0.2cm black;
|
||||
paint-order : stroke;
|
||||
}
|
||||
h2 {
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 0.85cm;
|
||||
font-weight : normal;
|
||||
color : white;
|
||||
letter-spacing : 0.1cm;
|
||||
-webkit-text-stroke: 0.14cm black;
|
||||
paint-order:stroke;
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
font-size : 0.85cm;
|
||||
font-weight : normal;
|
||||
color : white;
|
||||
letter-spacing : 0.1cm;
|
||||
-webkit-text-stroke : 0.14cm black;
|
||||
paint-order : stroke;
|
||||
}
|
||||
hr {
|
||||
position : relative;
|
||||
display : block;
|
||||
visibility : visible;
|
||||
width : 12cm;
|
||||
height : 0.5cm;
|
||||
margin : auto;
|
||||
visibility : visible;
|
||||
background-image : @horizontalRule;
|
||||
filter : drop-shadow(0 0 3px black);
|
||||
background-size : 100% 100%;
|
||||
border : none;
|
||||
filter : drop-shadow(0 0 3px black);
|
||||
}
|
||||
.banner {
|
||||
position : absolute;
|
||||
@@ -601,19 +601,19 @@
|
||||
filter : drop-shadow(2px 2px 2px black);
|
||||
}
|
||||
.footnote {
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : 1.3cm;
|
||||
left : 0;
|
||||
width : 70%;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
font-family : 'Overpass';
|
||||
font-size : 0.496cm;
|
||||
color : white;
|
||||
text-align : center;
|
||||
-webkit-text-stroke: 0.1cm black;
|
||||
paint-order:stroke;
|
||||
position : absolute;
|
||||
right : 0;
|
||||
bottom : 1.3cm;
|
||||
left : 0;
|
||||
width : 70%;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
font-family : 'Overpass';
|
||||
font-size : 0.496cm;
|
||||
color : white;
|
||||
text-align : center;
|
||||
-webkit-text-stroke : 0.1cm black;
|
||||
paint-order : stroke;
|
||||
}
|
||||
.logo {
|
||||
position : absolute;
|
||||
@@ -621,9 +621,7 @@
|
||||
right : 0;
|
||||
left : 0;
|
||||
filter : drop-shadow(0 0 0.075cm black);
|
||||
img {
|
||||
height : 2cm;
|
||||
}
|
||||
img { height : 2cm; }
|
||||
}
|
||||
}
|
||||
// *****************************
|
||||
@@ -652,10 +650,10 @@
|
||||
hr {
|
||||
position : relative;
|
||||
display : block;
|
||||
visibility : visible;
|
||||
width : 12cm;
|
||||
height : 0.5cm;
|
||||
margin : auto;
|
||||
visibility : visible;
|
||||
background-image : @horizontalRule;
|
||||
background-size : 100% 100%;
|
||||
border : none;
|
||||
@@ -666,19 +664,17 @@
|
||||
bottom : 1cm;
|
||||
left : 0;
|
||||
height : 2cm;
|
||||
img {
|
||||
height : 2cm;
|
||||
}
|
||||
img { height : 2cm; }
|
||||
}
|
||||
}
|
||||
// *****************************
|
||||
// * BACK COVER
|
||||
// *****************************/
|
||||
.page:has(.backCover) {
|
||||
padding : 2.25cm 1.3cm 2cm 1.3cm;
|
||||
color : #FFFFFF;
|
||||
columns : 1;
|
||||
padding : 2.25cm 1.3cm 2cm 1.3cm;
|
||||
line-height : 1.4em;
|
||||
color : #FFFFFF;
|
||||
columns : 1;
|
||||
&::after { display : none; }
|
||||
.columnWrapper { width : 7.6cm; }
|
||||
.backCover {
|
||||
@@ -689,7 +685,7 @@
|
||||
background-repeat : no-repeat;
|
||||
background-size : contain;
|
||||
}
|
||||
.blank { height: 1.4em; }
|
||||
.blank { height : 1.4em; }
|
||||
h1 {
|
||||
margin-bottom : 0.3cm;
|
||||
font-family : 'NodestoCapsCondensed';
|
||||
@@ -707,12 +703,12 @@
|
||||
height : 100%;
|
||||
}
|
||||
hr {
|
||||
visibility : visible;
|
||||
width : 4.5cm;
|
||||
height : 0.53cm;
|
||||
margin-top : 1.1cm;
|
||||
margin-right : auto;
|
||||
margin-left : auto;
|
||||
visibility : visible;
|
||||
background-image : @horizontalRule;
|
||||
background-size : 100% 100%;
|
||||
border : none;
|
||||
@@ -805,7 +801,7 @@ h6,
|
||||
.page:has(.insideCover),
|
||||
.monster,
|
||||
.noToC,
|
||||
.toc { --TOC: exclude; }
|
||||
.toc { --TOC : exclude; }
|
||||
|
||||
|
||||
// Brew level default inclusion changes.
|
||||
@@ -815,34 +811,32 @@ h6,
|
||||
|
||||
// Block level inclusion changes
|
||||
// These include either a single (include) or a range (depth)
|
||||
.tocIncludeH1 h1 {--TOC: include; }
|
||||
.tocIncludeH2 h2 {--TOC: include; }
|
||||
.tocIncludeH3 h3 {--TOC: include; }
|
||||
.tocIncludeH4 h4 {--TOC: include; }
|
||||
.tocIncludeH5 h5 {--TOC: include; }
|
||||
.tocIncludeH6 h6 {--TOC: include; }
|
||||
.tocIncludeH1 h1 {--TOC : include; }
|
||||
.tocIncludeH2 h2 {--TOC : include; }
|
||||
.tocIncludeH3 h3 {--TOC : include; }
|
||||
.tocIncludeH4 h4 {--TOC : include; }
|
||||
.tocIncludeH5 h5 {--TOC : include; }
|
||||
.tocIncludeH6 h6 {--TOC : include; }
|
||||
|
||||
.tocDepthH2 :is(h1, h2) {--TOC: include; }
|
||||
.tocDepthH3 :is(h1, h2, h3) {--TOC: include; }
|
||||
.tocDepthH4 :is(h1, h2, h3, h4) {--TOC: include; }
|
||||
.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC: include; }
|
||||
.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC: include; }
|
||||
.tocDepthH2 :is(h1, h2) {--TOC : include; }
|
||||
.tocDepthH3 :is(h1, h2, h3) {--TOC : include; }
|
||||
.tocDepthH4 :is(h1, h2, h3, h4) {--TOC : include; }
|
||||
.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC : include; }
|
||||
.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC : include; }
|
||||
|
||||
// Block level exclusion changes
|
||||
// These exclude a single block level
|
||||
.tocExcludeH1 h1 {--TOC: exclude; }
|
||||
.tocExcludeH2 h2 {--TOC: exclude; }
|
||||
.tocExcludeH3 h3 {--TOC: exclude; }
|
||||
.tocExcludeH4 h4 {--TOC: exclude; }
|
||||
.tocExcludeH5 h5 {--TOC: exclude; }
|
||||
.tocExcludeH6 h6 {--TOC: exclude; }
|
||||
.tocExcludeH1 h1 {--TOC : exclude; }
|
||||
.tocExcludeH2 h2 {--TOC : exclude; }
|
||||
.tocExcludeH3 h3 {--TOC : exclude; }
|
||||
.tocExcludeH4 h4 {--TOC : exclude; }
|
||||
.tocExcludeH5 h5 {--TOC : exclude; }
|
||||
.tocExcludeH6 h6 {--TOC : exclude; }
|
||||
|
||||
.page:has(.partCover) {
|
||||
--TOC: exclude;
|
||||
& h1 {
|
||||
--TOC: include;
|
||||
}
|
||||
}
|
||||
--TOC : exclude;
|
||||
& h1 { --TOC : include; }
|
||||
}
|
||||
|
||||
.page {
|
||||
&:has(.toc)::after { display : none; }
|
||||
@@ -908,9 +902,7 @@ h6,
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
}
|
||||
.toc.wide li {
|
||||
break-inside: auto;
|
||||
}
|
||||
.toc.wide li { break-inside : auto; }
|
||||
}
|
||||
|
||||
// *****************************
|
||||
@@ -935,9 +927,7 @@ h6,
|
||||
|
||||
.page h1 + * { margin-top : 0; }
|
||||
|
||||
.page .descriptive.wide + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.page .descriptive.wide + * { margin-top : 0; }
|
||||
|
||||
//*****************************
|
||||
// * RUNE TABLE
|
||||
@@ -952,8 +942,8 @@ h6,
|
||||
width : 1.3cm;
|
||||
height : 1.3cm;
|
||||
font-weight : normal;
|
||||
text-transform : uppercase;
|
||||
vertical-align : middle;
|
||||
text-transform : uppercase;
|
||||
outline : 1px solid #000000;
|
||||
}
|
||||
th {
|
||||
|
||||
@@ -21,9 +21,9 @@ body { counter-reset : page-numbers 0; }
|
||||
// *****************************/
|
||||
.page {
|
||||
.block {
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
width : 100%;
|
||||
break-inside : avoid;
|
||||
img { z-index : 0; }
|
||||
}
|
||||
.inline-block {
|
||||
@@ -58,8 +58,8 @@ body { counter-reset : page-numbers 0; }
|
||||
content-visibility : auto;
|
||||
contain-intrinsic-size : auto none;
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page {
|
||||
p {
|
||||
@@ -120,7 +120,7 @@ body { counter-reset : page-numbers 0; }
|
||||
// * CODE BLOCKS
|
||||
// ************************************/
|
||||
code {
|
||||
font-family : 'Courier New', "Courier", monospace;
|
||||
font-family : 'Courier New', 'Courier', monospace;
|
||||
overflow-wrap : break-word;
|
||||
white-space : pre-wrap;
|
||||
}
|
||||
@@ -133,10 +133,10 @@ body { counter-reset : page-numbers 0; }
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
.columnSplit {
|
||||
margin-top : 0;
|
||||
visibility : hidden;
|
||||
-webkit-column-break-after : always;
|
||||
margin-top : 0;
|
||||
break-after : always;
|
||||
-webkit-column-break-after : always;
|
||||
-moz-column-break-after : always;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
@@ -199,11 +199,11 @@ body { counter-reset : page-numbers 0; }
|
||||
background-color : var(--HB_Color_WatercolorStain); /* default color */
|
||||
background-size : cover;
|
||||
-webkit-mask-image : var(--wc);
|
||||
-webkit-mask-size : contain;
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-image : var(--wc);
|
||||
mask-size : contain;
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-repeat : no-repeat;
|
||||
-webkit-mask-size : contain;
|
||||
mask-size : contain;
|
||||
--wc : @watercolor1; /* default image */
|
||||
}
|
||||
|
||||
@@ -231,15 +231,15 @@ body { counter-reset : page-numbers 0; }
|
||||
height : 200%;
|
||||
background-image : var(--checkerboard);
|
||||
background-size : 20px;
|
||||
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : repeat-x;
|
||||
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
|
||||
-webkit-mask-position : 50% calc(50% - var(--offset));
|
||||
mask-image : var(--wc);
|
||||
-webkit-mask-repeat : repeat-x;
|
||||
mask-repeat : repeat-x;
|
||||
mask-size : 50%;
|
||||
-webkit-mask-position : 50% calc(50% - var(--offset));
|
||||
mask-position : 50% calc(50% - var(--offset));
|
||||
-webkit-mask-size : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
|
||||
mask-size : 50%;
|
||||
transform : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
--rotation : 0;
|
||||
--revealer : none;
|
||||
--checkerboard : none;
|
||||
@@ -276,19 +276,19 @@ body { counter-reset : page-numbers 0; }
|
||||
}
|
||||
&.revealImage {
|
||||
--revealer : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
|
||||
--checkerboard : url("/assets/waterColorMasks/missingImage.png"); //shows any masked regions not filled by image
|
||||
--checkerboard : url('/assets/waterColorMasks/missingImage.png'); //shows any masked regions not filled by image
|
||||
}
|
||||
}
|
||||
|
||||
.imageMaskEdge {
|
||||
&1 { --wc : url("/assets/waterColorMasks/edge/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/edge/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/edge/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/edge/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/edge/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/edge/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/edge/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/edge/0008.webp"); }
|
||||
&1 { --wc : url('/assets/waterColorMasks/edge/0001.webp'); }
|
||||
&2 { --wc : url('/assets/waterColorMasks/edge/0002.webp'); }
|
||||
&3 { --wc : url('/assets/waterColorMasks/edge/0003.webp'); }
|
||||
&4 { --wc : url('/assets/waterColorMasks/edge/0004.webp'); }
|
||||
&5 { --wc : url('/assets/waterColorMasks/edge/0005.webp'); }
|
||||
&6 { --wc : url('/assets/waterColorMasks/edge/0006.webp'); }
|
||||
&7 { --wc : url('/assets/waterColorMasks/edge/0007.webp'); }
|
||||
&8 { --wc : url('/assets/waterColorMasks/edge/0008.webp'); }
|
||||
}
|
||||
|
||||
[class*='imageMaskCenter'] {
|
||||
@@ -296,15 +296,15 @@ body { counter-reset : page-numbers 0; }
|
||||
left : calc(var(--offsetX));
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 0% 0%;
|
||||
mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 0% 0%;
|
||||
mask-position : 50% 50%;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
|
||||
& > p:has(img) {
|
||||
position : absolute;
|
||||
@@ -321,23 +321,23 @@ body { counter-reset : page-numbers 0; }
|
||||
}
|
||||
|
||||
.imageMaskCenter {
|
||||
&1 { --wc : url("/assets/waterColorMasks/center/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/center/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/center/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/center/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/center/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/center/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/center/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/center/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/center/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/center/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/center/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/center/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/center/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/center/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/center/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/center/0016.webp"); }
|
||||
&special { --wc : url("/assets/waterColorMasks/center/special.webp"); }
|
||||
&1 { --wc : url('/assets/waterColorMasks/center/0001.webp'); }
|
||||
&2 { --wc : url('/assets/waterColorMasks/center/0002.webp'); }
|
||||
&3 { --wc : url('/assets/waterColorMasks/center/0003.webp'); }
|
||||
&4 { --wc : url('/assets/waterColorMasks/center/0004.webp'); }
|
||||
&5 { --wc : url('/assets/waterColorMasks/center/0005.webp'); }
|
||||
&6 { --wc : url('/assets/waterColorMasks/center/0006.webp'); }
|
||||
&7 { --wc : url('/assets/waterColorMasks/center/0007.webp'); }
|
||||
&8 { --wc : url('/assets/waterColorMasks/center/0008.webp'); }
|
||||
&9 { --wc : url('/assets/waterColorMasks/center/0009.webp'); }
|
||||
&10 { --wc : url('/assets/waterColorMasks/center/0010.webp'); }
|
||||
&11 { --wc : url('/assets/waterColorMasks/center/0011.webp'); }
|
||||
&12 { --wc : url('/assets/waterColorMasks/center/0012.webp'); }
|
||||
&13 { --wc : url('/assets/waterColorMasks/center/0013.webp'); }
|
||||
&14 { --wc : url('/assets/waterColorMasks/center/0014.webp'); }
|
||||
&15 { --wc : url('/assets/waterColorMasks/center/0015.webp'); }
|
||||
&16 { --wc : url('/assets/waterColorMasks/center/0016.webp'); }
|
||||
&special { --wc : url('/assets/waterColorMasks/center/special.webp'); }
|
||||
}
|
||||
|
||||
|
||||
@@ -346,15 +346,15 @@ body { counter-reset : page-numbers 0; }
|
||||
left : calc(-50% + var(--offsetX));
|
||||
width : 200%;
|
||||
height : 200%;
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
-webkit-mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 50% 50%;
|
||||
mask-image : var(--wc), var(--revealer);
|
||||
-webkit-mask-repeat : no-repeat;
|
||||
mask-repeat : no-repeat;
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
-webkit-mask-position : 50% 50%;
|
||||
mask-position : 50% 50%;
|
||||
-webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
mask-size : 100% 100%; //Scale both dimensions to fit page size
|
||||
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
|
||||
& > p:has(img) {
|
||||
bottom : 25%;
|
||||
left : 25%;
|
||||
@@ -367,43 +367,43 @@ body { counter-reset : page-numbers 0; }
|
||||
}
|
||||
}
|
||||
.imageMaskCorner {
|
||||
&1 { --wc : url("/assets/waterColorMasks/corner/0001.webp"); }
|
||||
&2 { --wc : url("/assets/waterColorMasks/corner/0002.webp"); }
|
||||
&3 { --wc : url("/assets/waterColorMasks/corner/0003.webp"); }
|
||||
&4 { --wc : url("/assets/waterColorMasks/corner/0004.webp"); }
|
||||
&5 { --wc : url("/assets/waterColorMasks/corner/0005.webp"); }
|
||||
&6 { --wc : url("/assets/waterColorMasks/corner/0006.webp"); }
|
||||
&7 { --wc : url("/assets/waterColorMasks/corner/0007.webp"); }
|
||||
&8 { --wc : url("/assets/waterColorMasks/corner/0008.webp"); }
|
||||
&9 { --wc : url("/assets/waterColorMasks/corner/0009.webp"); }
|
||||
&10 { --wc : url("/assets/waterColorMasks/corner/0010.webp"); }
|
||||
&11 { --wc : url("/assets/waterColorMasks/corner/0011.webp"); }
|
||||
&12 { --wc : url("/assets/waterColorMasks/corner/0012.webp"); }
|
||||
&13 { --wc : url("/assets/waterColorMasks/corner/0013.webp"); }
|
||||
&14 { --wc : url("/assets/waterColorMasks/corner/0014.webp"); }
|
||||
&15 { --wc : url("/assets/waterColorMasks/corner/0015.webp"); }
|
||||
&16 { --wc : url("/assets/waterColorMasks/corner/0016.webp"); }
|
||||
&17 { --wc : url("/assets/waterColorMasks/corner/0017.webp"); }
|
||||
&18 { --wc : url("/assets/waterColorMasks/corner/0018.webp"); }
|
||||
&19 { --wc : url("/assets/waterColorMasks/corner/0019.webp"); }
|
||||
&20 { --wc : url("/assets/waterColorMasks/corner/0020.webp"); }
|
||||
&21 { --wc : url("/assets/waterColorMasks/corner/0021.webp"); }
|
||||
&22 { --wc : url("/assets/waterColorMasks/corner/0022.webp"); }
|
||||
&23 { --wc : url("/assets/waterColorMasks/corner/0023.webp"); }
|
||||
&24 { --wc : url("/assets/waterColorMasks/corner/0024.webp"); }
|
||||
&25 { --wc : url("/assets/waterColorMasks/corner/0025.webp"); }
|
||||
&26 { --wc : url("/assets/waterColorMasks/corner/0026.webp"); }
|
||||
&27 { --wc : url("/assets/waterColorMasks/corner/0027.webp"); }
|
||||
&28 { --wc : url("/assets/waterColorMasks/corner/0028.webp"); }
|
||||
&29 { --wc : url("/assets/waterColorMasks/corner/0029.webp"); }
|
||||
&30 { --wc : url("/assets/waterColorMasks/corner/0030.webp"); }
|
||||
&31 { --wc : url("/assets/waterColorMasks/corner/0031.webp"); }
|
||||
&32 { --wc : url("/assets/waterColorMasks/corner/0032.webp"); }
|
||||
&33 { --wc : url("/assets/waterColorMasks/corner/0033.webp"); }
|
||||
&34 { --wc : url("/assets/waterColorMasks/corner/0034.webp"); }
|
||||
&35 { --wc : url("/assets/waterColorMasks/corner/0035.webp"); }
|
||||
&36 { --wc : url("/assets/waterColorMasks/corner/0036.webp"); }
|
||||
&37 { --wc : url("/assets/waterColorMasks/corner/0037.webp"); }
|
||||
&1 { --wc : url('/assets/waterColorMasks/corner/0001.webp'); }
|
||||
&2 { --wc : url('/assets/waterColorMasks/corner/0002.webp'); }
|
||||
&3 { --wc : url('/assets/waterColorMasks/corner/0003.webp'); }
|
||||
&4 { --wc : url('/assets/waterColorMasks/corner/0004.webp'); }
|
||||
&5 { --wc : url('/assets/waterColorMasks/corner/0005.webp'); }
|
||||
&6 { --wc : url('/assets/waterColorMasks/corner/0006.webp'); }
|
||||
&7 { --wc : url('/assets/waterColorMasks/corner/0007.webp'); }
|
||||
&8 { --wc : url('/assets/waterColorMasks/corner/0008.webp'); }
|
||||
&9 { --wc : url('/assets/waterColorMasks/corner/0009.webp'); }
|
||||
&10 { --wc : url('/assets/waterColorMasks/corner/0010.webp'); }
|
||||
&11 { --wc : url('/assets/waterColorMasks/corner/0011.webp'); }
|
||||
&12 { --wc : url('/assets/waterColorMasks/corner/0012.webp'); }
|
||||
&13 { --wc : url('/assets/waterColorMasks/corner/0013.webp'); }
|
||||
&14 { --wc : url('/assets/waterColorMasks/corner/0014.webp'); }
|
||||
&15 { --wc : url('/assets/waterColorMasks/corner/0015.webp'); }
|
||||
&16 { --wc : url('/assets/waterColorMasks/corner/0016.webp'); }
|
||||
&17 { --wc : url('/assets/waterColorMasks/corner/0017.webp'); }
|
||||
&18 { --wc : url('/assets/waterColorMasks/corner/0018.webp'); }
|
||||
&19 { --wc : url('/assets/waterColorMasks/corner/0019.webp'); }
|
||||
&20 { --wc : url('/assets/waterColorMasks/corner/0020.webp'); }
|
||||
&21 { --wc : url('/assets/waterColorMasks/corner/0021.webp'); }
|
||||
&22 { --wc : url('/assets/waterColorMasks/corner/0022.webp'); }
|
||||
&23 { --wc : url('/assets/waterColorMasks/corner/0023.webp'); }
|
||||
&24 { --wc : url('/assets/waterColorMasks/corner/0024.webp'); }
|
||||
&25 { --wc : url('/assets/waterColorMasks/corner/0025.webp'); }
|
||||
&26 { --wc : url('/assets/waterColorMasks/corner/0026.webp'); }
|
||||
&27 { --wc : url('/assets/waterColorMasks/corner/0027.webp'); }
|
||||
&28 { --wc : url('/assets/waterColorMasks/corner/0028.webp'); }
|
||||
&29 { --wc : url('/assets/waterColorMasks/corner/0029.webp'); }
|
||||
&30 { --wc : url('/assets/waterColorMasks/corner/0030.webp'); }
|
||||
&31 { --wc : url('/assets/waterColorMasks/corner/0031.webp'); }
|
||||
&32 { --wc : url('/assets/waterColorMasks/corner/0032.webp'); }
|
||||
&33 { --wc : url('/assets/waterColorMasks/corner/0033.webp'); }
|
||||
&34 { --wc : url('/assets/waterColorMasks/corner/0034.webp'); }
|
||||
&35 { --wc : url('/assets/waterColorMasks/corner/0035.webp'); }
|
||||
&36 { --wc : url('/assets/waterColorMasks/corner/0036.webp'); }
|
||||
&37 { --wc : url('/assets/waterColorMasks/corner/0037.webp'); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -438,11 +438,9 @@ body { counter-reset : page-numbers 0; }
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
.blank {
|
||||
height: 1em;
|
||||
margin-top: 0;
|
||||
& + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
& + * { margin-top : 0; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -468,8 +466,8 @@ body { counter-reset : page-numbers 0; }
|
||||
height : 1.5cm;
|
||||
margin : 0 auto;
|
||||
background-color : black;
|
||||
-webkit-mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
mask : url("/assets/naturalCritLogoWhite.svg") center / contain no-repeat;
|
||||
-webkit-mask : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
|
||||
mask : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
|
||||
}
|
||||
.homebreweryIcon.red { background-color : red; }
|
||||
.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
|
||||
@@ -493,12 +491,8 @@ body { counter-reset : page-numbers 0; }
|
||||
.pageNumber { left : 30px; }
|
||||
}
|
||||
|
||||
.resetCounting {
|
||||
counter-set : page-numbers 1;
|
||||
}
|
||||
.resetCounting { counter-set : page-numbers 1; }
|
||||
|
||||
&:not(:has(.skipCounting)) {
|
||||
counter-increment : page-numbers;
|
||||
}
|
||||
&:not(:has(.skipCounting)) { counter-increment : page-numbers; }
|
||||
|
||||
}
|
||||
|
||||
@@ -11,47 +11,35 @@
|
||||
--HB_Color_WatercolorStain : #BBAD82; // Light brown
|
||||
}
|
||||
|
||||
.useSansSerif(){
|
||||
font-family : PermanentMarker;
|
||||
.useSansSerif() {
|
||||
font-family : "PermanentMarker";
|
||||
font-size : 0.3cm;
|
||||
line-height : 1.2em;
|
||||
color : var(--HB_Color_Text2);
|
||||
p,dl,ul,ol {
|
||||
line-height : 1.2em;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left : 1em;
|
||||
}
|
||||
em{
|
||||
font-style : italic;
|
||||
}
|
||||
strong{
|
||||
font-weight : 800;
|
||||
p,dl,ul,ol { line-height : 1.2em; }
|
||||
ul, ol { padding-left : 1em; }
|
||||
em { font-style : italic; }
|
||||
strong {
|
||||
font-size : 1.1em;
|
||||
font-weight : 800;
|
||||
}
|
||||
h5 + * {
|
||||
margin-top : 0.1cm;
|
||||
}
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
column-gap : 0.5cm;
|
||||
h5 + * { margin-top : 0.1cm; }
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance) { column-gap : 0.5cm; }
|
||||
|
||||
.page{
|
||||
background-size : 200% 100%;
|
||||
background-repeat : no-repeat;
|
||||
filter : drop-shadow(1px 4px 14px black);
|
||||
background-image : url(/assets/Journal/Background1.webp);
|
||||
.page {
|
||||
padding : 2.1cm 1.9cm 1.7cm 3.8cm;
|
||||
&:nth-of-type(2n + 1) {
|
||||
background-position : left;
|
||||
}
|
||||
background-image : url("/assets/Journal/Background1.webp");
|
||||
background-repeat : no-repeat;
|
||||
background-size : 200% 100%;
|
||||
filter : drop-shadow(1px 4px 14px black);
|
||||
&:nth-of-type(2n + 1) { background-position : left; }
|
||||
&:nth-of-type(2n) {
|
||||
background-position : right;
|
||||
padding : 2.1cm 3.9cm 1.7cm 1.8cm;
|
||||
background-position : right;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
background-image : url(/assets/Journal/Background2.webp); //Only first page should show ribbon
|
||||
background-image : url("/assets/Journal/Background2.webp"); //Only first page should show ribbon
|
||||
}
|
||||
|
||||
& .columnWrapper {
|
||||
@@ -59,167 +47,137 @@
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * BASE
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page{
|
||||
color : var(--HB_Color_Text);
|
||||
font-family : ReenieBeanie;
|
||||
.page {
|
||||
font-family : "ReenieBeanie";
|
||||
font-size : 0.53cm;
|
||||
line-height : 0.8em;
|
||||
p + * {
|
||||
margin-top : 0.325cm;
|
||||
}
|
||||
p + p{
|
||||
margin-top : 0;
|
||||
}
|
||||
ul{
|
||||
margin-bottom : 0.8em;
|
||||
}
|
||||
ol{
|
||||
margin-bottom : 0.8em;
|
||||
}
|
||||
em{
|
||||
color : var(--HB_Color_Text);
|
||||
p + * { margin-top : 0.325cm; }
|
||||
p + p { margin-top : 0; }
|
||||
ul { margin-bottom : 0.8em; }
|
||||
ol { margin-bottom : 0.8em; }
|
||||
em {
|
||||
font-style : unset;
|
||||
text-decoration : underline;
|
||||
font-style : unset;
|
||||
}
|
||||
del{
|
||||
text-decoration-style: double;
|
||||
}
|
||||
del { text-decoration-style : double; }
|
||||
|
||||
//Indents after p or lists
|
||||
p+p, ul+p, ol+p{
|
||||
text-indent : 1em;
|
||||
}
|
||||
p + p, ul + p, ol + p { text-indent : 1em; }
|
||||
//*****************************
|
||||
// * HEADERS
|
||||
// *****************************/
|
||||
h1,h2,h3,h4,h5{
|
||||
font-family : FrederickaTheGreat;
|
||||
h1,h2,h3,h4,h5 {
|
||||
font-family : "FrederickaTheGreat";
|
||||
font-weight : unset;
|
||||
color : var(--HB_Color_HeaderText);
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
margin-bottom : 0.18cm; //Margin-bottom only because this is WIDE
|
||||
font-size : 0.89cm;
|
||||
line-height : 1em;
|
||||
font-variant : small-caps;
|
||||
&+p::first-letter{
|
||||
line-height : 1em;
|
||||
& + p::first-letter {
|
||||
float : left;
|
||||
font-family : FrederickaTheGreat;
|
||||
line-height : 1em;
|
||||
font-size : 1.9em;
|
||||
padding-left : 40px; //Allow background color to extend into margins
|
||||
margin-top : -0.3cm;
|
||||
margin-bottom : -20px;
|
||||
margin-left : -40px;
|
||||
margin-right : 0.1em;
|
||||
padding-top : 0.3em;
|
||||
padding-bottom : 2px;
|
||||
padding-left : 40px; //Allow background color to extend into margins
|
||||
margin-top : -0.3cm;
|
||||
margin-right : 0.1em;
|
||||
margin-bottom : -20px;
|
||||
margin-left : -40px;
|
||||
font-family : "FrederickaTheGreat";
|
||||
font-size : 1.9em;
|
||||
line-height : 1em;
|
||||
}
|
||||
&+p::first-line{
|
||||
font-variant : small-caps;
|
||||
}
|
||||
& + p::first-line { font-variant : small-caps; }
|
||||
}
|
||||
h2{
|
||||
h2 {
|
||||
font-size : 0.62cm;
|
||||
line-height : 0.988em; //Font is misaligned. Shift up slightly
|
||||
}
|
||||
h3{
|
||||
h3 {
|
||||
margin-left : -0.9em;
|
||||
font-size : 0.575cm;
|
||||
line-height : 0.995em; //Font is misaligned. Shift up slightly
|
||||
margin-left : -0.9em;
|
||||
}
|
||||
h4{
|
||||
h4 {
|
||||
padding-bottom : 5px;
|
||||
font-size : 0.55cm;
|
||||
line-height : 0.971em; //Font is misaligned. Shift up slightly
|
||||
color : var(--HB_Color_Text);
|
||||
padding-bottom : 5px;
|
||||
transform:rotate(0deg);
|
||||
&:nth-of-type(2n) {
|
||||
transform:rotate(1deg);
|
||||
}
|
||||
&:nth-of-type(3n) {
|
||||
transform:rotate(-1.5deg);
|
||||
}
|
||||
transform : rotate(0deg);
|
||||
&:nth-of-type(2n) { transform : rotate(1deg); }
|
||||
&:nth-of-type(3n) { transform : rotate(-1.5deg); }
|
||||
}
|
||||
h5{
|
||||
font-family : PermanentMarker;
|
||||
h5 {
|
||||
font-family : "PermanentMarker";
|
||||
font-size : 0.4cm;
|
||||
color : var(--HB_Color_Text2);
|
||||
font-weight : bold;
|
||||
line-height : 0.951em; //Font is misaligned. Shift up slightly
|
||||
& + * {
|
||||
margin-top : 0.2cm;
|
||||
}
|
||||
color : var(--HB_Color_Text2);
|
||||
& + * { margin-top : 0.2cm; }
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE
|
||||
// *****************************/
|
||||
table{
|
||||
table {
|
||||
.useSansSerif();
|
||||
& + * {
|
||||
margin-top : 0.325cm;
|
||||
}
|
||||
thead{
|
||||
th{
|
||||
vertical-align : bottom;
|
||||
& + * { margin-top : 0.325cm; }
|
||||
thead {
|
||||
th {
|
||||
padding : 0.14em 0;
|
||||
vertical-align : bottom;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
padding : 0.14em 0;
|
||||
}
|
||||
&:nth-child(odd){
|
||||
background-image : linear-gradient(to left, #41212100, #41212122, #41212100);
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td { padding : 0.14em 0; }
|
||||
&:nth-child(odd) { background-image : linear-gradient(to left, #41212100, #41212122, #41212100); }
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * NOTE
|
||||
// *****************************/
|
||||
.note{
|
||||
.note {
|
||||
.useSansSerif();
|
||||
padding : 0.2cm;
|
||||
background-image : url("/assets/Journal/HashMarks.png"),
|
||||
linear-gradient(to bottom right, #FF000000, #A36A4E14, #41212100);
|
||||
background-repeat : no-repeat;
|
||||
background-position : center;
|
||||
background-size : 120% 120%;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image-source : url(/assets/Journal/Border1.png);
|
||||
border-image-source : url("/assets/Journal/Border1.png");
|
||||
border-image-slice : 18 18 18 18;
|
||||
border-image-width : 6px 6px 6px 6px;
|
||||
border-image-outset : 5px 5px 5px 5px;
|
||||
border-image-repeat : stretch stretch;
|
||||
background-image : url(/assets/Journal/HashMarks.png),
|
||||
linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
|
||||
background-size : 120% 120%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : center;
|
||||
padding : 0.2cm;
|
||||
:where(&) {
|
||||
margin-top : 9px; //Prevent top border getting cut off on colbreak
|
||||
}
|
||||
& + * {
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
padding-bottom : 0px;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0;
|
||||
}
|
||||
& + * { margin-top : 0.45cm; }
|
||||
h5 { font-size : 0.375cm; }
|
||||
p { padding-bottom : 0px; }
|
||||
:last-child { margin-bottom : 0; }
|
||||
}
|
||||
//************************************
|
||||
// * DESCRIPTIVE TEXT BOX
|
||||
// ************************************/
|
||||
* + .descriptive {
|
||||
margin-top : 0.6cm;
|
||||
}
|
||||
.descriptive{
|
||||
* + .descriptive { margin-top : 0.6cm; }
|
||||
.descriptive {
|
||||
.useSansSerif();
|
||||
padding : 0.2cm;
|
||||
background-image : url("/assets/Journal/HashMarks.png"),
|
||||
linear-gradient(to bottom right, #FF000000, #41212114, #41212100);
|
||||
background-repeat : no-repeat;
|
||||
background-position : center;
|
||||
background-size : 120% 120%;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-image-source : url('/assets/Journal/Border2.png');
|
||||
@@ -227,27 +185,13 @@
|
||||
border-image-width : 20px;
|
||||
border-image-outset : 16px 20px 16px 20px;
|
||||
border-image-repeat : stretch stretch;
|
||||
background-image : url(/assets/Journal/HashMarks.png),
|
||||
linear-gradient(to bottom right, #ff000000, #41212114, #41212100);
|
||||
background-size : 120% 120%;
|
||||
background-repeat : no-repeat;
|
||||
background-position : center;
|
||||
padding : 0.2cm;
|
||||
:where(&) {
|
||||
margin-top : 4px; //Prevent top border getting cut off on colbreak
|
||||
}
|
||||
& + * {
|
||||
margin-top : 0.45cm;
|
||||
}
|
||||
h5 {
|
||||
font-size : 0.375cm;
|
||||
}
|
||||
p{
|
||||
padding-bottom : 0px;
|
||||
}
|
||||
:last-child {
|
||||
margin-bottom : 0;
|
||||
}
|
||||
& + * { margin-top : 0.45cm; }
|
||||
h5 { font-size : 0.375cm; }
|
||||
p { padding-bottom : 0px; }
|
||||
:last-child { margin-bottom : 0; }
|
||||
}
|
||||
//*****************************
|
||||
// * Images Snippets
|
||||
@@ -257,25 +201,23 @@
|
||||
.artist {
|
||||
position : absolute;
|
||||
width : auto;
|
||||
text-align : center;
|
||||
font-family : WalterTurncoat;
|
||||
font-family : "WalterTurncoat";
|
||||
font-size : 0.27cm;
|
||||
color : var(--HB_Color_CaptionText);
|
||||
text-align : center;
|
||||
p, p + p {
|
||||
margin : unset;
|
||||
text-indent : unset;
|
||||
line-height : 1em;
|
||||
text-indent : unset;
|
||||
}
|
||||
h5 {
|
||||
h5 {
|
||||
font-family : "WalterTurncoat";
|
||||
font-size : 1.3em;
|
||||
font-family : WalterTurncoat;
|
||||
}
|
||||
a{
|
||||
a {
|
||||
color : inherit;
|
||||
text-decoration : unset;
|
||||
&:hover {
|
||||
text-decoration : underline;
|
||||
}
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -285,6 +227,10 @@
|
||||
.monster {
|
||||
.useSansSerif();
|
||||
&.frame {
|
||||
padding : 0.2cm;
|
||||
background-image : url('/assets/Journal/HashMarks.png'),
|
||||
linear-gradient(to bottom right, #FF000000, #A36A4E14, #41212100);
|
||||
background-size : 100%;
|
||||
border-style : solid;
|
||||
border-width : 7px 6px;
|
||||
border-image-source : url('/assets/Journal/Border3.png');
|
||||
@@ -292,33 +238,29 @@
|
||||
border-image-width : 15px 20px 15px 20px;
|
||||
border-image-outset : 12px 12px 12px 12px;
|
||||
border-image-repeat : stretch round;
|
||||
background-image : url('/assets/Journal/HashMarks.png'),
|
||||
linear-gradient(to bottom right, #ff000000, #a36a4e14, #41212100);
|
||||
background-blend-mode : screen multiply;
|
||||
background-size : 100%;
|
||||
padding : 0.2cm;
|
||||
}
|
||||
|
||||
color: var(--HB_Color_Text);
|
||||
position : relative;
|
||||
padding : 0px;
|
||||
margin-bottom : 0.325cm;
|
||||
|
||||
color : var(--HB_Color_Text);
|
||||
|
||||
//Headers
|
||||
h2{
|
||||
h2 {
|
||||
margin : 0;
|
||||
font-size : 0.62cm;
|
||||
line-height : 1em;
|
||||
margin : 0;
|
||||
&+p {
|
||||
& + p {
|
||||
margin-bottom : 0; //Monster size and type subtext
|
||||
}
|
||||
}
|
||||
h3{
|
||||
h3 {
|
||||
padding-bottom : 0.05cm;
|
||||
margin-left : 0;
|
||||
font-variant : small-caps;
|
||||
padding-bottom : 0.05cm;
|
||||
}
|
||||
hr{
|
||||
hr {
|
||||
visibility : visible;
|
||||
height : 6px;
|
||||
margin : 0.12cm 0cm;
|
||||
@@ -330,24 +272,18 @@
|
||||
}
|
||||
|
||||
// Monster Ability table
|
||||
hr + table:first-of-type{
|
||||
hr + table:first-of-type {
|
||||
margin : 0;
|
||||
column-span : none;
|
||||
background-image : none;
|
||||
color : inherit;
|
||||
background-image : none;
|
||||
border-style : none;
|
||||
border-image : none;
|
||||
color : inherit;
|
||||
tr {
|
||||
background-image : none;
|
||||
}
|
||||
td,th {
|
||||
padding: 0px;
|
||||
}
|
||||
column-span : none;
|
||||
tr { background-image : none; }
|
||||
td,th { padding : 0px; }
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom : 0;
|
||||
}
|
||||
:last-child { margin-bottom : 0; }
|
||||
|
||||
strong, em {
|
||||
font-style : normal;
|
||||
@@ -356,29 +292,27 @@
|
||||
}
|
||||
|
||||
//Full Width
|
||||
.monster.wide{
|
||||
.monster.wide {
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * FOOTER
|
||||
// *****************************/
|
||||
&:nth-child(odd){
|
||||
.pageNumber{
|
||||
left : 3cm;
|
||||
}
|
||||
.footnote{
|
||||
&:nth-child(odd) {
|
||||
.pageNumber { left : 3cm; }
|
||||
.footnote {
|
||||
left : 4.5cm;
|
||||
text-align : left;
|
||||
}
|
||||
}
|
||||
.pageNumber{
|
||||
font-family : FrederickaTheGreat;
|
||||
.pageNumber {
|
||||
right : 3cm;
|
||||
bottom : 1.25cm;
|
||||
font-family : "FrederickaTheGreat";
|
||||
color : var(--HB_Color_HeaderText);
|
||||
}
|
||||
.footnote{
|
||||
.footnote {
|
||||
position : absolute;
|
||||
right : 4.5cm;
|
||||
bottom : 1.25cm;
|
||||
@@ -391,154 +325,134 @@
|
||||
//************************************
|
||||
// * CODE BLOCKS
|
||||
// ************************************/
|
||||
code{
|
||||
font-size : 0.3cm;
|
||||
code {
|
||||
padding : 0px 4px;
|
||||
color : var(--HB_Color_Text);
|
||||
font-size : 0.3cm;
|
||||
vertical-align : middle;
|
||||
background-color : #faf7ea;
|
||||
color : var(--HB_Color_Text);
|
||||
background-color : #FAF7EA;
|
||||
border-radius : 4px;
|
||||
}
|
||||
|
||||
pre code{
|
||||
pre code {
|
||||
padding : 0.15cm;
|
||||
margin-bottom : 2px;
|
||||
border-style : solid;
|
||||
border-width : 1px;
|
||||
border-radius : 12px;
|
||||
border-image : @codeBorderImage 26 stretch;
|
||||
border-image-width : 10px;
|
||||
border-image-outset : 2px;
|
||||
border-radius : 12px;
|
||||
margin-bottom : 2px;
|
||||
padding : 0.15cm;
|
||||
.page :where(&) {
|
||||
margin-top : 2px; //Prevent top border getting cut off on colbreak
|
||||
}
|
||||
& + * {
|
||||
margin-top : 0.325cm;
|
||||
}
|
||||
& + * { margin-top : 0.325cm; }
|
||||
}
|
||||
//*****************************
|
||||
// * EXTRAS
|
||||
// *****************************/
|
||||
hr{
|
||||
hr {
|
||||
visibility : hidden;
|
||||
border : none;
|
||||
margin : 0px;
|
||||
border : none;
|
||||
}
|
||||
//Text indent right after table
|
||||
table+p{
|
||||
text-indent : 1em;
|
||||
}
|
||||
table + p { text-indent : 1em; }
|
||||
a, a:visited, a:hover {
|
||||
color: var(--HB_Color_Text);
|
||||
transition:all 1s ease;
|
||||
}
|
||||
a:hover {
|
||||
color:red;
|
||||
color : var(--HB_Color_Text);
|
||||
transition : all 1s ease;
|
||||
}
|
||||
a:hover { color : red; }
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
|
||||
.page .spellList{
|
||||
.page .spellList {
|
||||
.useSansSerif();
|
||||
font-family : PermanentMarker;
|
||||
font-family : "PermanentMarker";
|
||||
column-count : 2;
|
||||
ul+h5{
|
||||
margin-top : 15px;
|
||||
}
|
||||
ul{
|
||||
margin-bottom : 0.5em;
|
||||
ul + h5 { margin-top : 15px; }
|
||||
ul {
|
||||
padding-left : 1em;
|
||||
margin-bottom : 0.5em;
|
||||
text-indent : -1em;
|
||||
list-style-type : none;
|
||||
break-inside : auto;
|
||||
-webkit-column-break-inside : auto;
|
||||
page-break-inside : auto;
|
||||
break-inside : auto;
|
||||
}
|
||||
&.wide{
|
||||
column-count : 4;
|
||||
}
|
||||
&.wide { column-count : 4; }
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable{
|
||||
th[colspan]:not([rowspan]) {
|
||||
white-space : nowrap;
|
||||
}
|
||||
h5 + table{
|
||||
margin-top : 0.2cm;
|
||||
}
|
||||
.page .classTable {
|
||||
th[colspan]:not([rowspan]) { white-space : nowrap; }
|
||||
h5 + table { margin-top : 0.2cm; }
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page .toc{
|
||||
.page .toc {
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
h1 {
|
||||
text-align : center;
|
||||
margin-bottom : 0.3cm;
|
||||
text-align : center;
|
||||
}
|
||||
a{
|
||||
a {
|
||||
display : inline;
|
||||
color : inherit;
|
||||
text-decoration : none;
|
||||
&:hover{
|
||||
text-decoration : underline;
|
||||
}
|
||||
&:hover { text-decoration : underline; }
|
||||
}
|
||||
h4 {
|
||||
margin-top : 0.2cm;
|
||||
line-height : 0.4cm;
|
||||
& + ul li {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
& + ul li { line-height : 1.2em; }
|
||||
}
|
||||
ul{
|
||||
ul {
|
||||
padding-left : 0;
|
||||
list-style-type : none;
|
||||
li + li h3 {
|
||||
margin-top : 0.26cm;
|
||||
line-height : 1em
|
||||
}
|
||||
h3 span:first-child::after {
|
||||
border : none;
|
||||
line-height : 1em;
|
||||
}
|
||||
h3 span:first-child::after { border : none; }
|
||||
span {
|
||||
display : table-cell;
|
||||
&:first-child {
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
&::after {
|
||||
content : "";
|
||||
position : absolute;
|
||||
bottom : 0.08cm;
|
||||
margin-left : 0.06cm; /* Spacing before dot leaders */
|
||||
width : 100%;
|
||||
border-bottom : 0.05cm dotted #000;
|
||||
margin-left : 0.06cm; /* Spacing before dot leaders */
|
||||
content : '';
|
||||
border-bottom : 0.05cm dotted #000000;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
font-family : ReenieBeanie;
|
||||
font-size : 0.34cm;
|
||||
font-weight : normal;
|
||||
color : black;
|
||||
text-align : right;
|
||||
vertical-align : bottom; /* Keep page number bottom-aligned */
|
||||
width : 1%;
|
||||
padding-left : 0.06cm; /* Spacing after dot leaders */
|
||||
/*white-space : nowrap; /* Uncomment if needed */
|
||||
font-family : "ReenieBeanie";
|
||||
font-size : 0.34cm;
|
||||
font-weight : normal;
|
||||
vertical-align : bottom; /* Keep page number bottom-aligned */
|
||||
color : black;
|
||||
text-align : right;
|
||||
/* white-space : nowrap; /* Uncomment if needed */
|
||||
}
|
||||
}
|
||||
ul { /*List indent*/
|
||||
ul { /* List indent */
|
||||
margin-left : 1em;
|
||||
}
|
||||
}
|
||||
&.wide{
|
||||
&.wide {
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
}
|
||||
@@ -546,6 +460,4 @@
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide {
|
||||
margin-bottom : 0.45cm;
|
||||
}
|
||||
.page .wide { margin-bottom : 0.45cm; }
|
||||
|
||||
@@ -1,88 +1,83 @@
|
||||
.editor .codeEditor .CodeMirror {
|
||||
// Themes with dark backgrounds
|
||||
&.cm-s-3024-night,
|
||||
&.cm-s-abbott,
|
||||
&.cm-s-abcdef,
|
||||
&.cm-s-ambiance,
|
||||
&.cm-s-ayu-dark,
|
||||
&.cm-s-ayu-mirage,
|
||||
&.cm-s-base16-dark,
|
||||
&.cm-s-bespin,
|
||||
&.cm-s-blackboard,
|
||||
&.cm-s-cobalt,
|
||||
&.cm-s-colorforth,
|
||||
&.cm-s-darcula,
|
||||
&.cm-s-dracula,
|
||||
&.cm-s-duotone-dark,
|
||||
&.cm-s-erlang-dark,
|
||||
&.cm-s-gruvbox-dark,
|
||||
&.cm-s-hopscotch,
|
||||
&.cm-s-icecoder,
|
||||
&.cm-s-isotope,
|
||||
&.cm-s-lesser-dark,
|
||||
&.cm-s-liquibyte,
|
||||
&.cm-s-lucario,
|
||||
&.cm-s-material,
|
||||
&.cm-s-material-darker,
|
||||
&.cm-s-material-ocean,
|
||||
&.cm-s-material-palenight,
|
||||
&.cm-s-mbo,
|
||||
&.cm-s-midnight,
|
||||
&.cm-s-monokai,
|
||||
&.cm-s-moxer,
|
||||
&.cm-s-night,
|
||||
&.cm-s-nord,
|
||||
&.cm-s-oceanic-next,
|
||||
&.cm-s-panda-syntax,
|
||||
&.cm-s-paraiso-dark,
|
||||
&.cm-s-pastel-on-dark,
|
||||
&.cm-s-railscasts,
|
||||
&.cm-s-rubyblue,
|
||||
&.cm-s-seti,
|
||||
&.cm-s-shadowfox,
|
||||
&.cm-s-the-matrix,
|
||||
&.cm-s-tomorrow-night-bright,
|
||||
&.cm-s-tomorrow-night-eighties,
|
||||
&.cm-s-twilight,
|
||||
&.cm-s-vibrant-ink,
|
||||
&.cm-s-xq-dark,
|
||||
&.cm-s-yonce,
|
||||
&.cm-s-zenburn
|
||||
{
|
||||
.CodeMirror-code {
|
||||
.block:not(.cm-comment) {
|
||||
color: magenta;
|
||||
}
|
||||
.columnSplit {
|
||||
color: black;
|
||||
background-color: rgba(35,153,153,0.5);
|
||||
}
|
||||
.pageLine {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
& ~ pre.CodeMirror-line {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Themes with light backgrounds
|
||||
&.cm-s-default,
|
||||
&.cm-s-3024-day,
|
||||
&.cm-s-ambiance-mobile,
|
||||
&.cm-s-base16-light,
|
||||
&.cm-s-duotone-light,
|
||||
&.cm-s-eclipse,
|
||||
&.cm-s-elegant,
|
||||
&.cm-s-juejin,
|
||||
&.cm-s-neat,
|
||||
&.cm-s-neo,
|
||||
&.cm-s-paraiso-lightm
|
||||
&.cm-s-solarized,
|
||||
&.cm-s-ssms,
|
||||
&.cm-s-ttcn,
|
||||
&.cm-s-xq-light,
|
||||
&.cm-s-yeti {
|
||||
// Future styling for themes with light backgrounds
|
||||
--dummyVar: 'currently unused';
|
||||
}
|
||||
// Themes with dark backgrounds
|
||||
&.cm-s-3024-night,
|
||||
&.cm-s-abbott,
|
||||
&.cm-s-abcdef,
|
||||
&.cm-s-ambiance,
|
||||
&.cm-s-ayu-dark,
|
||||
&.cm-s-ayu-mirage,
|
||||
&.cm-s-base16-dark,
|
||||
&.cm-s-bespin,
|
||||
&.cm-s-blackboard,
|
||||
&.cm-s-cobalt,
|
||||
&.cm-s-colorforth,
|
||||
&.cm-s-darcula,
|
||||
&.cm-s-dracula,
|
||||
&.cm-s-duotone-dark,
|
||||
&.cm-s-erlang-dark,
|
||||
&.cm-s-gruvbox-dark,
|
||||
&.cm-s-hopscotch,
|
||||
&.cm-s-icecoder,
|
||||
&.cm-s-isotope,
|
||||
&.cm-s-lesser-dark,
|
||||
&.cm-s-liquibyte,
|
||||
&.cm-s-lucario,
|
||||
&.cm-s-material,
|
||||
&.cm-s-material-darker,
|
||||
&.cm-s-material-ocean,
|
||||
&.cm-s-material-palenight,
|
||||
&.cm-s-mbo,
|
||||
&.cm-s-midnight,
|
||||
&.cm-s-monokai,
|
||||
&.cm-s-moxer,
|
||||
&.cm-s-night,
|
||||
&.cm-s-nord,
|
||||
&.cm-s-oceanic-next,
|
||||
&.cm-s-panda-syntax,
|
||||
&.cm-s-paraiso-dark,
|
||||
&.cm-s-pastel-on-dark,
|
||||
&.cm-s-railscasts,
|
||||
&.cm-s-rubyblue,
|
||||
&.cm-s-seti,
|
||||
&.cm-s-shadowfox,
|
||||
&.cm-s-the-matrix,
|
||||
&.cm-s-tomorrow-night-bright,
|
||||
&.cm-s-tomorrow-night-eighties,
|
||||
&.cm-s-twilight,
|
||||
&.cm-s-vibrant-ink,
|
||||
&.cm-s-xq-dark,
|
||||
&.cm-s-yonce,
|
||||
&.cm-s-zenburn {
|
||||
.CodeMirror-code {
|
||||
.block:not(.cm-comment) { color : magenta; }
|
||||
.columnSplit {
|
||||
color : black;
|
||||
background-color : rgba(35,153,153,0.5);
|
||||
}
|
||||
.pageLine {
|
||||
background-color : rgba(255,255,255,0.5);
|
||||
& ~ pre.CodeMirror-line { color : black; }
|
||||
}
|
||||
}
|
||||
}
|
||||
// Themes with light backgrounds
|
||||
&.cm-s-default,
|
||||
&.cm-s-3024-day,
|
||||
&.cm-s-ambiance-mobile,
|
||||
&.cm-s-base16-light,
|
||||
&.cm-s-duotone-light,
|
||||
&.cm-s-eclipse,
|
||||
&.cm-s-elegant,
|
||||
&.cm-s-juejin,
|
||||
&.cm-s-neat,
|
||||
&.cm-s-neo,
|
||||
&.cm-s-paraiso-lightm
|
||||
&.cm-s-solarized,
|
||||
&.cm-s-ssms,
|
||||
&.cm-s-ttcn,
|
||||
&.cm-s-xq-light,
|
||||
&.cm-s-yeti {
|
||||
// Future styling for themes with light backgrounds
|
||||
--dummyVar : 'currently unused';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,61 +1,61 @@
|
||||
/* Main Font, serif */
|
||||
@font-face {
|
||||
font-family: BookSanity;
|
||||
src: url('../../../fonts/5e legacy/Bookinsanity.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "BookSanity";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Bookinsanity.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookSanity;
|
||||
src: url('../../../fonts/5e legacy/Bookinsanity Bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "BookSanity";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e legacy/Bookinsanity Bold.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookSanity;
|
||||
src: url('../../../fonts/5e legacy/Bookinsanity Italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "BookSanity";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Bookinsanity Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookSanity;
|
||||
src: url('../../../fonts/5e legacy/Bookinsanity Bold Italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "BookSanity";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e legacy/Bookinsanity Bold Italic.woff2');
|
||||
}
|
||||
|
||||
/* Notes and Tables, sans-serif */
|
||||
@font-face {
|
||||
font-family: ScalySans;
|
||||
src: url('../../../fonts/5e legacy/Scaly Sans.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "ScalySans";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Scaly Sans.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: ScalySansSmallCaps;
|
||||
src: url('../../../fonts/5e legacy/Scaly Sans Caps.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "ScalySansSmallCaps";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Scaly Sans Caps.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: WalterTurncoat;
|
||||
src: url('../../../fonts/5e legacy/WalterTurncoat-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "WalterTurncoat";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/WalterTurncoat-Regular.woff2');
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
@font-face {
|
||||
font-family: MrJeeves;
|
||||
src: url('../../../fonts/5e legacy/Mr Eaves Small Caps.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "MrJeeves";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Mr Eaves Small Caps.woff2');
|
||||
}
|
||||
|
||||
/* Fancy Drop Cap */
|
||||
@font-face {
|
||||
font-family: Solberry;
|
||||
src: url('../../../fonts/5e legacy/Solbera Imitation.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "Solberry";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e legacy/Solbera Imitation.woff2');
|
||||
}
|
||||
|
||||
@@ -1,143 +1,143 @@
|
||||
/* Main Font, serif */
|
||||
@font-face {
|
||||
font-family: BookInsanityRemake;
|
||||
src: url('../../../fonts/5e/Bookinsanity.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "BookInsanityRemake";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Bookinsanity.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookInsanityRemake;
|
||||
src: url('../../../fonts/5e/Bookinsanity Bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "BookInsanityRemake";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Bookinsanity Bold.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookInsanityRemake;
|
||||
src: url('../../../fonts/5e/Bookinsanity Italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "BookInsanityRemake";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Bookinsanity Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: BookInsanityRemake;
|
||||
src: url('../../../fonts/5e/Bookinsanity Bold Italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "BookInsanityRemake";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Bookinsanity Bold Italic.woff2');
|
||||
}
|
||||
|
||||
/* Notes and Tables, sans-serif */
|
||||
@font-face {
|
||||
font-family: ScalySansRemake;
|
||||
src: url('../../../fonts/5e/Scaly Sans.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "ScalySansRemake";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Scaly Sans.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: ScalySansRemake;
|
||||
src: url('../../../fonts/5e/Scaly Sans Bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "ScalySansRemake";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Scaly Sans Bold.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: ScalySansRemake;
|
||||
src: url('../../../fonts/5e/Scaly Sans Italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "ScalySansRemake";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Scaly Sans Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: ScalySansRemake;
|
||||
src: url('../../../fonts/5e/Scaly Sans Bold Italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "ScalySansRemake";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Scaly Sans Bold Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: ScalySansSmallCapsRemake;
|
||||
src: url('../../../fonts/5e/Scaly Sans Caps.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "ScalySansSmallCapsRemake";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Scaly Sans Caps.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: WalterTurncoat;
|
||||
src: url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "WalterTurncoat";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
@font-face {
|
||||
font-family: MrEavesRemake;
|
||||
src: url('../../../fonts/5e/Mr Eaves Small Caps.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "MrEavesRemake";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Mr Eaves Small Caps.woff2');
|
||||
}
|
||||
|
||||
/* Fancy Drop Cap */
|
||||
@font-face {
|
||||
font-family: SolberaImitationRemake; //Tweaked 5e version
|
||||
src: url('../../../fonts/5e/Solbera Imitation Tweak.woff2');
|
||||
font-weight: 100 1000;
|
||||
font-style: normal;
|
||||
font-style: italic;
|
||||
font-family : "SolberaImitationRemake"; //Tweaked 5e version
|
||||
font-style : normal;
|
||||
font-style : italic;
|
||||
font-weight : 100 1000;
|
||||
src : url('../../../fonts/5e/Solbera Imitation Tweak.woff2');
|
||||
}
|
||||
|
||||
/* Cover Page */
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../../../fonts/5e/Nodesto Caps Condensed.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Nodesto Caps Condensed.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Nodesto Caps Condensed Bold.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Nodesto Caps Condensed Italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsWide;
|
||||
src: url('../../../fonts/5e/Nodesto Caps Wide.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
font-family : "NodestoCapsWide";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/Nodesto Caps Wide.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Overpass;
|
||||
src: url('../../../fonts/5e/Overpass Medium.woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family : "Overpass";
|
||||
font-style : normal;
|
||||
font-weight : 500;
|
||||
src : url('../../../fonts/5e/Overpass Medium.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Davek;
|
||||
src: url('../../../fonts/5e/Davek.woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family : "Davek";
|
||||
font-style : normal;
|
||||
font-weight : 500;
|
||||
src : url('../../../fonts/5e/Davek.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Iokharic;
|
||||
src: url('../../../fonts/5e/Iokharic.woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family : "Iokharic";
|
||||
font-style : normal;
|
||||
font-weight : 500;
|
||||
src : url('../../../fonts/5e/Iokharic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: Rellanic;
|
||||
src: url('../../../fonts/5e/Rellanic.woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-family : "Rellanic";
|
||||
font-style : normal;
|
||||
font-weight : 500;
|
||||
src : url('../../../fonts/5e/Rellanic.woff2');
|
||||
}
|
||||
|
||||
@@ -18,29 +18,29 @@ License:
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: Pagella;
|
||||
src: url('../../../fonts/Blank/texgyrepagella-regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "Pagella";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/Blank/texgyrepagella-regular.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pagella;
|
||||
src: url('../../../fonts/Blank/texgyrepagella-bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "Pagella";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/Blank/texgyrepagella-bold.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pagella;
|
||||
src: url('../../../fonts/Blank/texgyrepagella-italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "Pagella";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/Blank/texgyrepagella-italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pagella;
|
||||
src: url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "Pagella";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../../../fonts/Blank/texgyrepagella-bolditalic.woff2');
|
||||
}
|
||||
|
||||
@@ -1,58 +1,58 @@
|
||||
/* Main Font, serif */
|
||||
@font-face {
|
||||
font-family: ReenieBeanie;
|
||||
src: url('../../../fonts/Journal/ReenieBeanie-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "ReenieBeanie";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/Journal/ReenieBeanie-Regular.woff2');
|
||||
}
|
||||
|
||||
/* Notes and Tables, sans-serif */
|
||||
@font-face {
|
||||
font-family: PermanentMarker;
|
||||
src: url('../../../fonts/Journal/PermanentMarker-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "PermanentMarker";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/Journal/PermanentMarker-Regular.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: WalterTurncoat;
|
||||
src: url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "WalterTurncoat";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/5e/WalterTurncoat-Regular.woff2');
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
@font-face {
|
||||
font-family: FrederickaTheGreat;
|
||||
src: url('../../../fonts/Journal/FrederickaTheGreat-Regular.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "FrederickaTheGreat";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../../../fonts/Journal/FrederickaTheGreat-Regular.woff2');
|
||||
}
|
||||
|
||||
/* Cover Page */
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../fonts/5e/Nodesto Caps Condensed.woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : normal;
|
||||
font-weight : normal;
|
||||
src : url('../fonts/5e/Nodesto Caps Condensed.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../fonts/5e/Nodesto Caps Condensed Bold.woff2');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
src : url('../fonts/5e/Nodesto Caps Condensed Bold.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : italic;
|
||||
font-weight : normal;
|
||||
src : url('../fonts/5e/Nodesto Caps Condensed Italic.woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: NodestoCapsCondensed;
|
||||
src: url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-family : "NodestoCapsCondensed";
|
||||
font-style : italic;
|
||||
font-weight : bold;
|
||||
src : url('../fonts/5e/Nodesto Caps Condensed Bold Italic.woff2');
|
||||
}
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
font-weight : normal;
|
||||
font-variant : normal;
|
||||
line-height : 1;
|
||||
text-decoration : inherit;
|
||||
text-transform : none;
|
||||
text-decoration : inherit;
|
||||
text-rendering : optimizeLegibility;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
.phb{
|
||||
.phb {
|
||||
//Double hr for full width elements
|
||||
hr+hr+blockquote{
|
||||
column-span : all;
|
||||
hr + hr + blockquote {
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
column-span : all;
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
hr+table{
|
||||
hr+table {
|
||||
padding-top : 10px;
|
||||
margin-top : -5px;
|
||||
margin-bottom : 50px;
|
||||
padding-top : 10px;
|
||||
border-collapse : separate;
|
||||
background-color : white;
|
||||
border : initial;
|
||||
border-style : solid;
|
||||
border-image-source : @frameBorderImage;
|
||||
border-image-slice : 150 200 150 200;
|
||||
border-image-width : 47px;
|
||||
border-image-outset : 37px 17px;
|
||||
border-image-repeat : round;
|
||||
border-image-slice : 150 200 150 200;
|
||||
border-image-source : @frameBorderImage;
|
||||
border-image-width : 47px;
|
||||
}
|
||||
h5+hr+table{
|
||||
column-span : all;
|
||||
h5 + hr + table {
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
column-span : all;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user