index.html

<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>