Jacek Pyziak
4d5e220b3c
- Introduced a new WordPress theme "BackPRO News" with a lightweight magazine-style design. - Added columns for tracking retry attempts and timestamps for unpublished/generated articles in the articles table. - Included remote service metadata fields in the sites table for better management. - Created log files for image replacements, installer actions, OpenAI article generation, and publishing processes. - Implemented a dashboard template for site management, including permalink settings and theme installation options.
605 lines
9.9 KiB
CSS
605 lines
9.9 KiB
CSS
/*
|
|
Theme Name: BackPRO News
|
|
Theme URI: https://backpro.projectpro.pl/
|
|
Author: BackPRO
|
|
Author URI: https://backpro.projectpro.pl/
|
|
Description: Lightweight magazine-style blog theme for BackPRO with auto category sections on homepage.
|
|
Version: 1.0.0
|
|
Requires at least: 6.0
|
|
Tested up to: 6.6
|
|
Requires PHP: 7.4
|
|
Text Domain: backpro-news
|
|
*/
|
|
|
|
:root {
|
|
--bp-bg: #f5f7fb;
|
|
--bp-surface: #ffffff;
|
|
--bp-text: #152033;
|
|
--bp-muted: #63708a;
|
|
--bp-accent: #0c6cf2;
|
|
--bp-border: #dce2ec;
|
|
--bp-radius: 14px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
|
color: var(--bp-text);
|
|
background: linear-gradient(180deg, #f7f8fc 0%, var(--bp-bg) 100%);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.bp-shell {
|
|
max-width: 1220px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.bp-header {
|
|
background: var(--bp-surface);
|
|
border-bottom: 1px solid var(--bp-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.bp-header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 78px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.bp-brand {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.3px;
|
|
color: var(--bp-accent);
|
|
}
|
|
|
|
.bp-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.bp-nav a {
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
color: var(--bp-muted);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.bp-nav a:hover {
|
|
background: #ecf3ff;
|
|
color: var(--bp-accent);
|
|
}
|
|
|
|
.bp-main {
|
|
padding: 26px 0 46px;
|
|
}
|
|
|
|
.bp-grid {
|
|
display: grid;
|
|
gap: 20px;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.bp-section {
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: var(--bp-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bp-section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.bp-section-head h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.bp-section-head a {
|
|
font-size: 13px;
|
|
color: var(--bp-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bp-section-body {
|
|
padding: 16px;
|
|
display: grid;
|
|
gap: 14px;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
}
|
|
|
|
.bp-lead-title {
|
|
margin: 0 0 8px;
|
|
font-size: 24px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.bp-lead-media {
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bp-lead-image {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--bp-border);
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
background: #e9eef7;
|
|
}
|
|
|
|
.bp-lead-excerpt {
|
|
margin: 0;
|
|
color: var(--bp-muted);
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.bp-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.bp-list a {
|
|
display: block;
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed var(--bp-border);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bp-list li:last-child a {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.bp-mini-grid {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
align-content: start;
|
|
align-items: start;
|
|
grid-auto-rows: max-content;
|
|
}
|
|
|
|
.bp-mini-card {
|
|
min-width: 0;
|
|
align-self: start;
|
|
}
|
|
|
|
.bp-mini-media {
|
|
display: block;
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
border: 1px solid var(--bp-border);
|
|
background: #e9eef7;
|
|
}
|
|
|
|
.bp-mini-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: 0;
|
|
border: 0;
|
|
object-fit: cover;
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.bp-mini-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, #e6ebf5 0%, #d9e2f1 100%);
|
|
}
|
|
|
|
.bp-mini-label {
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 8px;
|
|
background: #1c2330;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
padding: 4px 7px;
|
|
}
|
|
|
|
.bp-mini-title {
|
|
display: block;
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.bp-page-head {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.bp-page-head h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 34px;
|
|
}
|
|
|
|
.bp-meta {
|
|
color: var(--bp-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.bp-article-card {
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: var(--bp-radius);
|
|
padding: 22px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.bp-article-card h2 {
|
|
margin: 0 0 8px;
|
|
font-size: 28px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.bp-excerpt {
|
|
margin: 10px 0 0;
|
|
color: var(--bp-muted);
|
|
}
|
|
|
|
.bp-single-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.85fr);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
|
|
.bp-single-article {
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: var(--bp-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bp-single-head {
|
|
padding: 22px 22px 14px;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.bp-single-cats {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.bp-single-cats a {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: var(--bp-accent);
|
|
}
|
|
|
|
.bp-single-title {
|
|
margin: 0;
|
|
font-size: 42px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.bp-single-meta-row {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
color: var(--bp-muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bp-single-meta-row span {
|
|
position: relative;
|
|
}
|
|
|
|
.bp-single-meta-row span:not(:last-child)::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
margin-left: 14px;
|
|
vertical-align: middle;
|
|
background: #9da8bc;
|
|
}
|
|
|
|
.bp-single-lead {
|
|
margin: 16px 0 0;
|
|
color: #33445f;
|
|
font-size: 19px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.bp-single-hero {
|
|
margin: 0;
|
|
position: relative;
|
|
border-bottom: 1px solid var(--bp-border);
|
|
}
|
|
|
|
.bp-single-hero-image {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
background: #e9eef7;
|
|
}
|
|
|
|
.bp-single-content {
|
|
padding: 24px 22px 26px;
|
|
font-size: 19px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.bp-single-content > *:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.bp-single-content > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.bp-single-content h2,
|
|
.bp-single-content h3,
|
|
.bp-single-content h4 {
|
|
margin: 32px 0 12px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.bp-single-content h2 {
|
|
font-size: 31px;
|
|
}
|
|
|
|
.bp-single-content h3 {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.bp-single-content p {
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
.bp-single-content ul,
|
|
.bp-single-content ol {
|
|
margin: 0 0 20px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.bp-single-content li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.bp-single-content blockquote {
|
|
margin: 28px 0;
|
|
padding: 18px 20px;
|
|
border-left: 4px solid var(--bp-accent);
|
|
background: #f0f5ff;
|
|
color: #1e2b42;
|
|
font-size: 21px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.bp-single-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bp-single-sidebar {
|
|
display: grid;
|
|
gap: 14px;
|
|
align-content: start;
|
|
}
|
|
|
|
.bp-side-box {
|
|
background: var(--bp-surface);
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: var(--bp-radius);
|
|
padding: 14px;
|
|
}
|
|
|
|
.bp-side-box h3 {
|
|
margin: 0 0 12px;
|
|
font-size: 18px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.bp-side-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 11px;
|
|
}
|
|
|
|
.bp-side-item {
|
|
display: grid;
|
|
grid-template-columns: 88px 1fr;
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.bp-side-thumb {
|
|
display: block;
|
|
border: 1px solid var(--bp-border);
|
|
overflow: hidden;
|
|
aspect-ratio: 1 / 1;
|
|
background: #e9eef7;
|
|
}
|
|
|
|
.bp-side-thumb-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.bp-side-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.bp-side-title {
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bp-side-date {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: var(--bp-muted);
|
|
}
|
|
|
|
.bp-side-plain {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.bp-side-plain li {
|
|
padding: 10px 0;
|
|
border-top: 1px dashed var(--bp-border);
|
|
}
|
|
|
|
.bp-side-plain li:first-child {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.bp-side-plain a {
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.bp-side-plain span {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--bp-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.bp-side-empty {
|
|
margin: 0;
|
|
color: var(--bp-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.bp-pagination {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bp-pagination .page-numbers {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--bp-border);
|
|
border-radius: 8px;
|
|
background: var(--bp-surface);
|
|
color: var(--bp-muted);
|
|
}
|
|
|
|
.bp-pagination .current {
|
|
color: #fff;
|
|
background: var(--bp-accent);
|
|
border-color: var(--bp-accent);
|
|
}
|
|
|
|
.bp-footer {
|
|
border-top: 1px solid var(--bp-border);
|
|
padding: 28px 0;
|
|
color: var(--bp-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.bp-section-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.bp-single-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.bp-mini-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.bp-page-head h1 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.bp-single-title {
|
|
font-size: 33px;
|
|
}
|
|
|
|
.bp-single-content {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.bp-mini-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.bp-single-head {
|
|
padding: 18px 16px 12px;
|
|
}
|
|
|
|
.bp-single-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.bp-single-content {
|
|
padding: 18px 16px 20px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.bp-single-content blockquote {
|
|
font-size: 19px;
|
|
}
|
|
}
|