Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<title>Marcio's GitHub Page</title>
<link rel="stylesheet" type="text/css" href="" />
body {
/* Make the body take up entire window minus a margin
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 3em;
/* Two resources shows how to load custom handwritten fonts:
font-family: 'Walter Turncoat', Helvetica, Sans-serif;
background-color: white;
/* Use position fixed instead of absolute to fix iPhone overflow:
position: fixed;
overflow: hidden;
.graphPaper {
width: 100%;
height: 100%;
.graphPaper:before {
/* Hack to apply a transformation to the background:
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!
animation: spin 100s infinite linear;
/* The following makes a graph paper effect:
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: */
.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;
<div class="graphPaper">
<div class="stack">
<div class="tiles">
<a href="">
<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: -->
<a href="" 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>
<div class="tiles">
<a href="" class="last">
<h1>My Store</h1>
Hand-Drawn Science Cartoons
<div class="icon">&#9883;&#xFE0E;</div>
<a href="" class="last">
<h1>My Tip Jar</h1>
Help support my projects
<div class="icon">&hearts;&#xFE0E;</div>
<div class="footer">
<a href="">Source code</a>