hugo-theme-hyde-hyde/static/css/portfolio.css
2018-07-16 13:22:41 +10:00

248 lines
3.8 KiB
CSS

/*
* This portfolio theme is derived from the template
* 'Developer - Responsive Website Template for Developers' version: 1.5
* developed by Xiaoying Riley (@3rdwave_themes) under 'Creative Commons
* Attribution 3.0 License'
*/
/* Only need few styles from Bootstrap */
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-12 {
width: 100%;
}
.col-sm-4,
.col-md-4,
.col-sm-8,
.col-md-8,
.col-xs-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
@media (min-width: 992px) {
.col-md-4,
.col-md-8 {
float: left;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
}
@media (min-width: 768px) {
.col-sm-8 {
width: 66.66666667%;
}
}
.portfolio-container {
margin-left: auto;
margin-right: auto;
max-width: 38rem;
padding-left: 1rem;
padding-right: 1rem;
}
.portfolio-content {
padding-bottom: 2rem;
padding-top: 2rem;
}
@media (min-width: 48em) {
.portfolio-content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 38rem;
}
}
@media (min-width: 64em) {
.portfolio-content {
margin-left: 20rem;
margin-right: 2rem;
max-width: 44rem;
}
}
.btn {
font-weight: bold;
padding: 8px 16px;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.btn:focus {
color: #fff;
}
.btn-cta-secondary {
background: #479FC8;
border: 1px solid #479FC8;
color: #fff;
font-weight: 600;
text-transform: uppercase;
}
.btn-cta-secondary:hover {
background: #3893bd;
border: 1px solid #3893bd;
color: #fff;
}
.text-left {
text-align: left;
}
/* ======= Sections======= */
.section {
margin-bottom: 30px;
}
.section .section-inner {
background: #fff;
padding: 30px;
}
.section .heading {
margin-top: 0;
margin-bottom: 30px;
color: #303030;
font-size: 2.125rem;
}
.item {
margin-bottom: 30px;
}
.item .title {
margin-top: 0;
}
.item .title a {
color: #303030;
}
.item .title a:hover {
color: #5f6b77;
}
.item .project-image:hover {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
.divider {
margin-bottom: 60px;
}
.featured {
margin-bottom: 60px;
}
.featured .title {
margin-bottom: 5px;
}
.featured .summary,
.desc .summary {
margin-bottom: 30px;
color: #778492;
}
.desc .summary {
font-style: italic;
}
.featured img {
margin-bottom: 30px;
}
.featured .desc {
margin-bottom: 30px;
}
.featured-image {
position: relative;
}
.featured-image .text {
background: #3AAA64;
color: #fff;
}
.featured-image .ribbon {
position: absolute;
top: -4px;
right: -4px;
width: 110px;
height: 110px;
overflow: hidden;
}
.featured-image .ribbon .text {
position: relative;
left: -8px;
top: 18px;
width: 158px;
padding: 10px 10px;
font-size: 15px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #fff;
background-color: #479FC8;
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
-o-transform: rotate(45deg) translate3d(0, 0, 0);
transform: rotate(45deg) translate3d(0, 0, 0);
}
.featured-image .ribbon .text:before,
.featured-image .ribbon .text:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #276582;
bottom: -5px;
content: '';
position: absolute;
}
.featured-image .ribbon .text:before {
left: 0;
}
.featured-image .ribbon .text:after {
right: 0;
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
.project-image {
margin-bottom: 15px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.portfolio-container {
width: 1360px;
}
}