*{
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Grid */ .container {
text-align: center; position: relative; width: 100%; max-width: 960px; margin: 0 auto; margin-top: 7%; padding: 0 20px; box-sizing: border-box;
} .column, .columns {
width: 100%; float: left; box-sizing: border-box;
}
/* Devices larger than 400px (Mobile First) */ @media (min-width: 400px) {
.container { width: 85%; padding: 0; }
}
/* Devices larger than 550px */ @media (min-width: 550px) {
.container { width: 80%; } .column, .columns { margin-left: 4%; } .column:first-child, .column:first-child { margin-left: 0; } /* Segemented columns for future developments */ .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; }
}
.container:after, .row:after, .u-cf {
content: ""; display: table; clear: both;
}
/* Base Style */ html { }
body {
font-family: 'Raleway', 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-weight: normal;
}
/* Image Style */ .round { border-radius: 50%; width: 250px; height: 250px; overflow: hidden; position: relative; margin: 0 auto 35px; text-align: center;
animation-duration: 0.8s; animation-fill-mode: both; animation-name: bounce; -webkit-animation-duration: 0.7s; -webkit-animation-fill-mode: both; -webkit-animation-name: bounce; }
.round:hover {
opacity: 0.75;
}
/* Hovering over image on homepage */ a.hverabt {
text-decoration: none; color: inherit;
}
a.hverabt span {
display: none; font-family: 'Raleway Dots', cursive;
}
a.hverabt:hover span {
display: inline-block; width: 50px; position: absolute; top: 125px; -webkit-animation-name: fadeOut; -webkit-animation-duration: 3s; -webkit-animation-delay: 0.05s; -webkit-animation-fill-mode: both; animation-name: fadeOut; animation-duration: 3s; animation-delay: : 0.05s; animation-fill-mode: both;
}
/* Resizing profile image to icon */ profileicon {
width: 64px; height: 64px; float: none; margin-top: inherit; margin-bottom: 5px;
}
/* Hovering over profileicon */ a.hverhome {
text-decoration: none; color: inherit;
}
a.hverhome span {
display: none; font-family: 'Raleway Dots', cursive;
}
a.hverhome:hover span {
display: inline-block; width: 50px; position: absolute; top: 32px; -webkit-animation-name: fadeOut; -webkit-animation-duration: 3s; -webkit-animation-delay: 0.05s; -webkit-animation-fill-mode: both; animation-name: fadeOut; animation-duration: 3s; animation-delay: : 0.05s; animation-fill-mode: both;
}
/* Generating Glitch effect for 404 page */ section {
width: 100%; height: 100vh; border-radius: 50%; background: url(../images/profile.jpeg);
}
section:hover {
opacity: initial !important;
}
.glitch {
position: relative; background-size: 100%;
}
.glitch:before, .glitch:after {
content: ''; position: absolute; border-radius: inherit; top: 0; left: 0; width: inherit; height: inherit; background: url(../images/profile.jpeg); background-size: 100%; opacity: .5; mix-blend-mode: hard-light; -webkit-animation: animate-glitch .2s linear infinite; animation: animate-glitch .2s linear infinite;
}
/* IMAGE ANIMATIONS */ /* Bounce Animation */ @-webkit-keyframes bounce {
0% { -webkit-transform: translate3d(0, -1000px, 0); } 60% { -webkit-transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; }
}
@keyframes bounce {
0% { transform: translate3d(0, -1000px, 0); } 60% { transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; }
}
/* Glitch Animation */ @-webkit-keyframes animate-glitch {
0% { background-position: 0 0; filter: hue-rotate(0deg); } 10% { background-position: 5px 0; } 20% { background-position: -5px 0; } 30% { background-position: 15px 0; } 40% { background-position: -5px 0; } 50% { background-position: -25px 0; } 60% { background-position: -50px 0; } 70% { background-position: 0 -20px; } 80% { background-position: -60px -20px; } 81% { background-position: 0 0; } 100% { background-position: 0 0; filter: hue-rotate(360deg); }
}
@keyframes animate-glitch {
0% { background-position: 0 0; filter: hue-rotate(0deg); } 10% { background-position: 5px 0; } 20% { background-position: -5px 0; } 30% { background-position: 15px 0; } 40% { background-position: -5px 0; } 50% { background-position: -25px 0; } 60% { background-position: -50px 0; } 70% { background-position: 0 -20px; } 80% { background-position: -60px -20px; } 81% { background-position: 0 0; } 100% { background-position: 0 0; filter: hue-rotate(360deg); }
}
/* Fadeout animation for texts shown on hovering */ @-webkit-keyframes fadeOut {
from { opacity: 1; } to { opacity: 0; }
} @keyframes fadeOut {
from { opacity: 1; } to { opacity: 0; }
}
/* Welcome Message Style */ greeting {
font-weight: 100; font-size: 2.0em;
}
greeting a {
text-decoration: none; color: inherit;
}
greeting a:hover {
color: red;
}
/* Page Title Style */ pagetitle {
font-family: Open Sans; font-weight: 300; font-size: 2.0em; float: none; margin-top: 5px; margin-bottom: 5px;
}
/* Line Break */ hr {
width: 50%; /* border: dashed; */ border-color: #d9d9d9;
}
/* Short bio on about page */ bio{
font-family: inherit; font-weight: 200; font-size: 1.2em; word-wrap: normal; text-align: left;
}
/* 404 Page Text Styles */ goback {
font-weight: 100; font-size: 2.0em;
}
goback a {
text-decoration: none; color: red; font-weight: 200;
}
/* Collapsible Mobile Menu */ .collapsible-menu .rise {
font-size: 2em; display: none; cursor: pointer;
}
.collapsible-menu .fall {
font-size: 2em; display: none; cursor: pointer;
}
input#menu {
display: none;
} input:checked ~ .rise{
display: none;
} input:checked ~ .fall {
display: block;
} input:checked ~ .menu-content {
max-height: 100%;
}
/* Navigation Style */ .nav {
display: inline-block; list-style: none; text-align: center; margin: 0 auto;
}
.nav li {
float: left;
}
.nav li a {
padding: 15px 30px; text-decoration: none;
}
/* Navigation style for mobile & phablets */ @media screen and (max-width: 550px) {
.nav li { float: none; width: 100%; } .menu-content { max-height: 0; overflow: hidden; } .collapsible-menu .rise { display: block; }
}
/* Navigation text colors */ blog {
color: rgb(18, 16, 14);
}
fb {
color: rgb(68, 105, 176);
}
twitter {
color: rgb(42, 163, 239);
}
github {
color: rgb(34, 34, 34);
}
linked {
color: rgb(0, 0, 0);
}
in {
color: rgb(0, 119, 181);
}
email {
color: rgb(221, 83, 75);
}
/* Blog Index Style */ ul {
list-style: none; margin: inherit; padding: inherit; text-align: left;
}
ul li {
margin: 25px 0;
}
.post-title a {
max-width: 100%; word-wrap: normal !important; font-weight: 400; font-size: 1.5em; text-decoration: none; color: inherit;
}
.post-title a:hover {
color: red;
}
.post-date {
float: right; font-family: Open Sans; color: #d3d3d3; text-transform: uppercase;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
/* Pagination Style */ .pagination {
font-family: Open Sans; font-weight: 400; font-size: 1.1em;
}
.pagination a {
text-decoration: none; font-size: 0.9em !important; color: #d3d3d3;
}
.pagination a:hover {
color: red;
}
/* Blog Post Styles */ .blogtitle {
font-family: inherit; font-size: xx-large; color: red; text-align: left; margin-bottom: 1%;
}
.blogdate {
color: #b3b3b3; float: left;
}
.blogcontent {
font-family: Open Sans; text-align: left; margin-top: 3%;
}
.post-navigation {
font-family: Open Sans;
}
.post-navigation a {
text-decoration: none; color: #d3d3d3;
}
.post-navigation a:hover {
color: red;
}
/* Footer Styles */ .footer {
padding: 15px 0; margin: 15px 0 0; font-size: 0.8rem; color: #e6e6e6; text-align: center; position: relative;
}
.footer:before {
content: ""; display: block; margin: 0 auto; width: 75%; border-top: 1px solid #f2f2f2;
}
.footer:after{
content: ""; display: block; margin: 0 auto; width: 75%; border-bottom: 1px solid #f2f2f2;
}
.footer a {
color: inherit;
}