Skip to content

Instantly share code, notes, and snippets.

@AurelieBayre

AurelieBayre/sauron.css

Last active February 22, 2018 18:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AurelieBayre/13945b7ef57d462b817161d42e7c3a1f to your computer and use it in GitHub Desktop.
Save AurelieBayre/13945b7ef57d462b817161d42e7c3a1f to your computer and use it in GitHub Desktop.
Download ZIP
deuxime soluce pour l'oeil de sauron, avec bootstrap4 (optimisation de la soluce de Tanguy)
Raw
sauron.css
/*Disclaimer: je suis partie de la soluce de Tanguy Marlot et je l'ai optimisée pour que les carrés restent carrés.*/
.gray,
.orange,
.yellow,
.black {
border: 1px solid #fff;
padding: 0px;
}
.gray {
background-color: gray;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.black {
background-color: #000;
}
/* ici on met une hauteur pour les tout petits écrans qui ne feront pas de marge autour de container. donc container = 100vw */
.row{
height: calc(100vw / 12);
}
/* et là, spécifiquement par rapport aux différentes tailles de .container définies par bootstrap. */
/* small */
@media (min-width: 576px) {
.row {
height: calc(510px / 12);
}
.black {
background-color: purple;
}
}
/* small-medium */
@media (min-width: 768px) {
.row {
height: calc(690px / 12);
}
.black {
background-color: rgb(0, 119, 128);
}
}
/* Medium-big */
@media (min-width: 992px) {
.row {
height: calc(930px / 12);
}
.black {
background-color: rgb(13, 216, 13);
}
}
/* Very big */
@media (min-width: 1140px) {
.row {
height: calc(1110px / 12);
}
.black {
background-color: rgb(255, 104, 167);
}
}
/*
là ça utilise un .container, mais ton peut utiliser la même astuce avec .container-fluid,
sauf que là on n'aura pas besoin de faire des media queries:
le bout de code: row{
height: calc(100vw / 12);
}
suffira pour toutes les configurations.
Pour une soluce en .container-fluid, je trouve pas mal de limiter la taille du dessin,
par exemple en enveloppant le .container-fluid dans un div .wrapper
auquel tu donne une largeur spécifique (ex 80%) et des margin left et right:auto
et puis pour le calcul, tu fais height: calc(80vw / 12) (ou: .wrapper{width: 60%} .row{height: calc(60vw / 12)} etc.)
comme ça on a un dessin plutôt centré
et qui a des chances de tenir entier dans l'écran même en longueur sans avoir à scroller verticalement.
_*/
Raw
sauron2.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Sauron deuxième édition</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="sauron.css"/>
</head>
<body>
<!-- Disclaimer: je suis partie de la soluce de Tanguy Marlot et je l'ai optimisée pour que les carrés restent carrés. -->
<div class="container"> <!-- on peut résoudre l'énigme aussi avec un container-fluid mais la soluce est différente. -->
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 offset-9 gray"></div>
</div>
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 offset-3 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-3 gray"></div>
</div>
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 offset-2 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-2 gray"></div>
</div>
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 orange"></div>
<div class="col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 orange"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 offset-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 offset-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 offset-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 offset-3 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 offset-2 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 offset-3 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 offset-4 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
<div class="row">
<div class="col-1 offset-4 gray"></div>
<div class="col-1 gray"></div>
<div class="col-1 gray"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment