feat: 📝 Updated the ReadMe.md for this branch.

Update .gitlab-ci.yml file
refactor: 🚀 Made 2 juxtapose website for pages.
2021-08-14 15:33:41 +02:00 · 2021-08-14 11:09:51 +00:00 · 2021-08-14 13:07:20 +02:00 · 2021-08-14 12:57:02 +02:00
21 changed files with 52 additions and 180 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,12 @@
+# Move / rename the content files into the 'public' folder for GitLab Pages
+# Artifacts contents of 'public' for Pages
+# Deploy pages publicly in GitLab
+
+pages:
+  stage: deploy
+  script: echo "hi 👋"
+  artifacts:
+    paths:
+      - public
+  only:
+    - pages
--- a/README.md
+++ b/README.md
@ -2,46 +2,9 @@

 > This repository serve resources and examples for my Behance portfolio.

-This prototype is a visual overhaul of some webpage, that rely on CSS back drop blur, opacity, shadows and border radiuses. It is mostly inspired by iOS 14 aesthetic and overrides the default website theme (via the xStyle extension).
+You are on the `pages` branch. This branch hold assets and public ressources, and the `gitlab-ci.yml` pipeline to host pages. The following pages are served:

-We reduced a lot of decoration to simplify the design language and emphases the content, and highlighted the website wallpaper − which is customisable by a predefined selection of vector illustrations − in order to enhance the feel of cosiness.
+- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/one.html
+- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/neo.html

