Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
bcad171152 | ||
|
|
2630ba0e70 | ||
|
|
ecd3791698 | ||
|
|
eb4825e735 | ||
|
|
390678a2b6 | ||
|
|
5d496ae5b6 | ||
|
|
bc781d6d5a | ||
|
|
e7df500a85 | ||
|
|
06f54b381d | ||
|
|
91fc103e80 | ||
|
|
ab8bd6a588 | ||
|
|
5c9ae8e435 | ||
|
150b12d8f2 | ||
|
|
6df61f13eb |
@ -1,12 +0,0 @@
|
||||
# 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
|
||||
45
README.md
45
README.md
@ -2,9 +2,46 @@
|
||||
|
||||
> This repository serve resources and examples for my Behance portfolio.
|
||||
|
||||
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:
|
||||
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).
|
||||
|
||||
- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/one.html
|
||||
- https://khosmon.gitlab.io/Open-Sand-One/juxtaposejs/neo.html
|
||||
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.
|
||||
|
||||
There is also the photoshop templates to render them.
|
||||
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. Most of the content borders has been removed, background made translucent and blurry.
|
||||
|
||||
|
||||
|
||||
|
||||
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. The search bar has been lightened and justified to the width of the app grid.
|
||||
|
||||
|
||||
Illustration of the Timeline web page for the Neo ENT.
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 777 KiB |
BIN
public/icon.jpg
BIN
public/icon.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 685 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 389 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 793 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 820 KiB |
@ -1,18 +0,0 @@
|
||||
<!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>
|
||||
@ -1,18 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
139
xstyle.css
Normal file
139
xstyle.css
Normal file
@ -0,0 +1,139 @@
|
||||
@-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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user