|
@@ -113,6 +113,11 @@ video {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
+.img-responsive {
|
|
|
+ /* Extend Bootstrap declaration with centering. */
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
figcaption:before {
|
|
|
font-weight: 700;
|
|
|
text-transform: uppercase;
|
|
@@ -176,9 +181,20 @@ blockquote p:last-child {
|
|
|
* Home Sections
|
|
|
**************************************************/
|
|
|
|
|
|
+@keyframes intro {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.home-section {
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
padding: 110px 0 110px 0;
|
|
|
+ animation: intro 0.3s both;
|
|
|
+ animation-delay: 0.15s;
|
|
|
}
|
|
|
@media screen and (max-width: 768px) {
|
|
|
.home-section {
|
|
@@ -344,6 +360,11 @@ ul.share li:hover .fa {
|
|
|
* Blog Articles
|
|
|
**************************************************/
|
|
|
|
|
|
+article {
|
|
|
+ animation: intro 0.3s both;
|
|
|
+ animation-delay: 0.15s;
|
|
|
+}
|
|
|
+
|
|
|
.article-title {
|
|
|
font-size: 1.75rem;
|
|
|
}
|
|
@@ -497,6 +518,122 @@ ul.share li:hover .fa {
|
|
|
color: #9c9c9c;
|
|
|
}
|
|
|
|
|
|
+#container-projects {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ /*margin-top: 5rem;*/
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.project-toolbar{
|
|
|
+ margin-bottom: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.project-item {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.isotope-item {
|
|
|
+ transition-property: transform, opacity;
|
|
|
+ transition-duration: 0.8s;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.isotope-item:hover{
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+
|
|
|
+/*************************************************
|
|
|
+ * Card component
|
|
|
+ **************************************************/
|
|
|
+
|
|
|
+.card {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
|
|
+ transition: all 0.2s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+.card .card-image {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ min-height: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.card h4 {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.5;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
+.card h4 a {
|
|
|
+ color: #000;
|
|
|
+ border-bottom: solid 1px transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.card h4 a:hover {
|
|
|
+ color: #000;
|
|
|
+ border-bottom: solid 1px #000;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.card .card-text {
|
|
|
+ padding: 0.75rem 1rem 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.card .card-text p {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 0.75rem;
|
|
|
+}
|
|
|
+
|
|
|
+.card p:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card .card-image.hover-overlay:before {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ content: " ";
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.2s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+.card .card-image.hover-overlay:after {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ width: 100%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.2s ease-out;
|
|
|
+ font-family: 'FontAwesome';
|
|
|
+ content: '\f0c1';
|
|
|
+ text-align: center;
|
|
|
+ font-size: 3rem;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.card:hover {
|
|
|
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.card:hover .card-image.hover-overlay:before {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.card:hover .card-image.hover-overlay:after {
|
|
|
+ opacity: 0.6;
|
|
|
+}
|
|
|
+
|
|
|
/*************************************************
|
|
|
* Contact
|
|
|
**************************************************/
|
|
@@ -548,6 +685,7 @@ footer a#back_to_top i {
|
|
|
|
|
|
.btn-primary {
|
|
|
border-color: #0095eb;
|
|
|
+ background: #0095eb;
|
|
|
}
|
|
|
|
|
|
.btn-primary:hover,
|
|
@@ -558,6 +696,34 @@ footer a#back_to_top i {
|
|
|
background: #0095eb;
|
|
|
}
|
|
|
|
|
|
+/*************************************************
|
|
|
+ * Toolbar Buttons
|
|
|
+ **************************************************/
|
|
|
+
|
|
|
+.btn-toolbar .btn {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ padding: 10px 14px 9px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-toolbar .btn:first-child {
|
|
|
+ border-radius: 6px 0 0 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-toolbar .btn:last-child {
|
|
|
+ border-radius: 0 6px 6px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-toolbar .btn.btn-primary:hover,
|
|
|
+.btn-toolbar .btn.btn-primary:focus {
|
|
|
+ background-color: rgba(0,149,235,0.6);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-toolbar .btn.btn-primary:active,
|
|
|
+.btn-toolbar .btn.btn-primary.active {
|
|
|
+ background-color: rgba(0,89,175,1);
|
|
|
+}
|
|
|
+
|
|
|
/*************************************************
|
|
|
* Button Outlines
|
|
|
**************************************************/
|