|
|
|
|
|
html, |
|
|
body { |
|
|
margin: 0; |
|
|
border: 0; |
|
|
min-height: 100% !important; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
*, |
|
|
*:after, |
|
|
*:before { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
[hidden] { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.noise_004 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
} |
|
|
|
|
|
.noise_00 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
background-blend-mode: color; |
|
|
background-color: #f8f8f8; |
|
|
} |
|
|
|
|
|
.noise_02 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
} |
|
|
|
|
|
.noise_03 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
background-blend-mode: hard-light; |
|
|
background-color: #BBB; |
|
|
} |
|
|
|
|
|
.noise_04 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
|
|
|
|
|
|
background-blend-mode: luminosity; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background-color: #DDD; |
|
|
} |
|
|
|
|
|
.noise_09 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
} |
|
|
|
|
|
.noise_19 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.19' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
background-blend-mode: multiply; |
|
|
background-color: #FFF; |
|
|
} |
|
|
|
|
|
.noise_29 { |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.29' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nf)'/%3E%3C/svg%3E"); |
|
|
} |
|
|
|
|
|
.linear_background_1 { |
|
|
background: linear-gradient(-45deg, |
|
|
hsla(110, 90%, 20%, 0.1), |
|
|
hsla(310, 90%, 20%, 0.1)); |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #999; |
|
|
|
|
|
display: grid; |
|
|
row-gap: 0.2em; |
|
|
column-gap: 0.3em; |
|
|
padding: 0.2em; |
|
|
font-family: Geneva, Verdana, Tahoma, Arial, Helvetica, sans-serif; |
|
|
|
|
|
header, |
|
|
footer, |
|
|
nav, |
|
|
main, |
|
|
aside { |
|
|
box-shadow: inset 0 0 9px #0005; |
|
|
border-radius: 0.4em; |
|
|
padding: 0.3em; |
|
|
} |
|
|
} |
|
|
|
|
|
body { |
|
|
grid-template-columns: auto 1fr auto; |
|
|
grid-template-rows: auto auto 1fr auto auto; |
|
|
|
|
|
header { |
|
|
grid-column: 1 / span 3; |
|
|
grid-row: 1; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
grid-column: 1 / span 3; |
|
|
grid-row: 2; |
|
|
} |
|
|
|
|
|
.aside-left { |
|
|
grid-column: 1; |
|
|
grid-row: 3; |
|
|
} |
|
|
|
|
|
.aside-right { |
|
|
grid-column: 3; |
|
|
grid-row: 3; |
|
|
} |
|
|
|
|
|
footer { |
|
|
grid-column: 1 / span 3; |
|
|
grid-row: 5; |
|
|
} |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 800px) { |
|
|
body { |
|
|
grid-template-columns: auto 1fr; |
|
|
grid-template-rows: auto 1fr 1fr auto; |
|
|
|
|
|
header { |
|
|
grid-column: 1; |
|
|
grid-row: 1; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
grid-column: 2; |
|
|
grid-row: 1; |
|
|
} |
|
|
|
|
|
.aside-left { |
|
|
grid-column: 1; |
|
|
grid-row: 2; |
|
|
} |
|
|
|
|
|
main { |
|
|
grid-row: span 2; |
|
|
} |
|
|
|
|
|
.aside-right { |
|
|
grid-column: 1; |
|
|
grid-row: 3; |
|
|
} |
|
|
|
|
|
footer { |
|
|
grid-column: 1 / span 2; |
|
|
grid-row: 5; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 370px) { |
|
|
body { |
|
|
grid-template-columns: 1fr; |
|
|
grid-template-rows: auto auto auto 1fr auto auto; |
|
|
|
|
|
header { |
|
|
grid-column: 1; |
|
|
grid-row: 1; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
grid-column: 1; |
|
|
grid-row: 2; |
|
|
} |
|
|
|
|
|
.aside-left { |
|
|
grid-column: 1; |
|
|
grid-row: 3; |
|
|
} |
|
|
|
|
|
main { |
|
|
grid-row: 4; |
|
|
} |
|
|
|
|
|
.aside-right { |
|
|
grid-column: 1; |
|
|
grid-row: 5; |
|
|
} |
|
|
|
|
|
footer { |
|
|
grid-column: 1; |
|
|
grid-row: 6; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
@media (hover: hover) { |
|
|
|
|
|
header:hover, |
|
|
footer:hover, |
|
|
nav:hover, |
|
|
main:hover, |
|
|
aside:hover { |
|
|
box-shadow: inset 0 0 9px #0007; |
|
|
transition-duration: 0.5s; |
|
|
} |
|
|
} |
|
|
|
|
|
.block-main { |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.aside-left { |
|
|
padding: 0.5em; |
|
|
word-break: break-word; |
|
|
|
|
|
} |
|
|
|
|
|
.aside-right { |
|
|
padding: 0.5em; |
|
|
overflow: auto; |
|
|
|
|
|
a { |
|
|
background-color: #FFFF; |
|
|
color: darkblue; |
|
|
text-decoration: none; |
|
|
} |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
|
|
|
background-color: #0004; |
|
|
} |
|
|
|
|
|
.block-title { |
|
|
font-size: 19px; |
|
|
background: linear-gradient(hsla(270, 90%, 20%, 0.2), |
|
|
hsla(100, 90%, 20%, 0.2)); |
|
|
} |
