Difference between revisions of "Widget:Homepage"

Revision as of 14:50, 24 May 2022

Development verstion of the DCT Homepage.
Not ready for production!

@@ Line 1: / Line 1: @@
-<noinclude>Development verstion of the DCT Homepage.<br>
+<noinclude>Development verstion of the DCT Homepage.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
-    <span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude><includeonly><style>
+<includeonly><style>
          #hp-wrapper { font-family: 'Open Sans'; }
          #hp-heading {
-             padding: 3em;
+             padding: .5em;
              margin-bottom: 8em;
              background:
@@ Line 42: / Line 42: @@
          .hp-search { margin-bottom: 8em; }
          .hp-areas { margin-bottom: 8em; }
-         .hp-area { display: flex; align-items: center; margin-bottom: 2em; text-decoration: none; }
+         .hp-area { display: flex; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
          .hp-area:hover { text-decoration: none; }
          .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
@@ Line 54: / Line 54: @@
          #hp-recent h3 { margin-bottom: 1em; }
          #hp-changes { padding: 4em 0 4em 1em; }
-        .placeholder-box {
-            position: relative;
-            width: 100px;
-            height: 100px;
-            border: 1px solid rgba(0, 0, 0, .9);
-        }
-        .placeholder-box::before {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 141.42%;
-            height: 1px;
-            background-color: rgba(0, 0, 0, .9);
-            transform-origin: top left;
-            transform: rotate(45deg);
-        }
-        .placeholder-box::after {
-            content: "";
-            display: block;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 141.42%;
-            height: 1px;
-            background-color: rgba(0, 0, 0, .9);
-            transform-origin: bottom left;
-            transform: rotate(-45deg);
-        }
          .blue * {
              color: var(--links-blue);
@@ Line 89: / Line 59: @@
              fill: var(--links-blue);
          }
-        .blue .placeholder-box::before, .blue .placeholder-box::after { background-color: var(--links-blue); }
          .orange * {
              color: var(--links-orange);
@@ Line 95: / Line 64: @@
              fill: var(--links-orange);
          }
-        .orange .placeholder-box::before, .orange .placeholder-box::after { background-color: var(--links-orange); }
          .grey * {
              color: var(--links-grey);
@@ Line 101: / Line 69: @@
              fill: var(--links-grey);
          }
-        .grey .placeholder-box::before, .grey .placeholder-box::after { background-color: var(--links-grey); }
          @media screen and (min-width: 992px) {
+            #hp-heading { padding: 3em; }
              #hp-heading .hp-lead { max-width: 50%; }
          }
@@ Line 126: / Line 95: @@
                      <div class="hp-area-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="a"><path d="M65 334h96v96H65z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-65 -334)"><path d="m142 395.981.004-35.993H84.001v36.01Zm-55.999-33.993h54.003L140 393.981l-53.999.017Z"/><path d="M81.001 358.987a2.002 2.002 0 0 1 2-2h60.003a2.002 2.002 0 0 1 2 2V400h2v-41.013a4.003 4.003 0 0 0-4-4H83.001a4.003 4.003 0 0 0-4 4V400h2ZM118.003 402.981v2h-10.001v-2H67v1.999a5.006 5.006 0 0 0 5 5.001h82.004a5.006 5.006 0 0 0 5.001-5.001v-1.999Zm36.001 5H72a3.004 3.004 0 0 1-3-3h37.002a1.934 1.934 0 0 0 2 2h10.001a1.934 1.934 0 0 0 2-2h37.002a3.005 3.005 0 0 1-3.001 3Z"/><path d="M113 365c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13c-.008-7.176-5.824-12.992-13-13Zm10.949 12h-3.518a14.167 14.167 0 0 0-4.176-9.508 11.023 11.023 0 0 1 7.694 9.508ZM112 368.226V377h-4.426c.254-3.771 1.929-7.06 4.426-8.774ZM112 379v8.775c-2.494-1.717-4.17-5.017-4.425-8.775Zm2 8.774V379h4.425c-.255 3.754-1.932 7.056-4.425 8.774ZM114 377v-8.773c2.492 1.718 4.17 5.019 4.425 8.773Zm-4.273-9.502a14.124 14.124 0 0 0-4.158 9.502h-3.518a11.02 11.02 0 0 1 7.676-9.502ZM102.051 379h3.518a14.157 14.157 0 0 0 4.173 9.507 11.022 11.022 0 0 1-7.691-9.507Zm14.205 9.508a14.168 14.168 0 0 0 4.175-9.508h3.518a11.023 11.023 0 0 1-7.693 9.508Z"/></g></svg>
