diff --git a/.fuse_hidden00012dd100000001 b/.fuse_hidden00012dd100000001 new file mode 100644 index 0000000..e6723fe Binary files /dev/null and b/.fuse_hidden00012dd100000001 differ diff --git a/CiF Logo Gold.svg b/CiF Logo Gold.svg new file mode 100644 index 0000000..22c7cc5 --- /dev/null +++ b/CiF Logo Gold.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/V2/CiF Logo Gold.svg b/V2/CiF Logo Gold.svg new file mode 100644 index 0000000..6759528 --- /dev/null +++ b/V2/CiF Logo Gold.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index ddcf2e5..be59bce 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,96 @@ - + + Mastodon + Communist Internet Federation -

Communist Internet Federation

-

This side is still heavily under construction

-

In the meantime check out our Lemmy Instance

- +
+

[ CiF ].su

+

Let's change the World for the Better. Together. Bit for Bit.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

Oh Fuck...

+

The World is on Fire. Figuratifly and Litterally. Big Coorperations are Destroying the Planet, Manipulating Politics and Robbing every single one of us. IT'S TIME TO FIGHT BACK. Saddly, we can't change everything at once, Guns Blazing (Even if we REALLY Would Like to...), so we're starting at the Most important Pillar of the Modern World. The Internet.

+
+
+

Our Mission:

+

Free, Open-Source, User-First Software that respects Privacy. No Ads, no Sponsors, no Trackers and Databrokers. Everything financed with Donation, and made and maintained by Volunteers.

+
+
+

Our Principals

+ - +
+ +
+

Our Projects

