generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
shafin-r
111
newspaper/assets/css/account.css
Normal file
111
newspaper/assets/css/account.css
Normal file
@ -0,0 +1,111 @@
|
||||
.account-info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 540px;
|
||||
text-align: center;
|
||||
margin-bottom: 4vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.account-paragraph-info {
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.account-buttons-wrapper {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.account-button {
|
||||
min-width: 142px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.account-settings-button {
|
||||
text-decoration: underline;
|
||||
line-height: 140%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.account-subscribe-button {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.account-data {
|
||||
margin-bottom: 34px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.account-data-row {
|
||||
gap: 38px;
|
||||
width: 100%;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.left-align {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right-align {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.account-info-container {
|
||||
max-width: calc(37.5vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-paragraph-info {
|
||||
margin-bottom: calc(1.88vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-buttons-wrapper {
|
||||
gap: calc(1.53vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-button {
|
||||
min-width: calc(9.86vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-settings-button {
|
||||
margin-top: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-data {
|
||||
margin-bottom: calc(2.36vw * var(--scale))
|
||||
}
|
||||
|
||||
.account-data-row {
|
||||
gap: calc(2.64vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.account-paragraph-info {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.account-buttons-wrapper {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.account-button {
|
||||
min-width: 126px;
|
||||
}
|
||||
|
||||
.account-settings-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.account-data {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
232
newspaper/assets/css/announcement-bar.css
Normal file
232
newspaper/assets/css/announcement-bar.css
Normal file
@ -0,0 +1,232 @@
|
||||
.custom-announcement-bar {
|
||||
width: 100%;
|
||||
display: none;
|
||||
align-items: stretch;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.announcement-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 17px;
|
||||
background-color: var(--text-color);
|
||||
color: var(--background-color);
|
||||
font-family: var(--font1);
|
||||
line-height: 160%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.announcement-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.announcement-text {
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
font-family: var(--font1);
|
||||
line-height: 160%;
|
||||
padding: 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.announcement-text a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.announcement-close-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--background-color);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.announcement-close-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 13px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Moving One News"] .announcement-text {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-text {
|
||||
padding-left: 17px;
|
||||
padding-right: 34px;
|
||||
white-space: unset;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-text:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slide-animation {
|
||||
animation: slideAnimation 40s linear infinite;
|
||||
}
|
||||
|
||||
.announcement-circle {
|
||||
display: inline-flex;
|
||||
border-radius: 100%;
|
||||
min-width: 5px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: var(--text-color);
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@keyframes slideAnimation {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.custom-announcement-bar {
|
||||
margin-top: calc(0.97vw * var(--scale));
|
||||
margin-bottom: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.announcement-heading {
|
||||
padding: calc(0.56vw * var(--scale)) calc(1.18vw * var(--scale));
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
.announcement-text {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
padding: calc(0.56vw * var(--scale)) 0px;
|
||||
}
|
||||
|
||||
.announcement-close-button {
|
||||
width: calc(0.9vw * var(--scale));
|
||||
min-width: calc(0.9vw * var(--scale));
|
||||
height: calc(0.9vw * var(--scale));
|
||||
margin-left: calc(1.18vw * var(--scale));
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Moving One News"] .announcement-text {
|
||||
padding-left: calc(1.18vw * var(--scale));
|
||||
padding-right: calc(1.18vw * var(--scale));
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-text {
|
||||
padding-left: calc(1.18vw * var(--scale));
|
||||
padding-right: calc(2.36vw * var(--scale));
|
||||
}
|
||||
|
||||
.announcement-circle {
|
||||
min-width: calc(0.35vw * var(--scale));
|
||||
width: calc(0.35vw * var(--scale));
|
||||
height: calc(0.35vw * var(--scale));
|
||||
margin-left: calc(1.39vw * var(--scale));
|
||||
margin-right: calc(1.39vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.custom-announcement-bar {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-text {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-content {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-close-wrapper {
|
||||
top: -21px;
|
||||
right: 16px;
|
||||
height: auto;
|
||||
transform: translateY(-50%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-close-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] svg path {
|
||||
fill: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.custom-announcement-bar {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.announcement-heading {
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.announcement-text {
|
||||
font-size: 14px;
|
||||
padding: 6px 0px;
|
||||
}
|
||||
|
||||
.announcement-close-button {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Moving One News"] .announcement-text {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.announcement-circle {
|
||||
min-width: 4px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-text {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.custom-announcement-bar[data-announcement-bar-type="Static"] .announcement-close-wrapper {
|
||||
top: -18px;
|
||||
right: 12px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
108
newspaper/assets/css/archive-tags.css
Normal file
108
newspaper/assets/css/archive-tags.css
Normal file
@ -0,0 +1,108 @@
|
||||
.archive-tags-outer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
archive-tags {
|
||||
display: flex;
|
||||
column-gap: 26px;
|
||||
row-gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.archive-tag-button {
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.radio-button-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
font-family: var(--font2);
|
||||
}
|
||||
|
||||
.archive-tag-button input[type='radio'] {
|
||||
-webkit-appearance:none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.archive-tag-button input[type='radio']:checked ~ .radio-button-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.archive-tag-button:hover .radio-button-text{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
archive-tags {
|
||||
column-gap: calc(1.81vw * var(--scale));
|
||||
row-gap: calc(1.11vw * var(--scale));
|
||||
margin-top: calc(0.56vw * var(--scale));
|
||||
}
|
||||
|
||||
.radio-button-text {
|
||||
font-size: calc(1.39vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
archive-tags {
|
||||
position: relative;
|
||||
overflow-x: scroll;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
width: 100vw;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
padding-top: 4px;
|
||||
left: -30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.archive-tags-separator {
|
||||
display: block;
|
||||
min-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
archive-tags {
|
||||
column-gap: 22px;
|
||||
padding-right: 18px;
|
||||
padding-left: 18px;
|
||||
left: -18px;
|
||||
}
|
||||
|
||||
.radio-button-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
168
newspaper/assets/css/author.css
Normal file
168
newspaper/assets/css/author.css
Normal file
@ -0,0 +1,168 @@
|
||||
.author-row{
|
||||
border-top: none;
|
||||
gap: 38px;
|
||||
}
|
||||
|
||||
#author-socials .socials {
|
||||
margin-top: 0px !important;
|
||||
flex: none !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.big-card-author-image {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
#latest-work,
|
||||
#other-authors,
|
||||
#author-mobile-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#author-sidebar > :first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author-image-layout #author-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.author-image-layout .column-layout-grid {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.author-image-right .column-layout-grid {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.author-image-layout .author-center-column,
|
||||
.author-image-layout .left-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.author-image-layout .left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-heading {
|
||||
font-size: 62px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-paragraph {
|
||||
max-width: 464px;
|
||||
}
|
||||
|
||||
.simple-layout-socials {
|
||||
margin-top: 27px;
|
||||
gap: 38px;
|
||||
}
|
||||
|
||||
.simple-layout-socials .social {
|
||||
gap: 8px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.location-social:hover {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.author-row {
|
||||
gap: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-card-author-image {
|
||||
margin-bottom: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.author-image-layout .left-column {
|
||||
margin-bottom: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-heading {
|
||||
font-size: calc(4.31vw * var(--scale));
|
||||
margin-bottom: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-paragraph {
|
||||
max-width: calc(32.2vw * var(--scale));
|
||||
}
|
||||
|
||||
.simple-layout-socials {
|
||||
margin-top: calc(1.88vw * var(--scale));
|
||||
gap: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.simple-layout-socials .social {
|
||||
gap: calc(0.56vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
#author-sidebar,
|
||||
#number-of-articles,
|
||||
.author-center-column {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.author-row {
|
||||
border-bottom: none;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
#author-mobile-image {
|
||||
display: block;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.author-image-layout .left-column {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-heading {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-paragraph {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.simple-layout-socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 32px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
#author-mobile-image {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-heading {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.author-image-layout .text-card-paragraph {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.simple-layout-socials {
|
||||
margin-top: 20px;
|
||||
column-gap: 22px;
|
||||
}
|
||||
}
|
||||
574
newspaper/assets/css/cards.css
Normal file
574
newspaper/assets/css/cards.css
Normal file
@ -0,0 +1,574 @@
|
||||
.small-card {
|
||||
width: 100%;
|
||||
padding: 38px 0px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.small-card-small-text {
|
||||
display: flex;
|
||||
line-height: 100%;
|
||||
color: var(--text-color);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.small-card-heading {
|
||||
margin-top: 13px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.small-card-image-link {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.small-card-image-wrapper {
|
||||
width: 100%;
|
||||
height: 16vw;
|
||||
}
|
||||
|
||||
.small-card-text {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.small-card-bottom-text {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.big-card {
|
||||
width: 100%;
|
||||
padding-bottom: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.big-card-image-link {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.big-card-image-wrapper {
|
||||
width: 100%;
|
||||
height: 31vw;
|
||||
}
|
||||
|
||||
.big-card-heading {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.big-card-text {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.horizontal-card {
|
||||
border-top: 1px solid var(--text-color);
|
||||
width: 100%;
|
||||
padding: 38px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 38px;
|
||||
}
|
||||
|
||||
.horizontal-card-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal-card-image-link {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.extra-small-card {
|
||||
width: 100%;
|
||||
padding: 26px 0px;
|
||||
border-top: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.extra-small-card + .extra-small-card {
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.extra-small-card-image-link {
|
||||
display: block;
|
||||
margin-bottom: 0px;
|
||||
width: 56%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.extra-small-card-image-wrapper {
|
||||
width: 100%;
|
||||
height: 9vw;
|
||||
}
|
||||
|
||||
.extra-small-card-heading {
|
||||
margin-top: 9px;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.extra-small-card small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.extra-small-card-mobile-excerpt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-column .small-card,
|
||||
.center-column .horizontal-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-column .small-card:nth-child(2),
|
||||
.left-column .small-card:nth-child(3),
|
||||
.left-column .small-card:nth-child(6),
|
||||
.center-column .horizontal-card:nth-child(3),
|
||||
.center-column .horizontal-card:nth-child(4),
|
||||
.center-column .horizontal-card:nth-child(6) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.homepage-newsletter .center-column .horizontal-card:nth-child(3),
|
||||
.homepage-newsletter .center-column .horizontal-card:nth-child(6),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(6),
|
||||
.right-column .extra-small-card:nth-child(7),
|
||||
.right-column .extra-small-card:nth-child(8) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-newsletter .left-column .small-card:nth-child(4),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(7),
|
||||
.homepage-newsletter .center-column .horizontal-card:nth-child(5),
|
||||
.homepage-newsletter .center-column .horizontal-card:nth-child(7),
|
||||
.homepage-newsletter .right-column .extra-small-card:nth-child(7),
|
||||
.homepage-newsletter .right-column .extra-small-card:nth-child(8) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.big-card-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
column-gap: 42px;
|
||||
row-gap: 57px;
|
||||
}
|
||||
|
||||
.pagination-grid {
|
||||
margin-top: 57px;
|
||||
margin-bottom: 57px;
|
||||
}
|
||||
|
||||
.grid-small-card {
|
||||
border-top: none !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 16vw;
|
||||
border: 1px solid var(--text-color);
|
||||
margin-bottom: 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.text-min-height {
|
||||
min-height: 115px;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-heading-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.big-slide-placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.extra-small-side-card {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.extra-small-side-card-image-link,
|
||||
.extra-small-side-card-placeholder {
|
||||
width: 45%;
|
||||
min-width: 45%;
|
||||
height: 7.4vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.extra-small-side-card-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.extra-small-side-card-placeholder {
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.extra-small-side-card-content {
|
||||
margin-left: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tags-grid {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
column-gap: 26px;
|
||||
row-gap: 38px;
|
||||
}
|
||||
|
||||
.authors-grid-section .small-card-text {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.no-margin-left {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.small-card {
|
||||
padding: calc(2.64vw * var(--scale)) 0px;
|
||||
}
|
||||
|
||||
.small-card-heading {
|
||||
margin-top: calc(0.9vw * var(--scale));
|
||||
margin-bottom: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.small-card-image-link {
|
||||
margin-bottom: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.small-card-text {
|
||||
margin-bottom: calc(0.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-card {
|
||||
padding-bottom: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-card-heading {
|
||||
margin-top: calc(1.11vw * var(--scale));
|
||||
margin-bottom: calc(0.7vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-card-image-link {
|
||||
margin-bottom: calc(1.94vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-card-text {
|
||||
margin-bottom: calc(1.04vw * var(--scale));
|
||||
}
|
||||
|
||||
.horizontal-card {
|
||||
padding: calc(2.64vw * var(--scale)) 0px;
|
||||
gap: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.horizontal-card-image-link {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.extra-small-card {
|
||||
padding: calc(1.81vw * var(--scale)) 0px;
|
||||
}
|
||||
|
||||
.extra-small-card-image-link {
|
||||
margin-top: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.extra-small-card-heading {
|
||||
margin-top: calc(0.63vw * var(--scale));
|
||||
}
|
||||
|
||||
.extra-small-card small {
|
||||
font-size: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.grid {
|
||||
column-gap: calc(2.92vw * var(--scale));
|
||||
row-gap: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
margin-bottom: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.text-min-height {
|
||||
min-height: calc(8vw * var(--scale));
|
||||
}
|
||||
|
||||
.pagination-grid {
|
||||
margin-top: calc(3.96vw * var(--scale));
|
||||
margin-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.extra-small-side-card-heading {
|
||||
font-size: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.extra-small-side-card-content {
|
||||
margin-left: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.tags-grid {
|
||||
column-gap: calc(1.81vw * var(--scale));
|
||||
row-gap: calc(2.64vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.small-card-image-wrapper {
|
||||
height: 66vw;
|
||||
}
|
||||
|
||||
.small-card-image-link {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.big-card-image-wrapper {
|
||||
height: 66vw;
|
||||
}
|
||||
|
||||
.big-card-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big-card-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.horizontal-card-image-link {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.horizontal-card-image-link .small-card-image-wrapper {
|
||||
height: 31vw;
|
||||
}
|
||||
|
||||
.horizontal-card .medium-text {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.extra-small-card {
|
||||
padding: 38px 0px;
|
||||
}
|
||||
|
||||
.extra-small-card + .extra-small-card {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.extra-small-card-image-link {
|
||||
width: 62vw;
|
||||
height: 44vw;
|
||||
}
|
||||
|
||||
.extra-small-card-image-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.extra-small-card-mobile-excerpt {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
min-height: 51px;
|
||||
}
|
||||
|
||||
.extra-small-card small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 38px;
|
||||
row-gap: 0px;
|
||||
}
|
||||
|
||||
.pagination-grid {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.grid-small-card {
|
||||
border-top: none !important;
|
||||
padding: 38px 0px !important;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-min-height {
|
||||
min-height: auto;;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.big-slide-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 62vw;
|
||||
height: 42vw;
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.tags-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 38px;
|
||||
padding-top: 38px;
|
||||
}
|
||||
|
||||
.tags-grid .slide-card-image-link {
|
||||
width: 100%;
|
||||
height: 32vw;
|
||||
}
|
||||
|
||||
.authors-grid-section .small-card:last-child{
|
||||
padding-bottom: 0px !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.homepage-newsletter .left-column .small-card,
|
||||
.homepage-newsletter .center-column .horizontal-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.big-card-mobile .small-card {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.center-column .horizontal-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.left-column .small-card:nth-child(1) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.center-column .horizontal-card:nth-child(3),
|
||||
.center-column .horizontal-card:nth-child(4),
|
||||
.center-column .horizontal-card:nth-child(5) {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.left-column .small-card:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-newsletter .left-column .small-card:nth-child(4),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(5),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(7) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.homepage-newsletter .left-column .small-card:nth-child(1),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(2),
|
||||
.homepage-newsletter .left-column .small-card:nth-child(3) {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.small-card {
|
||||
padding: 32px 0px;
|
||||
}
|
||||
|
||||
.small-card-heading {
|
||||
margin-top: 11px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.small-card-text {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.horizontal-card {
|
||||
padding: 32px 0px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.horizontal-card-image-link {
|
||||
max-width: 40%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.horizontal-card-image-link .small-card-image-wrapper {
|
||||
height: 26vw;
|
||||
}
|
||||
|
||||
.horizontal-card .medium-text {
|
||||
font-size: 20px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.horizontal-card small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.extra-small-card {
|
||||
padding: 32px 0px;
|
||||
}
|
||||
|
||||
.extra-small-card-mobile-excerpt {
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.extra-small-card small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pagination-grid {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.grid-small-card {
|
||||
padding: 32px 0px !important;
|
||||
}
|
||||
|
||||
.section-heading-slider {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.tags-grid {
|
||||
row-gap: 22px;
|
||||
column-gap: 18px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
98
newspaper/assets/css/column-layout.css
Normal file
98
newspaper/assets/css/column-layout.css
Normal file
@ -0,0 +1,98 @@
|
||||
.column-layout {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.column-layout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
gap: 42px;
|
||||
margin-bottom: 19px;
|
||||
padding-left: 42px;
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.column-layout .text-card {
|
||||
padding-top: 38px;
|
||||
padding-bottom: 38px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.column-layout .text-card-heading {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.column-layout {
|
||||
margin-top: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.column-layout-grid {
|
||||
gap: calc(2.92vw * var(--scale));
|
||||
margin-bottom: calc(1.32vw * var(--scale));
|
||||
padding-left: 2.92vw;
|
||||
padding-right: 2.92vw;
|
||||
}
|
||||
|
||||
.column-layout .text-card {
|
||||
padding-top: calc(2.64vw * var(--scale));
|
||||
padding-bottom: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.column-layout .text-card-heading {
|
||||
font-size: calc(2.92vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.column-layout-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.left-column,
|
||||
.center-column {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.column-layout .text-card {
|
||||
text-align: center;
|
||||
padding-top: 57px;
|
||||
padding-bottom: 64px;
|
||||
align-items: center;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.column-layout .text-card-heading {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.column-layout {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.left-column,
|
||||
.center-column {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.column-layout .text-card {
|
||||
padding-bottom: 57px;
|
||||
}
|
||||
|
||||
.column-layout .text-card-heading {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
670
newspaper/assets/css/comments.css
Normal file
670
newspaper/assets/css/comments.css
Normal file
@ -0,0 +1,670 @@
|
||||
:root {
|
||||
--scale: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
:root{
|
||||
--scale: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
#comments-section {
|
||||
min-width: calc(56vw + 84px) !important;
|
||||
width: calc(56vw + 84px) !important;
|
||||
padding-left: 42px !important;
|
||||
padding-right: 42px !important;
|
||||
margin-bottom: 57px !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section * {
|
||||
font-family: var(--font1) !important;
|
||||
}
|
||||
|
||||
#comments-section figure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 53px;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#comments-section figure img {
|
||||
filter: var(--image-filter);
|
||||
transition: filter 0.5s ease;
|
||||
}
|
||||
|
||||
#comments-section figure img:hover {
|
||||
filter: unset;
|
||||
}
|
||||
|
||||
#comments-section figure div, #comments-section figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#comments-section figure img {
|
||||
border: 1px solid var(--text-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#comments-section h1 {
|
||||
font-family: var(--font2) !important;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
color: var(--text-color);
|
||||
line-height: 80%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#comments-section h1 + p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#comments-section p {
|
||||
font-family: var(--font1);
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#comments-section h4,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div .w-full.text-base,
|
||||
#comments-section .z-20.mb-7 *,
|
||||
#comments-section [data-testid="member-name"] {
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0em;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-elements"] span:not(form span), #comments-section div[data-testid="comment-elements"] .group,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button,
|
||||
#comments-section div[data-testid="form-header"] button,
|
||||
#comments-section [data-testid="comment-context-menu-inner"] button,
|
||||
#comments-section [data-testid="comment-in-reply-to"] {
|
||||
margin-top: calc(0.3vw * var(--scale));
|
||||
line-height: 130%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-elements"] span:not(form span), #comments-section div[data-testid="comment-elements"] .group,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button,
|
||||
#comments-section div[data-testid="form-header"] button {
|
||||
color: var(--text-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#comments-section .gh-comment-content {
|
||||
margin-top: calc(0.3vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="like-button"] svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#comments-section .fill-\[rgba\(0\2c 0\2c 0\2c 0\.9\)\]{
|
||||
stroke: var(--text-color);
|
||||
fill: var(--text-color);
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] > div {
|
||||
margin-right: 19px !important;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] {
|
||||
margin-top: 34px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#comments-section [data-test="comment-elements"] {
|
||||
margin-top: 57px;
|
||||
}
|
||||
|
||||
#comments-section section {
|
||||
margin-bottom: 57px;
|
||||
margin-top: 57px;
|
||||
padding-top: 87px;
|
||||
padding-bottom: 87px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
#comments-section section > button {
|
||||
font-family: var(--font1) !important;
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0em;
|
||||
color: var(--background-color) !important;
|
||||
line-height: 160%;
|
||||
font-weight: 400;
|
||||
padding: 8px 32px;
|
||||
background-color: var(--text-color) !important;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: calc(2.8vw * var(--scale));
|
||||
margin-bottom: 0;
|
||||
transition: all .2s ease;
|
||||
opacity: 1;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#comments-section section > button:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
#comments-section button:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="submit-form-button"] {
|
||||
background-color: var(--text-color) !important;
|
||||
color: var(--background-color) !important;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
padding: calc(0.8vw * var(--scale)) calc(2vw * var(--scale));
|
||||
line-height: 100%;
|
||||
margin-bottom: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-right: calc(0.8vw * var(--scale));
|
||||
font-family: var(--font1);
|
||||
}
|
||||
|
||||
#comments-section section p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#comments-section section p .font-semibold {
|
||||
color: var(--text-color) !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
#comments-section section p span:not(.font-semibold), #comments-section section p button{
|
||||
margin-top: calc(0.833vw * var(--scale));
|
||||
font-family: var(--font1) !important;
|
||||
line-height: 150%;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#comments-section section p button {
|
||||
color: var(--text-color) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#comments-section section p button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] {
|
||||
margin-top: 57px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#comments-section .pl-\[40px\] {
|
||||
padding-left: 63px !important;
|
||||
}
|
||||
|
||||
#comments-section form button {
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-component"] .grow .sm\:flex-row,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 .flex.flex-wrap,
|
||||
#comments-section div[data-testid="form-header"] > div {
|
||||
gap: max(3px, calc(0.2vw * var(--scale)));
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#comments-section h4 + div,
|
||||
#comments-section div[data-testid="form-header"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments-section h4 + div span .mx-\[0\.3em\],
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button .mx-\[0\.3em\],
|
||||
#comments-section div[data-testid="form-header"] button span .mx-\[0\.3em\] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#comments-section h4 + div span .\[overflow-wrap\:anywhere\] + span .mx-\[0\.3em\] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] .transition-\[padding\].pt-\[48px\] {
|
||||
padding-top: calc(4.8vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] .h-full.to-transparent {
|
||||
width: 2px;
|
||||
margin-right: calc(0.5vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] div[data-testid="comment-component"] {
|
||||
margin-top: calc(4.2vw * var(--scale));
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#comments-section .gh-comment-content p {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-editor"] {
|
||||
padding-left: calc(1vw * var(--scale));
|
||||
padding-right: calc(1vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section .z-20.mb-7 {
|
||||
margin-bottom: 0px !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-form"] div[data-testid="form-editor"] {
|
||||
margin-top: 2vw;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comments-sorting-form-dropdown"] button {
|
||||
padding: calc(0.4vw * var(--scale)) calc(1vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comments-sorting-form"] > div {
|
||||
width: max(100px, calc(7vw * var(--scale)));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-context-menu-inner"] {
|
||||
min-width: max(80px, calc(5.56vw * var(--scale)));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="replying-to"] {
|
||||
margin-top: max(2px, calc(0.14vw * var(--scale)));
|
||||
}
|
||||
|
||||
#comments-section .z-20.mb-7 * {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-pagination-button"] {
|
||||
margin-left: calc((4.4vw * var(--scale)) + 1.2rem);
|
||||
margin-top: max(28px, calc(1.94vw * var(--scale))) !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-pagination-button"] span {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-header"] button,
|
||||
#comments-section div[data-testid="form-header"] button span {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
#comments-section {
|
||||
min-width: 61.84vw !important;
|
||||
width: 61.84vw !important;
|
||||
padding-left: 2.92vw !important;
|
||||
padding-right: 2.92vw !important;
|
||||
margin-bottom: calc(3.96vw * var(--scale)) !important;
|
||||
}
|
||||
|
||||
#comments-section figure {
|
||||
min-width: calc(3.7vw * var(--scale));
|
||||
width: calc(3.7vw * var(--scale));
|
||||
height: calc(3.7vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section h1 {
|
||||
font-size: calc(3.33vw * var(--scale));
|
||||
margin-bottom: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section h1 + p {
|
||||
font-size: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section p {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section h4,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div .w-full.text-base,
|
||||
#comments-section .z-20.mb-7 *,
|
||||
#comments-section [data-testid="member-name"] {
|
||||
font-size: calc(0.97vw * var(--scale));
|
||||
margin-top: calc(0.28vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-elements"] span:not(form span), #comments-section div[data-testid="comment-elements"] .group,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button,
|
||||
#comments-section div[data-testid="form-header"] button,
|
||||
#comments-section [data-testid="comment-context-menu-inner"] button,
|
||||
#comments-section [data-testid="comment-in-reply-to"] {
|
||||
font-size: calc(0.9vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="like-button"] svg {
|
||||
width: calc(0.97vw * var(--scale));
|
||||
height: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] > div {
|
||||
margin-right: calc(1.32vw * var(--scale)) !important;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] {
|
||||
margin-top: calc(2.36vw * var(--scale));
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#comments-section [data-test="comment-elements"] {
|
||||
margin-top: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section section {
|
||||
margin-bottom: calc(3.96vw * var(--scale));
|
||||
margin-top: calc(3.96vw * var(--scale));
|
||||
padding-top: 6.04vw;
|
||||
padding-bottom: 6.04vw;
|
||||
}
|
||||
|
||||
#comments-section section > button {
|
||||
padding: calc(0.56vw * var(--scale)) calc(2.22vw * var(--scale));
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section [data-testid="submit-form-button"] {
|
||||
font-size: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section section p span:not(.font-semibold), #comments-section section p button{
|
||||
font-size: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] {
|
||||
margin-top: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
#comments-section .pl-\[40px\] {
|
||||
padding-left: calc(4.38vw * var(--scale)) !important;
|
||||
}
|
||||
|
||||
#comments-section form button {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 931px) {
|
||||
#comments-section {
|
||||
min-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding: 0px 0px !important;
|
||||
margin-bottom: 38px !important;
|
||||
}
|
||||
|
||||
#comments-section figure {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-elements"] span:not(form span), #comments-section div[data-testid="comment-elements"] .group,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button,
|
||||
#comments-section div[data-testid="form-header"] button,
|
||||
#comments-section [data-testid="comment-context-menu-inner"] button,
|
||||
#comments-section [data-testid="comment-in-reply-to"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#comments-section .gh-comment-content {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="like-button"] svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] .mt-10 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
#comments-section [data-test="comment-elements"] {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
#comments-section section {
|
||||
margin-bottom: 44px;
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
#comments-section section > button {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="submit-form-button"] {
|
||||
font-size: 14px;
|
||||
padding: 8px 26px;
|
||||
}
|
||||
|
||||
#comments-section section p span:not(.font-semibold), #comments-section section p button{
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] {
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
#comments-section .pl-\[40px\] {
|
||||
padding-left: 68px !important;
|
||||
}
|
||||
|
||||
#comments-section form button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#comments-section section > button:hover,
|
||||
#comments-section form button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] .transition-\[padding\].pt-\[48px\] {
|
||||
padding-top: 68px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] .h-full.to-transparent {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-editor"] {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-editor"] {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
#comments-section .z-20.mb-7 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-form"] div[data-testid="form-editor"] {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comments-sorting-form-dropdown"] button {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-pagination-button"] {
|
||||
margin-top: 18px !important;
|
||||
margin-left: calc(59px + 1.2rem);
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-header"] button {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 443px) {
|
||||
#comments-section {
|
||||
padding: 0px !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
|
||||
#comments-section figure {
|
||||
min-width: 47px;
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
#comments-section figure {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#comments-section h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#comments-section p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#comments-section h1 + p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#comments-section h4,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div .w-full.text-base,
|
||||
#comments-section .z-20.mb-7 *,
|
||||
#comments-section [data-testid="member-name"] {
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-elements"] span:not(form span), #comments-section div[data-testid="comment-elements"] .group,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 div + div button,
|
||||
#comments-section div[data-testid="form-header"] button,
|
||||
#comments-section [data-testid="comment-context-menu-inner"] button,
|
||||
#comments-section [data-testid="comment-in-reply-to"] {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="like-button"] svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
#comments-section [data-test="comment-elements"] {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
#comments-section section {
|
||||
margin-bottom: 38px;
|
||||
margin-top: 38px;
|
||||
padding-top: 68px;
|
||||
padding-bottom: 68px;
|
||||
}
|
||||
|
||||
#comments-section section > button {
|
||||
padding: 9px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="submit-form-button"] {
|
||||
font-size: 13px;
|
||||
padding: 9px 22px;
|
||||
}
|
||||
|
||||
|
||||
#comments-section section p span:not(.font-semibold), #comments-section section p button{
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
#comments-section .pl-\[40px\] {
|
||||
padding-left: 60px !important;
|
||||
}
|
||||
|
||||
#comments-section form button {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] > div {
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
|
||||
#comments-section section > button {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="main-form"] .transition-\[padding\].pt-\[48px\] {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="comment-component"] .grow .sm\:flex-row,
|
||||
#comments-section div[data-testid="main-form"] .absolute.left-0 .flex.flex-wrap,
|
||||
#comments-section div[data-testid="form-header"] > div {
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="comment-component"] .h-full.to-transparent {
|
||||
width: 1px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-editor"] {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-form"] div[data-testid="form-editor"] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#comments-section [data-testid="reply-pagination-button"] {
|
||||
margin-left: calc(51px + 0.8rem);
|
||||
}
|
||||
|
||||
#comments-section div[data-testid="form-header"] button {
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
}
|
||||
266
newspaper/assets/css/footer.css
Normal file
266
newspaper/assets/css/footer.css
Normal file
@ -0,0 +1,266 @@
|
||||
.footer-content {
|
||||
border-top: 1px solid var(--text-color);
|
||||
padding: 78px 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: 450px;
|
||||
margin-right: 15vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-logo-image {
|
||||
height: calc(45px * var(--logo-scale));
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-paragraph-wrapper {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
font-family: var(--font4);
|
||||
line-height: 80%;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
.footer-form {
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.footer-form .subscribe-with-alerts {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
gap: 25px;
|
||||
margin-top: 0px;
|
||||
flex: unset;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.footer-socials a {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
#instagram-footer,
|
||||
#linkedin-footer,
|
||||
#pinterest-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 5vw;
|
||||
row-gap: 78px;
|
||||
flex-grow: 1;
|
||||
padding-right: calc(5vw * var(--scale));
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.footer-links-label {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 100%;
|
||||
margin-bottom: 25px;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font3);
|
||||
}
|
||||
|
||||
.footer-secondary-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
.footer-navigation li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding: 17px 0px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid var(--text-color);
|
||||
font-family: var(--font1);
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Styles for extra large desktop */
|
||||
@media (min-width: 1920px) {
|
||||
.footer-navigation {
|
||||
max-width: 46%;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.footer-content {
|
||||
padding: calc(5.42vw * var(--scale)) 0px;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
max-width: calc(31.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
margin-bottom: calc(1.67vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-logo-image {
|
||||
height: calc(3.13vw * var(--scale) * var(--logo-scale));
|
||||
}
|
||||
|
||||
.footer-paragraph-wrapper {
|
||||
margin-bottom: calc(0.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
font-size: calc(3.89vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-form {
|
||||
margin-top: calc(0.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
gap: calc(1.74vw * var(--scale));
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.footer-socials a {
|
||||
margin-top: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
row-gap: calc(5.42vw * var(--scale));
|
||||
margin-top: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-links-label {
|
||||
font-size: calc(1.53vw * var(--scale));
|
||||
margin-bottom: calc(1.74vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-secondary-links {
|
||||
row-gap: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding: calc(1.18vw * var(--scale)) 0px;
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
margin-right: 0px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
justify-content: flex-start;
|
||||
column-gap: 20vw;
|
||||
padding-right: 0px;
|
||||
margin-top: 78px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.footer-content {
|
||||
padding: 57px 0px;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.footer-logo-image {
|
||||
height: calc(32px * var(--logo-scale));
|
||||
}
|
||||
|
||||
.footer-paragraph-wrapper {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-logo-text {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.footer-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
gap: 22px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.footer-socials a {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.footer-navigation {
|
||||
row-gap: 57px;
|
||||
margin-top: 57px;
|
||||
}
|
||||
|
||||
.footer-links-label {
|
||||
font-size: 20px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.footer-secondary-links {
|
||||
row-gap: 18px;
|
||||
}
|
||||
|
||||
.footer-nav-link {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding: 14px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
150
newspaper/assets/css/form-page.css
Normal file
150
newspaper/assets/css/form-page.css
Normal file
@ -0,0 +1,150 @@
|
||||
.form-page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 430px;
|
||||
text-align: center;
|
||||
margin-bottom: 4vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-page-content .subscribe-wrapper {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.form-page-excerpt {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-container form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.under-form-text {
|
||||
color: var(--text-color) !important;
|
||||
display: block;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.form-container .form-alert {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.lower-opacity-small-text {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.form-success-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.vertical-form-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
max-width: 590px;
|
||||
}
|
||||
|
||||
.contact-content .form-page-excerpt {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.contact-form-inputs {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.form-page-content {
|
||||
max-width: calc(29.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.form-page-excerpt {
|
||||
margin-bottom: calc(1.67vw * var(--scale));
|
||||
}
|
||||
|
||||
.under-form-text {
|
||||
margin-top: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.form-container .form-alert {
|
||||
margin-top: calc(0.69vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-form {
|
||||
gap: calc(1.04vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-form-button {
|
||||
margin-top: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
max-width: calc(41vw * var(--scale));
|
||||
}
|
||||
|
||||
.contact-content .form-page-excerpt {
|
||||
max-width: calc(29.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
gap: calc(1.04vw * var(--scale));
|
||||
}
|
||||
|
||||
.contact-form-inputs {
|
||||
gap: calc(1.04vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.form-page-excerpt {
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
|
||||
.form-container .form-alert {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.under-form-text {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.vertical-form,
|
||||
.contact-form,
|
||||
.contact-form-inputs {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vertical-form-button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.contact-form-inputs {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
991
newspaper/assets/css/global.css
Normal file
991
newspaper/assets/css/global.css
Normal file
@ -0,0 +1,991 @@
|
||||
@font-face {
|
||||
font-family: 'Chomsky';
|
||||
src: url('../fonts/chomsky.otf');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:root {
|
||||
--success-color: green;
|
||||
--error-color: #F44336;
|
||||
--ease-transition: ease;
|
||||
--scale: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
:root{
|
||||
--scale: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
body, html {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font1);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 120%;
|
||||
font-weight: 400;
|
||||
font-family: var(--font2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-color);
|
||||
font-family: var(--font1);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
}
|
||||
|
||||
.footer .footer-links-label,
|
||||
.big-text,
|
||||
.medium-text,
|
||||
.small-text {
|
||||
text-transform: var(--heading-style) !important;
|
||||
}
|
||||
|
||||
.hover-image-opacity,
|
||||
.kg-image,
|
||||
.kg-signup-card-image,
|
||||
.kg-header-card-image,
|
||||
p img,
|
||||
.kg-gallery-image img,
|
||||
.kg-product-card-image {
|
||||
filter: var(--image-filter);
|
||||
}
|
||||
|
||||
html[data-image-style="Normal"] a.hover-image-opacity:hover::after,
|
||||
html[data-image-style="Normal"] a.kg-image:hover::after,
|
||||
html[data-image-style="Normal"] a.kg-signup-card-image:hover::after,
|
||||
html[data-image-style="Normal"] a.kg-header-card-image:hover::after,
|
||||
html[data-image-style="Normal"] a.p img:hover::after,
|
||||
html[data-image-style="Normal"] a.kg-gallery-image img:hover::after,
|
||||
html[data-image-style="Normal"] a.kg-product-card-image:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wide-container {
|
||||
padding-left: 42px;
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
.narrow-container {
|
||||
min-width: calc(56vw + 84px);
|
||||
width: calc(56vw + 84px);
|
||||
padding-left: 42px;
|
||||
padding-right: 42px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
.kg-btn,
|
||||
.kg-header-card-button {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
padding: 8px 32px;
|
||||
line-height: 160%;
|
||||
font-family: var(--font1);
|
||||
color: var(--background-color);
|
||||
background-color: var(--text-color);
|
||||
font-size: 16px;
|
||||
opacity: 1;
|
||||
transition: all .2s ease;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
button:hover:not(.unstyled-button),
|
||||
.button:hover,
|
||||
.kg-btn:hover,
|
||||
.kg-header-card-button:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.unstyled-button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.hover-underline:hover,
|
||||
.small-card-bottom-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hover-image-opacity,
|
||||
.kg-image,
|
||||
.kg-signup-card-image,
|
||||
.kg-header-card-image,
|
||||
p img,
|
||||
.kg-gallery-image img ,
|
||||
.kg-product-card-image{
|
||||
position: relative;
|
||||
transition: filter 0.5s ease;
|
||||
}
|
||||
|
||||
.post-content img:not(.no-lightense) {
|
||||
transition: filter 0.5s ease, transform var(--lightense-duration) var(--lightense-timing-func);
|
||||
}
|
||||
|
||||
.hover-image-opacity img[loading="lazy"]{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hover-image-opacity img {
|
||||
transition: all .5s ease !important;
|
||||
}
|
||||
|
||||
.hover-image-opacity figure.loaded img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-image-opacity figure::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--text-color);
|
||||
transition: opacity 0.5s ease !important;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.hover-image-opacity figure.loaded::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hover-image-opacity:hover,
|
||||
.kg-image:hover,
|
||||
.kg-signup-card-image:hover,
|
||||
.kg-header-card-image:hover,
|
||||
p img:hover,
|
||||
.kg-gallery-image img:hover,
|
||||
.kg-product-card-image:hover {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.hover-image-opacity:after,
|
||||
.kg-image:after,
|
||||
.kg-signup-card-image:after,
|
||||
.kg-header-card-image:after,
|
||||
p img:after,
|
||||
.kg-gallery-image img:after,
|
||||
.kg-product-card-image:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0,0,0,.08);
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
small,
|
||||
figcaption {
|
||||
font-family: var(--font1);
|
||||
line-height: 140%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
figcaption a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.medium-text {
|
||||
line-height: 140%;
|
||||
font-family: var(--font3);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.big-text {
|
||||
line-height: 140%;
|
||||
font-family: var(--font3);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
line-height: 140%;
|
||||
font-family: var(--font3);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
img, figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* figure {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
} */
|
||||
|
||||
.two-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.three-lines {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.initial-paragraph {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.initial-paragraph-reset {
|
||||
|
||||
}
|
||||
|
||||
.initial-paragraph.three-lines {
|
||||
max-height: calc(3 * 1.6 * 16px);
|
||||
}
|
||||
|
||||
.initial-paragraph.two-lines {
|
||||
max-height: calc(2 * 1.6 * 16px);
|
||||
}
|
||||
|
||||
.initial-paragraph::first-letter {
|
||||
float: left;
|
||||
font-size: 50px;
|
||||
line-height: 100%;
|
||||
margin-right: 8px;
|
||||
font-family: var(--font4);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid var(--text-color);
|
||||
margin: 0px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
font-family: var(--font1);
|
||||
line-height: 160%;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
min-height: 32vh;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar {
|
||||
font-family: var(--font1);
|
||||
font-size: 16px;
|
||||
line-height: 160%;
|
||||
padding: 12px 42px;
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar-content {
|
||||
padding: 0px 42px;
|
||||
}
|
||||
|
||||
#announcement-bar-root button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
padding: 10px 0px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 100%;
|
||||
font-family: var(--font2);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.section-heading-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-heading-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
width: 26px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 57px;
|
||||
padding-bottom: 57px;
|
||||
}
|
||||
|
||||
.section-padding-top {
|
||||
padding-top: 57px;
|
||||
}
|
||||
|
||||
.section-padding-bottom {
|
||||
padding-bottom: 57px;
|
||||
}
|
||||
|
||||
.section-padding-small {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
margin-bottom: 57px;
|
||||
}
|
||||
|
||||
.restricted-access-icon {
|
||||
width: 13px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
min-height: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.access-icon-smaller {
|
||||
width: 11px;
|
||||
min-width: 11px;
|
||||
height: 11px;
|
||||
min-height: 11px;
|
||||
}
|
||||
|
||||
.hide-on-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.italic-lower-opac {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.featured-tags-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bold-link {
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.bold-link:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.full-page-section {
|
||||
padding: 82px 0px;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
body, html {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(5vw * var(--scale));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(2.92vw * var(--scale));
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(2.36vw * var(--scale));
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: calc(2.08vw * var(--scale));
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
.wide-container {
|
||||
padding-left: 2.92vw;
|
||||
padding-right: 2.92vw;
|
||||
}
|
||||
|
||||
.narrow-container {
|
||||
min-width: 61.84vw;
|
||||
width: 61.84vw;
|
||||
padding-left: 2.92vw;
|
||||
padding-right: 2.92vw;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
.kg-btn,
|
||||
.kg-header-card-button {
|
||||
padding: calc(0.56vw * var(--scale)) calc(2.22vw * var(--scale));
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
small,
|
||||
figcaption {
|
||||
font-size: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.medium-text {
|
||||
font-size: calc(1.67vw * var(--scale));
|
||||
}
|
||||
|
||||
.big-text {
|
||||
font-size: calc(2.22vw * var(--scale));
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: calc(1.38vw * var(--scale));
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: calc(0.56vw * var(--scale)) calc(1.11vw * var(--scale));
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: calc(0.83vw * var(--scale)) calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
padding: calc(0.8vw * var(--scale)) 2.92vw;
|
||||
min-height: calc(3.3vw * var(--scale));
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar-content {
|
||||
padding: 0px 2.92vw;
|
||||
}
|
||||
|
||||
.gh-announcement-bar button {
|
||||
right: calc(0.55vw * var(--scale));
|
||||
margin-top: calc(-1.1vw * var(--scale));
|
||||
width: calc(2.2vw * var(--scale));
|
||||
height: calc(2.2vw * var(--scale));
|
||||
}
|
||||
|
||||
.gh-announcement-bar button svg {
|
||||
width: calc(0.8vw * var(--scale));
|
||||
height: calc(0.8vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
padding: calc(0.7vw * var(--scale)) 0px;
|
||||
font-size: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-heading-arrow {
|
||||
width: calc(1.81vw * var(--scale));
|
||||
margin-left: calc(0.76vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: calc(3.96vw * var(--scale));
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-padding-top {
|
||||
padding-top: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-padding-bottom {
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.section-padding-small {
|
||||
padding-top: calc(3.13vw * var(--scale));
|
||||
padding-bottom: calc(3.13vw * var(--scale));
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
margin-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.initial-paragraph::first-letter {
|
||||
font-size: calc(3.55vw * var(--scale));
|
||||
margin-right: calc(0.56vw * var(--scale));
|
||||
}
|
||||
|
||||
.initial-paragraph.three-lines {
|
||||
max-height: calc(3 * 1.6 * (1.11vw * var(--scale)));
|
||||
}
|
||||
|
||||
.initial-paragraph.two-lines {
|
||||
max-height: calc(2 * 1.6 * (1.11vw * var(--scale)));
|
||||
}
|
||||
|
||||
.restricted-access-icon {
|
||||
width: calc(0.9vw * var(--scale));
|
||||
min-width: calc(0.9vw * var(--scale));
|
||||
height: calc(0.9vw * var(--scale));
|
||||
min-height: calc(0.9vw * var(--scale));
|
||||
margin-right: calc(0.35vw * var(--scale));
|
||||
}
|
||||
|
||||
.access-icon-smaller {
|
||||
width: calc(0.76vw * var(--scale));
|
||||
min-width: calc(0.76vw * var(--scale));
|
||||
height: calc(0.76vw * var(--scale));
|
||||
min-height: calc(0.76vw * var(--scale));
|
||||
}
|
||||
|
||||
.full-page-section {
|
||||
padding: calc(5.7vw * var(--scale)) 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.wide-container,
|
||||
.narrow-container {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.narrow-container {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar {
|
||||
padding: 12px 30px;
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar-content {
|
||||
padding: 0px 30px;
|
||||
}
|
||||
|
||||
.hover-underline:hover,
|
||||
.small-card-bottom-text a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hover-image-opacity:hover:after{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.medium-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
padding: 12px 0px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.section-heading-arrow {
|
||||
width: 32px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 38px;
|
||||
padding-bottom: 38px;
|
||||
}
|
||||
|
||||
.section-padding-top {
|
||||
padding-top: 38px;
|
||||
}
|
||||
|
||||
.section-padding-bottom {
|
||||
padding-bottom: 38px;
|
||||
}
|
||||
|
||||
.section-padding-small {
|
||||
padding-top: 38px;
|
||||
padding-bottom: 38px;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.access-icon-smaller {
|
||||
width: 13px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
min-height: 13px;
|
||||
}
|
||||
|
||||
.hide-on-desktop {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.full-page-section {
|
||||
margin-top: 26px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 25vh;
|
||||
}
|
||||
|
||||
.two-lines-mobile {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
body, html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wide-container,
|
||||
.narrow-container {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
.kg-btn,
|
||||
.kg-header-card-button {
|
||||
padding: 8px 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
#announcement-bar-root .gh-announcement-bar-content {
|
||||
padding: 0px 18px;
|
||||
}
|
||||
|
||||
.big-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.medium-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
padding: 10px 0px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.section-heading-arrow {
|
||||
width: 26px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-padding-top {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.section-padding-bottom {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-padding-small {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.initial-paragraph::first-letter {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.initial-paragraph.three-lines {
|
||||
max-height: calc(3 * 1.6 * 14px);
|
||||
}
|
||||
|
||||
.initial-paragraph.two-lines {
|
||||
max-height: calc(2 * 1.6 * 14px);
|
||||
}
|
||||
|
||||
.access-icon-smaller {
|
||||
width: 11px;
|
||||
min-width: 11px;
|
||||
height: 11px;
|
||||
min-height: 11px;
|
||||
}
|
||||
|
||||
.horizontal-card .restricted-access-icon {
|
||||
width: 11px;
|
||||
min-width: 11px;
|
||||
height: 11px;
|
||||
min-height: 11px;
|
||||
}
|
||||
|
||||
.full-page-section {
|
||||
margin-top: 20px;
|
||||
padding: 57px 0px;
|
||||
}
|
||||
}
|
||||
290
newspaper/assets/css/membership.css
Normal file
290
newspaper/assets/css/membership.css
Normal file
@ -0,0 +1,290 @@
|
||||
.membership-hero .text-card {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
custom-membership {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.membership-buttons {
|
||||
padding-top: 27px;
|
||||
padding-bottom: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.membership-button {
|
||||
border: 1px solid var(--text-color);
|
||||
min-width: calc(13vw * var(--scale));
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.membership-button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.membership-button[data-inactive="true"]{
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.membership-tiers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.membership-tiers[data-inactive="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
width: calc(26vw * var(--scale));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid var(--text-color);
|
||||
padding: 57px 38px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tier-card .big-text {
|
||||
font-family: var(--font2);
|
||||
text-transform: unset;
|
||||
font-weight: 400;
|
||||
line-height: 80%;
|
||||
}
|
||||
|
||||
.tier-price {
|
||||
margin-top: 27px;
|
||||
margin-bottom: 33px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tier-currency {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 0px;
|
||||
font-size: 42px;
|
||||
line-height: 80%;
|
||||
font-family: var(--font2);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.tier-price-span {
|
||||
font-family: var(--font2);
|
||||
line-height: 80%;
|
||||
font-size: 124px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tier-card .medium-text {
|
||||
font-family: var(--font2);
|
||||
text-transform: unset;
|
||||
font-weight: 400;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.tier-time {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
right: 5px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.benefits-outer {
|
||||
margin-top: 33px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
width: 100%;
|
||||
padding-top: 41px;
|
||||
padding-bottom: 57px;
|
||||
}
|
||||
|
||||
.benefits-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 19px;
|
||||
}
|
||||
|
||||
.benefits-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.benefit-square {
|
||||
margin-top: 2px;
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
background-color: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.membership-subscribe-button {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.membership-buttons {
|
||||
padding-top: calc(1.88vw * var(--scale));
|
||||
padding-bottom: calc(2.43vw * var(--scale));
|
||||
}
|
||||
|
||||
.membership-button {
|
||||
height: calc(2.92vw * var(--scale));
|
||||
}
|
||||
|
||||
.membership-tiers {
|
||||
gap: 2.92vw;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
padding: calc(3.96vw * var(--scale)) calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.tier-price {
|
||||
margin-top: calc(1.88vw * var(--scale));
|
||||
margin-bottom: calc(2.29vw * var(--scale));
|
||||
}
|
||||
|
||||
.tier-currency {
|
||||
font-size: calc(2.92vw * var(--scale));
|
||||
top: calc(0.78vw * var(--scale));
|
||||
}
|
||||
|
||||
.tier-price-span {
|
||||
font-size: calc(8.61vw * var(--scale));
|
||||
}
|
||||
|
||||
.tier-time {
|
||||
bottom: calc(0.21vw * var(--scale));
|
||||
right: calc(0.35vw * var(--scale));
|
||||
}
|
||||
|
||||
.benefits-outer {
|
||||
margin-top: calc(2.29vw * var(--scale));
|
||||
padding-top: calc(2.85vw * var(--scale));
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.benefits-container {
|
||||
gap: calc(1.32vw * var(--scale));
|
||||
}
|
||||
|
||||
.benefits-item {
|
||||
gap: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.benefit-square {
|
||||
margin-top: calc(0.14vw * var(--scale));
|
||||
height: calc(1.39vw * var(--scale));
|
||||
min-height: calc(1.39vw * var(--scale));
|
||||
width: calc(1.39vw * var(--scale));
|
||||
min-width: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
height: calc(1.11vw * var(--scale));
|
||||
width: calc(1.11vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.membership-tiers {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 38px;
|
||||
}
|
||||
|
||||
.membership-button {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.membership-buttons {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.membership-button {
|
||||
min-width: 126px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.membership-tiers {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.tier-card {
|
||||
max-width: 340px;
|
||||
padding: 57px 24px;
|
||||
}
|
||||
|
||||
.tier-price {
|
||||
margin-top: 26px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.tier-currency {
|
||||
font-size: 32px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.tier-price-span {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.benefits-outer {
|
||||
margin-top: 28px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.benefits-item {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.benefit-square {
|
||||
margin-top: 2px;
|
||||
height: 18px;
|
||||
min-height: 18px;
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
585
newspaper/assets/css/navbar.css
Normal file
585
newspaper/assets/css/navbar.css
Normal file
@ -0,0 +1,585 @@
|
||||
.header {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: var(--background-color);
|
||||
padding-top: 22px;
|
||||
padding-bottom: 12px;
|
||||
z-index: 100;
|
||||
font-size: 20px;
|
||||
line-height: 100%;
|
||||
font-family: var(--font2);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.navbar-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-bottom: 22px;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
flex: 2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.social:hover .social-inner {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.social-inner {
|
||||
width: 22px;
|
||||
min-width: 22px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .2s ease;
|
||||
transform: translateY(0px);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.social-inner-smaller {
|
||||
width: 21px;
|
||||
min-width: 21px;
|
||||
}
|
||||
|
||||
#instagram,
|
||||
#linkedin,
|
||||
#pinterest {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-account-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 26px;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.account-button-wrapper {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.account-icon-wrapper {
|
||||
margin-top: 1px;
|
||||
width: 19px;
|
||||
min-width: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.account-buttons-separator {
|
||||
width: 1px;
|
||||
height: 21px;
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
.subscribe-button {
|
||||
padding: 4px 26px;
|
||||
font-family: var(--font2);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: calc(37px * var(--logo-scale));
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar-logo-text {
|
||||
font-family: var(--font4);
|
||||
line-height: 80%;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
.navbar-links-outer {
|
||||
padding-top: 13px;
|
||||
padding-bottom: 13px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.navbar-links-inner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 30px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link, .links-label {
|
||||
line-height: 100%;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.secondary-links .nav-link {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
transition: color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.secondary-links-inner:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.links-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav li:hover .secondary-links, .nav .secondary-links:focus-within {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.dropdown-arrow-svg {
|
||||
width: 8px;
|
||||
min-width: 8px;
|
||||
height: 5px;
|
||||
min-height: 5px;
|
||||
margin-left: 7px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.secondary-links {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: -17px;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition-duration: 0.15s;
|
||||
transition-property: opacity;
|
||||
min-width: 168px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.secondary-links-inner {
|
||||
margin-top: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.secondary-links-inner .nav-link:hover {
|
||||
color: var(--background-color);
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
.menu-button-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subscribe-button-mobile-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop-navbar {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Styles for extra large desktop */
|
||||
@media (min-width: 1920px) {
|
||||
.nav {
|
||||
column-gap: calc(3vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.header {
|
||||
padding-top: calc(1.53vw * var(--scale));
|
||||
padding-bottom: calc(0.83vw * var(--scale));
|
||||
font-size: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
padding-bottom: calc(1.53vw * var(--scale));
|
||||
}
|
||||
|
||||
.socials {
|
||||
gap: calc(1.53vw * var(--scale));
|
||||
margin-top: calc(0.28vw * var(--scale));
|
||||
}
|
||||
|
||||
.social-inner {
|
||||
width: calc(1.53vw * var(--scale));
|
||||
min-width: calc(1.53vw * var(--scale));
|
||||
}
|
||||
|
||||
.social-inner-smaller {
|
||||
width: calc(1.46vw * var(--scale));
|
||||
min-width: calc(1.46vw * var(--scale));
|
||||
}
|
||||
|
||||
.navbar-account-links {
|
||||
gap: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-button-wrapper {
|
||||
gap: calc(0.42vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-icon-wrapper {
|
||||
margin-top: 1px;
|
||||
width: calc(1.32vw * var(--scale));
|
||||
min-width: calc(1.32vw * var(--scale));
|
||||
}
|
||||
|
||||
.account-buttons-separator {
|
||||
height: calc(1.46vw * var(--scale));
|
||||
}
|
||||
|
||||
.subscribe-button {
|
||||
padding: calc(0.28vw * var(--scale)) calc(1.81vw * var(--scale));
|
||||
font-size: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
margin-bottom: calc(0.28vw * var(--scale));
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: calc(2.57vw * var(--scale) * var(--logo-scale));
|
||||
}
|
||||
|
||||
.navbar-logo-text {
|
||||
font-size: calc(3.19vw * var(--scale));
|
||||
}
|
||||
|
||||
.navbar-links-outer {
|
||||
padding-top: calc(0.9vw * var(--scale));
|
||||
padding-bottom: calc(0.9vw * var(--scale));
|
||||
min-height: calc(3.47vw * var(--scale));
|
||||
}
|
||||
|
||||
.nav {
|
||||
column-gap: calc(2.08vw * var(--scale));
|
||||
row-gap: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.secondary-links .nav-link {
|
||||
padding: calc(0.97vw * var(--scale)) calc(1.11vw * var(--scale));
|
||||
|
||||
}
|
||||
|
||||
.dropdown-arrow-svg {
|
||||
width: calc(0.56vw * var(--scale));
|
||||
min-width: calc(0.56vw * var(--scale));
|
||||
height: calc(0.35vw * var(--scale));
|
||||
min-height: calc(0.35vw * var(--scale));
|
||||
margin-left: calc(0.49vw * var(--scale));
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.secondary-links {
|
||||
left: calc(-1.18vw * var(--scale));
|
||||
min-width: calc(11.8vw * var(--scale));
|
||||
}
|
||||
|
||||
.secondary-links-inner {
|
||||
margin-top: calc(1.08vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.account-button-text,
|
||||
.account-buttons-separator,
|
||||
.subscribe-button,
|
||||
.socials {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-top: 22px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.navbar-account-links {
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.account-icon-wrapper {
|
||||
margin-top: 1px;
|
||||
width: 28px;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
flex: 2;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.navbar-logo-text {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.menu-button-wrapper {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 7px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.menu-line {
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background-color: var(--text-color);
|
||||
pointer-events: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-links-outer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background-color: var(--background-color);
|
||||
height: calc(100dvh);
|
||||
transform: translateY(100%);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.navbar-links-inner {
|
||||
padding-top: 15vh;
|
||||
padding-bottom: 16vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 23px;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
row-gap: 23px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.nav-link, .links-label {
|
||||
line-height: 120%;
|
||||
font-size: 24px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.dropdown-arrow-svg {
|
||||
width: 10px;
|
||||
min-width: 10px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
transform: translateX(100%);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.secondary-links {
|
||||
min-width: 100%;
|
||||
position: static;
|
||||
transform: unset;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transition-duration: 0.15s;
|
||||
transition-property: height;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.secondary-links-inner {
|
||||
align-items: center;
|
||||
padding-top: 23px;
|
||||
margin-top: 25px;
|
||||
padding-bottom: 23px;
|
||||
border: none;
|
||||
row-gap: 14px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.secondary-links .nav-link {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
color: var(--text-color);
|
||||
padding: 0px;
|
||||
border-bottom: none;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.secondary-links-inner .nav-link:hover {
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.subscribe-button-mobile-wrapper {
|
||||
display: flex;
|
||||
min-width: 280px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.subscribe-button-mobile {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
padding: 5px 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: calc(30px * var(--logo-scale));
|
||||
}
|
||||
|
||||
.social:hover .social-inner {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.header {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.navbar-account-links {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.account-icon-wrapper {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
}
|
||||
|
||||
|
||||
.navbar-logo-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.menu-line {
|
||||
width: 28px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
row-gap: 18px;
|
||||
min-width: 58vw;
|
||||
}
|
||||
|
||||
.nav-link, .links-label {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.secondary-links-inner {
|
||||
padding-top: 18px;
|
||||
margin-top: 22px;
|
||||
padding-bottom: 18px;
|
||||
row-gap: 8px;
|
||||
}
|
||||
|
||||
.subscribe-button-mobile-wrapper {
|
||||
min-width: 58vw;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.subscribe-button-mobile {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: calc(26px * var(--logo-scale));
|
||||
}
|
||||
}
|
||||
135
newspaper/assets/css/newsletter.css
Normal file
135
newspaper/assets/css/newsletter.css
Normal file
@ -0,0 +1,135 @@
|
||||
.newsletter-outer {
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--text-color);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homepage-newsletter .newsletter-outer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
width: 100%;
|
||||
margin: 38px 0px;
|
||||
padding: 96px calc(4.3vw * var(--scale));
|
||||
border: 1px solid var(--text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter-heading {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.subscribe-form {
|
||||
margin-top: 22px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.subscribe-with-alerts {
|
||||
max-width: 455px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subscribe-wrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
.form-alert {
|
||||
display: none;
|
||||
font-family: var(--font1);
|
||||
}
|
||||
|
||||
form.error .error-alert,
|
||||
form.success .success-alert,
|
||||
form.loading .loading-alert {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.newsletter-small-bottom-text {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
form.error .newsletter-small-bottom-text,
|
||||
form.success .newsletter-small-bottom-text,
|
||||
form.loading .newsletter-small-bottom-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.newsletter-outer-for-post {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-newsletter-container .newsletter-outer-for-post {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.newsletter-outer-for-post .newsletter {
|
||||
padding: 68px 42px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.newsletter {
|
||||
margin: calc(2.64vw * var(--scale)) 0px;
|
||||
padding: 6.67vw calc(4.3vw * var(--scale));
|
||||
}
|
||||
|
||||
.newsletter-heading {
|
||||
margin-top: calc(0.97vw * var(--scale))
|
||||
}
|
||||
|
||||
.subscribe-form {
|
||||
margin-top: calc(1.53vw * var(--scale));
|
||||
}
|
||||
|
||||
.subscribe-with-alerts {
|
||||
max-width: calc(31.6vw * var(--scale));
|
||||
}
|
||||
|
||||
.subscribe-wrapper {
|
||||
margin-bottom: calc(0.9vw * var(--scale));
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding-left: calc(1.18vw * var(--scale));
|
||||
padding-right: calc(1.18vw * var(--scale));
|
||||
}
|
||||
|
||||
.newsletter-outer-for-post .newsletter {
|
||||
padding: calc(4.72vw * var(--scale)) calc(2.92vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.newsletter {
|
||||
padding: 96px 30px;
|
||||
min-height: 62vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.newsletter {
|
||||
padding: 68px 30px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
120
newspaper/assets/css/notifications.css
Normal file
120
newspaper/assets/css/notifications.css
Normal file
@ -0,0 +1,120 @@
|
||||
.notification {
|
||||
z-index: 8999;
|
||||
position: fixed;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
left: calc(50%);
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 30px;
|
||||
border: 1px solid var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
width: max-content;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notification small {
|
||||
opacity: 1;
|
||||
color: var(--text-color);
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
font-weight: 400;
|
||||
font-family: var(--font1);
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
min-height: 18px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.global-notifications.subscribe-false .subscribe-false,
|
||||
.global-notifications.signin-false .signin-false,
|
||||
.global-notifications.subscribe-true .subscribe-true,
|
||||
.global-notifications.signin-true .signin-true,
|
||||
.global-notifications.stripe-success .stripe-success,
|
||||
.global-notifications.signup-true .signup-true,
|
||||
.global-notifications.signup-false .signup-false {
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
animation-name: slide-in-down;
|
||||
animation-duration: 4s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/* Hide default global notifications */
|
||||
.gh-portal-notification-iframe {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes slide-in-down {
|
||||
0% {
|
||||
transform: translateY(-100%) translateX(-50%);
|
||||
}
|
||||
15% {
|
||||
transform: translateY(85%) translateX(-50%);
|
||||
}
|
||||
85% {
|
||||
transform: translateY(85%) translateX(-50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100%) translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.notification {
|
||||
padding: calc(0.8vw * var(--scale)) calc(2.1vw * var(--scale));
|
||||
}
|
||||
|
||||
.notification small {
|
||||
font-size: calc(1.11vw * var(--scale))
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
width: calc(1.25vw * var(--scale));
|
||||
min-width: calc(1.25vw * var(--scale));
|
||||
height: calc(1.25vw * var(--scale));
|
||||
min-height: calc(1.25vw * var(--scale));
|
||||
margin-right: calc(0.56vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.notification {
|
||||
max-width: calc(100vw - 60px);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.notification {
|
||||
padding: 11px 18px;
|
||||
max-width: calc(100vw - 36px);
|
||||
}
|
||||
|
||||
.notification small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
143
newspaper/assets/css/post-authors.css
Normal file
143
newspaper/assets/css/post-authors.css
Normal file
@ -0,0 +1,143 @@
|
||||
.post-authors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-author-images {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post-author-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 53px;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid var(--text-color);
|
||||
overflow: hidden;
|
||||
background-color: var(--background-color);
|
||||
transition: all .2s ease;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.post-author-image:hover {
|
||||
transform: translateY(-4%);
|
||||
}
|
||||
|
||||
.post-author-image {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.post-author-image:first-of-type {
|
||||
margin-left: 0px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.post-author-image:nth-child(2){
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.post-author-image:nth-child(3){
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.post-author-image:nth-child(4){
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.post-author-image:nth-child(5){
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.post-author-image:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.post-authors-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-authors-inner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.post-author-name {
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-author-name a {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.post-author-name a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.date-small-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 140%;
|
||||
white-space: nowrap;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.author-avatar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.post-author-image {
|
||||
min-width: calc(3.7vw * var(--scale));
|
||||
width: calc(3.7vw * var(--scale));
|
||||
height: calc(3.7vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-author-name {
|
||||
font-size: calc(1.05vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-author-image {
|
||||
margin-left: calc(-2vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-authors-text {
|
||||
row-gap: calc(0.3vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-author-image:last-of-type {
|
||||
margin-right: calc(1.1vw * var(--scale));
|
||||
}
|
||||
|
||||
.author-avatar-wrapper {
|
||||
min-width: calc(1.73vw * var(--scale));
|
||||
width: calc(1.73vw * var(--scale));
|
||||
height: calc(1.73vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.post-authors {
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.post-authors {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
2997
newspaper/assets/css/post-content.css
Normal file
2997
newspaper/assets/css/post-content.css
Normal file
File diff suppressed because it is too large
Load Diff
653
newspaper/assets/css/post.css
Normal file
653
newspaper/assets/css/post.css
Normal file
@ -0,0 +1,653 @@
|
||||
article header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
font-family: var(--font2);
|
||||
line-height: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.narrow-container .post-tag,
|
||||
.vertical-post-header .post-tag {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.post-heading {
|
||||
font-family: var(--font2);
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
margin-bottom: 29px;
|
||||
}
|
||||
|
||||
.narrow-container .post-heading,
|
||||
.vertical-post-header .post-heading {
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
.excerpt-and-authors-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
column-gap: 5vw;
|
||||
}
|
||||
|
||||
.post-excerpt-wrapper {
|
||||
max-width: 464px;
|
||||
}
|
||||
|
||||
.full-width-post-excerpt-wrapper {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
article p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-main-image-wrapper {
|
||||
margin-top: 38px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-content .section-padding-top {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.no-image-container .post-hero-text-content {
|
||||
padding-bottom: 57px;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.vertical-post-header {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
|
||||
.vertical-post-header .hero-content {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 42px;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.vertical-post-image-left .hero-content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-hero-text-content {
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: 57px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
display: flex;
|
||||
margin-top: 0px;
|
||||
min-height: 35vw;
|
||||
max-width: 31.2vw;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper figure {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-hero-text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-content-and-sidebar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.post-content-outer-without-sidebar {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
max-width: calc(31.2vw + 42px);
|
||||
width: 100%;
|
||||
padding-right: 42px;
|
||||
margin-top: 38px;
|
||||
position: sticky;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.post-sidebar .extra-small-side-card-image-link {
|
||||
height: 10vw;
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sidebar-left .post-sidebar {
|
||||
padding-left: 42px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.post-content-no-image {
|
||||
margin-top: 57px;
|
||||
}
|
||||
|
||||
article[data-post-header-type="Narrow"][data-use-sidebar="true"] .post-main-image-wrapper-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-width-full {
|
||||
max-width: 100% !important;
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
left: 0% !important;
|
||||
right: 0% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border-radius: 0px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-width-full .kg-signup-card-text {
|
||||
padding: 4.4vmax;
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-width-full .kg-header-card-text {
|
||||
padding:min(6.4vmax,120px) min(4vmax,80px);
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-layout-split .kg-signup-card-content,
|
||||
article[data-use-sidebar="true"] .kg-layout-split .kg-header-card-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-layout-split .kg-signup-card-content .kg-signup-card-image,
|
||||
article[data-use-sidebar="true"] .kg-layout-split .kg-header-card-content .kg-header-card-image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.post-share {
|
||||
margin-top: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.post-share-heading {
|
||||
line-height: 160%;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-share-icons {
|
||||
margin-top: 16px;
|
||||
gap: 32px;
|
||||
padding: 12px 18px;
|
||||
border: 1px solid var(--text-color);
|
||||
position: relative;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.clipboard-alert {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -32px;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comments-container iframe[title="comments-frame"] {
|
||||
max-width: none !important;
|
||||
position: relative !important;
|
||||
width: 100vw !important;
|
||||
left: 50% !important;
|
||||
right: 50% !important;
|
||||
margin-left: -50vw !important;
|
||||
margin-right: -50vw !important;
|
||||
border-radius: 0px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.post-upgrade-cta {
|
||||
width: 100%;
|
||||
padding: 5.8vw 8.6vw;
|
||||
text-align: center;
|
||||
border: 1px solid var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.post-upgrade-cta h2 {
|
||||
line-height: 120%;
|
||||
font-size: 62px;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta .button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-upgrade-cta-paragraph {
|
||||
margin-top: calc(1.5vw * var(--scale));
|
||||
margin-bottom: calc(2.8vw * var(--scale));
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.under-button-wrapper {
|
||||
margin-top: calc(0.7vw * var(--scale));
|
||||
}
|
||||
|
||||
.under-button-wrapper small {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.under-button-wrapper span {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.fading-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fading-content:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 35vh;
|
||||
background: linear-gradient(transparent, var(--background-color) 93%);
|
||||
}
|
||||
|
||||
.fading-content + .post-upgrade-cta {
|
||||
filter: drop-shadow(0px 10px 30px var(--text-color-20));
|
||||
}
|
||||
|
||||
article[data-post-header-type="Wide"][data-has-feature-image="true"] .post-excerpt-wrapper {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.post-tag {
|
||||
font-size: calc(1.53vw * var(--scale));
|
||||
margin-bottom: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
.narrow-container .post-tag,
|
||||
.vertical-post-header .post-tag {
|
||||
font-size: calc(1.39vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-heading {
|
||||
font-size: calc(5vw * var(--scale));
|
||||
margin-bottom: calc(2.01vw * var(--scale));
|
||||
}
|
||||
|
||||
.narrow-container .post-heading,
|
||||
.vertical-post-header .post-heading {
|
||||
font-size: calc(4.31vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-excerpt-wrapper {
|
||||
max-width: calc(32.2vw * var(--scale));
|
||||
}
|
||||
|
||||
article p {
|
||||
font-size: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-main-image-wrapper {
|
||||
margin-top: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.hero-content .section-padding-top {
|
||||
margin-top: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.no-image-container .post-hero-text-content {
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-post-header {
|
||||
margin-bottom: calc(1.32vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-post-header .hero-content {
|
||||
gap: 2.92vw;
|
||||
margin-top: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-post-header .post-hero-text-content {
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
max-width: 34.12vw;
|
||||
padding-right: 2.92vw;
|
||||
margin-top: calc(2.64vw * var(--scale));
|
||||
margin-bottom: calc(1.74vw * var(--scale));
|
||||
}
|
||||
|
||||
.sidebar-left .post-sidebar {
|
||||
padding-left: 2.92vw;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.post-content-no-image {
|
||||
margin-top: calc(3.96vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-share {
|
||||
margin-top: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-share-heading {
|
||||
font-size: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-share-icons {
|
||||
margin-top: calc(1.11vw * var(--scale));
|
||||
gap: calc(2.22vw * var(--scale));
|
||||
padding: calc(0.83vw * var(--scale)) calc(1.25vw * var(--scale));;
|
||||
}
|
||||
|
||||
.clipboard-alert {
|
||||
bottom: calc(-2.22vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-upgrade-cta h2 {
|
||||
font-size: calc(4.31vw * var(--scale));
|
||||
max-width: calc(43vw * var(--scale));
|
||||
}
|
||||
|
||||
.post-upgrade-cta-paragraph {
|
||||
max-width: calc(43vw * var(--scale));
|
||||
}
|
||||
|
||||
article[data-post-header-type="Wide"][data-has-feature-image="true"] .post-excerpt-wrapper {
|
||||
max-width: calc(41.7vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.post-heading,
|
||||
.narrow-container .post-heading,
|
||||
.vertical-post-header .post-heading {
|
||||
font-size: 48px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.post-heading {
|
||||
line-height: 105%;
|
||||
}
|
||||
|
||||
.post-tag,
|
||||
.narrow-container .post-tag,
|
||||
.vertical-post-header .post-tag {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.excerpt-and-authors-wrapper {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-content .section-padding-top {
|
||||
padding-top: 68px;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.no-image-container .post-hero-text-content {
|
||||
padding-bottom: 68px;
|
||||
}
|
||||
|
||||
.vertical-post-header {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.vertical-post-header .hero-content {
|
||||
display: block;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-hero-text-content {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
padding-bottom: 0px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
display: flex;
|
||||
margin-top: 26px;
|
||||
min-height: 35vw;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper figure {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-hero-text-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.post-content-no-image {
|
||||
margin-top: 68px;
|
||||
}
|
||||
|
||||
.sidebar-related-articles {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.post-content-and-sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
position: static;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
order: -1;
|
||||
padding-left: 30px !important;
|
||||
padding-right: 30px !important;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.toc-heading {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
article[data-post-header-type="Narrow"][data-use-sidebar="true"] .post-main-image-wrapper-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
article .post-main-image-wrapper-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article[data-use-sidebar="true"] .kg-width-full {
|
||||
max-width: none !important;
|
||||
position: relative !important;
|
||||
width: 100vw !important;
|
||||
left: 50% !important;
|
||||
right: 50% !important;
|
||||
margin-left: -50vw !important;
|
||||
margin-right: -50vw !important;
|
||||
border-radius: 0px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
article .post-content-and-sidebar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comments-container iframe[title="comments-frame"] {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
left: 0% !important;
|
||||
right: 0% !important;
|
||||
margin-left: 0vw !important;
|
||||
margin-right: 0vw !important;
|
||||
}
|
||||
|
||||
.post-upgrade-cta {
|
||||
padding: 72px 52px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta h2 {
|
||||
font-size: 54px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta-paragraph {
|
||||
margin-top: 22px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.under-button-wrapper {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
article[data-post-header-type="Wide"][data-has-feature-image="true"] .post-excerpt-wrapper {
|
||||
max-width: 464px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.post-tag,
|
||||
.narrow-container .post-tag,
|
||||
.vertical-post-header .post-tag {
|
||||
font-size: 18px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.post-heading,
|
||||
.narrow-container .post-heading,
|
||||
.vertical-post-header .post-heading {
|
||||
line-height: 110%;
|
||||
font-size: 36px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
article p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.post-main-image-wrapper {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.hero-content .section-padding-top {
|
||||
margin-top: 20px;
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.no-image-container .post-hero-text-content {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.vertical-post-header .post-main-image-wrapper {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.vertical-post-header .hero-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.post-content-no-image {
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
.post-sidebar {
|
||||
padding-left: 18px !important;
|
||||
padding-right: 18px !important;
|
||||
}
|
||||
|
||||
.post-share {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.post-share-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.post-share-icons {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.clipboard-alert {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta {
|
||||
padding: 64px 32px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.post-upgrade-cta-paragraph {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
}
|
||||
90
newspaper/assets/css/related-posts.css
Normal file
90
newspaper/assets/css/related-posts.css
Normal file
@ -0,0 +1,90 @@
|
||||
.related-posts {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.related-post-wrapper {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.related-post-line {
|
||||
width: 1px;
|
||||
min-width: 1px;
|
||||
background-color: var(--text-color);
|
||||
}
|
||||
|
||||
.related-post-wrapper .horizontal-card {
|
||||
gap: 22px;
|
||||
height: 100%;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.next-article-horizontal-card .horizontal-card-inner {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
.previous-article-horizontal-card .horizontal-card {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.previous-article-horizontal-card .horizontal-card-inner {
|
||||
padding-right: 38px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.related-post-wrapper .horizontal-card {
|
||||
gap: calc(1.53vw * var(--scale));
|
||||
}
|
||||
|
||||
.next-article-horizontal-card .horizontal-card-inner {
|
||||
padding-left: calc(2.64vw * var(--scale));
|
||||
}
|
||||
|
||||
.previous-article-horizontal-card .horizontal-card-inner {
|
||||
padding-right: calc(2.64vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.related-posts {
|
||||
flex-direction: column-reverse;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.related-post-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.related-post-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.related-post-wrapper .horizontal-card {
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.next-article-horizontal-card .horizontal-card-inner {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.previous-article-horizontal-card .horizontal-card-inner {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.related-posts .small-card-image-link {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.related-post-wrapper .horizontal-card {
|
||||
gap: 17px;
|
||||
}
|
||||
}
|
||||
87
newspaper/assets/css/simple-hero.css
Normal file
87
newspaper/assets/css/simple-hero.css
Normal file
@ -0,0 +1,87 @@
|
||||
.simple-hero {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.simple-hero-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding-top: 31px;
|
||||
padding-bottom: 68px;
|
||||
}
|
||||
|
||||
.text-card-heading {
|
||||
line-height: 100%;
|
||||
font-family: var(--font2);
|
||||
font-size: 62px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.text-card-paragraph {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.simple-hero {
|
||||
margin-top: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.text-card {
|
||||
padding-top: calc(2.15vw * var(--scale));
|
||||
padding-bottom: calc(4.72vw * var(--scale));
|
||||
}
|
||||
|
||||
.text-card-heading {
|
||||
font-size: calc(4.31vw * var(--scale));
|
||||
margin-bottom: calc(0.97vw * var(--scale));
|
||||
}
|
||||
|
||||
.text-card-paragraph {
|
||||
max-width: calc(37.5vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.simple-hero {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.text-card-heading {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
border-top: 1px solid var(--text-color);
|
||||
padding-top: 57px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.simple-hero {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-card-heading {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
padding-bottom: 62px;
|
||||
}
|
||||
}
|
||||
141
newspaper/assets/css/slider.css
Normal file
141
newspaper/assets/css/slider.css
Normal file
@ -0,0 +1,141 @@
|
||||
.slider-outer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider-inner {
|
||||
padding-left: 42px;
|
||||
padding-right: 42px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.slide-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.slide-card-image-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 11vw;
|
||||
}
|
||||
|
||||
.slide-card-image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide-card-heading {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.slide-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.slide-card-small-text {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
line-height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mobile-heading-span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slide-card .access-icon-smaller {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.slider-inner {
|
||||
padding-left: 2.92vw;
|
||||
padding-right: 2.92vw;
|
||||
gap: calc(1.81vw * var(--scale));
|
||||
}
|
||||
|
||||
.slide-card-heading {
|
||||
margin-top: calc(0.83vw * var(--scale));
|
||||
margin-bottom: calc(0.28vw * var(--scale));
|
||||
}
|
||||
|
||||
.slide-card-small-text {
|
||||
font-size: calc(0.83vw * var(--scale));
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.slider-inner {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.slide-card-image-link {
|
||||
height: 26vw;
|
||||
width: 36vw;
|
||||
}
|
||||
|
||||
.slide-card-small-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.section-heading-slider {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.mobile-heading-span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.slider-inner {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.slide-card-small-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
155
newspaper/assets/css/table-of-contents.css
Normal file
155
newspaper/assets/css/table-of-contents.css
Normal file
@ -0,0 +1,155 @@
|
||||
.gh-toc-outer {
|
||||
padding: 38px 26px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--text-color);
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.gh-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-toc .toc-list {
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.gh-toc .toc-list li {
|
||||
line-height: 140%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
a.toc-link {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.gh-toc .is-active-link::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.gh-toc .is-active-link {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-toc .toc-link::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .toc-link {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .is-collapsible .toc-link {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.gh-content h1:focus,
|
||||
.gh-content h2:focus,
|
||||
.gh-content h3:focus,
|
||||
.gh-content h4:focus,
|
||||
.gh-content h5:focus,
|
||||
.gh-content h6:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.toc-heading {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.gh-toc-outer {
|
||||
padding: 2.64vw 1.81vw;
|
||||
margin-bottom: 2.64vw;
|
||||
}
|
||||
|
||||
a.toc-link {
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
padding-top: calc(0.49vw * var(--scale));
|
||||
padding-bottom: calc(0.49vw * var(--scale));
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .toc-link {
|
||||
padding-left: calc(1.25vw * var(--scale));
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .is-collapsible .toc-link {
|
||||
padding-left: calc(2.5vw * var(--scale));
|
||||
}
|
||||
|
||||
.toc-heading {
|
||||
margin-bottom: calc(0.69vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.gh-toc-outer {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.is-collapsed {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.is-collapsible .toc-link::before {
|
||||
content: '\2022';
|
||||
color: var(--text-color);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.is-collapsible .is-collapsible .toc-link::before {
|
||||
left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.gh-toc-outer {
|
||||
padding: 28px 20px;
|
||||
}
|
||||
|
||||
.is-collapsed {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.is-collapsible .toc-link::before {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.is-collapsible .is-collapsible .toc-link::before {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
a.toc-link {
|
||||
font-size: 14px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .toc-link {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.gh-toc .is-collapsible .is-collapsible .toc-link {
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.toc-heading {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
151
newspaper/assets/css/toggle-card.css
Normal file
151
newspaper/assets/css/toggle-card.css
Normal file
@ -0,0 +1,151 @@
|
||||
.kg-toggle-card,
|
||||
.kg-toggle-card * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kg-toggle-card {
|
||||
padding: 15px 0px;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.kg-toggle-content {
|
||||
height: auto;
|
||||
top: 0;
|
||||
position: relative;
|
||||
max-width: 92%;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.kg-toggle-card[data-kg-toggle-state="close"] svg {
|
||||
transition: none;
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
.kg-toggle-card .kg-toggle-content p,
|
||||
.kg-toggle-card .kg-toggle-content ol,
|
||||
.kg-toggle-card .kg-toggle-content ul {
|
||||
margin-top: 15px;
|
||||
line-height: 160%;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kg-toggle-heading {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kg-toggle-card h4.kg-toggle-heading-text {
|
||||
line-height: 130%;
|
||||
font-family: var(--font2);
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.kg-toggle-card-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
margin-left: 5vw;
|
||||
border-radius: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.kg-toggle-heading svg {
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
transform: rotateZ(180deg);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.kg-toggle-heading path {
|
||||
fill: var(--text-color);
|
||||
}
|
||||
|
||||
.faq-hero .text-card {
|
||||
padding-bottom: 57px;
|
||||
}
|
||||
|
||||
.toggle-card-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-card-section .kg-toggle-card:first-of-type {
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
|
||||
/* Styles for large desktop */
|
||||
@media (min-width: 1439px) {
|
||||
.kg-toggle-card {
|
||||
padding: calc(1.04vw * var(--scale)) 0px;
|
||||
}
|
||||
|
||||
.kg-toggle-card .kg-toggle-content p,
|
||||
.kg-toggle-card .kg-toggle-content ol,
|
||||
.kg-toggle-card .kg-toggle-content ul {
|
||||
margin-top: calc(1.04vw * var(--scale));
|
||||
font-size: calc(1.11vw * var(--scale));
|
||||
margin-bottom: calc(0.56vw * var(--scale));
|
||||
}
|
||||
|
||||
.kg-toggle-card h4.kg-toggle-heading-text {
|
||||
font-size: calc(1.67vw * var(--scale));
|
||||
}
|
||||
|
||||
.kg-toggle-heading svg {
|
||||
width: calc(1.11vw * var(--scale));
|
||||
min-width: calc(1.11vw * var(--scale));
|
||||
}
|
||||
|
||||
.faq-hero .text-card {
|
||||
padding-bottom: calc(3.96vw * var(--scale));
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for tablet */
|
||||
@media (max-width: 991px) {
|
||||
.kg-toggle-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for mobile */
|
||||
@media (max-width: 479px) {
|
||||
.kg-toggle-card {
|
||||
padding: 18px 0px;
|
||||
}
|
||||
|
||||
.kg-toggle-card .kg-toggle-content p,
|
||||
.kg-toggle-card .kg-toggle-content ol,
|
||||
.kg-toggle-card .kg-toggle-content ul {
|
||||
margin-top: 18px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.kg-toggle-card h4.kg-toggle-heading-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.kg-toggle-card-icon {
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.kg-toggle-heading svg {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user