Compare commits

..

No commits in common. "a9172b1b7a016331013c489f065422385092e275" and "4ea38804a54a58bc7b253090bf7d2f803b8e7372" have entirely different histories.

9 changed files with 19 additions and 22 deletions

View File

@ -1,27 +1,24 @@
# Lightbox Remastered
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign des lightbox utilisés dans One et Neo. Le travail aboutit sur des maquettes faites main.
You are viewing the frame-only branch. This branch feature a wireframe version of this prototype.
Ce project est une maquette interactive visant à mieux définir le comportement de la boite en fonction de regles de redimentionnements prenant en compte la taille d'affichage ( *Viewport* ), et les éléments contenu dans celle-ci, et adressant les problèmes actuellement rencontré à cet égards. Il sert de support de présentation.
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe/)
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
## Galeries d'images
## Gallery
![Exemple de lightbox pouvant afficher tout son contenu dans l'espace disponible](./com/Frame%201.png)
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png)
![Exemple de lightbox très grande](./com/Frame%202.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png)
![Exemple de lightbox confortable](./com/Frame%203.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png)
![Exemple de lightbox étroite](./com/Frame%204.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png)
![Exemple de lightbox retrécie](./com/Frame%205.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png)
![Exemple de lightbox étriquée](./com/Frame%206.png)
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
## Crédits
## Credits
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education
* Polices : Mozilla
* Conception : Open Digital Education

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./main.css" />
<link type="text/css" rel="stylesheet" href="./resize-lightbox-poc.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
@ -14,9 +14,9 @@
<div class=" "><span class="text-ph close-button">x</span></div>
<div id="tabs-container">
<span></span>
<span><a href="#" class="text-ph">Onglet 1</a></span>
<span><a href="#" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="#" class="text-ph">Onglet actif</a></span>
<span><a href="" class="text-ph">Onglet 1</a></span>
<span><a href="" class="text-ph">Onglet 2</a></span>
<span class="active"><a href="" class="text-ph">Onglet actif</a></span>
<span></span>
</div>
</div>
@ -27,9 +27,9 @@
</div>
<div id="doc-file-viewmode">
Vue :
<a href="#" class="active">Mosaïque</a>
<a href="#">Grille</a>
<a href="#">Liste</a>
<a href="" class="active">Mosaïque</a>
<a href="">Grille</a>
<a href="">Liste</a>
</div>
<div id="doc-file-nav" class="list-nav scrollable ">
<ul class="">