changed shadows + added level info to calss etc.

src/app/journal/journal-character/class/class.component.html

@@ -7,6 +7,7 @@
     @for(feature of class.features; track feature){
     <div class="feature">
       <div class="feature-name">{{ feature.name }}</div>
+      <div class="feature-level">{{ feature.level }}</div>
       <markdown
         class="feature-description"
         [data]="feature.description"

src/app/journal/journal-character/class/class.component.scss

@@ -1,6 +1,6 @@
 .class-container {
     width: 800px;
-    height: 100%;
+    height: calc(100% - 2rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
@@ -20,13 +20,21 @@
 
 .feature {
     margin-top: 2rem;
+    position: relative;
 }
 
 .feature-name {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 1rem;
-    // text-align: center;
+}
+
+.feature-level {
+    position: absolute;
+    left: -1.75rem;
+    top: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
 }
 
 .feature-description {

src/app/journal/journal-character/species/species.component.html

@@ -8,6 +8,7 @@
     @for(ability of species.abilities; track ability){
     <div class="ability">
       <div class="ability-name">{{ ability.name }}</div>
+      <div class="ability-level">{{ ability.level }}</div>
       <markdown
         class="ability-description"
         [data]="ability.description"

src/app/journal/journal-character/species/species.component.scss

@@ -1,6 +1,6 @@
 .species-container {
     width: 800px;
-    height: 100%;
+    height: calc(100% - 2rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
@@ -20,12 +20,21 @@
 
 .abilities {
     margin-top: 2rem;
+    position: relative;
 }
 
 .ability-name {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.ability-level {
+    position: absolute;
+    left: -1.75rem;
+    top: 0;
+    font-size: 1.5rem;
     font-weight: 600;
-    text-align: center;
 }
 
 .ability-description {

src/app/journal/journal-character/subclass/subclass.component.html

@@ -7,6 +7,7 @@
     @for(feature of subclass.features; track feature){
     <div class="feature">
       <div class="feature-name">{{ feature.name }}</div>
+      <div class="feature-level">{{ feature.level }}</div>
       <markdown
         class="feature-description"
         [data]="feature.description"

src/app/journal/journal-character/subclass/subclass.component.scss

@@ -1,6 +1,6 @@
 .subclass-container {
     width: 800px;
-    height: 100%;
+    height: calc(100% - 2rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
@@ -20,6 +20,7 @@
 
 .feature {
     margin-top: 2rem;
+    position: relative;
 }
 
 .feature-name {
@@ -28,6 +29,14 @@
     margin-bottom: 1rem;
 }
 
+.feature-level {
+    position: absolute;
+    left: -1.75rem;
+    top: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
 .feature-description {
     margin-top: 1rem;
 }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.scss

@@ -46,7 +46,7 @@ ul {
 
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     transition: transform 0.2s ease-in-out;
 
@@ -73,7 +73,7 @@ ul {
     padding: 0.5rem;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     transition: transform 0.2s ease-in-out;
 }

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -45,7 +45,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--field-background-color);
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow);
 
   .heading-row {
     flex: 0 0 3rem;
@@ -113,7 +113,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--field-background-color);
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow);
 
   .heading-row {
     flex: 0 0 3rem;
@@ -185,7 +185,7 @@
     position: relative;
     border-radius: 10px;
     background-color: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
   }
 
   .money-icon {
@@ -235,7 +235,7 @@
     align-items: center;
     border-radius: 10px;
     background-color: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
   }
 }
 

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -11,7 +11,7 @@
     // background-image: url("../../../../assets/images/spells/add-spell.jpg");
     // background-size: auto 100%;
     // background-position: center;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     overflow: hidden;
     transition: all 0.3s ease-in-out;
 

src/app/journal/journal-spellcards/journal-spellcards.component.scss

@@ -1,6 +1,6 @@
 .spellcards-container {
   width: 100%;
-  height: 88vh;
+  height: 100%;
   padding: 2rem;
   overflow-y: auto;
   display: flex;

src/app/journal/journal-spellcards/spellcard/spellcard.component.scss

@@ -4,12 +4,12 @@
     border: solid 1px var(--border-color);
     border-radius: 10px;
     background: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     cursor: pointer;
     transition: all 0.3s ease-in-out;
 
     // &:hover {
-    //     box-shadow: var(--shadow-small);
+    //     box-shadow: var(--shadow);
     // }
 
     .name {

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component.scss

@@ -1,46 +1,46 @@
-.attribute-container{
+.attribute-container {
     display: flex;
     justify-content: space-around;
     margin-top: 2rem;
 }
 
-.attribute-value{
+.attribute-value {
     width: 4rem;
     height: 3rem;
     font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin:auto;
+    margin: auto;
     border-radius: 10px;
     background-color: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
 }
 
-.attribute-label{
+.attribute-label {
     margin-top: 0.5rem;
     font-weight: 500;
 }
 
-.skills{
+.skills {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 0.5rem;
 }
 
-.skill-item{
+.skill-item {
     background-color: var(--primary-color);
     border-radius: 1rem;
     font-weight: 500;
     padding: 0.25rem 0.5rem;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
 }
 
-.modifier-table{
+.modifier-table {
     margin-top: 1.5rem;
 }
 
-td{
-    padding: .375rem 1rem
-}
+td {
+    padding: 0.375rem 1rem;
+}

src/app/journal/journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,7 +1,7 @@
 .attribute-box {
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     text-align: center;
     cursor: pointer;

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component.scss

@@ -20,14 +20,14 @@
     }
 
     .skill-name {
-        width: 50%;
+        width: 52%;
         font-size: 1.125em;
         font-weight: 600;
         text-align: start;
     }
 
     .skill-modifier {
-        width: 20%;
+        width: 18%;
         font-size: 1.5em;
         font-weight: 600;
     }

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-panel.component.scss

@@ -1,11 +1,11 @@
-.skill-panel{
+.skill-panel {
     display: flex;
     flex-direction: column;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
-    @media (height < 900px){
-            margin-bottom: 4rem;
-        }
-}
+    @media (height < 900px) {
+        margin-bottom: 4rem;
+    }
+}

src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -2,7 +2,7 @@
     display: flex;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     height: 6rem;
     width: 17rem;

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.scss

@@ -1,11 +1,11 @@
-.life-container{
+.life-container {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     margin-top: 3rem;
 }
 
-.life-box{
+.life-box {
     display: grid;
     grid-template-rows: 1fr 1fr;
     justify-content: center;
@@ -13,19 +13,20 @@
     text-align: center;
 }
 
-.life-input{
+.life-input {
     width: 20%;
     font-size: 1.5rem;
-    margin:auto;
+    margin: auto;
     text-align: center;
     appearance: textfield;
     -moz-appearance: textfield;
     border-radius: 10px;
     border: none;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
 
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;}
-}
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}

src/app/journal/journal-stats/life-container/life/life.component.scss

@@ -3,7 +3,7 @@
     height: 100%;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
 }
 
@@ -76,7 +76,7 @@
     font-size: 1.25rem;
     font-weight: 500;
     border: none;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
 }
 

src/styles.scss

@@ -35,7 +35,7 @@
     // shadows
     --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
     --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
-    --shadow-small: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
+    --shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
     --shadow-medium: 4px 4px 10px 6px rgba(0, 0, 0, 0.2);
     --shadow-large: 4px 4px 10px 8px rgba(0, 0, 0, 0.2);
 
@@ -216,7 +216,7 @@
     align-items: center;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     height: 6rem;
     @media (width > 1699px) {
@@ -277,7 +277,7 @@ input[type="checkbox"] {
     margin: auto;
     border-radius: 10px;
     background-color: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
 }
 
 .value-input {
@@ -420,7 +420,7 @@ input[type="checkbox"] {
     margin: auto;
     border-radius: 10px;
     background-color: white;
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
 }
 
 .details-label {