style polish

robotframework · Oct 8, 2024 · 81d3c9e · 81d3c9e
1 parent b0b89b7
commit 81d3c9e
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/docs/assets/index-nmr5sFcU.js → docs/assets/index-BKgSR6c4.js b/docs/assets/index-nmr5sFcU.js → docs/assets/index-BKgSR6c4.js
diff --git a/docs/assets/index-BKuQxM9s.css b/docs/assets/index-BKuQxM9s.css
diff --git a/docs/assets/index-BuldRxRf.css b/docs/assets/index-BuldRxRf.css
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
     <script defer src="/spa.js"></script>
-    <script type="module" crossorigin src="/assets/index-nmr5sFcU.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BKuQxM9s.css">
+    <script type="module" crossorigin src="/assets/index-BKgSR6c4.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BuldRxRf.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
@@ -17,8 +17,12 @@
 
 .card {
   border: solid 2px #24282c;
-  box-shadow: 0 2px 3px #020d6799;
   border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(8, 25, 153, 0.3);
+  transition: box-shadow 0.2s;
+  &:hover {
+    box-shadow: 0 4px 8px rgba(8, 25, 153, 0.6);
+  }
 }
 
 details {

diff --git a/src/components/PageSection.vue b/src/components/PageSection.vue
@@ -59,7 +59,7 @@ h2::before {
   margin-bottom: 0;
 }
 .container :deep(.section-row) {
-  padding-inline: 1rem;
+  padding: 1rem;
   margin-inline: -1rem;
 }
 </style>
diff --git a/src/components/SponsorItem.vue b/src/components/SponsorItem.vue
@@ -4,8 +4,8 @@
     target="_blank"
     :aria-label="props.sponsorName"
     class="sponsor"
-    :class="props.sponsorTier">
-    <img :src="props.sponsorLogo.fields.file.url">
+    :class="props.sponsorTier.toLowerCase()">
+    <img :src="props.sponsorLogo.fields.file.url as string">
   </a>
 </template>
 
@@ -27,19 +27,52 @@ const props = defineProps({
 .sponsor {
   display: inline-block;
   aspect-ratio: 1.7;
-  width: calc(100% / 3);
   align-content: center;
-  padding: 1rem;
+  width: calc(100% / 5);
+  padding: 0.5rem;
+
+  &.gold {
+    width: calc(100% / 3);
+    padding: 1.5rem;
+  }
 
   &.big {
     max-width: 25rem;
   }
 
-  & > img {
+  @media screen and (max-width: 768px) {
+    width: calc(100% / 3);
+    padding: 0.25rem;
+    &.gold {
+      width: calc(100% / 2);
+      padding: 0.75rem;
+    }
+  }
+
+  img {
     margin: 0 auto;
     max-width: 100%;
     max-height: 100%;
     display: block;
+    transform: scale(0.98);
+    opacity: 0.85;
+    transition: transform 0.5s, opacity 0.2s;
+  }
+
+  transition: background-color 0.5s, box-shadow 0.5s;
+  border-radius: 4px;
+  &:hover {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    background-color: rgba(8, 25, 153, 0.05);
+    box-shadow: 0 4px 8px #020d6722;
+    &.gold {
+      background-color: rgba(8, 25, 153, 0.075);
+      box-shadow: 0 4px 8px #020d6744;
+    }
+    img {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
 }
 </style>