Compare commits

...

2 Commits

Author SHA1 Message Date
Thoscellen
a9172b1b7a feat: 🚧 prepare stuff for exposing the frame-only branch 2021-08-09 19:23:45 +02:00
Thoscellen
84f6aeb129 chore: ♻️ manual forward of the wireframe branch to master state. 2021-08-09 19:13:41 +02:00
9 changed files with 22 additions and 19 deletions

View File

@ -1,24 +1,27 @@
# 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.
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
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.
You are viewing the frame-only branch. This branch feature a wireframe version of this prototype.
## Galeries d'images
* [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.
![Exemple de lightbox pouvant afficher tout son contenu dans l'espace disponible](./com/Frame%201.png)
## Gallery
![Exemple de lightbox très grande](./com/Frame%202.png)
![Exemple of a full ranged lightbox](./public/readme_assets/Frame%201.png)
![Exemple de lightbox confortable](./com/Frame%203.png)
![Exemple of a very big lightbox](./public/readme_assets/Frame%202.png)
![Exemple de lightbox étroite](./com/Frame%204.png)
![Exemple of a comfty lightbox](./public/readme_assets/Frame%203.png)
![Exemple de lightbox retrécie](./com/Frame%205.png)
![Exemple of a neat lightbox](./public/readme_assets/Frame%204.png)
![Exemple de lightbox étriquée](./com/Frame%206.png)
![Exemple of a small lightbox](./public/readme_assets/Frame%205.png)
## Crédits
![Exemple of a narrow lightbox](./public/readme_assets/Frame%206.png)
* Polices : Mozilla
* Conception : Open Digital Education
## Credits
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
* Originals Design, Assets, Codes, Graphics: Open Digital Education

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./resize-lightbox-poc.css" />
<link type="text/css" rel="stylesheet" href="./main.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="">

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