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 {  
         #hp-wrapper { font-family: 'Open Sans'; }
            --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 13: Line 10:
             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 42: Line 44:
             font-size: 1.3em;
             font-size: 1.3em;
             padding: .5em;
             padding: .5em;
             border: var(--hp-border);
             border: 1px solid rgba(0, 0, 0, .9);
             opacity: 0;
             opacity: 0;
             transition: all 500ms ease-in-out 1300ms;
             transition: all 500ms ease-in-out 1300ms;
Line 64: Line 66:
         .hp-area-arrow { display: none; }
         .hp-area-arrow { display: none; }
         .hp-compass {
         .hp-compass {
             border-top: var(--hp-border);
             border-top: 1px solid rgba(0, 0, 0, .9);
             border-bottom: var(--hp-border);
             border-bottom: 1px solid rgba(0, 0, 0, .9);
             padding: 2em 1em;
             padding: 2em 1em;
             display: flex;
             display: flex;
             justify-content: center;
             justify-content: center;
         }
         }
         #hp-resources, #hp-networks { padding: 2em 1em; }
         #hp-resources, #hp-networks { border-top: 1px solid rgba(0, 0, 0, .9); 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: var(--hp-border); padding: 2em 1em; }
         #hp-changes { border-top: 1px solid rgba(0, 0, 0, .9); padding: 2em 1em; }
         .blue * {
         .blue * {
             color: var(--links-blue);
             color: var(--links-blue);
Line 96: Line 97:
             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 115: Line 113:
             .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: var(--hp-border); }
             #hp-collections { border-top: 1px solid rgba(0, 0, 0, .9); }
             #hp-resources { border-top: 0 none; }
             #hp-resources { border-top: 0 none; }
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
             #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: 1px solid rgba(0, 0, 0, .9); }
             #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 152: Line 146:
         <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" aria-label="Search">
                 <input id="hp-search-input" class="form-control form-control-lg" type="text" placeholder="Search">
             </form>
             </form>


Line 220: Line 214:


         <!--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 232: Line 226:
                 </div>
                 </div>
             </div>
             </div>
         </div> -->
         </div>


         <div id="hp-recent" class="container-fluid">
         <div id="hp-recent" class="container-fluid">

Revision as of 14:57, 29 June 2022

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

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