Widget: Homepage: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
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!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Homepage&oldid=5394"