Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix | bugfix

Browse Source 
Co-authored-by: Your Name <you@example.com>
Reviewed-on: #19
pull/20/head^2
Andrei-10 3 months ago
parent 5964b822e8
commit ec84500a88
4 changed files with 618 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css
  2. 200
      wp-content/themes/cosmopet/modules/blog/components/editorial/assets/css/style.css
  3. 334
      wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css
  4. 83
      wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css

2
wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css
Unescape View File

@ -63,4 +63,6 @@ main{
.reply-form-container textarea{
background-color: #fff !important;
margin-top: 2rem;
width: 100%;
}

200
wp-content/themes/cosmopet/modules/blog/components/editorial/assets/css/style.css
Unescape View File

@ -0,0 +1,200 @@
/* Editorial */
.editorial {
padding-bottom: 68px;
}
.editorial-head {
position: relative;
z-index: 1;
max-width: 841px;
margin-bottom: 37px;
}
.editorial-head__title {
font-size: 82px;
line-height: 96px;
font-weight: bold;
color: var(--main_white);
text-transform: uppercase;
}
.editorial-head__img {
position: absolute;
z-index: -1;
top: -14px;
right: -20px;
width: 221px;
}
.editorial-head__star {
position: absolute;
top: 8.26px;
right: -13.5px;
transform: translateX(100%);
width: 87.5px;
}
.editorial-card__wrap {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 31px 25px;
position: relative;
z-index: 1;
}
.editorial-card {
border: 2px solid var(--creme-white);
border-radius: 30px;
display: flex;
align-items: stretch;
overflow: hidden;
background: var(--linear);
backdrop-filter: blur(28px);
}
.editorial-card .main-img {
min-height: 282px;
width: 207px;
border-radius: 29px;
overflow: hidden;
flex-shrink: 0;
}
.editorial-card:hover .main-img img{
width: 120%;
height: 120%;
}
.editorial-card .main-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .5s;
}
.editorial-card__content {
padding: 42px 19px 19px 35px;
}
.editorial-card__content-alerts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-bottom: 17px;
}
.editorial-card__content-alerts a {
background: var(--main_black);
border-radius: 16px;
padding: 6px 8px;
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: var(--background);
}
.editorial-card__content-title {
font-size: 28px;
font-weight: bold;
line-height: 32px;
color: var(--grey-black);
text-transform: uppercase;
margin-bottom: 17px;
}
.editorial-card__content-data {
display: flex;
flex-wrap: wrap;
gap: 5px 16px;
color: var(--interface_hover);
font-size: 16px;
font-weight: 500;
line-height: 20px;
}
.editorial-card__content-data ul {
display: flex;
align-items: center;
gap: 16px;
}
.editorial-card__content-data li {
display: flex;
align-items: center;
gap: 5px;
}
.editorial-card__content-data .logo img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
/* Editorial end */
@media (max-width: 1200px) {
.editorial-card__wrap {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.editorial {
padding-bottom: 36px;
}
.editorial-head {
margin-bottom: 36px;
max-width: 313px;
}
.editorial-head__title {
font-size: 32px;
line-height: 38px;
}
.editorial-head__img {
width: 100px;
top: -14px;
right: -22.5px;
}
.editorial-head__star {
display: none;
}
}
@media (max-width: 576px) {
.editorial-card {
flex-direction: column;
border-radius: 30px;
position: relative;
}
.editorial-card .main-img {
width: 100%;
height: 203px;
}
.editorial-card__content {
padding: 17px 13px 24px;
}
.editorial-card__content-alerts {
position: absolute;
top: 13px;
left: 8px;
width: calc(100% - 16px);
}
.editorial-card__content-title {
font-size: 20px;
line-height: 24px;
margin-bottom: 17px;
}
.editorial-card__content-data {
gap: 5px 16px;
}
}

334
wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css
Unescape View File

@ -122,4 +122,336 @@ p.discount-description__2 {
font-weight: 500;
color: var(--main_black);
}
/* Discount end */
/* Discount end */
/* Article home */
.article-home {
padding-bottom: 36px;
}
.article-home h1 {
font-size: 64px;
font-weight: bold;
line-height: 120%;
color: var(--main_white);
margin-bottom: 17px;
text-transform: uppercase;
}
.article-home__data {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 24px;
margin-bottom: 17px;
}
.article-home__data-alerts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.article-home__data-alerts a {
font-size: 16px;
line-height: 20px;
font-weight: 500;
color: var(--background);
padding: 6px 8px;
border-radius: 20px;
background: var(--main_black);
}
.article-home__data p {
font-size: 14px;
line-height: 16px;
font-weight: 500;
color: var(--main_white);
display: flex;
align-items: center;
gap: 4px;
}
.article-home__data .user {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
line-height: 16px;
font-weight: 500;
color: var(--main_white);
}
.article-home__data .user img {
width: 32px;
height: 32px;
border-radius: 50px;
object-fit: cover;
}
.article-home__card {
width: 100%;
aspect-ratio: 1223/500;
}
.article-home__card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 64px;
}
@media (min-width: 992px) {
.article-home.position-1 .container {
position: relative;
z-index: 1;
}
.article-home.position-1 .article-home__card {
width: calc(50% - 12px);
position: absolute;
top: 0;
right: 0;
height: 100%;
z-index: -1;
}
.article-home.position-1 h1 {
width: calc(50% - 12px);
}
.article-home.position-1 .article-home__data {
max-width: 406px;
}
.article-home.position-2 .container {
position: relative;
z-index: 1;
height: 695px;
padding: 45px 42px;
}
.article-home.position-2 .article-home__card {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
}
.article-home.position-2 .article-home__card::before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(282.92deg, rgba(255, 255, 255, 0) 50.1%, #FFFFFF 77.26%);
position: absolute;
top: 0;
left: 0;
border-radius: 50px;
}
.article-home.position-2 h1 {
color: var(--main_black);
max-width: 838px;
}
.article-home.position-2 .article-home__data {
width: 304px;
}
.article-home.position-2 .article-home__data p {
color: var(--main_black);
}
.article-home.position-2 .article-home__data p img {
filter: brightness(0) invert(0)
}
.article-home.position-2 .article-home__data .user {
color: var(--main_black);
}
}
.article-content {
background: var(--main_white);
border-radius: 64px;
max-width: 1232px;
margin: 0 auto;
padding: 64px 0 116px;
}
.article-container {
max-width: 1022px;
margin: 0 auto;
@media (max-width: 1054px) {
max-width: calc(100% - 32px);
}
}
/* Article home end */
/* comment */
.comment {
border-top: 1px solid var(--placeholder);
padding-top: 48px;
margin-top: 100px;
}
.comment .comment-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.comment .comment-btn button {
padding: 12px 24px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 8px;
background: var(--btn-bg);
font-size: 20px;
font-weight: 600;
line-height: 24px;
font-family: var(--font-craftwork);
}
.comment .comment-btn span {
font-family: var(--font-craftwork);
font-size: 20px;
font-weight: 500;
line-height: 24px;
}
.comment .comment-title {
font-family: var(--font-craftwork);
font-size: 24px;
font-weight: 700;
line-height: 28px;
color: var(--grey-black);
margin: 48px 0 0 0;
}
.comment .comment-in {
max-width: 816px;
margin: 0 auto;
}
.comment .comment-block {
margin-top: 40px;
padding: 28px 48px;
border-radius: 24px;
background: var(--grey-f5);
}
.comment .comment-block p {
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: var(--grey-black);
}
.comment .comment-block p a {
color: var(--green-dark);
text-decoration: underline;
}
.comment .comment-user {
display: flex;
align-items: center;
gap: 12px;
}
.comment .comment-user img {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
}
.comment .comment-user h6 {
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: var(---main_black);
margin-bottom: 5px;
}
.comment .comment-user span {
font-size: 14px;
font-weight: 500;
line-height: 16px;
color: var(--interface_hover);
}
.comment .comment-block p {
margin: 15px 0;
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: var(---main_black);
}
.comment .comment-btns {
display: flex;
align-items: center;
gap: 33px;
}
.comment .comment-btns button {
font-size: 14px;
font-weight: 500;
line-height: 16px;
color: var(--interface_hover);
display: flex;
align-items: center;
gap: 5px;
}
.comment .answer-btn {
margin-bottom: 10px;
font-family: var(--font-craftwork);
font-size: 16px;
font-weight: 700;
line-height: 20px;
color: var(--green-dark);
display: flex;
align-items: center;
gap: 8px;
padding: 6px 24px;
text-transform: lowercase;
}
.comment .answer-btn svg {
transition: .2s ease;
}
.comment .answer-btn svg.active {
transform: rotate(180deg);
}
.comment .answer-block {
display: none;
margin: 0 0 0 54px;
}
.comment .answer-block.active {
display: block;
}
.comment .comment-block_text {
margin: 0 !important;
}
.other-home {
padding-top: 36px !important;
}
/* comment */

