mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 21:31:39 -05:00
a new beginning
This commit is contained in:
272
data/site/newStyles.css
Normal file
272
data/site/newStyles.css
Normal file
@@ -0,0 +1,272 @@
|
||||
/*fonts*/
|
||||
@font-face {
|
||||
font-family: gothammedium;
|
||||
src: url("../fonts/gotham-medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenb;
|
||||
src: url("../fonts/beleren-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: belerenbsc;
|
||||
src: url("../fonts/beleren-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrix;
|
||||
src: url("../fonts/matrix.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixb;
|
||||
src: url("../fonts/matrix-b.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: matrixbsc;
|
||||
src: url("../fonts/matrix-bsc.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantin;
|
||||
src: url("../fonts/mplantin.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: mplantini;
|
||||
src: url("../fonts/mplantin-i.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: goudymedieval;
|
||||
src: url("../fonts/goudy-medieval.ttf");
|
||||
}
|
||||
:root {
|
||||
--shifting-color-1: #00c300;
|
||||
--shifting-color-1-light: #c8ff64;
|
||||
--light-color: #eee;
|
||||
--dark-color: #333;
|
||||
--clear-light: #fff2;
|
||||
--clear-mid: #fff4;
|
||||
--clear-dark: #fff6;
|
||||
}
|
||||
|
||||
|
||||
/*Background & Footer*/
|
||||
html {
|
||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 8pt;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 2.5em;
|
||||
font: 1.3em gothammedium;
|
||||
color: var(--light-color);
|
||||
}
|
||||
|
||||
|
||||
/*Canvas*/
|
||||
canvas {
|
||||
width: calc(100%);
|
||||
height: auto;
|
||||
max-width: 750px;
|
||||
max-height: 1050px;
|
||||
}
|
||||
.canvasContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Grids*/
|
||||
.mainGrid {
|
||||
padding: 0.3em;
|
||||
display: grid;
|
||||
grid-gap: 1.5em;
|
||||
grid-template-columns: auto;
|
||||
font: 1.6em mplantin;
|
||||
}
|
||||
.imageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 9em;
|
||||
min-height: 12.5em;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
|
||||
|
||||
/*Misc elements*/
|
||||
.download {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.pageTitle {
|
||||
font: 5em belerenbsc;
|
||||
text-align: center;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
.bar {
|
||||
background-image: url(../images/manaSymbols/63.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2px;
|
||||
width: 100%;
|
||||
height: 1em;
|
||||
}
|
||||
.imgPreview {
|
||||
width: 100%;
|
||||
}
|
||||
.layer {
|
||||
padding: 2em 2em;
|
||||
color: black;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
margin-bottom: 3em;
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/*Various text modifications*/
|
||||
.title {
|
||||
text-align: center;
|
||||
font: 1.5em belerenbsc;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-indent: 0em;
|
||||
}
|
||||
.paragraph {
|
||||
font: 1em mplantin;
|
||||
text-align: left;
|
||||
}
|
||||
.indent {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
|
||||
/*General modifications*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.selectable {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
|
||||
/*Hyperlinks*/
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
footer a {
|
||||
color: white;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--shifting-color-1-light);
|
||||
}
|
||||
|
||||
|
||||
/*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;
|
||||
}
|
||||
}*/
|
||||
/*Allows the footer to be displayed horizontally on Desktop*/
|
||||
@media screen and (min-width: 375pt) {
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
|
||||
grid-gap: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*WIP (or I'm too lazy to sort these)*/
|
||||
.tabMenu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.tabOption {
|
||||
font: 1.5em belerenbsc;
|
||||
text-align: center;
|
||||
background-color: var(--clear-light);
|
||||
border: 1px solid var(--light-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
.tabOption:hover {
|
||||
background-color: var(--clear-mid);
|
||||
transition: 0s;
|
||||
}
|
||||
.tabOption.tabOptionSelected {
|
||||
background-color: var(--clear-dark);
|
||||
}
|
||||
.tabContent:not(.tabVisible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Reference in New Issue
Block a user