feat: add utils and improve styles

pierogis · Dec 30, 2023 · 6b7f724 · 6b7f724
1 parent 2a65b76
commit 6b7f724
Show file tree

Hide file tree

Showing 11 changed files with 8,286 additions and 56 deletions.
diff --git a/.changeset/odd-forks-pretend.md b/.changeset/odd-forks-pretend.md
@@ -0,0 +1,5 @@
+---
+"@pierogis/utensils": patch
+---
+
+add words utils
diff --git a/packages/utensils/package.json b/packages/utensils/package.json
@@ -49,14 +49,19 @@
 	"type": "module",
 	"files": [
 		"dist",
-		"./dist/styles/*"
+		"./dist/styles/*",
+		"./dist/utils/*"
 	],
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./styles/*": "./dist/styles/*"
+		"./styles/*": "./dist/styles/*",
+		"./utils/*": {
+			"types": "./dist/utils/*/index.d.ts",
+			"import": "./dist/utils/*/index.js"
+		}
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

diff --git a/packages/utensils/src/lib/components/Card.svelte b/packages/utensils/src/lib/components/Card.svelte
@@ -11,7 +11,6 @@
 <style>
 	.card {
 		padding: 12px;
-		max-width: 90vw;
 		height: 100%;
 
 		display: flex;

diff --git a/packages/utensils/src/lib/components/Layout.svelte b/packages/utensils/src/lib/components/Layout.svelte
@@ -27,8 +27,5 @@
 		align-content: center;
 		justify-content: center;
 		flex-wrap: wrap;
-
-		padding: 1rem;
-		padding-top: 0;
 	}
 </style>
diff --git a/packages/utensils/src/lib/styles/pierogis.css b/packages/utensils/src/lib/styles/pierogis.css
@@ -77,12 +77,6 @@ body {
 	font-size: 16px;
 }
 
-@media screen and (max-width: 768px) {
-	body {
-		font-size: calc(15px + 0.25vw);
-	}
-}
-
 /* end default styles */
 
 /* global css class/element style */
@@ -224,48 +218,6 @@ textarea {
 	font-weight: 400;
 }
 
-h6 {
-	font-size: 0.875em;
-	/* 14px */
-	line-height: 1.25em;
-	/* 20px */
-}
-
-h5 {
-	font-size: 1em;
-	/* 16px */
-	line-height: 1.5em;
-	/* 24px */
-}
-
-h4 {
-	font-size: 1.125em;
-	/* 18px */
-	line-height: 1.75em;
-	/* 28px */
-}
-
-h3 {
-	font-size: 1.25em;
-	/* 20px */
-	line-height: 1.75em;
-	/* 28px */
-}
-
-h2 {
-	font-size: 1.5em;
-	/* 24px */
-	line-height: 2em;
-	/* 32px */
-}
-
-h1 {
-	font-size: 1.875em;
-	/* 30px */
-	line-height: 2.25em;
-	/* 36px */
-}
-
 
 /* end global css class/element style */
 
@@ -291,14 +243,16 @@ header {
 }
 
 nav {
-	padding-top: 16px;
-	padding-bottom: 24px;
+	padding-top: 8px;
+	padding-bottom: 8px;
 
 	background-color: transparent;
 
 	display: flex;
+	flex-wrap: wrap;
 	gap: 10px;
 	justify-content: center;
+	align-items: center;
 
 	text-align: center;
 }
@@ -319,4 +273,58 @@ footer {
 
 	text-align: center;
 	border-top: 2px dashed var(--text-color-st);
+}
+
+blockquote {
+	background-color: var(--secondary-color-st);
+	padding: 1em;
+	border-radius: 8px;
+	width: fit-content;
+	font-family: Courier, monospace;
+}
+
+
+article {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	margin: 1em;
+}
+
+section {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+article a {
+	text-decoration: underline;
+	color: var(--link-color);
+}
+
+article img {
+	border-radius: 16px;
+	object-fit: contain;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+article * {
+	line-height: 1.5em;
+}
+
+article h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0.5em 0;
+}
+
+ul {
+	margin: 0;
 }