theme/scoreboard.css

@@ -5,6 +5,48 @@
   }
 }
 
+#chart {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+.logo {
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  font-family: Montserrat, sans-serif;
+  font-weight: 500;
+  border-radius: 10px;
+  font-size: 1.2em;
+}
+.cyber {
+  color: black;
+}
+.fire {
+  color: #d94a1f;
+}
+.announcement.floating {
+  position: fixed;
+  bottom: 0;
+  width: 100hw;
+  max-width: inherit;
+}
+.announcement {
+  background-color: rgba(255,255,255,0.5);
+  color: black;
+  padding: 0.25em;
+  border-radius: 5px;
+  max-width: 20em;
+  text-align: center;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  font-size: 1.3em;
+  flex-wrap: wrap;
+}
+.announcement div {
+  margin: 1em;  
+  max-width: 45vw;
+  text-align: center;
+  
+}
 .location {
   color: #acf;
   background-color: #0008;
@@ -17,6 +59,18 @@
   font-weight:bold;
   text-decoration: underline;
 }
+.qrcode {
+  width: 30vw;
+}
+.examples {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.examples > div {
+  margin: 0.5em;
+  max-width: 40%;
+}
 
 /** Scoreboard */
 #rankings {
@@ -25,23 +79,20 @@
   background-color: #000c;
 }
 #rankings div {
-  height: 1.2rem;
+  height: 1.4rem;
-  display: flex;
-  align-items: center;
 }
 #rankings div:nth-child(6n){
-  background-color: #ccc3;
+  background-color: #ccc1;
 }
 #rankings div:nth-child(6n+3) {
-  background-color: #0f03;
+  background-color: #0f01;
 }
 
 #rankings span {
-  display: inline-block;
+	font-size: 75%;
-  overflow: hidden;
+	display: inline-block;
-}
+	overflow: hidden;
-#rankings span.category {
+  height: 1.4em;
-  font-size: 80%;
 }
 #rankings span.teamname {
   height: auto;
@@ -52,27 +103,6 @@
 	position: absolute;
 	right: 0.2em;
 }
-#rankings span.teamname:hover,
-#rankings span.category:hover {
-  width: inherit;
-  max-width: 100%;
-}
-.topscore::before {
-  content: "✩";
-  font-size: 75%;
-  vertical-align: top;
-}
-
-@media only screen and (max-width: 450px) {
-  #rankings span.teamname {
-    max-width: 6em;
-    text-overflow: ellipsis;
-  }
-  span.teampoints {
-    max-width: 80%;
-  }
-}
-
 #rankings div * {white-space: nowrap;}
 .cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
 .cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}

theme/scoreboard.mjs

@@ -61,20 +61,17 @@ async function update() {
       
       let row = rankingsElement.appendChild(document.createElement("div"))
       
-      let teamname = row.appendChild(document.createElement("span"))
+      let heading = row.appendChild(document.createElement("span"))
-      teamname.textContent = teamName
+      heading.textContent = teamName
-      teamname.classList.add("teamname")
+      heading.classList.add("teamname")
       
       let categoryNumber = 0
-      let teampoints = row.appendChild(document.createElement("span"))
-      teampoints.classList.add("teampoints")
       for (let category of scores.Categories) {
         let score = scores.CyFiCategoryScore(category, teamID)
         if (!score) {
           continue
         }
 
-        // XXX: Figure out how to do this properly with flexbox
         let block = row.appendChild(document.createElement("span"))
         let points = scores.GetPoints(category, teamID)
         let width = MaxScoreWidth * score / topScore
@@ -82,9 +79,7 @@ async function update() {
         block.textContent = category
         block.title = `${points} points`
         block.style.width = `${width}%`
-        block.classList.add("category", `cat${categoryNumber}`)
+        block.classList.add(`cat${categoryNumber}`)
-        block.classList.toggle("topscore", score == 1)
-
         categoryNumber += 1
       } 
     }