Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
Line 1: Line 1:
 
<noinclude>Development verstion of the DCT Homepage.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
 
<noinclude>Development verstion of the DCT Homepage.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
 
<includeonly><style>
 
<includeonly><style>
         #hp-wrapper { font-family: 'Open Sans'; }
+
         #hp-wrapper {
 +
            --hp-border: 1px solid rgba(0, 0, 0, .5);
 +
            font-family: 'Open Sans';
 +
        }
 
         #hp-wrapper h1,  #hp-wrapper h2,  #hp-wrapper h3 {
 
         #hp-wrapper h1,  #hp-wrapper h2,  #hp-wrapper h3 {
 
             font-family: 'Raleway';
 
             font-family: 'Raleway';
Line 10: Line 13:
 
             padding: 1em;
 
             padding: 1em;
 
             margin-bottom: 4em;
 
             margin-bottom: 4em;
             /* background:
+
             background:
 
                 linear-gradient(125deg, #FFFFFF 0%, #000000 100%),
 
                 linear-gradient(125deg, #FFFFFF 0%, #000000 100%),
 
                 linear-gradient(200deg, #D0F2F2 0%, #D0F2F2 50%, #34B8B8 calc(50% + 1px), #34B8B8 60%, #166EA9 calc(60% + 1px), #166EA9 75%, #125887 calc(75% + 1px), #125887 100%),
 
                 linear-gradient(200deg, #D0F2F2 0%, #D0F2F2 50%, #34B8B8 calc(50% + 1px), #34B8B8 60%, #166EA9 calc(60% + 1px), #166EA9 75%, #125887 calc(75% + 1px), #125887 100%),
 
                 linear-gradient(113deg, #D0F2F2 0%, #D0F2F2 40%, #34B8B8 calc(40% + 1px), #34B8B8 50%, #166EA9 calc(50% + 1px), #166EA9 70%, #125887 calc(70% + 1px), #125887 100%);
 
                 linear-gradient(113deg, #D0F2F2 0%, #D0F2F2 40%, #34B8B8 calc(40% + 1px), #34B8B8 50%, #166EA9 calc(50% + 1px), #166EA9 70%, #125887 calc(70% + 1px), #125887 100%);
            background-blend-mode: overlay, overlay, normal; */
 
            background:
 
            linear-gradient(125deg, #FFFFFF 0%, #222222 100%),
 
                linear-gradient(200deg, #d5dde3 0%, #d5dde3 50%, #acbac8 calc(50% + 1px), #acbac8 60%, #5d758c calc(60% + 1px), #5d758c 75%, #415262 calc(75% + 1px), #415262 100%),
 
                linear-gradient(113deg, #d5dde3 0%, #d5dde3 40%, #acbac8 calc(40% + 1px), #acbac8 50%, #5d758c calc(50% + 1px), #5d758c 70%, #415262 calc(70% + 1px), #415262 100%);
 
 
             background-blend-mode: overlay, overlay, normal;
 
             background-blend-mode: overlay, overlay, normal;
 
             clip-path: inset(0 100% 100% 0);
 
             clip-path: inset(0 100% 100% 0);
Line 24: Line 22:
 
         }
 
         }
 
         .loaded #hp-heading { clip-path: inset(0); }
 
         .loaded #hp-heading { clip-path: inset(0); }
         #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; color: var(--links-grey); }
+
         #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; }
 
         #hp-heading h1 span {
 
         #hp-heading h1 span {
 
             display: block;
 
             display: block;
Line 32: Line 30:
 
             transition: all 500ms ease-in-out;
 
             transition: all 500ms ease-in-out;
 
         }
 
         }
         .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0); position: relative; }
+
         .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0);}
 
         #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; }
 
         #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; }
        /* #hp-heading h1 span:nth-child(1)::before { 
 
            content: "[";
 
            color: var(--links-orange);
 
            font-size: 1.5em;
 
            display: inline-block;
 
            position: absolute;
 
            top: -0.2em;
 
            left: -0.3em;
 
            font-weight: 500; 
 
        }
 
        #hp-heading h1 span:nth-child(1)::after { 
 
            content: "]";
 
            color: var(--links-orange);
 
            font-size: 1.5em;
 
            display: inline-block;
 
            position: absolute;
 
            top: -0.2em;
 
            left: 2.15em;
 
            font-weight: 500; 
 
        } */
 
 
         #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
 
         #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
 
         #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
 
         #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
