Links fix (#94)

* Fix dark mode link contrast

* Disclaimer split

* Adjust dark mode color again

Author: Madis0

app.scss

@@ -98,10 +98,16 @@
   border-top-right-radius: 0px !important;
 }
 
-.markdown-body a {
+.markdown-body a,
+.link-rows a {
   color: var(--color-brand) !important;
 }
 
+html.dark .markdown-body a,
+html.dark .link-rows a  {
+  color: var(--color-brand-dark) !important;
+}
+
 .centered-hero {
   // Center everything along a column.
   display: flex;

app.vue

@@ -39,6 +39,7 @@ useHeadSafe({
 
 :root {
   --color-brand: #785A00 !important;
+  --color-brand-dark: #AD8200 !important;
 }
 
 .page {

components/Footer.vue

@@ -67,10 +67,6 @@ import { Avatar } from "omorphia";
   .link-row {
     display: flex;
     flex-direction: column;
-
-    a {
-      color: var(--color-brand);
-    }
   }
 }
 

lang/en.json

@@ -14,7 +14,8 @@
   "content.contributors.columned-hero.title": "These people are truly amazing...",
   "content.contributors.columned-hero.subtitle": "Fabulously Optimized is a community effort, and we couldn't have done it without these people.",
   "content.home.columned-hero.vanilla": "Manual download",
-  "content.home.columned-hero.disclaimer": "By downloading Fabulously Optimized, you have acknowledged the disclaimers.",
+  "content.home.columned-hero.disclaimer": "By downloading Fabulously Optimized, you have {0}.",
+  "content.home.columned-hero.disclaimer.link": "acknowledged the disclaimers",
   "content.contributors.org": "Organization Members",
   "content.contributors": "Contributors",
   "content.home.columned-hero.title.supercharge": "Supercharge",

pages/contribute.vue

@@ -126,8 +126,21 @@ onMounted(() => {
 
 
 <style>
-body { font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
-li img { width: 1em; height: 1em; margin-right: 0.5em; }
-a { color: var(--color-brand); text-decoration: none; }
-a:hover { text-decoration: underline; }
+body { 
+  font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 
+}
+
+li img { 
+  width: 1em; height: 1em; margin-right: 0.5em; 
+}
+a { 
+  color: var(--color-brand); text-decoration: none; 
+}
+html.dark a {
+  color: var(--color-brand-dark);
+}
+
+a:hover { 
+  text-decoration: underline; 
+}
 </style>

pages/index.vue

@@ -105,7 +105,9 @@ const features: any = ref([
         </Button>
       </div>
       <div>
-        <p id="disclaimer-text"><a href="/terms" target="_blank">{{ $t("content.home.columned-hero.disclaimer") }}</a></p>
+        <i18n-t keypath="content.home.columned-hero.disclaimer" tag="p" id="disclaimer-text">
+          <a href="/terms">{{ $t("content.home.columned-hero.disclaimer.link") }}</a>
+        </i18n-t>
       </div>
     </div>
     <div class="column graph__container">
@@ -187,7 +189,9 @@ const features: any = ref([
       <Button :large="true" color="gray" @click="navigateTo(`/vanilla`, { external: true })">{{ $t("content.home.columned-hero.vanilla") }}</Button>
     </div>
     <div style="margin: -1em">
-      <p id="disclaimer-text"><a href="/terms" target="_blank">{{ $t("content.home.columned-hero.disclaimer") }}</a></p>
+    <i18n-t keypath="content.home.columned-hero.disclaimer" tag="p" id="disclaimer-text">
+      <a href="/terms">{{ $t("content.home.columned-hero.disclaimer.link") }}</a>
+    </i18n-t>
     </div>
     <!-- <DownloadSection class="download-card-fix" /> -->
   </div>
@@ -312,8 +316,7 @@ h3 {
   font-size: 0.6em;
 }
 
-#disclaimer-text, #disclaimer-text > a{
+#disclaimer-text{
   color: gray;
-  cursor: pointer;
 }
 </style>