Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
 
(15 intermediate revisions by the same user not shown)
Line 150: Line 150:
 
             margin: 4em 0;
 
             margin: 4em 0;
 
         }
 
         }
−
         .snippet {  
+
         .snippet {
−
             display: flex;
+
             display: block;
−
            flex-flow: column nowrap;
 
−
            align-items: center;
 
−
            border: 2px solid;
 
−
            border-radius: 5px;
 
 
             text-decoration: none !important;
 
             text-decoration: none !important;
 +
            color: transparent;
 +
            background-color: transparent;
 +
            perspective: 1000px;
 +
            height: 7em;
 +
        }
 +
        .snippet .snippet-inner {
 +
            position: relative;
 +
            width: 100%;
 +
            height: 100%;
 +
            transition: transform 500ms;
 +
            transform-style: preserve-3d;
 
         }
 
         }
−
         .snippet-header {
+
        .snippet:hover .snippet-inner {
 +
            transform: rotateY(180deg);
 +
        }
 +
         .snippet-header, .snippet-body {
 +
            position: absolute;
 
             width: 100%;
 
             width: 100%;
 
             height: 100%;
 
             height: 100%;
−
             border-bottom: 2px solid;
+
            padding: 1em;
−
             padding: .75em;
+
             border: 2px solid;
 +
             border-radius: 5px;
 +
            display: flex;
 +
            align-items: center;
 +
            justify-content: center;
 
             text-align: center;
 
             text-align: center;
−
             transition: all 250ms;
+
             -webkit-backface-visibility: hidden; /* Safari */
 +
            backface-visibility: hidden;
 +
        }
 +
        .snippet-header {
 
             color: #fff;
 
             color: #fff;
 
         }
 
         }
 
         .snippet-body {
 
         .snippet-body {
−
             width: 100%;
+
             transform: rotateY(180deg);
−
            height: 100%;
 
−
            padding: 1em;
 
−
            transition: all 250ms;
 
 
         }
 
         }
  
−
         .snippet.TL { color: var(--links-blue); }
+
         .snippet.TL .snippet-body { color: var(--links-blue); }
  
−
         .snippet.GL { color: var(--links-orange); }
+
         .snippet.GL .snippet-body { color: var(--links-orange); }
  
−
         .snippet.UCL { color: var(--links-cyan); }
+
         .snippet.UCL .snippet-body { color: var(--links-cyan); }
  
−
         .snippet.ICH { color: var(--handbook-color); }
+
         .snippet.ICH .snippet-body { color: var(--handbook-color); }
  
−
         .snippet.FS { color: var(--safe-color); }
+
         .snippet.FS .snippet-body { color: var(--safe-color); }
  
−
         .snippet.RW { color: var(--links-grey); }
+
         .snippet.RW .snippet-body { color: var(--links-grey); }
  
 
         .snippet.TL .snippet-header {
 
         .snippet.TL .snippet-header {
Line 215: Line 230:
 
             border-color: var(--safe-color);
 
             border-color: var(--safe-color);
 
         }
 
         }
−
 
−
        .snippet:hover .snippet-header { background-color: #fff; }
 
−
        .snippet.TL:hover .snippet-header { color: var(--links-blue); }
 
−
        .snippet.RW:hover .snippet-header { color: var(--links-grey); }
 
−
        .snippet.GL:hover .snippet-header { color: var(--links-orange); }
 
−
        .snippet.UCL:hover .snippet-header { color: var(--links-cyan); }
 
−
        .snippet.ICH:hover .snippet-header { color: var(--handbook-color); }
 
−
        .snippet.FS:hover .snippet-header { color: var(--safe-color); }
 
 
     </style>
 
     </style>
  
Line 235: Line 242:
 
     <div id="hp-wrapper">
 
     <div id="hp-wrapper">
 
         <div id="hp-heading">
 
         <div id="hp-heading">
−
             <h1>
+
             <h1 translate="no">
 
                 <span>LINKS</span>
 
                 <span>LINKS</span>
 
                 <span>Community</span>
 
                 <span>Community</span>
Line 400: Line 407:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
 
−
        <!--kie: comment out until it is available.-->
 
−
        <!-- <div class="hp-compass cyan">
 
−
            <div class="d-flex align-items-center">
 
−
                <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>
 
−
                <div class="hp-area-text">
 
−
                    <h2>Want to be guided?</h2>
 
−
                    <p>
 
−
                        Try the compass!
 
−
                    </p>
 
−
                </div>
 
−
            </div>
 
−
        </div> -->
 
  
 
         <div id="hp-recent" class="container-fluid">
 
         <div id="hp-recent" class="container-fluid">
Line 441: Line 433:
 
                     "product": "TL",
 
                     "product": "TL",
 
                 },
 
                 },
−
                 // {
+
                 {
−
                //    "title": "Do you want to be prepared when disaster strikes?",
+
                    "title": "Do you want to be prepared when disaster strikes?",
−
                //    "body": "Learn from over 30 use cases about social media and crowdsourcing.",
+
                    "body": "Learn from many use cases about social media and crowdsourcing.",
−
                //    "action": "/index.php/List_of_Use_Cases",
+
                    "action": "/index.php/List_of_Use_Cases",
−
                //    "product": "UCL",
+
                    "product": "UCL",
−
                 // },
+
                 },
 
                 {
 
                 {
 
                     "title": "How to protect children during disaster?",
 
                     "title": "How to protect children during disaster?",
Line 473: Line 465:
 
                 {
 
                 {
 
                     "title": "Do you struggle with managing volunteers in disasters?",
 
                     "title": "Do you struggle with managing volunteers in disasters?",
−
                     "body": "Look at our use cases on how to engage them.",
+
                     "body": "Take part in the course on mobilizing volunteers.",
−
                     "action": "/index.php/List_of_Use_Cases?do=JTdCJTIyZmlsdGVyJTIyJTNBJTdCJTIyVXNlJTIwY2FzZXMlMjB0aGVtYXRpYyUyMiUzQSU3QiUyMk1vYmlsaXNpbmclMjBWb2x1bnRlZXJzJTIyJTNBdHJ1ZSU3RCU3RCU3RA==",
+
                     "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers",
−
                     "product": "UCL",
+
                     "product": "ICH",
 
                 },
 
                 },
 
             ];
 
             ];
Line 499: Line 491:
 
                 const snippet = snippets[index];
 
                 const snippet = snippets[index];
 
                 let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">';
 
                 let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">';
 +
                    el += '<div class="snippet-inner">';
 
                     el += '<div class="snippet-header">' + snippet.title + '</div>';
 
                     el += '<div class="snippet-header">' + snippet.title + '</div>';
 
                     el += '<div class="snippet-body">' + snippet.body + '</div>';
 
                     el += '<div class="snippet-body">' + snippet.body + '</div>';
−
                     el += '</a>';
+
                     el += '</div></a>';
 
                 container.innerHTML += el;
 
                 container.innerHTML += el;
 
             }
 
             }
 
         </script>
 
         </script>
 
</includeonly>
 
</includeonly>

Latest revision as of 14:36, 10 January 2024

Second version of the LINKS Community Center homepage.
Do not modify!

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