new styles

Transgender-Resource-Wiki · May 26, 2024 · 1de82aa · 1de82aa
1 parent 4177402
commit 1de82aa
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
@@ -7,9 +7,10 @@ const links = [["Home", "/"],
 ["Media & Other Resources", "/about"], ["About", "/"], ["About", "/"], ["About", "/"], ["About", "/"]];
 import SiteNav from "../scripts/SiteNav"
 import SiteMap from "../components/SiteMap.astro"
-
 import Footer from '../components/Footer.astro';
 import '../styles/ContentsTable.css';
+import '../styles/DescribedLink.css';
+import '../styles/Tooltip.css';
 ---
 <!doctype html>
 <html lang="en">

diff --git a/src/styles/DescribedLink.css b/src/styles/DescribedLink.css
@@ -0,0 +1,45 @@
+.described-link {
+    margin-top: 2%;
+}
+.described-link .dl-title {
+    background: rgb(209, 212, 214);
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    border-left: 5px solid rgb(122, 129, 136);
+    width: fit-content;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.3rem;
+    font-size: clamp(0.9rem, 1.2vw, 1.2rem);
+}
+.described-link .dl-title a {
+    color: blueviolet;
+    text-decoration: none;
+}
+.described-link .dl-title a:hover {
+    text-decoration: underline;
+}
+.described-link .dl-title a img {
+    display: inline;
+    vertical-align: bottom;
+    max-width: 1.5rem;
+    padding-left: 0.5rem;
+}
+.described-link .dl-title p {
+    margin: 0;
+    margin-top: 2%;
+    color: rgb(92, 65, 156);
+    font-size: clamp(0.8rem, 0.9vw, 0.9rem);
+}
+.described-link .dl-content {
+    background: rgb(209, 212, 214);
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    border-top-right-radius: 1rem;
+    border-left: 5px solid rgb(122, 129, 136);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem;
+    font-size: clamp(0.9rem, 1vw, 1.1rem);
+}
diff --git a/src/styles/Tooltip.css b/src/styles/Tooltip.css
@@ -0,0 +1,49 @@
+.tooltip {
+    position: relative;
+    display: inline;
+    vertical-align: bottom;
+}
+/*Tooltip box should be wider on mobile*/
+.tooltip .tooltip-text {
+    visibility: hidden;
+    position: absolute;
+    background: linear-gradient(rgba(0, 0, 0, 0.452), rgba(0,0,0,1));
+    z-index: 1;
+    border-radius: 0.5rem;
+    color: #ffffff;
+    width: 30vw;
+    bottom: 120%;
+    left: 50%;
+    /*margin-left should be about half of width*/
+    margin-left: -15.05vw;
+    text-align: center;
+    padding: 5px 0;
+}
+@media (min-width: 769px) {
+    .tooltip .tooltip-text {
+        visibility: hidden;
+        position: absolute;
+        background: linear-gradient(rgba(0, 0, 0, 0.452), rgba(0,0,0,1));
+        z-index: 1;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        width: 10vw;
+        bottom: 120%;
+        left: 50%;
+        /*margin-left should be about half of width*/
+        margin-left: -5.05vw;
+        text-align: center;
+        padding: 5px 0;
+    }
+}
+.tooltip .tooltip-text::after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    border: 5px solid;
+    border-color: black transparent transparent transparent;
+}
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+}