site/src/css/main.css

168 lines
2.7 KiB
CSS
Raw Normal View History

2020-05-10 16:43:05 +00:00
/*
* FONTS
*/
@font-face {
font-family: "Heroes";
src: url('../fonts/texgyreheros-regular.otf') format('truetype');
}
2020-05-10 16:43:05 +00:00
/*
* RESET CSS
*/
* {
font-family: Heroes;
2020-05-10 16:43:05 +00:00
font-size: 1em; /* We use browser's default */
margin: 0;
padding: 0;
}
2020-05-10 16:43:05 +00:00
html { height: 100% }
2020-05-10 16:43:05 +00:00
body {
display: flex;
2020-05-14 20:34:59 +00:00
max-width: 1200px;
2020-05-10 16:43:05 +00:00
flex-direction: row;
2020-05-14 20:34:59 +00:00
margin: auto;
}
2020-05-10 16:43:05 +00:00
/*
* RESPONSIVE
*/
.mobile_block, .mobile_inline { display: none }
2020-05-10 18:16:34 +00:00
@media screen and (max-width: 800px) {
2020-05-10 16:43:05 +00:00
body { flex-direction: column }
.computer_block { display: none }
.mobile_block { display: block }
.mobile_inline { display: inline }
}
2020-05-10 16:43:05 +00:00
/*
* CORE TEMPLATE
*/
2020-05-10 16:43:05 +00:00
/* Header + Menu */
body > header {
color: white;
2020-05-14 20:34:59 +00:00
background: rgb(125,205,141);
background: linear-gradient(0deg, rgba(125,205,141,1) 0%, rgba(81,156,96,1) 50%, rgba(12,144,110,1) 100%);
2020-05-10 16:43:05 +00:00
padding: 1.5rem;
2020-05-14 20:34:59 +00:00
margin: 0.8rem;
border-radius: 0.5rem;
box-shadow: 0px 0px 30px rgba(31,38,103,0.2);
}
2020-05-10 16:43:05 +00:00
body > header > a > svg {
fill: white;
display: inline;
vertical-align: sub;
margin-right: 1em;
}
2020-05-10 16:43:05 +00:00
body > header > h1 { display: inline }
body > header a {
color: white;
text-decoration: none;
}
2020-05-10 18:16:34 +00:00
body > header > nav ul {
list-style-type: none;
padding-left: 1em;
}
body > header > nav > ul { padding-left: 0px }
body > header > nav a:hover { text-decoration: underline }
body > header > nav .selected { font-weight: bold }
body > header > nav .selected::before { content: "» " }
2020-05-10 16:43:05 +00:00
body > main {
padding: 1.5rem;
max-width: 1200px;
}
2020-05-10 18:16:34 +00:00
2020-05-10 16:43:05 +00:00
/*
* TEXT CORE (think markdown)
*/
2020-05-10 16:43:05 +00:00
h1 { font-size: 2.5rem }
h2 { font-size: 2.0rem }
h3 { font-size: 1.75rem }
h4 { font-size: 1.50rem }
h5 { font-size: 1.25rem }
h6 { font-size: 1.10rem }
2020-05-10 18:16:34 +00:00
section, p, ul, ol { margin-bottom: 1rem }
ul, ol { padding-left: 1.5em }
2020-05-14 21:15:53 +00:00
img {
border-radius: 0.5rem;
box-shadow: 0px 0px 30px rgba(31,38,103,0.2);
margin: 0.5rem;
}
img.simple {
border-radius: 0px;
box-shadow: none;
margin: 0px;
}
2020-05-10 16:43:05 +00:00
/*
* UTILS
*/
2020-03-11 08:32:32 +00:00
2020-05-10 16:43:05 +00:00
/* float */
.left { float: left }
.right { float: right }
section::after, p::after {
clear: both;
display: block;
content: "";
}
2020-03-11 08:32:32 +00:00
2020-05-10 16:47:32 +00:00
/* center */
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
2020-05-10 16:43:05 +00:00
/*
* ELEMENTS
*/
2020-04-19 13:51:17 +00:00
input {
border: 0.1em black solid;
width: 50%;
min-width: 300px;
font-size: 1.6em;
border: 0.1em black solid;
padding: 0.3em;
}
.button {
padding: 0.3em;
background-color: #519c60;
font-size: 1.6em;
border: 0.1em solid #519c60;
color: white;
margin: 0em 0em 0em 1em;
text-decoration: none;
}
2020-05-10 16:43:05 +00:00
/* service button */
.service-box {
color: #000;
text-decoration: none;
border: 0.2em solid #000;
width: 250px;
text-align:center;
margin: 1em 1em 0em 0em;
display: block;
}
.service-box:hover {
background-color: #000;
color: #fff;
}