@import "node_modules/bootstrap/scss/bootstrap-grid"; @import "node_modules/bootstrap/scss/bootstrap-reboot"; @import "node_modules/bootstrap/scss/utilities/align"; @import "node_modules/bootstrap/scss/utilities/spacing"; @import "node_modules/bootstrap/scss/utilities/display"; @import "node_modules/bootstrap/scss/utilities/text"; @import "node_modules/bootstrap/scss/utilities/float"; $fa-font-path: "../font"; @import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; @import "node_modules/@fortawesome/fontawesome-free/scss/solid"; @import "node_modules/@fortawesome/fontawesome-free/scss/brands"; @import "node_modules/@fortawesome/fontawesome-free/scss/regular"; $flag-icon-rect-path: ''; @import "node_modules/flag-icon-css/sass/flag-icon"; html, body { height: 100%; display: flex; flex-direction: column; } body { background-image: url("../img/bg.png"); color: #fff; min-height: 100vh; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .content { flex: 1; padding: 2%; } .highlight { color: #fea500; } a { color: #fea500; &:hover { color: #d78c00; } } .logo { display: block; margin: 0 auto; max-width: 256px; max-height: 256px; background-color: #fff; border-radius: 50%; border: 2px solid #000; } .menu { a { color: #fff; } .active a { font-weight: bold; } } .border-top { border-top: 1px solid #fff; } .border-bottom { border-bottom: 1px solid #fff; } .heading { text-align: center; a { color: #fff; } } .flex-grow { flex: 1; } .service { position: relative; background-color: #222; border: 1px solid #fff; height: 100%; .link { position: absolute; left: 0; top: 0; bottom: 0; right: 0; color: #fea500 !important; &[href]:hover { color: #d78c00 !important; } } .beta { position: absolute; top: 0; right: -1rem; font-weight: bold; background-color: #fea500; color: #000000; padding: .5rem 1rem; border-radius: 10px; transform: rotate(20deg); box-shadow: -1px 8px 5px rgba(0, 0, 0, .7); } .inner { position: relative; pointer-events: none; z-index: 1; padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; a { pointer-events: all; } } &.flat { color: #fea500 !important; &:hover { color: #d78c00 !important; } .inner { flex-direction: row; //pointer-events: all; text-decoration: none; h2 { margin-left: 0.5rem; } a { color: #fff; } } } } .contact-links a { color: #ffffff !important; } code { background-color: #fea500; color: #000000; padding: 1px 3px; border-radius: 4px; } pre { background-color: #fea500; color: #000000; padding: 1px 3px; border-radius: 4px; code { background-color: initial; padding: initial; border-radius: initial; } } @media (max-width: 767.98px) { .logo { max-width: 128px; max-height: 128px; } .fa-4x { font-size: 2em; } } .matrix-icon { margin: 0 8px; width: 4em; height: 4em; } @media (max-width: 767.98px) { .matrix-icon { width: 2em; height: 2em; } }