File "style.css"
Full Path: /home/pumpbmko/public_html/wp-content/themes/impressive-portfolio/style.css
File size: 10.46 KB
MIME-type: text/plain
Charset: utf-8
/**
Theme Name: Impressive Portfolio
Theme URI: https://ascendoor.com/themes/impressive-portfolio/
Author: Ascendoor
Author URI: https://ascendoor.com/
Version: 1.0.1
Requires PHP: 7.4
Tested up to: 6.4
Requires at least: 5.0
Template: pure-portfolio
Text Domain: impressive-portfolio
Description: Impressive Portfolio ( child of Pure Portfolio ) theme is specifically created for individuals who want to showcase their personal portfolio with a visually striking design that captures the attention of their visitors. Whether you're a freelancer, designer, developer, photographer, artist, or any other professional looking to create a portfolio website, it is the ideal theme for you .With its user-friendly interface and easy customization options, it allows you to build your website in just a few minutes. Additionally, this theme is equipped with a high-resolution display and a responsive layout, ensuring that it looks great on any device. It is also designed to be mobile-friendly and compatible with all popular web browsers, enabling easy access for mobile users. Check the theme documentation at: https://docs.ascendoor.com/docs/impressive-portfolio/ and demo at: https://demos.ascendoor.com/impressive-portfolio/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-background, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, e-commerce, blog, portfolio
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
Impressive Portfolio is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Elements
--------------------------------------------- */
:root {
--primary-color: #ff6762;
}
/* blog grid CSS start
--------------------------------------------- */
.pure-portfolio-blog-section .pure-portfolio-blog-view-all {
display: flex;
margin-top: 50px;
justify-content: center;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single {
display: flex;
flex-direction: column;
background-color: var(--background-color-grey);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-blog-img > a {
display: block;
line-height: 0;
height: 100%;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-blog-img > a img {
position: relative;
height: 100%;
width: 100%;
aspect-ratio: 1/0.7;
object-fit: cover;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-blog-img > a:focus {
outline: 1px dashed;
outline-offset: 2px;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail {
color: var(--color-text-main);
padding: 20px;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .shop-blog-category {
display: flex;
flex-wrap: wrap;
font-size: var(--body-text-font-size);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .shop-blog-category a {
text-transform: uppercase;
text-decoration: none;
color: var(--color-text-main);
transition: all 0.3s linear;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .shop-blog-category a:focus,
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .shop-blog-category a:hover {
color: var(--color-text-main);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .shop-blog-category a:not(:first-child) {
margin-block-end: 4px;
margin-inline-start: 4px;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-blog-title {
font-size: var(--font-size-md);
line-height: 1.2;
margin-top: 0;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-blog-title a {
text-decoration: none;
color: var(--color-text-main);
transition: all 0.3s linear;
display: inline-block;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-blog-title a:focus,
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-blog-title a:hover {
color: var(--primary-color);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-meta {
color: var(--primary-color);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-meta a {
text-decoration: none;
color: var(--color-text-main);
transition: all 0.3s linear;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-meta a:focus,
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-meta a:hover {
color: var(--primary-color);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-meta:not(:last-child) {
margin-bottom: 8px;
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-description {
font-size: var(--body-text-font-size);
}
.pure-portfolio-blog-section .pure-portfolio-blog-single .pure-portfolio-detail .pure-portfolio-readmore {
display: flex;
margin-top: 20px;
}
.pure-portfolio-blog-section.blog-style-1 .pure-portfolio-blog-section-wrapper {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.pure-portfolio-blog-section.blog-style-1 .pure-portfolio-blog-section-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.pure-portfolio-blog-section.blog-style-1 .pure-portfolio-blog-section-wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
/* blog grid CSS end
--------------------------------------------- */
/* Gallery CSS start
--------------------------------------------- */
.pure-portfolio-gallery-section .pure-portfolio-button {
margin-top: 30px;
text-align: center;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap {
transition: all 0.3s ease;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single {
position: relative;
padding: 15px;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
transition: all 0.3s ease;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail {
max-width: 100%;
height: 100%;
color: var(--color-text-white);
text-align: start;
transition: all 0.3s ease;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
opacity: 0;
z-index: -1;
transition: all .4s ease-out 0s;
transform: translateY(-20px);
color: #fff;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail > * {
position: relative;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail .pure-portfolio-gallery-title {
font-size: var(--font-size-base);
margin: 0;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail .pure-portfolio-gallery-title a {
color: var(--color-text-white);
text-decoration: none;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail .pure-portfolio-gallery-title a:focus,
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail .pure-portfolio-gallery-title a:hover {
color: var(--primary-color);
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single .pure-portfolio-gallery-detail .pure-portfolio-content {
margin-bottom: 0;
margin-top: 10px;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap .pure-portfolio-gallery-single::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
-webkit-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s;
height: 0;
background: #000;
z-index: 0;
opacity: 0;
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap:focus-within .pure-portfolio-gallery-single .pure-portfolio-gallery-detail, .pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap:hover .pure-portfolio-gallery-single .pure-portfolio-gallery-detail {
z-index: 3;
opacity: 1;
transform: translateY(0);
}
.pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap:focus-within .pure-portfolio-gallery-single::after, .pure-portfolio-gallery-section.gallery-style-1 .pure-portfolio-gallery-slider .pure-portfolio-gallery-single-wrap:hover .pure-portfolio-gallery-single::after {
opacity: 0.7;
height: 100%;
}
/* Gallery CSS end
--------------------------------------------- */