Skip to content

Commit 972ba3e

Browse files
NikolaRHristovNikolaRHristov
committed
1 parent 48e0c07 commit 972ba3e

File tree

6 files changed

+110
-17
lines changed

6 files changed

+110
-17
lines changed

‎Source/Background.astro‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,58 @@
1-
<div></div>
1+
<div id="Background"></div>
22

33
<style>
44
@import "./Background/Stylesheet.css";
55
</style>
6+
7+
<script>
8+
document.addEventListener("DOMContentLoaded", () => {
9+
const Container = document.getElementById("Background");
10+
11+
if (!Container) return;
12+
13+
let Rock;
14+
15+
if (window.matchMedia("(min-width: 1920px)").matches) {
16+
Rock = "/Asset/DesktopLargeRock.webp";
17+
} else if (window.matchMedia("(min-width: 1280px)").matches) {
18+
Rock = "/Asset/DesktopRock.webp";
19+
} else if (window.matchMedia("(min-width: 768px)").matches) {
20+
Rock = "/Asset/TabletRock.webp";
21+
} else {
22+
Rock = "/Asset/MobileRock.webp";
23+
}
24+
25+
const Element = [Rock, "/Asset/Background.svg"].map((src) => {
26+
const _Image = new Image();
27+
28+
_Image.src = src;
29+
30+
return _Image;
31+
});
32+
33+
if (Element.every((Image) => Image.complete)) {
34+
Container.classList.add("Load");
35+
} else {
36+
Promise.all(
37+
Element.map((Image) => {
38+
return new Promise((Resolve, Reject) => {
39+
if (Image.complete) {
40+
// @ts-expect-error
41+
Resolve();
42+
} else {
43+
Image.onload = Resolve;
44+
45+
Image.onerror = Reject;
46+
}
47+
});
48+
}),
49+
).then(() => {
50+
Container.classList.add("WithTransition");
51+
52+
setTimeout(() => {
53+
Container.classList.add("Load");
54+
}, 0);
55+
});
56+
}
57+
});
58+
</script>

