diff --git a/data.yml b/data.yml index 7568685..c988d77 100644 --- a/data.yml +++ b/data.yml @@ -922,6 +922,12 @@ indefinite: slackChannel: "#foodie" status: ended drafts: +- name: Woof + description: Spend 5 or more hours making a dog-themed project and get a dog plushie and other cool stuff! + website: https://woof-mu.vercel.app/ + slack: https://hackclub.enterprise.slack.com/archives/C08LCGSECQP + slackChannel: "#woof" + status: draft - name: issued description: code to design hack-themed apparel detailedDescription: you code to design hack-themed apparel, we ship popular designs as real clothes! diff --git a/script.js b/script.js index 985116c..622bc15 100644 --- a/script.js +++ b/script.js @@ -300,7 +300,7 @@ function createProgramCard(program) { const accelerateClass = program.name === 'Accelerate' ? 'accelerate-card' : ''; const baubleClass = program.name === 'Bauble' ? 'bauble-card' : ''; const meowClass = program.name === 'Meow' ? 'meow-card' : ''; - + const woofClass = program.name === 'Woof' ? 'woof-card' : ''; const encodedProgram = encodeURIComponent(JSON.stringify(program)); const isCompletedByUser = completedPrograms.has(program.name); @@ -333,7 +333,7 @@ function createProgramCard(program) { ` : ''; return ` -
+
${baubleSnowflakes}

${program.name}

diff --git a/styles.css b/styles.css index 3e2a419..7600a61 100644 --- a/styles.css +++ b/styles.css @@ -3062,3 +3062,40 @@ html { .program-card.meow-card:hover { border-color: var(--color-meow-accent) !important; } + +/* Woof-specific card styling - borrowed from Meow (above) */ +.program-card.woof-card { + --color-woof-bg: #e5cd6c; + --color-woof-dot: #f9f3b9; + --color-woof-text: #010101; + --color-woof-accent: #2f1213; + background-color: var(--color-woof-bg) !important; + background-image: radial-gradient(circle, var(--color-woof-dot) 10px, transparent 15px) !important; + background-size: 20px 20px !important; + position: relative; + color: var(--color-woof-text) !important; +} + +.program-card.woof-card h3, +.program-card.woof-card p, +.program-card.woof-card .program-deadline { + color: var(--color-woof-text) !important; + position: relative; + z-index: 1; +} + +.program-card.woof-card a { + color: var(--color-woof-accent) !important; + position: relative; + z-index: 1; +} + +.program-card.woof-card .program-status { + color: white !important; + position: relative; + z-index: 1; +} + +.program-card.woof-card:hover { + border-color: var(--color-woof-accent) !important; +}