|
|
| Line 1: |
Line 1: |
| <noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> | | <noinclude>Second version of the LINKS Community Center homepage.<br><strong style="color: red;">Do not modify!</strong></noinclude> |
| <includeonly><style> | | <includeonly> |
| :root {
| |
| --compass-color: #C31980;
| |
| --handbook-color: #C2902D;
| |
| --safe-color: #80C319;
| |
| }
| |
| #hp-wrapper {
| |
| --hp-border: 1px solid rgba(0, 0, 0, .5);
| |
| font-family: 'Open Sans';
| |
| }
| |
| #hp-wrapper h1, #hp-wrapper h2, #hp-wrapper h3 {
| |
| font-family: 'Raleway';
| |
| font-weight: 300;
| |
| letter-spacing: .06em;
| |
| }
| |
| #hp-heading {
| |
| padding: 1em;
| |
| margin-bottom: 4em;
| |
| background:
| |
| url(/index.php?title=Special:Redirect/file/Links-logo-network.png) top -10vh right -5vw / 50% no-repeat,
| |
| 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: multiply, overlay, overlay, normal;
| |
| clip-path: inset(0 100% 100% 0);
| |
| transition: all 500ms ease-in-out;
| |
| }
| |
| .loaded #hp-heading { clip-path: inset(0); }
| |
| #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; color: var(--links-grey); }
| |
| #hp-heading h1 span {
| |
| display: block;
| |
| white-space: nowrap;
| |
| opacity: 0;
| |
| transform: translateX(-1em);
| |
| transition: all 500ms ease-in-out;
| |
| }
| |
| .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(2) { font-weight: 500; transition-delay: 400ms; }
| |
| #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
| |
| #hp-heading .hp-lead { font-size: 1.4em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
| |
| .loaded #hp-heading .hp-lead { opacity: .95; }
| |
| .hp-button-wrapper { text-align: left; }
| |
| .hp-large-button {
| |
| display: inline-block;
| |
| background-color: var(--links-grey);
| |
| color: #C31980;
| |
| border: 2px solid currentColor;
| |
| font-size: 1.3em;
| |
| padding: 0 .5em;
| |
| opacity: 0;
| |
| transition: opacity 500ms ease-in-out 1300ms, color 500ms;
| |
| text-decoration: none;
| |
| cursor: pointer;
| |
| background-color: rgba(255, 255, 255, .4);
| |
| border-radius: 5px;
| |
| }
| |
| .hp-large-button svg { fill: #C31980; height: 4em; transition: fill 500ms; }
| |
| .hp-large-button:hover { text-decoration: none; color: var(--links-blue); }
| |
| .hp-large-button:hover svg { fill: var(--links-blue); }
| |
| .loaded .hp-large-button { opacity: 1; }
| |
| .hp-search { margin-bottom: 4em; }
| |
| .hp-areas { margin-bottom: 8em; }
| |
| .hp-areas *, #hp-collections *, #hp-products * { transition: all 400ms ease-in-out; }
| |
| #hp-collections, #hp-products { border-top: var(--hp-border); }
| |
| .hp-areas h2 { text-align: center; margin-bottom: 1.5em; }
| |
| .hp-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
| |
| .hp-area h3 { text-align: center; }
| |
| .hp-area:hover { text-decoration: none; }
| |
| .hp-area:hover h3 { font-weight: 700 !important; }
| |
| .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
| |
| .hp-area-icon svg { width: 100px; height: 100px; }
| |
| .hp-area-text { flex: 1 1 75%; }
| |
| .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; }
| |
| .hp-area-arrow { display: none; }
| |
| .hp-compass {
| |
| border-top: var(--hp-border);
| |
| border-bottom: var(--hp-border);
| |
| padding: 2em 1em;
| |
| display: flex;
| |
| justify-content: center;
| |
| }
| |
| #hp-resources, #hp-networks, #hp-feel-safe, #hp-handbook, #hp-wheel { padding: 2em 1em; }
| |
| #hp-resources .hp-area, #hp-networks .hp-area,
| |
| #hp-feel-safe .hp-area, #hp-handbook .hp-area, #hp-wheel .hp-area { margin-bottom: 0 !important; }
| |
| #hp-recent h3 { margin-bottom: 1em; }
| |
| #forum-topics { padding: 2em 1em; }
| |
| #hp-changes { border-top: var(--hp-border); padding: 2em 1em; }
| |
| .blue * {
| |
| color: var(--links-blue);
| |
| border-color: var(--links-blue);
| |
| fill: var(--links-blue);
| |
| }
| |
| .orange * {
| |
| color: var(--links-orange);
| |
| border-color: var(--links-orange);
| |
| fill: var(--links-orange);
| |
| }
| |
| .grey * {
| |
| color: var(--links-grey);
| |
| border-color: var(--links-grey);
| |
| fill: var(--links-grey);
| |
| }
| |
| .cyan * {
| |
| color: var(--links-cyan);
| |
| border-color: var(--links-cyan);
| |
| fill: var(--links-cyan);
| |
| }
| |
| .yellow * {
| |
| color: var(--ccl-color);
| |
| border-color: var(--ccl-color);
| |
| fill: var(--ccl-color);
| |
| }
| |
|
| |
|
| /* Quick fix for removed Compass. Delete when Compass is restored. */
| | <!-- STYLES BEGIN --> |
| #forum-topics { border-top: var(--hp-border); }
| | <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/main/styles.css"> |
| | | <!-- STYLES END --> |
| @media screen and (min-width: 992px) {
| |
| #hp-heading { padding: 3em; margin-bottom: 4em; }
| |
| #hp-heading h1 { font-size: 5em; }
| |
| #hp-heading .hp-lead { max-width: 50%; font-size: 2em; }
| |
| .hp-button-wrapper { text-align: left; }
| |
| .hp-large-button { font-size: 2em; }
| |
| #hp-main { width: 75%; margin: auto; }
| |
| .hp-search { margin-bottom: 8em; }
| |
| .hp-area { flex-direction: row; }
| |
| .hp-area h3 { text-align: left; }
| |
| .hp-areas h2 { margin-bottom: 2em; }
| |
| .hp-area-icon svg { width: 130px; height: 130px; }
| |
| .hp-area-arrow { display: block; flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
| |
| .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
| |
| .hp-compass { padding: 5em; }
| |
| #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-compass .hp-area-text h2 { font-size: 3em; }
| |
| .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
| |
| .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>
| |
| | |
| <script>
| |
| function search(event) {
| |
| event.preventDefault();
| |
| const searchString = document.getElementById('hp-search-input').value;
| |
| window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1');
| |
| }
| |
| </script>
| |
|
| |
|
| <div id="hp-wrapper"> | | <div id="hp-wrapper"> |
| Line 185: |
Line 39: |
| <!-- SNIPPETS END --> | | <!-- SNIPPETS END --> |
|
| |
|
| <form class="hp-search form-inline w-100" onsubmit="search(event)">
| | <!-- SEARCH BEGIN --> |
| <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text"
| | <script src="https://www.safetyinnovation.center/lcc/search/script.js"></script> |
| placeholder="Search the entire LCC" aria-label="Search">
| | <form class="hp-search form-inline w-100" onsubmit="search(event)"> |
| <button type="submit" class="btn btn-primary btn-lg"
| | <input id="hp-search-input" class="form-control form-control-lg flex-grow-1" type="text" placeholder="Search the entire LCC" aria-label="Search"> |
| style="background-color: var(--links-blue); border-color: var(--links-blue);">Search</button>
| | <button type="submit" class="btn btn-primary btn-lg" style="background-color: var(--links-blue); border-color: var(--links-blue);"> |
| </form>
| | Search |
| | </button> |
| | </form> |
| | <!-- SEARCH END --> |
|
| |
|
| <div class="hp-areas"> | | <div class="hp-areas"> |