‎Source/Background/Stylesheet.css‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,49 @@
1-
div {
2-
@apply fixed left-0 top-0 h-screen w-screen;
1+
#Background {
2+
position: fixed;
3+
4+
left: 0;
5+
6+
top: 0;
7+
8+
height: 100vh;
9+
10+
width: 100vw;
311

412
z-index: -1;
513

6-
&:before {
7-
@apply fixed left-1/2 top-1/2 h-screen bg-cover bg-center bg-no-repeat;
14+
opacity: 0;
15+
16+
&.Load {
17+
opacity: 1;
18+
}
19+
20+
&.WithTransition {
21+
transition: opacity 0.8s ease-in-out;
22+
}
823

24+
&:before {
925
content: "";
1026

11-
image-rendering: pixelated;
27+
position: fixed;
1228

13-
transform: translateX(-50%) translateY(-50%);
29+
left: 50%;
30+
31+
top: 50%;
32+
33+
height: 100vh;
1434

1535
width: 160vw;
1636

37+
transform: translateX(-50%) translateY(-50%);
38+
39+
background-size: cover;
40+
41+
background-position: center;
42+
43+
background-repeat: no-repeat;
44+
45+
image-rendering: pixelated;
46+
1747
z-index: -3;
1848

1949
background-image: image-set(
@@ -31,7 +61,6 @@ div {
3161
);
3262
}
3363
}
34-
3564
@media (min-width: 1280px) {
3665
& {
3766
background-image: image-set(
@@ -41,7 +70,6 @@ div {
4170
);
4271
}
4372
}
44-
4573
@media (min-width: 1920px) {
4674
& {
4775
background-image: url("/Asset/DesktopLargeRock.webp");
@@ -50,16 +78,28 @@ div {
5078
}
5179

5280
&:after {
53-
@apply fixed left-1/2 top-1/2 h-screen bg-cover bg-center bg-no-repeat content-none;
54-
5581
content: "";
5682

57-
background-image: url("/Asset/Background.svg");
83+
position: fixed;
5884

59-
transform: translateX(-50%) translateY(-50%);
85+
left: 50%;
86+
87+
top: 50%;
88+
89+
height: 100vh;
6090

6191
width: 160vw;
6292

93+
transform: translateX(-50%) translateY(-50%);
94+
95+
background-size: cover;
96+
97+
background-position: center;
98+
99+
background-repeat: no-repeat;
100+
101+
background-image: url("/Asset/Background.svg");
102+
63103
z-index: -2;
64104
}
65105
}

Target/_astro/_Slug_.DdpX9aGh.css renamed to Target/_astro/_Slug_.DZVC1NTA.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Target/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html class=no-js data-beasties-container dir=ltr lang=en><head data-capo><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>Land</title><link href=https://fonts.googleapis.com rel=preconnect crossorigin><link href=https://fonts.gstatic.com rel=preconnect crossorigin><style>*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Albert Sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0;--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}a{color:inherit;text-decoration:inherit}ul{list-style:none;margin:0;padding:0}img{display:block;vertical-align:middle}img{height:auto;max-width:100%}:root{--background-light:#fff;--background-dark:#000}.absolute{position:absolute}.left-0{left:0}.top-0{top:0}.flex{display:flex}.hidden{display:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.flex-col{flex-direction:column}.justify-start{justify-content:flex-start}@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}div[data-astro-cid-tdpc7p74]{height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:-1}div[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/MobileRock.webp?Time=1752245870373) 1x,url(/Asset/TabletRock.webp?Time=1752245870373) 2x);background-image:image-set(url(/Asset/MobileRock.webp?Time=1752245870373) 1x,url(/Asset/TabletRock.webp?Time=1752245870373) 2x);image-rendering:pixelated;z-index:-3}div[data-astro-cid-tdpc7p74]:after,div[data-astro-cid-tdpc7p74]:before{background-position:50%;background-repeat:no-repeat;background-size:cover;content:"";height:100vh;left:50%;position:fixed;top:50%;transform:translate(-50%) translateY(-50%);width:160vw}div[data-astro-cid-tdpc7p74]:after{--tw-content:none;background-image:url(/Asset/Background.svg?Time=1752245870373);z-index:-2}@media (min-width:768px){div[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/TabletRock.webp?Time=1752245870373) 1x,url(/Asset/DesktopRock.webp?Time=1752245870373) 2x);background-image:image-set(url(/Asset/TabletRock.webp?Time=1752245870373) 1x,url(/Asset/DesktopRock.webp?Time=1752245870373) 2x)}}@media (min-width:1280px){div[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/DesktopRock.webp?Time=1752245870373) 1x,url(/Asset/DesktopLargeRock.webp?Time=1752245870373) 2x);background-image:image-set(url(/Asset/DesktopRock.webp?Time=1752245870373) 1x,url(/Asset/DesktopLargeRock.webp?Time=1752245870373) 2x)}}@media (min-width:1920px){div[data-astro-cid-tdpc7p74]:before{background-image:url(/Asset/DesktopLargeRock.webp?Time=1752245870373)}}.Footer ul{padding:.5rem 1rem}.Footer a{position:relative;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;max-width:-moz-max-content;max-width:max-content;outline:2px solid transparent;outline-offset:2px;padding:.375rem;text-decoration-line:underline;text-underline-offset:8px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.21,.1,.21,1)}.Footer a:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.Footer a:focus-visible{outline-color:#bfdbfe;outline-width:2px;text-decoration-color:transparent;z-index:1}.Footer .icon{height:calc(1.25rem + 12px);width:calc(1.25rem + 12px)}@media (min-width:640px){.Footer a{font-size:.875rem;line-height:1.25rem}}html{margin:0;padding:0;width:100%;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}body,html{height:100%}body{display:flex;flex-direction:column;flex-grow:1;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{display:inline-block;outline-color:transparent;outline-offset:2px;outline-width:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}@media (prefers-color-scheme:dark){html{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}}@media (min-width:640px){body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}}</style><link href=/_astro/_Slug_.DdpX9aGh.css rel=stylesheet media=print onload="this.media=&#34;all&#34;"><noscript><link href=/_astro/_Slug_.DdpX9aGh.css rel=stylesheet></noscript><script type=module crossorigin=anonymous src=/_astro/Base.astro_astro_type_script_index_0_lang.ButrHMt-.js></script><script type=module src=/_astro/page.Bc0h8GO8.js></script><meta content="Code Editor" name=description><meta content=#ffffff name=theme-color><meta content="telephone=no" name=format-detection><meta content=on name=twitter:dnt><link href=/Favicon/favicon-96x96.png rel=icon sizes=96x96 type=image/png><link href=/Favicon/favicon.svg rel=icon type=image/svg+xml><link href=/Favicon/favicon.ico rel="shortcut icon"><link href=/Favicon/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><meta content=Land name=apple-mobile-web-app-title><link href=/Favicon/site.webmanifest rel=manifest></head><body><div data-astro-cid-tdpc7p74></div><main class=grow></main><div class=shrink id=Footer><footer class="flex flex-col Footer sm:flex-row sm:items-center sm:justify-between"><ul class="flex flex-col icons justify-start shrink"><li><a class="flex icon" href=https://GitHub.Com/CodeEditorLand rel="noopener noreferrer" target=_blank><picture><img alt=GitHub src=/Image/GitHub.svg></picture></a></li></ul><ul class="flex flex-col icons justify-start shrink"><li><a class=flex href=https://Tauri.App/ rel="noopener noreferrer" target=_blank><picture><img alt="Made With Tauri" src=https://PlayForm.Cloud/Image/GitHub/Made/Tauri.svg width=160></picture></a></li></ul></footer></div><script type=module crossorigin=anonymous>document.documentElement.classList.remove("no-js"),document.documentElement.classList.add("js")</script><a class="absolute hidden left-0 top-0" href=https://x.com/@CodeEditorLand rel=me></a></body></html>
1+
<!DOCTYPE html><html class=no-js data-beasties-container dir=ltr lang=en><head data-capo><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>Land</title><link href=https://fonts.googleapis.com rel=preconnect crossorigin><link href=https://fonts.gstatic.com rel=preconnect crossorigin><style>*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Albert Sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0;--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}a{color:inherit;text-decoration:inherit}ul{list-style:none;margin:0;padding:0}img{display:block;vertical-align:middle}img{height:auto;max-width:100%}:root{--background-light:#fff;--background-dark:#000}.absolute{position:absolute}.left-0{left:0}.top-0{top:0}.flex{display:flex}.hidden{display:none}.shrink{flex-shrink:1}.grow{flex-grow:1}.flex-col{flex-direction:column}.justify-start{justify-content:flex-start}@media (min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}}#Background[data-astro-cid-tdpc7p74]{height:100vh;left:0;opacity:0;position:fixed;top:0;width:100vw;z-index:-1}#Background[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/MobileRock.webp?Time=1752247430522) 1x,url(/Asset/TabletRock.webp?Time=1752247430522) 2x);background-image:image-set(url(/Asset/MobileRock.webp?Time=1752247430522) 1x,url(/Asset/TabletRock.webp?Time=1752247430522) 2x);image-rendering:pixelated;z-index:-3}#Background[data-astro-cid-tdpc7p74]:after,#Background[data-astro-cid-tdpc7p74]:before{background-position:50%;background-repeat:no-repeat;background-size:cover;content:"";height:100vh;left:50%;position:fixed;top:50%;transform:translate(-50%) translateY(-50%);width:160vw}#Background[data-astro-cid-tdpc7p74]:after{background-image:url(/Asset/Background.svg?Time=1752247430522);z-index:-2}@media (min-width:768px){#Background[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/TabletRock.webp?Time=1752247430522) 1x,url(/Asset/DesktopRock.webp?Time=1752247430522) 2x);background-image:image-set(url(/Asset/TabletRock.webp?Time=1752247430522) 1x,url(/Asset/DesktopRock.webp?Time=1752247430522) 2x)}}@media (min-width:1280px){#Background[data-astro-cid-tdpc7p74]:before{background-image:-webkit-image-set(url(/Asset/DesktopRock.webp?Time=1752247430522) 1x,url(/Asset/DesktopLargeRock.webp?Time=1752247430522) 2x);background-image:image-set(url(/Asset/DesktopRock.webp?Time=1752247430522) 1x,url(/Asset/DesktopLargeRock.webp?Time=1752247430522) 2x)}}@media (min-width:1920px){#Background[data-astro-cid-tdpc7p74]:before{background-image:url(/Asset/DesktopLargeRock.webp?Time=1752247430522)}}.Footer ul{padding:.5rem 1rem}.Footer a{position:relative;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;max-width:-moz-max-content;max-width:max-content;outline:2px solid transparent;outline-offset:2px;padding:.375rem;text-decoration-line:underline;text-underline-offset:8px;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.21,.1,.21,1)}.Footer a:hover{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}.Footer a:focus-visible{outline-color:#bfdbfe;outline-width:2px;text-decoration-color:transparent;z-index:1}.Footer .icon{height:calc(1.25rem + 12px);width:calc(1.25rem + 12px)}@media (min-width:640px){.Footer a{font-size:.875rem;line-height:1.25rem}}html{margin:0;padding:0;width:100%;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}body,html{height:100%}body{display:flex;flex-direction:column;flex-grow:1;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{display:inline-block;outline-color:transparent;outline-offset:2px;outline-width:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}@media (prefers-color-scheme:dark){html{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}}@media (min-width:640px){body{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}}</style><link href=/_astro/_Slug_.DZVC1NTA.css rel=stylesheet media=print onload="this.media=&#34;all&#34;"><noscript><link href=/_astro/_Slug_.DZVC1NTA.css rel=stylesheet></noscript><script type=module crossorigin=anonymous src=/_astro/Base.astro_astro_type_script_index_0_lang.ButrHMt-.js></script><script type=module src=/_astro/page.Bc0h8GO8.js></script><meta content="Code Editor" name=description><meta content=#ffffff name=theme-color><meta content="telephone=no" name=format-detection><meta content=on name=twitter:dnt><link href=/Favicon/favicon-96x96.png rel=icon sizes=96x96 type=image/png><link href=/Favicon/favicon.svg rel=icon type=image/svg+xml><link href=/Favicon/favicon.ico rel="shortcut icon"><link href=/Favicon/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><meta content=Land name=apple-mobile-web-app-title><link href=/Favicon/site.webmanifest rel=manifest></head><body><div id=Background data-astro-cid-tdpc7p74></div><script type=module crossorigin=anonymous>document.addEventListener("DOMContentLoaded",()=>{const e=document.getElementById("Background");if(!e)return;let t;t=window.matchMedia("(min-width: 1920px)").matches?"/Asset/DesktopLargeRock.webp":window.matchMedia("(min-width: 1280px)").matches?"/Asset/DesktopRock.webp":window.matchMedia("(min-width: 768px)").matches?"/Asset/TabletRock.webp":"/Asset/MobileRock.webp";const s=[t,"/Asset/Background.svg"].map(e=>{const t=new Image;return t.src=e,t});s.every(e=>e.complete)?e.classList.add("Load"):Promise.all(s.map(e=>new Promise((t,s)=>{e.complete?t():(e.onload=t,e.onerror=s)}))).then(()=>{e.classList.add("WithTransition"),setTimeout(()=>{e.classList.add("Load")},0)})})</script><main class=grow></main><div id=Footer class=shrink><footer class="flex flex-col Footer sm:flex-row sm:items-center sm:justify-between"><ul class="flex flex-col icons justify-start shrink"><li><a class="flex icon" href=https://GitHub.Com/CodeEditorLand rel="noopener noreferrer" target=_blank><picture><img alt=GitHub src=/Image/GitHub.svg></picture></a></li></ul><ul class="flex flex-col icons justify-start shrink"><li><a class=flex href=https://Tauri.App/ rel="noopener noreferrer" target=_blank><picture><img alt="Made With Tauri" src=https://PlayForm.Cloud/Image/GitHub/Made/Tauri.svg width=160></picture></a></li></ul></footer></div><script type=module crossorigin=anonymous>document.documentElement.classList.remove("no-js"),document.documentElement.classList.add("js")</script><a class="absolute hidden left-0 top-0" href=https://x.com/@CodeEditorLand rel=me></a></body></html>

0 commit comments

Comments
 (0)