mobile styling

src/components/FontDemo.jsx

@@ -53,7 +53,7 @@ function FontDemo(props) {
         />
         <ColorPicker onColorChange={handleColorChange} text={"Color"} />
         <br />
-        {props.showDownload && <a className="button corner-button" href={`/fonts/${props.link}`}>Download ➬</a>}
+        {props.showDownload && <a className="button corner-button" href={`/fonts/${props.link}`}>Details ➬</a>}
       </div>
       <style>
       {`

src/css/components/AlphabetGrid.css

@@ -11,6 +11,19 @@
 	flex: 30%;
 }
 
+@media only screen and (max-width: 1000px) {
+	.AlphabetGrid {
+		flex-direction: column;
+	}
+	.AlphabetGrid__sidebar {
+		flex: 100%;
+	}
+
+	.AlphabetGrid__main {
+		flex: 100%;
+	}
+}
+
 
 .AlphabetGrid__glyphs-list {
 	margin: 0;
@@ -44,5 +57,5 @@
 
 .AlphabetGrid__glyphs-list.selected li {
 	font-size: 10rem;
-	padding: 8rem;
+	padding: 7rem;
 }

src/css/components/FontDemo.css

@@ -30,7 +30,14 @@
 	transition: background-color 0.3s; /* Add a smooth transition effect */
 	transition: all .2s;
 	text-align: center;
+	word-wrap: break-word;
   }
+
+  @media only screen and (max-width: 1000px) {
+	.FontDemo__content {
+		font-size: 75px !important;
+	}
+}
 
   .FontDemo__content:focus,
   .FontDemo__content:hover {

src/css/elements/button.css

@@ -21,6 +21,14 @@
 	margin-left: 10px;
 }
 
+@media only screen and (max-width: 1000px) {
+    .button +  .button {
+        margin-left: 0px;
+        margin-top: 10px;
+    }
+
+}
+
 .button:hover {
     background-color: var(--button-hover);
     border-bottom-left-radius: 15px;

src/css/elements/grid.css

@@ -24,10 +24,30 @@
 	border: 1px solid;
 }
 
+@media only screen and (max-width: 1000px) {
+	.condensed-grid .grid-item {
+		writing-mode: vertical-rl; /* Vertical writing mode from right to left */
+		white-space: nowrap; /* Prevent text from wrapping */
+	}
+}
+
+
+
 .grid-item + .grid-item {
 	margin-left: 1rem;
 }
 
+@media only screen and (max-width: 1000px) {
+	.grid-item + .grid-item {
+		margin-top: 1rem;
+		margin-left: 0;
+	}
+	.condensed-grid .grid-item + .grid-item {
+		margin-top: 0rem !important;
+		margin-left: 0;
+	}
+}
+
 
 .grid-item p {
 	padding-top: 1px;

src/css/index.css

@@ -74,6 +74,11 @@ p {
 	display: flex;
 	margin-bottom: 2rem;
 }
+@media only screen and (max-width: 1000px) {
+	.flex {
+		flex-direction: column;
+	}
+}
 
 .flex-child {
 	flex-basis: 50%; 
@@ -98,6 +103,13 @@ p {
 	padding: 1rem;
 }
 
+@media only screen and (max-width: 1000px) {
+	.Detail {
+		flex-direction: column;
+	}
+}
+
+
 
 .FourOhFour__emoji {
 	font-size: 18rem;

src/pages/Detail.jsx

@@ -80,7 +80,7 @@ function Font({ fontData }) {
 			<div className='flex-child'>
 				<div className="flex">
 					<a className="button" href={`https://github.com/mother-type/${name}/raw/main/fonts/${name}.zip`} download>
-						<u>Download Specimen ➬</u>
+						<u>Download Specimen</u>
 					</a>
 					<a className={repository_url ? "button" : "hidden"} href={repository_url || "#"}>
 						<u>Source Files</u>