GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-08-02 08:11:52 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Kyle
2019-09-15 15:28:40 -07:00
parent f6d6b8446c
commit c5e5ba705b
9 changed files with 970 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
new/data/site/styles.css
View File

@@ -43,8 +43,8 @@
}
footer {
background-color: var(--dark-color);
padding: 25pt;
font: 13pt gothammedium;
padding: 2.5em;
font: 1.3em gothammedium;
color: var(--light-color);
}
body {
@@ -61,63 +61,44 @@ html {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 6pt;
}
canvas {
width: calc(100% - 10pt);
width: calc(100%);
height: auto;
max-width: 750px;
max-height: 1050px;
}
.canvasContainer {
text-align: center;
}
.mainGrid {
padding: 5pt;
padding: 0.3em;
display: grid;
grid-gap: 25pt;
grid-gap: 1.5em;
grid-template-columns: auto;
font: 16pt mplantin;
font: 1.6em mplantin;
}
.imageGrid {
display: grid;
grid-template-columns: auto 143pt;
min-height: 200pt;
}
.layer {
padding: 50pt;
color: black;
font: 24pt belerenbsc;
text-align: center;
}
.layer:nth-child(even) {
background-color: var(--light-color);
background-image: url(images/layerBackground.png);
background-position: center;
background-repeat: no-repeat;
grid-template-columns: auto 9em;
min-height: 12.5em;
}
.imgPreview {
width: 100%;
}
@media screen and (min-width: 306pt) {
.imgPreview {
max-width: 143pt;
max-height: 200pt;
}
}
.cardMenu > div {
/*border: 1px solid red;*/
/*margin-bottom: 5pt;*/
}
.bar {
background-image: url(../images/manaSymbols/63.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 2px;
width: 100%;
height: 20pt;
height: 1em;
}
.cardMenu > div > div:nth-child(1) {
/*border: 1px solid blue;*/
text-align: center;
font: 24pt belerenbsc;
font: 1.5em belerenbsc;
}
.twoGrid {
display: grid;
@@ -149,30 +130,6 @@ canvas {
.input.file {
padding: 0px;
}
@media screen and (min-width: 994pt) {
.mainGrid {
padding: 25pt;
grid-template-columns: calc(750px + 2px) auto;
}
}
@media screen and (min-width: calc(750px + 30pt)) {
canvas {
width: 750px;
height: 1050px;
}
}
@media screen and (min-width: 1024px) {
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
}
@media screen and (max-width: 1023px) {
.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
visibility: visible;
opacity: 1;
}
}
.tooltip {
position: relative;
}
@@ -215,10 +172,90 @@ a {
a:hover {
color: var(--dark-color);
}
footer a {
color: white;
}
footer a:hover {
color: var(--shifting-color-1-light);
}
.hidden {
display: none;
}
.footerGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
grid-template-columns: auto;
grid-gap: 2em;
}
.layer {
padding: 2em 2em;
color: black;
font-size: 2em;
text-align: center;
}
.layer:nth-child(even) {
background-color: var(--light-color);
background-image: url(images/layerBackground.png);
background-position: center;
background-repeat: no-repeat;
}
.title {
font: 1.5em belerenbsc;
}
.pageTitle {
font: 5em belerenbsc;
text-align: center;
padding-top: 0.3em;
}
.paragraph {
font: 1em mplantin;
text-align: left;
}
.indent {
text-indent: 2em;
}
.leftMargin {
margin-left: 2em;
}
/*Controls the area taken by the canvas*/
@media screen and (min-width: 888pt) {
/*Makes room for the canvas and controls to be side by side*/
.mainGrid {
padding: 1.5em;
grid-template-columns: calc(750px + 2px) auto;
}
}
@media screen and (min-width: calc(750px + 2em)) {
/*The canvas can be full size and doesn't have to scale anymore*/
canvas {
width: 750px;
height: 1050px;
}
}
/*The screen is big enough (larger than phone, likely) to use a larger font*/
@media screen and (min-width: 263pt) {
html {
font-size: 10pt;
}
}
/*These control tooltips for mobile devices vs. desktops/laptops*/
@media screen and (min-width: 1024px) {
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
}
@media screen and (max-width: 1023px) {
.tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext {
visibility: visible;
opacity: 1;
}
}
/*The footer can now fit horizontally!*/
@media screen and (min-width: 375pt) {
.footerGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
grid-gap: 1em;
}
}