-                        <!-- <div class="placeholder-box"></div> -->
                      </div>
                      <div class="hp-area-text">
@@ Line 140: / Line 108: @@
                      <div class="hp-area-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="b"><path d="M65 455h96v96H65z"/></clipPath></defs><g clip-path="url(#b)" transform="translate(-65 -455)"><path d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z"/><path d="M104 489h28v2h-28ZM110 500h16v2h-16Z"/></g></svg>
-                        <!-- <div class="placeholder-box"></div> -->
                      </div>
                      <div class="hp-area-text">
@@ Line 157: / Line 124: @@
                  <div class="hp-area-icon">
                      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="c"><path d="M199 603h96v96h-96z"/></clipPath></defs><g clip-path="url(#c)" transform="translate(-199 -603)"><path d="m277.516 645.583 2.136.654c-2.126-14.416-13.438-25.741-27.852-27.884l.691 2.143a31.072 31.072 0 0 1 25.025 25.087ZM214.36 646.146l2.14-.646a31.07 31.07 0 0 1 25.02-25l.655-2.139c-14.368 2.147-25.652 13.42-27.815 27.785ZM241.386 681.481a31.073 31.073 0 0 1-24.87-24.881l-2.151-.7a33.075 33.075 0 0 0 27.679 27.727ZM279.654 655.746l-2.141.691a31.072 31.072 0 0 1-25.032 25.068l-.691 2.143c14.424-2.14 25.744-13.475 27.864-27.902Z"/><path d="m274.8 647.888-15.134-4.924 4.837-9.38-9.431 4.806-4.872-15.208-2-6.2-1.2-3.9-1.3 4-1.9 6.2-4.784 15.134-9.416-4.832 4.82 9.429-15.12 4.776-6.3 1.9-4 1.3 4 1.3 6.1 2 15.248 4.8-4.848 9.405 9.386-4.947L243.7 678.8l1.9 6.2 1.3 4 1.3-4 2-6.2 4.9-15.3 9.4 4.9-4.828-9.351 15.028-4.859 6.2-2 4-1.3-3.9-1.1Zm-.714 4.4-15.341 4.954-2.01-3.893a9.925 9.925 0 0 1-.951 2.519l4.045 7.832-7.723-4.027a9.93 9.93 0 0 1-2.361 1.027l3.555 1.854-5 15.629-1.382 4.283-1.308-4.271-4.925-15.595 3.594-1.894a9.95 9.95 0 0 1-2.36-1.017l-7.73 4.074 4.051-7.863a9.91 9.91 0 0 1-.959-2.505l-2 3.885-15.557-4.89-4.194-1.375 4.37-1.315 15.441-4.877 1.967 3.847a9.938 9.938 0 0 1 .981-2.475l-4.088-8 8.016 4.113a9.958 9.958 0 0 1 2.523-.953l-3.92-2.013 4.894-15.474 1.27-4.148 1.316 4.072 4.966 15.518-4.011 2.044a9.922 9.922 0 0 1 2.53.955l8.1-4.125-4.147 8.043c.433.78.76 1.614.971 2.481l2.033-3.943 15.475 5.035 3.883 1.192Z"/><path d="M247 644.088a7 7 0 1 0 7 7 7.009 7.009 0 0 0-7-7Zm0 12a5 5 0 1 1 5-5 5.007 5.007 0 0 1-5 5.003Z"/></g></svg>
-                    <!-- <div class="placeholder-box"></div> -->
                  </div>
                  <div class="hp-area-text">