@charset "UTF-8"; /* ================================================================== * License information: * ================================================================== * * CSS stylesheet of the Maneage homepage * * Maneage: a framework for managing data lineage * * Copyright (C) 2020, Pedram Ashofteh Ardakani * Copyright (C) 2020, Mohammad Akhlaghi * * This file is part of Maneage. Maneage is free software: you can * redistribute it and/or modify it under the terms of the GNU General * Public License as published by the Free Software Foundation, either * version 3 of the License, or (at your option) any later version. * * Maneage is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * General Public License for more details. See * . * * */ /* ================================================================== * Preliminary information: * ================================================================== * * Some helpful CSS coding standards: * https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/ * https://github.com/necolas/idiomatic-css * * Baseline for ordering attributes: * 1. Display * 2. Positioning * 3. Box model * 4. Colors and Typography * 5. Other * * No need to specify browser specific prefixes for the border-radius * attribute as described here: * https://css-tricks.com/do-we-need-box-shadow-prefixes/ * * */ /* ================================================================== * General style * ================================================================== */ body { background: #fbfcfc; font-family: Lato, Helvetica, Arial, sans-serif; line-height: 1.5; /* Should be unitless */ } h1, h2, h3 { /* Set line-height for headers to prevent overlap when browser is * forced to wrap the words. */ line-height: 1; } /* Center the whole page into a narrow column. Keeps the webpage stylish * and easy to look at in the widest screens. */ #container { /* The container should always have a margin-top high enough to * prevent content overlapping with the navigation bar */ width: 90%; max-width: 950px; margin: 45px auto 0; } /* ================================================================== * Inline and blob code style * ================================================================== */ pre { /* set code block properties */ display: block; min-width: 90%; overflow-x: auto; padding: 8px 12px; border: 1px solid #cabecf; border-radius: 5px; background: #fff; color: #2a1e5c; line-height: 1.6; } /* Pick the code font family from GitLab. */ code { color: #2a1e5c; font-family: Menlo, "DejaVu Sans Mono", "Liberation Mono", Consolas, "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace; font-size: 12px; } /* Mimic comment style syntax highlighting in code blobs */ .comment { color: #918595; font-style: italic; } /* Inline properties. Clear some horizontal space between code * and rest of the text. Adding vertical space breaks the line-height * consistency. Additional styling to ease the reading. * */ p code, li > code { padding: 0 5px; border-radius: 3px; /* Prevent sharp box-edges */ background: #eadeef; /* Highlight inline codes */ } /* ================================================================== * Navigation style * ================================================================== */ /* The top (hamburger) navigation bar: * ================================================================== * * For a responsive design, we used the hamburger navigation convention. * It will pop-up once the user's screen is narrower than a certain * width - as specified in the @media tags at the end of the CSS file. * */ /* The wrapper */ #nav-hamburger-wrapper{ /* Stick to the top */ position: fixed; top: 0; /* Keep the top navigation bar as wide as the `#container` */ width: 90%; max-width: 950px; margin: 0 auto; /* Prevent sharp edges on the top navigation bar */ border-radius: 0 0 5px 5px; /* Keep link texts center-aligned */ text-align: center; background: #030504; } /* By default, hide the hamburger label and check-box */ #nav-hamburger-wrapper label, #nav-hamburger-input { display: none; transform: rotate(90deg); transition-duration: 0.3s; } #nav-hamburger-wrapper input:checked + label { transform: rotate(0); } /* Horizontal hamburger menu items. Keep the tabs in one line and don't * wrap them in narrower screens */ #nav-hamburger-items { display: flex; } #nav-hamburger-items a { padding: 10px; /* Set width according to available number of tabs */ width: 25%; /* 25% = 100% / 4 tabs */ } /* Button class: * ================================================================== */ /* Define a general `button` class, so it can be used randomly inside * the webpage contents, and don't just limit it to the top navigation * bar. * * Keep the same style for `:visited` separate the button style from * simple link and anchor style */ .button a, .button a:visited { display: inline-block; /* do not wrap text in a anchor */ padding: 15px 32px; text-decoration: none; color: #dcdfde; transition-duration: 0.2s; /* fade back to normal */ } .button a:hover { color: #ff216e; /* AWESOME */ background-color: #121413; /* LICORICE */ text-shadow: 0px 0px 1px #030504; /* RICH BLACK (FOGRA39) */ transition-duration: 0.5s; /* give the modern minimal animation */ } /* Inline links - the anchors or tag: * ================================================================== */ /* Same style for visited and unvisited links */ a, a:visited { text-decoration: none; color: #64030B; transition-duration: 0.3s; /* Fade back to normal smoothly */ } /* Let the user feel they're hovering on a link */ a:hover { text-shadow: 0px 0px 1px #fbadce; transition-duration: 0.5s; /* Give the modern minimal animation */ } /* ================================================================== * Maneage banner at top of every page: * ================================================================== */ .banner { width: 100%; margin: 0 auto; text-align: center; } /* Wide banner style. This style will be in place for wide @media * screens as specified at the end of this CSS file */ .banner div { display: inline-block; /* Keep headers aligned in the middle next to Maneage logo */ vertical-align: middle; text-align: left; } .banner h1 { font-size: 300%; text-shadow: 2px 2px 1px rgba(255,255,255,1), 4px 4px 1px rgba(50,50,50,0.25); } .banner h2 { font-size: 200%; } .banner img { width: 100%; min-width: 170px; min-height: 170px; max-width: 220px; max-height: 220px; /* Keep headers aligned in the middle next to Maneage logo */ vertical-align: middle; } /* ================================================================== * Page footer * ================================================================== */ footer[role=contentinfo] { padding: 15px; border-radius: 5px; text-align: left; background-color: #f2f3f3; color: #1c1e1d; /* EERIE BLACK */ } /* ================================================================== * Ensure backward compatibility of HTML5 elements in this website * ================================================================== */ article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* ================================================================== * MEDIA SPECIFIC STYLES * ================================================================== */ /* 320px and up * ================================================================== */ @media only screen and (min-width: 320px) { } /* 480px and below * ================================================================== */ @media only screen and (max-width: 480px) { /* === hamburger navigation === */ /* Show Hamburger Icon */ #nav-hamburger-wrapper label { display: inline-block; padding: 10px; color: #fff; font-style: normal; font-size: 1.2em; } /* Break down menu items into vertical */ #nav-hamburger-items a { display: block; box-sizing: border-box; width: 100%; border-top: 1px solid #333; } /* Toggle Show/Hide Menu */ #nav-hamburger-items { display: none; } #nav-hamburger-wrapper input:checked ~ #nav-hamburger-items { display: block; } } /* 600px and up * ================================================================== */ @media only screen and (min-width: 600px) { } /* 768px and up * ================================================================== */ @media only screen and (max-width: 830px) { .banner div { /* Break down and center the text as soon as browser width is * too small for all the content to fit */ display: block; text-align: center; } }