Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign up| <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="http://sponsor.marciot.com" 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> |