ShrimpSquad/ShrimpDelightSite
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

htp button

Browse Source
This commit is contained in:
Lah Shrimp 2026-03-05 21:13:28 -07:00
parent d003913ce7
commit 84fe5c9e55
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
shrimpjects.js
View File

@ -22,7 +22,7 @@ export const projects = {
<p>One week to make a game and this is what we made! A game based on the movie Hackers.</p> <p>One week to make a game and this is what we made! A game based on the movie Hackers.</p>
<p>Your goal is to hack the Gibson computer and collect the garbage file. <p>Your goal is to hack the Gibson computer and collect the garbage file.
Which will then in turn let you <span class="bold">HACK THE PLANET!</span> </p> Which will then in turn let you <span class="bold">HACK THE PLANET!</span> </p>
<a class='htp-cta' href='https://megsum.itch.io/hack-the-planet'> Try it out!</a>`, <div class='cta-wrapper'><a class='cta' href='https://megsum.itch.io/hack-the-planet'> >> Try it out!</a></div>`,
images: { images: {
left: {src:"htp1.png",alt:"visual puzzle with different colours"}, left: {src:"htp1.png",alt:"visual puzzle with different colours"},
right: {src:"htp2.png",alt:"the player character standing surrounded by various text characters"}, right: {src:"htp2.png",alt:"the player character standing surrounded by various text characters"},

34
shrimpy-styles.css
View File

@ -92,7 +92,7 @@ body {
flex-basis: 32%; flex-basis: 32%;
} }
#shrimp-project-content .upper div{ #shrimp-project-content .upper > div{
background-color:var(--tangerine-dream-shrimp); background-color:var(--tangerine-dream-shrimp);
padding: 0 10px; padding: 0 10px;
} }
@ -114,6 +114,12 @@ body {
#shrimp-gif > * { #shrimp-gif > * {
width:50%; width:50%;
} }
#project-content{
display:flex;
flex-flow:column;
margin: 0 auto;
}
@media screen and (orientation: portrait) { @media screen and (orientation: portrait) {
#shrimp-project-content .upper{ #shrimp-project-content .upper{
@ -128,4 +134,28 @@ body {
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
/* buttons */
.cta-wrapper{
margin-top:16px;
background-color: var(--space-shrimp-blue);
border-radius: 5px;
padding:15px;
width:fit-content;
}
.cta-wrapper .cta {
text-decoration: none;
border-right: 2px solid var(--ashy-shrimp);
color: var(--ashy-shrimp);
font-size: 24px;
animation: blink-border .75s step-end infinite;
}
@keyframes blink-border {
from, to { border-color: transparent }
50% { border-color: var(--ashy-shrimp); }
}
/* end buttons */