This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
FunctionProject/css/style.css
2019-11-16 15:21:21 +01:00

151 lines
2.5 KiB
CSS

:root {
--footer-height: 182px;
--border-header-footer: 3px rgba(255,255,255,0.7) solid;
--background-color: #181818;
--text-color: rgb(222, 222, 222);
--important: #ffd800;
}
/* GENERAL */
html {
position: relative;
min-height: 100%;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: 'Montserrat', 'Arial', sans-serif;
margin: 0 0 var(--footer-height); /* bottom = footer height */
}
.important {
color: var(--important);
}
b {
font-weight: bold;
color: var(--important);
}
a, a:hover {
color: var(--important);
}
h1 {
font-family: 'Roboto', 'sans-serif';
margin: auto;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.9;
}
/* HEADER */
header {
margin-bottom: 4%;
}
#header-container {
padding-bottom: 0;
}
.navbar {
border-bottom: var(--border-header-footer);
}
#logo-small-screen {
display: none;
}
@media (max-width: 463px) {
#logo {
display: none;
}
.navbar-brand {
width: 30%;
}
#logo-small-screen {
display: inline-block;
width: 80%;
}
}
.nav-link {
text-align: center !important;
}
/* CONTENT */
@media (max-width: 576px) {
.container {
width: 90% !important;
}
}
.container {
padding-bottom: 25px;
}
.selectInline {
display: inline !important;
width: 80px !important;
height: 40px !important;
}
pre code {
color: #e83c8c !important;
}
#currencyOfTheValue, #currencyAfter, #convertNumberType {
width: 270px !important;
}
#option {
width: 380px !important;
}
#convertIn {
width: 6.7em;
}
.function-list-title {
width: 85%;
padding-bottom: 0.6em;
margin: auto;
}
.function-list-image {
max-width: 160px;
padding-bottom: 20px;
}
.function-list-description {
width: 70%;
margin: auto;
}
.function-image {
max-width: 130px;
padding-bottom: 20px;
}
.table {
color: white;
}
.quote-element-list {
vertical-align: middle !important;
line-height: 2;
}
/* FOOTER */
footer
{
border-top: var(--border-header-footer);
position: absolute;
left: 0;
bottom: 0;
height: var(--footer-height);
width: 100%;
}
.footer-text
{
font-size: 18px;
padding: 0 0 25px 0;
}
footer i
{
font-size: 25px;
margin: 20px;
height: 30px;
}
footer i:hover
{
font-size: 30px;
}
.realDateTime {
padding-bottom: 20px;
}
#realDateTime {
font-size: 18px;
font-family: 'Roboto', 'sans-serif';
}