Line 64: Line 42:
 
             font-size: 1.3em;
 
             font-size: 1.3em;
 
             padding: .5em;
 
             padding: .5em;
             border: 1px solid rgba(0, 0, 0, .9);
+
             border: var(--hp-border);
 
             opacity: 0;
 
             opacity: 0;
 
             transition: all 500ms ease-in-out 1300ms;
 
             transition: all 500ms ease-in-out 1300ms;
Line 86: Line 64:
 
         .hp-area-arrow { display: none; }
 
         .hp-area-arrow { display: none; }
 
         .hp-compass {
 
         .hp-compass {
             border-top: 1px solid rgba(0, 0, 0, .9);
+
             border-top: var(--hp-border);
             border-bottom: 1px solid rgba(0, 0, 0, .9);
+
             border-bottom: var(--hp-border);
 
             padding: 2em 1em;
 
             padding: 2em 1em;
 
             display: flex;
 
             display: flex;
 
             justify-content: center;
 
             justify-content: center;
 
         }
 
         }
         #hp-resources, #hp-networks { border-top: 1px solid rgba(0, 0, 0, .9); padding: 2em 1em; }
+
         #hp-resources, #hp-networks { padding: 2em 1em; }
 +
        #hp-resources { border-top: var(--hp-border); }
 
         #hp-resources .hp-area, #hp-networks .hp-area { margin-bottom: 0 !important; }
 
         #hp-resources .hp-area, #hp-networks .hp-area { margin-bottom: 0 !important; }
 
         #hp-recent h3 { margin-bottom: 1em; }
 
         #hp-recent h3 { margin-bottom: 1em; }
 
         #forum-topics { padding: 2em 1em; }
 
         #forum-topics { padding: 2em 1em; }
         #hp-changes { border-top: 1px solid rgba(0, 0, 0, .9); padding: 2em 1em; }
+
         #hp-changes { border-top: var(--hp-border); padding: 2em 1em; }
 
         .blue * {
 
         .blue * {
 
             color: var(--links-blue);
 
             color: var(--links-blue);
Line 117: Line 96:
 
             fill: var(--links-cyan);
 
             fill: var(--links-cyan);
 
         }
 
         }
 +
 +
        /* Quick fix for removed Compass. Delete when Compass is restored. */
 +
        #forum-topics { border-top: var(--hp-border); }
  
 
         @media screen and (min-width: 992px) {
 
         @media screen and (min-width: 992px) {
Line 133: Line 115:
 
             .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
 
             .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
 
             .hp-compass { padding: 5em; }
 
             .hp-compass { padding: 5em; }
             #hp-collections { border-top: 1px solid rgba(0, 0, 0, .9); }
+
             #hp-collections { border-top: var(--hp-border); }
 
             #hp-resources { border-top: 0 none; }
 
             #hp-resources { border-top: 0 none; }
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: 1px solid rgba(0, 0, 0, .9); }
+
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
 
             #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
 
             #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
 
             .hp-compass .hp-area-text h2 { font-size: 3em; }
 
             .hp-compass .hp-area-text h2 { font-size: 3em; }
 
             .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
 
             .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
 
             .hp-compass svg { width: 200px; height: 200px; }
 
             .hp-compass svg { width: 200px; height: 200px; }
 +
 +
            /* Quick fix for removed Compass. Delete when Compass is restored. */
 +
            #hp-resources {border-right: 0 none; }
 +
            #hp-changes { border-top: var(--hp-border); }
 
         }
 
         }
 
     </style>
 
     </style>
Line 166: Line 152:
 
         <div id="hp-main">
 
         <div id="hp-main">
 
             <form class="hp-search" onsubmit="search(event)">
 
             <form class="hp-search" onsubmit="search(event)">
                 <input id="hp-search-input" class="form-control form-control-lg" type="text" placeholder="Search">
+
                 <input id="hp-search-input" class="form-control form-control-lg" type="text" placeholder="Search" aria-label="Search">
 
             </form>
 
             </form>
  
Line 234: Line 220:
  
 
         <!--kie: comment out until it is available.-->
 
         <!--kie: comment out until it is available.-->
         <div class="hp-compass cyan">
+
         <!-- <div class="hp-compass cyan">
 
             <div class="d-flex align-items-center">
 
             <div class="d-flex align-items-center">
 
                 <div class="hp-area-icon">
 
                 <div class="hp-area-icon">
Line 246: Line 232:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
         </div>
+
         </div> -->
  
 
         <div id="hp-recent" class="container-fluid">
 
         <div id="hp-recent" class="container-fluid">

Revision as of 10:30, 30 June 2022

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