633 lines
7.9 KiB
CSS
633 lines
7.9 KiB
CSS
@import "cols.css";
|
|
|
|
|
|
body {
|
|
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
body > * {
|
|
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* ------------------------------------------ HEADER ------------------------------------------ */
|
|
|
|
|
|
body > header {
|
|
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
body > header {
|
|
|
|
text-align: center;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
body > header a .sitename {
|
|
|
|
display: none;
|
|
}
|
|
|
|
|
|
body > header {
|
|
|
|
z-index: 200;
|
|
}
|
|
|
|
body > header > :first-child {
|
|
|
|
z-index: 250;
|
|
}
|
|
|
|
body > header > * {
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
body > header > :first-child a:before {
|
|
|
|
display: block;
|
|
}
|
|
|
|
body > header > :first-child {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
body > header > :first-child > * {
|
|
|
|
display: block;
|
|
}
|
|
|
|
body > header a {
|
|
|
|
text-decoration: none;
|
|
}
|
|
|
|
body > header .sitedesc {
|
|
|
|
font-size: 1.5rem;
|
|
line-height: 2.5rem;
|
|
position: relative;
|
|
top: -0.5rem;
|
|
}
|
|
|
|
body > header nav {
|
|
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
body > header nav button span {
|
|
|
|
display: none;
|
|
}
|
|
body > header nav ul {
|
|
|
|
list-style : none;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: space-between;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body > header nav ul li {
|
|
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body > header nav ul li a {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 2rem;
|
|
}
|
|
|
|
body > header #banner {
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
body > header > :first-child a:before {
|
|
|
|
content: url("banner-330w.png");
|
|
}
|
|
|
|
body > header img,
|
|
body > header nav {
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ------------------------------------------ FOOTER ------------------------------------------ */
|
|
|
|
|
|
|
|
footer {
|
|
|
|
text-align: center;
|
|
overflow: hidden;
|
|
|
|
padding-top: 10rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
footer nav {
|
|
|
|
display: none;
|
|
}
|
|
|
|
#serverlist {
|
|
|
|
margin-top: 4rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#serverlist > * {
|
|
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* ------------------------------------------ CONTENTS ------------------------------------------ */
|
|
|
|
|
|
main {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
main h1 {
|
|
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
main h2 {
|
|
|
|
font-size: 1.66rem;
|
|
}
|
|
|
|
main h3 {
|
|
|
|
font-size: 1.33rem;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
article {
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-top-width: 0.5rem;
|
|
border-bottom-width: 0.5rem;
|
|
|
|
margin-top: 3rem;
|
|
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 2rem;
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
article h1 {
|
|
|
|
overflow: hidden;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
article > :first-child,
|
|
article > :first-child :first-child {
|
|
|
|
margin-top: 0;
|
|
}
|
|
|
|
article > :not(:first-child) {
|
|
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
body.install article section {
|
|
|
|
margin-top: 3rem;
|
|
margin-bottom: 3rem;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
article img {
|
|
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
article table.keymapping tr > td:first-of-type {
|
|
|
|
text-align: right;
|
|
}
|
|
*/
|
|
|
|
|
|
article table {
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
article table td,
|
|
article table th {
|
|
|
|
border-width: 0.125rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.adresse, .politesse {
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.signature {
|
|
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
|
|
/* ------------------------------------------ GALLERIES ------------------------------------------ */
|
|
|
|
.gallery {
|
|
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gallery > * {
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.gallery figcaption {
|
|
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
@media (min-width: 56rem) {
|
|
|
|
.gallery_2_1 > :nth-child(2n + 1) {
|
|
|
|
grid-column: 1;
|
|
}
|
|
|
|
.gallery_2_1 > :nth-child(2n + 2) {
|
|
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 42.25rem) {
|
|
|
|
.gallery_3_2_1 > :nth-child(2n + 1) {
|
|
|
|
grid-column: 1;
|
|
}
|
|
|
|
.gallery_3_2_1 > :nth-child(2n + 2) {
|
|
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 56rem) {
|
|
|
|
.gallery_3_2_1 > :nth-child(3n + 1) {
|
|
|
|
grid-column: 1;
|
|
}
|
|
|
|
.gallery_3_2_1 > :nth-child(3n + 2) {
|
|
|
|
grid-column: 2;
|
|
}
|
|
|
|
.gallery_3_2_1 > :nth-child(3n + 3) {
|
|
|
|
grid-column: 3;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------ SERVEURS ------------------------------------------ */
|
|
|
|
|
|
|
|
address.server {
|
|
|
|
padding-bottom: 0.125rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
address.server > * {
|
|
|
|
border-width: 0.125rem;
|
|
|
|
padding-left: 0.25rem;
|
|
padding-right: 0.25rem;
|
|
}
|
|
|
|
address.server dfn {
|
|
|
|
border-width: 0.125rem;
|
|
|
|
border-top-left-radius: 0.25rem;
|
|
border-bottom-left-radius: 0.25rem;
|
|
}
|
|
|
|
address.server span:last-of-type {
|
|
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
|
|
border-left-width: 0.0627rem;
|
|
|
|
}
|
|
|
|
address.server span:last-of-type {
|
|
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem;
|
|
|
|
border-left-width: 0.0627rem;
|
|
|
|
}
|
|
|
|
address.server span:first-of-type {
|
|
|
|
border-right-width: 0.0627rem;
|
|
}
|
|
|
|
/*
|
|
address.server span:last-of-type:before {
|
|
|
|
content: " : ";
|
|
}
|
|
*/
|
|
|
|
|
|
/* ------------------------------------------ BOITES ------------------------------------------ */
|
|
|
|
|
|
.warn {
|
|
|
|
padding: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
kdb, .mono {
|
|
|
|
border-width: 0.125rem;
|
|
border-radius: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
}
|
|
|
|
|
|
.pubkey-and-copy-button {
|
|
|
|
display: flex;
|
|
}
|
|
|
|
.pubkey-and-copy-button input {
|
|
|
|
flex-grow: 1;
|
|
|
|
border-width: 0.125rem;
|
|
border-style: solid;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.pubkey-and-copy-button button {
|
|
|
|
border: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* ------------------------------------------ RESPONSIVE ------------------------------------------ */
|
|
|
|
body > header nav button {
|
|
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 35.374rem) {
|
|
|
|
body > header nav {
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
z-index: 300;
|
|
margin: 0;
|
|
|
|
background-color: transparent;
|
|
transition-duration: 0.5s;
|
|
transition-property: background-color;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
body > header nav button {
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 300;
|
|
|
|
width: 2rem;
|
|
height: 2rem;
|
|
|
|
display: block;
|
|
border: 0;
|
|
|
|
padding: 0;
|
|
margin: 1rem 0 0 1rem;
|
|
}
|
|
|
|
body > header nav button:after {
|
|
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 300;
|
|
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
|
|
body > header nav ul {
|
|
|
|
position: fixed;
|
|
top: 4rem;
|
|
left: 0;
|
|
|
|
z-index: 150;
|
|
|
|
height: 0;
|
|
opacity: 0;
|
|
display: block;
|
|
|
|
overflow: hidden;
|
|
|
|
transition-duration: 1s;
|
|
transition-property: opacity;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
article {
|
|
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 28.5rem) {
|
|
|
|
body > header > *,
|
|
article {
|
|
|
|
border-left-width: 0.5rem;
|
|
border-right-width: 0.5rem;
|
|
|
|
max-width: calc(4 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 35.375rem) {
|
|
|
|
body > header > *,
|
|
article {
|
|
|
|
max-width: calc(5 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
|
|
body > header > :first-child a:before {
|
|
|
|
content: url("banner-550w.png");
|
|
}
|
|
|
|
}
|
|
@media screen and (min-width: 42.25rem) {
|
|
|
|
body > header > *,
|
|
article {
|
|
|
|
max-width: calc(6 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 56rem) {
|
|
|
|
body > header > *,
|
|
article {
|
|
|
|
max-width: calc(8 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
|
|
body > header > :first-child a:before {
|
|
|
|
content: url("banner-660w.png");
|
|
}
|
|
|
|
body > header .sitedesc {
|
|
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
body > header nav {
|
|
|
|
max-width: calc(6 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 83.5rem) {
|
|
|
|
body > header > *,
|
|
article {
|
|
|
|
max-width: calc(9 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
|
|
body > header > :first-child a:before {
|
|
|
|
content: url("banner-770w.png");
|
|
}
|
|
|
|
|
|
body > header .sitedesc {
|
|
|
|
font-size: 2rem;
|
|
}
|
|
|
|
body > header nav {
|
|
|
|
max-width: calc(7 * (var(--col-width) + var(--col-gap)));
|
|
}
|
|
}
|
|
|
|
|
|
|