You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
5.6 KiB
Stylus
293 lines
5.6 KiB
Stylus
5 years ago
|
html, body
|
||
|
|
min-height: 100vh
|
||
|
|
margin: 0
|
||
|
|
padding: 0
|
||
|
|
font-family: 'Raleway', sans-serif
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5, h6
|
||
|
|
font-family: "Raleway Light"
|
||
|
|
|
||
|
|
.index-grid-container
|
||
|
|
min-height: 100vh
|
||
|
|
display: grid
|
||
|
|
grid-template-columns: 0.5fr 1fr 1fr 1fr
|
||
|
|
grid-template-rows: auto auto 1fr 1fr auto
|
||
|
|
gap: 1em 1em
|
||
|
|
grid-template-areas:
|
||
|
|
"logo top_menu top_menu top_menu"\
|
||
|
|
"side_menu preliminary preliminary preliminary"\
|
||
|
|
"side_menu content content content"\
|
||
|
|
"side_menu content content content"\
|
||
|
|
"footer footer footer footer"
|
||
|
|
|
||
|
|
.index-logo
|
||
|
|
grid-area: logo
|
||
|
|
display: flex
|
||
|
|
align-items: center
|
||
|
|
justify-content: center
|
||
|
|
font-size: 2em
|
||
|
|
text-transform: uppercase
|
||
|
|
font-family: "Raleway Thin"
|
||
|
|
letter-spacing: 0.2em
|
||
|
|
& a
|
||
|
|
padding: 2em 1em
|
||
|
|
font-weight: 100 !important
|
||
|
|
font-style: normal
|
||
|
|
color: #222
|
||
|
|
text-decoration: none
|
||
|
|
transition: .5s
|
||
|
|
&:hover
|
||
|
|
//box-shadow: 0 30px 40px -14px rgba(0, 0, 0, 0.4)
|
||
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||
|
|
border-radius: 0.65rem
|
||
|
|
animation: COLOR_BLINK 6s infinite
|
||
|
|
|
||
|
|
@keyframes COLOR_BLINK
|
||
|
|
0%, 15%
|
||
|
|
color: #721b65
|
||
|
|
15%, 25%
|
||
|
|
color: #b80d57
|
||
|
|
25%, 35%
|
||
|
|
color: #f8615a
|
||
|
|
35%, 45%
|
||
|
|
color: #f8615a
|
||
|
|
45%, 50%
|
||
|
|
color: #ffd868
|
||
|
|
50%, 65%
|
||
|
|
color: #f8615a
|
||
|
|
65%, 75%
|
||
|
|
color: #f8615a
|
||
|
|
75%, 80%
|
||
|
|
color: #b80d57
|
||
|
|
80%, 90%
|
||
|
|
color: #721b65
|
||
|
|
90%, 100%
|
||
|
|
color: #222
|
||
|
|
|
||
|
|
.index-top_menu
|
||
|
|
grid-area: top_menu
|
||
|
|
display: flex
|
||
|
|
align-items: center
|
||
|
|
justify-content: center
|
||
|
|
& nav
|
||
|
|
align-items: center
|
||
|
|
display: flex
|
||
|
|
justify-content: space-around
|
||
|
|
width: 100%
|
||
|
|
& a
|
||
|
|
text-decoration: none
|
||
|
|
text-transform: uppercase
|
||
|
|
font-family: "Raleway Light"
|
||
|
|
font-weight: 200
|
||
|
|
font-style: normal
|
||
|
|
color: #444
|
||
|
|
transition: .3s
|
||
|
|
&:hover
|
||
|
|
color: black
|
||
|
|
border-bottom-width: 0.75rem !important
|
||
|
|
&.active
|
||
|
|
border-bottom-width: 0.75rem !important
|
||
|
|
&.katalog
|
||
|
|
border-bottom: solid 1px #93CE38
|
||
|
|
&.vyhledavani
|
||
|
|
border-bottom: solid 1px #4089BB
|
||
|
|
&.kontakt
|
||
|
|
border-bottom: solid 1px #AD32A1
|
||
|
|
&.o-spolecnosti
|
||
|
|
border-bottom: solid 1px #C69F88
|
||
|
|
|
||
|
|
.index-preliminary
|
||
|
|
grid-area: preliminary
|
||
|
|
text-align: justify
|
||
|
|
padding: 0
|
||
|
|
& h3
|
||
|
|
color: black
|
||
|
|
& p
|
||
|
|
color: #606060
|
||
|
|
@media (min-width: 60rem)
|
||
|
|
padding: 0 6vw
|
||
|
|
@media (min-width: 90rem)
|
||
|
|
padding: 0 40% 0 0
|
||
|
|
@media (min-width 120rem)
|
||
|
|
padding: 0 50% 0 0
|
||
|
|
|
||
|
|
.index-content
|
||
|
|
grid-area: content
|
||
|
|
.select
|
||
|
|
position relative
|
||
|
|
display inline-block
|
||
|
|
margin-bottom 15px
|
||
|
|
width 100%
|
||
|
|
select
|
||
|
|
display inline-block
|
||
|
|
width 100%
|
||
|
|
cursor pointer
|
||
|
|
padding 1em 1.5em
|
||
|
|
outline 0
|
||
|
|
border-width 0 0 1px 0
|
||
|
|
border-color #aaa
|
||
|
|
border-style solid
|
||
|
|
border-radius 0
|
||
|
|
background white
|
||
|
|
color gray
|
||
|
|
appearance none
|
||
|
|
-webkit-appearance none
|
||
|
|
-moz-appearance none
|
||
|
|
&::-ms-expand
|
||
|
|
display none
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
color black
|
||
|
|
background white
|
||
|
|
.input
|
||
|
|
position relative
|
||
|
|
display inline-block
|
||
|
|
margin-bottom 15px
|
||
|
|
width 100%
|
||
|
|
input
|
||
|
|
display inline-block
|
||
|
|
width 100%
|
||
|
|
cursor pointer
|
||
|
|
padding 1em 1.5em
|
||
|
|
outline 0
|
||
|
|
border-width 0 0 1px 0
|
||
|
|
border-color #aaa
|
||
|
|
border-style solid
|
||
|
|
border-radius 0
|
||
|
|
background white
|
||
|
|
color gray
|
||
|
|
appearance none
|
||
|
|
-webkit-appearance none
|
||
|
|
-moz-appearance none
|
||
|
|
&::-ms-expand
|
||
|
|
display none
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
color black
|
||
|
|
background white
|
||
|
|
textarea
|
||
|
|
display inline-block
|
||
|
|
width 100%
|
||
|
|
height: 30em
|
||
|
|
cursor pointer
|
||
|
|
padding 1em 1.5em
|
||
|
|
outline 0
|
||
|
|
border-width 0 0 1px 0
|
||
|
|
border-color #aaa
|
||
|
|
border-style solid
|
||
|
|
border-radius 0
|
||
|
|
background white
|
||
|
|
color gray
|
||
|
|
appearance none
|
||
|
|
-webkit-appearance none
|
||
|
|
-moz-appearance none
|
||
|
|
&::-ms-expand
|
||
|
|
display none
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
color black
|
||
|
|
background white
|
||
|
|
|
||
|
|
.index-top-part
|
||
|
|
display: grid
|
||
|
|
grid-template-columns: 1fr 2.5fr
|
||
|
|
grid-template-rows: 0.5fr
|
||
|
|
gap: 1em 1em
|
||
|
|
grid-template-areas: "sorting search_bar"
|
||
|
|
& .search_bar
|
||
|
|
grid-area: search_bar
|
||
|
|
& .sorting
|
||
|
|
grid-area: sorting
|
||
|
|
|
||
|
|
.index-side_menu
|
||
|
|
grid-area: side_menu
|
||
|
|
& ul
|
||
|
|
border-right: 1px solid #edf2f7
|
||
|
|
list-style: none
|
||
|
|
font-family: "Raleway Light"
|
||
|
|
text-align: right
|
||
|
|
font-size: 1.2rem
|
||
|
|
& li
|
||
|
|
padding-bottom: 0.6rem
|
||
|
|
padding-top: 0.6rem
|
||
|
|
padding-right: 2rem
|
||
|
|
margin-right: 2rem
|
||
|
|
transition: .5s
|
||
|
|
& a
|
||
|
|
text-decoration: none
|
||
|
|
color: #555
|
||
|
|
&:hover
|
||
|
|
color: black
|
||
|
|
&:hover
|
||
|
|
border-radius: 0.3rem
|
||
|
|
box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25)
|
||
|
|
background-color: white
|
||
|
|
|
||
|
|
.index-footer
|
||
|
|
font-family: "Raleway Thin" !important
|
||
|
|
grid-area: footer
|
||
|
|
display: flex
|
||
|
|
align-items: center
|
||
|
|
justify-content: center
|
||
|
|
font-size: 1em
|
||
|
|
text-transform: uppercase
|
||
|
|
color: #333
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.kontakt-grid-container
|
||
|
|
display: grid
|
||
|
|
min-height: 100%
|
||
|
|
grid-template-columns: 1fr 1fr
|
||
|
|
grid-template-rows: auto 1fr 1fr
|
||
|
|
gap: 1em
|
||
|
|
grid-template-areas: "kontakt-top kontakt-top" "kontakt-informace kontakt-form" "kontakt-mapa kontakt-form"
|
||
|
|
|
||
|
|
.kontakt-top
|
||
|
|
grid-area: kontakt-top
|
||
|
|
& h1
|
||
|
|
color: black
|
||
|
|
font-size: 2rem
|
||
|
|
font-weight: 200
|
||
|
|
font-style: normal
|
||
|
|
text-transform: uppercase
|
||
|
|
font-family: "Raleway Thin"
|
||
|
|
|
||
|
|
.kontakt-informace
|
||
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||
|
|
border-radius: 0.45rem
|
||
|
|
grid-area: kontakt-informace
|
||
|
|
padding: 1rem
|
||
|
|
& table
|
||
|
|
color: #333
|
||
|
|
border: none
|
||
|
|
border-collapse: collapse
|
||
|
|
& td
|
||
|
|
border: none
|
||
|
|
& th
|
||
|
|
text-align: left
|
||
|
|
padding-right: 1rem
|
||
|
|
|
||
|
|
.kontakt-mapa
|
||
|
|
grid-area: kontakt-mapa
|
||
|
|
& .map
|
||
|
|
width: 100%
|
||
|
|
height: 100%
|
||
|
|
border-radius: 0.4rem
|
||
|
|
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25)
|
||
|
|
|
||
|
|
.kontakt-form
|
||
|
|
grid-area: kontakt-form
|
||
|
|
& form
|
||
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||
|
|
border-radius: 0.45rem
|
||
|
|
margin: 0rem 2rem
|
||
|
|
height: 100%
|
||
|
|
padding: 2rem
|
||
|
|
& button
|
||
|
|
padding: 1rem 3rem
|
||
|
|
float: right
|
||
|
|
& label
|
||
|
|
font-family: "Raleway"
|
||
|
|
text-transform: uppercase
|