Initial commit
This commit is contained in:
Adrien Bourmault
commit
c7d74496e6
Binary file not shown.
|
After Width: | Height: | Size: 723 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1019 KiB |
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Association Libre en Communs</title>
|
||||
|
||||
<link rel="stylesheet" media="screen" href="styles.css">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="Adrien Bourmault">
|
||||
<meta name="description" content="Draft of a website for Libre en Communs">
|
||||
<meta name="robots" content="all">
|
||||
|
||||
</head>
|
||||
|
||||
<!--
|
||||
Accessing source is a feature, not a bug. Thanks for your curiosity ;)
|
||||
-->
|
||||
|
||||
<body id="css-a-lec">
|
||||
<div class="page-wrapper">
|
||||
|
||||
<section class="introduction" id="a-lec-introduction">
|
||||
<header role="banner">
|
||||
<h1>Libre en Communs</h1>
|
||||
<h2>”Connaissance, partage, éducation et solidarité“</h2>
|
||||
</header>
|
||||
|
||||
<div class="summary" id="a-lec-summary" role="article">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus ex at ligula commodo ultrices. Proin viverra ligula orci, eu bibendum ante fermentum a. Nam vel nulla auctor, eleifend mauris sed, luctus mi. Phasellus varius velit vitae tellus malesuada, vel facilisis diam mattis. Aenean condimentum tortor a interdum fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tellus dui, dapibus non laoreet in, dictum at mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec maximus lacus.</p>
|
||||
<p>Suspendisse luctus iaculis nulla, ut feugiat nulla semper a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras volutpat dui eget est feugiat convallis. Quisque rutrum aliquam turpis et imperdiet. Cras ut risus elit. Nulla massa ex, vulputate ac quam non, rhoncus maximus felis. Fusce cursus eros id ipsum varius tincidunt.</p>
|
||||
</div>
|
||||
|
||||
<div class="preamble" id="a-lec-preamble" role="article">
|
||||
<h3>La route est longue...</h3>
|
||||
<p>Praesent consectetur lorem non lacus hendrerit, et facilisis justo ultrices. Morbi sem neque, tempor id tincidunt eu, viverra ac quam. Etiam nisl turpis, ultrices sed cursus vel, molestie vel dolor. Donec sed nisi tristique, molestie velit eu, pretium libero. Pellentesque et lobortis massa. Cras lobortis tempor erat at dapibus. In a hendrerit massa, id rhoncus augue. Morbi porta sit amet nisi non imperdiet. In ornare purus in diam efficitur, eget hendrerit sapien mollis. Vestibulum euismod vehicula quam vel semper.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="main supporting" id="a-lec-supporting" role="main">
|
||||
<div class="explanation" id="a-lec-explanation" role="article">
|
||||
<h3>...mais la voie est libre!</h3>
|
||||
<p>In eget mi id neque malesuada congue et in dui. Maecenas turpis turpis, mattis vitae leo vel, tristique aliquet ligula. Nunc interdum interdum purus sed pharetra. Proin porta felis non dolor bibendum, in ornare tellus maximus. Praesent semper purus eget ipsum varius, non rhoncus libero ultricies. Pellentesque risus dolor, hendrerit non scelerisque vel, euismod condimentum sapien. Phasellus pretium, arcu nec pharetra euismod, augue lorem consequat erat, vitae volutpat felis tellus ut ante. Quisque elit ipsum, consectetur in magna ut, scelerisque sollicitudin risus. Aenean non blandit enim.</p>
|
||||
</div>
|
||||
|
||||
<div class="apropos" id="a-lec-apropos" role="article">
|
||||
<h3>Organisation à but non lucratif</h3>
|
||||
<p>Nunc malesuada facilisis nunc. Integer ac mollis sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at dui vitae nibh interdum accumsan sed id mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque nisi vulputate varius aliquam. Duis vulputate elit vel feugiat interdum. Nullam rutrum nibh at finibus laoreet. Phasellus in ipsum massa. Curabitur sit amet est non lacus placerat aliquam. Proin ac facilisis est, id finibus diam. Cras vehicula, nunc sed sollicitudin pulvinar, dolor turpis posuere eros, ac blandit ipsum risus sit amet arcu.</p>
|
||||
</div>
|
||||
|
||||
<div class="apropossuite" id="a-lec-apropossuite" role="article">
|
||||
<h3>Des bénéfices pour les membres, évidemment</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus ex at ligula commodo ultrices. Proin viverra ligula orci, eu bibendum ante fermentum a. Nam vel nulla auctor, eleifend mauris sed, luctus mi. Phasellus varius velit vitae tellus malesuada, vel facilisis diam mattis. Aenean condimentum tortor a interdum fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tellus dui, dapibus non laoreet in, dictum at mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec maximus lacus.</p>
|
||||
</div>
|
||||
|
||||
<div class="adhesion" id="a-lec-adhesion" role="article">
|
||||
<h3>Comment adhérer ?</h3>
|
||||
<p>Suspendisse luctus iaculis nulla, ut feugiat nulla semper a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras volutpat dui eget est feugiat convallis. Quisque rutrum aliquam turpis et imperdiet. Cras ut risus elit. Nulla massa ex, vulputate ac quam non, rhoncus maximus felis. Fusce cursus eros id ipsum varius tincidunt.</p>
|
||||
<p><br/></p>
|
||||
<p role="contentinfo">In the free/libre software movement, we develop software that respects users' freedom, so we and you can escape from software that doesn't. I could have made money this way, and perhaps amused myself writing code. But I knew that at the end of my career, I would look back on years of building walls to divide people, and feel I had spent my life making the world a worse place.<br />
|
||||
Richard Matthew Stallman
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<aside class="sidebar" role="complementary">
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="latest-articles" id="latest-articles">
|
||||
<h3 class="select">Derniers évènements</h3>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" class="design-name">Titre</a> by <a href="" class="designer-name">Commentaire</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="design-name">Titre</a> by <a href="" class="designer-name">Commentaire</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="design-name">Titre</a> by <a href="" class="designer-name">Commentaire</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="design-name">Titre</a> by <a href="" class="designer-name">Commentaire</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="design-name">Titre</a> by <a href="" class="designer-name">Commentaire</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="a-lec-resources" id="a-lec-resources">
|
||||
<h3 class="resources">Resources:</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" title="Super statuts">Statuts de l'association</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" title="Super règlement intérieur">Règlement intérieur</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
Copyright © 2021 Association Libre en Communs − CC-BY-SA 4.0
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,771 @@
|
|||
/* 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%;
|
||||
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(contours-opaque.png), url(gridlines-opaque.png), url(bamboo.png);
|
||||
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(bamboo.png);
|
||||
}
|
||||
.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%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Okay, look, I feel rather awful about this. But due to source order it
|
||||
seems like the only way to pull off the separated sidebar. Perhaps
|
||||
flexbox is the way forward here, once the syntax settles down a bit.
|
||||
*/
|
||||
@media only screen and (min-width: 1120px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1240px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1260px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1320px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1370px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1520px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1812px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 1848px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 2015px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 2115px) {.a-lec-resources {top: 1370px;}}
|
||||
@media only screen and (min-width: 2400px) {/* you're kidding, right? */}
|
||||
|
||||
|
||||
@-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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue