Last active
April 3, 2026 06:14
-
-
Save PandaWhoCodes/52dd3e621c07b853d7ca3d9a3bd8db5b to your computer and use it in GitHub Desktop.
The Offence, the Motifs, and the Response — Sermon Notes on the Cross (Joice, Apr 2026)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Cross — Sermon Notes</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Overpass+Mono:wght@300;400;500&family=Nunito+Sans:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg: #f7f4ef; | |
| --bg-card: #ffffff; | |
| --bg-verse: #faf8f3; | |
| --text: #2c2a26; | |
| --text-soft: #5c5850; | |
| --text-dim: #9c978d; | |
| --accent: #c0392b; | |
| --accent-gold: #c9a96e; | |
| --accent-dim: rgba(192, 57, 43, 0.08); | |
| --accent-gold-dim: rgba(201, 169, 110, 0.12); | |
| --serif: 'Crimson Pro', Georgia, serif; | |
| --sans: 'Nunito Sans', -apple-system, sans-serif; | |
| --mono: 'Overpass Mono', monospace; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--serif); | |
| font-size: 20px; | |
| line-height: 1.85; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| .page { max-width: 660px; margin: 0 auto; padding: 4rem 1.5rem 3rem; } | |
| .header { text-align: center; margin-bottom: 3.5rem; } | |
| .header .day { | |
| font-family: var(--mono); | |
| font-size: 0.58rem; | |
| letter-spacing: 0.22em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 1.2rem; | |
| display: block; | |
| } | |
| .header h1 { | |
| font-family: var(--serif); | |
| font-size: clamp(2rem, 6vw, 2.8rem); | |
| font-weight: 300; | |
| color: var(--text); | |
| line-height: 1.15; | |
| margin-bottom: 0.8rem; | |
| } | |
| .header .subtitle { | |
| font-family: var(--sans); | |
| font-size: 0.82rem; | |
| color: var(--text-dim); | |
| font-weight: 300; | |
| max-width: 420px; | |
| margin: 0 auto; | |
| line-height: 1.6; | |
| } | |
| .ribbon { | |
| width: 2px; height: 60px; | |
| background: var(--accent); | |
| margin: 2.5rem auto; | |
| opacity: 0.3; | |
| position: relative; | |
| } | |
| .ribbon::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; left: -4px; | |
| width: 10px; height: 10px; | |
| background: var(--accent); | |
| opacity: 0.5; | |
| border-radius: 50%; | |
| } | |
| .ribbon-gold { | |
| width: 2px; height: 40px; | |
| background: var(--accent-gold); | |
| margin: 2rem auto; | |
| opacity: 0.4; | |
| } | |
| .dot-break { | |
| text-align: center; | |
| color: var(--text-dim); | |
| font-size: 1.2rem; | |
| letter-spacing: 0.5em; | |
| margin: 2rem 0; | |
| } | |
| .prose p { | |
| margin-bottom: 1.4rem; | |
| color: var(--text-soft); | |
| } | |
| .prose p.lead::first-letter { | |
| font-size: 3.5rem; | |
| float: left; | |
| line-height: 0.8; | |
| padding-right: 0.12em; | |
| padding-top: 0.08em; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .prose em { font-style: italic; color: var(--text); } | |
| .prose strong { font-weight: 500; color: var(--text); } | |
| .section-head { | |
| font-family: var(--serif); | |
| font-size: 1.7rem; | |
| font-weight: 300; | |
| color: var(--text); | |
| margin-bottom: 0.3rem; | |
| text-align: center; | |
| } | |
| .section-note { | |
| font-family: var(--sans); | |
| font-size: 0.78rem; | |
| color: var(--text-dim); | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .verse-card { | |
| background: var(--bg-verse); | |
| border-left: 3px solid var(--accent-gold); | |
| padding: 1.1rem 1.4rem; | |
| margin: 1.2rem 0; | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| color: var(--text-soft); | |
| border-radius: 0 4px 4px 0; | |
| } | |
| .verse-card .ref { | |
| display: block; | |
| font-family: var(--mono); | |
| font-size: 0.55rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--accent-gold); | |
| margin-top: 0.5rem; | |
| } | |
| /* Motif cards */ | |
| .motif { | |
| margin-bottom: 2.5rem; | |
| } | |
| .motif-header { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.8rem; | |
| margin-bottom: 0.2rem; | |
| } | |
| .motif-num { | |
| font-family: var(--mono); | |
| font-size: 0.58rem; | |
| color: var(--accent); | |
| letter-spacing: 0.1em; | |
| opacity: 0.5; | |
| } | |
| .motif-title { | |
| font-family: var(--serif); | |
| font-size: 1.4rem; | |
| font-weight: 400; | |
| color: var(--text); | |
| } | |
| .motif p { | |
| color: var(--text-soft); | |
| font-size: 0.95rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| /* Key insight */ | |
| .insight { | |
| background: var(--accent-dim); | |
| padding: 1rem 1.4rem; | |
| border-radius: 6px; | |
| margin: 1.2rem 0; | |
| } | |
| .insight p { | |
| font-family: var(--serif); | |
| font-size: 0.95rem; | |
| color: var(--accent); | |
| margin: 0; | |
| font-weight: 500; | |
| line-height: 1.6; | |
| } | |
| /* Gold insight */ | |
| .insight-gold { | |
| background: var(--accent-gold-dim); | |
| padding: 1rem 1.4rem; | |
| border-radius: 6px; | |
| margin: 1.2rem 0; | |
| } | |
| .insight-gold p { | |
| font-family: var(--serif); | |
| font-size: 0.95rem; | |
| color: #8a7340; | |
| margin: 0; | |
| font-weight: 500; | |
| line-height: 1.6; | |
| } | |
| /* Question block */ | |
| .question { | |
| text-align: center; | |
| margin: 2.5rem 0; | |
| padding: 2rem 1.5rem; | |
| } | |
| .question p { | |
| font-family: var(--serif); | |
| font-size: 1.3rem; | |
| font-weight: 400; | |
| color: var(--text); | |
| font-style: italic; | |
| line-height: 1.5; | |
| } | |
| /* Offence list */ | |
| .offence-card { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| border-radius: 6px; | |
| padding: 1.1rem 1.4rem; | |
| margin-bottom: 0.8rem; | |
| box-shadow: 0 1px 6px rgba(0,0,0,0.03); | |
| } | |
| .offence-card h4 { | |
| font-family: var(--sans); | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin-bottom: 0.2rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .offence-card p { | |
| font-size: 0.88rem; | |
| color: var(--text-soft); | |
| margin: 0; | |
| } | |
| .footer { | |
| margin-top: 4rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(0,0,0,0.06); | |
| text-align: center; | |
| } | |
| .footer p { | |
| font-family: var(--sans); | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| margin-bottom: 0.3rem; | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(14px); | |
| transition: opacity 0.7s ease, transform 0.7s ease; | |
| } | |
| .fade-in.visible { opacity: 1; transform: translateY(0); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div class="header"> | |
| <span class="day">Sermon Notes · Joice · April 1, 2026</span> | |
| <h1>The Offence, the Motifs, and the Response</h1> | |
| <p class="subtitle">Why did Jesus have to die <em>that way</em>? What does the cross actually accomplish? And what is the only response that leads to paradise?</p> | |
| </div> | |
| <div class="ribbon"></div> | |
| <!-- ASHISH'S OPENING --> | |
| <div class="fade-in"> | |
| <h2 class="section-head">Opening — Ashish's Notes</h2> | |
| <p class="section-note">Personal reflections before the teaching</p> | |
| <div class="prose"> | |
| <p class="lead">We usually talk about the 7 words that Jesus spoke on the cross on Good Friday. But personally — I don't even think about the cross for most of the year. I don't wear a cross. Don't have one on my car. Nothing. I was just thinking: <em>what is it that I need to do?</em></p> | |
| <p>What is it that Jesus came to do on earth? So I actually did a topical analysis — from all 4 Gospels — where He says what He came to do.</p> | |
| <p>Healing. Raising the dead. Feeding. All of this was because He felt compassion. But <strong>the real work He came to do was accomplished on that cross.</strong></p> | |
| </div> | |
| <div class="insight"> | |
| <p>He came to die. For us.</p> | |
| </div> | |
| <div class="prose"> | |
| <p>And today let's look at that cross. Why was it important for Jesus to die on that cross?</p> | |
| <p>You measure a road by kilometres. You measure a house in square metres. <strong>How do you measure God's love for you?</strong></p> | |
| <p>We are going to see that today — just how much it cost for you and me to be here. To be free.</p> | |
| <p>You know, there is a river of differences between us and people back then — culture, time, geopolitical statuses, religion. So we will spend some time trying to cross this river.</p> | |
| <p>This phrase that Dexter anna has used several times: <em>the offence of the cross.</em> We will look into it. There are 3 offences that I can think of, and we will look at each one.</p> | |
| <p>You know, I tried to put into words the suffering that Jesus went through…</p> | |
| </div> | |
| </div> | |
| <div class="ribbon-gold"></div> | |
| <!-- PART 1: THE OFFENCE --> | |
| <div class="fade-in"> | |
| <h2 class="section-head">Part I — The Offence of the Cross</h2> | |
| <p class="section-note">The cross was never meant to be comfortable</p> | |
| <div class="prose"> | |
| <p class="lead">The early disciples spread the gospel with the offence <em>intact.</em> They didn't soften it. They didn't rebrand it. And it offended everyone — but for different reasons.</p> | |
| </div> | |
| <div class="offence-card fade-in"> | |
| <h4>To the Greeks — Offensive to their pride</h4> | |
| <p>Their gods had muscles and did heroic feats. A God who died on a cross — a death reserved for the lowest of the low? Offensive. Beneath them.</p> | |
| </div> | |
| <div class="offence-card fade-in"> | |
| <h4>To the Jews — Offensive to their theology</h4> | |
| <p>How can the Messiah be someone <em>cursed by God?</em> The cross was a sign of divine rejection. They couldn't accept a God who was cursed.</p> | |
| </div> | |
| <div class="offence-card fade-in"> | |
| <h4>To the Individual — Offensive to our self-image</h4> | |
| <p>Why does someone need to die for <em>me?</em> In such a painful way? Have I really done <em>that</em> bad? This is the offence we still feel today.</p> | |
| </div> | |
| <div class="insight fade-in"> | |
| <p>The disciples spread the gospel with all three offences intact. They didn't remove them. Sometimes we're scared to tell people about Jesus — but the first two offences don't even come into play for most people today. It's easier for us now.</p> | |
| </div> | |
| </div> | |
| <div class="ribbon-gold"></div> | |
| <!-- PART 2: MOTIFS --> | |
| <div class="fade-in"> | |
| <h2 class="section-head">Part II — Why the Cross?</h2> | |
| <p class="section-note">Three motifs from the Epistles — each one explains a different dimension of what the cross accomplished<br><em>Reference: "Crucifixion" by Fleming Rutledge</em></p> | |
| <div class="prose"> | |
| <p>Don't just look at the Gospel accounts to know <em>how</em> it happened. Look at the Epistles — they tell you <em>why</em> it happened. Over 300 prophecies were fulfilled that day. God allowed Jesus to suffer through this for very specific reasons. The apostles use different imagery to explain each one.</p> | |
| </div> | |
| </div> | |
| <div class="dot-break">· · ·</div> | |
| <!-- MOTIF 1 --> | |
| <div class="motif fade-in"> | |
| <div class="motif-header"> | |
| <span class="motif-num">01</span> | |
| <span class="motif-title">The Passover Lamb</span> | |
| </div> | |
| <p><strong>Liberation from captivity under a hostile power.</strong></p> | |
| <div class="verse-card"> | |
| "Purge out therefore the old leaven, that ye may be a new lump, as ye are unleavened. For even Christ our passover is sacrificed for us: Therefore let us keep the feast, not with old leaven, neither with the leaven of malice and wickedness; but with the unleavened bread of sincerity and truth." | |
| <span class="ref">1 Corinthians 5:7–8</span> | |
| </div> | |
| <div class="verse-card"> | |
| "For these things were done, that the scripture should be fulfilled, A bone of him shall not be broken. And again another scripture saith, They shall look on him whom they pierced." | |
| <span class="ref">John 19:36–37</span> | |
| </div> | |
| <p>The Passover lamb in Exodus was an innocent animal whose blood, when painted on the doorframe, created a protective covering — and the angel of death would pass over that house. The lamb had to be without blemish, and none of its bones were to be broken (Exodus 12:46). John points out that this was literally fulfilled in Jesus — the soldiers broke the legs of the two thieves but not His, because He was already dead.</p> | |
| <div class="insight-gold"> | |
| <p>Something has to die so that the enslaved can walk free. The blood of the lamb is the price of the Exodus. Sin must be rectified by blood, and the powers must be defeated so the person can walk free.</p> | |
| </div> | |
| </div> | |
| <!-- MOTIF 2 --> | |
| <div class="motif fade-in"> | |
| <div class="motif-header"> | |
| <span class="motif-num">02</span> | |
| <span class="motif-title">The Blood Sacrifice</span> | |
| </div> | |
| <p><strong>Restoration has a cost — and God Himself paid it.</strong></p> | |
| <div class="verse-card"> | |
| "And almost all things are by the law purged with blood; and without shedding of blood is no remission." | |
| <span class="ref">Hebrews 9:22</span> | |
| </div> | |
| <div class="verse-card"> | |
| "But Christ being come an high priest of good things to come, by a greater and more perfect tabernacle, not made with hands, that is to say, not of this building; Neither by the blood of goats and calves, but by his own blood he entered in once into the holy place, having obtained eternal redemption for us." | |
| <span class="ref">Hebrews 9:11–12</span> | |
| </div> | |
| <div class="verse-card"> | |
| "For it is not possible that the blood of bulls and of goats should take away sins." | |
| <span class="ref">Hebrews 10:4</span> | |
| </div> | |
| <p>It's not that God is bloodthirsty. It's that sin has a cost, and something of value had to be relinquished to restore our relationship with God. The Levitical system required animal sacrifice on the Day of Atonement — year after year, the high priest would enter the Holy of Holies with blood. But Hebrews 10:4 makes it plain: the blood of animals could never actually take away sin. It was always pointing to something — someone — greater.</p> | |
| <div class="insight"> | |
| <p>God is the <em>acting subject</em> of the sacrifice — not the object. It's not us restoring the relationship. It's God restoring it with us. Even if Cain brings the best of the best — it doesn't matter. God provides the sacrifice.</p> | |
| </div> | |
| <p>The Day of Atonement required sacrifice again and again. But Hebrews says: <em>once and for all.</em> The ultimate sacrifice has been given. God was never against us — He was providing the sacrifice Himself.</p> | |
| <div class="insight-gold"> | |
| <p>Over centuries, God told us that restoration has a cost. And then He Himself ultimately paid it.</p> | |
| </div> | |
| </div> | |
| <!-- MOTIF 3 --> | |
| <div class="motif fade-in"> | |
| <div class="motif-header"> | |
| <span class="motif-num">03</span> | |
| <span class="motif-title">The Descent into Hell</span> | |
| </div> | |
| <p><strong>Jesus entered the deepest darkness so that no one is beyond His reach.</strong></p> | |
| <p>Joice raised this point directly: <em>"How can Jesus relate to the worst of the worst people who are undergoing hell here on earth — if He Himself does not go into it?"</em> Evil is real. There is real evil in this world, actively trying to bring everybody down. And Jesus entered into it.</p> | |
| <div class="verse-card"> | |
| "For Christ also hath once suffered for sins, the just for the unjust, that he might bring us to God, being put to death in the flesh, but quickened by the Spirit: By which also he went and preached unto the spirits in prison." | |
| <span class="ref">1 Peter 3:18–19</span> | |
| </div> | |
| <p>This is one of the most mysterious passages in the New Testament. After His death, Christ — in the Spirit — went and made a proclamation to "spirits in prison." The early church fathers understood this as the <em>harrowing of hell</em> — Jesus descending into the realm of the dead to declare His victory and lead the righteous dead out of Sheol into paradise.</p> | |
| <div class="verse-card"> | |
| "Wherefore he saith, When he ascended up on high, he led captivity captive, and gave gifts unto men. Now that he ascended, what is it but that he also descended first into the lower parts of the earth? He that descended is the same also that ascended up far above all heavens, that he might fill all things." | |
| <span class="ref">Ephesians 4:8–10</span> | |
| </div> | |
| <p>Paul is quoting Psalm 68:18 here. The logic: before Jesus could ascend to the highest place, He first descended to the lowest. The "lower parts of the earth" — whether that means the grave, Hades, or the deepest point of human suffering — Jesus went there. He descended <em>in order to fill all things.</em> There is no depth He has not touched.</p> | |
| <div class="verse-card"> | |
| "And being found in fashion as a man, he humbled himself, and became obedient unto death, even the death of the cross." | |
| <span class="ref">Philippians 2:8</span> | |
| </div> | |
| <p>The great hymn of Philippians 2 traces the arc: from the form of God → to the form of a servant → to death → to death on a <em>cross</em>. Each step is a further descent. The cross is not just death — it is the most degrading form of death. The lowest possible point for the highest possible being.</p> | |
| <div class="verse-card"> | |
| "Because thou wilt not leave my soul in hell, neither wilt thou suffer thine Holy One to see corruption." | |
| <span class="ref">Acts 2:27 (Peter quoting Psalm 16:10)</span> | |
| </div> | |
| <p>Peter, in his very first sermon at Pentecost, quotes David's psalm as a prophecy about Jesus. The word used in Greek is <em>Hades</em> — the realm of the dead. Peter's argument: David died and his body saw corruption. But the one David prophesied about — Jesus — was not abandoned to Hades. God raised Him.</p> | |
| <div class="verse-card"> | |
| "I am he that liveth, and was dead; and, behold, I am alive for evermore, Amen; and have the keys of hell and of death." | |
| <span class="ref">Revelation 1:18</span> | |
| </div> | |
| <p>The risen Christ holds the keys. Not death. Not Hades. <em>He</em> holds them. He took them from the inside.</p> | |
| <div class="insight"> | |
| <p><strong>Why does this matter?</strong> The Apostles' Creed says: "He descended into hell." Different traditions interpret this differently — Calvin saw it as the spiritual torment on the cross; Luther took it literally; the early church fathers saw a victorious harrowing. But the core truth across all views is this: there is no depth of human suffering, no darkness, no hell on earth that Jesus has not entered. He went to the lowest place so that no one — <em>no one</em> — is beyond His reach.</p> | |
| </div> | |
| <div class="insight-gold"> | |
| <p>If you have ever felt like you are in hell — trapped, broken, abandoned, in the darkest place you've ever been — Jesus has been there. He descended into it. Not as a tourist. As a conqueror. And He came back holding the keys.</p> | |
| </div> | |
| </div> | |
| <div class="ribbon"></div> | |
| <!-- PART 3: THE RESPONSE --> | |
| <div class="fade-in"> | |
| <h2 class="section-head">Part III — Two Thieves, One Cross</h2> | |
| <p class="section-note">The only response that leads to paradise</p> | |
| <div class="prose"> | |
| <p class="lead">Two thieves were on the cross with Jesus. Both saw the same thing. One went to paradise. The other did not. Why?</p> | |
| </div> | |
| <p style="color:var(--text-soft);font-size:0.95rem;">Imagine yourself there, 2,000 years ago. You're standing there watching. What is your response?</p> | |
| <div class="offence-card fade-in"> | |
| <h4>Response 1 — Compassion</h4> | |
| <p>Some who watched felt compassion for Jesus because it was so brutal. But compassion alone didn't save anyone.</p> | |
| </div> | |
| <div class="offence-card fade-in"> | |
| <h4>Response 2 — Religious self-righteousness</h4> | |
| <p>The Pharisees — people who held the word of God every day, guarded it, lived it, had so much knowledge — saw the cross and didn't even feel compassion. Pilate asked again and again: "Why do you want him crucified?" They said: <em>Yes.</em></p> | |
| </div> | |
| <div class="offence-card fade-in"> | |
| <h4>Response 3 — Testing God & indifference</h4> | |
| <p>The other thief saw Jesus and demanded a miracle. Prove yourself. Save us. Indifference to his own sin.</p> | |
| </div> | |
| <div class="offence-card fade-in" style="border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;"> | |
| <h4>Response 4 — Confession ✝</h4> | |
| <p>One thief saw Jesus — saw how He still loved the people persecuting Him — and saw himself for what he truly was. And he said: <em>"Lord, I'm sorry. I am not as good as I thought I was."</em></p> | |
| </div> | |
| <div class="verse-card fade-in"> | |
| "Today you will be with me in paradise." | |
| <span class="ref">Luke 23:43</span> | |
| </div> | |
| <div class="insight fade-in"> | |
| <p>Out of all the responses — compassion, religious knowledge, testing God, indifference — only one led to paradise. It was the moment of <em>confession.</em> Seeing Jesus for who He is. Seeing yourself for who you are not. And saying: "Lord, I don't deserve this. But you are here."</p> | |
| </div> | |
| </div> | |
| <div class="ribbon-gold"></div> | |
| <div class="question fade-in"> | |
| <p>When you sin and fall down,<br>do you look back at the cross?<br>Do you understand the gravity<br>of everything Jesus went through for you?<br><br><strong>What is your response to the cross?</strong></p> | |
| </div> | |
| <div class="footer"> | |
| <p>Sermon notes from Joice's teaching · April 1, 2026</p> | |
| <p>Reference book: <em>Crucifixion</em> by Fleming Rutledge</p> | |
| <p>Notes compiled by Claw 🐾</p> | |
| </div> | |
| </div> | |
| <script> | |
| const observer = new IntersectionObserver(entries => { | |
| entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment