@@ Line 1: / Line 1: @@
 {{#css:
+.fit-darn-it {
+  max-width: 350px;
+  height: auto;
+}
 .item-block {
@@ Line 14: / Line 19: @@
 }
-.spell-block {
-  background-color: #cb9;
-  border-radius: 5px;
-  box-shadow: 0 0 20px #444 inset;
-  padding: 3px 5px 3px 5px;
-  border: 2px solid #564;
-  width: 360px;
-}
-.spell-title-block {
-  float: right;
-  background-color: #cb9;
-  padding: 3px 5px 3px 5px;
-  margin: 5px;
-  border: none;
-  width: 290px;
-}
-.spell-info-block {
-  float: right;
-  background-color: #aa9;
-  padding: 3px 5px 3px 5px;
-  margin: 5px;
-  border: none;
-  width: 290px;
-}
-.spell-art-block {
-  float: left;
-  background-color: #cb9;
-  margin: 5px;
-  border: none;
-  width: 60px;
-}
-.spell-icon-block {
-  float: left;
-  background-color: #aa9;
-  margin: 5px;
-  border: none;
-  width: 60px;
-}
-.spell-room-block {
-  align-self: center;
-  background-color: #cb9;
-  margin: 5px;
-  border: none;
-  width: 60px;
-}
 .item-threshold {
@@ Line 102: / Line 58: @@
    text-align: left;
    color: #cb9;
-   font-size: 130%;
+   font-size: 110%;
    display: block;
 }
+.item-icon {
+  float: left;
+}
+.float-clear {
+  clear: both;
+}
+.spell-school-icon {
+  float: left;
+}
+.spell-school-description {
+  margin: 15px;
+}
+.spellpage-block {
+  border-radius: 5px;
+  box-shadow: 0 0 20px #444 inset;
+  padding: 0px;
+  margin: 10px;
+  border: 4px solid #564;
+  display: block;
+  max-width: 600px;
+}
+.spell-main-block {
+  background: repeating-conic-gradient(#7b440800 0.000045%, #ac855d40 0.0005%), #cb9;
+  border-radius: 5px;
+  box-shadow: 0 0 20px #444 inset;
+  padding: 5px 10px 10px 10px;
+  border: 4px solid #564;
+  max-width: 600px;
+}
+.spell-grid {
+  display: grid;
+  gap: 1%;
+  grid-template-columns: 25% 10% 50% 10% ;
+  align-items:stretch;
+}
+.spell-icon-block {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  display: block;
+  margin: 0 auto;
+}
+.spell-title-left-block {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  display: block;
+  margin: 0 auto;
+}
+.spell-title-block {
+  grid-column: 3;
+  grid-row: 1;
+  display: block;
+  margin: 0 auto;
+  align-content: end;
+}
+.spell-subtitle-block {
+  grid-column: 3;
+  grid-row: 2;
+  display: block;
+  margin: 0 auto;
+  align-content: start;
+}
+.spell-title-right-block {
+  grid-column: 4;
+  grid-row: 1 / span 2;
+  display: block;
+  margin: 0 auto;
+}
+.spell-research-block {
+  grid-column: 1;
+  grid-row: 3;
+}
+.spell-mana-block {
+  grid-column: 1;
+  grid-row: 4;
+}
+.spell-upkeep-block {
+  grid-column: 1;
+  grid-row: 5;
+}
+.spell-info-block {
+  grid-column: 2 / span 3;
+  grid-row: 3 / span 3;
+  display: block;
+  margin: 0 auto;
+  align-content: center;
+  background: repeating-conic-gradient(#7b440800 0.000045%, #ac855d40 0.0005%), #aa9;
+  padding: 10px;
+}
+.spell-room-icon-block {
+  grid-column: 2 / span 3;
+  grid-row: 3 / span 3;
+  justify-content: center;
+  display: block;
+  margin: 0 auto;
+  padding: 20px;
+}
+.spell-blank-block {
+  grid-column: 1 / span 4;
+  grid-row: 6;
+  justify-content: center;
+  align-items: center;
+  display: block;
+  margin: 0 auto;
+}
+.spell-page-block {
+  grid-column: 1 / span 4;
+  grid-row: 7;
+  display: block;
+  margin: 0 auto;
+  align-content: center;
+}
+.spell-flavor-block {
+  grid-column: 1 / span 4;
+  grid-row: 8;
+  display: block;
+  margin: 0 auto;
+  align-content: center;
+  margin-bottom: 45px;
+}
 .spell-title {
+  color: #411 !important;
    font-family: Georgia, serif !important;
-  display: block !important;
+   font-size: 180% !important;
-  color: #411 !important;
-   font-size: 160% !important;
    font-weight: bold !important;
    text-align: center;
 }
-.item-subtitle {
+.spell-subtitle {
    font-family: Georgia, serif;
-  display: block;
-  clear: both;
    text-align: center;
    color: #733;
    font-weight: bold;
    font-size: 120%;
+}
+.spell-flavor-text {
+  font-family: Georgia, serif;
+  text-align: center;
+  color: #411;
+  font-size: 110%;
+}
+.spell-resource-text {
+  font-family: Verdana, sans-serif !important;
+  color: #411;
+  font-size: 140%;
+  font-weight: bold;
 }
@@ Line 129: / Line 230: @@
    text-align: left;
    color: #411;
-   font-size: 130%;
+   font-size: 110%;
-   display: block;
+}
+.spell-blank-text {
+  font-family: Georgia, serif;
+   display: block;
+  clear: both;
+  text-align: left;
+  padding-left: 25px;
+  color: #666;
+  font-size: 120%;
 }
-.item-icon {
+.outer {
-   float: left;
+  width: 20px;
+}
+.left {
+  border-left: 3px solid #733;
+  border-top: 3px solid #733;
+  border-bottom: 3px solid #733;
+}
+.middle{
+  padding: 20px 45px;
+}
+.right {
+   border-right: 3px solid #733;
+  border-top: 3px solid #733;
+  border-bottom: 3px solid #733;
 }
-.float-clear {
-  clear: both;
-}
@@ Line 209: / Line 329: @@
      opacity: 1;
 }
-.tooltip b:before, .tooltip b:before, .tooltip-long b:before {
+.tooltip b:before, .tooltip-short b:before, .tooltip-long b:before {
    content: "";
    position: absolute;
@@ Line 254: / Line 374: @@
 }
-.tooltip-wrapper:hover .tooltip-short a, .tooltip-wrapper:hover .tooltip a, .tooltip-wrapper:hover .tooltiplong a {
+.tooltip-wrapper:hover .tooltip-short a, .tooltip-wrapper:hover .tooltip a, .tooltip-wrapper:hover .tooltip-long a {
      visibility: visible;
      opacity: 1;
 }
+@media only screen and (max-width: 600px) {
+.item-block,
+.item-block-splitter img {
+	width: 95%!important;
+}
+h4 .item-title, h4 .spell-title {
+	font-size: 120% !important;
+}
+.tooltip-short, .tooltip, .tooltip-long {
+	display: none!important;
+}
+.fit-darn-it {
+  max-width: 150px;
+  height: auto;
+}
+}
-@media screen and (max-width: 850px) {
-  .tooltip-short a img, .tooltip a img, .tooltip-long a img {
-  visibility: hidden !important;
-  }
-}
 }}

Latest revision as of 23:32, 10 October 2023