Added cohost
This commit is contained in:
parent
0113162b2c
commit
9421b08660
3 changed files with 84 additions and 29 deletions
|
|
@ -631,6 +631,16 @@ button:hover,
|
||||||
filter: brightness(90%);
|
filter: brightness(90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Cohost */
|
||||||
|
.button.button-cohost {
|
||||||
|
color: #191919;
|
||||||
|
background-color: #FFF9F2;
|
||||||
|
}
|
||||||
|
.button.button-cohost:hover,
|
||||||
|
.button.button-cohost:focus {
|
||||||
|
filter: brightness(90%);
|
||||||
|
}
|
||||||
|
|
||||||
/* Twitch */
|
/* Twitch */
|
||||||
.button.button-twitch {
|
.button.button-twitch {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
|
||||||
38
images/icons/cohost.svg
Normal file
38
images/icons/cohost.svg
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 168 182" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1,0,0,1,-49,-32)">
|
||||||
|
<g transform="matrix(0.256192,0,0,0.26903,865.831,258.036)">
|
||||||
|
<g transform="matrix(-1.30031,0,0,1.2824,-5204.42,-15.1179)">
|
||||||
|
<path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-1.2973,-0.953582,-0.966902,1.27943,-4615.99,-815.89)">
|
||||||
|
<path d="M-939,-486C-939,-486 -902.097,-659.906 -796,-597C-689.903,-534.094 -926.088,-466.789 -929,-468" style="fill:none;stroke:rgb(25,25,25);stroke-width:9.3px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(816.653,-240.699,244.061,805.403,-3226.92,-110.694)">
|
||||||
|
<path d="M0.525,0.011C0.453,0.011 0.388,0.001 0.329,-0.018C0.271,-0.038 0.224,-0.067 0.19,-0.106C0.155,-0.144 0.138,-0.193 0.138,-0.251C0.138,-0.31 0.155,-0.358 0.19,-0.397C0.224,-0.435 0.271,-0.464 0.329,-0.483C0.388,-0.502 0.453,-0.512 0.525,-0.512C0.597,-0.512 0.662,-0.502 0.72,-0.483C0.778,-0.464 0.825,-0.435 0.86,-0.396C0.894,-0.358 0.912,-0.309 0.912,-0.251C0.912,-0.193 0.894,-0.144 0.86,-0.106C0.825,-0.067 0.778,-0.038 0.72,-0.018C0.662,0.001 0.597,0.011 0.525,0.011Z" style="fill:rgb(131,37,79);fill-rule:nonzero;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.30031,0,0,1.2824,-932.381,-308.02)">
|
||||||
|
<circle cx="-1669.5" cy="-74.5" r="17.5" style="fill:rgb(25,25,25);stroke:rgb(25,25,25);stroke-width:11.38px;stroke-linecap:square;stroke-linejoin:round;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.30031,0,0,1.2824,-801.05,-285.578)">
|
||||||
|
<circle cx="-1669.5" cy="-74.5" r="17.5" style="fill:rgb(25,25,25);stroke:rgb(25,25,25);stroke-width:11.38px;stroke-linecap:square;stroke-linejoin:round;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.61799,0,0,1.5957,-1316.63,223.263)">
|
||||||
|
<path d="M-939,-486C-939,-486 -902.097,-659.906 -796,-597C-689.903,-534.094 -926.088,-466.789 -929,-468" style="fill:none;stroke:rgb(25,25,25);stroke-width:9.15px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.30031,0,0,1.2824,-775.629,34.1386)">
|
||||||
|
<path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.30031,0,0,1.2824,-661.888,-13.3998)">
|
||||||
|
<path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.38px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(1.2577,-0.325599,0.330147,1.24037,-577.602,-579.56)">
|
||||||
|
<path d="M-1603,-204.571C-1578.58,-204.281 -1568.64,-189.502 -1565.93,-167.502" style="fill:none;stroke:rgb(25,25,25);stroke-width:11.48px;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.847203,0.0607778,-0.0616267,0.835533,-2048.07,-171.385)">
|
||||||
|
<path d="M-1225,-120C-1224.92,-118.887 -1210.99,-105.523 -1194,-120C-1193.47,-120.136 -1179.53,-106.241 -1163.14,-119.14" style="fill:none;stroke:rgb(25,25,25);stroke-width:17.38px;stroke-linejoin:round;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
65
index.html
65
index.html
|
|
@ -53,21 +53,21 @@
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
## Getting Started with LittleLink
|
## Getting Started with LittleLink
|
||||||
|
|
||||||
This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
|
This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
|
||||||
|
|
||||||
You can add your own brand or others brands you may need in the `css/brands.css` file.
|
You can add your own brand or others brands you may need in the `css/brands.css` file.
|
||||||
|
|
||||||
You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
|
You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
|
||||||
|
|
||||||
Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
|
Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
|
||||||
|
|
||||||
Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
|
Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
|
||||||
|
|
||||||
Edit the "Short Bio" section tell users about yourself or your brand.
|
Edit the "Short Bio" section tell users about yourself or your brand.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- Your Image Here -->
|
<!-- Your Image Here -->
|
||||||
<img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
|
<img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
|
||||||
|
|
@ -76,33 +76,35 @@
|
||||||
<h1>WK Vylion Links</h1>
|
<h1>WK Vylion Links</h1>
|
||||||
|
|
||||||
<!-- Short Bio -->
|
<!-- Short Bio -->
|
||||||
<p>All the online places where you can find me:</p>
|
<p>Amateur conlanger, worldbuilder, terrarium enjoyer, and custom mechanical keyboard enthusiast.<br>
|
||||||
|
|
||||||
|
Here's all the online places where you can find me:</p>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
## Breaking down <a> attributes:
|
## Breaking down <a> attributes:
|
||||||
|
|
||||||
1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
|
1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
|
||||||
The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
|
The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
|
||||||
If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
|
If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
|
||||||
|
|
||||||
2.) Replace the # in href="#" with the desired target URL for the button.
|
2.) Replace the # in href="#" with the desired target URL for the button.
|
||||||
|
|
||||||
3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
|
3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
|
||||||
|
|
||||||
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
|
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
|
||||||
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
||||||
|
|
||||||
## Breaking down the <img> attributes:
|
## Breaking down the <img> attributes:
|
||||||
|
|
||||||
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
|
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
|
||||||
|
|
||||||
2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
|
2.) src="icons/[icon_name].svg" | This defines the icon you would like to display from the icons/ folder. For example, you can change this to src="icons/discord.svg" to use the Discord icon.
|
||||||
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
|
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
|
||||||
|
|
||||||
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<a class="button button-twit" href="https://twitter.com/wk_vylion" target="_blank" rel="noopener">
|
<a class="button button-twit" href="https://twitter.com/wk_vylion" target="_blank" rel="noopener">
|
||||||
|
|
@ -119,11 +121,6 @@
|
||||||
<img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon main</a>
|
<img class="icon" src="images/icons/mastodon.svg" alt="Mastodon Logo">Mastodon main</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Email -->
|
|
||||||
<a class="button button-default" href="mailto:wk@vylion.com" target="_blank" rel="noopener">
|
|
||||||
<img class="icon" src="images/icons/email.svg" alt="Email Icon">wk@vylion.com</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Telegram -->
|
<!-- Telegram -->
|
||||||
<a class="button button-telegram" href="https://t.me/wk_vylion" target="_blank" rel="noopener">
|
<a class="button button-telegram" href="https://t.me/wk_vylion" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram main channel</a>
|
<img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram main channel</a>
|
||||||
|
|
@ -134,6 +131,16 @@
|
||||||
<img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
|
<img class="icon" src="images/icons/tumblr.svg" alt="Tumblr Logo">Tumblr</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
<!-- Cohost -->
|
||||||
|
<a class="button button-cohost" href="https://cohost.org/vylion" target="_blank" rel="noopener">
|
||||||
|
<img class="icon" src="images/icons/cohost.svg" alt="Eggbug Cohost Mascot">Cohost</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Email -->
|
||||||
|
<a class="button button-default" href="mailto:wk@vylion.com" target="_blank" rel="noopener">
|
||||||
|
<img class="icon" src="images/icons/email.svg" alt="Email Icon">wk@vylion.com</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
<!-- PayPal-->
|
<!-- PayPal-->
|
||||||
<a class="button button-paypal" href="paypal.me/guillermoserrahima" target="_blank" rel="noopener">
|
<a class="button button-paypal" href="paypal.me/guillermoserrahima" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
|
<img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
|
||||||
|
|
@ -146,7 +153,7 @@
|
||||||
This also includes a link to the LittleLink repository to make forking LittleLink easier.
|
This also includes a link to the LittleLink repository to make forking LittleLink easier.
|
||||||
You can edit or remove anything here to make your own footer.
|
You can edit or remove anything here to make your own footer.
|
||||||
-->
|
-->
|
||||||
<p>Build your own by forking <a href="https://littlelink.io"
|
<p>This website was built by forking <a href="https://littlelink.io"
|
||||||
target="_blank" rel="noopener">LittleLink</a></p>
|
target="_blank" rel="noopener">LittleLink</a></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue