Skip to content
Permalink
master
Switch branches/tags

marciot.github.io/index.html

Go to file
 
 
Cannot retrieve contributors at this time
163 lines (140 sloc) 5.09 KB
Raw Blame
Open in GitHub Desktop
<html>
<head>
<title>Marcio's GitHub Page</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Walter+Turncoat" />
<style>
body {
/* Make the body take up entire window minus a margin
http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin
*/
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 3em;
/* Two resources shows how to load custom handwritten fonts:
* http://makeitcg.com/script-handwritten-google-fonts/1910/
* http://designshack.net/articles/css/the-10-best-script-and-handwritten-google-web-fonts/
*/
font-family: 'Walter Turncoat', Helvetica, Sans-serif;
background-color: white;
/* Use position fixed instead of absolute to fix iPhone overflow:
http://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari
*/
position: fixed;
overflow: hidden;
}
.graphPaper {
width: 100%;
height: 100%;
}
.graphPaper:before {
/* Hack to apply a transformation to the background:
http://www.sitepoint.com/css3-transform-background-image/
*/
content: "";
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
z-index: -1;
transform: rotate(30deg);
transform-origin: center center;
/* And make it spin!
http://stackoverflow.com/questions/2584138/css3-continuous-rotate-animation-just-like-a-loading-sundial
*/
animation: spin 100s infinite linear;
/* The following makes a graph paper effect:
http://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css
*/
background-size: 40px 40px;
background-image: linear-gradient(to right, lightBlue 1px, transparent 1px), linear-gradient(to bottom, lightBlue 1px, transparent 1px);
}
@keyframes spin {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
/* Flex tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.tiles {
display: flex;
flex-direction: row;
align-items: center;
font-size: 2vw;
color: violet;
}
.tiles > * {
margin-top: 1em;
margin-bottom: 1em;
margin-right: 3em;
}
.tiles > :last-child {
margin-right: 0em;
}
.tiles a {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
height: 40%;
text-decoration: none;
text-align: center;
font-variant: small-caps;
background-color: #FFFFCC;
box-shadow: 0.5em 0.5em 1em #888888;
}
a:hover {
transform: scale(1.03);
color: red;
}
h1 {
text-transform: uppercase;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
}
.icon {
font-size: 6vw;
padding-bottom: 0.25em;
}
</style>
</head>
<body>
<div class="graphPaper">
<div class="stack">
<div class="tiles">
<a href="https://mt236.wordpress.com/">
<h1>My Tech Blog</h1>
3D Printing, Graphics and Javascript
<div class="icon">&#x2712;&#xFE0E;</div>
<!-- I use the variant selector &#xFE0E; to keep iOS devices from using an emoji icon:
http://meta.stackexchange.com/questions/261074/prev-next-triangles-rendered-as-emojis-on-ios-devices -->
</a>
<a href="http://marciot.freeshell.org/" class="last">
<h1>My Home Page</h1>
Showcasing my Projects and Hobbies
<!-- Using a chess piece here since my preferred symbol &#x1f3e0; gets rendered as an emoji in iOS and the above trick does not work -->
<div class="icon">&#x265c;&#xFE0E;</div>
</a>
</div>
<div class="tiles">
<a href="http://store.marciot.com" class="last">
<h1>My Store</h1>
Hand-Drawn Science Cartoons
<div class="icon">&#9883;&#xFE0E;</div>
</a>
<a href="https://www.patreon.com/marciot" class="last">
<h1>My Tip Jar</h1>
Help support my projects
<div class="icon">&hearts;&#xFE0E;</div>
</a>
</div>
</div>
<div class="footer">
<a href="https://github.com/marciot/marciot.github.io/blob/master/index.html">Source code</a>
</div>
</div>
</body>
</html>