AyuGroovy – Generatepress Custom Template
This is WordPress Custom Template based on GeneratePress framework. This theme is built on the powerful GeneratePress framework, and it is known for its speed and customization capabilities. Inspired by Groovy Theme.
Themes and Plugins Requirements:
- Generatepresstheme
- GenerateBlocks & Proplugin
All the CSS Code of AyuGroovy –
/* Adjusting margin for the entire body */
body {
margin-top: 25px;
}
#block-11 .wp-image-38 {}
.post li {
padding-top: 10px;
}
body {
background-image: linear-gradient(to right, red 0%, rgba(84, 203, 202, 0.7) 0%, rgba(84, 203, 202, 1) 100%);
}
body .inside-header {
border-bottom-width: 20px;
border-bottom-style: solid;
border-top-width: 20px;
border-top-style: solid;
border-right-width: 0px;
border-right-style: solid;
border-left-width: 0px;
border-left-style: solid;
border-radius: 100px 100px 100px 100px;
border-width: 0px;
border-color: rgba(84, 203, 202, 1);
}
#masthead .header-image:hover {
margin-top: -3px;
}
body>#masthead {
border-width: 0px;
border-style: solid;
border-radius: 100px 100px 100px 100px;
}
/* Styling for the main article section */
#content>#primary>#main .inside-article {
border-radius: 15px 15px 15px 15px;
}
/* Styling for a specific block in the right sidebar */
#page>#content>#right-sidebar #block-2 {
border-radius: 15px 15px 15px 15px;
}
/* Archive Post Adjust */
.post .attachment-full {
border-radius: 10px 10px 10px 10px;
margin-bottom: 20px;
}
/* Sidebar section CSS */
.sidebar .widget {
width: 330px;
border-radius: 15px;
padding: 20px;
}
/* Styling for a specific heading in the right sidebar */
#right-sidebar .wp-block-heading {
margin-top: -38px;
background-color: rgba(255, 255, 255, 1);
padding-right: 0px;
margin-right: 95px;
padding-top: 3px;
padding-left: 15px;
padding-bottom: 7px;
border-radius: 20px;
border-color: rgba(0, 0, 0, 1);
border-width: 1px;
border-style: solid;
}
/* Styles for images and paragraphs in block-11 */
#block-11 .wp-image-38 {}
#block-11 p {
margin-bottom: 10px;
}
/* Media query for screens with a minimum width of 769px */
@media (min-width: 769px) {
.site-content {
display: flex;
}
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 70px; /* Adjust position */
}
}
/* Sidebar Profile image hover effect css */
#block-11 .wp-image-38 {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
backface-visibility: hidden;
transition: transform 0.3s;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#block-11 .wp-image-38:hover {
transform: scale(1.1);
}
/* Archive Read More button Adjust */
.post .read-more {
position: relative;
left: 450px;
}
.post .read-more {
border-radius: 92px 92px 92px 92px;
}
/* Media query for screens with a maximum width of 768px (adjust as needed) */
@media (max-width: 768px) {
.post .read-more {
position: relative; /* Reset position for mobile screens */
left: 0; /* Reset left position for mobile screens */
}
}
:root {
--epcl-font-family: "Jost", "Source Sans Pro", serif;
--epcl-border-color: rgba(39, 39, 39, 0.75);
--epcl-small-shadow: 2px 2px 0px 0px #333;
--main-color: var(--ghost-accent-color);
--epcl-transition-bezier: cubic-bezier(0.5, 2.5, 0.7, 0.7);
}
/* Styling for various buttons and links */
.pagination-bt,
.read-more-bt,
.wp-block-search__button,
a.button,
input[type="submit"],
.button,
.epcl-button:not(.epcl-shortcode) {
font-size: 15px;
padding: 5px 25px;
transition: all 300ms var(--epcl-transition-bezier);
background-size: 200% auto;
box-shadow: var(--epcl-small-shadow);
border-radius: 25px;
border: 1px solid #000;
background-color: #fff;
color: #000;
text-decoration: none;
outline: none;
cursor: pointer;
position: relative;
z-index: 2;
font-family: var(--epcl-font-family);
font-weight: 700;
margin: 0;
vertical-align: baseline;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
.button:hover, .epcl-button:hover:not(.epcl-shortcode) {
-webkit-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);