Upload files to "/"
This commit is contained in:
commit
02ab9c8c05
2 changed files with 499 additions and 0 deletions
173
index.html
Normal file
173
index.html
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<title>Tsugu's cave</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<ul id="tagcloud">
|
||||
<li><a href="index.html"><b>About & Contact</b></a></li>
|
||||
<li><a href="gallery.html" target="_blank"><b>Gallery</b></a></li>
|
||||
<li><a href="blog.html"><b>Blog</b></a></li>
|
||||
</ul>
|
||||
<h1>Tsugu's cave</h1>
|
||||
<img src="images/favicon.ico"
|
||||
width="auto"
|
||||
height="250"
|
||||
>
|
||||
<h3 class="lime">
|
||||
<p>A landing page for anyone interested in my other social media or my work. Don't hesitate to contact me, I will always reply.</p>
|
||||
</h3>
|
||||
|
||||
<h2>Contact</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h3 class="white"><img src="element.svg">Matrix: <a href="matrix.html">@tsugu:thishorsie.rocks</a> </h3>
|
||||
|
||||
|
||||
<h3 class="white"><img src="email.png">E-mail + <img src="xmpp.svg">XMPP: <a href="mailto:tsugu@disroot.org">tsugu@disroot.org</a> <a href="tsugu.asc">🔒PGP key</a></h3>
|
||||
|
||||
|
||||
<h3 class="white"><img src="threema.jpg">Threema: <a rel="me" href="https://threema.id/33SUHC8P">33SUHC8P</a> </h3>
|
||||
|
||||
|
||||
|
||||
<h2>Social Media</h2>
|
||||
|
||||
|
||||
<h3 class="white"><img src="lemmy.png">Lemmy:<a rel="me" href="https://slrpnk.net/u/tsugu">tsugu@slrpnk.net</a> </h3>
|
||||
|
||||
<!-- <li><img src="reddit.png"><code>Reddit:</code> <a href="https://www.reddit.com/user/Tsugu69">Tsugu69</a></li> -->
|
||||
|
||||
<h3 class="white"><img src="odysee.png">Odysee: <a href="https://odysee.com/@matej.drozdik:4">Tsugu</a> </h3>
|
||||
|
||||
<h3 class="white"><img src="mastodon.png">Mastodon: <a rel="me" href="https://pone.social/@Tsugu">Tsugu</a> </h3>
|
||||
</ul>
|
||||
|
||||
<h2>Tip jar</h2>
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="monero.svg"> Monero [XMR]
|
||||
<p><a href="moneroqr.png" style="overflow-wrap:break-word;">47LvZhFGkq2FvgdHAPU4DiVaHkuDuyJcEaBnD234wBqZ3EKLmM2WEheRfB7y9zJFYn7LcsP9oyMqzQsqdECNyvj7DaLTcst</a></p>
|
||||
</h3>
|
||||
|
||||
<h3 class="white">
|
||||
<img src="dot.svg"> Polkadot [DOT]
|
||||
<p><a href="dotqr.png" style="overflow-wrap:break-word;">112JuVYhx1soTGRfhVaxcbtsT8gPtb4TC9jN6HvtDRUhX1Db</a></p>
|
||||
</h3>
|
||||
|
||||
<h3 class="white">
|
||||
<img src="cardano.png"> Cardano [ADA]
|
||||
</p>
|
||||
<a href="adaqr.png" style="overflow-wrap:break-word;">addr1q9yg5a4sy3xcxxf3k97av0xz2m8u8mejx8e3h478449u3ruv8ncjsv9amcu6vl62x78fz4afvf9lhdkgx3fzp75km8hs8wwsz4</a></p>
|
||||
</h3>
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="litecoin.svg"> Litecoin [LTC]
|
||||
</p>
|
||||
<a href="ltcqr.png" style="overflow-wrap:break-word;">ltc1qlzn7qfqr9f54mxh6yqj274m8zfwq4h8y46z724</a></p>
|
||||
</h3>
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="bitcoincash.svg"> Bitcoin Cash [BCH]
|
||||
</p>
|
||||
<a href="bchqr.png" style="overflow-wrap:break-word;">bitcoincash:qzhc2ujnx8efu5vkkxs6az6vkxfp0jutqqeg749me8</a></p>
|
||||
</h3>
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="bitcoin.svg"> Bitcoin [BTC]
|
||||
</p>
|
||||
<a href="btcqr.png" style="overflow-wrap:break-word;">bc1q79mnu806cnj79ld7c2sw8z2j6x2lqcpzshuemd</a></p>
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="icp.png"> Internet Computer Protocol [ICP]
|
||||
</p>
|
||||
<a href="icpqr.png" style="overflow-wrap:break-word;">ee7c26bac274c9e9e07a919df8bafb3376bba642e1bb1535506458aa7f1ee8ee</a></p>
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3 class="white">
|
||||
<img src="nano.svg"> Nano [XNO]
|
||||
</p>
|
||||
<a href="nanoqr.png" style="overflow-wrap:break-word;">nano_1dpfxae9hddco87zsphjuzqw5pjs1yma9obnnqzot9pte4r3duu755kx79qx</a></p>
|
||||
</h3>
|
||||
|
||||
<h3 class="white">
|
||||
<img src="eth.svg"> Ethereum [ETH]
|
||||
</p>
|
||||
<a href="ethqr.png" style="overflow-wrap:break-word;">0x65a25A846208c0A238FA2487E274AED825b7B4a3</a></p>
|
||||
</h3>
|
||||
|
||||
<!--
|
||||
<h2>Buttons</h2>
|
||||
<div class="buttons">
|
||||
<img src="madewithhooves.png" alt="hooves" title="nano"></a>
|
||||
|
||||
|
||||
|
||||
<a href="https://tsugu.space"><img src="amogus.png" alt="mogud" title="amognus"></a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
-->
|
||||
|
||||
<h2>Projects</h2>
|
||||
<h3>
|
||||
|
||||
<p class="kontakt"><a href="https://threemagroups.xyz">Threema Groups</a></p>
|
||||
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
326
style.css
Normal file
326
style.css
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
/* Since this site is about teaching web concepts, even this file is a learning
|
||||
* opportunity. */
|
||||
|
||||
body {
|
||||
color: white;
|
||||
background-color: #1f1f1f;
|
||||
background-image: url("bg.png");
|
||||
margin-bottom: 200px ;
|
||||
font-family: monospace;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center ;
|
||||
color: lime ;
|
||||
font-size: 24pt ;
|
||||
border-bottom: none;
|
||||
max-width: 700px ;
|
||||
margin: 1em auto ;
|
||||
background: linear-gradient(to right, #00ff00, #2ab300,#5fff20, #02c543);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 40px ;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center ;
|
||||
color: deeppink ;
|
||||
font-size: 24pt ;
|
||||
border-bottom: none;
|
||||
max-width: 800px ;
|
||||
margin: 1em auto ;
|
||||
background: linear-gradient(to right, #fd4229, #ff7316,#e9493b, #df5431);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.lime
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "a" is for links. */
|
||||
a {
|
||||
color: lightblue ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* The "hover" option, which can be used with pretty much anything, allows you
|
||||
* to set different settings if someone hovers over something with their mouse.
|
||||
* */
|
||||
a:hover {
|
||||
color: white ;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold ;
|
||||
}
|
||||
|
||||
/* code and pre are for formatting monospace text commands. Use code generally,
|
||||
* but pre is for separate code blocks. pre is also sensitive to whitespace,
|
||||
* unlike most of HTML. */
|
||||
code {
|
||||
color: lime ;
|
||||
border-radius: 5px ;
|
||||
}
|
||||
pre {
|
||||
background: #111222 ;
|
||||
border: 1px solid lime ;
|
||||
border-radius: 20px ;
|
||||
padding: 1em ;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word ;
|
||||
max-width: 600px ;
|
||||
margin: auto ;
|
||||
}
|
||||
|
||||
.wide { max-width: inherit ; }
|
||||
|
||||
p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
|
||||
vertical-align: middle;
|
||||
max-width: 1em;
|
||||
max-height: 1em;
|
||||
border: solid 0px black ;
|
||||
display: inline ;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 90% ;
|
||||
margin: auto ;
|
||||
display: block ;
|
||||
border: none ;
|
||||
}
|
||||
.titleimg {
|
||||
border: none ;
|
||||
height: 150px ;
|
||||
}
|
||||
strong {
|
||||
color: white ;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center ;
|
||||
font-variant: small-caps ;
|
||||
clear: both ;
|
||||
padding: 2em 0 ;
|
||||
}
|
||||
footer li {
|
||||
display: inline-block ;
|
||||
padding: 0 .5em ;
|
||||
font-size: x-large ;
|
||||
}
|
||||
footer li:hover {
|
||||
background: lightblue ;
|
||||
}
|
||||
|
||||
nav { font-size: small ;}
|
||||
|
||||
footer { font-size: large ; }
|
||||
|
||||
nav ul, footer ul, #taglist {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto ;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* asides are used for minor tangential notes. I have them shrunk down in
|
||||
* softer colors in a box with soft corners (border-radius). */
|
||||
|
||||
aside {
|
||||
border: solid 1px black ;
|
||||
border-radius: 20px ;
|
||||
padding: 0 1em 0 1em ;
|
||||
font-size: small ;
|
||||
}
|
||||
|
||||
aside p {
|
||||
color: gray ;
|
||||
}
|
||||
|
||||
aside code {
|
||||
color: green ;
|
||||
}
|
||||
|
||||
/* .callout here is refencing any aside given the class name callout
|
||||
* An example being: <aside class="callout"> */
|
||||
aside.callout {
|
||||
border: solid 1px orange;
|
||||
}
|
||||
|
||||
.cnp {
|
||||
width: 100% ;
|
||||
|
||||
}
|
||||
|
||||
.buttons {
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.buttons img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block ;
|
||||
|
||||
}
|
||||
/* This "@media" block defines rules that will only be applied when the minimum
|
||||
* width of the screen is 55em or greater. In essence, they are settings that
|
||||
* only apply on normal weide screens, but *not* phones and low res monitors.
|
||||
* Since we have more room on widescreens, we change a couple things. */
|
||||
|
||||
@media (min-width: 55em) {
|
||||
|
||||
aside {
|
||||
margin: 0 30px 0 30px;
|
||||
}
|
||||
|
||||
.resright, .disappear {
|
||||
display: block ;
|
||||
float: right;
|
||||
padding: 20px ;
|
||||
clear: both ;
|
||||
max-height: 400px ;
|
||||
max-width: 300px ;
|
||||
}
|
||||
|
||||
header { max-width: 900px ; margin: auto;}
|
||||
main { max-width: 850px ; }
|
||||
}
|
||||
|
||||
|
||||
/*Ak by robilo nieco problemy, zmen none na 600px*/
|
||||
.ll {
|
||||
font-size: large ;
|
||||
line-height: 1.3em ;
|
||||
max-width: none;
|
||||
margin: auto ;
|
||||
}
|
||||
|
||||
.ll dd {
|
||||
display: inline ;
|
||||
}
|
||||
|
||||
.ll dt {
|
||||
display: inline-block ;
|
||||
width: 6em ;
|
||||
}
|
||||
|
||||
.ll dd:after {
|
||||
display:block;
|
||||
content: '' ;
|
||||
}
|
||||
|
||||
|
||||
/*totok je to horne menucko*/
|
||||
#tagcloud {
|
||||
clear: both ;
|
||||
padding: 0;
|
||||
border-radius: 10px ;
|
||||
text-align: center ;
|
||||
margin: 0 auto ;
|
||||
border: solid 2px ;
|
||||
border-style: solid ;
|
||||
border-color: lime;
|
||||
list-style: none ;
|
||||
|
||||
}
|
||||
|
||||
#tagcloud li {
|
||||
display: inline-block ;
|
||||
|
||||
}
|
||||
|
||||
#tagcloud a {
|
||||
display: block ;
|
||||
width: auto ;
|
||||
background: #4D3C5A;
|
||||
border-radius: 10px ;
|
||||
padding: .10em ;
|
||||
margin: 2px ;
|
||||
text-decoration: none;
|
||||
color: lime;
|
||||
|
||||
}
|
||||
|
||||
#tagcloud a:hover {
|
||||
background: #4D3C5A ;
|
||||
box-shadow: 2px 2px black ;
|
||||
/*totok je pozadie tych tlacitok ked nad nim hovernes*/
|
||||
background: #cf23cf ;
|
||||
}
|
||||
|
||||
.kontakt {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
video {
|
||||
margin: auto ;
|
||||
display: block ;
|
||||
max-width: 90%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*pre mobili zobrazenie. co kolvek za tymto tagom je specificke pre mobili*/
|
||||
|
||||
@media (max-width: 30em) {
|
||||
body {
|
||||
color: white;
|
||||
background-color: #1f1f1f;
|
||||
background-image: url("bg.png");
|
||||
margin-bottom: 200px ;
|
||||
font-family: monospace;
|
||||
/*velkost fontu pre mobili*/
|
||||
font-size: 15px;
|
||||
}
|
||||
video {
|
||||
margin: auto ;
|
||||
display: block ;
|
||||
max-width: 90%;
|
||||
|
||||
}
|
||||
}
|
||||
@media (max-width: 30em) {
|
||||
|
||||
h2 {
|
||||
text-align: center ;
|
||||
color: deeppink ;
|
||||
font-size: 20pt ;
|
||||
border-bottom: none;
|
||||
max-width: 800px ;
|
||||
margin: 1em auto ;
|
||||
background: linear-gradient(to right, #fd4229, #ff7316,#e9493b, #df5431);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
#tagcloud {
|
||||
clear: both ;
|
||||
padding: 0;
|
||||
border-radius: 10px ;
|
||||
text-align: center ;
|
||||
margin: 0 auto ;
|
||||
border: solid 2px ;
|
||||
border-style: solid ;
|
||||
border-color: lime;
|
||||
list-style: none ;
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue