generated from muhtadeetaron/nextjs-template
initial commit
This commit is contained in:
shafin-r
133
newspaper/README.md
Normal file
133
newspaper/README.md
Normal file
@ -0,0 +1,133 @@
|
||||
# Newspaper
|
||||
|
||||
Newspaper is a Ghost theme merging old-school newspaper charm with sleek modern design. Ideal for news sites, it embodies traditional journalism with a contemporary, engaging user experience.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# General Features
|
||||
|
||||
* Ghost 5.x ready
|
||||
* 7 theme presets ([Old Newspaper Light](https://newspaper.kusa-projects.com/?theme-preset=old-newspaper-light), [Modern Newspaper Light](https://newspaper.kusa-projects.com/?theme-preset=modern-newspaper-light), [Old Newspaper Tinted](https://newspaper.kusa-projects.com/?theme-preset=old-newspaper-tinted), [Elegant Newspaper Light](https://newspaper.kusa-projects.com/?theme-preset=elegant-newspaper-light), [Elegant Newspaper Dark](https://newspaper.kusa-projects.com/?theme-preset=elegant-newspaper-dark), [Old Newspaper Dark](https://newspaper.kusa-projects.com/?theme-preset=old-newspaper-dark), [Modern Newspaper Dark](https://newspaper.kusa-projects.com/?theme-preset=modern-newspaper-dark))
|
||||
* Fully responsive
|
||||
* Page transition animations
|
||||
* Compatible with modern browsers
|
||||
* Regularly updated
|
||||
* Clean layout and professional design
|
||||
* Flexible layout options
|
||||
* Minimal, lightweight and fast
|
||||
* SEO friendly
|
||||
* Extensive documentation
|
||||
* Fast support
|
||||
|
||||
# Theme Pages
|
||||
|
||||
* [Home page](https://newspaper.kusa-projects.com/)
|
||||
* [Tag page (Column)](https://newspaper.kusa-projects.com/tag/politics/)
|
||||
* [Tag page (Simple)](https://newspaper.kusa-projects.com/tag/politics/?tag-layout=simple)
|
||||
* [Custom tags page](https://newspaper.kusa-projects.com/tags/)
|
||||
* [Post page (Narrow)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=narrow&sidebar=false)
|
||||
* [Post page (Wide)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=wide&sidebar=false)
|
||||
* [Post page (Featured Image Left)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=featured-image-left&sidebar=false)
|
||||
* [Post page (Featured Image Right)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=featured-image-right&sidebar=false)
|
||||
* [Post page (Narrow With Sidebar)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=narrow&sidebar=true)
|
||||
* [Post page (Wide With Sidebar)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=wide&sidebar=true)
|
||||
* [Post page (Featured Image Left With Sidebar)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=featured-image-left&sidebar=true)
|
||||
* [Post page (Featured Image Right With Sidebar)](https://newspaper.kusa-projects.com/foreign-relations-diplomatic-talks-with-neighboring-countries/?post-layout=featured-image-right&sidebar=true)
|
||||
* [Post page (Members Only Post)](https://newspaper.kusa-projects.com/innovation-in-the-corporate-world-unveiling-the-latest-business-trends/?post-layout=narrow&sidebar=false)
|
||||
* [Author page (Column)](https://newspaper.kusa-projects.com/author/john-doe/)
|
||||
* [Author page (Image Left)](https://newspaper.kusa-projects.com/author/john-doe/?author-layout=author-image-left)
|
||||
* [Author page (Image Right)](https://newspaper.kusa-projects.com/author/john-doe/?author-layout=author-image-right)
|
||||
* [Author page (Simple)](https://newspaper.kusa-projects.com/author/katarina-smith-demo/)
|
||||
* [Custom authors page](https://newspaper.kusa-projects.com/authors/)
|
||||
* [Custom membership page](https://newspaper.kusa-projects.com/membership/)
|
||||
* [Custom archive page](https://newspaper.kusa-projects.com/archive/)
|
||||
* [Custom contact page](https://newspaper.kusa-projects.com/contact/)
|
||||
* [Custom FAQ page](https://newspaper.kusa-projects.com/faq/)
|
||||
* [Custom sign-in page](https://newspaper.kusa-projects.com/signin/)
|
||||
* [Custom sign-up page](https://newspaper.kusa-projects.com/signup/)
|
||||
* [Custom subscribe page](https://newspaper.kusa-projects.com/subscribe/)
|
||||
* [Custom account page (All Data)](https://newspaper.kusa-projects.com/demo-account/)
|
||||
* [Custom account page (All Data No Button)](https://newspaper.kusa-projects.com/demo-account/?no-subscribe-button=true)
|
||||
* [Custom account page (Simple)](https://newspaper.kusa-projects.com/demo-account/?account-layout=simple)
|
||||
* [Custom account page (Simple No Button)](https://newspaper.kusa-projects.com/demo-account/?account-layout=simple&no-subscribe-button=true)
|
||||
* [Custom 404 page](https://newspaper.kusa-projects.com/404/)
|
||||
|
||||
# Other Features
|
||||
|
||||
* Translation ready (English included)
|
||||
* Custom setting for background color
|
||||
* Custom setting for text color
|
||||
* Content that scales with device width
|
||||
* Scale factor for devices larger than 1920px
|
||||
* Custom setting for primary, secondary, tertiary and quartary fonts (Google Fonts)
|
||||
* Custom setting for pages (All Custom Pages, Only Account Pages or None)
|
||||
* Custom setting for Social Urls (Facebook, Twitter/X, Instagram, Linkedin, Pinterest)
|
||||
* Different Announcement bar types (Moving Several News, Moving One News, Static or Normal)
|
||||
* Different Heading Styles (Uppercase, Lowercase, Caapitalize or none)
|
||||
* Custom Setting for Image style (Normal, Grayscale or Tinted)
|
||||
* Custom setting for Initials
|
||||
* Newsletter in latest posts section and post sidebar
|
||||
* Custom setting for Featured tags sections on home page
|
||||
* 2 Tag page layouts (Column or Simple)
|
||||
* 4 Author page layouts (Column, Author Image Left, Author Image Right or Simple)
|
||||
* 4 Account page layouts (All Data Layout, All Data Layout No Button, Simple Layout or Simple Layout No Button)
|
||||
* Lazy loading images animation
|
||||
* Logo Scale
|
||||
* Publication title, description, icon and logo
|
||||
* Custom navigation menu with animations that supports level 2 links
|
||||
* Default Ghost search
|
||||
* Posts and tags are lazy loaded
|
||||
* Latest posts section on home page
|
||||
* Custom featured posts on home page
|
||||
* Grid with posts, authors and tags
|
||||
* Posts with truncated excerpt
|
||||
* Animated Footer that supports level 2 links
|
||||
* Newsletter input in the Footer
|
||||
* Social links in Footer and Navbar (Facebook, Twitter/X, Linkedin, Instagram, Pinterest)
|
||||
* 4 post layouts (Wide, Narrow, Featured Image Left or Featured Image Right)
|
||||
* Custom setting for Sidebar on post page
|
||||
* Custom setting for Sidebar content (Featured Articles or Table of Contents)
|
||||
* Custom setting for Sidebar position (Left or Right)
|
||||
* Multiple authors with reading time and date
|
||||
* Responsive images (full-width, regular, narrow, image with link, image from Unsplash) with captions
|
||||
* Image gallery
|
||||
* Image zoom in post view
|
||||
* Styled texts: Headings (h1 - h6), bold text, italized text, links
|
||||
* Styled unordered and ordered lists, 2 quote types, responsive tables, custom divider
|
||||
* Custom bookmark, button (CTA), callout, product card, file card, upload card, video card (Youtube, Vimeo, Custom), signup card
|
||||
* Responsive video (full-width, regular or narrow)
|
||||
* Responsive header cards
|
||||
* Supports Spotify, Twitter, Soundcloud and Codepen embeds
|
||||
* Custom Toggle card
|
||||
* Share links on post page (Facebook, Twitter, Linkedin, URL)
|
||||
* Comments section with custom styles
|
||||
* Custom next or previous post section at the end of post page
|
||||
* Author page with author image, name, bio, location, socials (Facebook, Twitter, personal website) and posts
|
||||
* Membership page with custom heading, tab section for membership tiers (yearly nad monthly)
|
||||
* Custom currencies
|
||||
* Contact page with heading and description, [Formspree](https://formspree.io/) form
|
||||
* Custom FAQ page with toggle cards
|
||||
* Custom signin, signup and subsribe pages
|
||||
* Custom account page with account details
|
||||
* Custom archive page with filtered posts by tag name
|
||||
* Custom 404 page with home page link
|
||||
|
||||
# Documentation
|
||||
|
||||
To access the documentation, please visit the following link: [Documentation](https://www.kusa-projects.com/newspaper-documentation)
|
||||
|
||||
# Support
|
||||
|
||||
To contact us, please use the following link: [Contact](https://www.kusa-projects.com/contact) or send us a message on e-mail `kusaprojects.agency@gmail.com`
|
||||
|
||||
# Copyright & License
|
||||
|
||||
The Newspaper theme is licensed for a single-use per purchase. Each theme license allows you to use the theme for one website or web page. If you wish to use the theme for multiple websites or web pages, you will need to purchase additional licenses accordingly. Redistribution, reselling, or sublicensing of the theme is strictly prohibited.
|
||||
|
||||
|
||||
|
||||
|
||||
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]);
|
||||
}
|
||||
})();
|
||||
182
newspaper/author.hbs
Normal file
182
newspaper/author.hbs
Normal file
@ -0,0 +1,182 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/column-layout.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/author.css"}}" />
|
||||
|
||||
<main class="main">
|
||||
{{#author}}
|
||||
{{#match slug "katarina-smith-demo"}}
|
||||
{{> "components/simple-author-hero"}}
|
||||
{{else}}
|
||||
{{#unless profile_image}}
|
||||
{{> "components/simple-author-hero"}}
|
||||
{{else}}
|
||||
{{^match @custom.author_page_layout "Simple"}}
|
||||
<section class="column-layout{{#match @custom.author_page_layout "Author Image Left"}} author-image-layout{{/match}}{{#match @custom.author_page_layout "Author Image Right"}} author-image-layout author-image-right{{/match}}">
|
||||
<div class="column-layout-grid">
|
||||
<div class="left-column">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{name}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{bio}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="author-mobile-image" class="small-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url profile_image size="s" format="webp"}} 320w,
|
||||
{{img_url profile_image size="xm" format="webp"}} 440w,
|
||||
{{img_url profile_image size="m" format="webp"}} 600w,
|
||||
{{img_url profile_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url profile_image size="m"}}"
|
||||
alt="{{name}}"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{{#if location}}
|
||||
<div class="section-heading author-row">
|
||||
<span>
|
||||
{{t "Location"}}
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{{location}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="number-of-articles" class="section-heading author-row">
|
||||
<span>
|
||||
{{t "Number of Articles"}}
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{{#get "posts" filter="authors:{{slug}}+id:-{{id}}" limit="all"}}
|
||||
{{pagination.total}}
|
||||
{{/get}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="author-socials" class="section-heading author-row">
|
||||
<span>
|
||||
{{t "Socials"}}
|
||||
</span>
|
||||
|
||||
<div class="socials">
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" class="social" aria-label="Website URL">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/link-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-column author-center-column">
|
||||
<div class="big-card-image-link big-card-author-image hover-image-opacity">
|
||||
<figure class="big-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url profile_image size="s" format="webp"}} 320w,
|
||||
{{img_url profile_image size="xm" format="webp"}} 440w,
|
||||
{{img_url profile_image size="m" format="webp"}} 600w,
|
||||
{{img_url profile_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url profile_image size="m"}}"
|
||||
alt="{{name}}"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="author-sidebar" class="right-column">
|
||||
{{#get "authors" include="count.posts" filter="slug:-{{slug}}" limit="2"}}
|
||||
{{#if authors}}
|
||||
<div id="other-authors">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Other Authors"}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#foreach authors}}
|
||||
{{> "components/extra-small-side-card" feature_image=profile_image }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
|
||||
<div id="latest-work">
|
||||
<div class="section-heading">
|
||||
<span class="latest-work-author-name">
|
||||
{{name}}{{t "'s Latest Work"}}
|
||||
</span>
|
||||
</div>
|
||||
{{#get "posts" filter="authors:{{slug}}" limit="2"}}
|
||||
{{#foreach posts}}
|
||||
{{> "components/extra-small-side-card" isPost=true name=title}}
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{else}}
|
||||
{{> "components/simple-author-hero"}}
|
||||
{{/match}}
|
||||
{{/unless}}
|
||||
{{/match}}
|
||||
{{/author}}
|
||||
|
||||
<section class="author-work-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span class="section-heading-title">
|
||||
{{#author}}{{name}}{{/author}}{{t "'s Work"}}
|
||||
</span>
|
||||
|
||||
<span class="section-heading-article-number">
|
||||
{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="pagination-grid" class="grid pagination-grid">
|
||||
{{#foreach posts}}
|
||||
{{> "components/small-card" isForGrid=true }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{pagination}}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
if(!document.querySelector('#author-socials .social')){
|
||||
document.querySelector('#author-socials')?.remove();
|
||||
}
|
||||
</script>
|
||||
111
newspaper/default.hbs
Normal file
111
newspaper/default.hbs
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{@site.locale}}" data-image-style="{{@custom.image_style}}">
|
||||
<head>
|
||||
<title>{{meta_title}}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/global.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/notifications.css"}}" />
|
||||
|
||||
<script src="{{asset "js/global.js"}}"></script>
|
||||
<script src="{{asset "js/custom-elements.js"}}"></script>
|
||||
<script>
|
||||
hexToRgba("{{@custom.text_color}}")
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
lazyLoadImages();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--text-color: {{@custom.text_color}};
|
||||
--background-color: {{@custom.background_color}};
|
||||
--logo-scale: {{@custom.logo_scale}};
|
||||
--heading-style: {{@custom.card_heading_style}};
|
||||
--font1: var(--gh-font-body, 'Open Sans');
|
||||
--font2: var(--gh-font-heading, 'EB Garamond');
|
||||
--font3: var(--gh-font-heading, 'Roboto Condensed');
|
||||
--font4: var(--gh-font-heading, 'Chomsky');
|
||||
}
|
||||
</style>
|
||||
|
||||
{{!-- Demo content --}}
|
||||
{{#match @site.url "http://localhost:2368"}}
|
||||
<style>
|
||||
@media (min-width: 991px) {
|
||||
article,
|
||||
.main {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{/match}}
|
||||
|
||||
{{#match @site.url "https://newspaper.kusa-projects.com"}}
|
||||
<style>
|
||||
@media (min-width: 991px) {
|
||||
article,
|
||||
.main {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{/match}}
|
||||
|
||||
{{#match @custom.image_style "Tinted"}}
|
||||
<style>
|
||||
:root {
|
||||
--image-filter: grayscale(1) sepia(0.35) contrast(0.85);
|
||||
}
|
||||
</style>
|
||||
{{/match}}
|
||||
|
||||
{{#match @custom.image_style "Grayscale"}}
|
||||
<style>
|
||||
:root {
|
||||
--image-filter: grayscale(1);
|
||||
}
|
||||
</style>
|
||||
{{/match}}
|
||||
|
||||
{{!-- Always last --}}
|
||||
{{ghost_head}}
|
||||
|
||||
<script>
|
||||
loadFonts("{{@custom.fonts}}");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport">
|
||||
<div class="site-content">
|
||||
<div class="site-main">
|
||||
{{> "components/navbar" }}
|
||||
{{> "components/announcement-bar"}}
|
||||
{{{body}}}
|
||||
{{> "components/footer" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> "components/notifications"}}
|
||||
|
||||
{{!-- Demo content --}}
|
||||
{{#match @site.url "http://localhost:2368"}}
|
||||
{{> "components/demo"}}
|
||||
{{/match}}
|
||||
|
||||
{{#match @site.url "https://newspaper.kusa-projects.com"}}
|
||||
{{> "components/demo"}}
|
||||
{{/match}}
|
||||
|
||||
{{!-- Always last --}}
|
||||
{{ghost_foot}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
newspaper/error-404.hbs
Normal file
5
newspaper/error-404.hbs
Normal file
@ -0,0 +1,5 @@
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
{{> "components/form-hero" title=(t "404") excerpt=(t "The page you are looking for doesn't exist or has been moved.") type="404" }}
|
||||
</main>
|
||||
133
newspaper/index.hbs
Normal file
133
newspaper/index.hbs
Normal file
@ -0,0 +1,133 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/column-layout.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
|
||||
<main class="homepage">
|
||||
<section class="column-layout{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} homepage-newsletter{{/unless}}{{/unless}}{{/if}}{{/if}}">
|
||||
<div class="column-layout-grid">
|
||||
<div class="left-column">
|
||||
{{#foreach posts from="1" to="8"}}
|
||||
{{> "components/small-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
<div class="center-column">
|
||||
<div class="big-card-desktop">
|
||||
{{#foreach posts limit="1"}}
|
||||
{{> "components/big-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{> "components/newsletter"}}
|
||||
|
||||
<div class="horizontal-cards">
|
||||
{{#foreach posts from="2" to="8"}}
|
||||
{{> "components/horizontal-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#get "posts" filter="featured:true" include="tags" limit="8"}}
|
||||
{{#if posts}}
|
||||
<div class="right-column">
|
||||
<div class="section-heading-slider">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Featured Articles"}}
|
||||
</span>
|
||||
|
||||
<span class="mobile-heading-span">
|
||||
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-outer">
|
||||
<div class="slider-inner featured-slider">
|
||||
{{#foreach posts}}
|
||||
{{> "components/extra-small-card" }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if @custom.featured_tags_on_homepage }}
|
||||
<section class="featured-tags-section">
|
||||
<featured-tags data-featured-tags="{{@custom.featured_tags_on_homepage}}">
|
||||
<div class="featured-tags-inner"></div>
|
||||
</featured-tags>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
<section class="articles-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span id="data-length" data-length="{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}">
|
||||
{{t "Latest Articles"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
|
||||
<div id="pagination-grid" class="grid pagination-grid">
|
||||
{{#foreach posts}}
|
||||
{{> "components/small-card" isForGrid=true }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{pagination}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#get "tags" limit="6" include="count.posts"}}
|
||||
{{#if tags}}
|
||||
<section class="footer-slider">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Popular Tags"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/tags/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural tags.length empty=(t "No Tags") singular=(t "1 Tag") plural=(t "% Tags")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach tags}}
|
||||
{{> "components/slide-card" title=name }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</main>
|
||||
96
newspaper/locales/en.json
Normal file
96
newspaper/locales/en.json
Normal file
@ -0,0 +1,96 @@
|
||||
{
|
||||
"Search": "Search",
|
||||
"Sign in": "Sign in",
|
||||
"Account": "Account",
|
||||
"Subscribe": "Subscribe",
|
||||
"Announcement": "Announcement",
|
||||
"Subscribe to our newsletter": "Subscribe to our newsletter",
|
||||
"Get all the latest news delivered straight to your inbox.": "Get all the latest news delivered straight to your inbox.",
|
||||
"Your.email@example.com": "Your.email@example.com",
|
||||
"Processing your request...": "Processing your request...",
|
||||
"Please check your inbox and click the link to confirm your subscription.": "Please check your inbox and click the link to confirm your subscription.",
|
||||
"No spam. Unsubscribe anytime.": "No spam. Unsubscribe anytime.",
|
||||
"Featured Articles": "Featured Articles",
|
||||
"Latest Articles": "Latest Articles",
|
||||
"View All": "View All",
|
||||
"Load more": "Load more",
|
||||
"No Articles": "No Articles",
|
||||
"1 Article": "1 Article",
|
||||
"% Articles": "% Articles",
|
||||
"No Tags": "No Tags",
|
||||
"1 Tag": "1 Tag",
|
||||
"% Tags": "% Tags",
|
||||
"Popular Tags": "Popular Tags",
|
||||
"Navigation": "Navigation",
|
||||
"Published with": "Published with",
|
||||
"Your link has expired. Please request a new one.": "Your link has expired. Please request a new one.",
|
||||
"Great! You've successfully signed up.": "Great! You've successfully signed up.",
|
||||
"Welcome back! You've successfully signed in.": "Welcome back! You've successfully signed in.",
|
||||
"Success! You now have access to additional content.": "Success! You now have access to additional content.",
|
||||
"Other Tags": "Other Tags",
|
||||
"Browse by Tags": "Browse by Tags",
|
||||
"All Tags": "All Tags",
|
||||
"All Articles": "All Articles",
|
||||
"No Authors": "No Authors",
|
||||
"1 Author": "1 Author",
|
||||
"% Authors": "% Authors",
|
||||
"Meet the Authors": "Meet the Authors",
|
||||
"Location": "Location",
|
||||
"Number of Articles": "Number of Articles",
|
||||
"Socials": "Socials",
|
||||
"Other Authors": "Other Authors",
|
||||
"'s Latest Work": "'s Latest Work",
|
||||
"'s Work": "'s Work",
|
||||
"Facebook": "Facebook",
|
||||
"Twitter/X": "Twitter/X",
|
||||
"Website": "Website",
|
||||
"1 min read": "1 min read",
|
||||
"% min read": "% min read",
|
||||
"Related Articles": "Related Articles",
|
||||
"Table of Contents": "Table of Contents",
|
||||
"The link has been copied!": "The link has been copied!",
|
||||
"Share this article": "Share this article",
|
||||
"Members Discussion": "Members Discussion",
|
||||
"No Comments": "No Comments",
|
||||
"Comment": "Comment",
|
||||
"Comments": "Comments",
|
||||
"Previous Article": "Previous Article",
|
||||
"Next Article": "Next Article",
|
||||
"This post is for paying subscribers only": "This post is for paying subscribers only",
|
||||
"This post is for subscribers only": "This post is for subscribers only",
|
||||
"This post is for subscribers on the": "This post is for subscribers on the",
|
||||
"only.": "only.",
|
||||
"Subscribe now and have access to all our stories, enjoy exclusive content and stay up to date with constant updates.": "Subscribe now and have access to all our stories, enjoy exclusive content and stay up to date with constant updates.",
|
||||
"Upgrade your account": "Upgrade your account",
|
||||
"Subscribe now": "Subscribe now",
|
||||
"Already a member?": "Already a member?",
|
||||
"Monthly": "Monthly",
|
||||
"Yearly": "Yearly",
|
||||
"year": "year",
|
||||
"month": "month",
|
||||
"Subscribers Only Articles": "Subscribers Only Articles",
|
||||
"Your Account": "Your Account",
|
||||
"You currently have a free membership, upgrade to a paid subscription for full access.": "You currently have a free membership, upgrade to a paid subscription for full access.",
|
||||
"You currently have a paid membership, you can find more details in your account settings.": "You currently have a paid membership, you can find more details in your account settings.",
|
||||
"Sign out": "Sign out",
|
||||
"Account settings": "Account settings",
|
||||
"Full Name": "Full Name",
|
||||
"Email": "Email",
|
||||
"Current Plan": "Current Plan",
|
||||
"Card": "Card",
|
||||
"Billing Date": "Billing Date",
|
||||
"Expires": "Expires",
|
||||
"Your email address": "Your email address",
|
||||
"Continue": "Continue",
|
||||
"Don't have an account yet?": "Don't have an account yet?",
|
||||
"Already have an account?": "Already have an account?",
|
||||
"Sign up": "Sign up",
|
||||
"Back to homepage": "Back to homepage",
|
||||
"Please check your inbox and click the link to confirm your signup.": "Please check your inbox and click the link to confirm your signup.",
|
||||
"Please check your inbox and click the link to complete signin.": "Please check your inbox and click the link to complete signin.",
|
||||
"Your name": "Your name",
|
||||
"Your message": "Your message",
|
||||
"Send message": "Send message",
|
||||
"404": "404",
|
||||
"The page you are looking for doesn't exist or has been moved.": "The page you are looking for doesn't exist or has been moved."
|
||||
}
|
||||
236
newspaper/package.json
Normal file
236
newspaper/package.json
Normal file
@ -0,0 +1,236 @@
|
||||
{
|
||||
"name": "newspaper",
|
||||
"description": "Newspaper is a Ghost theme merging old-school newspaper charm with sleek modern design. Ideal for news sites, it embodies traditional journalism with a contemporary, engaging user experience.",
|
||||
"demo": "https://newspaper.kusa-projects.com/",
|
||||
"version": "1.1.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"ghost": ">=5.0.0"
|
||||
},
|
||||
"author": {
|
||||
"name": "KUSA Projects",
|
||||
"email": "kusaprojects.agency@gmail.com",
|
||||
"url": "https://www.kusa-projects.com/"
|
||||
},
|
||||
"gpm": {
|
||||
"type": "theme",
|
||||
"categories": [
|
||||
"News"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"ghost",
|
||||
"theme",
|
||||
"ghost-theme"
|
||||
],
|
||||
"docs": "https://www.kusa-projects.com/newspaper-documentation",
|
||||
"config": {
|
||||
"posts_per_page": 8,
|
||||
"image_sizes": {
|
||||
"xxs": {
|
||||
"width": 100
|
||||
},
|
||||
"xs": {
|
||||
"width": 150
|
||||
},
|
||||
"s": {
|
||||
"width": 320
|
||||
},
|
||||
"xm": {
|
||||
"width": 440
|
||||
},
|
||||
"m": {
|
||||
"width": 600
|
||||
},
|
||||
"l": {
|
||||
"width": 960
|
||||
},
|
||||
"xl": {
|
||||
"width": 1200
|
||||
},
|
||||
"xxl": {
|
||||
"width": 2000
|
||||
}
|
||||
},
|
||||
"card_assets": {
|
||||
"exclude": [
|
||||
"toggle",
|
||||
"button",
|
||||
"header",
|
||||
"blockquote",
|
||||
"audio",
|
||||
"bookmark",
|
||||
"callout",
|
||||
"file",
|
||||
"gallery",
|
||||
"product",
|
||||
"signup"
|
||||
]
|
||||
},
|
||||
"custom": {
|
||||
"background_color": {
|
||||
"type": "color",
|
||||
"default": "#F6F6F6"
|
||||
},
|
||||
"text_color": {
|
||||
"type": "color",
|
||||
"default": "#222222"
|
||||
},
|
||||
"fonts": {
|
||||
"type": "text",
|
||||
"default": "Open Sans, EB Garamond, Roboto Condensed",
|
||||
"description": "This setting allows you to add 4 different Google Fonts and only applies if the Heading font and Body font are not specified in the brand settings. Instructions in our docs."
|
||||
},
|
||||
"use_custom_pages": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"All Custom Pages",
|
||||
"Only Account Pages",
|
||||
"None"
|
||||
],
|
||||
"default": "All Custom Pages"
|
||||
},
|
||||
"social_urls": {
|
||||
"type": "text",
|
||||
"default": "instagram: https://www.google.com/, linkedin: https://www.google.com/, pinterest: https://www.google.com/",
|
||||
"description": "This setting allows you to add Instagram, Linkedin and Pinterest URLs. Instructions in our docs."
|
||||
},
|
||||
"logo_scale": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"0.2",
|
||||
"0.4",
|
||||
"0.6",
|
||||
"0.8",
|
||||
"1",
|
||||
"1.2",
|
||||
"1.4",
|
||||
"1.6",
|
||||
"1.8",
|
||||
"2",
|
||||
"2.4",
|
||||
"2.8",
|
||||
"3.2",
|
||||
"3.6",
|
||||
"4"
|
||||
],
|
||||
"default": "1"
|
||||
},
|
||||
"announcement_bar_type": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Normal",
|
||||
"Moving Several News",
|
||||
"Moving One News",
|
||||
"Static"
|
||||
],
|
||||
"default": "Moving Several News"
|
||||
},
|
||||
"card_heading_style": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"uppercase",
|
||||
"capitalize",
|
||||
"lowercase",
|
||||
"none"
|
||||
],
|
||||
"default": "uppercase"
|
||||
},
|
||||
"image_style": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Normal",
|
||||
"Grayscale",
|
||||
"Tinted"
|
||||
],
|
||||
"default": "Normal"
|
||||
},
|
||||
"use_initials": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"use_newsletter_on_homepage_and_post_sidebar": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"featured_tags_on_homepage": {
|
||||
"type": "text",
|
||||
"default": "",
|
||||
"description": "Please use tag slugs separated by comma. Example: politics, business"
|
||||
},
|
||||
"tag_page_layout": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Column",
|
||||
"Simple"
|
||||
],
|
||||
"default": "Column"
|
||||
},
|
||||
"author_page_layout": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Column",
|
||||
"Author Image Left",
|
||||
"Author Image Right",
|
||||
"Simple"
|
||||
],
|
||||
"default": "Column"
|
||||
},
|
||||
"account_page_layout": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"All Data Layout",
|
||||
"All Data Layout No Subscribe Button",
|
||||
"Simple Layout",
|
||||
"Simple Layout No Subscribe Button"
|
||||
],
|
||||
"default": "All Data Layout"
|
||||
},
|
||||
"formspree_hash_id": {
|
||||
"type": "text",
|
||||
"default": "xxxxxxxx"
|
||||
},
|
||||
"post_header_type": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Wide",
|
||||
"Narrow",
|
||||
"Featured Image Left",
|
||||
"Featured Image Right"
|
||||
],
|
||||
"default": "Narrow",
|
||||
"group": "post"
|
||||
},
|
||||
"use_sidebar": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"group": "post"
|
||||
},
|
||||
"sidebar_content": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Featured Articles",
|
||||
"Table Of Contents"
|
||||
],
|
||||
"default": "Featured Articles",
|
||||
"group": "post",
|
||||
"visibility": "use_sidebar:true"
|
||||
},
|
||||
"sidebar_position": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
"Left",
|
||||
"Right"
|
||||
],
|
||||
"default": "Right",
|
||||
"group": "post",
|
||||
"visibility": "use_sidebar:true+post_header_type:[Wide, Narrow]"
|
||||
}
|
||||
}
|
||||
},
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-zip": "^6.0.0"
|
||||
}
|
||||
}
|
||||
70
newspaper/page-account.hbs
Normal file
70
newspaper/page-account.hbs
Normal file
@ -0,0 +1,70 @@
|
||||
{{#unless @member}}
|
||||
<script>
|
||||
window.location.href = '{{@site.url}}/signin/';
|
||||
</script>
|
||||
{{/unless}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/account.css"}}"/>
|
||||
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
<div class="wide-container">
|
||||
<section class="full-page-section">
|
||||
<div class="account-info-container">
|
||||
<h1 class="text-card-heading">
|
||||
{{#if @member.name}}
|
||||
{{@member.name}}
|
||||
{{else}}
|
||||
{{t "Your Account"}}
|
||||
{{/if}}
|
||||
</h1>
|
||||
|
||||
<p class="account-paragraph-info">
|
||||
{{#if @member.paid}}
|
||||
{{t "You currently have a paid membership, you can find more details in your account settings."}}
|
||||
{{else}}
|
||||
{{t "You currently have a free membership, upgrade to a paid subscription for full access."}}
|
||||
{{/if}}
|
||||
</p>
|
||||
|
||||
{{#match @custom.account_page_layout "All Data Layout"}}
|
||||
{{> "components/account-data"}}
|
||||
{{/match}}
|
||||
|
||||
{{#match @custom.account_page_layout "All Data Layout No Subscribe Button"}}
|
||||
{{> "components/account-data"}}
|
||||
{{/match}}
|
||||
|
||||
<div class="account-buttons-wrapper">
|
||||
{{#match @custom.account_page_layout "All Data Layout"}}
|
||||
{{#unless @member.paid}}
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account/plans"{{else}}href="{{@site.url}}/membership/"{{/match}} class="button account-button account-subscribe-button">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
{{/unless}}
|
||||
{{/match}}
|
||||
|
||||
{{#match @custom.account_page_layout "Simple Layout"}}
|
||||
{{#unless @member.paid}}
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account/plans"{{else}}href="{{@site.url}}/membership/"{{/match}} class="button account-button account-subscribe-button">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
{{/unless}}
|
||||
{{/match}}
|
||||
|
||||
<a href="javascript:" class="button account-button" data-members-signout>
|
||||
{{t "Sign out"}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a href="javascript:" data-portal="account" class="account-settings-button">
|
||||
<small>
|
||||
{{t "Account settings"}}
|
||||
</small>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
42
newspaper/page-archive.hbs
Normal file
42
newspaper/page-archive.hbs
Normal file
@ -0,0 +1,42 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
<section class="simple-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{title}}</h1>
|
||||
|
||||
{{> "components/archive-tags"}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/post}}
|
||||
|
||||
{{#get "posts" limit=@config.posts_per_page include="tags"}}
|
||||
<section class="archive-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span class="archive-grid-title">
|
||||
{{t "All Tags"}}
|
||||
</span>
|
||||
|
||||
<span class="archive-grid-article-number">
|
||||
{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="pagination-grid" class="grid pagination-grid">
|
||||
{{#foreach posts}}
|
||||
{{> "components/small-card" isForGrid=true }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{pagination is_archivepage=true}}
|
||||
</div>
|
||||
</section>
|
||||
{{/get}}
|
||||
</main>
|
||||
44
newspaper/page-authors.hbs
Normal file
44
newspaper/page-authors.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
<section class="simple-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{title}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/post}}
|
||||
|
||||
{{#get "authors" limit="all" include='count.posts'}}
|
||||
<section class="authors-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span class="archive-grid-title">
|
||||
{{t "Meet the Authors"}}
|
||||
</span>
|
||||
|
||||
<span class="archive-grid-article-number">
|
||||
{{plural pagination.total empty=(t "No Authors") singular=(t "1 Author") plural=(t "% Authors")}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid pagination-grid">
|
||||
{{#foreach authors}}
|
||||
{{> "components/small-card" isForGrid=true isForAuthor=true title=name access=true feature_image=profile_image feature_image_alt=name excerpt=bio}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/get}}
|
||||
</main>
|
||||
7
newspaper/page-contact.hbs
Normal file
7
newspaper/page-contact.hbs
Normal file
@ -0,0 +1,7 @@
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
{{> "components/form-hero" type="contact" }}
|
||||
{{/post}}
|
||||
</main>
|
||||
72
newspaper/page-faq.hbs
Normal file
72
newspaper/page-faq.hbs
Normal file
@ -0,0 +1,72 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/toggle-card.css"}}" />
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
<section class="simple-hero faq-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{title}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="toggle-card-section section-padding-bottom">
|
||||
<div class="narrow-container">
|
||||
{{content}}
|
||||
</div>
|
||||
</section>
|
||||
{{/post}}
|
||||
|
||||
{{#get "posts" limit="6" include="count.posts" filter='visibility:paid'}}
|
||||
{{#if posts}}
|
||||
<section class="footer-slider">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Subscribers Only Articles"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach posts}}
|
||||
{{> "components/slide-card" isPost=true}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setToggle();
|
||||
})
|
||||
</script>
|
||||
98
newspaper/page-membership.hbs
Normal file
98
newspaper/page-membership.hbs
Normal file
@ -0,0 +1,98 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/membership.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
<section class="simple-hero membership-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{title}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/post}}
|
||||
|
||||
<section class="membership-section-outer wide-container section-padding-bottom">
|
||||
{{#get "tiers"}}
|
||||
{{#if tiers}}
|
||||
<custom-membership class="membership-section">
|
||||
<div class="membership-buttons">
|
||||
<button class="button membership-button" data-inactive="true" data-tab="monthly">{{t "Monthly"}}</button>
|
||||
<button class="button membership-button" data-tab="yearly">{{t "Yearly"}}</button>
|
||||
</div>
|
||||
|
||||
<div class="tiers-wrapper">
|
||||
<div class="membership-tiers" data-inactive="true" data-tab-content="monthly">
|
||||
{{#foreach tiers}}
|
||||
{{#if @member}}
|
||||
{{#match type "paid"}}
|
||||
{{> "components/tier-card"}}
|
||||
{{/match}}
|
||||
{{else}}
|
||||
{{> "components/tier-card"}}
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<div class="membership-tiers" data-tab-content="yearly">
|
||||
{{#foreach tiers}}
|
||||
{{#if @member}}
|
||||
{{#match type "paid"}}
|
||||
{{> "components/tier-card" yearly=true}}
|
||||
{{/match}}
|
||||
{{else}}
|
||||
{{> "components/tier-card" yearly=true}}
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</custom-membership>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</section>
|
||||
|
||||
{{#get "posts" limit="6" include="count.posts" filter='visibility:paid'}}
|
||||
{{#if posts}}
|
||||
<section class="footer-slider">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Subscribers Only Articles"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach posts}}
|
||||
{{> "components/slide-card" isPost=true}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</main>
|
||||
7
newspaper/page-signin.hbs
Normal file
7
newspaper/page-signin.hbs
Normal file
@ -0,0 +1,7 @@
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
{{> "components/form-hero" accountPage=true type="signin" hasLink=true }}
|
||||
{{/post}}
|
||||
</main>
|
||||
13
newspaper/page-signup.hbs
Normal file
13
newspaper/page-signup.hbs
Normal file
@ -0,0 +1,13 @@
|
||||
{{#if @site.members_invite_only}}
|
||||
<script>
|
||||
window.location.href = '{{@site.url}}/signin';
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
{{> "components/form-hero" accountPage=true type="signup" hasLink=true }}
|
||||
{{/post}}
|
||||
</main>
|
||||
13
newspaper/page-subscribe.hbs
Normal file
13
newspaper/page-subscribe.hbs
Normal file
@ -0,0 +1,13 @@
|
||||
{{#if @site.members_invite_only}}
|
||||
<script>
|
||||
window.location.href = '{{@site.url}}/signin';
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{!< default}}
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
{{> "components/form-hero" accountPage=true type="subscribe" }}
|
||||
{{/post}}
|
||||
</main>
|
||||
48
newspaper/page-tags.hbs
Normal file
48
newspaper/page-tags.hbs
Normal file
@ -0,0 +1,48 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
|
||||
<main>
|
||||
{{#post}}
|
||||
<section class="simple-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{title}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#get "tags" limit="all" include="count.posts"}}
|
||||
{{#if tags}}
|
||||
<section class="tags-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span class="section-heading-title">
|
||||
{{t "Browse by Tags"}}
|
||||
</span>
|
||||
|
||||
<span class="section-heading-article-number">
|
||||
{{plural tags.length empty=(t "No Tags") singular=(t "1 Tag") plural=(t "% Tags")}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid pagination-grid tags-grid">
|
||||
{{#foreach tags}}
|
||||
{{> "components/slide-card" title=name }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/post}}
|
||||
</main>
|
||||
12
newspaper/page.hbs
Normal file
12
newspaper/page.hbs
Normal file
@ -0,0 +1,12 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/toggle-card.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-content.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<main>
|
||||
{{> "components/article"}}
|
||||
</main>
|
||||
{{/post}}
|
||||
80
newspaper/partials/components/account-data.hbs
Normal file
80
newspaper/partials/components/account-data.hbs
Normal file
@ -0,0 +1,80 @@
|
||||
{{#unless @member.paid}}
|
||||
<div class="account-data">
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Full Name"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Email"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.email}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
{{#foreach @member.subscriptions}}
|
||||
<div class="account-data">
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Full Name"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Email"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{@member.email}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#if @member.paid}}
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Current Plan"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{price plan}}/{{plan.interval}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{t "Card"}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
**** **** **** {{default_payment_card_last4}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-heading account-data-row">
|
||||
<span class="left-align">
|
||||
{{#if cancel_at_period_end}}{{t "Expires"}}{{else}}{{t "Billing Date"}}{{/if}}
|
||||
</span>
|
||||
|
||||
<span class="right-align">
|
||||
{{date current_period_end}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/foreach}}
|
||||
18
newspaper/partials/components/announcement-bar.hbs
Normal file
18
newspaper/partials/components/announcement-bar.hbs
Normal file
@ -0,0 +1,18 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/announcement-bar.css"}}" />
|
||||
|
||||
<custom-announcement-bar class="custom-announcement-bar wide-container" data-announcement-bar-type="{{@custom.announcement_bar_type}}">
|
||||
<div class="announcement-heading">{{t "Announcement"}}</div>
|
||||
<div class="announcement-content">
|
||||
<div class="announcement-inner">
|
||||
<div class="announcement-text">
|
||||
</div>
|
||||
<div class="announcement-text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-close-wrapper">
|
||||
<button class="announcement-close-button unstyled-button" aria-label="Close Announcement Bar">
|
||||
{{> "icons/close-icon"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</custom-announcement-bar>
|
||||
25
newspaper/partials/components/archive-tags.hbs
Normal file
25
newspaper/partials/components/archive-tags.hbs
Normal file
@ -0,0 +1,25 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/archive-tags.css"}}" />
|
||||
|
||||
<div class="archive-tags-outer">
|
||||
<archive-tags data-current-tag="all-tags">
|
||||
<div class="button archive-tag-button">
|
||||
<input id="all-tags" type="radio" name="archive-tags" data-name="{{t "All Tags"}}" checked>
|
||||
<label class="radio-button-text" for="all-tags">
|
||||
{{t "All Tags"}} ({{#get "posts" limit="all"}}{{posts.length}}{{/get}})
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{#get "tags" include="count.posts" limit="all"}}
|
||||
{{#foreach tags}}
|
||||
<div class="account-buttons-separator archive-tags-separator"></div>
|
||||
|
||||
<div class="button archive-tag-button">
|
||||
<input id="{{slug}}" type="radio" name="archive-tags" data-name="{{name}}">
|
||||
<label class="radio-button-text" for="{{slug}}">
|
||||
{{name}} ({{count.posts}})
|
||||
</label>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</archive-tags>
|
||||
</div>
|
||||
334
newspaper/partials/components/article.hbs
Normal file
334
newspaper/partials/components/article.hbs
Normal file
@ -0,0 +1,334 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isPost: Boolean
|
||||
--}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{!-- Table of Contents --}}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/table-of-contents.css"}}" />
|
||||
{{/if}}
|
||||
|
||||
<article class="{{#unless @custom.use_sidebar}}overflow-hidden{{/unless}}{{#unless isPost}} overflow-hidden{{/unless}}" data-post-header-type="{{@custom.post_header_type}}" data-has-feature-image="{{#if feature_image}}true{{else}}false{{/if}}" data-use-sidebar="{{#if isPost}}{{@custom.use_sidebar}}{{else}}false{{/if}}">
|
||||
{{#match @page.show_title_and_feature_image}}
|
||||
<header class="hero {{#if feature_image}}wide-container{{#match @custom.post_header_type "Featured Image Right"}} vertical-post-header{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} vertical-post-header vertical-post-image-left{{/match}}{{else}}{{#unless @custom.use_sidebar}} narrow-container{{else}} wide-container{{/unless}} no-image-container{{/if}}
|
||||
{{#match @custom.post_header_type "Narrow"}}{{#unless @custom.use_sidebar}} narrow-container{{/unless}}{{/match}}{{#unless isPost}} narrow-container{{/unless}}">
|
||||
<div class="hero-content">
|
||||
<div class="post-hero-text-content section-padding-top">
|
||||
{{#if isPost}}
|
||||
{{#primary_tag}}
|
||||
<a class="post-tag hover-underline" href="{{url}}">{{name}}</a>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
|
||||
<h1 class="post-heading">{{title}}</h1>
|
||||
|
||||
<div class="excerpt-and-authors-wrapper">
|
||||
{{#if custom_excerpt}}
|
||||
<div class="post-excerpt-wrapper{{#unless isPost}}{{#unless feature_image}} full-width-post-excerpt-wrapper{{/unless}}{{/unless}}">
|
||||
<p>
|
||||
{{custom_excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{> "components/post-authors" }}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
<div class="post-main-image-wrapper post-main-image-wrapper-header hover-image-opacity">
|
||||
<div class="post-main-image">
|
||||
<figure>
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w,
|
||||
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
||||
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</header>
|
||||
{{/match}}
|
||||
|
||||
<div class="gh-content gh-canvas post-content-and-sidebar{{#match @custom.sidebar_position "Left"}} sidebar-left{{/match}}{{#match @custom.post_header_type "Featured Image Left"}} sidebar-left{{/match}}">
|
||||
<div class="post-content-outer narrow-container{{#unless @custom.use_sidebar}} post-content-outer-without-sidebar{{/unless}}{{#unless isPost}} post-content-outer-without-sidebar{{/unless}}">
|
||||
{{#if feature_image}}
|
||||
{{#if isPost}}
|
||||
{{#match @custom.post_header_type "Narrow"}}
|
||||
{{#if @custom.use_sidebar}}
|
||||
<div class="post-main-image-wrapper post-main-image-wrapper-content hover-image-opacity">
|
||||
<div class="post-main-image">
|
||||
<figure>
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w,
|
||||
{{img_url feature_image size="xl" format="webp"}} 1200w,
|
||||
{{img_url feature_image size="xxl" format="webp"}} 2000w"
|
||||
src="{{img_url feature_image size="xl"}}"
|
||||
alt="{{title}}"
|
||||
>
|
||||
{{#if feature_image_caption}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div class="post-content section-padding-bottom{{#unless feature_image}} post-content-no-image{{/unless}}">
|
||||
{{content}}
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if access}}
|
||||
<div class="post-share">
|
||||
<div class="post-share-heading">
|
||||
{{t "Share this article"}}
|
||||
</div>
|
||||
|
||||
<div class="socials post-share-icons">
|
||||
<a href="https://www.facebook.com/sharer.php?u={{url absolute='true'}}" target="_blank" rel="noopener" class="social" aria-label="Share on Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?url={{url absolute='true'}}&text={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Twitter/X">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{url absolute='true'}}&title={{encode title}}" target="_blank" rel="noopener" class="social" aria-label="Share on Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="social clipboard-link" href="javascript:" aria-label="Copy Link">
|
||||
<div class="social-inner">
|
||||
{{> "icons/link-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="clipboard-alert">
|
||||
<small>{{t "The link has been copied!"}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if comments}}
|
||||
<div class="section-heading">
|
||||
<span>{{t "Members Discussion"}}</span>
|
||||
<span>{{comment_count empty=(t "No Comments") singular=(t "Comment") plural=(t "Comments") autowrap="false"}}</span>
|
||||
</div>
|
||||
|
||||
<div class="comments-container">
|
||||
{{comments title="" count=false}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#if @custom.use_sidebar}}
|
||||
<aside class="post-sidebar{{#unless feature_image}} post-content-no-image{{/unless}}{{#match @custom.sidebar_content "Featured Articles"}} sidebar-related-articles{{/match}}">
|
||||
{{#match @custom.sidebar_content "Featured Articles"}}
|
||||
{{#get 'posts' include='tags,authors' limit='4' filter='id:-{{id}}+featured:true' as |featured|}}
|
||||
{{#if featured}}
|
||||
<div class="sidebar-articles">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Featured Articles"}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{#foreach featured}}
|
||||
{{> "components/extra-small-side-card" isPost=true name=title}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
|
||||
|
||||
<div class="hidden-sidebar-newsletter{{#if @custom.use_newsletter_on_homepage_and_post_sidebar}}{{#if @site.members_enabled}}{{#unless @site.members_invite_only}}{{#unless @member}} sidebar-newsletter-container{{/unless}}{{/unless}}{{/if}}{{/if}}">
|
||||
{{> "components/newsletter" isForPost=true }}
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<div class="gh-toc-outer">
|
||||
<div class="medium-text toc-heading">{{t "Table of Contents"}}</div>
|
||||
<div class="gh-toc"></div>
|
||||
</div>
|
||||
{{/match}}
|
||||
</aside>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if isPost}}
|
||||
<footer>
|
||||
<div class="wide-container section-padding-bottom">
|
||||
<div class="related-posts">
|
||||
<div class="related-post-wrapper previous-article-horizontal-card">
|
||||
{{#prev_post}}
|
||||
{{> "components/horizontal-card" isRelatedArticle=true}}
|
||||
{{/prev_post}}
|
||||
</div>
|
||||
|
||||
<div class="related-post-line"></div>
|
||||
|
||||
<div class="related-post-wrapper next-article-horizontal-card">
|
||||
{{#next_post}}
|
||||
{{> "components/horizontal-card" isRelatedArticle=true isNextArticle=true}}
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#get "posts" limit="6" include="count.posts" filter='id:-{{id}}+tag:[{{primary_tag.slug}}]'}}
|
||||
{{#if posts}}
|
||||
<section class="footer-slider">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Related Articles"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/archive/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural posts.length empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach posts}}
|
||||
{{> "components/slide-card" isPost=true}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
</footer>
|
||||
{{/if}}
|
||||
</article>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightense-images@1.0.17/dist/lightense.min.js"></script>
|
||||
<script>
|
||||
setLightense();
|
||||
</script>
|
||||
|
||||
<script src="{{asset "js/post-content.js"}}"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
setToggle();
|
||||
})
|
||||
</script>
|
||||
|
||||
{{#if isPost}}
|
||||
{{#match @custom.sidebar_content "Table Of Contents"}}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
|
||||
<script>
|
||||
tocbot.init({
|
||||
// Where to render the table of contents.
|
||||
tocSelector: '.gh-toc',
|
||||
// Where to grab the headings to build the table of contents.
|
||||
contentSelector: '.gh-content',
|
||||
// Which headings to grab inside of the contentSelector element.
|
||||
headingSelector: 'h2, h3, h4',
|
||||
// Ensure correct positioning
|
||||
hasInnerContainers: true,
|
||||
ignoreSelector: '.kg-card h2, .kg-card h3, .kg-card h4, .post-upgrade-cta h2'
|
||||
});
|
||||
</script>
|
||||
{{/match}}
|
||||
|
||||
{{#if @custom.use_sidebar}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
stickySidebar();
|
||||
})
|
||||
|
||||
window.addEventListener('resize', debounce(() => {stickySidebar()}, 100));
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if access}}
|
||||
<script>
|
||||
copyUrlToClipboard("post-share-icons");
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
const iframe = document.querySelector('#ghost-comments-root iframe');
|
||||
if(!iframe) return;
|
||||
|
||||
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
var targetHead = iframe.contentDocument.head;
|
||||
|
||||
var newLink = document.createElement("link");
|
||||
newLink.setAttribute("rel", "stylesheet");
|
||||
newLink.setAttribute("type", "text/css");
|
||||
newLink.setAttribute("href", "{{asset 'css/comments.css'}}");
|
||||
|
||||
let section = iframeDoc.querySelector('section');
|
||||
section.id = "comments-section"
|
||||
|
||||
const rootStyles = getComputedStyle(document.documentElement);
|
||||
|
||||
//initial variables
|
||||
iframeDoc.documentElement.style.setProperty('--text-color', rootStyles.getPropertyValue('--text-color'))
|
||||
iframeDoc.documentElement.style.setProperty('--background-color', rootStyles.getPropertyValue('--background-color'))
|
||||
iframeDoc.documentElement.style.setProperty('--ease-transition', rootStyles.getPropertyValue('--ease-transition'))
|
||||
iframeDoc.documentElement.style.setProperty('--font1', rootStyles.getPropertyValue('--font1'))
|
||||
iframeDoc.documentElement.style.setProperty('--font2', rootStyles.getPropertyValue('--font2'))
|
||||
iframeDoc.documentElement.style.setProperty('--font3', rootStyles.getPropertyValue('--font3'))
|
||||
iframeDoc.documentElement.style.setProperty('--font4', rootStyles.getPropertyValue('--font4'))
|
||||
iframeDoc.documentElement.style.setProperty('--image-filter', rootStyles.getPropertyValue('--image-filter'))
|
||||
|
||||
targetHead.appendChild(newLink);
|
||||
loadFonts("{{@custom.fonts}}", iframeDoc);
|
||||
|
||||
const linkElement = document.querySelector('link[href*="fonts.bunny.net/css"]');
|
||||
|
||||
if(linkElement){
|
||||
const clone = linkElement.cloneNode(true);
|
||||
targetHead.appendChild(clone);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
45
newspaper/partials/components/big-card.hbs
Normal file
45
newspaper/partials/components/big-card.hbs
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="big-card">
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="big-card-image-link hover-image-opacity">
|
||||
<figure class="big-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="big-text hover-underline big-card-heading">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<p class="big-card-text three-lines{{#if @custom.use_initials}} initial-paragraph{{/if}} initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
</small>
|
||||
</div>
|
||||
231
newspaper/partials/components/demo.hbs
Normal file
231
newspaper/partials/components/demo.hbs
Normal file
@ -0,0 +1,231 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/demo.css"}}" />
|
||||
|
||||
<settings-sidebar class="settings-sidebar">
|
||||
<div class="settings-inner">
|
||||
<div class="settings-item">
|
||||
<label for="theme-presets" class="settings-label">
|
||||
<small>Theme presets</small>
|
||||
</label>
|
||||
<select class="settings-select" name="theme-presets" id="theme-presets">
|
||||
<option value="old-newspaper-light">Old Newspaper Light</option>
|
||||
<option value="modern-newspaper-light" selected>Modern Newspaper Light</option>
|
||||
<option value="old-newspaper-tinted">Old Newspaper Tinted</option>
|
||||
<option value="elegant-newspaper-light">Elegant Newspaper Light</option>
|
||||
<option value="elegant-newspaper-dark">Elegant Newspaper Dark</option>
|
||||
<option value="old-newspaper-dark">Old Newspaper Dark</option>
|
||||
<option value="modern-newspaper-dark">Modern Newspaper Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="background-color" class="settings-label">
|
||||
<small>Background color</small>
|
||||
</label>
|
||||
<div class="color-picker-wrapper">
|
||||
<div class="colorpicker-overlay"></div>
|
||||
<input type="color" id="background-color" name="background-color" value="#FFFFFF" colorpick-eyedropper-active="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="text-color" class="settings-label">
|
||||
<small>Text color</small>
|
||||
</label>
|
||||
<div class="color-picker-wrapper">
|
||||
<div class="colorpicker-overlay colorpicker-overlay-text"></div>
|
||||
<input type="color" id="text-color" name="text-color" value="#000000" colorpick-eyedropper-active="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="fonts" class="settings-label">
|
||||
<small>Fonts</small>
|
||||
</label>
|
||||
<input id="fonts" name="fonts" type="text" value="Open Sans, EB Garamond, Roboto Condensed" class="settings-input"/>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="announcement-bar-type" class="settings-label">
|
||||
<small>Announcement bar type</small>
|
||||
</label>
|
||||
<select class="settings-select" name="announcement-bar-type" id="announcement-bar-type">
|
||||
<option value="Normal">Normal</option>
|
||||
<option value="Moving Several News" selected>Moving Several News</option>
|
||||
<option value="Moving One News">Moving One News</option>
|
||||
<option value="Static">Static</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="card-heading-style" class="settings-label">
|
||||
<small>Card heading style</small>
|
||||
</label>
|
||||
<select class="settings-select" name="card-heading-style" id="card-heading-style">
|
||||
<option value="uppercase">uppercase</option>
|
||||
<option value="capitalize">capitalize</option>
|
||||
<option value="lowercase">lowercase</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="image-style" class="settings-label">
|
||||
<small>Image style</small>
|
||||
</label>
|
||||
<select class="settings-select" name="image-style" id="image-style">
|
||||
<option value="unset">Normal</option>
|
||||
<option value="grayscale(1)">Grayscale</option>
|
||||
<option value="grayscale(1) sepia(0.35) contrast(0.85)">Tinted</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="use-initials" class="settings-label">
|
||||
<small>Use initials</small>
|
||||
</label>
|
||||
<select class="settings-select" name="use-initials" id="use-initials">
|
||||
<option value="true">True</option>
|
||||
<option value="false" selected>False</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="use-newsletter" class="settings-label">
|
||||
<small>Newsletter on homepage and post sidebar</small>
|
||||
</label>
|
||||
<select class="settings-select" name="use-newsletter" id="use-newsletter">
|
||||
<option value="true">True</option>
|
||||
<option value="false">False</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="tag-page-layout" class="settings-label">
|
||||
<small>Tag page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="tag-page-layout" id="tag-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/tag/politics">Column</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/tag/politics?tag-layout=simple">Simple</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="author-page-layout" class="settings-label">
|
||||
<small>Author page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="author-page-layout" id="author-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe">Column</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-left">Author Image Left</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/john-doe?author-layout=author-image-right">Author Image Right</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/author/katarina-smith-demo">Simple</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="account-page-layout" class="settings-label">
|
||||
<small>Account page layout</small>
|
||||
</label>
|
||||
<div class="settings-links" name="account-page-layout" id="account-page-layout">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account">All Data Layout</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?no-subscribe-button=true">All Data Layout No Btn</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple">Simple Layout</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/demo-account?account-layout=simple&no-subscribe-button=true">Simple Layout No Btn</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="post-header-type" class="settings-label">
|
||||
<small>Post header type</small>
|
||||
</label>
|
||||
<div class="settings-links" name="post-header-type" id="post-header-type">
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=false">Narrow</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=false">Wide</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=false">Featured Image Left</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=false">Featured Image Right</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=narrow&sidebar=true">Narrow With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=wide&sidebar=true">Wide With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-left&sidebar=true">Featured Image Left With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/foreign-relations-diplomatic-talks-with-neighboring-countries?post-layout=featured-image-right&sidebar=true">Featured Image Right With Sidebar</a>
|
||||
</small>
|
||||
<small>
|
||||
<a class="settings-link" href="{{@site.url}}/innovation-in-the-corporate-world-unveiling-the-latest-business-trends?post-layout=narrow&sidebar=false">Members Only Post</a>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="sidebar-content" class="settings-label">
|
||||
<small>Sidebar content</small>
|
||||
</label>
|
||||
<select class="settings-select" name="sidebar-content" id="sidebar-content">
|
||||
<option value="Featured Articles">Featured Articles</option>
|
||||
<option value="Table Of Contents">Table Of Contents</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="sidebar-position" class="settings-label">
|
||||
<small>Sidebar position</small>
|
||||
</label>
|
||||
<select class="settings-select" name="sidebar-position" id="sidebar-position">
|
||||
<option value="Right">Right</option>
|
||||
<option value="Left">Left</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="buy-button-wrapper">
|
||||
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="button buy-button" target="_blank">Buy Newspaper</a>
|
||||
</div>
|
||||
</div>
|
||||
</settings-sidebar>
|
||||
|
||||
<div class="demo-buttons-container">
|
||||
<a href="https://kusa-projects.lemonsqueezy.com/checkout/buy/861bc5c0-91fb-45c3-892e-82f61aaa3e89" class="demo-button" aria-label="Buy Newspaper" target="_blank">
|
||||
<div class="demo-button-inner">
|
||||
{{> "icons/download-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button id="settings-button" class="demo-button" aria-label="Newspaper Settings">
|
||||
<div class="demo-button-inner">
|
||||
{{> "icons/settings-icon"}}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="{{asset "js/demo.js"}}"></script>
|
||||
50
newspaper/partials/components/extra-small-card.hbs
Normal file
50
newspaper/partials/components/extra-small-card.hbs
Normal file
@ -0,0 +1,50 @@
|
||||
<div class="extra-small-card">
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="small-text hover-underline extra-small-card-heading two-lines-mobile">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="extra-small-card-image-link hover-image-opacity">
|
||||
<figure class="extra-small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w"
|
||||
src="{{img_url feature_image size="s"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{else}}
|
||||
<a href="{{url}}" class="big-slide-placeholder hover-image-opacity">
|
||||
{{> "icons/placeholder" }}
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="extra-small-card-mobile-excerpt">
|
||||
<p class="{{#if @custom.use_initials}} initial-paragraph{{/if}} three-lines initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
44
newspaper/partials/components/extra-small-side-card.hbs
Normal file
44
newspaper/partials/components/extra-small-side-card.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isPost: Boolean
|
||||
--}}
|
||||
|
||||
<div class="extra-small-card extra-small-side-card">
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="extra-small-side-card-image-link hover-image-opacity">
|
||||
<figure class="extra-small-side-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w"
|
||||
src="{{img_url feature_image size="xs"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{name}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<div class="extra-small-side-card-content{{#unless feature_image}} no-margin-left{{/unless}}">
|
||||
<a href="{{url}}" class="small-text hover-underline extra-small-side-card-heading three-lines">
|
||||
{{name}}
|
||||
</a>
|
||||
|
||||
<small class="small-card-small-text italic-lower-opac">
|
||||
{{#unless isPost}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{else}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{/unless}}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
103
newspaper/partials/components/footer.hbs
Normal file
103
newspaper/partials/components/footer.hbs
Normal file
@ -0,0 +1,103 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/footer.css"}}" />
|
||||
|
||||
<footer class="footer">
|
||||
<custom-footer>
|
||||
<div class="wide-container footer-inner">
|
||||
<div class="footer-content">
|
||||
<div class="footer-description">
|
||||
<a class="footer-logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img class="footer-logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="footer-logo-text">
|
||||
{{@site.title}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
<div class="footer-paragraph-wrapper">
|
||||
<p>{{@site.description}}</p>
|
||||
</div>
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
{{#unless @member}}
|
||||
<form data-members-form="subscribe" class="subscribe-form footer-form">
|
||||
<div class="subscribe-with-alerts">
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your.email@example.com'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert success-alert">{{t "Please check your inbox and click the link to confirm your subscription."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
<div class="socials footer-socials">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<a href="#" id="instagram-footer" target="_blank" class="social" aria-label="Instagram">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/instagram-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="linkedin-footer" target="_blank" class="social" aria-label="Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="pinterest-footer" target="_blank" class="social" aria-label="Pinterest">
|
||||
<div class="social-inner">
|
||||
{{> "icons/pinterest-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="footer-navigation">
|
||||
<ul class="footer-normal-links-group footer-links-group">
|
||||
<li class="footer-nav-navigation">
|
||||
<div class="footer-links-label">
|
||||
{{t "Navigation"}}
|
||||
</div>
|
||||
<ul class="footer-secondary-links footer-normal-links">
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
{{navigation type="secondary" }}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
© {{date format="YYYY"}} <a class="hover-underline" href="{{@site.url}}">{{@site.title}}</a> - {{t "Published with"}} <a href="https://ghost.org/" target="_blank" class="hover-underline">Ghost</a><span> & </span><a class="hover-underline" href="https://www.kusa-projects.com/" target="_blank">{{@site.title}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</custom-footer>
|
||||
</footer>
|
||||
95
newspaper/partials/components/form-hero.hbs
Normal file
95
newspaper/partials/components/form-hero.hbs
Normal file
@ -0,0 +1,95 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- type: String
|
||||
- accountPage: Boolean
|
||||
- hasLink: Boolean
|
||||
--}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/form-page.css"}}" />
|
||||
|
||||
<div class="wide-container">
|
||||
<section class="full-page-section">
|
||||
<div class="form-page-content{{#match type "contact"}} contact-content{{/match}}">
|
||||
<h1 class="text-card-heading">
|
||||
{{title}}
|
||||
</h1>
|
||||
|
||||
<p class="form-page-excerpt">
|
||||
{{custom_excerpt}}
|
||||
</p>
|
||||
|
||||
{{#match type "contact"}}
|
||||
<div class="form-container contact-form-container">
|
||||
<form class="contact-form" action="https://formspree.io/f/{{@custom.formspree_hash_id}}" method="POST" id="contactForm">
|
||||
<div class="contact-form-inputs">
|
||||
<input type="text" name="name" placeholder="{{t 'Your name'}}" required>
|
||||
<input type="email" name="email" placeholder="{{t 'Your email address'}}" required>
|
||||
</div>
|
||||
<textarea name="message" placeholder="{{t 'Your message'}}" required></textarea>
|
||||
<button class="button vertical-form-button" type="submit">
|
||||
{{t "Send message"}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{/match}}
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#if accountPage}}
|
||||
<custom-form class="form-container">
|
||||
<form data-members-form="{{type}}" data-members-autoredirect="false" class="page-form-element">
|
||||
{{#match type "signin"}}
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="vertical-form">
|
||||
<input data-members-name type="text" required="true" placeholder="{{t 'Your name'}}"/>
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your email address'}}"/>
|
||||
<button class="button vertical-form-button" type="submit">{{#match type "signup"}}{{t "Continue"}}{{else}}{{t "Subscribe"}}{{/match}}</button>
|
||||
</div>
|
||||
{{/match}}
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
|
||||
{{#if hasLink}}
|
||||
{{#unless @site.members_invite_only}}
|
||||
<small class="under-form-text">
|
||||
<span class="lower-opacity-small-text">
|
||||
{{#match type "signin"}}{{t "Don't have an account yet?"}}{{else}}{{t "Already have an account?"}}{{/match}}
|
||||
</span>
|
||||
<a class="bold-link" href="{{@site.url}}/{{#match type "signin"}}signup{{else}}signin{{/match}}/">
|
||||
{{#match type "signin"}}{{t "Sign up"}}{{else}}{{t "Sign in"}}{{/match}}
|
||||
</a>
|
||||
</small>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</form>
|
||||
|
||||
<a href="{{@site.url}}" class="button form-success-button">{{t "Back to homepage"}}</a>
|
||||
|
||||
<span id="form-success-heading-text" class="hidden" data-success-heading="{{t 'Great!'}}"></span>
|
||||
<span id="form-success-paragraph-text" class="hidden" data-success-paragraph="
|
||||
{{#match type "signup"}}{{t 'Please check your inbox and click the link to confirm your signup.'}}{{/match}}
|
||||
{{#match type "signin"}}{{t 'Please check your inbox and click the link to complete signin.'}}{{/match}}
|
||||
{{#match type "subscribe"}}{{t 'Please check your inbox and click the link to confirm your subscription.'}}{{/match}}
|
||||
">
|
||||
</span>
|
||||
</custom-form>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#match type "404"}}
|
||||
<div class="form-container">
|
||||
<a class="button" href="{{@site.url}}">{{t "Back to homepage"}}</a>
|
||||
</div>
|
||||
{{/match}}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
58
newspaper/partials/components/horizontal-card.hbs
Normal file
58
newspaper/partials/components/horizontal-card.hbs
Normal file
@ -0,0 +1,58 @@
|
||||
<div class="horizontal-card">
|
||||
<div class="horizontal-card-inner">
|
||||
<small class="small-card-small-text">
|
||||
{{#if isRelatedArticle}}
|
||||
<span>
|
||||
{{#if isNextArticle}}
|
||||
{{t "Next Article"}}
|
||||
{{else}}
|
||||
{{t "Previous Article"}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{else}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="medium-text hover-underline small-card-heading two-lines-mobile">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{#if isRelatedArticle}}
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
{{/if}}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="small-card-image-link horizontal-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xs" format="webp"}} 300w,
|
||||
{{img_url feature_image size="s" format="webp"}} 720w,
|
||||
{{img_url feature_image size="m" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
121
newspaper/partials/components/navbar.hbs
Normal file
121
newspaper/partials/components/navbar.hbs
Normal file
@ -0,0 +1,121 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/navbar.css"}}" />
|
||||
|
||||
<custom-header class="header">
|
||||
<div class="wide-container navbar-inner">
|
||||
<div class="navbar-top">
|
||||
<div class="socials">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
<a href="#" id="instagram" target="_blank" class="social" aria-label="Instagram">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/instagram-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="linkedin" target="_blank" class="social" aria-label="Linkedin">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/linkedin-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" id="pinterest" target="_blank" class="social" aria-label="Pinterest">
|
||||
<div class="social-inner">
|
||||
{{> "icons/pinterest-icon"}}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<span id="socials-info" class="hidden" data-urls="{{@custom.social_urls}}"></span>
|
||||
</div>
|
||||
|
||||
<div class="menu-button-wrapper">
|
||||
<button class="menu-button unstyled-button" aria-label="Menu button">
|
||||
<div class="menu-line first-line"></div>
|
||||
<div class="menu-line mobile-line"></div>
|
||||
<div class="menu-line second-line"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="logo-wrapper">
|
||||
<a class="logo" href="{{@site.url}}">
|
||||
{{#if @site.logo}}
|
||||
<img class="logo-image" src="{{@site.logo}}" alt="{{@site.title}}">
|
||||
{{else}}
|
||||
<div class="navbar-logo-text">
|
||||
{{@site.title}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-account-links">
|
||||
<a class="account-button-wrapper" aria-label="Search button" href="javascript:" data-ghost-search>
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/search-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Search"}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<div class="account-buttons-separator"></div>
|
||||
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signin"{{else}}href="{{@site.url}}/signin/"{{/match}} class="account-button-wrapper" aria-label="Sign in">
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/account-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Sign in"}}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<div class="account-buttons-separator"></div>
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account"{{else}}href="{{@site.url}}/account/"{{/match}} class="account-button-wrapper" aria-label="Account">
|
||||
<div class="account-icon-wrapper">
|
||||
{{> "icons/account-icon" }}
|
||||
</div>
|
||||
<span class="account-button-text">
|
||||
{{t "Account"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-links-outer">
|
||||
<div class="navbar-links-inner">
|
||||
{{navigation}}
|
||||
|
||||
{{#if @site.members_enabled}}
|
||||
{{#unless @member}}
|
||||
<div class="subscribe-button-mobile-wrapper">
|
||||
<a {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="subscribe"{{else}}href="{{@site.url}}/subscribe/"{{/match}} class="button subscribe-button subscribe-button-mobile">
|
||||
{{t "Subscribe"}}
|
||||
</a>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</custom-header>
|
||||
32
newspaper/partials/components/newsletter.hbs
Normal file
32
newspaper/partials/components/newsletter.hbs
Normal file
@ -0,0 +1,32 @@
|
||||
<div class="newsletter-outer{{#if isForPost}} newsletter-outer-for-post{{/if}}">
|
||||
<div class="newsletter">
|
||||
<small class="newsletter-small-top-text">
|
||||
{{t "Subscribe to our newsletter"}}
|
||||
</small>
|
||||
|
||||
<div class="big-text newsletter-heading">
|
||||
{{t "Get all the latest news delivered straight to your inbox."}}
|
||||
</div>
|
||||
|
||||
<form data-members-form="subscribe" class="subscribe-form">
|
||||
<div class="subscribe-with-alerts">
|
||||
<div class="subscribe-wrapper">
|
||||
<input data-members-email type="email" required="true" placeholder="{{t 'Your.email@example.com'}}" class="subscribe-input"/>
|
||||
<button class="submit-button" type="submit" aria-label="Subscribe">
|
||||
{{t "Subscribe"}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<small class="newsletter-small-bottom-text">
|
||||
{{t "No spam. Unsubscribe anytime."}}
|
||||
</small>
|
||||
|
||||
<div class="form-alerts">
|
||||
<small class="form-alert loading-alert">{{t "Processing your request..."}}</small>
|
||||
<small class="form-alert success-alert">{{t "Please check your inbox and click the link to confirm your subscription."}}</small>
|
||||
<small class="form-alert error-alert" data-members-error></small>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
30
newspaper/partials/components/notifications.hbs
Normal file
30
newspaper/partials/components/notifications.hbs
Normal file
@ -0,0 +1,30 @@
|
||||
<custom-notifications class="global-notifications">
|
||||
<div class="notification subscribe-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification signup-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification signin-false">
|
||||
{{> "icons/error-icon" }}
|
||||
<small>{{t "Your link has expired. Please request a new one."}}</small>
|
||||
</div>
|
||||
<div class="notification subscribe-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Great! You've successfully signed up."}}</small>
|
||||
</div>
|
||||
<div class="notification signup-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Great! You've successfully signed up."}}</small>
|
||||
</div>
|
||||
<div class="notification signin-true">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Welcome back! You've successfully signed in."}}</small>
|
||||
</div>
|
||||
<div class="notification stripe-success">
|
||||
{{> "icons/success-icon" }}
|
||||
<small>{{t "Success! You now have access to additional content."}}</small>
|
||||
</div>
|
||||
</custom-notifications>
|
||||
37
newspaper/partials/components/post-authors.hbs
Normal file
37
newspaper/partials/components/post-authors.hbs
Normal file
@ -0,0 +1,37 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-authors.css"}}" />
|
||||
|
||||
<div class="post-authors">
|
||||
<div class="post-author-images">
|
||||
{{#foreach authors}}
|
||||
<a href="{{url}}" class="post-author-image">
|
||||
{{#if profile_image}}
|
||||
<img class="image hover-image-opacity"
|
||||
src="{{img_url profile_image size="xxs"}}"
|
||||
alt="{{name}}"
|
||||
loading="lazy">
|
||||
{{else}}
|
||||
<div class="author-avatar-wrapper">
|
||||
{{> "icons/avatar-icon"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
<div class="post-authors-text">
|
||||
<div class="post-authors-inner" id="authors">
|
||||
<small class="post-author-name">
|
||||
{{authors separator=" & "}}
|
||||
</small>
|
||||
</div>
|
||||
<small class="date-small-text italic-lower-opac">
|
||||
<span>
|
||||
<time>
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
</time>
|
||||
</span>
|
||||
-
|
||||
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
59
newspaper/partials/components/simple-author-hero.hbs
Normal file
59
newspaper/partials/components/simple-author-hero.hbs
Normal file
@ -0,0 +1,59 @@
|
||||
<section class="simple-hero">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{name}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{bio}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="author-socials" class="socials simple-layout-socials">
|
||||
{{#if location}}
|
||||
<div class="social location-social" aria-label="Location">
|
||||
<div class="social-inner">
|
||||
{{> "icons/location-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{location}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if facebook}}
|
||||
<a href="{{facebook_url}}" target="_blank" class="social" aria-label="Facebook">
|
||||
<div class="social-inner">
|
||||
{{> "icons/facebook-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Facebook"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if twitter}}
|
||||
<a href="{{twitter_url}}" target="_blank" class="social" aria-label="Twitter">
|
||||
<div class="social-inner social-inner-smaller">
|
||||
{{> "icons/twitter-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Twitter/X"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if website}}
|
||||
<a href="{{website}}" target="_blank" class="social" aria-label="Website URL">
|
||||
<div class="social-inner">
|
||||
{{> "icons/link-icon"}}
|
||||
</div>
|
||||
<span class="social-text">
|
||||
{{t "Website"}}
|
||||
</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
44
newspaper/partials/components/slide-card.hbs
Normal file
44
newspaper/partials/components/slide-card.hbs
Normal file
@ -0,0 +1,44 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- title: String
|
||||
--}}
|
||||
|
||||
<div class="slide-card">
|
||||
<a href="{{url}}" class="slide-card-image-link hover-image-opacity" aria-label="{{#if isPost}}{{title}}{{else}}{{name}}{{/if}}">
|
||||
{{#if feature_image}}
|
||||
<figure class="slide-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
|
||||
{{img_url feature_image size="xs" format="webp"}} 150w,
|
||||
{{img_url feature_image size="s" format="webp"}} 320w"
|
||||
src="{{img_url feature_image size="s"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="{{#match @index 0}}eager{{else}}lazy{{/match}}"
|
||||
>
|
||||
</figure>
|
||||
{{else}}
|
||||
<div class="slide-placeholder">
|
||||
{{> "icons/placeholder" }}
|
||||
</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
|
||||
<a href="{{url}}" class="small-text hover-underline slide-card-heading two-lines">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
<small class="slide-card-small-text">
|
||||
{{#if isPost}}
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon access-icon-smaller">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/if}}
|
||||
</small>
|
||||
</div>
|
||||
64
newspaper/partials/components/small-card.hbs
Normal file
64
newspaper/partials/components/small-card.hbs
Normal file
@ -0,0 +1,64 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- isForGrid: Boolean
|
||||
- isForAuthor: Boolean
|
||||
--}}
|
||||
|
||||
<div class="small-card{{#if isForGrid}} grid-small-card{{/if}}">
|
||||
<small class="small-card-small-text">
|
||||
{{#unless access}}
|
||||
<span class="restricted-access-icon">
|
||||
{{> "icons/lock-icon" }}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}" class="hover-underline">{{name}}</a>
|
||||
<span> - </span>
|
||||
{{/primary_tag}}
|
||||
|
||||
<span class="small-card-date">
|
||||
{{#unless isForAuthor}}
|
||||
{{date published_at format="MMM DD, YYYY"}}
|
||||
{{else}}
|
||||
{{plural count.posts empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
{{/unless}}
|
||||
</span>
|
||||
</small>
|
||||
|
||||
<a href="{{url}}" class="medium-text hover-underline small-card-heading">
|
||||
{{title}}
|
||||
</a>
|
||||
|
||||
{{#if feature_image}}
|
||||
<a href="{{url}}" class="small-card-image-link hover-image-opacity">
|
||||
<figure class="small-card-image-wrapper">
|
||||
<img
|
||||
srcset="{{img_url feature_image size="s" format="webp"}} 320w,
|
||||
{{img_url feature_image size="xm" format="webp"}} 440w,
|
||||
{{img_url feature_image size="m" format="webp"}} 600w,
|
||||
{{img_url feature_image size="l" format="webp"}} 960w"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
|
||||
loading="{{#match @index 0}}eager{{else}}lazy{{/match}}"
|
||||
>
|
||||
</figure>
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if isForGrid}}
|
||||
<a href="{{url}}" class="placeholder hover-image-opacity">
|
||||
{{> "icons/placeholder" }}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div class="small-card-text-and-author{{#if isForGrid}}{{#unless isForAuthor}} text-min-height{{/unless}}{{/if}}">
|
||||
<p class="small-card-text three-lines{{#if @custom.use_initials}} initial-paragraph{{/if}} initial-paragraph-reset">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
|
||||
<small class="small-card-bottom-text">
|
||||
{{authors separator=" & " prefix="by "}}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
61
newspaper/partials/components/tier-card.hbs
Normal file
61
newspaper/partials/components/tier-card.hbs
Normal file
@ -0,0 +1,61 @@
|
||||
{{!--
|
||||
Parameters:
|
||||
- yearly: boolean
|
||||
--}}
|
||||
|
||||
<div class="tier-card">
|
||||
<div class="tier-name">
|
||||
<div class="big-text">{{name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="tier-price">
|
||||
<span class="tier-currency{{#match type "free"}} tier-currency-free{{/match}}">
|
||||
|
||||
</span>
|
||||
|
||||
<span class="tier-price-span">
|
||||
{{#match type "paid"}}
|
||||
{{#if yearly}}{{price yearly_price currency=currency}}{{else}}{{price monthly_price currency=currency}}{{/if}}
|
||||
{{else}}
|
||||
0
|
||||
{{/match}}
|
||||
</span>
|
||||
|
||||
<div class="big-text tier-time">
|
||||
{{#match type "paid"}}
|
||||
{{#if yearly}}/{{t "year"}}{{else}}/{{t "month"}}{{/if}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if description}}
|
||||
<div class="medium-text tier-description">
|
||||
{{description}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if benefits}}
|
||||
<div class="benefits-outer">
|
||||
<ul class="benefits-container unstyled-list">
|
||||
{{#foreach benefits}}
|
||||
<li class="benefits-item">
|
||||
<div class="benefit-square">
|
||||
<div class="benefit-icon">
|
||||
{{> "icons/check-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{{this}}
|
||||
</p>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="membership-subscribe-button">
|
||||
<a class="button" {{#match type "paid"}}href="javascript:" data-portal="signup/{{id}}/{{#if yearly}}yearly{{else}}monthly{{/if}}"{{else}}{{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signup"{{else}}href="{{@site.url}}/signup/"{{/match}}{{/match}}>
|
||||
{{t "Subscribe now"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
35
newspaper/partials/content-cta.hbs
Normal file
35
newspaper/partials/content-cta.hbs
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
{{#if html}}
|
||||
<div class="fading-content">
|
||||
{{{html}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-upgrade-cta">
|
||||
<div class="post-upgrade-cta-content">
|
||||
{{#has visibility="paid"}}
|
||||
<h2>{{t "This post is for paying subscribers only"}}</h2>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<h2>{{t "This post is for subscribers only"}}</h2>
|
||||
{{/has}}
|
||||
{{#has visibility="tiers"}}
|
||||
<h2>{{t "This post is for subscribers on the"}} {{tiers}} {{t "only."}}</h2>
|
||||
{{/has}}
|
||||
<div class="post-upgrade-cta-paragraph">
|
||||
<p>{{t "Subscribe now and have access to all our stories, enjoy exclusive content and stay up to date with constant updates."}}</p>
|
||||
</div>
|
||||
{{#if @member}}
|
||||
<a class="button" {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="account/plans"{{else}}href="{{@site.url}}/membership/"{{/match}}>
|
||||
{{t "Upgrade your account"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a class="button" {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signup"{{else}}href="{{@site.url}}/signup/"{{/match}}>
|
||||
{{t "Subscribe now"}}
|
||||
</a>
|
||||
<div class="under-button-wrapper">
|
||||
<p><small><span>{{t "Already a member?"}}</span> <a class="bold-link" {{#match @custom.use_custom_pages "None"}}href="javascript:" data-portal="signin"{{else}}href="{{@site.url}}/signin/"{{/match}}>{{t "Sign in"}}</a></small></p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
3
newspaper/partials/icons/account-icon.hbs
Normal file
3
newspaper/partials/icons/account-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.10938 9.49997C1.10938 7.27504 1.99323 5.14123 3.5665 3.56796C5.13976 1.99469 7.27357 1.11084 9.49851 1.11084C11.7234 1.11084 13.8573 1.99469 15.4305 3.56796C17.0038 5.14123 17.8876 7.27504 17.8876 9.49997C17.8876 11.7249 17.0038 13.8587 15.4305 15.432C13.8573 17.0053 11.7234 17.8891 9.49851 17.8891C7.27357 17.8891 5.13976 17.0053 3.5665 15.432C1.99323 13.8587 1.10938 11.7249 1.10938 9.49997ZM9.49851 2.31417C8.1057 2.31422 6.74293 2.71904 5.57597 3.47939C4.40902 4.23973 3.48818 5.32282 2.92548 6.5969C2.36279 7.87099 2.18249 9.28114 2.40652 10.6558C2.63056 12.0305 3.24926 13.3104 4.18737 14.3399C4.7569 13.4478 5.5421 12.7137 6.4704 12.2054C7.3987 11.6971 8.44015 11.431 9.49851 11.4316C10.5569 11.4309 11.5984 11.6969 12.5267 12.2053C13.455 12.7136 14.2402 13.4478 14.8096 14.3399C15.7478 13.3104 16.3665 12.0305 16.5905 10.6558C16.8145 9.28114 16.6342 7.87099 16.0715 6.5969C15.5088 5.32282 14.588 4.23973 13.421 3.47939C12.2541 2.71904 10.8913 2.31422 9.49851 2.31417ZM13.909 15.1734C13.4608 14.4009 12.8174 13.7597 12.0433 13.3142C11.2692 12.8687 10.3916 12.6345 9.49851 12.635C8.60537 12.6345 7.72779 12.8687 6.9537 13.3142C6.17961 13.7597 5.53621 14.4009 5.08798 15.1734C6.34801 16.1559 7.90069 16.6883 9.49851 16.6858C11.1604 16.6858 12.6905 16.1208 13.909 15.1734ZM6.52184 8.23964C6.52184 7.45018 6.83545 6.69305 7.39369 6.13482C7.95192 5.57659 8.70905 5.26297 9.49851 5.26297C10.288 5.26297 11.0451 5.57659 11.6033 6.13482C12.1616 6.69305 12.4752 7.45018 12.4752 8.23964C12.4752 9.0291 12.1616 9.78623 11.6033 10.3445C11.0451 10.9027 10.288 11.2163 9.49851 11.2163C8.70905 11.2163 7.95192 10.9027 7.39369 10.3445C6.83545 9.78623 6.52184 9.0291 6.52184 8.23964ZM9.49851 6.46631C9.26563 6.46631 9.03503 6.51218 8.81988 6.60129C8.60473 6.69041 8.40924 6.82103 8.24457 6.9857C8.0799 7.15037 7.94928 7.34586 7.86016 7.56101C7.77104 7.77617 7.72517 8.00676 7.72517 8.23964C7.72517 8.47252 7.77104 8.70311 7.86016 8.91826C7.94928 9.13342 8.0799 9.32891 8.24457 9.49358C8.40924 9.65825 8.60473 9.78887 8.81988 9.87799C9.03503 9.9671 9.26563 10.013 9.49851 10.013C9.96883 10.013 10.4199 9.82614 10.7524 9.49358C11.085 9.16101 11.2718 8.70996 11.2718 8.23964C11.2718 7.76932 11.085 7.31827 10.7524 6.9857C10.4199 6.65314 9.96883 6.46631 9.49851 6.46631Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
3
newspaper/partials/icons/avatar-icon.hbs
Normal file
3
newspaper/partials/icons/avatar-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M75 75C88.8125 75 100 63.8125 100 50C100 36.1875 88.8125 25 75 25C61.1875 25 50 36.1875 50 50C50 63.8125 61.1875 75 75 75ZM106.25 50C106.25 67.2656 92.2656 81.25 75 81.25C57.7344 81.25 43.75 67.2656 43.75 50C43.75 32.7344 57.7344 18.75 75 18.75C92.2656 18.75 106.25 32.7344 106.25 50ZM28.8219 106.913C25.6875 109.444 25 111.341 25 112.5V125H125V112.5C125 111.344 124.312 109.441 121.175 106.913C118.113 104.441 113.544 102.084 108.006 100.047C96.9375 95.975 83.6031 93.75 75 93.75C66.3969 93.75 53.0625 95.975 41.9937 100.047C36.4562 102.084 31.8875 104.441 28.8219 106.913ZM75 87.5C56.225 87.5 18.75 96.9844 18.75 112.5V131.25H131.25V112.5C131.25 96.9844 93.775 87.5 75 87.5Z" fill="var(--text-color)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 867 B |
3
newspaper/partials/icons/check-icon.hbs
Normal file
3
newspaper/partials/icons/check-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.37031 12.0001L2.57031 8.20007L3.52031 7.25007L6.37031 10.1001L12.487 3.9834L13.437 4.9334L6.37031 12.0001Z" fill="var(--background-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 264 B |
3
newspaper/partials/icons/close-icon.hbs
Normal file
3
newspaper/partials/icons/close-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.617311 11L0 10.3827L4.88269 5.5L0 0.617311L0.617311 0L5.5 4.88269L10.3827 0L11 0.617311L6.11731 5.5L11 10.3827L10.3827 11L5.5 6.11731L0.617311 11Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 298 B |
3
newspaper/partials/icons/download-icon.hbs
Normal file
3
newspaper/partials/icons/download-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.3125 21.5C4.67656 21.5 4.13197 21.2734 3.67872 20.8201C3.22547 20.3669 2.99923 19.8227 3 19.1875V15.7187H5.3125V19.1875H19.1875V15.7187H21.5V19.1875C21.5 19.8234 21.2734 20.368 20.8201 20.8213C20.3669 21.2745 19.8227 21.5008 19.1875 21.5H5.3125ZM12.25 16.875L6.46875 11.0937L8.0875 9.41719L11.0938 12.4234V3H13.4063V12.4234L16.4125 9.41719L18.0313 11.0937L12.25 16.875Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 515 B |
3
newspaper/partials/icons/error-icon.hbs
Normal file
3
newspaper/partials/icons/error-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg class="notification-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.9987 0.833496C4.9387 0.833496 0.832031 4.94016 0.832031 10.0002C0.832031 15.0602 4.9387 19.1668 9.9987 19.1668C15.0587 19.1668 19.1654 15.0602 19.1654 10.0002C19.1654 4.94016 15.0587 0.833496 9.9987 0.833496ZM10.9154 14.5835H9.08203V12.7502H10.9154V14.5835ZM10.9154 10.9168H9.08203V5.41683H10.9154V10.9168Z" fill="var(--error-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 457 B |
3
newspaper/partials/icons/facebook-icon.hbs
Normal file
3
newspaper/partials/icons/facebook-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 9.52381C19 4.26667 14.744 0 9.5 0C4.256 0 0 4.26667 0 9.52381C0 14.1333 3.268 17.9714 7.6 18.8571V12.381H5.7V9.52381H7.6V7.14286C7.6 5.30476 9.0915 3.80952 10.925 3.80952H13.3V6.66667H11.4C10.8775 6.66667 10.45 7.09524 10.45 7.61905V9.52381H13.3V12.381H10.45V19C15.2475 18.5238 19 14.4667 19 9.52381Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 453 B |
3
newspaper/partials/icons/instagram-icon.hbs
Normal file
3
newspaper/partials/icons/instagram-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.92521 0.0011073C10.5819 -0.00141277 11.2387 0.00518759 11.8952 0.0209064L12.0698 0.027206C12.2714 0.0344056 12.4703 0.0434051 12.7106 0.0542046C13.6681 0.0992023 14.3215 0.250395 14.8948 0.472683C15.4887 0.701272 15.9891 1.01086 16.4895 1.51123C16.947 1.96085 17.3011 2.50473 17.5271 3.10505C17.7494 3.67832 17.9006 4.33258 17.9456 5.29014C17.9564 5.52952 17.9654 5.72931 17.9726 5.9309L17.978 6.10549C17.994 6.76173 18.0009 7.41816 17.9987 8.07459L17.9996 8.74596V9.9249C18.0018 10.5816 17.9949 11.2384 17.9789 11.8949L17.9735 12.0695C17.9663 12.2711 17.9573 12.47 17.9465 12.7103C17.9015 13.6678 17.7485 14.3212 17.5271 14.8944C17.3018 15.4954 16.9476 16.0397 16.4895 16.4892C16.0395 16.9466 15.4953 17.3007 14.8948 17.5268C14.3215 17.7491 13.6681 17.9003 12.7106 17.9453C12.4703 17.9561 12.2714 17.9651 12.0698 17.9723L11.8952 17.9777C11.2387 17.9937 10.5819 18.0006 9.92521 17.9984L9.25384 17.9993H8.0758C7.41907 18.0015 6.76235 17.9946 6.10581 17.9786L5.93122 17.9732C5.71758 17.9654 5.50398 17.9564 5.29045 17.9462C4.3329 17.9012 3.67953 17.7482 3.10536 17.5268C2.50481 17.3012 1.96083 16.9471 1.51154 16.4892C1.05351 16.0394 0.699085 15.4952 0.472995 14.8944C0.250706 14.3212 0.0995141 13.6678 0.0545165 12.7103C0.0444936 12.4967 0.035494 12.2831 0.0275179 12.0695L0.0230182 11.8949C0.00642628 11.2384 -0.00107414 10.5816 0.000519274 9.9249V8.07459C-0.00199247 7.41817 0.0046079 6.76174 0.0203183 6.10549L0.026618 5.9309C0.0338176 5.72931 0.0428171 5.52952 0.0536166 5.29014C0.0986143 4.33169 0.249806 3.67922 0.472095 3.10505C0.698319 2.50444 1.05343 1.96071 1.51244 1.51213C1.96142 1.05383 2.50506 0.699087 3.10536 0.472683C3.67953 0.250395 4.332 0.0992023 5.29045 0.0542046L5.93122 0.027206L6.10581 0.0227063C6.76204 0.00612273 7.41847 -0.00137769 8.07491 0.00020741L9.92521 0.0011073ZM9.00006 4.50088C8.40384 4.49244 7.8119 4.60259 7.25863 4.82492C6.70535 5.04725 6.20178 5.37732 5.77718 5.79596C5.35258 6.2146 5.01542 6.71345 4.78529 7.26352C4.55516 7.8136 4.43665 8.40392 4.43665 9.0002C4.43665 9.59647 4.55516 10.1868 4.78529 10.7369C5.01542 11.2869 5.35258 11.7858 5.77718 12.2044C6.20178 12.6231 6.70535 12.9531 7.25863 13.1755C7.8119 13.3978 8.40384 13.5079 9.00006 13.4995C10.1935 13.4995 11.338 13.0254 12.1819 12.1816C13.0257 11.3377 13.4998 10.1932 13.4998 8.99975C13.4998 7.80633 13.0257 6.6618 12.1819 5.81793C11.338 4.97406 10.1935 4.50088 9.00006 4.50088ZM9.00006 6.30078C9.3587 6.29418 9.71506 6.3591 10.0483 6.49176C10.3816 6.62442 10.6851 6.82217 10.9411 7.07343C11.197 7.3247 11.4004 7.62447 11.5392 7.95521C11.6781 8.28595 11.7496 8.64104 11.7497 8.99974C11.7497 9.35844 11.6783 9.71355 11.5396 10.0443C11.4009 10.3751 11.1976 10.675 10.9417 10.9263C10.6858 11.1777 10.3824 11.3755 10.0492 11.5083C9.71594 11.6411 9.3596 11.7061 9.00096 11.6996C8.28491 11.6996 7.59819 11.4152 7.09187 10.9088C6.58555 10.4025 6.3011 9.71579 6.3011 8.99975C6.3011 8.2837 6.58555 7.59698 7.09187 7.09065C7.59819 6.58433 8.28491 6.29988 9.00096 6.29988L9.00006 6.30078ZM13.7248 3.15095C13.4345 3.16257 13.1599 3.28607 12.9586 3.4956C12.7573 3.70513 12.6449 3.98442 12.6449 4.27499C12.6449 4.56555 12.7573 4.84485 12.9586 5.05437C13.1599 5.2639 13.4345 5.38741 13.7248 5.39903C14.0232 5.39903 14.3093 5.28051 14.5203 5.06954C14.7312 4.85857 14.8498 4.57244 14.8498 4.27409C14.8498 3.97573 14.7312 3.6896 14.5203 3.47863C14.3093 3.26767 14.0232 3.14915 13.7248 3.14915V3.15095Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
4
newspaper/partials/icons/link-icon.hbs
Normal file
4
newspaper/partials/icons/link-icon.hbs
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50%" cy="50%" r="50%" fill="var(--text-color)"/>
|
||||
<path d="M10.8795 11.6564L9.32383 13.2121C8.78584 13.7501 8.15477 14.0363 7.43062 14.0708C6.70647 14.1053 6.1001 13.878 5.61152 13.3889C5.12244 12.8998 4.89514 12.2932 4.92962 11.569C4.9641 10.8449 5.25033 10.214 5.78829 9.67655L7.34393 8.12091L8.05104 8.82802L6.4954 10.3837C6.17131 10.7077 5.99895 11.0863 5.97833 11.5194C5.95771 11.9525 6.09471 12.3164 6.38933 12.611C6.68396 12.9057 7.04783 13.0427 7.48093 13.022C7.91403 13.0014 8.29263 12.8291 8.61672 12.505L10.1724 10.9493L10.8795 11.6564ZM8.29852 11.409L7.59142 10.7019L10.7027 7.59058L11.4098 8.29769L8.29852 11.409ZM11.6573 10.8786L10.9502 10.1715L12.5058 8.61589C12.8299 8.2918 13.0023 7.9132 13.0229 7.4801C13.0435 7.047 12.9065 6.68313 12.6119 6.3885C12.3172 6.09388 11.9534 5.95687 11.5203 5.9775C11.0872 5.99812 10.7086 6.17048 10.3845 6.49457L8.82885 8.0502L8.12175 7.3431L9.67738 5.78746C10.2154 5.24947 10.8464 4.96324 11.5706 4.92875C12.2947 4.89427 12.9011 5.12158 13.3897 5.61069C13.8788 6.09977 14.1061 6.70638 14.0716 7.43053C14.0371 8.15468 13.7509 8.7855 13.2129 9.323L11.6573 10.8786Z" fill="var(--background-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
newspaper/partials/icons/linkedin-icon.hbs
Normal file
3
newspaper/partials/icons/linkedin-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V16C18 16.5304 17.7893 17.0391 17.4142 17.4142C17.0391 17.7893 16.5304 18 16 18H2C1.46957 18 0.960859 17.7893 0.585786 17.4142C0.210714 17.0391 0 16.5304 0 16V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H16ZM15.5 15.5V10.2C15.5 9.33539 15.1565 8.5062 14.5452 7.89483C13.9338 7.28346 13.1046 6.94 12.24 6.94C11.39 6.94 10.4 7.46 9.92 8.24V7.13H7.13V15.5H9.92V10.57C9.92 9.8 10.54 9.17 11.31 9.17C11.6813 9.17 12.0374 9.3175 12.2999 9.58005C12.5625 9.8426 12.71 10.1987 12.71 10.57V15.5H15.5ZM3.88 5.56C4.32556 5.56 4.75288 5.383 5.06794 5.06794C5.383 4.75288 5.56 4.32556 5.56 3.88C5.56 2.95 4.81 2.19 3.88 2.19C3.43178 2.19 3.00193 2.36805 2.68499 2.68499C2.36805 3.00193 2.19 3.43178 2.19 3.88C2.19 4.81 2.95 5.56 3.88 5.56ZM5.27 15.5V7.13H2.5V15.5H5.27Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1021 B |
4
newspaper/partials/icons/location-icon.hbs
Normal file
4
newspaper/partials/icons/location-icon.hbs
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50%" cy="50%" r="50%" fill="var(--text-color)"/>
|
||||
<path d="M11 5.75C8.92977 5.75 7.25 7.26195 7.25 9.125C7.25 12.125 11 16.25 11 16.25C11 16.25 14.75 12.125 14.75 9.125C14.75 7.26195 13.0702 5.75 11 5.75ZM11 11C10.7033 11 10.4133 10.912 10.1666 10.7472C9.91997 10.5824 9.72771 10.3481 9.61418 10.074C9.50065 9.79994 9.47094 9.49834 9.52882 9.20736C9.5867 8.91639 9.72956 8.64912 9.93934 8.43934C10.1491 8.22956 10.4164 8.0867 10.7074 8.02882C10.9983 7.97094 11.2999 8.00065 11.574 8.11418C11.8481 8.22771 12.0824 8.41997 12.2472 8.66664C12.412 8.91332 12.5 9.20333 12.5 9.5C12.4996 9.89769 12.3414 10.279 12.0602 10.5602C11.779 10.8414 11.3977 10.9996 11 11Z" fill="var(--background-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 819 B |
3
newspaper/partials/icons/lock-icon.hbs
Normal file
3
newspaper/partials/icons/lock-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3337 5.99992V4.66659C11.3337 2.79992 9.86699 1.33325 8.00033 1.33325C6.13366 1.33325 4.66699 2.79992 4.66699 4.66659V5.99992C3.53366 5.99992 2.66699 6.86658 2.66699 7.99992V12.6666C2.66699 13.7999 3.53366 14.6666 4.66699 14.6666H11.3337C12.467 14.6666 13.3337 13.7999 13.3337 12.6666V7.99992C13.3337 6.86658 12.467 5.99992 11.3337 5.99992ZM6.00033 4.66659C6.00033 3.53325 6.86699 2.66659 8.00033 2.66659C9.13366 2.66659 10.0003 3.53325 10.0003 4.66659V5.99992H6.00033V4.66659Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 628 B |
3
newspaper/partials/icons/pinterest-icon.hbs
Normal file
3
newspaper/partials/icons/pinterest-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.688 18.563C7.6 18.8385 8.5215 19 9.5 19C12.0196 19 14.4359 17.9991 16.2175 16.2175C17.9991 14.4359 19 12.0196 19 9.5C19 8.25244 18.7543 7.0171 18.2769 5.86451C17.7994 4.71191 17.0997 3.66464 16.2175 2.78249C15.3354 1.90033 14.2881 1.20056 13.1355 0.723144C11.9829 0.245725 10.7476 0 9.5 0C8.25244 0 7.0171 0.245725 5.86451 0.723144C4.71191 1.20056 3.66464 1.90033 2.78249 2.78249C1.00089 4.56408 0 6.98044 0 9.5C0 13.5375 2.5365 17.005 6.118 18.373C6.0325 17.632 5.947 16.4065 6.118 15.561L7.2105 10.868C7.2105 10.868 6.935 10.317 6.935 9.443C6.935 8.132 7.752 7.1535 8.683 7.1535C9.5 7.1535 9.88 7.752 9.88 8.5215C9.88 9.3385 9.3385 10.507 9.063 11.628C8.9015 12.559 9.557 13.376 10.507 13.376C12.198 13.376 13.509 11.571 13.509 9.025C13.509 6.745 11.875 5.187 9.5285 5.187C6.8495 5.187 5.2725 7.182 5.2725 9.2815C5.2725 10.0985 5.5385 10.925 5.9755 11.4665C6.061 11.5235 6.061 11.5995 6.0325 11.742L5.757 12.7775C5.757 12.939 5.6525 12.996 5.491 12.882C4.275 12.35 3.572 10.621 3.572 9.2245C3.572 6.2225 5.7 3.496 9.804 3.496C13.072 3.496 15.618 5.8425 15.618 8.9585C15.618 12.2265 13.5945 14.8485 10.697 14.8485C9.7755 14.8485 8.873 14.3545 8.55 13.775L7.9135 16.0265C7.695 16.8435 7.0965 17.936 6.688 18.5915V18.563Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
newspaper/partials/icons/placeholder.hbs
Normal file
3
newspaper/partials/icons/placeholder.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="28%" height="28%" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50 141.667H150L118.75 100L93.75 133.333L75 108.333L50 141.667ZM25 175V25H175V175H25ZM41.6667 158.333H158.333V41.6667H41.6667V158.333Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 282 B |
3
newspaper/partials/icons/search-icon.hbs
Normal file
3
newspaper/partials/icons/search-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.91536 14.2502C9.32055 14.2499 10.6853 13.7795 11.7922 12.9138L15.2723 16.394L16.3917 15.2746L12.9116 11.7944C13.7777 10.6874 14.2484 9.32238 14.2487 7.91683C14.2487 4.42479 11.4074 1.5835 7.91536 1.5835C4.42332 1.5835 1.58203 4.42479 1.58203 7.91683C1.58203 11.4089 4.42332 14.2502 7.91536 14.2502ZM7.91536 3.16683C10.535 3.16683 12.6654 5.2972 12.6654 7.91683C12.6654 10.5365 10.535 12.6668 7.91536 12.6668C5.29574 12.6668 3.16536 10.5365 3.16536 7.91683C3.16536 5.2972 5.29574 3.16683 7.91536 3.16683Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 655 B |
12
newspaper/partials/icons/section-heading-arrow.hbs
Normal file
12
newspaper/partials/icons/section-heading-arrow.hbs
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 26 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_134_4019)">
|
||||
<path d="M-24.5391 5L24.3263 5" stroke="var(--text-color)"/>
|
||||
<path d="M18.614 9.375C18.614 9.375 18.4236 5.125 24.3255 5" stroke="var(--text-color)"/>
|
||||
<path d="M18.614 0.625C18.614 0.625 18.4236 4.875 24.3255 5" stroke="var(--text-color)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_134_4019">
|
||||
<rect width="25.3846" height="10" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 565 B |
3
newspaper/partials/icons/settings-icon.hbs
Normal file
3
newspaper/partials/icons/settings-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.5006 12C19.5006 11.77 19.4906 11.55 19.4706 11.32L21.3306 9.91C21.7306 9.61 21.8406 9.05 21.5906 8.61L19.7206 5.38C19.6007 5.16818 19.4068 5.00814 19.1761 4.93062C18.9454 4.8531 18.6941 4.86356 18.4706 4.96L16.3206 5.87C15.9506 5.61 15.5606 5.38 15.1506 5.19L14.8606 2.88C14.8006 2.38 14.3706 2 13.8706 2H10.1406C9.63064 2 9.20064 2.38 9.14064 2.88L8.85064 5.19C8.44064 5.38 8.05064 5.61 7.68064 5.87L5.53064 4.96C5.07064 4.76 4.53064 4.94 4.28064 5.38L2.41064 8.62C2.16064 9.06 2.27064 9.61 2.67064 9.92L4.53064 11.33C4.48919 11.779 4.48919 12.231 4.53064 12.68L2.67064 14.09C2.27064 14.39 2.16064 14.95 2.41064 15.39L4.28064 18.62C4.53064 19.06 5.07064 19.24 5.53064 19.04L7.68064 18.13C8.05064 18.39 8.44064 18.62 8.85064 18.81L9.14064 21.12C9.20064 21.62 9.63064 22 10.1306 22H13.8606C14.3606 22 14.7906 21.62 14.8506 21.12L15.1406 18.81C15.5506 18.62 15.9406 18.39 16.3106 18.13L18.4606 19.04C18.9206 19.24 19.4606 19.06 19.7106 18.62L21.5806 15.39C21.8306 14.95 21.7206 14.4 21.3206 14.09L19.4606 12.68C19.4906 12.45 19.5006 12.23 19.5006 12ZM12.0406 15.5C10.1106 15.5 8.54064 13.93 8.54064 12C8.54064 10.07 10.1106 8.5 12.0406 8.5C13.9706 8.5 15.5406 10.07 15.5406 12C15.5406 13.93 13.9706 15.5 12.0406 15.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
newspaper/partials/icons/success-icon.hbs
Normal file
3
newspaper/partials/icons/success-icon.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg class="notification-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0.375C12.5527 0.375 15.0009 1.38906 16.8059 3.1941C18.6109 4.99913 19.625 7.44729 19.625 10C19.625 12.5527 18.6109 15.0009 16.8059 16.8059C15.0009 18.6109 12.5527 19.625 10 19.625C7.44729 19.625 4.99913 18.6109 3.1941 16.8059C1.38906 15.0009 0.375 12.5527 0.375 10C0.375 7.44729 1.38906 4.99913 3.1941 3.1941C4.99913 1.38906 7.44729 0.375 10 0.375ZM8.801 11.8989L6.66288 9.75937C6.58622 9.68272 6.49523 9.62192 6.39508 9.58044C6.29493 9.53895 6.18759 9.5176 6.07919 9.5176C5.97079 9.5176 5.86345 9.53895 5.7633 9.58044C5.66315 9.62192 5.57215 9.68272 5.4955 9.75937C5.3407 9.91418 5.25373 10.1241 5.25373 10.3431C5.25373 10.562 5.3407 10.7719 5.4955 10.9268L8.218 13.6493C8.29444 13.7263 8.38536 13.7874 8.48554 13.8292C8.58572 13.8709 8.69317 13.8924 8.80169 13.8924C8.91021 13.8924 9.01765 13.8709 9.11783 13.8292C9.21801 13.7874 9.30894 13.7263 9.38538 13.6493L15.0229 8.01038C15.1005 7.93404 15.1623 7.84309 15.2047 7.74275C15.247 7.64242 15.2691 7.53469 15.2696 7.42579C15.2701 7.31689 15.2491 7.20896 15.2076 7.10824C15.1662 7.00751 15.1053 6.91599 15.0283 6.83893C14.9514 6.76188 14.8599 6.70083 14.7592 6.6593C14.6586 6.61777 14.5507 6.59658 14.4418 6.59696C14.3328 6.59734 14.2251 6.61927 14.1247 6.6615C14.0243 6.70373 13.9333 6.76542 13.8569 6.843L8.801 11.8989Z" fill="var(--success-color)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
4
newspaper/partials/icons/twitter-icon.hbs
Normal file
4
newspaper/partials/icons/twitter-icon.hbs
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.985 0H0L7.0623 9.41783L0.38475 17.1H2.6505L8.11224 10.8166L12.825 17.1H18.81L11.4502 7.28631L17.784 0H15.5182L10.4002 5.88753L5.985 0ZM13.68 15.39L3.42 1.71H5.13L15.39 15.39H13.68Z" fill="var(--text-color)"/>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 333 B |
17
newspaper/partials/navigation.hbs
Normal file
17
newspaper/partials/navigation.hbs
Normal file
@ -0,0 +1,17 @@
|
||||
{{#if isSecondary}}
|
||||
<ul class="footer-nav">
|
||||
{{#foreach navigation type="secondary" }}
|
||||
<li class="footer-nav-{{slug}}{{#if current}} nav-current{{/if}}" data-label="{{label}}">
|
||||
<a class="footer-nav-link hover-underline" href="{{url absolute="true"}}">{{label}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<ul class="nav">
|
||||
{{#foreach navigation}}
|
||||
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" data-label="{{label}}">
|
||||
<a class="nav-link hover-underline" href="{{url absolute="true"}}">{{label}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
9
newspaper/partials/pagination.hbs
Normal file
9
newspaper/partials/pagination.hbs
Normal file
@ -0,0 +1,9 @@
|
||||
<custom-pagination id="custom-pagination" data-current-page="1" data-is-archivepage="{{is_archivepage}}">
|
||||
<nav class="pagination-nav">
|
||||
{{#if next}}
|
||||
<button id="load-more-btn" class="pagination-button button" style="display: {{#if pagination.next}}flex{{else}}none{{/if}}">
|
||||
{{t "Load more"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</nav>
|
||||
</custom-pagination>
|
||||
18
newspaper/post.hbs
Normal file
18
newspaper/post.hbs
Normal file
@ -0,0 +1,18 @@
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/toggle-card.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-content.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/related-posts.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
|
||||
{{!-- Table of Contents --}}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/table-of-contents.css"}}" />
|
||||
|
||||
{{!< default}}
|
||||
|
||||
{{#post}}
|
||||
<main>
|
||||
{{> "components/article" isPost=true}}
|
||||
</main>
|
||||
{{/post}}
|
||||
148
newspaper/tag.hbs
Normal file
148
newspaper/tag.hbs
Normal file
@ -0,0 +1,148 @@
|
||||
{{!< default}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/slider.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/column-layout.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/cards.css"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/simple-hero.css"}}" />
|
||||
|
||||
<main class="main">
|
||||
<section class="simple-hero{{#match @custom.tag_page_layout "Column"}} hide-on-desktop{{/match}}">
|
||||
<div class="wide-container simple-hero-inner">
|
||||
{{#tag}}
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{name}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/tag}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#match @custom.tag_page_layout "Column"}}
|
||||
<section class="column-layout hide-on-mobile">
|
||||
<div class="column-layout-grid">
|
||||
<div class="left-column">
|
||||
{{#tag}}
|
||||
<div class="text-card">
|
||||
<h1 class="text-card-heading">{{name}}</h1>
|
||||
|
||||
<div class="text-card-paragraph">
|
||||
<p>
|
||||
{{description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/tag}}
|
||||
|
||||
{{#foreach posts from="2" to="3"}}
|
||||
{{> "components/extra-small-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
<div class="center-column">
|
||||
{{#foreach posts limit="1"}}
|
||||
{{> "components/big-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{#tag}}
|
||||
{{#get "tags" filter='slug:-{{slug}}' include="count.posts" limit="4"}}
|
||||
{{#if tags}}
|
||||
<div class="right-column">
|
||||
<div class="section-heading-slider">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Other Tags"}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-outer">
|
||||
<div class="slider-inner featured-slider">
|
||||
{{#foreach tags}}
|
||||
{{> "components/extra-small-side-card" }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/tag}}
|
||||
</div>
|
||||
</section>
|
||||
{{/match}}
|
||||
|
||||
<section class="articles-grid-section">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span class="section-heading-title">
|
||||
{{t "Latest Articles"}}
|
||||
</span>
|
||||
|
||||
<span id="data-length" class="section-heading-article-number" data-length="{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}">
|
||||
{{plural pagination.total empty=(t "No Articles") singular=(t "1 Article") plural=(t "% Articles")}}
|
||||
</span>
|
||||
|
||||
{{#tag}}
|
||||
<a id="homepage-section-heading-button" href="{{@site.url}}/tag/{{slug}}/" class="section-heading-button hidden">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{/tag}}
|
||||
</div>
|
||||
|
||||
<div id="pagination-grid" class="grid pagination-grid">
|
||||
{{#foreach posts}}
|
||||
{{> "components/small-card" isForGrid=true }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
||||
{{pagination}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#tag}}
|
||||
{{#get "tags" filter='slug:-{{slug}}' limit="6" include="count.posts"}}
|
||||
{{#if tags}}
|
||||
<section class="footer-slider hide-on-desktop">
|
||||
<div class="wide-container">
|
||||
<div class="section-heading">
|
||||
<span>
|
||||
{{t "Other Tags"}}
|
||||
</span>
|
||||
|
||||
{{#match @custom.use_custom_pages "All Custom Pages"}}
|
||||
<a href="{{@site.url}}/tags/" class="section-heading-button">
|
||||
{{t "View All"}}
|
||||
|
||||
<div class="section-heading-arrow">
|
||||
{{> "icons/section-heading-arrow"}}
|
||||
</div>
|
||||
</a>
|
||||
{{else}}
|
||||
{{plural tags.length empty=(t "No Tags") singular=(t "1 Tag") plural=(t "% Tags")}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider-outer section-padding-small">
|
||||
<div class="slider-inner">
|
||||
{{#foreach tags}}
|
||||
{{> "components/slide-card" title=name }}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/tag}}
|
||||
</main>
|
||||
Reference in New Issue
Block a user