diff --git a/apps/site/src/assets/icons/open-new-window.svg b/apps/site/src/assets/icons/open-new-window.svg
index 86f13072..628604bb 100644
--- a/apps/site/src/assets/icons/open-new-window.svg
+++ b/apps/site/src/assets/icons/open-new-window.svg
@@ -1,4 +1,4 @@
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
index babc1129..0845cc6c 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -2,25 +2,11 @@
@use "bootstrap-utils" as utils;
.group {
- margin-top: 50px;
position: relative;
padding: 1rem 0;
width: 200px;
}
-.tape {
- background-image: url("~@/assets/images/tape.svg");
- width: 238px;
- height: 60px;
- position: absolute;
- top: 3%;
- left: 15%;
- z-index: 10;
- @media screen and (max-width: 400px) {
- left: 10%;
- }
-}
-
.container {
position: relative;
display: flex;
@@ -28,49 +14,25 @@
justify-content: center;
align-items: center;
gap: 10px;
- height: 450px;
+}
+
+.buttonImage {
+ width: 50px;
}
.titleLink {
font-family: inherit;
text-decoration: none;
color: inherit;
+ font-weight: 600;
+ color: theme.$lighter-black;
:link {
text-decoration: none;
}
}
-.tag {
- background-image: url("~@/assets/images/resource-link.svg");
- background-size: 100% 100%;
- background-repeat: no-repeat;
- background-position: left;
- display: inline-block;
- padding: 1rem;
- padding-right: 3rem;
- margin-left: -6px;
- margin-bottom: 0.5rem;
- transition:
- filter 0.13s ease,
- transform 0.13s ease,
- filter 0.13s ease;
-
- color: theme.$black;
- text-decoration: none;
- font-weight: bold;
-
- &:hover,
- &:focus {
- transform: translateX(-5px) translateZ(0);
- filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)
- drop-shadow(0px 2px 0px black) drop-shadow(0px -2px 0px black);
- }
-}
-
-.text {
- width: 90%;
- text-align: center;
- font-family: utils.$font-family-base;
+.titleLinkIcon {
+ margin-bottom: 0.2rem;
}
.islandBackground {
@@ -90,8 +52,26 @@
min-width: 350px;
}
-.description {
- overflow: auto;
+.description > * {
+ margin: 0;
+ font-size: 1.05rem;
+ color: theme.$lighter-black;
+}
+
+@include utils.media-breakpoint-up(md) {
+ .container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ height: 450px;
+ }
+
+ .buttonImage {
+ width: 100px;
+ }
}
@include utils.media-breakpoint-up(sm) {
@@ -99,16 +79,16 @@
width: 500px;
min-width: 500px;
}
+
.islandBackground {
width: 500px;
}
+
.group {
width: 300px;
}
-}
-@include utils.media-breakpoint-down(sm) {
- .description {
- max-height: 100px;
+ .description > * {
+ font-size: 24px;
}
}
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
index d5903f06..0085d02e 100644
--- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
+++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -69,7 +69,7 @@ export default function ResourceCard({
)}
@@ -88,7 +88,7 @@ export default function ResourceCard({
)}{" "}
{links.map(({ text, link }) => (