Skip to content

Commit 0711876

Browse files
KSemenenkoKSemenenko
committed
stlye
1 parent cfdddf3 commit 0711876

2 files changed

Lines changed: 71 additions & 131 deletions

File tree

‎github-pages/_layouts/default.html‎

Lines changed: 61 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -33,35 +33,32 @@
3333
<meta name="twitter:description" content="{{ page.description | default: site.description }}">
3434
<meta name="twitter:image" content="{{ '/assets/images/og-image.png' | absolute_url }}">
3535

36-
<!-- Google tag (gtag.js) - cookieless -->
37-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FMRJ311LEF"></script>
38-
<script>
39-
window.dataLayer = window.dataLayer || [];
40-
function gtag(){dataLayer.push(arguments);}
41-
42-
gtag('consent', 'default', {
43-
'analytics_storage': 'denied',
44-
'ad_storage': 'denied'
45-
});
46-
47-
gtag('js', new Date());
48-
gtag('config', 'G-FMRJ311LEF');
49-
</script>
50-
5136
<!-- Favicon -->
5237
<link rel="icon" type="image/svg+xml" href="{{ '/assets/images/favicon.svg' | relative_url }}">
5338

5439
<!-- Theme Color -->
5540
<meta name="theme-color" content="#785D8F">
5641
<meta name="msapplication-TileColor" content="#785D8F">
5742

58-
<!-- Fonts -->
43+
<!-- Preconnect for performance -->
5944
<link rel="preconnect" href="https://fonts.googleapis.com">
6045
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
61-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
46+
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
6247

63-
<!-- Stylesheet -->
64-
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
48+
<!-- Critical CSS inline -->
49+
<style>
50+
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;background:#fff}
51+
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 60px;max-width:1280px;margin:0 auto}
52+
.main{max-width:860px;margin:0 auto;padding:40px 60px}
53+
</style>
54+
55+
<!-- Stylesheet - non-blocking -->
56+
<link rel="preload" href="{{ '/assets/css/style.css' | relative_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
57+
<noscript><link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}"></noscript>
58+
59+
<!-- Fonts - non-blocking -->
60+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
61+
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
6562

6663
<!-- Structured Data -->
6764
<script type="application/ld+json">
@@ -116,67 +113,62 @@
116113
</div>
117114
</footer>
118115

116+
<!-- Scripts at end of body -->
119117
<script>
120-
// TOC navigation
121-
document.querySelectorAll('.toc a').forEach(link => {
122-
link.addEventListener('click', function(e) {
123-
e.preventDefault();
124-
const text = this.textContent.trim().toLowerCase();
125-
const headings = document.querySelectorAll('h2');
126-
for (const h of headings) {
127-
if (h.textContent.toLowerCase().includes(text)) {
128-
h.scrollIntoView({ behavior: 'smooth', block: 'start' });
129-
break;
130-
}
131-
}
132-
});
133-
});
118+
// Dark mode - run immediately to prevent flash
119+
(function(){
120+
var d=document.body,t=document.getElementById('dark-toggle'),
121+
s=localStorage.getItem('darkMode'),
122+
p=window.matchMedia('(prefers-color-scheme:dark)').matches;
123+
if(s==='true'||(s===null&&p)){d.classList.add('dark');if(t)t.checked=true}
124+
if(t)t.onchange=function(){d.classList.toggle('dark');localStorage.setItem('darkMode',d.classList.contains('dark'))}
125+
})();
126+
</script>
134127