83
wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css
Unescape View File

@ -59,4 +59,87 @@
font-size: 12px;
line-height: 120%;
}
.article-home {
padding-bottom: 36px;
}
.article-home .container {
display: flex;
flex-direction: column;
}
.article-home h1 {
order: 1;
font-size: 32px;
line-height: 38px;
margin-bottom: 15px;
}
.article-home__card {
order: 2;
}
.article-home__card img {
border-radius: 32px;
}
.article-home__data {
gap: 8px 16px;
order: 3;
margin: 15px 0 0;
}
.article-home__data-alerts {
gap: 16px;
}
.article-home__data-alerts a {
padding: 6px 8px;
}
.article-content {
padding: 48px 0;
border-radius: 64px;
}
.comment .comment-block {
padding: 20px 24px;
margin-top: 28px;
}
.comment .comment-title {
padding-bottom: 20px;
}
.comment .answer-block {
margin: 10px 0 0 42px;
}
.comment .comment-user h6 {
font-size: 16px;
line-height: 24px;
}
.comment .comment-block p {
font-size: 16px;
line-height: 24px;
}
.comment .comment-btns {
gap: 14px;
}
.comment .comment-btns button {
font-size: 12px;
line-height: 16px;
}
.comment .comment-user span {
font-size: 12px;
line-height: 16px;
}
}
Write Preview
Loading…
Cancel
Save