jett-theme/assets/css/custom.css
Aadil Ayub 36be488eef
All checks were successful
continuous-integration/drone/push Build is passing
reduce font sizes on tiny screens
2024-07-03 14:54:01 +05:00

261 lines
5.1 KiB
CSS

/* styling picture captions */
figcaption.wp-element-caption {
width: fit-content;
margin: 0;
padding: 8px 12px;
}
/* style header nav */
.main-header-nav .wp-block-navigation-item {
justify-content: center;
border: 1px solid;
flex-grow: 1;
border-left: 0;
padding-block: 0.5em
}
.main-header-nav .wp-block-navigation-item:last-of-type {
border-right: 0;
}
nav.wp-block-navigation.mobile-header-nav {
border-top: 1px solid;
border-bottom: 1px solid;
padding-block: 15px
}
ul.wp-block-navigation.mobile-header-nav li {
font-size: 40px !important;
margin-block: .5em;
}
@media (min-width: 1080px) {
.main-header-nav .wp-block-navigation-item:hover,
.main-header-nav .wp-block-navigation-item:focus {
background: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
border-color: var(--wp--preset--color--black);
cursor: pointer;
}
.main-header-nav .wp-block-navigation-item__content {
width: -webkit-fill-available;
text-align: center;
}
}
/* style footer on mobile */
@media (min-width: 1080px) {
.wp-block-column.footer-gradient-column {
padding-left: 2rem !important;
border-left: 8px solid var(--wp--preset--color--turquoise-green);
}
}
@media (max-width: 786px) {
.wp-block-column.footer-gradient-column {
padding-top: 1.5rem !important;
border-top: 8px solid var(--wp--preset--color--turquoise-green);
}
}
/* utulity class for overlapping items */
.overlap {
z-index: 21;
}
/* style blog posts */
.home-post-item {
height: 100%
}
/* Removing default underline for most links */
.post-title a {
text-decoration: none;
}
.post-title a:hover,
.post-title a:focus {
text-decoration: underline;
}
.site-footer a {
text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
text-decoration: underline;
}
/* fixing padding for certain elements on front page */
@media (max-width: 480px) {
body {
--wp--preset--spacing--80: 1rem;
}
}
/* tweak footer font sizes on mobile */
@media (max-width: 480px) {
.site-footer ul.is-style-arrow li {
font-size: 18px !important;
}
}
/* styling blog post template */
.post-content-container {
width: fit-content;
}
.post-header {
max-width: 1480px;
}
.post-bio-container {
max-width: 640px;
}
/* utility class for reversing column on mobile */
@media (max-width: 480px) {
.col-sm-reverse {
flex-direction: column-reverse;
}
.container--about-us {
padding-left: 0 !important;
}
}
.constrained-text-width.mw-740 > p {
max-width: 740px;
}
.sans-serif-bold strong {
font-family: 'Instrument Sans', sans-serif;
font-size: 20px;
}
p.is-style-outline.wp-block-tag-cloud {
display: block;
}
.wp-block-tag-cloud a {
display: block;
text-align: center;
margin-bottom: 1em;
margin-inline: 2em;
background: black;
color: white;
border-color: black;
font-weight: bold;
}
.wp-block-tag-cloud a:hover {
text-decoration: underline !important;
}
.wp-block-search__inside-wrapper {
background-color: var(--wp--preset--color--black);
}
.wp-block-search__input {
background: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
padding-inline: 2rem;
font-weight: bold;
}
.wp-block-search__button.has-icon {
background: var(--wp--preset--gradient--violet-to-green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.contact-card:hover,
.contact-card:focus {
background: var(--wp--preset--gradient--green-to-violet);
cursor: pointer;
}
a.wp-block-tiptip-hyperlink-group-block {
text-decoration: none;
}
.about-heading {
position: relative;
}
@media (min-width: 1440px) {
.illustrated-heading {
margin-top: 400px !important;
}
.illustrated-heading::after {
content: '';
display: inline-block;
background: url(https://jett.autonomic.zone/wp-content/uploads/2024/06/image.png);
height: 501px;
width: 632px;
background-size: contain;
position: absolute;
bottom: -19px;
right: -98px;
}
}
@media (max-width: 768px) {
.illustrated-heading {
margin-top: 227px !important;
}
.illustrated-heading::after {
content: '';
display: inline-block;
background: url(https://jett.autonomic.zone/wp-content/uploads/2024/06/image.png);
height: 290.476px;
width: 366px;
background-size: contain;
position: absolute;
bottom: 77px;
}
}
.blog-post-content strong {
font-family: var(--wp--preset--font-family--instrument-sans);
}
.blog-post-content h2.wp-block-heading {
background: var(--wp--preset--gradient--green-to-violet);
padding: .5em;
padding-inline-start: 1.25em;
border: 1px solid;
margin-inline: -1.7em;
margin-block: 1em;
font-family: var(--wp--preset--font-family--instrument-sans);
letter-spacing: -0.4px;
font-size: 38px;
}
.blog-post-content blockquote.wp-block-quote {
margin-inline-start: -2em;
}
@media (max-width: 1079px) {
.blog-post-content .wp-block-image {
margin-inline: -42px;
}
}
@media (min-width: 1080px) {
.blog-post-content .wp-block-image {
margin-inline: -55px;
}
}
@media (max-width: 360px) {
:root {
--wp--preset--font-size--huge : 45px;
--wp--preset--font-size--xx-large: 38px;
}
}