feat: 👷 Init the pages branch dedicated to deploy to GitLab Pages.
This commit is contained in:
Thoscellen
parent
e4127f2356
commit
9e0509ab9c
@ -4,10 +4,7 @@
|
|||||||
|
|
||||||
pages:
|
pages:
|
||||||
stage: deploy
|
stage: deploy
|
||||||
script:
|
script: echo "hi"
|
||||||
- mv assets public/assets
|
|
||||||
- mv main.css public/main.css
|
|
||||||
- mv lightbox-demo.html public/index.html
|
|
||||||
artifacts:
|
artifacts:
|
||||||
paths:
|
paths:
|
||||||
- public
|
- public
|
||||||
|
|||||||
29
README.md
29
README.md
@ -2,33 +2,10 @@
|
|||||||
|
|
||||||
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
|
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
|
||||||
|
|
||||||
This small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI.
|
You are on the page branch. This branch serve the GitLab Pipeline to generate Pages. This works as documented on [GitLab's Docs](https://docs.gitlab.com/ee/user/project/pages/index.html#how-to-set-up-gitlab-pages-in-a-repository-where-theres-also-actual-code)
|
||||||
|
|
||||||
The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width.
|
|
||||||
|
|
||||||
This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product.
|
|
||||||
|
|
||||||
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
|
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
|
||||||
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
|
* [Wireframe showcase](https://khosmon.gitlab.io/Lightbox-Remastered/wireframe/)
|
||||||
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/sliderjs/)
|
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/sliderjs/)
|
||||||
|
|
||||||
|
💡 Note: On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize the viewport freely and easily.
|
||||||
## Gallery
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Credits
|
|
||||||
|
|
||||||
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
|
|
||||||
* Originals Design, Assets, Codes, Graphics: Open Digital Education
|
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link type="text/css" rel="stylesheet" href="./main.css" />
|
<link type="text/css" rel="stylesheet" href="./wireframe.css" />
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
250
public/wireframe/wireframe.css
Normal file
250
public/wireframe/wireframe.css
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
/* Faking a real website */
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(236, 236, 236);
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-ph {
|
||||||
|
background-color: rgb(236, 236, 236);
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The body of the fake website consist of a scrollable big picture */
|
||||||
|
|
||||||
|
#fake {
|
||||||
|
/* background: url(./fake-home.jpg); */
|
||||||
|
z-index: 9;
|
||||||
|
/* position: fixed; */
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* lightbox stuff */
|
||||||
|
|
||||||
|
.lb-mod {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* overflow: auto; */
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.softener {
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* lightbox itself */
|
||||||
|
|
||||||
|
.lb-container {
|
||||||
|
display: grid;
|
||||||
|
margin: 5em;
|
||||||
|
grid-template-rows: min-content auto min-content;
|
||||||
|
position: static;
|
||||||
|
z-index: 11;
|
||||||
|
max-width: 1030px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-header h2 {
|
||||||
|
margin: 0.5em 1em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-header .close-button {
|
||||||
|
position: absolute;
|
||||||
|
right:.5em;
|
||||||
|
top:.5em;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-container {
|
||||||
|
display: flex;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-container a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #tabs-container > span.active a {
|
||||||
|
color: rgb(255, 141, 46);
|
||||||
|
} */
|
||||||
|
|
||||||
|
#tabs-container > span {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: min-content;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid lightgray;
|
||||||
|
padding: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-container > span.active {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: min-content;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-body {
|
||||||
|
/* padding: 1em; */
|
||||||
|
padding-bottom: 0;
|
||||||
|
/* max-height: 350px; */
|
||||||
|
max-height: calc(100vh - 10em - 200px);
|
||||||
|
border-bottom: 1px solid lightgray;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-file-browse {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: [side] 220px [central] auto;
|
||||||
|
grid-template-rows: [toolbar] auto [main] auto;
|
||||||
|
grid-gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-file-browse #doc-file-viewmode {
|
||||||
|
visibility: hidden;
|
||||||
|
grid-row: toolbar;
|
||||||
|
grid-column: side;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-file-browse #doc-file-search {
|
||||||
|
visibility: hidden;
|
||||||
|
grid-row: toolbar;
|
||||||
|
grid-column: central;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-file-browse #doc-file-nav {
|
||||||
|
grid-row: toolbar / span 2;
|
||||||
|
grid-column: side;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-file-browse #doc-file-dominos {
|
||||||
|
grid-row: toolbar / span 2;
|
||||||
|
grid-column: central;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="date"] {
|
||||||
|
border: 1px solid #c9ced5;
|
||||||
|
line-height: 25px;
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 40px;
|
||||||
|
font-size: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
/* height: 40px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none;
|
||||||
|
font-size: initial;
|
||||||
|
padding:9px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav ul {
|
||||||
|
padding-left: 0;
|
||||||
|
font-size: 12pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav ul li ul li {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav li span {
|
||||||
|
padding: 3px 9px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav li:not(.active) span:hover {
|
||||||
|
background: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-nav .active > span {
|
||||||
|
background: lightgray;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.domino-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.domino-item {
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
width: 150px;
|
||||||
|
height: 80px;
|
||||||
|
background: url(https://via.placeholder.com/80/ebebeb/ebebeb) no-repeat;
|
||||||
|
padding-left: 86px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.domino-item h4 {
|
||||||
|
margin: 6px 0 ;
|
||||||
|
color: rgb(53, 53, 53);
|
||||||
|
}
|
||||||
|
.domino-item h4 span.extension {
|
||||||
|
color:gray;
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.domino-item .subtitle {
|
||||||
|
color:gray;
|
||||||
|
font-size: 10pt;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-footer {
|
||||||
|
padding: 1em;
|
||||||
|
justify-self: end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user