site/src/css/main.css

324 lines
3.8 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;
font-size: 1em;
/* We use browser's default */
margin: 0;
padding: 0;
}
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) {
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>aside>header {
2020-05-10 16:43:05 +00:00
color: white;
background: rgb(12, 144, 110);
2020-06-02 14:37:54 +00:00
background: linear-gradient(0deg, rgb(21, 65, 73) 0%, rgb(55, 141, 100) 50%, rgb(12, 144, 110) 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);
}
body>aside>header>a>svg {
fill: white;
2020-05-10 16:43:05 +00:00
display: inline;
vertical-align: sub;
margin-right: 1em;
}
body>aside>header>h1 {
display: inline
}
body>aside>header a {
color: white;
text-decoration: none;
}
body>aside>header>nav ul {
2020-05-10 18:16:34 +00:00
list-style-type: none;
padding-left: 1em;
}
body>aside>header>nav>ul {
padding-left: 0px
}
body>aside>header>nav a:hover {
text-decoration: underline
}
body>aside>header>nav .selected {
font-weight: bold
}
body>aside>header>nav .selected::before {
content: "» "
}
body>main {
2020-05-10 16:43:05 +00:00
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)
*/
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
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem
}
section,
p,
ul,
ol,
table,
pre {
margin-bottom: 1rem
}
ul,
ol {
padding-left: 1.5em
}
a {
2022-05-13 06:13:37 +00:00
color: #08634c;
}
table {
border-collapse: collapse
}
th {
background-color: #fafafa
}
td,
th {
2020-05-17 18:58:40 +00:00
border: 1px solid #ddd;
padding: 0.3rem 0.5rem;
}
2020-06-14 11:59:50 +00:00
pre {
background-color: #1e1e1e;
padding: 1rem;
overflow-x: auto;
}
2020-06-14 11:59:50 +00:00
code {
font-family: Monospace;
background-color: #1e1e1e;
color: #fff;
padding: 0.25rem 0.4rem;
}
img {
2020-05-14 21:15:53 +00:00
border-radius: 0.5rem;
box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2);
2020-05-14 21:15:53 +00:00
margin: 0.5rem;
}
2020-05-14 21:15:53 +00:00
img.simple {
border-radius: 0px;
box-shadow: none;
margin: 0px;
}
2020-11-15 17:14:16 +00:00
strong {
background-color: rgb(12, 144, 110);
color: #fff;
2020-11-15 17:14:16 +00:00
padding: 0.20rem 0.4rem;
}
2020-05-17 18:58:40 +00:00
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 {
2020-05-10 16:43:05 +00:00
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;
2020-05-10 16:47:32 +00:00
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;
2020-05-16 13:25:52 +00:00
border: 1px solid #ddd;
border-radius: 0.5rem;
2020-05-10 16:43:05 +00:00
width: 250px;
text-align: center;
2020-05-10 16:43:05 +00:00
margin: 1em 1em 0em 0em;
display: block;
}
.service-box:hover {
background-color: #000;
color: #fff;
}
.callout {
font-size: 1.2rem;
text-align: center;
position: relative;
margin: 2rem 0;
padding: 1rem;
border: 1px solid rgba(10, 10, 10, 0.25);
border-radius: .2rem;
background-color: #cbf0e6;
}
2020-05-16 13:25:52 +00:00
.frame {
border-left: 1rem solid #ddd;
padding-left: 1rem;
2022-05-13 06:13:37 +00:00
}
img.hero {
width: 100%;
margin:-0.5rem;
}
h1.slogan {
text-align:center;
font-size:2rem;
padding: 2rem 0rem;
}
.icon {
font-size: 80px;
height: 120px;
}
section.list {
padding-left:1.5rem;
}
p.fill {
margin: 2rem 0rem;
}