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;
|
||||
}
|
||||
}
|
||||
BIN
newspaper/assets/fonts/chomsky.otf
Normal file
BIN
newspaper/assets/fonts/chomsky.otf
Normal file
Binary file not shown.
638
newspaper/assets/js/custom-elements.js
Normal file
638
newspaper/assets/js/custom-elements.js
Normal file
@ -0,0 +1,638 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (!customElements.get('custom-header')) {
|
||||
customElements.define('custom-header', class CustomHeader extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.setSocials(this);
|
||||
this.setNavigation(this);
|
||||
this.secondLevelMenu();
|
||||
}
|
||||
|
||||
setSocials(){
|
||||
const data = this.querySelector('#socials-info').dataset.urls;
|
||||
let splitArray = data.toString().toLowerCase().split(',');
|
||||
|
||||
const keyValuePairs = splitArray.map(item => {
|
||||
const match = item.match(/([^:]+):(.*)/);
|
||||
if (match) {
|
||||
const key = match[1].trim();
|
||||
const value = match[2].trim();
|
||||
return { key, value };
|
||||
}
|
||||
return null;
|
||||
}).filter(item => item !== null);
|
||||
|
||||
keyValuePairs.forEach(el => {
|
||||
let element = this.querySelector(`#${el.key.replace(' ', '')}`)
|
||||
if(!element) return;
|
||||
|
||||
element.style.display = "flex";
|
||||
element.href = el.value.replace(' ', '');
|
||||
|
||||
//socials for footer
|
||||
let footerElement = document.querySelector(`#${el.key.replace(' ', '')}-footer`);
|
||||
if(!footerElement) return;
|
||||
|
||||
footerElement.style.display = "flex";
|
||||
footerElement.href = el.value.replace(' ', '');
|
||||
})
|
||||
}
|
||||
|
||||
setNavigation(){
|
||||
const menuBtn = this.querySelector('.menu-button');
|
||||
const menu = this.querySelector('.navbar-links-outer');
|
||||
const navbar = this;
|
||||
menu.style.transition = 'opacity 0.3s var(--ease-transition)';
|
||||
|
||||
menuBtn.addEventListener('click', e => menuHandler(e));
|
||||
window.addEventListener('resize', debounce(() => {menuOnResize()}, 100)); //leave at 100, if smaller there is a bug with scrolling to the top
|
||||
|
||||
function menuHandler(e){
|
||||
if(menu.getAttribute('isopen') == 'true'){
|
||||
closeMenu();
|
||||
}else{
|
||||
openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function closeMenu(){
|
||||
enableScrolling();
|
||||
|
||||
if(window.matchMedia('(max-width: 991px)').matches){
|
||||
setTimeout(() => {
|
||||
menu.style.display = 'none';
|
||||
menu.setAttribute("isopen", false);
|
||||
}, 300);
|
||||
menu.style.opacity = '0';
|
||||
}
|
||||
|
||||
menuBtn.querySelector('.first-line').style.position = 'static';
|
||||
menuBtn.querySelector('.first-line').style.transform = 'rotateZ(0deg)';
|
||||
menuBtn.querySelector('.second-line').style.position = 'static';
|
||||
menuBtn.querySelector('.second-line').style.transform = 'rotateZ(0deg)';
|
||||
menuBtn.querySelector('.mobile-line').style.opacity = '1';
|
||||
}
|
||||
|
||||
function openMenu(){
|
||||
let currentPosition = window.pageYOffset;
|
||||
let announcementBar = document.querySelector('#announcement-bar-root');
|
||||
let announcementBarOffset = 0;
|
||||
|
||||
if(announcementBar && (currentPosition < announcementBar.offsetHeight)){
|
||||
announcementBarOffset = announcementBar.offsetHeight - currentPosition;
|
||||
}
|
||||
|
||||
disableScrolling();
|
||||
menu.setAttribute("isopen", true);
|
||||
|
||||
menu.style.display = 'flex';
|
||||
setTimeout(() => {
|
||||
menu.style.opacity = '1';
|
||||
}, 10);
|
||||
|
||||
|
||||
menu.style.height = `calc(100dvh - ${navbar.offsetHeight}px - ${announcementBarOffset}px)`;
|
||||
menuBtn.querySelector('.first-line').style.position = 'absolute';
|
||||
menuBtn.querySelector('.first-line').style.transform = 'rotateZ(-45deg)';
|
||||
menuBtn.querySelector('.second-line').style.position = 'absolute';
|
||||
menuBtn.querySelector('.second-line').style.transform = 'rotateZ(45deg)';
|
||||
menuBtn.querySelector('.mobile-line').style.opacity = '0';
|
||||
}
|
||||
|
||||
function menuOnResize(){
|
||||
if(window.matchMedia('(max-width: 991px)').matches){
|
||||
menu.classList.remove('desktop-navbar')
|
||||
}else{
|
||||
menu.classList.add('desktop-navbar');
|
||||
enableScrolling(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
secondLevelMenu(){
|
||||
let navArray = [];
|
||||
const navbar = this.querySelector('.nav');
|
||||
if(navbar){
|
||||
navbar.querySelectorAll('li').forEach(link => {
|
||||
if (link.dataset.label.charAt(0) === "-") {
|
||||
link.dataset.parent = link.dataset.label.substring(1);
|
||||
if(link.dataset.label.includes("--")){
|
||||
var data = link.dataset.parent.split("--")
|
||||
link.dataset.parent = data[0];
|
||||
link.dataset.child = data[1];
|
||||
|
||||
link.querySelector('.nav-link').innerHTML = link.dataset.child;
|
||||
link.querySelector('.nav-link').setAttribute('tabindex', '0');
|
||||
navArray.push({parent: data[0], child: link});
|
||||
}else{
|
||||
link.querySelector('.nav-link').innerHTML = link.dataset.parent;
|
||||
|
||||
const anchor = link.querySelector('a');
|
||||
const div = document.createElement('div');
|
||||
const ul = document.createElement('ul');
|
||||
const container = document.createElement('div')
|
||||
|
||||
div.innerHTML = anchor.innerHTML;
|
||||
div.classList.add('links-label');
|
||||
div.dataset.label = link.dataset.parent;
|
||||
div.innerHTML += `
|
||||
<svg class="dropdown-arrow-svg" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.09103 3.18205L0.908974 0L0 0.908974L4.09103 5L8.18205 0.908974L7.27243 0L4.09038 3.18205H4.09103Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
`
|
||||
anchor.parentNode.replaceChild(div, anchor);
|
||||
|
||||
link.appendChild(container);
|
||||
container.classList.add('secondary-links');
|
||||
container.appendChild(ul)
|
||||
ul.classList.add('secondary-links-inner');
|
||||
|
||||
//secondary links handler for mobile
|
||||
div.addEventListener('click', e => this.openCloseLinksOnMobile(link));
|
||||
window.addEventListener('resize', debounce(() => {this.secondaryLinksOnResize(link)}, 10));
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
//move links
|
||||
navArray.forEach(item => {
|
||||
var secondaryList = document.querySelector(`.nav div.links-label[data-label="${item.parent}"]`).parentNode.querySelector('ul');
|
||||
item.child.querySelector('a').classList.remove('hover-underline');
|
||||
secondaryList.appendChild(item.child);
|
||||
})
|
||||
|
||||
navbar.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
openCloseLinksOnMobile(link){
|
||||
if(window.matchMedia('(max-width: 991px)').matches){
|
||||
let container = link.querySelector('.secondary-links');
|
||||
if(container.offsetHeight == 0){
|
||||
container.style.height = 'auto';
|
||||
link.querySelector('.dropdown-arrow-svg').style.transform = "rotateZ(180deg) translateX(-100%)";
|
||||
}else{
|
||||
container.style.height = '0px'
|
||||
link.querySelector('.dropdown-arrow-svg').style.transform = "rotateZ(360deg) translateX(100%)";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
secondaryLinksOnResize(link){
|
||||
let container = link.querySelector('.secondary-links');
|
||||
if(window.matchMedia('(max-width: 991px)').matches){
|
||||
container.style.height = '0px'
|
||||
link.querySelector('.dropdown-arrow-svg').style.transform = "rotateZ(0deg) translateX(100%)";
|
||||
}else{
|
||||
container.style.height = 'auto';
|
||||
link.querySelector('.dropdown-arrow-svg').style.transform = "rotateZ(0deg) translateX(0%)";
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-announcement-bar')) {
|
||||
customElements.define('custom-announcement-bar', class CustomAnnouncementBar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.barType = this.getAttribute('data-announcement-bar-type');
|
||||
this.container = document.querySelector('#announcement-bar-root');
|
||||
this.querySelector('.announcement-close-button').addEventListener('click', () => {
|
||||
if(this.container.querySelector('button')){
|
||||
this.container.querySelector('button').click();
|
||||
this.style.display = "none";
|
||||
}
|
||||
})
|
||||
|
||||
this.setAnnouncementBar();
|
||||
}
|
||||
|
||||
setAnnouncementBar(){
|
||||
if(!this.container || this.barType == "Normal") {
|
||||
this.hideCustomAnnouncementBar();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if children are already present
|
||||
if (this.container.children.length > 0) {
|
||||
this.setAnnouncementBarData(this.container.querySelector('.gh-announcement-bar-content'));
|
||||
this.showCustomAnnouncementBar();
|
||||
}
|
||||
|
||||
const handleChildChange = (mutationsList, observer) => {
|
||||
for (const mutation of mutationsList) {
|
||||
if (mutation.type === "childList") {
|
||||
// Child elements have been added or removed
|
||||
const numChildren = this.container.children.length;
|
||||
if(numChildren > 0){
|
||||
this.setAnnouncementBarData(this.container.querySelector('.gh-announcement-bar-content'));
|
||||
this.showCustomAnnouncementBar();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(handleChildChange);
|
||||
const config = { childList: true };
|
||||
observer.observe(this.container, config);
|
||||
}
|
||||
|
||||
showCustomAnnouncementBar(){
|
||||
this.container.style.display = "none";
|
||||
this.style.display = "flex";
|
||||
}
|
||||
|
||||
hideCustomAnnouncementBar(){
|
||||
if(this.container){
|
||||
this.container.style.display = "block";
|
||||
}
|
||||
this.style.display = "none";
|
||||
}
|
||||
|
||||
setAnnouncementBarData(text){
|
||||
switch (this.barType) {
|
||||
case "Moving Several News":
|
||||
let sentences = text.textContent.split('.');
|
||||
let filteredSentences = sentences.filter(sentence => sentence.trim() !== '');
|
||||
|
||||
this.querySelectorAll('.announcement-text').forEach(item => {
|
||||
item.innerHTML = "";
|
||||
filteredSentences.forEach(sentence => {
|
||||
item.classList.add('slide-animation');
|
||||
item.innerHTML += sentence;
|
||||
item.innerHTML += `
|
||||
<div class="announcement-circle"></div>
|
||||
`
|
||||
})
|
||||
})
|
||||
break;
|
||||
|
||||
case "Moving One News":
|
||||
this.querySelectorAll('.announcement-text').forEach(item => {
|
||||
item.classList.add('slide-animation');
|
||||
item.innerHTML = text.innerHTML;
|
||||
})
|
||||
break;
|
||||
|
||||
case "Static":
|
||||
this.querySelectorAll('.announcement-text').forEach(item => {
|
||||
item.innerHTML = text.innerHTML;
|
||||
item.classList.remove('slide-animation')
|
||||
})
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-pagination')) {
|
||||
customElements.define('custom-pagination', class CustomPagination extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.loadMoreBtn = this.querySelector("#load-more-btn");
|
||||
|
||||
if(this.loadMoreBtn){
|
||||
this.loadMoreBtn.addEventListener("click", () => {
|
||||
this.loadMorePosts();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
loadMorePosts(cleanList = false) {
|
||||
let currentPage = parseInt(this.getAttribute("data-current-page"));
|
||||
let nextPage = cleanList ? currentPage = 1 : currentPage + 1;
|
||||
let startUrl = window.location;
|
||||
|
||||
if(this.getAttribute('data-is-archivepage') == "true"){
|
||||
let tagName = document.querySelector('archive-tags').getAttribute('data-current-tag')
|
||||
tagName == "all-tags" ? startUrl = window.location.origin + "/": startUrl = window.location.origin + `/tag/${tagName}/`
|
||||
}
|
||||
|
||||
let url = startUrl + `page/${nextPage}/`;
|
||||
|
||||
|
||||
// Make the AJAX request
|
||||
fetch(url)
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
let parser = new DOMParser();
|
||||
let html = parser.parseFromString(data, "text/html");
|
||||
let grid = document.querySelector("#pagination-grid");
|
||||
let newPosts = html.querySelector("#pagination-grid").innerHTML;
|
||||
|
||||
// Append the new posts to the existing ones
|
||||
cleanList ? grid.innerHTML = newPosts : grid.insertAdjacentHTML("beforeend", newPosts);
|
||||
|
||||
if(cleanList){
|
||||
let postNumber = html.querySelector('#data-length');
|
||||
if(postNumber){
|
||||
document.querySelector(".archive-grid-article-number").innerHTML = postNumber.getAttribute('data-length');
|
||||
}
|
||||
}
|
||||
|
||||
// Update the "Load more" button attributes
|
||||
this.setAttribute("data-current-page", nextPage);
|
||||
if(this.loadMoreBtn){
|
||||
this.loadMoreBtn.style.display = html.querySelector("#load-more-btn") ? "block" : "none";
|
||||
}
|
||||
|
||||
lazyLoadImages(grid);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error loading more posts:", error);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('archive-tags')) {
|
||||
customElements.define('archive-tags', class ArchiveTags extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.querySelectorAll('.archive-tag-button').forEach(button => {
|
||||
button.addEventListener('change', this.archiveButtonChange.bind(this))
|
||||
})
|
||||
}
|
||||
|
||||
archiveButtonChange(e){
|
||||
this.setAttribute('data-current-tag', e.target.id);
|
||||
|
||||
// Make the AJAX request
|
||||
document.getElementById('custom-pagination').loadMorePosts(true);
|
||||
|
||||
document.querySelector('.archive-grid-title').textContent = e.target.getAttribute('data-name');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('featured-tags')) {
|
||||
customElements.define('featured-tags', class FeaturedTags extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.tagSlugs = this.getAttribute('data-featured-tags');
|
||||
this.setFeaturedTags();
|
||||
}
|
||||
|
||||
async setFeaturedTags() {
|
||||
const tags = this.tagSlugs.split(',').map(item => item.trim());
|
||||
const grid = this.querySelector('.featured-tags-inner');
|
||||
|
||||
for (const tag of tags) {
|
||||
try {
|
||||
const url = `${window.location.origin}/tag/${tag}/page/1/`;
|
||||
const response = await fetch(url);
|
||||
const data = await response.text();
|
||||
const parser = new DOMParser();
|
||||
const html = parser.parseFromString(data, "text/html");
|
||||
const newPosts = html.querySelector(".articles-grid-section");
|
||||
const newHeading = html.querySelector('.text-card-heading');
|
||||
const articleNumber = html.querySelector('.section-heading-article-number');
|
||||
const button = html.querySelector('#homepage-section-heading-button');
|
||||
|
||||
newPosts.setAttribute('featured-tag-slug', tag);
|
||||
|
||||
// Creating a heading wrapper
|
||||
const headingWrapper = document.createElement('div');
|
||||
headingWrapper.classList.add('sponsored-heading');
|
||||
|
||||
// Clean up new posts
|
||||
newPosts.querySelector('custom-pagination')?.remove();
|
||||
newPosts.querySelector('.articles-grid-section .section-heading-title').textContent = newHeading.textContent;
|
||||
newPosts.querySelector('.section-heading').insertBefore(headingWrapper, newPosts.querySelector('.section-heading').firstChild);
|
||||
headingWrapper.appendChild(newPosts.querySelector('.articles-grid-section .section-heading-title'));
|
||||
articleNumber.remove();
|
||||
button.classList.remove('hidden');
|
||||
newPosts.querySelector('.pagination-grid').removeAttribute('id');
|
||||
newPosts.querySelector('.section-heading-button')?.removeAttribute('id');
|
||||
|
||||
newPosts.querySelectorAll('.grid-small-card').forEach((card, index) => {
|
||||
if (index > 3) {
|
||||
card.remove();
|
||||
}
|
||||
});
|
||||
|
||||
lazyLoadImages(newPosts);
|
||||
grid.appendChild(newPosts);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading more posts:", error);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('.featured-tags-section').style.display = 'block';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-notifications')) {
|
||||
customElements.define('custom-notifications', class CustomNotifications extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.setNotification();
|
||||
}
|
||||
|
||||
setNotification() {
|
||||
var action = getParameterByName('action');
|
||||
var stripe = getParameterByName('stripe');
|
||||
var success = getParameterByName('success');
|
||||
|
||||
if(success == null && action == null && stripe == null) return;
|
||||
|
||||
var notifications = document.querySelector('.global-notifications');
|
||||
if(stripe){
|
||||
notifications.classList.add(`stripe-${stripe}`);
|
||||
|
||||
notifications.addEventListener('animationend', () => {
|
||||
notifications.classList.remove(`stripe-${stripe}`);
|
||||
});
|
||||
}else{
|
||||
notifications.classList.add(`${action}-${success}`);
|
||||
|
||||
notifications.addEventListener('animationend', () => {
|
||||
notifications.classList.remove(`${action}-${success}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-form')) {
|
||||
customElements.define('custom-form', class CustomForm extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const formElement = this.querySelector('form');
|
||||
const heading = document.querySelector('.form-page-content h1');
|
||||
const description = document.querySelector('.form-page-excerpt');
|
||||
const homeButton = document.querySelector('.form-success-button');
|
||||
const successHeading = this.querySelector("#form-success-heading-text").getAttribute('data-success-heading');
|
||||
const successParagraph = this.querySelector("#form-success-paragraph-text").getAttribute('data-success-paragraph');
|
||||
|
||||
let success = false;
|
||||
const observer = new MutationObserver(function(mutationsList) {
|
||||
for (const mutation of mutationsList) {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||||
const classList = mutation.target.classList;
|
||||
if (classList.contains('success') && !success) {
|
||||
success = true;
|
||||
|
||||
formElement.style.display = "none";
|
||||
|
||||
heading.innerHTML = successHeading;
|
||||
homeButton.style.display = "block";
|
||||
|
||||
description.innerHTML = successParagraph;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(formElement, { attributes: true });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-membership')) {
|
||||
customElements.define('custom-membership', class CustomMembership extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
let currencies = [];
|
||||
|
||||
this.querySelectorAll('.membership-button').forEach(button => {
|
||||
button.addEventListener('click', this.tabChange.bind(this))
|
||||
})
|
||||
|
||||
if(!this.querySelector('.tier-card')){
|
||||
this.remove();
|
||||
}
|
||||
|
||||
this.querySelectorAll('.tier-price').forEach(price => {
|
||||
let newText = this.extractCurrency(price.querySelector('.tier-price-span').textContent.toString().trim());
|
||||
|
||||
price.querySelector('.tier-currency').textContent = newText?.currency;
|
||||
price.querySelector('.tier-price-span').textContent = newText?.stringWithoutCurrency;
|
||||
currencies.push(newText?.currency);
|
||||
})
|
||||
|
||||
const currenciesNoEmptyStrings = currencies.filter((str) => str.trim() !== '');
|
||||
|
||||
const cleanedCurrencies = [...new Set(currenciesNoEmptyStrings)];
|
||||
|
||||
this.querySelectorAll('.tier-currency-free').forEach(currency => {
|
||||
|
||||
cleanedCurrencies.length === 0 ? currency.textContent = "$" : currency.textContent = cleanedCurrencies[0];
|
||||
})
|
||||
|
||||
this.style.display = 'block';
|
||||
}
|
||||
|
||||
tabChange(e) {
|
||||
if(e.target.getAttribute('data-inactive') == "true"){
|
||||
e.target.setAttribute('data-inactive', "false");
|
||||
let name = e.target.getAttribute('data-tab')
|
||||
this.querySelector(`.membership-tiers[data-tab-content=${name}]`).setAttribute('data-inactive', "false")
|
||||
|
||||
let oposite;
|
||||
name == "yearly" ? oposite = "monthly" : oposite = "yearly"
|
||||
|
||||
this.querySelector(`.membership-button[data-tab=${oposite}]`).setAttribute('data-inactive', "true");
|
||||
this.querySelector(`.membership-tiers[data-tab-content=${oposite}]`).setAttribute('data-inactive', "true")
|
||||
}
|
||||
}
|
||||
|
||||
extractCurrency(inputString) {
|
||||
const regex = /^(.*?)(?=\d)/;
|
||||
const match = inputString.match(regex);
|
||||
|
||||
if (match) {
|
||||
const currency = match[1];
|
||||
const stringWithoutCurrency = inputString.replace(currency, '');
|
||||
|
||||
return { currency, stringWithoutCurrency };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!customElements.get('custom-footer')) {
|
||||
customElements.define('custom-footer', class CustomFooter extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.secondLevelFooter(this);
|
||||
}
|
||||
|
||||
secondLevelFooter(){
|
||||
let navArray = [];
|
||||
const footerNav = document.querySelector('.footer-nav');
|
||||
if(footerNav){
|
||||
footerNav.querySelectorAll('li').forEach(link => {
|
||||
if (link.dataset.label.charAt(0) === "-") {
|
||||
|
||||
link.dataset.parent = link.dataset.label.substring(1);
|
||||
if(link.dataset.label.includes("--")){
|
||||
var data = link.dataset.parent.split("--")
|
||||
link.dataset.parent = data[0];
|
||||
link.dataset.child = data[1];
|
||||
|
||||
link.querySelector('.footer-nav-link').innerHTML = link.dataset.child;
|
||||
navArray.push({parent: data[0], child: link});
|
||||
}
|
||||
else{
|
||||
link.querySelector('.footer-nav-link').innerHTML = link.dataset.parent;
|
||||
|
||||
const anchor = link.querySelector('a');
|
||||
const div = document.createElement('div');
|
||||
const ul = document.createElement('ul');
|
||||
const groupUl = document.createElement('ul')
|
||||
|
||||
|
||||
div.innerHTML = anchor.innerHTML;
|
||||
div.classList.add('footer-links-label')
|
||||
groupUl.classList.add('footer-links-group')
|
||||
div.dataset.label = link.dataset.parent;
|
||||
anchor.parentNode.replaceChild(div, anchor);
|
||||
|
||||
link.appendChild(ul);
|
||||
ul.classList.add('footer-secondary-links');
|
||||
|
||||
|
||||
document.querySelector('.footer-navigation').appendChild(groupUl)
|
||||
groupUl.appendChild(link)
|
||||
}
|
||||
}else {
|
||||
document.querySelector('.footer-normal-links').appendChild(link)
|
||||
}
|
||||
})
|
||||
|
||||
//move links
|
||||
navArray.forEach(item => {
|
||||
var secondaryList = this.querySelector(`div.footer-links-label[data-label="${item.parent}"]`).parentNode.querySelector('ul');
|
||||
secondaryList.appendChild(item.child)
|
||||
})
|
||||
|
||||
if(footerNav.children.length === 0){
|
||||
footerNav.remove();
|
||||
}
|
||||
|
||||
if(document.querySelector('.footer-normal-links').children.length === 0){
|
||||
document.querySelector('.footer-normal-links-group').remove();
|
||||
}
|
||||
|
||||
this.querySelector('.footer-navigation').style.display = 'flex';
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
187
newspaper/assets/js/global.js
Normal file
187
newspaper/assets/js/global.js
Normal file
@ -0,0 +1,187 @@
|
||||
function loadFonts(fonts, doc = document){
|
||||
const data = fonts;
|
||||
if(!data) return;
|
||||
const root = document.documentElement;
|
||||
|
||||
let splitArray = data.toString().replace(/,\s*/g, ',').split(',');
|
||||
|
||||
let googleFontsURL = `https://fonts.googleapis.com/css2?`;
|
||||
|
||||
const ghostFonts = document.querySelector('link[href*="fonts.bunny.net/css"]');
|
||||
|
||||
if(ghostFonts) return;
|
||||
|
||||
for(let i = 0; i < splitArray.length; i++){
|
||||
if(i == 4) break;
|
||||
|
||||
root.style.setProperty(`--font${i+1}`, `'${splitArray[i].toString()}'`);
|
||||
|
||||
splitArray[i] = splitArray[i].replace(' ', '+');
|
||||
googleFontsURL += `family=${splitArray[i]}:wght@300;400;500;600;700&`
|
||||
}
|
||||
|
||||
googleFontsURL += 'display=swap'
|
||||
|
||||
const linkElement = doc.createElement('link');
|
||||
linkElement.rel = 'stylesheet';
|
||||
linkElement.href = googleFontsURL;
|
||||
|
||||
doc.head.appendChild(linkElement);
|
||||
}
|
||||
|
||||
function hexToRgba(hex) {
|
||||
hex = hex.replace('#', '');
|
||||
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
let opac_20 = `rgba(${r}, ${g}, ${b}, 0.2)`;
|
||||
|
||||
document.documentElement.style.setProperty('--text-color-20', opac_20);
|
||||
}
|
||||
|
||||
function getParameterByName(name, url) {
|
||||
if (!url) url = window.location.href;
|
||||
name = name.replace(/[\[\]]/g, "\\$&");
|
||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
if (!results[2]) return '';
|
||||
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
function debounce(fn, delay) {
|
||||
let timerId;
|
||||
return function(...args) {
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
}
|
||||
timerId = setTimeout(() => {
|
||||
fn(...args);
|
||||
timerId = null;
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
let scrollPosition = 0;
|
||||
|
||||
function disableScrolling() {
|
||||
scrollPosition = window.pageYOffset;
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.top = `-${scrollPosition}px`;
|
||||
document.body.style.width = '100%';
|
||||
document.documentElement.style.scrollBehavior = 'auto';
|
||||
|
||||
}
|
||||
|
||||
function enableScrolling(scrollToPosition = true) {
|
||||
document.body.style.removeProperty('overflow');
|
||||
document.body.style.removeProperty('position');
|
||||
document.body.style.removeProperty('top');
|
||||
document.body.style.removeProperty('width');
|
||||
if(scrollToPosition){
|
||||
window.scrollTo(0, scrollPosition);
|
||||
}
|
||||
document.documentElement.style.scrollBehavior = 'smooth';
|
||||
}
|
||||
|
||||
function lazyLoadImages(container = document){
|
||||
container.querySelectorAll('.hover-image-opacity figure').forEach(wrapper => {
|
||||
let img = wrapper.querySelector('img');
|
||||
if(!img) return;
|
||||
if (img.complete) {
|
||||
wrapper.classList.add("loaded");
|
||||
} else {
|
||||
img.addEventListener("load", () => {
|
||||
wrapper.classList.add("loaded");
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function moveFeaturedImage(){
|
||||
let article = document.querySelector('article');
|
||||
|
||||
if(article.getAttribute('data-has-feature-image') != 'true') return;
|
||||
if(article.getAttribute('data-post-header-type') != 'Narrow') return;
|
||||
if(article.getAttribute('data-use-sidebar') != 'true') return;
|
||||
|
||||
document.querySelector('.post-content-outer').insertBefore(document.querySelector('.post-main-image-wrapper'), document.querySelector('.post-content-outer').firstChild);
|
||||
}
|
||||
|
||||
function stickySidebar() {
|
||||
let sidebar = document.querySelector('.post-sidebar');
|
||||
if(!sidebar) return;
|
||||
|
||||
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||
sidebar.offsetHeight > viewportHeight ? sidebar.style.top = `calc(100vh - ${sidebar.offsetHeight}px)` : sidebar.style.top = 'calc(2.64vw * var(--scale))';
|
||||
}
|
||||
|
||||
function setLightense(){
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
const imagesInAnchors = document.querySelectorAll('.post-content a img, .post-content .kg-product-card img, .kg-signup-card img, .kg-header-card img');
|
||||
|
||||
imagesInAnchors.forEach((img) => {
|
||||
img.classList.add('no-lightense');
|
||||
});
|
||||
|
||||
Lightense('.post-content img:not(.no-lightense)', {
|
||||
background: 'var(--background-color)'
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
|
||||
function setToggle() {
|
||||
const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
|
||||
|
||||
const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgElement.setAttribute("viewBox", "0 0 16 10");
|
||||
svgElement.setAttribute("fill", "none");
|
||||
svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
|
||||
const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||
pathElement.setAttribute("d", "M16 2L8 10L-3.49691e-07 2L1.42 0.580001L8 7.16L14.58 0.58L16 2Z");
|
||||
|
||||
svgElement.appendChild(pathElement);
|
||||
|
||||
document.querySelectorAll('.kg-toggle-card').forEach(card => {
|
||||
card.querySelector('.kg-toggle-heading svg').remove();
|
||||
|
||||
const container = card.querySelector(".kg-toggle-card-icon");
|
||||
const clonedSvg = svgElement.cloneNode(true);
|
||||
|
||||
container.appendChild(clonedSvg);
|
||||
})
|
||||
|
||||
const toggleFn = function(event) {
|
||||
|
||||
const targetElement = event.target;
|
||||
const parentElement = targetElement.closest('.kg-toggle-card');
|
||||
var toggleState = parentElement.getAttribute("data-kg-toggle-state");
|
||||
if (toggleState === 'close') {
|
||||
parentElement.setAttribute('data-kg-toggle-state', 'open');
|
||||
} else {
|
||||
parentElement.setAttribute('data-kg-toggle-state', 'close');
|
||||
}
|
||||
};
|
||||
|
||||
for (let i = 0; i < toggleHeadingElements.length; i++) {
|
||||
toggleHeadingElements[i].addEventListener('click', toggleFn, false);
|
||||
}
|
||||
}
|
||||
|
||||
function copyUrlToClipboard(parentElement){
|
||||
let parent = document.querySelector(`.${parentElement}`)
|
||||
let alert = parent.querySelector('.clipboard-alert');
|
||||
|
||||
parent.querySelector('.clipboard-link').addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
alert.style.display = "block";
|
||||
|
||||
setTimeout(function () {
|
||||
alert.style.display = "none";
|
||||
}, 3000);
|
||||
})
|
||||
}
|
||||
396
newspaper/assets/js/post-content.js
Normal file
396
newspaper/assets/js/post-content.js
Normal file
@ -0,0 +1,396 @@
|
||||
/* IMAGE GALLERY */
|
||||
|
||||
(function() {
|
||||
const images = document.querySelectorAll('.kg-gallery-image img');
|
||||
images.forEach(function (image) {
|
||||
const container = image.closest('.kg-gallery-image');
|
||||
const width = image.attributes.width.value;
|
||||
const height = image.attributes.height.value;
|
||||
const ratio = width / height;
|
||||
container.style.flex = ratio + ' 1 0%';
|
||||
})
|
||||
})();
|
||||
|
||||
/* VIDEO CARD */
|
||||
|
||||
(function() {
|
||||
const handleVideoPlayer = function (videoElementContainer) {
|
||||
const videoPlayer = videoElementContainer.querySelector('.kg-video-player');
|
||||
const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player-container');
|
||||
const playIconContainer = videoElementContainer.querySelector('.kg-video-play-icon');
|
||||
const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon');
|
||||
const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider');
|
||||
const playbackRateContainer = videoElementContainer.querySelector('.kg-video-playback-rate');
|
||||
const muteIconContainer = videoElementContainer.querySelector('.kg-video-mute-icon');
|
||||
const unmuteIconContainer = videoElementContainer.querySelector('.kg-video-unmute-icon');
|
||||
const volumeSlider = videoElementContainer.querySelector('.kg-video-volume-slider');
|
||||
const videoEl = videoElementContainer.querySelector('video');
|
||||
const durationContainer = videoElementContainer.querySelector('.kg-video-duration');
|
||||
const currentTimeContainer = videoElementContainer.querySelector('.kg-video-current-time');
|
||||
const largePlayIcon = videoElementContainer.querySelector('.kg-video-large-play-icon');
|
||||
const videoOverlay = videoElementContainer.querySelector('.kg-video-overlay');
|
||||
let playbackRates = [{
|
||||
rate: 0.75,
|
||||
label: '0.7×'
|
||||
}, {
|
||||
rate: 1.0,
|
||||
label: '1×'
|
||||
}, {
|
||||
rate: 1.25,
|
||||
label: '1.2×'
|
||||
}, {
|
||||
rate: 1.75,
|
||||
label: '1.7×'
|
||||
}, {
|
||||
rate: 2.0,
|
||||
label: '2×'
|
||||
}];
|
||||
|
||||
let raf = null;
|
||||
let currentPlaybackRateIdx = 1;
|
||||
if (!!videoEl.loop) {
|
||||
largePlayIcon.classList.add("kg-video-hide-animated");
|
||||
videoOverlay.classList.add("kg-video-hide-animated");
|
||||
}
|
||||
const whilePlaying = () => {
|
||||
seekSlider.value = Math.floor(videoEl.currentTime);
|
||||
currentTimeContainer.textContent = calculateTime(seekSlider.value);
|
||||
videoPlayer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
|
||||
raf = requestAnimationFrame(whilePlaying);
|
||||
}
|
||||
|
||||
const showRangeProgress = (rangeInput) => {
|
||||
if (rangeInput === seekSlider) {
|
||||
videoPlayer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
|
||||
}
|
||||
else {
|
||||
videoPlayer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
|
||||
}
|
||||
}
|
||||
|
||||
const calculateTime = (secs) => {
|
||||
const minutes = Math.floor(secs / 60);
|
||||
const seconds = Math.floor(secs % 60);
|
||||
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
|
||||
return `${minutes}:${returnedSeconds}`;
|
||||
}
|
||||
|
||||
const displayDuration = () => {
|
||||
durationContainer.textContent = calculateTime(videoEl.duration);
|
||||
}
|
||||
|
||||
const setSliderMax = () => {
|
||||
seekSlider.max = Math.floor(videoEl.duration);
|
||||
}
|
||||
|
||||
const displayBufferedAmount = () => {
|
||||
if (videoEl.buffered.length > 0) {
|
||||
const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1));
|
||||
videoPlayer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
|
||||
}
|
||||
}
|
||||
|
||||
if (videoEl.readyState > 0) {
|
||||
displayDuration();
|
||||
setSliderMax();
|
||||
displayBufferedAmount();
|
||||
if (videoEl.autoplay) {
|
||||
raf = requestAnimationFrame(whilePlaying);
|
||||
playIconContainer.classList.add("kg-video-hide");
|
||||
pauseIconContainer.classList.remove("kg-video-hide");
|
||||
}
|
||||
if (videoEl.muted) {
|
||||
unmuteIconContainer.classList.add("kg-video-hide");
|
||||
muteIconContainer.classList.remove("kg-video-hide");
|
||||
}
|
||||
} else {
|
||||
videoEl.addEventListener('loadedmetadata', () => {
|
||||
displayDuration();
|
||||
setSliderMax();
|
||||
displayBufferedAmount();
|
||||
if (videoEl.autoplay) {
|
||||
raf = requestAnimationFrame(whilePlaying);
|
||||
playIconContainer.classList.add("kg-video-hide");
|
||||
pauseIconContainer.classList.remove("kg-video-hide");
|
||||
}
|
||||
if (videoEl.muted) {
|
||||
unmuteIconContainer.classList.add("kg-video-hide");
|
||||
muteIconContainer.classList.remove("kg-video-hide");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
videoElementContainer.onmouseover = () => {
|
||||
if (!videoEl.loop) {
|
||||
videoPlayerContainer.classList.remove("kg-video-hide-animated");
|
||||
}
|
||||
}
|
||||
|
||||
videoElementContainer.onmouseleave = () => {
|
||||
const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
|
||||
if (isPlaying) {
|
||||
videoPlayerContainer.classList.add("kg-video-hide-animated");
|
||||
}
|
||||
}
|
||||
|
||||
videoElementContainer.addEventListener('click', () => {
|
||||
if (!videoEl.loop) {
|
||||
const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
|
||||
if (isPlaying) {
|
||||
handleOnPause();
|
||||
} else {
|
||||
handleOnPlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.onplay = () => {
|
||||
largePlayIcon.classList.add("kg-video-hide-animated");
|
||||
videoOverlay.classList.add("kg-video-hide-animated");
|
||||
playIconContainer.classList.add("kg-video-hide");
|
||||
pauseIconContainer.classList.remove("kg-video-hide");
|
||||
};
|
||||
|
||||
const handleOnPlay = () => {
|
||||
largePlayIcon.classList.add("kg-video-hide-animated");
|
||||
videoOverlay.classList.add("kg-video-hide-animated");
|
||||
playIconContainer.classList.add("kg-video-hide");
|
||||
pauseIconContainer.classList.remove("kg-video-hide");
|
||||
videoEl.play();
|
||||
raf = requestAnimationFrame(whilePlaying);
|
||||
}
|
||||
|
||||
const handleOnPause = () => {
|
||||
pauseIconContainer.classList.add("kg-video-hide");
|
||||
playIconContainer.classList.remove("kg-video-hide");
|
||||
videoEl.pause();
|
||||
cancelAnimationFrame(raf);
|
||||
}
|
||||
|
||||
largePlayIcon.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
handleOnPlay();
|
||||
});
|
||||
|
||||
playIconContainer.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
handleOnPlay();
|
||||
});
|
||||
|
||||
pauseIconContainer.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
handleOnPause();
|
||||
});
|
||||
|
||||
muteIconContainer.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
muteIconContainer.classList.add("kg-video-hide");
|
||||
unmuteIconContainer.classList.remove("kg-video-hide");
|
||||
videoEl.muted = false;
|
||||
});
|
||||
|
||||
unmuteIconContainer.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
unmuteIconContainer.classList.add("kg-video-hide");
|
||||
muteIconContainer.classList.remove("kg-video-hide");
|
||||
videoEl.muted = true;
|
||||
});
|
||||
|
||||
playbackRateContainer.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
|
||||
currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
|
||||
videoEl.playbackRate = nextPlaybackRate.rate;
|
||||
playbackRateContainer.textContent = nextPlaybackRate.label;
|
||||
});
|
||||
|
||||
videoEl.addEventListener('progress', displayBufferedAmount);
|
||||
|
||||
seekSlider.addEventListener('input', (e) => {
|
||||
e.stopPropagation();
|
||||
showRangeProgress(e.target);
|
||||
currentTimeContainer.textContent = calculateTime(seekSlider.value);
|
||||
if (!videoEl.paused) {
|
||||
cancelAnimationFrame(raf);
|
||||
}
|
||||
});
|
||||
|
||||
seekSlider.addEventListener('change', (event) => {
|
||||
event.stopPropagation();
|
||||
videoEl.currentTime = seekSlider.value;
|
||||
if (!videoEl.paused) {
|
||||
requestAnimationFrame(whilePlaying);
|
||||
}
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
seekSlider.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener('input', (e) => {
|
||||
e.stopPropagation();
|
||||
const value = e.target.value;
|
||||
showRangeProgress(e.target);
|
||||
videoEl.volume = value / 100;
|
||||
});
|
||||
}
|
||||
|
||||
const videoCardElements = document.querySelectorAll('.kg-video-card');
|
||||
|
||||
for (let i = 0; i < videoCardElements.length; i++) {
|
||||
handleVideoPlayer(videoCardElements[i]);
|
||||
}
|
||||
})();
|
||||
|
||||
/* AUDIO CARD */
|
||||
|
||||
(function() {
|
||||
const handleAudioPlayer = function (audioElementContainer) {
|
||||
const audioPlayerContainer = audioElementContainer.querySelector('.kg-audio-player-container');
|
||||
const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
|
||||
const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon');
|
||||
const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
|
||||
const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate');
|
||||
const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon');
|
||||
const unmuteIconContainer = audioElementContainer.querySelector('.kg-audio-unmute-icon');
|
||||
const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider');
|
||||
const audio = audioElementContainer.querySelector('audio');
|
||||
const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
|
||||
const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
|
||||
let playbackRates = [{
|
||||
rate: 0.75,
|
||||
label: '0.7×'
|
||||
}, {
|
||||
rate: 1.0,
|
||||
label: '1×'
|
||||
}, {
|
||||
rate: 1.25,
|
||||
label: '1.2×'
|
||||
}, {
|
||||
rate: 1.75,
|
||||
label: '1.7×'
|
||||
}, {
|
||||
rate: 2.0,
|
||||
label: '2×'
|
||||
}];
|
||||
|
||||
let raf = null;
|
||||
let currentPlaybackRateIdx = 1;
|
||||
|
||||
const whilePlaying = () => {
|
||||
seekSlider.value = Math.floor(audio.currentTime);
|
||||
currentTimeContainer.textContent = calculateTime(seekSlider.value);
|
||||
audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
|
||||
raf = requestAnimationFrame(whilePlaying);
|
||||
}
|
||||
|
||||
const showRangeProgress = (rangeInput) => {
|
||||
if (rangeInput === seekSlider) {
|
||||
audioPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
|
||||
}
|
||||
else {
|
||||
audioPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
|
||||
}
|
||||
}
|
||||
|
||||
const calculateTime = (secs) => {
|
||||
const minutes = Math.floor(secs / 60);
|
||||
const seconds = Math.floor(secs % 60);
|
||||
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
|
||||
return `${minutes}:${returnedSeconds}`;
|
||||
}
|
||||
|
||||
const displayDuration = () => {
|
||||
durationContainer.textContent = calculateTime(audio.duration);
|
||||
}
|
||||
|
||||
const setSliderMax = () => {
|
||||
seekSlider.max = Math.floor(audio.duration);
|
||||
}
|
||||
|
||||
const displayBufferedAmount = () => {
|
||||
if (audio.buffered.length > 0) {
|
||||
const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
|
||||
audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
|
||||
}
|
||||
}
|
||||
|
||||
if (audio.readyState > 0) {
|
||||
displayDuration();
|
||||
setSliderMax();
|
||||
displayBufferedAmount();
|
||||
} else {
|
||||
audio.addEventListener('loadedmetadata', () => {
|
||||
displayDuration();
|
||||
setSliderMax();
|
||||
displayBufferedAmount();
|
||||
});
|
||||
}
|
||||
|
||||
playIconContainer.addEventListener('click', () => {
|
||||
playIconContainer.classList.add("kg-audio-hide");
|
||||
pauseIconContainer.classList.remove("kg-audio-hide");
|
||||
audio.play();
|
||||
requestAnimationFrame(whilePlaying);
|
||||
});
|
||||
|
||||
pauseIconContainer.addEventListener('click', () => {
|
||||
pauseIconContainer.classList.add("kg-audio-hide");
|
||||
playIconContainer.classList.remove("kg-audio-hide");
|
||||
audio.pause();
|
||||
cancelAnimationFrame(raf);
|
||||
});
|
||||
|
||||
muteIconContainer.addEventListener('click', () => {
|
||||
muteIconContainer.classList.add("kg-audio-hide");
|
||||
unmuteIconContainer.classList.remove("kg-audio-hide");
|
||||
audio.muted = false;
|
||||
});
|
||||
|
||||
unmuteIconContainer.addEventListener('click', () => {
|
||||
unmuteIconContainer.classList.add("kg-audio-hide");
|
||||
muteIconContainer.classList.remove("kg-audio-hide");
|
||||
audio.muted = true;
|
||||
});
|
||||
|
||||
playbackRateContainer.addEventListener('click', () => {
|
||||
let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
|
||||
currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
|
||||
audio.playbackRate = nextPlaybackRate.rate;
|
||||
playbackRateContainer.textContent = nextPlaybackRate.label;
|
||||
});
|
||||
|
||||
audio.addEventListener('progress', displayBufferedAmount);
|
||||
|
||||
seekSlider.addEventListener('input', (e) => {
|
||||
showRangeProgress(e.target);
|
||||
currentTimeContainer.textContent = calculateTime(seekSlider.value);
|
||||
if (!audio.paused) {
|
||||
cancelAnimationFrame(raf);
|
||||
}
|
||||
});
|
||||
|
||||
seekSlider.addEventListener('change', () => {
|
||||
audio.currentTime = seekSlider.value;
|
||||
if (!audio.paused) {
|
||||
requestAnimationFrame(whilePlaying);
|
||||
}
|
||||
});
|
||||
|
||||
volumeSlider.addEventListener('input', (e) => {
|
||||
const value = e.target.value;
|
||||
showRangeProgress(e.target);
|
||||
audio.volume = value / 100;
|
||||
});
|
||||
}
|
||||
|
||||
const audioCardElements = document.querySelectorAll('.kg-audio-card');
|
||||
|
||||
for (let i = 0; i < audioCardElements.length; i++) {
|
||||
handleAudioPlayer(audioCardElements[i]);
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user