updated into section, news and calendar (#321)

robotframework · Apr 24, 2024 · edd9561 · edd9561
1 parent 31474aa
commit edd9561
Show file tree

Hide file tree

Showing 21 changed files with 763 additions and 211 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
     <script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
     <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
     <script defer src="/scripts/gh-pages-spa.js"></script>
-    <script defer src="/scripts/stars-tag.js"></script>
+    <script src="/scripts/stars-tag.js"></script>
   </head>
   <body>
     <noscript>

diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css
@@ -96,3 +96,14 @@
         color: var(--color-white);
     }
 }
+
+/* updated color classes for more straightforward darkmode support */
+.color-text {
+    color: var(--color-text);
+}
+.color-link {
+    color: var(--color-link);
+}
+.bg-secondary {
+    background-color: var(--color-background-secondary);
+}
diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
@@ -7,6 +7,10 @@
 .card:hover {
     box-shadow: 2px 4px 4px -1px rgba(0,0,0,0.16),
     6px 6px 20px -1px rgba(107, 84, 84, 0.1);
+    @media (prefers-color-scheme: dark) {
+        box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.2),
+        6px 6px 20px -1px rgba(0, 0, 0, 0.1);
+    }
 }
 .card.sharp {
     border-radius: 0;
@@ -140,3 +144,8 @@ button.bling {
         background-position: -10% 50%;
     }
 }
+
+hr.theme {
+    border: solid 2px var(--color-theme);
+    border-radius: 4px;
+}
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
@@ -48,4 +48,13 @@ ul {
 }
 form {
 	display: contents;
+}
+fieldset {
+	border: 2px double var(--color-text);
+	padding: 0.5rem 1rem;
+}
+legend {
+	line-height: 1;
+	padding-inline: 0.5rem;
+	margin-left: 0.75rem;
 }
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -3,14 +3,17 @@
     --color-theme-dark: #09504d; /* for theme color dark */
     --color-alert: #ff9f94;
     --color-background: #f0f0f0;
+    --color-background-secondary: #fff;
+
+    --color-text: #000000;
     --color-background-darkmode: #222222;
 
     --color-white: #f5f5f5;
     --color-grey-light: #e7e7e7;
     --color-grey: #c6c6c6;
     --color-grey-dark: #292f33;
     --color-black: #000000; /* body text */
-    --color-link: #00c0b5;
+    --color-link: #00857e;
     --color-link-visited: #578a88;
 
     --color-red: #d32f2f;
@@ -68,3 +71,11 @@
 
     --border-radius-rounded: 0.2rem;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text: #f0f0f0;
+        --color-link: #00c0b5;
+        --color-background-secondary: #2b2b2b;
+    }
+}
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
@@ -1,24 +1,45 @@
 <template>
-  <div class="row bg-theme center p-medium">
-    <div>
-      <h1 class="title" style="font-size: 4rem;">
-        ROBOT<br>
-        FRAME<br>
-        WORK<div style="font-size: 2.5rem; transform: translateY(-.5rem); display: inline-block;">🇺🇦</div>
-      </h1>
-    </div>
+  <div class="banner">
+    <h1 class="color-black logotype bg-theme">
+      <div class="color-white">ROBOT</div>
+      <div>FRAME</div>
+      <div class="flex">
+        WORK
+        <robot-icon size="4.6rem" color="black" style="transform: translate(0.5rem, 1rem);" />
+      </div>
+    </h1>
   </div>
 </template>
 
 <script>
+import RobotIcon from './icons/RobotIcon.vue'
 export default {
-  name: 'Banner'
+  name: 'Banner',
+  components: {
+    RobotIcon
+  }
 }
 </script>
 
 <style scoped>
-  .title::first-line {
-    color: var(--color-white);
+  h1 {
+    width: fit-content;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+  .banner {
+    width: 100%;
+    background-color: var(--color-theme);
+  }
+  .logotype {
+    font-size: 6rem;
+    padding: 2rem;
+    display: block;
+    @media screen and (max-width: 769px) {
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 20vw;
+      padding: 14.25vw;
+    }
   }
-
 </style>