-However, we noticed that the combination of backdrop blurriness, transparency and SVG wallpapers had a huge impact on performances, including animation and scrolling. We measured that most integrated GPU where not able to render a fluid experience, especially on High DPI displays.
-
-## Gallery
-
-![Illustration of the Timeline webpage with the water lily theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Timeline_idle.One.v01.png)
-
-Illustration of the Timeline webpage with the *water lily* theme. Most of the content borders has been removed, background made translucent and blurry.
-
-
-![Illustration of the Timeline webpage with the Wood theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Timeline_with_filter.One.v01.png)
-
-Illustration of the Timeline webpage with the *Wood* theme. The filter list has been revamped to looks like a card when expanded and allow the toggle of switches. Each filters shows if it's activated by using a re-enforced visual code.
-
-
-![Illustration of the My Apps webpage with the Fall theme.](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/MyApps.One.v01.png)
-
-Illustration of the My Apps webpage with the *Fall* theme. The search bar has been lightened and justified to the width of the app grid.
-
-
-![Illutration of the Timeline webpage](https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/Timeline_with_filter.Neo.before.1.png)Illustration of the Timeline web page for the Neo ENT.
-
-
-![](https://khosmon.gitlab.io/Open-Sand-One/readme_assets/Filter_All.one.mov)
-
-Demonstration of animations of the filters card. The card expand and collapse, got a translucent background on hover, and keep it when expanded.
-
-## Installation
-
-1. Get the [xStyle](https://github.com/FirefoxBar/xStyle) extension on your browser. [Chrome](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj), [Firefox](https://addons.mozilla.org/firefox/addon/xstyle/)
-2. Download the [xstyle.css file](https://gitlab.com/Khosmon/Open-Sand-One/-/blob/master/xstyle.css)
-3. In your xStyle settings, click `Install From File` and select your downloaded file.
-4. Feel free to edit the content to your wish, or reset the domain to your website.
-
-## About
-
- One, the Panda logo, the Wallpapers and most of the materials are owned by ODE.
- Other content shown (like Qwant Juniors, CCN) are the propriety of their respective owners.
- All portraits and peoples are fictional or AI-generated.
- Font *Calibri* is owned by Microsoft.
+There is also the photoshop templates to render them.
--- a/photoshop/Timeline_idle.Neo.v01.psd
+++ b/photoshop/Timeline_idle.Neo.v01.psd
--- a/photoshop/Timeline_with_filter.One.v01.psd
+++ b/photoshop/Timeline_with_filter.One.v01.psd
--- a/photoshop/icon.psd
+++ b/photoshop/icon.psd
--- a/public/Thumbnail.png
+++ b/public/Thumbnail.png
--- a/public/icon.jpg
+++ b/public/icon.jpg
--- a/public/juxtaposejs/Timeline_with_filter.Neo.after.1.png
+++ b/public/juxtaposejs/Timeline_with_filter.Neo.after.1.png
--- a/public/juxtaposejs/Timeline_with_filter.Neo.before.1.png
+++ b/public/juxtaposejs/Timeline_with_filter.Neo.before.1.png
--- a/public/juxtaposejs/Timeline_with_filter.One.after.1.png
+++ b/public/juxtaposejs/Timeline_with_filter.One.after.1.png
--- a/public/juxtaposejs/Timeline_with_filter.One.before.1.png
+++ b/public/juxtaposejs/Timeline_with_filter.One.before.1.png
--- a/public/juxtaposejs/neo.html
+++ b/public/juxtaposejs/neo.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Juxtapose Neo, before and after</title>
+</head>
+<body>
+    <div class="juxtapose" data-animate="true">
+        <img src="Timeline_with_filter.Neo.before.1.png" alt="An image of the actual implementation" data-label="before">
+        <img src="Timeline_with_filter.Neo.after.1.png" alt="An image of my prototype implementation" data-label="after">
+    </div>
+
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+</body>
+</html>
--- a/public/juxtaposejs/one.html
+++ b/public/juxtaposejs/one.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Juxtapose One, before and after</title>
+</head>
+<body>
+    <div class="juxtapose" data-animate="true">
+        <img src="Timeline_with_filter.One.before.1.png" alt="An image of the actual implementation" data-label="before">
+        <img src="Timeline_with_filter.One.after.1.png" alt="An image of my prototype implementation" data-label="after">
+    </div>
+
+    <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
+</body>
+</html>
--- a/public/readme_assets/Filter_All.one.mov
+++ b/public/readme_assets/Filter_All.one.mov
--- a/public/readme_assets/Filter_Hover_Animation.One.mov
+++ b/public/readme_assets/Filter_Hover_Animation.One.mov
--- a/public/readme_assets/Filter_Toogle_Cards.One.mov
+++ b/public/readme_assets/Filter_Toogle_Cards.One.mov
--- a/public/readme_assets/Filter_Toogle_List.One.mov
+++ b/public/readme_assets/Filter_Toogle_List.One.mov
--- a/public/readme_assets/MyApps.One.v01.png
+++ b/public/readme_assets/MyApps.One.v01.png
--- a/public/readme_assets/Timeline_idle.One.v01.png
+++ b/public/readme_assets/Timeline_idle.One.v01.png
--- a/public/readme_assets/Timeline_with_filter.One.v01.png
+++ b/public/readme_assets/Timeline_with_filter.One.v01.png
--- a/xstyle.css
+++ b/xstyle.css
@ -1,139 +0,0 @@
-@-moz-document domain("recette.opendigitaleducation.com") {
-	@keyframes rotate {
-		0% {
-			transform: rotate3d(0, 1, 0, 0deg);
-		}
-		100% {
-			transform: rotate3d(0, 1, 0, 360deg);
-		}
-	}
-	i.loading {
-		/*content: '';
-		color: rgba(0, 0, 0, 0);*/
-		background-image: url("https://recette.opendigitaleducation.com/assets/themes/cg771d/img/icons/proud.png");
-		background-size: auto;
-	}
-	body {
-		font-family: Calibri, sans-serif;
-	}
-	h1,
-	h1 a,
-	nav.horizontal a,
-	.navbar .welcome-message {
-		font-family: KGJune, sans-serif;
-	}
-	nav.horizontal a {
-		font-size: 14pt;
-	}
-	h1,
-	h1 a {
-		font-weight: bolder;
-		font-size: 18pt;
-	}
-	.widgets h1 {
-		font-family: "Rancho", sans-serif;
-	}
-	.container section.main {
-		backdrop-filter: blur(30px);
-		background: rgba(255, 255, 255, 0.66) !important;
-		border-radius: 24px 24px 0 0 !important;
-	}
-	.navbar {
-		backdrop-filter: blur(30px);
-		background-image: linear-gradient( rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.66)) !important;
-	}
-	ul.icons-tabs {
-		top: 30px;
-	}
-	div[ng-include="template.containers.main"] > input[type=search] {
-		margin: auto;
-		width: 90%;
-		/* margin: 0 50px; */
-		border: none;
-		border-bottom: 1px solid darkgrey;
-		background: none;
-		/* padding: 0 50px; */
-		float: none;
-	}
-	.notification {
-		border-top: none !important;
-		border-bottom: none !important;
-		border-right: none !important;
-		border-left-width: 14px !important;
-		border-radius: 12px;
-		background: rgba(255, 255, 255, 0.80);
-	}
-	.widgets .news,
-	.qwant,
-	.qwant-junior,
-	.mood-widget,
-	.dicodelazone,
-	.widgets .recorder--audio,
-	.birthday {
-		border: none;
-		border-radius: 12px;
-	}
-	.widgets h1 {
-		border-radius: 12px 12px 0 0 !important;
-		text-align: center;
-	}
-	.widgets .news .new {
-		border-radius: 0 0 12px 12px;
-	}
-	div:not(.simple-notifications) > .notification i.sticker.app::before {
-		text-shadow: none;
-	}
-	.drop-down-block {
-		padding: 10px;
-		border-radius: 12px;
-		/*transition: background-color 500ms linear, margin 500ms linear;*/
-		transition: background-color 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
-		margin-bottom: 30px;
-	}
-	.drop-down-block:hover {
-		background: rgba(255, 255, 255, 0.66);
-	}
-	.drop-down-block.slided {
-		background: rgba(255, 255, 255, 0.66);
-		/*margin-bottom: 30px;*/
-	}
-	.drop-down-label,
-	.drop-down-label:hover {
-		border: none !important;
-		margin-bottom: 0 !important;
-	}
-	.drop-down-block .drop-down-label + .drop-down-info {
-		top: 0;
-		padding: 1.5em;
-	}
-	.chip {
-		transition: all 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
-		background: none;
-		box-shadow: 0px 0px 0px 1px darkgray !important;
-		text-shadow: none !important;
-	}
-	.chip *,
-	.chip > i {
-		color: gray !important;
-	}
-	/*.chip:hover {
-		box-shadow: 0px 0px 0px 2px white !important;
-	}*/
-	.chip.selected,
-	div:not(.simple-notifications) > .notification i.sticker.app {
-		box-shadow: none !important;
-	}
-	.chip.selected > * {
-		color: white !important;
-	}
-	.chip.multiselect {
-		box-shadow: none !important;
-	}
-	.chip.multiselect * {
-		color: white !important;
-	}
-  	nav.horizontal > a i::before,
-	nav.horizontal popover > a i::before{
-		color: #2a9cc8 !important;
-	}
-}
Author	SHA1	Message	Date
Thoscellen	a2ba3bf985	feat: 📝 Updated the ReadMe.md for this branch.	2021-08-14 15:33:41 +02:00
Simon	09f4f01ad7	Update .gitlab-ci.yml file	2021-08-14 11:09:51 +00:00
Thoscellen	2643181d94	refactor: 🚀 Made 2 juxtapose website for pages.	2021-08-14 13:07:20 +02:00
Thoscellen	38ffd31bca	ci: 👷 Init pages branch for a few webpages demos.	2021-08-14 12:57:02 +02:00