layout changes

Transgender-Resource-Wiki · May 24, 2024 · 667e0b8 · 667e0b8
1 parent 430d01b
commit 667e0b8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 23 deletions.
diff --git a/src/components/SiteMap.astro b/src/components/SiteMap.astro
@@ -61,7 +61,7 @@ const { link } = Astro.props;
 		left: 20%;
     	right: 17%;
 		width: auto;
-		font-size: 1.33rem;
+		font-size: clamp(0.8rem, 4.5vw, 1.33rem);
 		color: whitesmoke;
 		font-family: Verdana, sans-serif, system-ui;
 	}
@@ -79,18 +79,26 @@ const { link } = Astro.props;
 		height: auto;
 		padding-left: 0;
 		text-align: center;
-		font-size: 1.25rem;
+		font-size: clamp(0.75rem, 3vw, 1.25rem);
 		color: whitesmoke;
 		font-family: Verdana, sans-serif, system-ui;
 		list-style-type: none;
 	}
+	.link-list li,
+	.link-list-mobile li {
+		padding-bottom: 4%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: "...";
+		direction: ltr;
+	}
 	.link-list-mobile a {
 		color: whitesmoke;
 		text-decoration: none;
 		text-shadow: 2px 2px 4px black;
 	}
 	.link-list-mobile a:hover {
-			font-size: 1.33rem;
+			font-size: clamp(0.75rem, 3.5vw, 1.33rem);
 	}
 
 	/* Desktop */ 
@@ -104,10 +112,11 @@ const { link } = Astro.props;
 		  	text-align: left;
 		  	top: 5%;
 		  	left: 0;
-		  	width: 12vw;
+		  	width: auto;
+			max-width: 14%;
 		  	height: auto;
 		  	max-height: 28%;
-		  	overflow-y: scroll;
+		  	overflow: scroll;
 		  	flex-direction: column;
 			margin: 0;
 			direction: rtl;
@@ -122,9 +131,9 @@ const { link } = Astro.props;
     		top: 0.2%;
     		margin: 0;
     		left: -0.2%;
-    		width: 11.9vw;
+    		width: 13.9vw;
     		height: 4.25%;
-    		font-size: 1.33rem;
+    		font-size: clamp(0.8rem, 1.33vw, 1.33rem);
     		color: whitesmoke;
     		font-family: Verdana, sans-serif, system-ui;
     		box-sizing: border-box; 
@@ -147,7 +156,7 @@ const { link } = Astro.props;
 		  	width: auto;
 		  	height: auto;
 		  	padding-left: 1.2vw;
-		  	font-size: 1.25rem;
+		  	font-size: clamp(0.75rem, 1vw, 1rem);
 		  	color: whitesmoke;
 		  	font-family: Verdana, sans-serif, system-ui;
 		  	list-style-type: none;
@@ -161,7 +170,7 @@ const { link } = Astro.props;
 		}
 		.link-list a:hover,
 		.link-list-mobile a:hover {
-			font-size: 1.33rem;
+			font-size: clamp(0.8rem, 1.1vw, 1.1rem);
 		}
 	}
 </style>
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
@@ -2,10 +2,9 @@
 const {frontmatter} = Astro.props;
 
 const links = [["Home", "/"],
-["Post", "/post"], ["About2", "/about"], ["About3", "/about"],
-["About4", "/about"], ["About5", "/about"], ["About6", "/about"],
-["About7", "/about"], ["About8", "/about"], ["About9", "/about"],
-["About0", "/about"], ["About1", "/about"], ["About2", "/about"]];
+["Am I Trans?", "/amitrans"], ["Social Transitioning", "/about"],
+["Medical Transitioning", "/about"], ["Traveling", "/traveling"],
+["Media & Other Resources", "/about"], ["About", "/"], ["About", "/"], ["About", "/"], ["About", "/"]];
 import SiteNav from "../scripts/SiteNav"
 import SiteMap from "../components/SiteMap.astro"
 import '../styles/ContentsTable.css';
@@ -35,15 +34,16 @@ import '../styles/ContentsTable.css';
       margin-top: 10vh;
       margin-bottom: 6vh;
       color: rgb(68, 68, 70);
+      display: block;
       font-size: large;
       font-family: Verdana, sans-serif, system-ui;
   }
 
   @media (min-width: 769px) {
     body {
-      display: flex;
+      display: block;
       margin-left: 28vw;
-      margin-right: 20vw;
+      margin-right: 18vw;
       margin-top: 2vh;
       margin-bottom: 2vh;
     }

diff --git a/src/styles/ColoredSideBars.css b/src/styles/ColoredSideBars.css
@@ -56,15 +56,15 @@
     z-index: 0;
     top: 0;
 	  left: 0;
-	  width: 12vw;
+	  width: 14vw;
 	  height: 100vh;
   }
   .left-pink {
     background-color: pink;
     position: fixed;
     z-index: 0;
     top: 0;
-    left: 12vw;
+    left: 14vw;
     width: 4vw;
     height: 100vh;
   }
@@ -96,7 +96,7 @@
     z-index: 1;
     top: 5%;
     left: -0.2%;
-    width: 11.9vw;
+    width: 13.9vw;
     height: 28%;
   }
 

diff --git a/src/styles/ContentsTable.css b/src/styles/ContentsTable.css
@@ -88,7 +88,7 @@
         margin: 0;
         top: 38.25%;
         left: 0%;
-		width: 11.72vw;
+		width: 13.72vw;
 		height: 61vh;
 		max-height: 61vh;
 		flex-direction: column;
@@ -111,12 +111,12 @@
     .contents-table-mobile a {
         color: whitesmoke;
         text-decoration: none;
-        font-size: 1.25rem;
+        font-size: clamp(0.75rem, 3vw, 1.25rem);
         text-shadow: 2px 2px 4px black;
     }
     .contents-table a:hover,
     .contents-table-mobile a:hover {
-        font-size: 1.33rem;
+        font-size: clamp(0.75rem, 3.5vw, 1.33rem);
     }
 
     .contents-table span,
@@ -129,9 +129,9 @@
     	top: 33.5%;
     	margin: 0;
     	left: -0.2%;
-    	width: 11.9vw;
+    	width: 13.9vw;
     	height: 4.25%;
-    	font-size: 1.33rem;
+    	font-size: clamp(0.8rem, 4.5vw, 1.33rem);
     	color: whitesmoke;
     	box-sizing: border-box; 
         overflow: hidden;