html, body { margin:0; padding:0; height:100%; font-family: 'Open Sans', sans-serif; } body { overflow-y: scroll; background: url(../img/noise.jpg); } #container { min-height: 100%; position:relative; margin: 0 auto; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #CCC; } #contentwrapper { position: relative; padding-bottom: 14em; } #contentwrapper, #content, #sidebar { //change the box model for simplicity -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #contentwrapper { font-size: 1em; padding: 1.5em; width: 100%; } #content, #sidebar { position: relative; display: inline-block; vertical-align: top; width: 100%; padding-bottom: 2em; } #content p { font-size: 18px; } .icons { text-align: center; color: #333; /* text-shadow: 2px 2px #FFD700; */ } .coolicon { position: relative; } .coolicon:hover .icon-stack { visibility: none; } .coolicon:hover .explanation { white-space: nowrap; background: #FFD700; display: block; position:absolute; border: 1px solid black; z-index: 99; top: 1em; color: black; font-family: Comfortaa; /* width: 100%; */ padding: 0.5em; /* border-radius: 0 10px 10px; */ overflow: visible; left: 0; /* transform-origin: 95% 50%; */ /* -moz-transform-origin: 95% 50%; */ /* -webkit-transform-origin: 95% 50%; */ -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); } /* .coolicon:hover { */ /* width: 5em; */ /* } */ .explanation { display:none; } a { color: #111; text-decoration: none; } footer { font-family: Comfortaa; background-color: #000; color: white; text-align: center; margin: 0 auto; overflow: auto; } footer div, footer p, footer ul{ color: white; padding: 2px; margin: 3px; } .site .footer { font-size: 80%; color: #666; border-top: 4px solid #eee; margin-top: 2em; margin: 0em; padding: 1em; overflow: hidden; } footer a { color: #FFF; text-shadow: 1px 1px 1px #069; } footer a:hover { text-shadow: 0.1em 0.1em 0.1em #333; } .site .footer .contact { float: left; margin-right: 3em; } .site .footer .contact a { color: #8085C1; } .site .footer .rss { margin-top: 1.1em; margin-right: -.2em; float: right; } .site .footer .rss img { border: 0; } .todo { list-style-type: none; font-weight: bold; } .todo ul { font-weight: normal; } .todo li.done { } .todo li.done:after { content: "\2714"; padding-left: 0.5em; color: green; } .todo li.cancelled:after { content: "\2718"; padding-left: 0.5em; } .postnav { height: 1em; width: 100%; padding: 15px 9px; margin-left: -10px; background-color: white; text-align: right; } .nextpost, .nextpage { float: right; } .previouspost, .previouspage { float: left; } .pag-top{ /*margin: -9px auto;*/ /*margin-bottom 0;*/ /*border-radius: 0 0 15px 15px;*/ /*border: dashed 1px #AAA;*/ /*border-top-width: 0;*/ } .pag-bottom { /* bottom: -10px; */ /*margin: 0 auto;*/ /*border-radius: 15px 15px 0 0;*/ /*border: dashed 1px #AAA;*/ /*border-bottom-width: 0;*/ } #social { margin: 0 auto; padding: 0; } #social li { position: relative; list-style-type: none; display: inline-block; height: 80px; width: 80px; padding: 0; text-align: center; } #social li a { text-align: center; width:100%; margin: 0; position: absolute; font-size: 60px; left: 0; top: 0; } #social li a:hover { position: absolute; font-size: 80px; top: -20px; left: 0px; /*left: 10px;*/ /*top: -50px;*/ z-index: 100; } .highlighttable { display: block; overflow: auto; position: relative; background-color: #FEFEFE; margin: 0 auto; width: 80%; padding: 0; border: solid 1px #CCC; /* border-radius: 5px 0px 5px 5px; */ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .highlight { /*background-color: #EEE;*/ overflow: auto; margin: 0; padding: 0.5em; position: relative; overflow: auto; } code { width: 80%; margin: 0 auto; } .linenos { color: #AAA; padding-right: 0.5em; border-right: solid 1px #DDD; } #navbar { position: relative; } .pagination { position: relative; height: 1em; min-width: 60%; padding: 10px; text-align: center; background-color: #FFF; z-index: 0; text-weight: bold; color: #AAA; } .pag-top{ margin: 0px auto; margin-bottom: 0; border-top-width: 0; } .pag-bottom { bottom: 0px; margin: 0 auto; border-bottom-width: 0; } .previouspage { float: left; } .nextpage { float: right; } .clear { clear: both; } .post { display: block; margin-left: auto; margin-right: auto; } #content img { max-width: 100%; } #headline { position: relative; margin: 0em; font-size: 4em; padding-top: 5px; font-family: comfortaa; } #headline a { color: black; padding: 0; margin: 0; } #headline a.inv { font-size: 0.8em; color: white; text-shadow: 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } #headline a:hover { color: white; text-shadow: 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } #social { margin: 0 auto; padding: 0; } .entries dt { font-weight: bold; clear: both; border-top: dashed 1px #CCC; padding: 0.2em; padding-top: 0.5em; } .entries dd { float: right; margin: 2px; } a:hover { text-shadow: 0.5px 0.5px #CCC, -0.5px -0.5px 0 #CCC, 0.5px -0.5px 0 #CCC, -0.5px 0.5px 0 #CCC; } .tag:hover * { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); color: black; text-shadow: none ; transform-origin: 95% 50%; -moz-transform-origin: 95% 50%; -webkit-transform-origin: 95% 50%; background-color: #ffd700; */ } .tag { margin: 2px; } .tag * { display: inline-block; color: black; } .hll { background: yellow; } .label { font-family: comfortaa; border-radius: 10px 0px 0px 10px; padding: 5px; color: black; font-size: 10px; padding-left: 10px; border: 1px solid #777; } .label:after{ content: " •"; color: #666; } .readmore { /* background: #EAEAEA; */ padding: 0.5em; /* color: white; */ border-radius: 0.5em 0.5em 0em 0em; /* border-bottom: 1px solid; */ margin: 1em auto; display: inline-block; } .readmore:hover a { border-bottom: 1px solid; } .readmore a { color: black; } #content:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #headline { padding-left: 20%;; } a { /* color: #069; */ text-decoration: none; } .previouspost { float: left; } /* about ul { */ /* position: relative; */ /* width: 900px; */ /* margin: 0 auto; */ /* } */ /* #about li { */ /* line-height:1.5em; */ /* border-bottom:1px solid #DDD; */ /* float:left; */ /* display:inline; */ /* width: 33.333%; */ /* } */ /* #about i { */ /* /\*background-color: #ffd700;*\/ */ /* /\*padding: 5px;*\/ */ /* /\*border-radius: 10px;*\/ */ /* } */ @-webkit-keyframes toright { from { padding-left: 0px; opacity: 0; } to { padding-left: 150px; opacity: 1; } } @keyframes toright { from { padding-left: 0px; opacity: 0; } to { padding-left: 150px; opacity: 1; } } @-webkit-keyframes appear{ to { opacity: 1; } from { opacity: 0; } } @keyframes appear{ to { opacity: 1; } from { opacity: 0; } } #subheadline { -webkit-animation-name: toright; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-name: toright; animation-duration: 4s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .disappear { -webkit-animation-name: appear; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-name: appear; animation-duration: 4s; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .navbar { font-size: 1.2em; margin: 0; list-style-type: none; list-style-image: none; } .navbar li { text-align: center; display: inline-block; margin: 0; padding: 0.3em; padding-bottom: 0.5em; margin: 0; text-decoration: none; font-weight: bold; } .navbar li:hover { border-bottom: solid 0.2em black; padding-bottom: 0.3em; } .navbar li:hover { position: relative; color: #000; background-color: #fff; text-shadow: 2px 2px #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; } .navbar li.active { border-bottom: solid 0.2em #C00; padding-bottom: 0.3em; } .navbar a:hover { color: #c00; } .previouspost { float: left; } .toc ul { list-style: none; } .toc li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; } @media (max-width: 699px) { #sidebar { display: none; } } @media (min-width: 700px) { #contentwrapper{ position: absolute; padding-bottom: 10em; padding-left: 350px; overflow: auto; } #content { height: 100%; margin: 0; } footer { width: 100%; position: absolute; height: 10em; padding-left: 300px; bottom: -0em; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #sidebar { position: fixed; left: 0; width: 25%; margin: 0; } #badge{ position: relative; margin: 0px auto 10px; width: 90%; height: 180px; padding: 0; /* margin-top: -2em; */ -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg); transition: 0.2s; transition-delay: 0.4s; z-index: 1000; height: 250px; } #badge * { width: 100%; } /* entire container, keeps perspective */ .flip-container { perspective: 1000; -webkit-perspective: 1000; } #badge:hover { -webkit-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1); -moz-transform: translate(5px, 20px) rotate(0.5deg) scale(1.1); transform: translate(5px, 20px) rotate(0.5deg) scale(1.1); transition-delay: 0s; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } /* .flip-container, .front, .back { */ /* width: 100%; */ /* } */ /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; padding: 1%; padding-bottom: 10%; background-color: black; box-shadow: -5px 5px 5px #555; -webkit-box-shadow: -5px 5px 15px #555; -moz-box-shadow: -5px 5px 15px #555; } /* front pane, placed above back */ .front { z-index: 3; } /* back, initially hidden pane */ .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); z-index: 4; } .sticky:after { content: ""; height: 20px; width: 80px; background: rgba(255,255,255,0.5); position: absolute; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); box-shadow: 0px 1px 3px rgba(0,0,0,0.4); top: 0; right: 8px; margin: -8px -40px 0 0; z-index: 1000; -webkit-transform:rotate(43deg); -moz-transform:rotate(43deg); backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sticky:hover:after { content: ""; visibility: hidden; } .date { position: absolute; right: 5px; width: 10em; text-align: center; border-radius: 0px 0px 0px 15px; padding: 0.5em; background-color: #EEE; /* color: white; */ font-weight: bold; } h1 + .date { margin-top: -3.5em; } h2 + .date { margin-top: -2.5em; } .posthead { margin-bottom: 1.5em; } .posthead h2, h1 { margin-bottom: 0.5em; } .toc { /* padding: 1em 3em; */ position: relative; width: 100%; height: 100%; } .toc h3 { text-align: center; } .toc li { padding: 0; } #sidebar.fixed { top: 0; /* left: 0; */ height: 100%; width: 300px; min-height: 100%; height: 100%; padding: 1em 3em; /* background-color: white; */ background: url(../img/noise.jpg); z-index: 1000; border-right: solid 1px black; } } @media (min-width: 1200px) { #contentwrapper { position:relative; } #container { margin: 0 auto; } }