From 75e8b0d3e9fa5bb79c941019e245fb2206cb391a Mon Sep 17 00:00:00 2001 From: Clint Date: Thu, 3 Jun 2021 07:28:19 -0400 Subject: [PATCH] made more responsive - wip --- index.html | 23 +++--- tag-style.css | 219 ++++++++++++++++++++++++++++---------------------- 2 files changed, 135 insertions(+), 107 deletions(-) diff --git a/index.html b/index.html index a2650eb..5686f69 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

Instructions

- +
@@ -51,12 +51,12 @@

Instructions

- +
-

Unused Words:

+

Unused Words:

- +
@@ -121,11 +121,16 @@

Or use the button below to donate through PayPal:

-

Disclaimer

-
-

I can't say for sure if it's better for Etsy SEO to use all available characters in your tags or if it's better to keep phrases intact. I've tested it in my own shop (Top 1% Etsy Seller without selling masks) but there are simply too many variables and too many unknowns.

-

From reading Etsy's Guide to Search, you shouldn't use a word more than once in your tags and etsy's search algorithm will put words from seperate tags together to match a query.

-

But since Etsy doesn't share everything about how the algorithm works, I make no guarantees or promises as to the effectiveness of this tool. Use at your own risk, your mileage may vary and so on.

+
+
Disclaimer +

I can't say for sure if it's better for Etsy SEO to use all available characters in your tags or if it's better + to keep phrases intact. I've tested it in my own shop (Top 1% Etsy Seller without selling masks) but there are + simply too many variables and too many unknowns.

+

From reading Etsy's Guide to Search, you shouldn't use a word more than once in your tags and etsy's search + algorithm will put words from seperate tags together to match a query.

+

But since Etsy doesn't share everything about how the algorithm works, I make no guarantees or promises as to + the effectiveness of this tool. Use at your own risk, your mileage may vary and so on.

+
diff --git a/tag-style.css b/tag-style.css index 74bbd9a..eb8f73b 100644 --- a/tag-style.css +++ b/tag-style.css @@ -1,60 +1,61 @@ .header { - background-color: #6cc9d9; + background-color: #6cc9d9; } -input { -} img { width: 485px; height: 89px; -} -body { - - } .container { display: grid; - height: 100vh; + /* height: 100vh; */ grid-template-columns: repeat(12, 1fr); column-gap: 8px; align-items: center; border: solid 10px #6cc9d9; } -.donation { - grid-column: 8 / 12; - background-color: lightgray; - border: solid 2px #80A03E; - height: 100%; - padding: 20px; +img { + display: flex; } +.donation { + grid-column: 8 / 12; + background-color: lightgray; + border: solid 2px #80a03e; + height: 100%; + padding: 20px; +} +.disclaimer-container { + background-color: lightgray; + border: solid 2px #80a03e; + display: grid; +} .app { - padding: 20px; - grid-column: 1 / 7; + padding: 20px; + grid-column: 1 / 7; } .chars { - position: relative; + position: relative; } .chars .chars-tip { - visibility: hidden; - background-color: #6cc9d9; - color: #fff; - text-align: center; - position: absolute; - z-index: 1; - width: 280px; - bottom: 100%; - left: 15%; - margin-left: -140px; - border-radius: 6px; + visibility: hidden; + background-color: #6cc9d9; + color: #fff; + text-align: center; + position: absolute; + z-index: 1; + width: 280px; + bottom: 100%; + left: 15%; + margin-left: -140px; + border-radius: 6px; } .chars:hover .chars-tip { - visibility: visible; - + visibility: visible; } .chars .chars-tip::after { content: " "; @@ -67,26 +68,25 @@ body { border-color: #6cc9d9 transparent transparent transparent; } .phrase { - position: relative; + position: relative; } .phrase .phrase-tip { - visibility: hidden; - background-color: #6cc9d9; - color: #fff; - text-align: center; - position: absolute; - z-index: 1; - width: 280px; - bottom: 100%; - left: 15%; - margin-left: -140px; - border-radius: 6px; + visibility: hidden; + background-color: #6cc9d9; + color: #fff; + text-align: center; + position: absolute; + z-index: 1; + width: 280px; + bottom: 100%; + left: 15%; + margin-left: -140px; + border-radius: 6px; } .phrase:hover .phrase-tip { - visibility: visible; - + visibility: visible; } .phrase .phrase-tip::after { content: " "; @@ -97,80 +97,103 @@ body { border-width: 5px; border-style: solid; border-color: #6cc9d9 transparent transparent transparent; - } +} - button { -/* text-decoration: bold;*/ - background-color: #6cc9d9; - color: #fff; - border-color: #D98B4C; -/* padding-left: 20px; +button { + /* text-decoration: bold;*/ + background-color: #6cc9d9; + color: #fff; + border-color: #d98b4c; + /* padding-left: 20px; padding-right: 20px;*/ - } +} button.gen { font-size: 20px; width: 45%; height: 50px; } - button.reset { - font-size: 20px; +button.reset { + font-size: 20px; width: 45%; height: 50px; - float: right; - } + float: right; +} - footer { - text-align: center; - - } +footer { + text-align: center; +} - .d-text { - font-family: 'Lato', sans-serif; - font-size: larger; +.d-text { + font-family: "Lato", sans-serif; + font-size: larger; +} - } +.disclaimer { + font-family: "Lato", sans-serif; + text-align: center; +} - .disclaimer { - font-family: 'Lato', sans-serif; - text-align: center; - } +h1, +h2, +h3, +h4 { + font-family: "Roboto", sans-serif; +} - h1, h2, h3, h4 { - font-family: 'Roboto', sans-serif; +.crypto { + font-family: "Source Code Pro", monospace; +} +.io { + padding: 20px; + display: grid; + grid: auto / 250px 250px auto; +} +@media only screen and (max-width: 600px) { + .app { + grid-column: 1; + grid-row: 1; + padding: 0%; + width: auto; + height: auto; } - - .crypto { - font-family: 'Source Code Pro', monospace; + .tags { + padding-right: 5px; } - .io { - padding: 20px; - display: grid; - grid: auto / 250px 250px auto; + max-width: 80vw; + display: flex; } - -.input { - -} -.display { - column-count: 3; - font-size: 20px; - border: solid 2px #D98B4C; - padding: 20px; + .donation { + display: none; } - -.tags { - + .container { + display: block; + max-width: 90vw; + } + #input #output #wordBox { + padding: 0; + margin: 0; + } + .keywords .tags .unused { + display: flex; + align-items: stretch; + justify-content: space-evenly; + } + #unwanted { + max-width: 65vw; + } + button.gen { + width: 25vw; + max-width: 50vw; + display: inline-block; + margin: 2px; + } + .disclaimer-container { + display: hidden; + } + img { + max-width: 90vw; } - -.uniqueDisplay { - margin: 10px; - -} - -.intags { - text-decoration: line-through; } -