pedf
/
oli
Archived
2
0
Fork 0
Code Pull Requests Releases Activity

Odstranění výchozích stylů u tlačítka

Browse Source
master
MB 4 years ago
parent cdae90b262
commit ed919b9549
1 changed files with 108 additions and 105 deletions
Show Stats Download Patch File Download Diff File

213
css/style.css
Unescape Escape View File

@ -1,105 +1,108 @@
@font-face { @font-face {
font-family: moderat-regular; font-family: moderat-regular;
src: url(../fonts/moderat-regular.otf) src: url(../fonts/moderat-regular.otf)
} }
@font-face { @font-face {
font-family: moderat-black; font-family: moderat-black;
src: url(../fonts/moderat-black.otf) src: url(../fonts/moderat-black.otf)
} }
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-size: 1em; font-size: 1em;
font-family: moderat-regular; font-family: moderat-regular;
background: url(../img/header-pattern.svg) no-repeat left top; background: url(../img/header-pattern.svg) no-repeat left top;
background-size: 90% auto; background-size: 90% auto;
} }
.wrap { .wrap {
max-width: 62em; max-width: 62em;
margin: 0 auto; margin: 0 auto;
padding: 0 1em; padding: 0 1em;
} }
.messenger { .messenger {
max-width: 100%; max-width: 100%;
display: block; display: block;
margin-top: 2em; margin-top: 2em;
} }
.messenger img { max-width: 12em; } .messenger img { max-width: 12em; }
h1, h2, h3 { font-family: moderat-black; } h1, h2, h3 { font-family: moderat-black; }
h1 { color: #d63647; margin-bottom: 0; clear: both; font-size: 3em; } h1 { color: #d63647; margin-bottom: 0; clear: both; font-size: 3em; }
h2, h3 { color: #1fbcc6; } h2, h3 { color: #1fbcc6; }
p { line-height: 1.6; } p { line-height: 1.6; }
header { width: auto; } header { width: auto; }
header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; } header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; }
header .logo img { height: 10em; } header .logo img { height: 10em; }
header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; } header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; }
header .row img { max-height: 500px; } header .row img { max-height: 500px; }
header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; } header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; }
main { main {
padding-top: 200px; margin-top: -200px; padding-top: 200px; margin-top: -200px;
padding-bottom: 100px; margin-bottom: -100px; padding-bottom: 100px; margin-bottom: -100px;
background: url(../img/timeline.svg) no-repeat center top; background: url(../img/timeline.svg) no-repeat center top;
background-size: auto 100%; background-size: auto 100%;
} }
.row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; } .row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; }
.row>img { max-height: 30em; max-width: 40%; } .row>img { max-height: 30em; max-width: 40%; }
article { article {
background-color: #eee; background-color: #eee;
border: 3px solid #ddd; border: 3px solid #ddd;
border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%; border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%;
position: relative; position: relative;
max-width: 32%; padding: 1.7em; max-width: 32%; padding: 1.7em;
} }
article h2 { margin-top: -1.5em; font-size: 2.6em; white-space: nowrap; } article h2 { margin-top: -1.5em; font-size: 2.6em; white-space: nowrap; }
article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; } article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; }
article:nth-child(2) h2 { margin-left: -1.5em; } article:nth-child(2) h2 { margin-left: -1.5em; }
article::before { article::before {
content: ''; content: '';
border: 2px solid #dfdfdf; border: 2px solid #dfdfdf;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
z-index: -1; z-index: -1;
} }
article: nth-child(1)::before { article: nth-child(1)::before {
transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg); transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg);
border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
} }
@media screen and (max-width: 699px) { @media screen and (max-width: 699px) {
body { background: none; font-size: 1em; } body { background: none; font-size: 1em; }
.messenger { text-align: center; } .messenger { text-align: center; }
header { width: 100%; } header { width: 100%; }
header .logo { padding-top: 30px; width: 100%; float: none; margin: 0 auto; } header .logo { padding-top: 30px; width: 100%; float: none; margin: 0 auto; }
header .row p { max-width: 100%; } header .row p { max-width: 100%; }
main { background: none; } main { background: none; }
.row { flex-direction: column; margin: 4em 0; } .row { flex-direction: column; margin: 4em 0; }
.row:nth-child(even) { flex-direction: column-reverse; } .row:nth-child(even) { flex-direction: column-reverse; }
.row>img { max-height: 80%; max-width: 80%; margin: 1em 0; } .row>img { max-height: 80%; max-width: 80%; margin: 1em 0; }
article { max-width: 100%; align-self: center !important; padding: 1em; } article { max-width: 100%; align-self: center !important; padding: 1em; }
article h2 { margin-top: auto; font-size: 2.3em; white-space: initial; } article h2 { margin-top: auto; font-size: 2.3em; white-space: initial; }
article:nth-child(1) h2 { margin-right: auto; text-align: right; } article:nth-child(1) h2 { margin-right: auto; text-align: right; }
article:nth-child(2) h2 { margin-left: auto; } article:nth-child(2) h2 { margin-left: auto; }
} }
/* Odstraneni stylu u tlacitka */
input, button, submit { border:none; }