wompmacho/old-svelte-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating styling, adding/removing content

Browse Source
This commit is contained in:
wompmacho
2020-11-18 01:18:57 -05:00
parent aa68cd89da
commit eb49fd01fe
23 changed files with 426 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/routes/wompchat.svelte
View File

@@ -4,10 +4,14 @@
<h1>WompChat</h1>
<img title="WompChat" class="gif rounded" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
<img title="WompChat" class="gif" src="./img/womp-chat/full512.png" alt="WompChat Logo" />
<div class="spacer"></div>
<h2>Welcome To The Chat</h2>
<div class="spacer"></div>
<h4>
We Are Changing Our Name!
</h4>
@@ -20,21 +24,22 @@
<div class="container">
<a href="https://discord.gg/pVNnTDA">
<img class="shield" src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io" />
<img class="shield shadow rounded" src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io" />
</a>
<a href="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/img/btc.JPG">
<img class="shield" src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io" />
<img class="shield shadow rounded" src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io" />
</a>
<a href="https://github.com/wompmacho/womp">
<img class="shield" alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest-Release&style=plastic" />
<img class="shield shadow rounded" alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest-Release&style=plastic" />
</a>
</div>
<div class="container">
<a class="rounded" href="https://discord.gg/pVNnTDA" title="Join our Discord Community"><button type="button" class="btn btn-dark">Join our Discord Community</button></a>
<a class="rounded" href="https://streamelements.com/wompmacho-5882/tip" title="Donations"><button type="button" class="btn btn-dark">Donations</button></a>
<a class="rounded" href="https://www.youtube.com/wompmacho" title="Youtube"><button type="button" class="btn btn-dark">Youtube</button></a>
<a class="rounded" href="mailto:wompmacho@gmail.com" title="Contact"><button type="button" class="btn btn-dark">Contact Me</button></a>
<a class="" href="https://discord.gg/pVNnTDA" title="Join our Discord Community"><button type="button" class="btn btn-dark shadow rounded">Join our Discord Community</button></a>
<a class="" href="https://streamelements.com/wompmacho-5882/tip" title="Donations"><button type="button" class="btn btn-dark shadow rounded">Donations</button></a>
<a class="" href="https://www.youtube.com/wompmacho" title="Youtube"><button type="button" class="btn btn-dark shadow rounded">Youtube</button></a>
<a class="" href="mailto:wompmacho@gmail.com" title="Contact"><button type="button" class="btn btn-dark shadow rounded">Contact Me</button></a>
<a class="" href="https://chrome.google.com/webstore/search/wompchat" title="WompChat Extension Page"><button type="button" class="btn btn-dark shadow rounded">Web Store</button></a>
</div>
<hr>
@@ -69,26 +74,32 @@
<hr>
<div class="spacer"></div>
<h3>How To:</h3>
<p>
There is still a lot of stuff I am working on. This is very Beta at the moment so
There is still a lot of stuff I am working on. This is very Beta at the moment... <strong>Use At Your Own Risk</strong>
</p>
<h4>Use At Your Own Risk</h4>
<div class="spacer"></div>
<p>
This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat.
Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending.
</p>
<hr>
<div class="spacer"></div>
<p class="highlight">
<p class="highlight rounded">
Don't forget to pin this extension for easy access.
</p>
<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/pinYourExtension.gif" alt="pinYourExtension.gif" />
<div class="spacer"></div>
<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/pinYourExtension.gif" alt="pinYourExtension.gif" />
<div class="spacer"></div>
<p>
Youtube Live is slow to load its pages currently.
@@ -96,33 +107,54 @@
Once you see the Emote Panel Icon you can open the Emote Selection Panel.
</p>
<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="emotesMenu.gif" />
<div class="spacer"></div>
<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif" alt="emotesMenu.gif" />
<div class="spacer"></div>
<p class="highlight">
Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
Enhanced Theater Mode Is Now Available.
<br>
Just click the check in the option panel and refresh your page.
</p>
<img class="gif rounded" style="height: 540px; width: 960px;" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/theaterMode.gif" alt="theaterMode.gif" />
<div class="spacer"></div>
<img class="gif shadow rounded" style="height: 540px; width: 100%;" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/theaterMode.gif" alt="theaterMode.gif" />
<div class="spacer"></div>
<p>
Over around 500 Top and Trending Emotes are loaded from popular sites.
You can Enable/Disable them in the Options Menu.
</p>
<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/optionsMenu.gif" alt="optionsMenu.gif" />
<div class="spacer"></div>
<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/optionsMenu.gif" alt="optionsMenu.gif" />
<div class="spacer"></div>
<p>
Can Also Click on UserNames To Autofill an @ Notification
</p>
<img class="gif rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif" />
<div class="spacer"></div>
<img class="gif shadow rounded" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif" />
<div class="spacer"></div>
<h3>more on the way, but for now...</h3>
<h2>Enjoy!</h2>
<style>
.spacer{
padding: 2em;
}
.btn-dark{
background-color: #474748 !important;
}
@@ -132,8 +164,10 @@
.highlight{
font-weight:700;
color: #00ff00;
color: #ffffff;
text-align: center;
box-shadow: 0px 0px 15px #ff0000;
border-radius: 5px;
}
.container{
@@ -175,12 +209,13 @@
padding: 1em;
background-color: #333333;
border-radius: 5px;
box-shadow: 0px 0px 15px #000000;
}
a {
color: #cccccc;
text-decoration: none;
margin: .5em;
padding: .5em;
}
/* clearfix */
@@ -197,8 +232,22 @@
.gif{
display: block;
height: 50vh;
max-height: 50vh;
margin: auto;
padding: 2em;
}
@media only screen and (max-width: 769px) {
.container{
flex-direction: column;
}
a{
margin: 1em auto auto auto;
}
p{
margin: auto;
max-width: 90vw;
}
}
</style>