506 lines
14 KiB
Stylus
506 lines
14 KiB
Stylus
/* http://meyerweb.com/eric/tools/css/reset/
|
|
v2.0 | 20110126
|
|
License: none (public domain)
|
|
*/
|
|
|
|
html, body, div, span,
|
|
h1, h2, h3, h4, h5, h6, p, a, img, form, label, input {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
div, span, h1, h2, h3, h4, h5, h6, p, a, img, form, label, input,
|
|
header, nav, main, article, section {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
line-height: 1;
|
|
font-family: Tahoma, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
color: black;
|
|
background: white;
|
|
}
|
|
|
|
#container {
|
|
flex-grow: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
header {
|
|
background: #444;
|
|
position: relative;
|
|
text-shadow: 0 0 10px black;
|
|
|
|
.container {
|
|
position: relative;
|
|
bottom: 0%;
|
|
left: 0%;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: #000;
|
|
min-height: 485px;
|
|
|
|
video {
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 0;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
bottom: 0;
|
|
position: absolute;
|
|
z-index: 0;
|
|
min-height: 485px;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
z-index: 6;
|
|
position: absolute;
|
|
align-items: center;
|
|
top: 0%;
|
|
left: 0%;
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
.filler {
|
|
flex: 2 1 auto;
|
|
}
|
|
|
|
.title {
|
|
margin: 0 20px 0 50px;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 90px;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 499.99951 478.24803\" height=\"478.25\" width=\"500\"><path d=\"M452.6 120.04a166.07 166.07 0 0 0-76.5-97.16A166.13 166.13 0 0 0 250.53 6 166.15 166.15 0 0 1 342.06 70a166.14 166.14 0 0 1 110.55 50.05\" fill=\"%23fadc43\"/><path d=\"M157.37 70.02A165.9 165.9 0 0 1 250 92.06 165.93 165.93 0 0 1 342.06 70 166.15 166.15 0 0 0 250.53 6a166.17 166.17 0 0 0-93.16 64.02\" fill=\"%23f8cc0a\"/><path d=\"M250 92.06a165.9 165.9 0 0 0-92.63-22.04 168.08 168.08 0 0 0-8.95 13.87 165.9 165.9 0 0 0-22.35 83.32 167.5 167.5 0 0 1 67.49-21.57c14.3-22 33.67-40.4 56.44-53.58\" fill=\"%23f9b00c\"/><path d=\"M172.57 192.36a165.63 165.63 0 0 1 20.99-46.72 167.5 167.5 0 0 0-67.49 21.57c.02 23.7 5.11 47.14 14.81 68.66a165.73 165.73 0 0 1 31.7-43.51\" fill=\"%23d29413\"/><path d=\"M172.57 192.36a165.73 165.73 0 0 0-31.69 43.5 165.89 165.89 0 0 0 32.59 47.8 166.74 166.74 0 0 1-6.8-47.23c0-15.26 2.06-30.03 5.9-44.07\" fill=\"%23ae7b19\"/><path d=\"M150.19 402.28a166.1 166.1 0 0 1-102.02-48.67A166.14 166.14 0 0 0 126.1 455.9a166.12 166.12 0 0 0 124.5 17.16 166.18 166.18 0 0 1-100.41-70.78\" fill=\"%23ee2834\"/><path d=\"M349.2 402.34A165.9 165.9 0 0 1 250 380.8a165.88 165.88 0 0 1-83.33 22.3c-5.56 0-11.06-.27-16.48-.8a166.18 166.18 0 0 0 100.4 70.77 166.19 166.19 0 0 0 98.62-70.72\" fill=\"%23d9252e\"/><path d=\"M250 380.8a165.9 165.9 0 0 0 83.33 22.3c5.36 0 10.66-.27 15.88-.76a165.82 165.82 0 0 0 26.91-90.78 167.46 167.46 0 0 1-74.06 22.08A167.53 167.53 0 0 1 250 380.79\" fill=\"%23c42129\"/><path d=\"M327.16 281.52a166.27 166.27 0 0 1-25.1 52.12 167.46 167.46 0 0 0 74.06-22.07 167.44 167.44 0 0 0-18.17-75.67 165.93 165.93 0 0 1-30.79 45.62\" fill=\"%23b11e25\"/><path d=\"M327.98 194.37a166.79 166.79 0 0 1 5.35 42.06c0 15.63-2.15 30.75-6.17 45.1a165.93 165.93 0 0 0 30.79-45.63 165.74 165.74 0 0 0-29.97-41.53\" fill=\"%239f1b21\"/><path d=\"M157.37 70.02A166.17 166.17 0 0 1 250.53 6a166.15 166.15 0 0 0-127.55 16.35 166.12 166.12 0 0 0-77.1 99.24 166.18 166.18 0 0 1 111.49-51.57\" fill=\"%23fadc43\"/><path d=\"M57.8 242.35c2.2-4.77 4.62-9.49 7.29-14.13a165.93 165.93 0 0 1 60.98-61.01 165.9 165.9 0 0 1 22.35-83.32c2.78-4.82 5.77-9.44 8.95-13.87a166.18 166.18 0 0 0-111.5 51.57c-10.99 39.1-7.76 82.17 11.94 120.76\" fill=\"%23f8cc0a\"/><path d=\"M140.88 235.87a167.52 167.52 0 0 1-14.8-68.66 165.93 165.93 0 0 0-60.99 61.01c-2.67 4.64-5.1 9.36-7.28 14.13a165.84 165.84 0 0 0 65.15 68.69c.02-26.12 6.2-51.91 17.92-75.17\" fill=\"%23f9b00c\"/><path d=\"M197.58 333.14a166.06 166.06 0 0 1-24.11-49.47 165.89 165.89 0 0 1-32.59-47.8 167.42 167.42 0 0 0-17.92 75.17 167.58 167.58 0 0 0 74.62 22.1\" fill=\"%23d29413\"/><path d=\"M209.43 311.56a166.67 166.67 0 0 1-35.96-27.9 166.06 166.06 0 0 0 24.11 49.48c16.95.9 34.13-.77 50.95-5.18a167.52 167.52 0 0 1-39.1-16.4\" fill=\"%23ae7b19\"/><path d=\"M349.2 402.34a166.19 166.19 0 0 1-98.6 70.72 166.1 166.1 0 0 0 122.38-17.7 166.15 166.15 0 0 0 77.4-100.3 166.17 166.17 0 0 1-101.17 47.28\" fill=\"%23c91840\"/><path d=\"M441.53 242.37a165.8 165.8 0 0 1-65.41 69.2 165.82 165.82 0 0 1-26.91 90.77 166.17 166.17 0 0 0 101.18-47.28 166.19 166.19 0 0 0-8.86-112.69\" fill=\"%23a7193a\"/><path d=\"M373.01 166.68a167.46 167.46 0 0 1-15.06 69.22 167.44 167.44 0 0 1 18.17 75.67 165.8 165.8 0 0 0 65.4-69.2A172.14 172.14 0 0 0 434 227.7a165.96 165.96 0 0 0-60.98-61.01\" fill=\"%23881933\"/><path d=\"M306.14 145.18a165.82 165.82 0 0 1 21.84 49.19 165.74 165.74 0 0 1 29.97 41.53A167.45 167.45 0 0 0 373 166.68a167.54 167.54 0 0 0-66.87-21.5\" fill=\"%236b172c\"/><path d=\"M292.76 167.22a166.85 166.85 0 0 1 35.22 27.15 165.82 165.82 0 0 0-21.84-49.2 165.9 165.9 0 0 0-57.69 4.32 166.78 166.78 0 0 1 44.31 17.73\" fill=\"%23511423\"/><path d=\"M452.6 120.04a166.18 166.18 0 0 1-11.07 122.33 166.19 166.19 0 0 1 8.86 112.69A166.14 166.14 0 0 0 500 236.43c0-45.3-18.07-86.36-47.4-116.4\" fill=\"%235ac5eb\"/><path d=\"M342.06 69.99a166.05 166.05 0 0 1 30.95 96.69A165.96 165.96 0 0 1 434 227.69c2.77 4.82 5.28 9.72 7.54 14.68a166.18 166.18 0 0 0 11.08-122.33 166.14 166.14 0 0 0-110.55-50.05\" fill=\"%234da4dd\"/><path d=\"M373.01 166.68a166.05 166.05 0 0 0-30.95-96.7A165.93 165.93 0 0 0 250 92.06a167.47 167.47 0 0 1 56.14 53.13 167.54 167.54 0 0 1 66.87 21.5\" fill=\"%234286ce\"/><path d=\"M248.45 149.5a165.9 165.9 0 0 1 57.69-4.32A167.47 167.47 0 0 0 250 92.06a167.53 167.53 0 0 0-56.44 53.58 165.92 165.92 0 0 1 54.9 3.85\" fill=\"%233c5a98\"/><path d=\"M248.45 149.5a165.92 165.92 0 0 0-54.9-3.86 165.63 165.63 0 0 0-20.98 46.72 166.95 166.95 0 0 1 33.75-25.67 166.8 166.8 0 0 1 42.13-17.2\" fill=\"%2337366d\"/><path d=\"M57.8 242.35A166.12 166.12 0 0 1 45.89 121.6 166.1 166.1 0 0 0 0 236.43a166.1 166.1 0 0 0 48.17 117.18 166.1 166.1 0 0 1 9.64-111.26\" fill=\"%23fadc43\"/><path d=\"M150.19 402.28a165.86 165.86 0 0 1-27.23-91.25 165.84 165.84 0 0 1-65.15-68.68 166.1 166.1 0 0 0-9.64 111.26 166.1 166.1 0 0 0 102.02 48.67\" fill=\"%23f8cc0a\"/><path d=\"M122.96 311.04a165.86 165.86 0 0 0 27.23 91.24c5.42.54 10.92.82 16.48.82 30.36 0 58.81-8.12 83.33-22.3a167.5 167.5 0 0 1-52.42-47.66 167.58 167.58 0 0 1-74.62-22.1\" fill=\"%23f9b00c\"/><path d=\"M248.53 327.96c-16.82 4.4-34 6.08-50.95 5.18A167.5 167.5 0 0 0 250 380.79a167.53 167.53 0 0 0 52.06-47.15 165.98 165.98 0 0 1-53.53-5.68\" fill=\"%23d29413\"/><path d=\"M248.53 327.96a165.98 165.98 0 0 0 53.53 5.68 166.27 166.27 0 0 0 25.1-52.12 166.88 166.88 0 0 1-37.51 29.5 167.01 167.01 0 0 1-41.12 16.94\" fill=\"%23ae7b19\"/></svg>')
|
|
// background: url('./assets/logo_only.svg') no-repeat transparent;
|
|
background-position: left center;
|
|
background-size: auto 70px;
|
|
font-size: 1.6em;
|
|
color: white;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
a {
|
|
font-size: 1.2em;
|
|
color: white;
|
|
text-shadow: 0 0 20px black;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
opacity: 0.6;
|
|
transition: opacity 0.5s;
|
|
position: relative;
|
|
|
|
& div {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 20px;
|
|
right: 20px;
|
|
border-bottom: 2px solid white;
|
|
transition: transform 0.3s;
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
|
|
& div {
|
|
transition: transform 0.7s;
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
|
|
& div {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 5;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0%;
|
|
height: 100%;
|
|
width: 100%;
|
|
min-height: 485px;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
|
|
|
|
h1 {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
text-align: center;
|
|
font-size: 4.6vw;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
transition: opacity 1s, transform 1s;
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h2 {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
text-align: center;
|
|
font-size: 3vw;
|
|
transition: opacity 1.2s, transform 1.2s;
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
}
|
|
|
|
&.visible {
|
|
h1, h2 {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 2;
|
|
color: #333;
|
|
}
|
|
|
|
article {
|
|
display: flex;
|
|
padding: 0 50px;
|
|
flex-direction: column;
|
|
min-height: 82vh;
|
|
height: 600px;
|
|
overflow: hidden;
|
|
|
|
h3 {
|
|
font-size: 2em;
|
|
padding: 10px 20px 40px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: relative;
|
|
align-self: center;
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
flex: 2 1 auto;
|
|
justify-content: center;
|
|
|
|
aside {
|
|
flex: 0 1 50%;
|
|
max-width: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h5 {
|
|
text-align: center;
|
|
margin: 20px 10px;
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #29688c;
|
|
padding: 10px 50px;
|
|
align-self: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
border: 2px solid #29688c;
|
|
align-self: center;
|
|
border-radius: 10px;
|
|
padding: 10px 30px 12px;
|
|
color: #29688c;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
p, h5, a, h3 {
|
|
transition: opacity 1.2s, transform 1.2s;
|
|
opacity: 0;
|
|
transform: translate(0px, 50px);
|
|
}
|
|
}
|
|
|
|
.image {
|
|
flex: 0 1 50%;
|
|
max-width: 600px;
|
|
background-position: center;
|
|
background-size: 90% auto;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: opacity 1.2s, transform 1.2s;
|
|
opacity: 0;
|
|
transform: translate(50%, 0px);
|
|
}
|
|
}
|
|
|
|
.visible p,
|
|
.visible a,
|
|
.visible .image,
|
|
.visible h5,
|
|
.visible h3,
|
|
.visible.image {
|
|
opacity: 1;
|
|
transform: translate(0px, 0px);
|
|
}
|
|
}
|
|
|
|
footer {
|
|
background: #29688c;
|
|
padding: 100px;
|
|
|
|
.outerbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 50vh;
|
|
background: white;
|
|
box-shadow: 0 0 10px #020024;
|
|
}
|
|
|
|
.innerbox {
|
|
padding: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 500px;
|
|
|
|
aside {
|
|
flex: 0 1 50%;
|
|
max-width: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
h3 {
|
|
font-size: 2em;
|
|
padding: 10px 20px 40px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: relative;
|
|
align-self: center;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
h5 {
|
|
text-align: center;
|
|
margin: 20px 10px;
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #29688c;
|
|
padding: 10px 50px;
|
|
align-self: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
border: 2px solid #29688c;
|
|
align-self: center;
|
|
border-radius: 10px;
|
|
padding: 10px 30px 12px;
|
|
color: #29688c;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
flex: 0 1 50%;
|
|
max-width: 600px;
|
|
background-position: center;
|
|
background-size: 90% auto;
|
|
background-repeat: no-repeat;
|
|
|
|
transition: opacity 1.2s, transform 1.2s;
|
|
opacity: 0;
|
|
transform: translate(0px, 50%);
|
|
|
|
&.visible {
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding: 40px 0 10px;
|
|
color: #777;
|
|
line-height: 1.6em;
|
|
|
|
span {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
a {
|
|
color: #29688c;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
article {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
footer {
|
|
font-size: 0.9em;
|
|
|
|
.innerbox {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: auto;
|
|
|
|
aside h3 {
|
|
padding: 30px 20px 20px;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
height: 300px;
|
|
flex: 0 0 300px;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
.meta {
|
|
padding: 0px 0 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
header {
|
|
.container nav {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
a.title {
|
|
width 100%;
|
|
flex: 2 0 100%;
|
|
justify-content: center;
|
|
background-position: calc(50% - 60px) center;
|
|
padding-left: 100px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.filler {
|
|
flex: 0 0 0;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
h1 {
|
|
font-size: 2.3em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
article {
|
|
height: auto !important;
|
|
|
|
section {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
|
|
aside {
|
|
order: 2;
|
|
}
|
|
|
|
.image {
|
|
order: 1;
|
|
width: 100%;
|
|
background-size: contain;
|
|
flex: 0 0 300px;
|
|
transform: translate(0, 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 680px) {
|
|
footer {
|
|
padding: 100px 20px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
header .content {
|
|
top: 60px;
|
|
}
|
|
|
|
article {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
footer {
|
|
padding: 100px 20px;
|
|
font-size: 0.8em;
|
|
|
|
.innerbox {
|
|
padding: 50px 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@require 'front/front'
|
|
@require 'hosting/hosting'
|
|
@require 'programming/programming'
|
|
@require 'streaming/streaming'
|