Posodobljeni meniji pri clankih
Deploy to Production on Develop Push / deploy (push) Successful in 1m15s
Deploy to Production on Develop Push / deploy (push) Successful in 1m15s
This commit is contained in:
Mark Poljanšek committed
1 parent
90055985fd
commit
28c097a959
9 files changed
+3053
-2537
No files matched your search
+208
-19
@@ -1,3 +1,5 @@
|
||||
/* css/pages/_article.css */
|
||||
|
||||
/* ==========================================================================
|
||||
Single Article/Project Page Specific Styles
|
||||
========================================================================== */
|
||||
@@ -6,29 +8,194 @@
|
||||
* Ta datoteka vsebuje stile, ki se uporabljajo izključno na strani s
|
||||
* posameznim člankom ali projektom.
|
||||
*
|
||||
* 1. Glavna postavitev strani članka
|
||||
* 2. Glava članka (naslov, podnaslov, datum)
|
||||
* 3. Glavna slika in slike v vsebini
|
||||
* 4. Telo članka (vsebina, tipografija, citati)
|
||||
* 5. Noga članka (avtor, deljenje)
|
||||
* 6. Poziv k prijavi na novice (CTA)
|
||||
* 7. Stili za stran s člankom na mobilnih napravah
|
||||
* 1. Glavna postavitev strani članka (z levo navigacijo)
|
||||
* 2. Lepljiva leva navigacija (Scrollspy - Desktop)
|
||||
* 3. Lepljiva zgornja vrstica z naslovom in progress barom (Mobile)
|
||||
* 4. Glava članka (naslov, podnaslov, datum)
|
||||
* 5. Glavna slika in slike v vsebini
|
||||
* 6. Telo članka (vsebina, tipografija, citati)
|
||||
* 7. Noga članka (avtor, deljenje)
|
||||
* 8. Poziv k prijavi na novice (CTA)
|
||||
* 9. Stili za stran s člankom na mobilnih napravah
|
||||
*/
|
||||
|
||||
/* 1. Glavna postavitev strani članka */
|
||||
/* ==========================================================================
|
||||
1. Glavna postavitev strani članka
|
||||
========================================================================== */
|
||||
|
||||
.article-page {
|
||||
padding-top: 80px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
max-width: 1024px;
|
||||
.article-layout-container {
|
||||
display: flex;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 32px;
|
||||
padding: 0 32px;
|
||||
gap: 64px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* 2. Glava članka */
|
||||
.article-container {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. Lepljiva leva navigacija (Scrollspy - Desktop) - POSODOBLJENO
|
||||
========================================================================== */
|
||||
|
||||
.article-sidebar {
|
||||
width: 288px;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
height: calc(100vh - 140px);
|
||||
margin-top: 48px; /* NOVO: Doda začetni odmik od vrha */
|
||||
}
|
||||
|
||||
.scrollspy-nav {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollspy-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border-left: 2px solid #EAECF0;
|
||||
}
|
||||
|
||||
.scrollspy-nav li a {
|
||||
display: block;
|
||||
padding: 12px 24px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #667085;
|
||||
border-left: 2px solid transparent;
|
||||
margin-left: -2px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.scrollspy-nav li a:hover {
|
||||
color: #101828;
|
||||
background-color: #F9FAFB;
|
||||
}
|
||||
|
||||
.scrollspy-nav li a.active {
|
||||
color: #2D738C;
|
||||
font-weight: 600;
|
||||
border-left-color: #2D738C;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. Lepljiva zgornja vrstica (Mobile)
|
||||
========================================================================== */
|
||||
.mobile-article-header {
|
||||
display: none;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 900;
|
||||
border-bottom: 1px solid #EAECF0;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.mobile-article-header .fa-chevron-down {
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mobile-article-header.open .fa-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#mobile-article-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #101828;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-grow: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #EAECF0;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: #2D738C;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.mobile-scrollspy-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-top: 1px solid #EAECF0;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
|
||||
}
|
||||
|
||||
.mobile-scrollspy-dropdown.open {
|
||||
max-height: 50vh;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-scrollspy-dropdown ul {
|
||||
list-style: none;
|
||||
padding: 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-scrollspy-dropdown a {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
color: #344054;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-scrollspy-dropdown a:hover,
|
||||
.mobile-scrollspy-dropdown a.active {
|
||||
background-color: #F9FAFB;
|
||||
color: #2D738C;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
4. Glava članka
|
||||
========================================================================== */
|
||||
|
||||
.article-header {
|
||||
text-align: center;
|
||||
@@ -61,7 +228,9 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* 3. Glavna slika in slike v vsebini */
|
||||
/* ==========================================================================
|
||||
5. Glavna slika in slike v vsebini
|
||||
========================================================================== */
|
||||
|
||||
.article-main-image {
|
||||
margin: 0 0 64px 0;
|
||||
@@ -95,7 +264,9 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 4. Telo članka */
|
||||
/* ==========================================================================
|
||||
6. Telo članka
|
||||
========================================================================== */
|
||||
|
||||
.article-body {
|
||||
max-width: 720px;
|
||||
@@ -118,6 +289,7 @@
|
||||
line-height: 38px;
|
||||
color: #101828;
|
||||
margin: 16px 0;
|
||||
scroll-margin-top: 120px;
|
||||
}
|
||||
|
||||
.article-body ol {
|
||||
@@ -127,7 +299,6 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Stil za citat */
|
||||
.article-quote {
|
||||
margin: 16px 0;
|
||||
padding-left: 20px;
|
||||
@@ -157,7 +328,9 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 5. Noga članka */
|
||||
/* ==========================================================================
|
||||
7. Noga članka
|
||||
========================================================================== */
|
||||
|
||||
.article-footer {
|
||||
max-width: 720px;
|
||||
@@ -209,7 +382,9 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 6. Poziv k prijavi na novice (CTA) */
|
||||
/* ==========================================================================
|
||||
8. Poziv k prijavi na novice (CTA)
|
||||
========================================================================== */
|
||||
|
||||
.newsletter-cta {
|
||||
padding: 0 32px 96px 32px;
|
||||
@@ -276,15 +451,28 @@
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Mobile Article Page Styles
|
||||
9. Mobile Article Page Styles
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.article-page {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.article-layout-container {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-article-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
@@ -327,6 +515,7 @@
|
||||
.article-body h2 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
scroll-margin-top: 120px;
|
||||
}
|
||||
|
||||
.article-quote p {
|
||||
|
||||
Reference in new issue
Block a user