Swap media queries to container queries, add more breakpoints to make…

… downsizing smoother
andrewmcgivery · Feb 16, 2024 · 8b4350a · 8b4350a
1 parent f765c0f
commit 8b4350a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/React/Components/App/App.scss b/React/Components/App/App.scss
@@ -1,5 +1,6 @@
 .workspace-tabs .workspace-leaf-content.beautitab {
 	color: #dadada;
+	container-type: size;
 
 	.view-header {
 		display: none;
@@ -72,17 +73,33 @@
 					font-size: 1050%;
 					line-height: 1;
 
-					@media screen and (max-width: 520px) {
+					@container (max-width: 520px) {
+						font-size: 850%;
+					}
+
+					@container (max-width: 320px) {
+						font-size: 700%;
+					}
+
+					@container (max-width: 250px) {
 						font-size: 500%;
 					}
 				}
 
 				.beautitab-greeting {
 					font-size: 3rem;
 
-					@media screen and (max-width: 520px) {
+					@container (max-width: 520px) {
+						font-size: 2.5rem;
+					}
+
+					@container (max-width: 320px) {
 						font-size: 2rem;
 					}
+
+					@container (max-width: 250px) {
+						font-size: 1.5rem;
+					}
 				}
 			}
 
@@ -97,7 +114,7 @@
 					width: 50%;
 					min-width: 500px;
 
-					@media screen and (max-width: 520px) {
+					@container (max-width: 520px) {
 						width: 90%;
 						min-width: auto;
 					}
@@ -183,16 +200,16 @@
 				);
 				text-align: center;
 
-				@media screen and (max-width: 599px) {
-					padding-bottom: 60px;
+				@container (max-width: 599px) {
+					padding-bottom: 80px;
 				}
 
 				.beautitab-quote-content {
 					font-size: 1.1rem;
 					font-weight: 500;
 					margin-bottom: 5px;
 
-					@media screen and (max-width: 600px) {
+					@container (max-width: 600px) {
 						font-size: 0.8rem;
 					}
 				}

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "beautitab",
 	"name": "Beautitab",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"minAppVersion": "0.15.0",
 	"description": "Creates a customizable new tab view with beautiful backgrounds, quotes, search, and more.",
 	"author": "Andrew McGivery",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-beautitab",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"description": "A plugin for Obsidian.MD that creates a customizable new tab view with beautiful backgrounds, quotes, search, and more.",
 	"main": "dist/main.js",
 	"scripts": {

diff --git a/versions.json b/versions.json
@@ -4,5 +4,6 @@
 	"1.0.2": "0.15.0",
 	"1.1.0": "0.15.0",
 	"1.1.1": "0.15.0",
-	"1.2.0": "0.15.0"
+	"1.2.0": "0.15.0",
+	"1.2.1": "0.15.0"
 }