756 lines
16 KiB
CSS
756 lines
16 KiB
CSS
/* base CSS */
|
|
* {
|
|
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
|
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
|
box-sizing: border-box; /* Opera/IE 8+ */
|
|
}
|
|
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
color: #324150;
|
|
background: #fff;
|
|
font-family: sans-serif;
|
|
font-size: 70%;
|
|
}
|
|
|
|
a {
|
|
color: #0d8ba1;
|
|
-webkit-transition: all 0.25s ease-out;
|
|
-moz-transition: all 0.25s ease-out;
|
|
transition: all 0.25s ease-out;
|
|
text-decoration: none;
|
|
}
|
|
a:visited {
|
|
color: #1a4159;
|
|
}
|
|
a:hover, a:focus {
|
|
color: #0599c2;
|
|
text-decoration: underline;
|
|
}
|
|
abbr {
|
|
border: none;
|
|
text-transform: uppercase;
|
|
font-size: 0.9em;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
header {
|
|
height: 230px;
|
|
padding: 20px 0 70px 0;
|
|
|
|
background: #2d4b63 50% 0 url(fond_titre.png) no-repeat; /* old IE fallback */
|
|
|
|
background-attachment: fixed, scroll;
|
|
background-image: url(electronic.png), url(fond_titre.png);
|
|
background-position: 0 0, 0 50%;
|
|
background-repeat: repeat, no-repeat;
|
|
background-size: auto, cover;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
h1, h2 {
|
|
padding: 0 10%;
|
|
margin: 0;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
h1 {
|
|
padding-top: 0;
|
|
padding-bottom: 5px;
|
|
border-bottom: none;
|
|
font-family: 'Julius Sans One', sans-serif;
|
|
font-size: 4em;
|
|
text-transform: uppercase;
|
|
}
|
|
h1::before {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 20px;
|
|
content: "";
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: -20px 20px 10px -10px;
|
|
background: url(logo_a-lec.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
shape-rendering: geometricPrecision;
|
|
opacity: 0.8;
|
|
}
|
|
h2 {
|
|
display: block;
|
|
padding-top: 5px;
|
|
padding-bottom: 30px;
|
|
border-top: none;
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 2em;
|
|
font-style: italic;
|
|
}
|
|
h2::before {
|
|
content: " ";
|
|
padding: 50px;
|
|
}
|
|
h3 {
|
|
margin: 2em 0 0 0;
|
|
color: #2e394c;
|
|
font-family: 'Julius Sans One', sans-serif;
|
|
font-size: 1.8em;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
p {
|
|
margin: 0.75em 0;
|
|
line-height: 2;
|
|
}
|
|
|
|
|
|
.page-wrapper {
|
|
position: relative;
|
|
}
|
|
.summary, .preamble {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.supporting h3, .supporting p {
|
|
width: 80%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.summary {
|
|
padding-top: 2em;
|
|
}
|
|
|
|
|
|
/* introduction block links -- download HTML/CSS */
|
|
.introduction a, .introduction a:visited {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 1px 10px 1px 32px;
|
|
margin: -1px -10px -1px -6px;
|
|
-webkit-border-radius: 1px;
|
|
-moz-border-radius: 1px;
|
|
border-radius: 1px;
|
|
|
|
color: #7e8e9b;
|
|
font-family: 'Julius Sans One', sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
.introduction a:hover, .introduction a:focus {
|
|
z-index: 2;
|
|
color: #fff;
|
|
background: #3d8a9f;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.introduction a::before {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 8px;
|
|
padding: 2px;
|
|
color: #b9b795;
|
|
background: #f1f4ed;
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
-o-border-radius: 2px;
|
|
|
|
content: "D";
|
|
font-size: 16px;
|
|
text-indent: 0;
|
|
|
|
|
|
/* icomoon.io defaults */
|
|
font-family: sans-serif;
|
|
speak: none;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-webkit-transition: all 0.25s ease-out;
|
|
-moz-transition: all 0.25s ease-out;
|
|
transition: all 0.25s ease-out;
|
|
}
|
|
.introduction a:hover::before {
|
|
color: #fff;
|
|
background: #357d93;
|
|
}
|
|
|
|
|
|
/* coloured cutoff */
|
|
div.apropos, div.apropossuite {
|
|
background-attachment: scroll, scroll, fixed;
|
|
background-color: #dcd0a8;
|
|
background-image: url();
|
|
background-repeat: repeat, repeat, no-repeat;
|
|
background-size: auto, auto, cover;
|
|
}
|
|
/* extra padding at the cutoffs */
|
|
div.apropos {
|
|
padding: 3em 0;
|
|
margin-top: 3em;
|
|
}
|
|
div.apropossuite {
|
|
padding-bottom: 3em;
|
|
margin-bottom: 3em;
|
|
}
|
|
div.apropos h3, div.apropossuite h3 {
|
|
margin-top: 0;
|
|
}
|
|
div.apropos p, div.apropossuite p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* sidebar base styles */
|
|
.sidebar {
|
|
background: #eadde4;
|
|
}
|
|
.sidebar h3 {
|
|
display: none;
|
|
}
|
|
.sidebar a {
|
|
color: #685655;
|
|
text-decoration: none;
|
|
}
|
|
.sidebar a:hover, .sidebar a:focus {
|
|
color: #385d74;
|
|
}
|
|
.sidebar ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* shared sidebar styling */
|
|
.latest-articles ul, .a-lec-resources ul {
|
|
margin: 0;
|
|
}
|
|
.latest-articles li, .a-lec-resources li {
|
|
float: left;
|
|
width: 50%;
|
|
padding: 1.5em 10%;
|
|
border-top: solid 1px #e3d9e0;
|
|
color: #cac3c0;
|
|
font-style: italic;
|
|
}
|
|
.latest-articles li:hover, .latest-articles li:focus {
|
|
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* IE10+ */
|
|
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* W3C */
|
|
}
|
|
.latest-articles li:nth-child(2n+1), .a-lec-resources li:nth-child(2n+1) {
|
|
clear: left;
|
|
}
|
|
.latest-articles .design-name, .a-lec-resources a, li.viewall a {
|
|
display: block;
|
|
margin-bottom: 0.25em;
|
|
font-family: 'Julius Sans One', sans-serif;
|
|
font-size: 1.2em;
|
|
font-style: normal;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
/* select a design */
|
|
.latest-articles h3 {
|
|
display: none;
|
|
}
|
|
.latest-articles .designer-name {
|
|
color: #576168;
|
|
font-size: 0.9em;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* resources */
|
|
.a-lec-resources {
|
|
overflow: hidden;
|
|
background-color: #fafafa;
|
|
background-image: url();
|
|
}
|
|
.a-lec-resources li {
|
|
border-top: solid 1px #a0b9ad;
|
|
font-style: normal;
|
|
}
|
|
.a-lec-resources li:last-child {
|
|
float: none;
|
|
width: auto;
|
|
border-bottom: solid 1px #a0b9ad;
|
|
}
|
|
|
|
|
|
/* busting out the credits block */
|
|
.adhesion p:nth-child(5) {
|
|
padding-bottom: 2em;
|
|
}
|
|
.supporting .adhesion {
|
|
float: none;
|
|
clear: both;
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.supporting .adhesion a {
|
|
text-decoration: none;
|
|
}
|
|
.supporting .adhesion a:hover, .supporting .adhesion a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
.supporting .adhesion h3 {
|
|
padding-top: 0;
|
|
}
|
|
.adhesion p:last-child {
|
|
width: auto;
|
|
padding: 1em 12%;
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
background: #3e5d67;
|
|
|
|
background-attachment: fixed, scroll;
|
|
background-image: url(electronic.png), url(fond_titre.png);
|
|
background-position: 0 0, 0 50%;
|
|
background-repeat: repeat, no-repeat;
|
|
background-size: auto, cover;
|
|
|
|
font-size: 1.15em;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
.adhesion p:last-child a {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
|
|
/* main footer */
|
|
footer {
|
|
clear: both;
|
|
padding: 3em 10%;
|
|
color: #fff;
|
|
background: #324150;
|
|
text-align: center;
|
|
}
|
|
footer a {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 40px 0 0 0;
|
|
margin: 0 0.5em;
|
|
position: relative;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
-webkit-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
|
|
-moz-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
|
|
transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
|
|
}
|
|
footer a:hover, footer a:focus {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
text-decoration: none;
|
|
}
|
|
footer a:visited {
|
|
color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
footer a::before {
|
|
display: block;
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
overflow: visible;
|
|
font-size: 36px;
|
|
text-indent: 0;
|
|
|
|
/* icomoon.io defaults */
|
|
font-family: sans-serif;
|
|
speak: none;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
footer a.a-lec-validate-html::before {content: "5";}
|
|
footer a.a-lec-validate-html:hover::before, footer a.a-lec-validate-html:focus::before {content: "%";}
|
|
footer a.a-lec-validate-css::before {content: "3";}
|
|
footer a.a-lec-validate-css:hover::before, footer a.a-lec-validate-css:focus::before {content: "#";}
|
|
footer a.a-lec-license::before {content: "c";}
|
|
footer a.a-lec-license:hover::before, footer a.a-lec-license:focus::before {content: "C";}
|
|
footer a.a-lec-accessibility::before {content: "a";}
|
|
footer a.a-lec-accessibility:hover::before, footer a.a-lec-accessibility:focus::before {content: "A";}
|
|
footer a.a-lec-github::before {content: "g";}
|
|
footer a.a-lec-github:hover::before, footer a.a-lec-github:focus::before {content: "G";}
|
|
|
|
|
|
|
|
/* low-res CSS */
|
|
@media only screen and (max-width: 600px) {
|
|
|
|
/* these download links make approximately zero sense
|
|
on a phone without a user-accessible file system. */
|
|
.summary p:last-child {
|
|
display: none;
|
|
}
|
|
|
|
/* type adjustments */
|
|
h1 {
|
|
margin-top: 30px;
|
|
font-size: 2.5em;
|
|
}
|
|
h1::before {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
h2::before {
|
|
padding: 25px;
|
|
}
|
|
|
|
.adhesion p:last-child {
|
|
padding: 1em 6%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
|
|
header {
|
|
height: 250px;
|
|
padding-top: 0;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
}
|
|
h1::before {
|
|
display: block;
|
|
left: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 0 0 -25px;
|
|
padding: 0 0 35px 0;
|
|
}
|
|
h2::before {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 320px) {
|
|
|
|
/* adjusting the site header type size */
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* linearizing the design list on small screens */
|
|
.latest-articles li, .a-lec-resources li {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
/* adjusting footer type, icons */
|
|
.adhesion p:last-child {
|
|
font-size: 1.4em;
|
|
}
|
|
footer {
|
|
padding: 2em 5%;
|
|
}
|
|
footer a {
|
|
width: 35px;
|
|
height: 35px;
|
|
padding: 35px 0 0 0;
|
|
margin: 0 0.5em;
|
|
}
|
|
footer a::before {
|
|
font-size: 32px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* mid-res CSS */
|
|
@media only screen and (max-width: 1132px) {
|
|
header {
|
|
border-top: solid 10px rgba(19, 67, 71, 0.9);
|
|
}
|
|
p, li {
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 500px) and (max-width: 1150px) {
|
|
|
|
.adhesion p:last-child {
|
|
padding-bottom: 2em;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
/* page footer */
|
|
footer {
|
|
padding: 3em 0;
|
|
}
|
|
footer a {
|
|
width: 52px;
|
|
height: 52px;
|
|
padding: 52px 0 0 0;
|
|
margin: 0 2em;
|
|
}
|
|
footer a::before {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
|
|
/* high-res CSS */
|
|
@media only screen and (min-width: 1132px) {
|
|
body {
|
|
background: #ffffff;
|
|
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 66%, #fafafa 66%, #fafafa 100%);
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#fafafa), color-stop(100%,#fafafa));
|
|
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
|
|
background: -o-linear-gradient(left, #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
|
|
background: -ms-linear-gradient(left, #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
|
|
background: linear-gradient(to right, #ffffff 0%,#ffffff 66%,#fafafa 66%,#fafafa 100%);
|
|
font-size: 100%;
|
|
}
|
|
header {
|
|
width: 100%;
|
|
height: 310px;
|
|
padding: 0 10%;
|
|
border-top: solid 12px rgba(19, 67, 71, 0.8);
|
|
box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
}
|
|
|
|
header::before, header::after {
|
|
display: block;
|
|
content: " ";
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 9px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 7px;
|
|
background: rgba(0, 39, 43, 0.2);
|
|
}
|
|
header::after {
|
|
top: 306px;
|
|
height: 4px;
|
|
background: rgba(0, 39, 43, 0.075);
|
|
}
|
|
h1 {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 15px 0 0 0;
|
|
padding: 60px 0 5px 0;
|
|
}
|
|
h1::before {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 65px;
|
|
content: "";
|
|
width: 125px;
|
|
height: 125px;
|
|
margin: -65px 40px 0 0;
|
|
background: url(logo_a-lec.svg);
|
|
background-size: 100%;
|
|
shape-rendering: geometricPrecision;
|
|
opacity: 0.8;
|
|
|
|
-webkit-animation: koan 36000s infinite alternate;
|
|
-moz-animation: koan 36000s infinite alternate;
|
|
animation: koan 36000s infinite alternate;
|
|
}
|
|
h2 {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 5px 0 60px 70px;
|
|
}
|
|
p {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* main layout blocks */
|
|
nav, .supporting {
|
|
display: inline;
|
|
}
|
|
.summary, .preamble, .supporting div, .adhesion h3, .adhesion p {
|
|
float: left;
|
|
clear: left;
|
|
width: 66%;
|
|
padding: 1em 5% 1em 10%;
|
|
}
|
|
.explanation h3, .explanation p,
|
|
.apropos h3, .apropos p,
|
|
.apropossuite h3, .apropossuite p {
|
|
width: 100%;
|
|
}
|
|
.summary {
|
|
padding-top: 3.25em;
|
|
}
|
|
.adhesion h3, .adhesion p {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
|
|
/* coloured cutoff */
|
|
div.apropos, div.apropossuite {
|
|
width: 100%;
|
|
padding-left: 10%;
|
|
padding-right: 38%;
|
|
margin: 0;
|
|
}
|
|
/* extra padding at the cutoffs */
|
|
div.apropos, div.adhesion {
|
|
width: 100%;
|
|
padding-top: 4em;
|
|
}
|
|
div.explanation, div.apropossuite {
|
|
padding-bottom: 4em;
|
|
}
|
|
.adhesion p:nth-child(5) {
|
|
padding-bottom: 4em;
|
|
}
|
|
|
|
|
|
.introduction h3, .supporting h3 {
|
|
margin-top: 0;
|
|
}
|
|
.introduction p:last-child, .supporting p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.adhesion p:last-child {
|
|
padding-bottom: 3em;
|
|
padding-top: 3em;
|
|
box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
|
|
/* sidebar styling */
|
|
.latest-articles, .a-lec-resources {
|
|
position: absolute;
|
|
top: 360px;
|
|
right: 0;
|
|
width: 33.3%;
|
|
padding: 0 0 20px 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
.sidebar li {
|
|
float: none;
|
|
width: auto;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin: 0 25.4% 0 12.7%; /* 0 10% 0 5% of total width */
|
|
}
|
|
|
|
|
|
/* select a design */
|
|
.latest-articles li:first-child {
|
|
border-top: 0;
|
|
}
|
|
.latest-articles li:hover, .latest-articles li:focus {
|
|
background: none;
|
|
}
|
|
|
|
/* resources navigation */
|
|
.a-lec-resources {
|
|
position: absolute;
|
|
top: 1310px;
|
|
right: 0;
|
|
width: 34%;
|
|
background: transparent;
|
|
}
|
|
.a-lec-resources h3 {
|
|
display: none;
|
|
}
|
|
.a-lec-resources ul {
|
|
width: 55.9%;
|
|
margin: 0 29.4% 0 14.7%;
|
|
}
|
|
.a-lec-resources li {
|
|
padding: 1.5em 0 1.25em 0;
|
|
margin: 0;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 1150px) {
|
|
/* page footer */
|
|
footer a {
|
|
width: 76px;
|
|
height: 76px;
|
|
padding: 76px 0 0 0;
|
|
margin: 0 3em;
|
|
}
|
|
footer a::before {
|
|
font-size: 72px;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes koan {
|
|
from {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
-webkit-transform: scale(3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-moz-keyframes koan {
|
|
from {
|
|
-moz-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
-moz-transform: scale(3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes koan {
|
|
from {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* high-DPI adjustments */
|
|
@media
|
|
(min--moz-device-pixel-ratio: 1.5),
|
|
(-o-min-device-pixel-ratio: 3 / 2),
|
|
(-webkit-min-device-pixel-ratio: 1.5),
|
|
(min-device-pixel-ratio: 1.5),
|
|
(min-resolution: 1.5dppx) {
|
|
|
|
header {
|
|
background-image: url(electronic.png), url(fond_titre.png);
|
|
background-size: 50% ,cover;
|
|
}
|
|
|
|
.adhesion p:last-child {
|
|
background-image: url(electronic.png), url(fond_titre.png);
|
|
background-size: 50% cover;
|
|
}
|
|
}
|