Re-organize the project into a better hierarchy.
This commit is contained in:
Maarten Billemont
538
public/site/2013-05/css/main.css
Normal file
538
public/site/2013-05/css/main.css
Normal file
@@ -0,0 +1,538 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
}
|
||||
a:link, a:visited, *[onclick] {
|
||||
color: #08c;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a .popup {
|
||||
display: none;
|
||||
border-radius: 5px;
|
||||
color: #AAA;
|
||||
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
max-width: inherit;
|
||||
max-height: 400px;
|
||||
margin-right: -100px;
|
||||
padding: 8px;
|
||||
}
|
||||
a .popup.border {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
a:hover .popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav, h4 {
|
||||
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
|
||||
}
|
||||
|
||||
nav {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
/*
|
||||
*[id]::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 60px;
|
||||
width: 5px;
|
||||
background: red;
|
||||
margin-top: -60px;
|
||||
}
|
||||
*/
|
||||
|
||||
section {
|
||||
padding: 1ex 0;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding-top: 100px;
|
||||
width: 940px;
|
||||
margin: auto;
|
||||
|
||||
text-align: left;
|
||||
text-align: initial;
|
||||
}
|
||||
.hlvl {
|
||||
border-left: 5px solid #EEE;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.hlvl .hlvl {
|
||||
border-color: #CCC;
|
||||
margin-left: -1em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
.hlvl .hlvl .hlvl {
|
||||
border-color: #AAA;
|
||||
margin-left: -2em;
|
||||
padding-left: 3em;
|
||||
}
|
||||
h2.inline, h3.inline, h4.inline {
|
||||
display: inline-block;
|
||||
line-height: inherit;
|
||||
}
|
||||
.box {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
}
|
||||
.box img {
|
||||
border: 1px solid white;
|
||||
}
|
||||
img.block {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
padding: 4px;
|
||||
margin: auto 1em;
|
||||
width: 640px;
|
||||
}
|
||||
img.border {
|
||||
background: #AAA;
|
||||
border: 1px solid #333;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
clear: both;
|
||||
border-bottom: 2px ridge white;
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
.thumb img.pull-right, img.pull-left {
|
||||
width: 400px;
|
||||
}
|
||||
.thumb .pull-right {
|
||||
margin-left: 5ex;
|
||||
}
|
||||
.thumb .pull-left {
|
||||
margin-right: 5ex;
|
||||
}
|
||||
.fit-height {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.middle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.middle::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 100%;
|
||||
margin-left: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.middle.play::after {
|
||||
content: "▶";
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 0 1px white;
|
||||
border-radius: 50%;
|
||||
padding: 1ex;
|
||||
font-size: 200%;
|
||||
vertical-align: middle;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
.middle.play:hover::after {
|
||||
box-shadow: 0 0 10px white;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
margin: 0 2em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.navbar .nav .img {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.navbar .nav .img img {
|
||||
display: block;
|
||||
height: 32px;
|
||||
}
|
||||
ul.pictures {
|
||||
list-style: none;
|
||||
}
|
||||
ul.pictures li {
|
||||
display: inline-block;
|
||||
padding: 1ex;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
color: white;
|
||||
background: black;
|
||||
text-shadow: black 0 1px 50px;
|
||||
box-shadow: 0 1px 5px #000;
|
||||
|
||||
transition: height 0.3s;
|
||||
}
|
||||
header .container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
||||
background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8)));
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
||||
background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
|
||||
}
|
||||
header a:link, header a:visited, header *[onclick] {
|
||||
color: white;
|
||||
}
|
||||
header .background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
header .box {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transition: all 0.5s;
|
||||
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
header .box.active {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
header .box::before {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
content: "";
|
||||
margin-left: -2px;
|
||||
}
|
||||
header .box .minimized,
|
||||
header .box .maximized {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
font-size: 12pt;
|
||||
}
|
||||
header .box .minimized,
|
||||
header .box.active .maximized {
|
||||
display: inline-block;
|
||||
}
|
||||
header .box.active .minimized,
|
||||
header .box .maximized {
|
||||
display: none;
|
||||
}
|
||||
#scrollDown {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 1ex;
|
||||
text-align: center;
|
||||
|
||||
color: #DDD;
|
||||
font-size: 7em;
|
||||
}
|
||||
#app header {
|
||||
height: 80%;
|
||||
}
|
||||
#app header .background {
|
||||
background: url('../img/shot-laptop-leaning-iphone.jpg') center center;
|
||||
background-size: cover;
|
||||
}
|
||||
#what header,
|
||||
#security header,
|
||||
#algorithm header,
|
||||
#support header {
|
||||
height: 40%;
|
||||
|
||||
background: #272727;
|
||||
}
|
||||
#what header .background,
|
||||
#security header .background,
|
||||
#algorithm header .background,
|
||||
#support header .background {
|
||||
width: 940px;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
top: -10%;
|
||||
margin-left: -470px;
|
||||
}
|
||||
#what header .container,
|
||||
#security header .container,
|
||||
#algorithm header .container,
|
||||
#support header .container {
|
||||
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
||||
background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8)));
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%);
|
||||
background: radial-gradient(50% 50% at 50% 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 );
|
||||
}
|
||||
#tender_toggler {
|
||||
z-index: 2;
|
||||
}
|
||||
header .content {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 50%;
|
||||
margin-left: -470px;
|
||||
|
||||
text-align: right;
|
||||
|
||||
/*background: linear-gradient(to bottom, rgba(0,0,0,0) 85%, rgba(0,0,0,0.7) 85%);*/
|
||||
/*background: black url("../img/shot-laptop-leaning-iphone.png") center top / cover no-repeat;*/
|
||||
}
|
||||
h1, h2 {
|
||||
font-weight: 100;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: 0 0 1ex;
|
||||
}
|
||||
header h1 {
|
||||
font-size: 6em;
|
||||
margin: 0;
|
||||
}
|
||||
header h2 {
|
||||
font-size: 2em;
|
||||
font-style: oblique;
|
||||
}
|
||||
header .movie {
|
||||
display: none;
|
||||
background: url('../img/about.png') no-repeat scroll 50% 40px/cover black;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
header .movie::after {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('../img/loading-spin.svg') no-repeat scroll center center transparent;
|
||||
}
|
||||
header.play {
|
||||
height: auto !important;
|
||||
max-height: 94%;
|
||||
}
|
||||
header.play .movie {
|
||||
display: block;
|
||||
}
|
||||
header.play .movie video {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
header.play h1, header.play h2, header.play .box {
|
||||
display: none;
|
||||
}
|
||||
header .moviecontrol {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -.5em;
|
||||
margin-left: -.5em;
|
||||
|
||||
font-size: 400%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
header .moviecontrol::before {
|
||||
content: "▶";
|
||||
}
|
||||
header .moviecontrol:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
header.play .moviecontrol {
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
left: auto;
|
||||
top: auto;
|
||||
}
|
||||
header.play .moviecontrol::before {
|
||||
content: "❙❙";
|
||||
}
|
||||
header .movie::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('../img/video-pattern.png') repeat;
|
||||
background: url('../img/video-bg.png') no-repeat scroll 50% 100%/cover transparent;
|
||||
}
|
||||
header .movie video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 40px);
|
||||
height: auto;
|
||||
}
|
||||
header .movie .fallback {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
color: #BBB;
|
||||
}
|
||||
header .help {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
border-radius: 8px 0 0 8px;
|
||||
color: black;
|
||||
}
|
||||
header .help:hover .hidden {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
header .help a:link, header .help a:visited, header .help *[onclick] {
|
||||
color: #08c;
|
||||
}
|
||||
footer {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
footer h1 {
|
||||
background: #EEE;
|
||||
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 170%;
|
||||
font-weight: 100;
|
||||
}
|
||||
footer .content {
|
||||
margin: 1em auto;
|
||||
padding: 0;
|
||||
}
|
||||
footer .column {
|
||||
text-align: left;
|
||||
}
|
||||
q::before {
|
||||
content: open-quote;
|
||||
}
|
||||
q {
|
||||
font-style: italic;
|
||||
}
|
||||
q::after {
|
||||
content: close-quote;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
thead {
|
||||
background: #DDD;
|
||||
}
|
||||
tbody {
|
||||
background: #EEE;
|
||||
}
|
||||
th {
|
||||
background: #E9E9E9;
|
||||
}
|
||||
td, th {
|
||||
padding: 1ex;
|
||||
}
|
||||
thead {
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
tbody td, tbody th {
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
caption {
|
||||
font-weight: bold;
|
||||
font-size: 120%;
|
||||
}
|
||||
table .box {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
float: right;
|
||||
border-radius: 5px;
|
||||
}
|
||||
table .box.red {
|
||||
background: #A66;
|
||||
border: 1px solid #C33;
|
||||
}
|
||||
table .box.orange {
|
||||
background: #AA6;
|
||||
border: 1px solid #CC3;
|
||||
}
|
||||
table .box.green {
|
||||
background: #6A6;
|
||||
border: 1px solid #3C3;
|
||||
}
|
||||
|
||||
@media (max-width: 979px) {
|
||||
.content {
|
||||
width: auto;
|
||||
}
|
||||
header .content {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
.pull-right, .pull-left {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
header h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
header h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
header .moviecontrol {
|
||||
top: 1em;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user