castle

ui/public/index.css

@@ -1,143 +1,78 @@
-.card-header {
-    padding: 2vw;
+:root {
+    --tan: #E6D7AA;
+    --accent: black;
+    --purple: #251D44;
+    --green: #0B5538;
+    --red: #BC1C02;
+    --brown: #c6a476;
 }
 
-.card-content {
-    padding: 2vw;
+@media (prefers-color-scheme: dark) {
+:root {
+    --tan: #251D44;
+    --accent: #AF7323;
 }
-
-.card-footer {
-    padding: 10px 10px 3vw;
-    display: flex;
-    justify-content: center;
-    font-size: 1.2em;
-}
-
-.card a {
-    background: #af936226;
-    margin-right: 10px;
-}
-
-.card-image figure {
-    margin: 0;
-    padding: 0;
-}
-
-p {
-    font-size: 1.2em;
-}
-
-.card {
-    width: 40vw;
-    border: 1px solid var(--green);
-}
-
-
-.card-image img {
-    width: 100%;
-    height: 40vh;
-    object-fit: cover;
-    display: block;
-}
-
-.grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 5vw;
-    max-width: 90vw;
-    margin-top: 20vh;
-    margin-left: 5vw;
-    margin-bottom: 5vw
 }
 
 @font-face {
-    font-family: 'CrimsonText';
-    src: url('/_/CrimsonText/CrimsonText-Regular.ttf') format('truetype');
+    font-family: 'Canterbury';
+    src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'CrimsonText';
-    src: url('/_/CrimsonText/CrimsonText-Bold.ttf') format('truetype');
+    font-family: 'BonaNova';
+    src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'BonaNova';
+    src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
-@media screen and (max-width: 600px){
-    .card a {
-        background: var(--green);
-        margin-right: 10px;
-    }
+body {
+    font-family: 'BonaNova', sans-serif;
+    font-size: 16px;
+    background-color: var(--tan);
+    color: var(--accent);
+}
 
-    body {
-        font-family: 'CrimsonText', sans-serif;
-        background-color: var(--tan);
-        color: var(--green);
-    }
+#title {
+    padding: 5px 10px; 
+    font-size: 1.7rem;
+    position: fixed; top: 4.5vh; left: 6vw;
+    cursor: pointer; z-index: 1;
+}
 
-    :root {
-        --green: #0B5538;
-        --tan: #FFDFB4;
-    }
+a {
+    cursor: default;
+    text-decoration: none;
+    text-underline-offset: 5px;
+    transition: background .02s, color .2s;
+    user-select: none;
+    color: var(--accent);
+    display: inline-block;   /* makes background and padding behave */
+    padding: 0.2em 0.5em;    /* adds breathing room */
+}
 
-    .card-image img {
-        height: 70vh;
-    }
+a:hover {
+    text-decoration: none;
+    background: var(--green);
+    color: var(--tan);
+}
 
-    .card {
-        margin-bottom: 4vw;
-        padding-bottom: 4vw;
-        width: auto;
-    }
+a:active {
+    background: var(--red);   /* background color works now */
+}
 
-    .content a {
-        background: var(--green);
-        color: var(--tan);
-        border-radius: 6px;
-        padding: 1vw;
-    }
-
-    .card-footer-item {
-        background: var(--green);
-        color: var(--tan);
-        border-radius: 6px;
-        padding: 1vw;
-        margin-right: 1vw;
-        text-decoration: none;
-    }
-
-    .card-header {
-        padding: 2vw;
-    }
-
-    .card-content {
-        padding: 2vw;
-    }
-
-    .card-image {
-        margin: 0; /* Removes spacing around image container */
-        padding: 0;
-    }
-
-    .card-image figure {
-        margin: 0;
-        padding: 0;
-    }
-
-    .card-footer {
-        padding: 10px 10px 10px 2vw;
-        font-size: 1.2em;
-        display: flex;
-        justify-content: center;
-    }
-
-    .grid-container {
-        display: grid;
-        grid-template-columns: repeat(1, 1fr);
-        gap: 5vw;
-        max-width: 90vw;
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
+button {
+    background-color: var(--green);
+    color: var(--tan);
+    padding: 1em;
+    box-shadow: none;
+}