Permalink
Cannot retrieve contributors at this time
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
163 lines (140 sloc)
5.09 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">✒︎</div> | |
<!-- I use the variant selector ︎ 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 🏠 gets rendered as an emoji in iOS and the above trick does not work --> | |
<div class="icon">♜︎</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">⚛︎</div> | |
</a> | |
<a href="https://www.patreon.com/marciot" class="last"> | |
<h1>My Tip Jar</h1> | |
Help support my projects | |
<div class="icon">♥︎</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> |