+ +
+
+ - \ No newline at end of file + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ee1c6e9 --- /dev/null +++ b/script.js @@ -0,0 +1,40 @@ + let initialScrollDone = false; + + window.addEventListener('wheel', (e) => { + if (!initialScrollDone && e.deltaY > 0) { + // Only trigger on initial downward scroll + e.preventDefault(); + window.scrollTo({ + top: window.innerHeight, + behavior: 'smooth' + }); + initialScrollDone = true; + // Enable normal scrolling after a short delay + setTimeout(() => { + document.body.style.overflow = 'auto'; + }, 10); + } + }); + + // Touch handling for mobile devices + let startY; + window.addEventListener('touchstart', (e) => { + startY = e.touches[0].clientY; + }); + + window.addEventListener('touchmove', (e) => { + const currentY = e.touches[0].clientY; + if (!initialScrollDone && currentY < startY) { + // Only trigger on initial upward touch move + e.preventDefault(); + window.scrollTo({ + top: window.innerHeight, + behavior: 'smooth' + }); + initialScrollDone = true; + // Enable normal scrolling after a short delay + setTimeout(() => { + document.body.style.overflow = 'auto'; + }, 10); + } + }); \ No newline at end of file diff --git a/style.css b/style.css index 14eadb1..7faaeca 100644 --- a/style.css +++ b/style.css @@ -3,19 +3,146 @@ src: url("./FuturaLT-Heavy.ttf") format("truetype"); } -body{ - position:absolute; - margin-top: 10px; - font-family: "Futura"; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + overflow: hidden; + height: 100vh; + scroll-behavior: smooth; + text-align: center; + position: absolute; + margin-top: 10px; + font-family: "Futura"; + width: 100%; /* Full width */ + } + + .page { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 3rem; + flex-direction: column; /* Stack children vertically */ + } + + #page1 { + height: 100vh; + background-color: #fff3f9; + color: rgb(0, 0, 0); + } + + .title{ + font-size: 120px; + z-index: 1; + color: #ff5a99; + } + + #page2 { + background-color: #ffa7c7; + color: white; + } + +h2 { + font-size: 25pt; + z-index: 1 } -footer{ - position: fixed; - bottom: 0px; - width:100%; - height: 75px; - display: flex; - justify-content: space-around; +.glitch { + position: relative; + display: inline-block; + animation: glitch 1.2s infinite steps(1); /* Instant snaps */ +} + +/* MAIN GLITCH (Subtler movements, more variations) */ +@keyframes glitch { + /* Normal state (longer pauses) */ + 0%, 60%, 62%, 70%, 100% { + transform: translate(0) skew(0deg) scale(1); + text-shadow: none; + } + /* Micro-glitch variations */ + 2% { + transform: translate(1px, -1px) skew(-2deg) scale(1.01); + text-shadow: 1px 0 rgba(255, 0, 0, 0.7); + } + 5% { + transform: translate(-1px, 1px) skew(1deg) scale(0.99); + text-shadow: -1px 0 rgba(0, 0, 255, 0.7); + } + 15% { + transform: translate(2px, 0) skew(-3deg) rotate(0.5deg); + } + 25% { + transform: translate(-1px, -1px) skew(2deg) scaleY(1.02); + } + 35% { + transform: translate(0, 1px) skew(-1deg) rotate(-0.3deg); + text-shadow: 0 1px rgba(0, 255, 255, 0.5); + } + 45% { + transform: translate(1px, -1px) skew(1deg) scaleX(1.01); + } + 55% { + transform: translate(-2px, 0) skew(-2deg) rotate(0.2deg); + } + 65% { + transform: translate(0, -1px) skew(1deg) scaleY(0.98); + } + 80% { + transform: translate(1px, 1px) skew(-1deg) rotate(-0.1deg); + text-shadow: -1px -1px rgba(255, 0, 255, 0.4); + } + 90% { + transform: translate(-1px, 0) skew(0.5deg) scale(1.005); + } +} + +/* PSEUDO-ELEMENTS (Subtle color splits) */ +.glitch:before, +.glitch:after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.8; + animation: none; /* Disable smooth animations */ +} + +.glitch:before { + color: rgba(0, 255, 255, 0.7); /* Cyan */ + clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); + transform: translate(-0.5px, -0.3px); + animation: glitch-before 1.5s infinite steps(1); +} + +.glitch:after { + color: rgba(255, 0, 255, 0.7); /* Magenta */ + clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); + transform: translate(0.5px, 0.2px); + animation: glitch-after 1.8s infinite steps(1); +} + +/* Pseudo-element glitches (tiny offsets) */ +@keyframes glitch-before { + 0%, 100% { transform: translate(-0.5px, -0.3px); } + 10% { transform: translate(-1px, 0) skew(1deg); } + 30% { transform: translate(0, -0.5px) scaleY(1.02); } + 50% { transform: translate(-0.7px, 0.2px) skew(-0.5deg); } + 70% { transform: translate(0.3px, -0.3px); } +} + +@keyframes glitch-after { + 0%, 100% { transform: translate(0.5px, 0.2px); } + 20% { transform: translate(0.7px, -0.2px) skew(-0.3deg); } + 40% { transform: translate(0, 0.5px) scaleY(0.98); } + 60% { transform: translate(-0.3px, 0) skew(0.2deg); } + 80% { transform: translate(0.2px, 0.3px); } } .slidefadein { @@ -29,4 +156,196 @@ footer{ opacity: 1; transform: translateY(0); } - } \ No newline at end of file + } + +footer{ + position: fixed; + bottom: 0px; + width:100%; + height: 75px; + display: flex; + justify-content: space-around; +} + + .background-arms { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 0; + } + + .sunken-arms { + width: 80vmin; + height: 80vmin; + max-width: 600px; + max-height: 600px; + opacity: 1; /* Subtle background appearance */ + filter: + drop-shadow(0.5px 0.5px rgba(255, 255, 255, 0.3)) + drop-shadow(-0.5px -0.5px rgba(176, 62, 106, 0.3)); + } + + .sunken-arms svg { + width: 100%; + height: 100%; + } + + /* Style for filled paths */ + .filled { + fill: #ffebf2; + stroke: #ffebf2; + stroke-width: 1.4; + stroke-linecap: round; + stroke-linejoin: round; + filter: + drop-shadow(inset 0.5px 0.5px rgba(176, 62, 106, 0.3)) + drop-shadow(inset -0.5px -0.5px rgba(255, 255, 255, 0.3)); + } + + /* Style for stroke-only paths (awns) */ + .stroked { + fill: none; + stroke: #ffebf2; + stroke-width: 1.4; + stroke-linecap: round; + stroke-linejoin: round; + filter: + drop-shadow(inset 0.5px 0.5px rgba(255, 255, 255, 0.3)) + drop-shadow(inset -0.5px -0.5px rgba(176, 62, 106, 0.3)); + } + + +.mission { + color: #55052c; +} + +.mission h1 { + font-size: 50pt; + margin-top: 5pt; +} + +.mission p { + font-size: 20pt; + margin-top: 5pt; + margin-bottom: 5pt; +} + +.about { + color: #55052c; +} + +.about h1 { + font-size: 50pt; + margin-top: 5pt; +} + +.about p { + font-size: 20pt; + margin-inline: 20pt; + margin-top: 5pt; + margin-bottom: 5pt; +} + +.principals { + color: #55052c; +} + +.principals h1 { + font-size: 50pt; + margin-top: 5pt; +} + +.principals p { + font-size: 20pt; + margin-inline: 20pt; + margin-top: 5pt; + margin-bottom: 5pt; +} + +.project { + color: #55052c; +} + +.project h1 { + font-size: 50pt; + margin-top: 5pt; +} + +.project p { + font-size: 20pt; + margin-inline: 20pt; + margin-top: 5pt; + margin-bottom: 5pt; +} + + +.neomorphic{ + background: #ffa7c7; + box-shadow: -5px -5px 20px rgb(254,254,255, 0.69), + 2px 2px 20px rgb(255,90,153) +} + +.neomorphic-i{ + background: #ffa7c7; + box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset, + 1px 1px 15px rgb(255,90,153) inset + +} + +.neomorphic2{ + background: #ffa7c7; + box-shadow: -5px -5px 20px rgba(254,254,255,0.5), + 2px 2px 20px rgb(255,90,153) +} + +.card { + width: 800pt; + height: auto; + border-radius: 20px; + display: flex; + align-items: center; + flex-direction: column; + margin-top: 30pt; +} + +.cards1 { + width: 700pt; + height: auto; + border-radius: 40pt; + display: flex; + align-items: center; + flex-direction: row; /* Changed from column to row */ + margin-top: 30pt; + gap: 20px; /* Adds some space between image and text */ +} + +.cards2 { + width: 200px; + height: auto; + border-radius: 40pt; + display: flex; + align-items: center; + flex-direction: column; +} + +ul { + list-style-type: none; +} + +li { + padding: 10pt; +} + +img { + width: 160px; + border-radius: 0 100px 100px 0; + padding: 5px; +} + +.info { + display: flex; + flex-direction: column; +} \ No newline at end of file