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

151 lines
2.5 KiB
CSS
Raw Normal View History

2019-08-18 20:06:06 +02:00
: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;
}
2019-08-16 12:05:56 +02:00
/* GENERAL */
2019-08-17 02:15:43 +02:00
html {
position: relative;
min-height: 100%;
}
2019-08-16 12:05:56 +02:00
body {
2019-08-18 20:06:06 +02:00
background-color: var(--background-color);
color: var(--text-color);
2019-08-16 12:05:56 +02:00
font-family: 'Montserrat', 'Arial', sans-serif;
2019-08-18 20:06:06 +02:00
margin: 0 0 var(--footer-height); /* bottom = footer height */
}
.important {
color: var(--important);
2019-08-16 12:05:56 +02:00
}
b {
font-weight: bold;
2019-08-18 20:06:06 +02:00
color: var(--important);
}
a, a:hover {
color: var(--important);
2019-08-16 12:05:56 +02:00
}
2019-08-18 20:06:06 +02:00
h1 {
font-family: 'Roboto', 'sans-serif';
2019-08-18 23:48:24 +02:00
margin: auto;
text-align: center;
2019-08-18 20:06:06 +02:00
}
p {
font-size: 18px;
line-height: 1.9;
2019-08-16 12:05:56 +02:00
}
/* HEADER */
header {
margin-bottom: 4%;
}
2019-08-18 20:06:06 +02:00
#header-container {
padding-bottom: 0;
}
2019-08-16 12:05:56 +02:00
.navbar {
2019-08-18 20:06:06 +02:00
border-bottom: var(--border-header-footer);
2019-08-16 12:05:56 +02:00
}
2019-09-19 20:18:08 +02:00
#logo-small-screen {
display: none;
}
@media (max-width: 463px) {
#logo {
display: none;
}
.navbar-brand {
width: 30%;
}
#logo-small-screen {
display: inline-block;
width: 80%;
}
}
2019-08-18 23:48:24 +02:00
.nav-link {
text-align: center !important;
}
2019-08-16 12:05:56 +02:00
/* CONTENT */
2019-09-19 20:18:08 +02:00
@media (max-width: 576px) {
.container {
width: 90% !important;
}
}
.container {
padding-bottom: 25px;
2019-08-17 02:15:43 +02:00
}
2019-10-08 11:18:34 +02:00
.selectInline {
display: inline !important;
width: 80px !important;
height: 40px !important;
2019-11-16 15:21:21 +01:00
}
pre code {
color: #e83c8c !important;
2019-10-08 11:18:34 +02:00
}
#currencyOfTheValue, #currencyAfter, #convertNumberType {
2019-10-08 11:18:34 +02:00
width: 270px !important;
}
#option {
2019-10-24 18:57:39 +02:00
width: 380px !important;
2019-08-29 23:35:40 +02:00
}
#convertIn {
width: 6.7em;
}
.function-list-title {
width: 85%;
2019-10-06 16:58:20 +02:00
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;
}
2019-08-16 12:05:56 +02:00
.table {
2019-08-18 20:06:06 +02:00
color: white;
2019-08-16 12:05:56 +02:00
}
.quote-element-list {
vertical-align: middle !important;
line-height: 2;
}
2019-08-16 12:05:56 +02:00
/* FOOTER */
footer
{
2019-08-18 20:06:06 +02:00
border-top: var(--border-header-footer);
2019-08-17 02:15:43 +02:00
position: absolute;
left: 0;
bottom: 0;
2019-08-18 20:06:06 +02:00
height: var(--footer-height);
2019-08-17 02:15:43 +02:00
width: 100%;
2019-08-16 12:05:56 +02:00
}
.footer-text
{
font-size: 18px;
2019-08-17 02:15:43 +02:00
padding: 0 0 25px 0;
2019-08-16 12:05:56 +02:00
}
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';
2019-08-16 12:05:56 +02:00
}