128+
<!-- Deferred scripts -->
129+
<script defer>
135130
// Back to top
136-
const backToTop = document.getElementById('back-to-top');
137-
window.addEventListener('scroll', () => {
138-
if (window.scrollY > 400) {
139-
backToTop.classList.add('visible');
140-
} else {
141-
backToTop.classList.remove('visible');
131+
var b=document.getElementById('back-to-top');
132+
window.onscroll=function(){b.classList.toggle('visible',window.scrollY>400)};
133+
b.onclick=function(){window.scrollTo({top:0,behavior:'smooth'})};
134+
135+
// TOC navigation
136+
document.querySelectorAll('.toc a').forEach(function(l){
137+
l.onclick=function(e){
138+
e.preventDefault();
139+
var t=this.textContent.trim().toLowerCase();
140+
document.querySelectorAll('h2').forEach(function(h){
141+
if(h.textContent.toLowerCase().includes(t))h.scrollIntoView({behavior:'smooth',block:'start'})
142+
})
142143
}
143144
});
144-
backToTop.addEventListener('click', () => {
145-
window.scrollTo({ top: 0, behavior: 'smooth' });
146-
});
147145

148146
// Copy code button
149-
document.querySelectorAll('pre').forEach(pre => {
150-
const btn = document.createElement('button');
151-
btn.className = 'copy-btn';
152-
btn.textContent = 'Copy';
153-
btn.addEventListener('click', () => {
154-
const code = pre.querySelector('code') || pre;
155-
navigator.clipboard.writeText(code.textContent).then(() => {
156-
btn.textContent = 'Copied!';
157-
setTimeout(() => btn.textContent = 'Copy', 2000);
158-
});
159-
});
160-
pre.style.position = 'relative';
161-
pre.appendChild(btn);
147+
document.querySelectorAll('pre').forEach(function(p){
148+
var b=document.createElement('button');
149+
b.className='copy-btn';b.textContent='Copy';
150+
b.onclick=function(){
151+
navigator.clipboard.writeText((p.querySelector('code')||p).textContent).then(function(){
152+
b.textContent='Copied!';setTimeout(function(){b.textContent='Copy'},2000)
153+
})
154+
};
155+
p.style.position='relative';p.appendChild(b)
162156
});
157+
</script>
163158

164-
// Dark mode
165-
const darkToggle = document.getElementById('dark-toggle');
166-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
167-
const stored = localStorage.getItem('darkMode');
159+
<!-- Google tag (gtag.js) - cookieless -->
160+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FMRJ311LEF"></script>
161+
<script>
162+
window.dataLayer = window.dataLayer || [];
163+
function gtag(){dataLayer.push(arguments);}
168164

169-
if (stored === 'true' || (stored === null && prefersDark)) {
170-
document.body.classList.add('dark');
171-
if (darkToggle) darkToggle.checked = true;
172-
}
165+
gtag('consent', 'default', {
166+
'analytics_storage': 'denied',
167+
'ad_storage': 'denied'
168+
});
173169

174-
if (darkToggle) {
175-
darkToggle.addEventListener('change', () => {
176-
document.body.classList.toggle('dark');
177-
localStorage.setItem('darkMode', document.body.classList.contains('dark'));
178-
});
179-
}
170+
gtag('js', new Date());
171+
gtag('config', 'G-FMRJ311LEF');
180172
</script>
181173
</body>
182174
</html>

‎github-pages/assets/css/style.css‎

Lines changed: 10 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -741,61 +741,34 @@ details {
741741
border: 1px solid #E8E5EB;
742742
border-radius: 12px;
743743
margin-bottom: 16px;
744-
box-shadow: 0 2px 8px rgba(39, 35, 42, 0.04);
745-
transition: box-shadow 0.2s, border-color 0.2s;
746-
}
747-
748-
details:hover {
749-
box-shadow: 0 4px 16px rgba(39, 35, 42, 0.08);
744+
box-shadow: 0 2px 8px rgba(39, 35, 42, 0.06);
750745
}
751746

752747
details[open] {
753748
border-color: #785D8F;
754-
box-shadow: 0 4px 16px rgba(120, 93, 143, 0.12);
755749
}
756750

757751
summary {
758-
padding: 18px 22px;
752+
padding: 16px 20px;
759753
cursor: pointer;
760754
font-weight: 600;
761755
font-size: 16px;
762756
color: #27232A;
763-
display: flex;
764-
align-items: center;
765-
gap: 12px;
766-
transition: background 0.2s, color 0.2s;
767757
list-style: none;
768-
border-radius: 12px;
758+
display: block;
769759
}
770760

771761
summary::-webkit-details-marker {
772762
display: none;
773763
}
774764

775-
summary::before {
776-
content: "";
777-
width: 20px;
778-
height: 20px;
779-
min-width: 20px;
780-
background: #F5F3F7;
781-
border-radius: 6px;
782-
display: flex;
783-
align-items: center;
784-
justify-content: center;
785-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23785D8F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
786-
background-repeat: no-repeat;
787-
background-position: center;
788-
transition: transform 0.2s, background-color 0.2s;
789-
}
790-
791-
details[open] > summary::before {
792-
transform: rotate(90deg);
793-
background-color: #785D8F;
794-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
765+
summary::marker {
766+
display: none;
795767
}
796768

797769
summary:hover {
798770
background: #F5F3F7;
771+
border-radius: 12px;
799772
}
800773

801774
details[open] > summary {
@@ -804,52 +777,27 @@ details[open] > summary {
804777
border-radius: 12px 12px 0 0;
805778
}
806779

807-
details > *:not(summary) {
808-
padding: 18px 22px 22px 54px;
780+
details > p {
781+
padding: 16px 20px;
782+
margin: 0;
809783
color: #4a4a4a;
810784
line-height: 1.7;
811785
}
812786

813-
details pre {
814-
margin: 12px 0;
815-
}
816-
817-
details p:last-child {
818-
margin-bottom: 0;
819-
}
820-
821787
/* Dark mode details */
822788
body.dark details {
823789
background: #1a1a1a;
824790
border-color: #333;
825-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
826-
}
827-
828-
body.dark details:hover {
829-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
830791
}
831792

832793
body.dark details[open] {
833794
border-color: #a88bc4;
834-
box-shadow: 0 4px 16px rgba(168, 139, 196, 0.2);
835795
}
836796

837797
body.dark summary {
838798
color: #e0e0e0;
839799
}
840800

841-
body.dark summary::before {
842-
background: #2a2a2a;
843-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a88bc4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
844-
background-repeat: no-repeat;
845-
background-position: center;
846-
}
847-
848-
body.dark details[open] > summary::before {
849-
background-color: #a88bc4;
850-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
851-
}
852-
853801
body.dark summary:hover {
854802
background: #2a2a2a;
855803
}
@@ -859,7 +807,7 @@ body.dark details[open] > summary {
859807
border-bottom-color: #333;
860808
}
861809

862-
body.dark details > *:not(summary) {
810+
body.dark details > p {
863811
color: #b0b0b0;
864812
}
865813

0 commit comments

Comments
 (0)