Skip to content

Commit

Permalink
made more responsive - wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@hayseedbyte
hayseedbyte committed Jun 3, 2021
1 parent 3ff36f7 commit 75e8b0d
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 107 deletions.
23 changes: 14 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h3>Instructions</h3>
<label for="input"><h4>Keywords:</h4></label>
</div>
<div>
<textarea id="input" cols="30" rows="20"></textarea>
<textarea id="input" cols="25" rows="13"></textarea>
</div>
<div>
<button type="button" class="gen" onClick="generate()">Generate</button>
Expand All @@ -51,12 +51,12 @@ <h3>Instructions</h3>
<label for="output"><h4>Tags:</h4></label>
</div>
<div>
<textarea id="output" cols="30" rows="20"></textarea>
<textarea id="output" cols="25" rows="13"></textarea>
</div>
</div>
<div><h4>Unused Words:</h4>
<div class="unused"><h4>Unused Words:</h4>
<div>
<textarea id="wordBox" cols="30" rows="20"></textarea>
<textarea id="wordBox" cols="auto" rows="13"></textarea>
</div>
</div>
</div>
Expand Down Expand Up @@ -121,11 +121,16 @@ <h4>Or use the button below to donate through PayPal:</h4>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>
<h3 class="disclaimer">Disclaimer</h3>
<hr>
<p class="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.</p>
<p class="disclaimer"> 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.</p>
<p class="disclaimer"> 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.</p>
<hr>
<div class="disclaimer-container>" <h3 class="disclaimer-heading">Disclaimer</h3>
<p>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.</p>
<p> 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.</p>
<p> 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.</p>
</div>
</div>
</div>
<footer>©2021 Wildbot3D®</footer>
Expand Down
219 changes: 121 additions & 98 deletions tag-style.css
View file
Original file line number Diff line number Diff line change
@@ -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: " ";
Expand All @@ -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: " ";
Expand All @@ -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;
}

0 comments on commit 75e8b0d

Please sign in to comment.