Created
July 3, 2022 14:16
-
-
Save choyan/3cd936a6fd2f664b8b67c55d70c80268 to your computer and use it in GitHub Desktop.
Tariq vai
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <!-- <title>Dimension by HTML5 UP</title> --> | |
| <title>Tariq Ridwan | personal website</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> | |
| <link rel="stylesheet" href="assets/css/main.css" /> | |
| <link rel="stylesheet" href="assets/css/academicons.min.css" /> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css"> | |
| <link rel="icon" href="https://gitlab.com/uploads/-/system/user/avatar/10808694/avatar.png"> | |
| <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> | |
| <!-- <style> | |
| p { | |
| background-image: url('https://www.dropbox.com/s/e4137x71tkzupuc/Fig_Clouds.jpg'); | |
| } | |
| </style> --> | |
| <style> | |
| A:hover { COLOR: rgb(163, 255, 246); TEXT-DECORATION: none; font-weight: none } | |
| </style> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-K9FGFG0R7W"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-K9FGFG0R7W'); | |
| </script> | |
| </head> | |
| <body class="is-preload"> | |
| <!-- Wrapper --> | |
| <div id="wrapper"> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="logo"> | |
| <span class="icon fa-gem"></span> | |
| </div> | |
| <div class="content"> | |
| <div class="inner"> | |
| <h1>Tariq Ridwan</h1> | |
| <p>I am a doctoral researcher at <a href="https://bsc.es/">Barcelona Supercomputing Center</a> (BSC · CNS), the Spanish national supercomputing facility.<br /> | |
| Currently conducting research on modeling properties of <a href="https://doi.org/10.1103/APS.DFD.2017.GFM.V0083">large turbulent coherent structures</a> in the<br /> | |
| <a href="https://www.youtube.com/watch?v=a7mC00vbaZQ">atmospheric boundary layer</a> (ABL) to improve the characterization of wind properties for wind energy applications.</p> | |
| </div> | |
| </div> | |
| <nav> | |
| <div> | |
| <div><a href="#biography">Biography</a></div> | |
| <div><a href="#research">Research</a></div> | |
| <div class="is-middle"><a href="#publications">Publications</a></div> | |
| <div><a href="#contact">Contact</a></div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Main --> | |
| <div id="main"> | |
| <!-- Intro --> | |
| <!-- biography --> | |
| <!-- <article id="intro"> --> | |
| <article id="biography"> | |
| <h2 class="major">Biography</h2> | |
| <!-- <span class="image main"><img src="images/pic01.jpg" alt="" /></span> --> | |
| <p>I am currently doing PhD at <a href="https://bsc.es/">Barcelona Supercomputing Center</a> (BSC · CNS) and <a href="https://www.upc.edu/en?set_language=en">Universitat Politècnica de Catalunya</a> (UPC · Barcelona Tech), on modeling properties of <a href="https://doi.org/10.1103/APS.DFD.2017.GFM.V0083">large turbulent coherent structures</a> in the <a href="https://www.youtube.com/watch?v=a7mC00vbaZQ">atmospheric boundary layer</a> (ABL) to improve characterization of wind properties for wind energy applications. For that, the HPC multi-physics code <a href="https://www.bsc.es/research-development/research-areas/engineering-simulations/alya-high-performance-computational">Alya</a> is going to be developed further to simulate the ABL flows in <a href="https://www.bsc.es/marenostrum/marenostrum">Marenostrum supercomputer</a> at BSC.</p> | |
| <p>My PhD supervisors are <a href="https://futur.upc.edu/DavidPinoGonzalez">David Pino González</a> from UPC, <a href="https://www.bsc.es/avila-matias">Matías Ávila</a> from BSC, and <a href="https://www.mi.uni-hamburg.de/arbeitsgruppen/atmosphaerenmodellierung/personen/mellado-juan-pedro.html">Juan Pedro Mellado González</a> from Universität Hamburg.</p> | |
| <p>Previously from 2020 to 2021, I worked as R&D Engineer at Vortex Engineering, Malaysia, on alternate fuel combustion and multidisciplinary CFD. I also worked as Research Associate and CFD consultant at Jubail University College, Saudi Arabia, in alternate fuel powered engine design and fluid-structure interaction (FSI) projects. During Master’s study in 2017-19 at IIUM Malaysia, I designed a swirling flow gas turbine combustor to assess biogas' feasibility compared to traditional natural gas for use in industrial gas turbines. In 2014-15 in Sweden, I attended the MSc. Applied Mechanics program at Chalmers University of Technology (CTH), Göteborg. I did my undergraduate internship in 2013 at Institut für Turbomaschinen und Fluid-Dynamik (TFD), Hannover, Germany. In 2014, I graduated from IIUM Malaysia in Mechanical Engineering, there I developed MATLAB codes for highly non-linear PDEs using Finite Difference Method (FDM) and Fornberg Algorithm to simulate nano-thin film flows.</p> | |
| <p>Access my <a href="https://tariqridwan.github.io/#research">research works</a> and <a href="https://tariqridwan.github.io/#publications">publications</a>.</p> | |
| </article> | |
| <!-- Work --> | |
| <!-- research --> | |
| <!-- <article id="work"> --> | |
| <article id="research"> | |
| <h2 class="major">Research</h2> | |
| <!-- <span class="image main"><img src="images/pic02.jpg" alt="" /></span> --> | |
| <p><strong>Research interests:</strong><br> | |
| ● Meteorology, Wind energy, alternate fuels combustion.<br> | |
| ● Atmospheric boundary layers (ABL) flows, land-atmosphere interactions. <br> | |
| ● Turbulent mixing, shear- and buoyancy-driven flows, entrainment.<br> | |
| ● Development of <a href="https://www.bsc.es/research-development/research-areas/engineering-simulations/alya-high-performance-computational">HPC multi-physics CFD codes</a> for <a href="https://en.wikipedia.org/wiki/TOP500">massively parallel supercomputers</a>.<br> | |
| ● Large Eddy & Direct Numerical simulations, high-performance computing (HPC).<br> | |
| </p> | |
| <p><strong>Ongoing Project:</strong><br> | |
| ● <span style="color: turquoise"><em>TABL4CW:</em></span> Turbulence and large coherent structures in the atmospheric boundary layer: Fundamental aspects for parametrizations of cloud formation and for wind-energy applications, <span style="color: rgb(255, 255, 179)">96800€, 01-12-2021 – 31-05-2023</span>: <a href="https://futur.upc.edu/28980349?locale=en">futur.upc.edu/28980349</a>.<br> | |
| In collaboration with <a href="https://bsc.es">Barcelona Supercomputing Centre</a>, <a href="https://www.uni-hamburg.de/en.html">Universität Hamburg</a>, <a href="https://mpimet.mpg.de/en/">Max Planck Insittute for Meteorology</a>, and <a href="https://www.ds.mpg.de/en">Max Planck Institute for Dynamics and Self-Organization</a>. | |
| </p> | |
| <p><strong>Previous Projects:</strong><br> | |
| ● Design and development of a novel alternate fuel powered annular gas turbine engine for power generation <span style="color: rgb(255, 255, 179)">(2020-21)</span>.<br> | |
| ● Comparative study of Natural Gas (Traditional) and Biogas (Alternative Fuel) combustion in a swirling flow gas turbine combustor <span style="color: rgb(255, 255, 179)">(2017-19)</span>. <a href="https://www.researchgate.net/project/Comparative-study-of-Natural-Gas-Traditional-and-Biogas-Alternative-Fuel-combustion-in-a-swirling-flow-gas-turbine-combustor">Project URL</a><br> | |
| ● Numerical and experimental analysis of nonlinear dynamics of slender flexible cylinders in axial flow with multiple support conditions <span style="color: rgb(255, 255, 179)">(2018-19)</span>.<br> | |
| ● Investigation of active control of Nano-Thin Film flows <span style="color: rgb(255, 255, 179)">(2012-14)</span>. <a href="https://www.researchgate.net/project/Investigation-of-active-control-of-Nano-Thin-Film-flows">Project URL</a><br> | |
| ● Investigation of secondary flow in diffusers of stationary gas turbines <span style="color: rgb(255, 255, 179)">(2013)</span>. | |
| </p> | |
| <p>Access my <a href="https://tariqridwan.github.io/#biography">work experiences</a> and <a href="https://tariqridwan.github.io/#publications">publications</a>.</p> | |
| </article> | |
| <!-- About --> | |
| <!-- Publications --> | |
| <!-- <article id="about"> --> | |
| <article id="publications"> | |
| <h2 class="major">Publications</h2> | |
| <!-- <span class="image main"><img src="images/pic03.jpg" alt="" /></span> --> | |
| <!-- <p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.</p> --> | |
| <p>A. Hoda, <span style="color: turquoise">Tariq Ridwan</span>, W. Asrar <strong>(2021)</strong> "<span style="color: rgb(255, 255, 179)">A Comparative Study of Natural Gas and Biogas Combustion in A Swirling Flow Gas Turbine Combustor</span>". Combustion Science and Technology, 1-28. DOI: <a href="https://doi.org/10.1080/00102202.2021.1882441">10.1080/00102202.2021.1882441</a></p> | |
| <p><span style="color: turquoise">Tariq Ridwan</span> <strong>(2020)</strong>. <span style="color: rgb(255, 255, 179)">A comparative study of Natural Gas and Biogas combustion in a swirling flow gas turbine combustor</span>, <em>Master's thesis</em>, Department of Mechanical Engineering, IIUM, Kuala Lumpur, Malaysia. URL: <a href="http://studentrepo.iium.edu.my/handle/123456789/10118">IIUM Theses Repository</a></p> | |
| <p><span style="color: turquoise">Tariq Ridwan</span>, W. Asrar <strong>(2019)</strong>. "<span style="color: rgb(255, 255, 179)">An Investigation of RANS Simulations for Swirl-Stabilized Isothermal Turbulent Flow in a Gas Turbine Burner</span>". CFD Letters 11 (9), 14-31. URL: <a href="http://studentrepo.iium.edu.my/handle/123456789/10118">akademiabaru.com/cfdl/article/3181</a></p> | |
| <p> Access publications list in other sites:</p> | |
| <ul class="icons"> | |
| <li><a href="https://scholar.google.com/citations?user=Te4LJSEAAAAJ" class="ai ai-google-scholar"><span class="label"></span></a></li> | |
| <li><a href="https://orcid.org/0000-0003-3581-9051" class="fab fa-orcid"><span class="label"></span></a></li> | |
| <li><a href="https://www.researchgate.net/profile/Tariq-Ridwan/research" class="ai ai-researchgate"><span class="label"></span></a></li> | |
| <li><a href="https://publons.com/researcher/1778739/tariq-ridwan/publications/" class="ai ai-researcherid"><span class="label"></span></a></li> | |
| <li><a href="http://www.scopus.com/inward/authorDetails.url?authorID=57211414195&partnerID=MN8TOARS" class="ai ai-scopus"><span class="label"></span></a></li> | |
| </ul> | |
| </article> | |
| <!-- Contact --> | |
| <article id="contact"> | |
| <h2 class="major">Contact</h2> | |
| <!-- <form method="post" action="#"> | |
| <div class="fields"> | |
| <div class="field half"> | |
| <label for="name">Name</label> | |
| <input type="text" name="name" id="name" /> | |
| </div> | |
| <div class="field half"> | |
| <label for="email">Email</label> | |
| <input type="text" name="email" id="email" /> | |
| </div> | |
| <div class="field"> | |
| <label for="message">Message</label> | |
| <textarea name="message" id="message" rows="4"></textarea> | |
| </div> | |
| </div> | |
| <ul class="actions"> | |
| <li><input type="submit" value="Send Message" class="primary" /></li> | |
| <li><input type="reset" value="Reset" /></li> | |
| </ul> | |
| </form> --> | |
| <p><strong>Tariq Ridwan</strong><br /> | |
| <a href="https://www.bsc.es/discover-bsc/organisation/research-departments/large-scale-computational-fluid-dynamics">Large-scale CFD Group</a>, CASE Department<br /> | |
| Barcelona Supercomputing Center<br /> | |
| <em>Centro Nacional de Supercomputación</em><br /> | |
| Plaça Eusebi Güell, 1-3<br /> | |
| 08034 Barcelona, Spain<br /> | |
| Email: <a href=mailto:tariq.ridwan@bsc.es>tariq.ridwan@bsc.es</a> | |
| </p> | |
| <p> <a href="https://futur.upc.edu/TariqMdRidwanurRahman">Department of Physics</a><br /> | |
| Universitat Politècnica de Catalunya<br /> | |
| Campus del Baix Llobregat<br /> | |
| Edifici C3C, Despatx 113, C. Esteve Terradas 5<br /> | |
| 08860 Castelldefels, Catalunya, Spain<br /> | |
| Email: <a href=mailto:tariq.md.ridwanur.rahman@upc.edu>tariq.md.ridwanur.rahman@upc.edu</a> | |
| </p> | |
| <p> Personal: <a href=mailto:tariq.ridwan@gmail.com>tariq.ridwan@gmail.com</a> / +34 631 14 73 32 | |
| </p> | |
| <!-- <ul class="icons"> --> | |
| <!-- <li><a href="tariq.ridwan@bsc.es" class="fa fa-envelope"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="+34 631 14 73 32" class="fa fa-phone-volume"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="https://scholar.google.com/citations?user=Te4LJSEAAAAJ" class="ai ai-google-scholar"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="https://orcid.org/0000-0003-3581-9051" class="fab fa-orcid"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="https://github.com/tariqridwan" class="icon brands fa-github"><span class="label">GitHub</span></a></li> --> | |
| <!-- <li><a href="https://www.researchgate.net/profile/Tariq-Ridwan" class="ai ai-researchgate"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="http://www.researcherid.com/rid/E-3303-2019" class="ai ai-researcherid"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="http://www.scopus.com/inward/authorDetails.url?authorID=57211414195&partnerID=MN8TOARS" class="ai ai-scopus"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="https://www.linkedin.com/in/tariq-ridwan/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li> --> | |
| <!-- <li><a href="http://www.scopus.com/inward/authorDetails.url?authorID=57211414195&partnerID=MN8TOARS" class="ai ai-cv"><span class="label"></span></a></li> --> | |
| <!-- </ul> --> | |
| </article> | |
| <!-- Elements --> | |
| <article id="elements"> | |
| <h2 class="major">Elements</h2> | |
| <section> | |
| <h3 class="major">Text</h3> | |
| <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>. | |
| This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. | |
| This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p> | |
| <hr /> | |
| <h2>Heading Level 2</h2> | |
| <h3>Heading Level 3</h3> | |
| <h4>Heading Level 4</h4> | |
| <h5>Heading Level 5</h5> | |
| <h6>Heading Level 6</h6> | |
| <hr /> | |
| <h4>Blockquote</h4> | |
| <blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote> | |
| <h4>Preformatted</h4> | |
| <pre><code>i = 0; | |
| while (!deck.isInOrder()) { | |
| print 'Iteration ' + i; | |
| deck.shuffle(); | |
| i++; | |
| } | |
| print 'It took ' + i + ' iterations to sort the deck.';</code></pre> | |
| </section> | |
| <section> | |
| <h3 class="major">Lists</h3> | |
| <h4>Unordered</h4> | |
| <ul> | |
| <li>Dolor pulvinar etiam.</li> | |
| <li>Sagittis adipiscing.</li> | |
| <li>Felis enim feugiat.</li> | |
| </ul> | |
| <h4>Alternate</h4> | |
| <ul class="alt"> | |
| <li>Dolor pulvinar etiam.</li> | |
| <li>Sagittis adipiscing.</li> | |
| <li>Felis enim feugiat.</li> | |
| </ul> | |
| <h4>Ordered</h4> | |
| <ol> | |
| <li>Dolor pulvinar etiam.</li> | |
| <li>Etiam vel felis viverra.</li> | |
| <li>Felis enim feugiat.</li> | |
| <li>Dolor pulvinar etiam.</li> | |
| <li>Etiam vel felis lorem.</li> | |
| <li>Felis enim et feugiat.</li> | |
| </ol> | |
| <h4>Icons</h4> | |
| <ul class="icons"> | |
| <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> | |
| <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li> | |
| <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> | |
| <li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li> | |
| </ul> | |
| <h4>Actions</h4> | |
| <ul class="actions"> | |
| <li><a href="#" class="button primary">Default</a></li> | |
| <li><a href="#" class="button">Default</a></li> | |
| </ul> | |
| <ul class="actions stacked"> | |
| <li><a href="#" class="button primary">Default</a></li> | |
| <li><a href="#" class="button">Default</a></li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h3 class="major">Table</h3> | |
| <h4>Default</h4> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Description</th> | |
| <th>Price</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Item One</td> | |
| <td>Ante turpis integer aliquet porttitor.</td> | |
| <td>29.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Two</td> | |
| <td>Vis ac commodo adipiscing arcu aliquet.</td> | |
| <td>19.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Three</td> | |
| <td> Morbi faucibus arcu accumsan lorem.</td> | |
| <td>29.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Four</td> | |
| <td>Vitae integer tempus condimentum.</td> | |
| <td>19.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Five</td> | |
| <td>Ante turpis integer aliquet porttitor.</td> | |
| <td>29.99</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="2"></td> | |
| <td>100.00</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| <h4>Alternate</h4> | |
| <div class="table-wrapper"> | |
| <table class="alt"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Description</th> | |
| <th>Price</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Item One</td> | |
| <td>Ante turpis integer aliquet porttitor.</td> | |
| <td>29.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Two</td> | |
| <td>Vis ac commodo adipiscing arcu aliquet.</td> | |
| <td>19.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Three</td> | |
| <td> Morbi faucibus arcu accumsan lorem.</td> | |
| <td>29.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Four</td> | |
| <td>Vitae integer tempus condimentum.</td> | |
| <td>19.99</td> | |
| </tr> | |
| <tr> | |
| <td>Item Five</td> | |
| <td>Ante turpis integer aliquet porttitor.</td> | |
| <td>29.99</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="2"></td> | |
| <td>100.00</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </section> | |
| <section> | |
| <h3 class="major">Buttons</h3> | |
| <ul class="actions"> | |
| <li><a href="#" class="button primary">Primary</a></li> | |
| <li><a href="#" class="button">Default</a></li> | |
| </ul> | |
| <ul class="actions"> | |
| <li><a href="#" class="button">Default</a></li> | |
| <li><a href="#" class="button small">Small</a></li> | |
| </ul> | |
| <ul class="actions"> | |
| <li><a href="#" class="button primary icon solid fa-download">Icon</a></li> | |
| <li><a href="#" class="button icon solid fa-download">Icon</a></li> | |
| </ul> | |
| <ul class="actions"> | |
| <li><span class="button primary disabled">Disabled</span></li> | |
| <li><span class="button disabled">Disabled</span></li> | |
| </ul> | |
| </section> | |
| <section> | |
| <h3 class="major">Form</h3> | |
| <form method="post" action="#"> | |
| <div class="fields"> | |
| <div class="field half"> | |
| <label for="demo-name">Name</label> | |
| <input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" /> | |
| </div> | |
| <div class="field half"> | |
| <label for="demo-email">Email</label> | |
| <input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" /> | |
| </div> | |
| <div class="field"> | |
| <label for="demo-category">Category</label> | |
| <select name="demo-category" id="demo-category"> | |
| <option value="">-</option> | |
| <option value="1">Manufacturing</option> | |
| <option value="1">Shipping</option> | |
| <option value="1">Administration</option> | |
| <option value="1">Human Resources</option> | |
| </select> | |
| </div> | |
| <div class="field half"> | |
| <input type="radio" id="demo-priority-low" name="demo-priority" checked> | |
| <label for="demo-priority-low">Low</label> | |
| </div> | |
| <div class="field half"> | |
| <input type="radio" id="demo-priority-high" name="demo-priority"> | |
| <label for="demo-priority-high">High</label> | |
| </div> | |
| <div class="field half"> | |
| <input type="checkbox" id="demo-copy" name="demo-copy"> | |
| <label for="demo-copy">Email me a copy</label> | |
| </div> | |
| <div class="field half"> | |
| <input type="checkbox" id="demo-human" name="demo-human" checked> | |
| <label for="demo-human">Not a robot</label> | |
| </div> | |
| <div class="field"> | |
| <label for="demo-message">Message</label> | |
| <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea> | |
| </div> | |
| </div> | |
| <ul class="actions"> | |
| <li><input type="submit" value="Send Message" class="primary" /></li> | |
| <li><input type="reset" value="Reset" /></li> | |
| </ul> | |
| </form> | |
| </section> | |
| </article> | |
| </div> | |
| <!-- Footer --> | |
| <footer id="footer"> | |
| <ul class="icons"> | |
| <!-- <li><a href="tariq.ridwan@bsc.es" class="fa fa-envelope"><span class="label"></span></a></li> --> | |
| <!-- <li><a href="+34 631 14 73 32" class="fa fa-phone-volume"><span class="label"></span></a></li> --> | |
| <li><a href="https://scholar.google.com/citations?user=Te4LJSEAAAAJ" class="ai ai-google-scholar"><span class="label"></span></a></li> | |
| <li><a href="https://orcid.org/0000-0003-3581-9051" class="fab fa-orcid"><span class="label"></span></a></li> | |
| <li><a href="https://github.com/tariqridwan" class="icon brands fa-github"><span class="label">GitHub</span></a></li> | |
| <li><a href="https://www.researchgate.net/profile/Tariq-Ridwan" class="ai ai-researchgate"><span class="label"></span></a></li> | |
| <li><a href="http://www.researcherid.com/rid/E-3303-2019" class="ai ai-researcherid"><span class="label"></span></a></li> | |
| <li><a href="http://www.scopus.com/inward/authorDetails.url?authorID=57211414195&partnerID=MN8TOARS" class="ai ai-scopus"><span class="label"></span></a></li> | |
| <li><a href="https://www.linkedin.com/in/tariq-ridwan/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li> | |
| <!-- <li><a href="http://www.scopus.com/inward/authorDetails.url?authorID=57211414195&partnerID=MN8TOARS" class="ai ai-cv"><span class="label"></span></a></li> --> | |
| </ul> | |
| <!-- <p class="copyright">© Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p> --> | |
| <p class="copyright">© 2022 Tariq Ridwan: <a href=mailto:tariq.ridwan@bsc.es>tariq.ridwan@bsc.es</a></p> | |
| </footer> | |
| </div> | |
| <!-- BG --> | |
| <div id="bg"></div> | |
| <!-- Scripts --> | |
| <script src="assets/js/jquery.min.js"></script> | |
| <script src="assets/js/browser.min.js"></script> | |
| <script src="assets/js/breakpoints.min.js"></script> | |
| <script src="assets/js/util.js"></script> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(fontawesome-all.min.css); | |
| @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600"); | |
| /* | |
| Dimension by HTML5 UP | |
| html5up.net | @ajlkn | |
| Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |
| */ | |
| html, body, div, span, applet, object, | |
| iframe, h1, h2, h3, h4, h5, h6, p, blockquote, | |
| pre, a, abbr, acronym, address, big, cite, | |
| code, del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, b, | |
| u, i, center, dl, dt, dd, ol, ul, li, fieldset, | |
| form, label, legend, table, caption, tbody, | |
| tfoot, thead, tr, th, td, article, aside, | |
| canvas, details, embed, figure, figcaption, | |
| footer, header, hgroup, menu, nav, output, ruby, | |
| section, summary, time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline;} | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block;} | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| body { | |
| -webkit-text-size-adjust: none; | |
| } | |
| mark { | |
| background-color: transparent; | |
| color: inherit; | |
| } | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input, select, textarea { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| } | |
| /* Basic */ | |
| @-ms-viewport { | |
| width: device-width; | |
| } | |
| @media screen and (max-width: 480px) { | |
| html, body { | |
| min-width: 320px; | |
| } | |
| } | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| background: #1b1f22; | |
| } | |
| body.is-preload *, body.is-preload *:before, body.is-preload *:after { | |
| -moz-animation: none !important; | |
| -webkit-animation: none !important; | |
| -ms-animation: none !important; | |
| animation: none !important; | |
| -moz-transition: none !important; | |
| -webkit-transition: none !important; | |
| -ms-transition: none !important; | |
| transition: none !important; | |
| } | |
| /* Type */ | |
| html { | |
| font-size: 16pt; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| html { | |
| font-size: 12pt; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| html { | |
| font-size: 11pt; | |
| } | |
| } | |
| @media screen and (max-width: 360px) { | |
| html { | |
| font-size: 10pt; | |
| } | |
| } | |
| body, input, select, textarea { | |
| color: #ffffff; | |
| font-family: "Source Sans Pro", sans-serif; | |
| font-weight: 300; | |
| font-size: 1rem; | |
| line-height: 1.65; | |
| } | |
| a { | |
| -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| border-bottom: dotted 1px rgba(255, 255, 255, 0.5); | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| a:hover { | |
| border-bottom-color: transparent; | |
| } | |
| strong, b { | |
| color: #ffffff; | |
| font-weight: 600; | |
| } | |
| em, i { | |
| font-style: italic; | |
| } | |
| p { | |
| margin: 0 0 2rem 0; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #ffffff; | |
| font-weight: 600; | |
| line-height: 1.5; | |
| margin: 0 0 1rem 0; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2rem; | |
| } | |
| h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { | |
| border-bottom: solid 1px #ffffff; | |
| width: -moz-max-content; | |
| width: -webkit-max-content; | |
| width: -ms-max-content; | |
| width: max-content; | |
| padding-bottom: 0.5rem; | |
| margin: 0 0 2rem 0; | |
| } | |
| h1 { | |
| font-size: 2.25rem; | |
| line-height: 1.3; | |
| letter-spacing: 0.5rem; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| line-height: 1.4; | |
| letter-spacing: 0.5rem; | |
| } | |
| h3 { | |
| font-size: 1rem; | |
| } | |
| h4 { | |
| font-size: 0.8rem; | |
| } | |
| h5 { | |
| font-size: 0.7rem; | |
| } | |
| h6 { | |
| font-size: 0.6rem; | |
| } | |
| @media screen and (max-width: 736px) { | |
| h1 { | |
| font-size: 1.75rem; | |
| line-height: 1.4; | |
| } | |
| h2 { | |
| font-size: 1.25em; | |
| line-height: 1.5; | |
| } | |
| } | |
| sub { | |
| font-size: 0.8rem; | |
| position: relative; | |
| top: 0.5rem; | |
| } | |
| sup { | |
| font-size: 0.8rem; | |
| position: relative; | |
| top: -0.5rem; | |
| } | |
| blockquote { | |
| border-left: solid 4px #ffffff; | |
| font-style: italic; | |
| margin: 0 0 2rem 0; | |
| padding: 0.5rem 0 0.5rem 2rem; | |
| } | |
| code { | |
| background: rgba(255, 255, 255, 0.075); | |
| border-radius: 4px; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.9rem; | |
| margin: 0 0.25rem; | |
| padding: 0.25rem 0.65rem; | |
| } | |
| pre { | |
| -webkit-overflow-scrolling: touch; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.9rem; | |
| margin: 0 0 2rem 0; | |
| } | |
| pre code { | |
| display: block; | |
| line-height: 1.75; | |
| padding: 1rem 1.5rem; | |
| overflow-x: auto; | |
| } | |
| hr { | |
| border: 0; | |
| border-bottom: solid 1px #ffffff; | |
| margin: 2.75rem 0; | |
| } | |
| .align-left { | |
| text-align: left; | |
| } | |
| .align-center { | |
| text-align: center; | |
| } | |
| .align-right { | |
| text-align: right; | |
| } | |
| /* Form */ | |
| form { | |
| margin: 0 0 2rem 0; | |
| } | |
| form > :last-child { | |
| margin-bottom: 0; | |
| } | |
| form > .fields { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-wrap: wrap; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| width: calc(100% + 3rem); | |
| margin: -1.5rem 0 2rem -1.5rem; | |
| } | |
| form > .fields > .field { | |
| -moz-flex-grow: 0; | |
| -webkit-flex-grow: 0; | |
| -ms-flex-grow: 0; | |
| flex-grow: 0; | |
| -moz-flex-shrink: 0; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-shrink: 0; | |
| flex-shrink: 0; | |
| padding: 1.5rem 0 0 1.5rem; | |
| width: calc(100% - 1.5rem); | |
| } | |
| form > .fields > .field.half { | |
| width: calc(50% - 0.75rem); | |
| } | |
| form > .fields > .field.third { | |
| width: calc(100%/3 - 0.5rem); | |
| } | |
| form > .fields > .field.quarter { | |
| width: calc(25% - 0.375rem); | |
| } | |
| @media screen and (max-width: 480px) { | |
| form > .fields { | |
| width: calc(100% + 3rem); | |
| margin: -1.5rem 0 2rem -1.5rem; | |
| } | |
| form > .fields > .field { | |
| padding: 1.5rem 0 0 1.5rem; | |
| width: calc(100% - 1.5rem); | |
| } | |
| form > .fields > .field.half { | |
| width: calc(100% - 1.5rem); | |
| } | |
| form > .fields > .field.third { | |
| width: calc(100% - 1.5rem); | |
| } | |
| form > .fields > .field.quarter { | |
| width: calc(100% - 1.5rem); | |
| } | |
| } | |
| label { | |
| color: #ffffff; | |
| display: block; | |
| font-size: 0.8rem; | |
| font-weight: 300; | |
| letter-spacing: 0.2rem; | |
| line-height: 1.5; | |
| margin: 0 0 1rem 0; | |
| text-transform: uppercase; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="tel"], | |
| select, | |
| textarea { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| background-color: transparent; | |
| border-radius: 4px; | |
| border: solid 1px #ffffff; | |
| color: inherit; | |
| display: block; | |
| outline: 0; | |
| padding: 0 1rem; | |
| text-decoration: none; | |
| width: 100%; | |
| } | |
| input[type="text"]:invalid, | |
| input[type="password"]:invalid, | |
| input[type="email"]:invalid, | |
| input[type="tel"]:invalid, | |
| select:invalid, | |
| textarea:invalid { | |
| box-shadow: none; | |
| } | |
| input[type="text"]:focus, | |
| input[type="password"]:focus, | |
| input[type="email"]:focus, | |
| input[type="tel"]:focus, | |
| select:focus, | |
| textarea:focus { | |
| background: rgba(255, 255, 255, 0.075); | |
| border-color: #ffffff; | |
| box-shadow: 0 0 0 1px #ffffff; | |
| } | |
| select { | |
| background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E"); | |
| background-size: 1.25rem; | |
| background-repeat: no-repeat; | |
| background-position: calc(100% - 1rem) center; | |
| height: 2.75rem; | |
| padding-right: 2.75rem; | |
| text-overflow: ellipsis; | |
| } | |
| select option { | |
| color: #ffffff; | |
| background: #1b1f22; | |
| } | |
| select:focus::-ms-value { | |
| background-color: transparent; | |
| } | |
| select::-ms-expand { | |
| display: none; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| select { | |
| height: 2.75rem; | |
| } | |
| textarea { | |
| padding: 0.75rem 1rem; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| display: block; | |
| float: left; | |
| margin-right: -2rem; | |
| opacity: 0; | |
| width: 1rem; | |
| z-index: -1; | |
| } | |
| input[type="checkbox"] + label, | |
| input[type="radio"] + label { | |
| text-decoration: none; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| color: #ffffff; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 0.8rem; | |
| font-weight: 300; | |
| margin: 0 0 0.5rem 0; | |
| padding-left: 2.65rem; | |
| padding-right: 0.75rem; | |
| position: relative; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| font-style: normal; | |
| font-variant: normal; | |
| text-rendering: auto; | |
| line-height: 1; | |
| text-transform: none !important; | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 900; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| border-radius: 4px; | |
| border: solid 1px #ffffff; | |
| content: ''; | |
| display: inline-block; | |
| height: 1.65rem; | |
| left: 0; | |
| line-height: 1.65rem; | |
| position: absolute; | |
| text-align: center; | |
| top: -0.15rem; | |
| width: 1.65rem; | |
| } | |
| input[type="checkbox"]:checked + label:before, | |
| input[type="radio"]:checked + label:before { | |
| background: #ffffff !important; | |
| border-color: #ffffff !important; | |
| color: #1b1f22; | |
| content: '\f00c'; | |
| } | |
| input[type="checkbox"]:focus + label:before, | |
| input[type="radio"]:focus + label:before { | |
| background: rgba(255, 255, 255, 0.075); | |
| border-color: #ffffff; | |
| box-shadow: 0 0 0 1px #ffffff; | |
| } | |
| input[type="checkbox"] + label:before { | |
| border-radius: 4px; | |
| } | |
| input[type="radio"] + label:before { | |
| border-radius: 100%; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| opacity: 1.0; | |
| } | |
| :-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| opacity: 1.0; | |
| } | |
| ::-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| opacity: 1.0; | |
| } | |
| :-ms-input-placeholder { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| opacity: 1.0; | |
| } | |
| .formerize-placeholder { | |
| color: rgba(255, 255, 255, 0.5) !important; | |
| opacity: 1.0; | |
| } | |
| /* Box */ | |
| .box { | |
| border-radius: 4px; | |
| border: solid 1px #ffffff; | |
| margin-bottom: 2rem; | |
| padding: 1.5em; | |
| } | |
| .box > :last-child, | |
| .box > :last-child > :last-child, | |
| .box > :last-child > :last-child > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .box.alt { | |
| border: 0; | |
| border-radius: 0; | |
| padding: 0; | |
| } | |
| /* Icon */ | |
| .icon { | |
| text-decoration: none; | |
| border-bottom: none; | |
| position: relative; | |
| } | |
| .icon:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| display: inline-block; | |
| font-style: normal; | |
| font-variant: normal; | |
| text-rendering: auto; | |
| line-height: 1; | |
| text-transform: none !important; | |
| font-family: 'Font Awesome 5 Free'; | |
| font-weight: 400; | |
| } | |
| .icon > .label { | |
| display: none; | |
| } | |
| .icon:before { | |
| line-height: inherit; | |
| } | |
| .icon.solid:before { | |
| font-weight: 900; | |
| } | |
| .icon.brands:before { | |
| font-family: 'Font Awesome 5 Brands'; | |
| } | |
| /* Image */ | |
| .image { | |
| border-radius: 4px; | |
| border: 0; | |
| display: inline-block; | |
| position: relative; | |
| } | |
| .image:before { | |
| pointer-events: none; | |
| background-image: url("../../images/overlay.png"); | |
| background-color: rgba(19, 21, 25, 0.5); | |
| border-radius: 4px; | |
| content: ''; | |
| display: block; | |
| height: 100%; | |
| left: 0; | |
| opacity: 0.5; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .image img { | |
| border-radius: 4px; | |
| display: block; | |
| } | |
| .image.left, .image.right { | |
| max-width: 40%; | |
| } | |
| .image.left img, .image.right img { | |
| width: 100%; | |
| } | |
| .image.left { | |
| float: left; | |
| padding: 0 1.5em 1em 0; | |
| top: 0.25em; | |
| } | |
| .image.right { | |
| float: right; | |
| padding: 0 0 1em 1.5em; | |
| top: 0.25em; | |
| } | |
| .image.fit { | |
| display: block; | |
| margin: 0 0 2rem 0; | |
| width: 100%; | |
| } | |
| .image.fit img { | |
| width: 100%; | |
| } | |
| .image.main { | |
| display: block; | |
| margin: 2.5rem 0; | |
| width: 100%; | |
| } | |
| .image.main img { | |
| width: 100%; | |
| } | |
| @media screen and (max-width: 736px) { | |
| .image.main { | |
| margin: 2rem 0; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| .image.main { | |
| margin: 1.5rem 0; | |
| } | |
| } | |
| /* List */ | |
| ol { | |
| list-style: decimal; | |
| margin: 0 0 2rem 0; | |
| padding-left: 1.25em; | |
| } | |
| ol li { | |
| padding-left: 0.25em; | |
| } | |
| ul { | |
| list-style: disc; | |
| margin: 0 0 2rem 0; | |
| padding-left: 1em; | |
| } | |
| ul li { | |
| padding-left: 0.5em; | |
| } | |
| ul.alt { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.alt li { | |
| border-top: solid 1px #ffffff; | |
| padding: 0.5em 0; | |
| } | |
| ul.alt li:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| dl { | |
| margin: 0 0 2rem 0; | |
| } | |
| dl dt { | |
| display: block; | |
| font-weight: 600; | |
| margin: 0 0 1rem 0; | |
| } | |
| dl dd { | |
| margin-left: 2rem; | |
| } | |
| /* Actions */ | |
| ul.actions { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| cursor: default; | |
| list-style: none; | |
| margin-left: -1rem; | |
| padding-left: 0; | |
| } | |
| ul.actions li { | |
| padding: 0 0 0 1rem; | |
| vertical-align: middle; | |
| } | |
| ul.actions.special { | |
| -moz-justify-content: center; | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| width: 100%; | |
| margin-left: 0; | |
| } | |
| ul.actions.special li:first-child { | |
| padding-left: 0; | |
| } | |
| ul.actions.stacked { | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin-left: 0; | |
| } | |
| ul.actions.stacked li { | |
| padding: 1.3rem 0 0 0; | |
| } | |
| ul.actions.stacked li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.fit { | |
| width: calc(100% + 1rem); | |
| } | |
| ul.actions.fit li { | |
| -moz-flex-grow: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-grow: 1; | |
| flex-grow: 1; | |
| -moz-flex-shrink: 1; | |
| -webkit-flex-shrink: 1; | |
| -ms-flex-shrink: 1; | |
| flex-shrink: 1; | |
| width: 100%; | |
| } | |
| ul.actions.fit li > * { | |
| width: 100%; | |
| } | |
| ul.actions.fit.stacked { | |
| width: 100%; | |
| } | |
| @media screen and (max-width: 480px) { | |
| ul.actions:not(.fixed) { | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin-left: 0; | |
| width: 100% !important; | |
| } | |
| ul.actions:not(.fixed) li { | |
| -moz-flex-grow: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-grow: 1; | |
| flex-grow: 1; | |
| -moz-flex-shrink: 1; | |
| -webkit-flex-shrink: 1; | |
| -ms-flex-shrink: 1; | |
| flex-shrink: 1; | |
| padding: 1rem 0 0 0; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| ul.actions:not(.fixed) li > * { | |
| width: 100%; | |
| } | |
| ul.actions:not(.fixed) li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions:not(.fixed) li input[type="submit"], | |
| ul.actions:not(.fixed) li input[type="reset"], | |
| ul.actions:not(.fixed) li input[type="button"], | |
| ul.actions:not(.fixed) li button, | |
| ul.actions:not(.fixed) li .button { | |
| width: 100%; | |
| } | |
| ul.actions:not(.fixed) li input[type="submit"].icon:before, | |
| ul.actions:not(.fixed) li input[type="reset"].icon:before, | |
| ul.actions:not(.fixed) li input[type="button"].icon:before, | |
| ul.actions:not(.fixed) li button.icon:before, | |
| ul.actions:not(.fixed) li .button.icon:before { | |
| margin-left: -0.5em; | |
| } | |
| } | |
| /* Icons */ | |
| ul.icons { | |
| cursor: default; | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.icons li { | |
| display: inline-block; | |
| padding: 0 0.75em 0 0; | |
| } | |
| ul.icons li:last-child { | |
| padding-right: 0; | |
| } | |
| ul.icons li a { | |
| border-radius: 100%; | |
| box-shadow: inset 0 0 0 1px #ffffff; | |
| display: inline-block; | |
| height: 2.25rem; | |
| line-height: 2.25rem; | |
| text-align: center; | |
| width: 2.25rem; | |
| } | |
| ul.icons li a:hover { | |
| background-color: rgba(255, 255, 255, 0.075); | |
| } | |
| ul.icons li a:active { | |
| background-color: rgba(255, 255, 255, 0.175); | |
| } | |
| /* Table */ | |
| .table-wrapper { | |
| -webkit-overflow-scrolling: touch; | |
| overflow-x: auto; | |
| } | |
| table { | |
| margin: 0 0 2rem 0; | |
| width: 100%; | |
| } | |
| table tbody tr { | |
| border: solid 1px #ffffff; | |
| border-left: 0; | |
| border-right: 0; | |
| } | |
| table tbody tr:nth-child(2n + 1) { | |
| background-color: rgba(255, 255, 255, 0.075); | |
| } | |
| table td { | |
| padding: 0.75em 0.75em; | |
| } | |
| table th { | |
| color: #ffffff; | |
| font-size: 0.9em; | |
| font-weight: 600; | |
| padding: 0 0.75em 0.75em 0.75em; | |
| text-align: left; | |
| } | |
| table thead { | |
| border-bottom: solid 2px #ffffff; | |
| } | |
| table tfoot { | |
| border-top: solid 2px #ffffff; | |
| } | |
| table.alt { | |
| border-collapse: separate; | |
| } | |
| table.alt tbody tr td { | |
| border: solid 1px #ffffff; | |
| border-left-width: 0; | |
| border-top-width: 0; | |
| } | |
| table.alt tbody tr td:first-child { | |
| border-left-width: 1px; | |
| } | |
| table.alt tbody tr:first-child td { | |
| border-top-width: 1px; | |
| } | |
| table.alt thead { | |
| border-bottom: 0; | |
| } | |
| table.alt tfoot { | |
| border-top: 0; | |
| } | |
| /* Button */ | |
| input[type="submit"], | |
| input[type="reset"], | |
| input[type="button"], | |
| button, | |
| .button { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| background-color: transparent; | |
| border-radius: 4px; | |
| border: 0; | |
| box-shadow: inset 0 0 0 1px #ffffff; | |
| color: #ffffff !important; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 0.8rem; | |
| font-weight: 300; | |
| height: 2.75rem; | |
| letter-spacing: 0.2rem; | |
| line-height: 2.75rem; | |
| outline: 0; | |
| padding: 0 1.25rem 0 1.35rem; | |
| text-align: center; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| input[type="submit"]:hover, | |
| input[type="reset"]:hover, | |
| input[type="button"]:hover, | |
| button:hover, | |
| .button:hover { | |
| background-color: rgba(255, 255, 255, 0.075); | |
| } | |
| input[type="submit"]:active, | |
| input[type="reset"]:active, | |
| input[type="button"]:active, | |
| button:active, | |
| .button:active { | |
| background-color: rgba(255, 255, 255, 0.175); | |
| } | |
| input[type="submit"].icon:before, | |
| input[type="reset"].icon:before, | |
| input[type="button"].icon:before, | |
| button.icon:before, | |
| .button.icon:before { | |
| margin-right: 0.5em; | |
| } | |
| input[type="submit"].fit, | |
| input[type="reset"].fit, | |
| input[type="button"].fit, | |
| button.fit, | |
| .button.fit { | |
| width: 100%; | |
| } | |
| input[type="submit"].small, | |
| input[type="reset"].small, | |
| input[type="button"].small, | |
| button.small, | |
| .button.small { | |
| font-size: 0.6rem; | |
| height: 2.0625rem; | |
| line-height: 2.0625rem; | |
| } | |
| input[type="submit"].primary, | |
| input[type="reset"].primary, | |
| input[type="button"].primary, | |
| button.primary, | |
| .button.primary { | |
| background-color: #ffffff; | |
| color: #1b1f22 !important; | |
| font-weight: 600; | |
| } | |
| input[type="submit"].disabled, input[type="submit"]:disabled, | |
| input[type="reset"].disabled, | |
| input[type="reset"]:disabled, | |
| input[type="button"].disabled, | |
| input[type="button"]:disabled, | |
| button.disabled, | |
| button:disabled, | |
| .button.disabled, | |
| .button:disabled { | |
| pointer-events: none; | |
| cursor: default; | |
| opacity: 0.25; | |
| } | |
| input[type="submit"], | |
| input[type="reset"], | |
| input[type="button"], | |
| button { | |
| line-height: calc(2.75rem - 2px); | |
| } | |
| /* BG */ | |
| #bg { | |
| -moz-transform: scale(1.0); | |
| -webkit-transform: scale(1.0); | |
| -ms-transform: scale(1.0); | |
| transform: scale(1.0); | |
| -webkit-backface-visibility: hidden; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| z-index: 1; | |
| } | |
| #bg:before, #bg:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #bg:before { | |
| -moz-transition: background-color 2.5s ease-in-out; | |
| -webkit-transition: background-color 2.5s ease-in-out; | |
| -ms-transition: background-color 2.5s ease-in-out; | |
| transition: background-color 2.5s ease-in-out; | |
| -moz-transition-delay: 0.75s; | |
| -webkit-transition-delay: 0.75s; | |
| -ms-transition-delay: 0.75s; | |
| transition-delay: 0.75s; | |
| background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png"); | |
| background-size: auto, | |
| 256px 256px; | |
| background-position: center, | |
| center; | |
| background-repeat: no-repeat, | |
| repeat; | |
| z-index: 2; | |
| } | |
| #bg:after { | |
| -moz-transform: scale(1.125); | |
| -webkit-transform: scale(1.125); | |
| -ms-transform: scale(1.125); | |
| transform: scale(1.125); | |
| -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out; | |
| -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out; | |
| -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out; | |
| transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; | |
| background-image: url("../../images/bg.jpg"); | |
| background-position: center; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| z-index: 1; | |
| } | |
| body.is-article-visible #bg:after { | |
| -moz-transform: scale(1.0825); | |
| -webkit-transform: scale(1.0825); | |
| -ms-transform: scale(1.0825); | |
| transform: scale(1.0825); | |
| -moz-filter: blur(0.2rem); | |
| -webkit-filter: blur(0.2rem); | |
| -ms-filter: blur(0.2rem); | |
| filter: blur(0.2rem); | |
| } | |
| body.is-preload #bg:before { | |
| background-color: #000000; | |
| } | |
| /* Wrapper */ | |
| #wrapper { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -moz-align-items: center; | |
| -webkit-align-items: center; | |
| -ms-align-items: center; | |
| align-items: center; | |
| -moz-justify-content: space-between; | |
| -webkit-justify-content: space-between; | |
| -ms-justify-content: space-between; | |
| justify-content: space-between; | |
| position: relative; | |
| min-height: 100vh; | |
| width: 100%; | |
| padding: 4rem 2rem; | |
| z-index: 3; | |
| } | |
| #wrapper:before { | |
| content: ''; | |
| display: block; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| #wrapper { | |
| padding: 3rem 2rem; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| #wrapper { | |
| padding: 2rem 1rem; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| #wrapper { | |
| padding: 1rem; | |
| } | |
| } | |
| /* Header */ | |
| #header { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -moz-align-items: center; | |
| -webkit-align-items: center; | |
| -ms-align-items: center; | |
| align-items: center; | |
| -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); | |
| background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); | |
| background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); | |
| background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%); | |
| max-width: 100%; | |
| text-align: center; | |
| } | |
| #header > * { | |
| -moz-transition: opacity 0.325s ease-in-out; | |
| -webkit-transition: opacity 0.325s ease-in-out; | |
| -ms-transition: opacity 0.325s ease-in-out; | |
| transition: opacity 0.325s ease-in-out; | |
| position: relative; | |
| margin-top: 3.5rem; | |
| } | |
| #header > *:before { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: calc(-3.5rem - 1px); | |
| left: calc(50% - 1px); | |
| width: 1px; | |
| height: calc(3.5rem + 1px); | |
| background: #ffffff; | |
| } | |
| #header > :first-child { | |
| margin-top: 0; | |
| } | |
| #header > :first-child:before { | |
| display: none; | |
| } | |
| #header .logo { | |
| width: 5.5rem; | |
| height: 5.5rem; | |
| line-height: 5.5rem; | |
| border: solid 1px #ffffff; | |
| border-radius: 100%; | |
| } | |
| #header .logo .icon:before { | |
| font-size: 2rem; | |
| } | |
| #header .content { | |
| border-style: solid; | |
| border-color: #ffffff; | |
| border-top-width: 1px; | |
| border-bottom-width: 1px; | |
| max-width: 100%; | |
| } | |
| #header .content .inner { | |
| -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; | |
| -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; | |
| -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; | |
| transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; | |
| -moz-transition-delay: 0.25s; | |
| -webkit-transition-delay: 0.25s; | |
| -ms-transition-delay: 0.25s; | |
| transition-delay: 0.25s; | |
| padding: 3rem 2rem; | |
| max-height: 40rem; | |
| overflow: hidden; | |
| } | |
| #header .content .inner > :last-child { | |
| margin-bottom: 0; | |
| } | |
| #header .content p { | |
| text-transform: uppercase; | |
| letter-spacing: 0.2rem; | |
| font-size: 0.8rem; | |
| line-height: 2; | |
| } | |
| #header nav div { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| margin-bottom: 0; | |
| list-style: none; | |
| padding-left: 0; | |
| border: solid 1px #ffffff; | |
| border-radius: 4px; | |
| } | |
| /* #header nav div div { | |
| padding-left: 0; | |
| border-left: solid 1px #ffffff; | |
| } */ | |
| #header nav div div:first-child { | |
| border-left: 0; | |
| } | |
| #header nav div div a { | |
| display: block; | |
| min-width: 7.5rem; | |
| height: 2.75rem; | |
| line-height: 2.75rem; | |
| padding: 0 1.25rem 0 1.45rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2rem; | |
| font-size: 0.8rem; | |
| border-bottom: 0; | |
| } | |
| #header nav div div a:hover { | |
| background-color: rgba(255, 255, 255, 0.075); | |
| } | |
| #header nav div div a:active { | |
| background-color: rgba(255, 255, 255, 0.175); | |
| } | |
| #header nav.use-middle:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: calc(50% - 1px); | |
| width: 1px; | |
| height: 100%; | |
| background: #ffffff; | |
| } | |
| #header nav.use-middle div div.is-middle { | |
| border-left: 0; | |
| } | |
| body.is-article-visible #header { | |
| -moz-transform: scale(0.95); | |
| -webkit-transform: scale(0.95); | |
| -ms-transform: scale(0.95); | |
| transform: scale(0.95); | |
| -moz-filter: blur(0.1rem); | |
| -webkit-filter: blur(0.1rem); | |
| -ms-filter: blur(0.1rem); | |
| filter: blur(0.1rem); | |
| opacity: 0; | |
| } | |
| body.is-preload #header { | |
| -moz-filter: blur(0.125rem); | |
| -webkit-filter: blur(0.125rem); | |
| -ms-filter: blur(0.125rem); | |
| filter: blur(0.125rem); | |
| } | |
| body.is-preload #header > * { | |
| opacity: 0; | |
| } | |
| body.is-preload #header .content .inner { | |
| max-height: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| opacity: 0; | |
| } | |
| @media screen and (max-width: 980px) { | |
| #header .content p br { | |
| display: none; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| #header > * { | |
| margin-top: 2rem; | |
| } | |
| #header > *:before { | |
| top: calc(-2rem - 1px); | |
| height: calc(2rem + 1px); | |
| } | |
| #header .logo { | |
| width: 4.75rem; | |
| height: 4.75rem; | |
| line-height: 4.75rem; | |
| } | |
| #header .logo .icon:before { | |
| font-size: 1.75rem; | |
| } | |
| #header .content .inner { | |
| padding: 2.5rem 1rem; | |
| } | |
| #header .content p { | |
| line-height: 1.875; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| #header { | |
| padding: 1.5rem 0; | |
| } | |
| #header .content .inner { | |
| padding: 2.5rem 0; | |
| } | |
| #header nav ul { | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| min-width: 10rem; | |
| max-width: 100%; | |
| } | |
| #header nav ul li { | |
| border-left: 0; | |
| border-top: solid 1px #ffffff; | |
| } | |
| #header nav ul li:first-child { | |
| border-top: 0; | |
| } | |
| #header nav ul li a { | |
| height: 3rem; | |
| line-height: 3rem; | |
| min-width: 0; | |
| width: 100%; | |
| } | |
| #header nav.use-middle:after { | |
| display: none; | |
| } | |
| } | |
| /* Main */ | |
| #main { | |
| -moz-flex-grow: 1; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-grow: 1; | |
| flex-grow: 1; | |
| -moz-flex-shrink: 1; | |
| -webkit-flex-shrink: 1; | |
| -ms-flex-shrink: 1; | |
| flex-shrink: 1; | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-align-items: center; | |
| -webkit-align-items: center; | |
| -ms-align-items: center; | |
| align-items: center; | |
| -moz-justify-content: center; | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| position: relative; | |
| max-width: 100%; | |
| z-index: 3; | |
| } | |
| #main article { | |
| -moz-transform: translateY(0.25rem); | |
| -webkit-transform: translateY(0.25rem); | |
| -ms-transform: translateY(0.25rem); | |
| transform: translateY(0.25rem); | |
| -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out; | |
| -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out; | |
| -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out; | |
| transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; | |
| padding: 4.5rem 2.5rem 1.5rem 2.5rem ; | |
| position: relative; | |
| width: 40rem; | |
| max-width: 100%; | |
| background-color: rgba(27, 31, 34, 0.85); | |
| border-radius: 4px; | |
| opacity: 0; | |
| } | |
| #main article.active { | |
| -moz-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| #main article .close { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 4rem; | |
| height: 4rem; | |
| cursor: pointer; | |
| text-indent: 4rem; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| } | |
| #main article .close:before { | |
| -moz-transition: background-color 0.2s ease-in-out; | |
| -webkit-transition: background-color 0.2s ease-in-out; | |
| -ms-transition: background-color 0.2s ease-in-out; | |
| transition: background-color 0.2s ease-in-out; | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 0.75rem; | |
| left: 0.75rem; | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| border-radius: 100%; | |
| background-position: center; | |
| background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); | |
| background-size: 20px 20px; | |
| background-repeat: no-repeat; | |
| } | |
| #main article .close:hover:before { | |
| background-color: rgba(255, 255, 255, 0.075); | |
| } | |
| #main article .close:active:before { | |
| background-color: rgba(255, 255, 255, 0.175); | |
| } | |
| @media screen and (max-width: 736px) { | |
| #main article { | |
| padding: 3.5rem 2rem 0.5rem 2rem ; | |
| } | |
| #main article .close:before { | |
| top: 0.875rem; | |
| left: 0.875rem; | |
| width: 2.25rem; | |
| height: 2.25rem; | |
| background-size: 14px 14px; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| #main article { | |
| padding: 3rem 1.5rem 0.5rem 1.5rem ; | |
| } | |
| } | |
| /* Footer */ | |
| #footer { | |
| -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; | |
| width: 100%; | |
| max-width: 100%; | |
| margin-top: 2rem; | |
| text-align: center; | |
| } | |
| #footer .copyright { | |
| letter-spacing: 0.2rem; | |
| font-size: 0.6rem; | |
| opacity: 0.75; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| } | |
| body.is-article-visible #footer { | |
| -moz-transform: scale(0.95); | |
| -webkit-transform: scale(0.95); | |
| -ms-transform: scale(0.95); | |
| transform: scale(0.95); | |
| -moz-filter: blur(0.1rem); | |
| -webkit-filter: blur(0.1rem); | |
| -ms-filter: blur(0.1rem); | |
| filter: blur(0.1rem); | |
| opacity: 0; | |
| } | |
| body.is-preload #footer { | |
| opacity: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment