Widget: Compass: Difference between revisions

Revision as of 16:21, 23 November 2022

Development version of the Compass.
Not ready for production!

@@ Line 123: / Line 123: @@
          .choice {
              display: flex;
-             flex-direction: column;
+             flex-flow: row nowrap;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .choice .button {
+            flex: 0 0;
+            transition: all 250ms;
+            display: flex;
              justify-content: center;
              align-items: center;
+        }
+        .choice .desc {
+            font-size: 75%;
              padding: 1em;
-            transition: all 250ms;
-        }
-        .choice small {
-            font-size: 70%;
          }
-         .choice.tech {
+         .choice.tech .button {
              color: var(--links-blue);
              border: 1px solid var(--links-blue);
          }
-         .choice.guide {
+         .choice.guide .button {
              color: var(--links-orange);
              border: 1px solid var(--links-orange);
          }
-         .choice.tech:hover {
+         .choice.tech:hover .button {
              background-color: var(--links-blue);
              color: #fff;
          }
-         .choice.guide:hover {
+         .choice.guide:hover .button {
              background-color: var(--links-orange);
              color: #fff;
@@ Line 182: / Line 189: @@
                      <div class="answer">
                          <div class="answer-wrapper">
-                             <div class="choice tech">Technologies<br><small>Lorem ipsum dolor sit amet</small></div>
+                             <div class="choice tech">
-                             <div class="choice guide">Guidelines<br><small>Consectetur adipiscing coconut wigwam</small>
+                                <div class="button">Technologies</div>
+                                <div class="desc">Lorem ipsum dolor sit amet</div>
+                            </div>
+                             <div class="choice guide">
+                                <div class="button">Guidelines</div>
+                                <div class="desc">Consectetur adipiscing coconut wigwam</div>
                              </div>
                          </div>