kira/cesium.one
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip smaller boxes for other contacts

Browse Source
This commit is contained in:
Christian
2021-04-14 14:03:43 -04:00
parent 9c130cadb2
commit 2bcd2a355f
2 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -52,7 +52,17 @@
</div> </div>
<h2 style="clear: left;">Other Contacts</h2> <h2 style="clear: left;">Other Contacts</h2>
<p>accounts that i have and are definitely me, but not used as much or just not the best way to reach me</p> <p>accounts that i have and are definitely me, but not used as much or just not the best way to reach me</p>
<p>(obligatory pasting of xmr address) I have an XMR OpenAlias at the same address as this site.</p> <div class=othercontact style="background-color: #3b617c;">
<h3>Twitter</h3>
<p>cesium2349</p>
<a title="Twitter" href="https://twitter.com/cesium2349"></a>
</div>
<div class=othercontact style="background-color: #3b617c;">
<h3>Twitter</h3>
<p>cesium2349</p>
<a title="Twitter" href="https://twitter.com/cesium2349"></a>
</div>
<p style="clear: left;">(obligatory pasting of xmr address) I have an XMR OpenAlias at the same address as this site.</p>
<p style="text-align: center;"><a href="https://github.com/CesiumCs/cesium.one"><img src="assets/GitHub-Mark-Light.png" style="width:2em" alt="View on GitHub"></a></p> <p style="text-align: center;"><a href="https://github.com/CesiumCs/cesium.one"><img src="assets/GitHub-Mark-Light.png" style="width:2em" alt="View on GitHub"></a></p>
</body> </body>
</html> </html>

25
styles.css
View File

@@ -38,6 +38,31 @@ a {
position: relative; position: relative;
transition: opacity .25s; transition: opacity .25s;
} }
.othercontact {
float: left;
width: 170px;
padding: 0px;
margin: 0px 10px 10px 0px;
background-color: #232629;
border-radius: 10px;
text-align: center;
opacity: .9;
position: relative;
transition: opacity .25s;
} .othercontact a {
z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
} div.othercontact:hover {
opacity: 1;
}
/* some hacky shit to make <div class=contact>s clickable. basically just makes /* some hacky shit to make <div class=contact>s clickable. basically just makes
an <a> in a <div class=contact> take up the full div */ an <a> in a <div class=contact> take up the full div */
.contact a { .contact a {