Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

adjust styles

Browse source
This commit is contained in:
isUnknown 2024-04-06 10:08:45 +02:00
parent dd217e7a6a
commit 3804d13cb6
34 changed files with 756 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/css/src/header.css
View file

@ -42,6 +42,19 @@
padding-bottom: calc(5 * var(--unit--vertical));
}
#home .page-cover {
padding-top: 30svh;
}
#category .page-cover {
height: auto;
padding-bottom: 0;
margin-bottom: calc(2 * var(--unit--vertical));
}
#category .active-tab {
max-height: none;
}
@media screen and (min-width: 640px) {
#main-header {
display: flex;

4
assets/css/src/html.css
View file

@ -29,7 +29,7 @@ html {
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
scrollbar-color: transparent transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -44,7 +44,7 @@ html {
}
*::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.1);
background-color: transparent;
border-radius: 0px;
border: none;
}

25
assets/css/src/tabs.css
View file

@ -30,6 +30,7 @@ button.toggle.right.open::before {
margin-top: -25svh;
margin-bottom: 30svh;
transition: margin-top 0.5s ease-in-out;
z-index: 1;
}
#tabs.open {
@ -42,6 +43,30 @@ button.toggle.right.open::before {
margin-top: var(--unit--vertical);
transition: max-height 0.5s ease-in-out;
}
/* ================= SCROLLBAR ================= */
/* Works on Firefox */
.active-tab {
scrollbar-width: thin;
scrollbar-color: #fff transparent;
}
/* Works on Chrome, Edge, and Safari */
.active-tab::-webkit-scrollbar {
width: 3px;
height: auto;
}
.active-tab::-webkit-scrollbar-track {
background: transparent;
}
.active-tab::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 1px;
border: none;
}
.page-cover.open .active-tab {
height: calc(100svh - 7.5 * var(--unit--vertical));

20
assets/css/src/texts.css
View file

@ -8,6 +8,11 @@
font-style: normal;
}
.accent {
color: var(--color-secondary);
font-weight: normal;
}
* {
font-family: "Switzer-Variable", sans-serif;
}
@ -41,13 +46,20 @@ article h2 {
--margin-left: calc(4 * var(--unit--horizontal));
width: calc(100% - var(--margin-left));
margin-left: var(--margin-left);
font-size: var(--font-size-l);
line-height: var(--unit--vertical);
}
.main-title {
line-height: 1;
line-height: calc(var(--unit--vertical) * 2);
text-align: left;
box-sizing: border-box;
font-weight: var(--font-weight-light);
margin-bottom: var(--unit--vertical);
}
.texts__title {
font-size: var(--font-size-l);
}
p,
@ -70,9 +82,11 @@ button,
}
.fs-xl {
font-size: var(--font-size-xl) !important;
line-height: calc(var(--unit--vertical) * 1.5) !important;
}
.fs-xxl {
font-size: var(--font-size-xxl) !important;
line-height: calc(var(--unit--vertical) * 2.5) !important;
}
p,
@ -121,8 +135,8 @@ a:not(.no-line):hover {
}
a:not(.no-line) {
text-decoration: dotted;
text-decoration-color: #fff;
text-decoration: underline;
text-decoration-color: inherit;
text-decoration-line: underline;
text-underline-offset: 0.2rem;
text-decoration-thickness: 0.5px;

4
assets/css/src/variables.css
View file

@ -3,8 +3,8 @@
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
--color-secondary: rgb(120, 171, 150, 0.86);
--color-secondary--light: rgb(119, 177, 157, 0.25);
--color-secondary--x-light: rgb(119, 177, 157, 0.15);
--color-secondary--light: rgb(119, 177, 157, 0.2);
--color-secondary--x-light: rgb(119, 177, 157, 0.1);
--unit--horizontal: 5vw;
--unit--vertical: 1.7rem;

17
assets/front-comments/icons/accept.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="69px" height="69px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1;">
<g transform="matrix(1,0,0,1,-1153.51,-780.928)">
<g id="accept" transform="matrix(1,0,0,1,0,-100.662)">
<g transform="matrix(2.38354,0,0,2.30609,-1649.56,-1364.25)">
<rect x="1176.01" y="973.873" width="28.728" height="29.829" style="fill:rgb(218,255,219);"/>
</g>
<g transform="matrix(-0.430964,0.430964,-0.94321,-0.94321,2508.67,1310.41)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:3.86px;"/>
</g>
<g transform="matrix(-0.268904,-0.268904,0.94321,-0.94321,604.052,2057.06)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:4.08px;"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

14
assets/front-comments/icons/chat-box-empty.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="103px" height="94px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-908.875,-874.606)">
<g id="chat-box" transform="matrix(0.656013,0,0,0.670644,264.055,406.976)">
<g id="chat-box-empty">
<g id="chat-box1" serif:id="chat-box">
<path d="M1017.23,802.993L999.922,819.368L999.922,713.9L1122.27,713.9L1122.27,802.993L1017.23,802.993Z" style="fill:white;"/>
<path d="M1019.7,808.958L993.824,833.432L993.824,707.936L1128.37,707.936L1128.37,808.958L1019.7,808.958ZM1017.23,802.993L1122.27,802.993L1122.27,713.9L999.922,713.9L999.922,819.368L1017.23,802.993Z"/>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
assets/front-comments/icons/chat-box-plus.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="117px" height="117px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
<g transform="matrix(1,0,0,1,-1002.94,-858.534)">
<g id="chat-box-plus">
<g id="chat-box" transform="matrix(0.656013,0,0,0.670644,363.616,406.976)">
<path d="M1017.23,802.993L999.922,819.368L999.922,713.9L1122.27,713.9L1122.27,802.993L1017.23,802.993Z" style="fill:white;"/>
<path d="M1019.7,808.958L993.824,833.432L993.824,707.936L1128.37,707.936L1128.37,808.958L1019.7,808.958ZM1017.23,802.993L1122.27,802.993L1122.27,713.9L999.922,713.9L999.922,819.368L1017.23,802.993Z"/>
</g>
<g id="plus" transform="matrix(1,0,0,1,0,9.96404)">
<g transform="matrix(6.12323e-17,0.529301,-1,3.24103e-17,1967.51,345.056)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:5px;"/>
</g>
<g transform="matrix(-0.529301,-3.59987e-17,1.51287e-16,-1,1622.51,1813.2)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:5px;"/>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
assets/front-comments/icons/chat-box-text-select.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="99px" height="78px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-911.073,-1009.05)">
<g id="chat-box-text-select" transform="matrix(1,0,0,1,-99.561,132.245)">
<g id="chat-box" transform="matrix(0.656013,0,0,0.670644,363.616,406.976)">
<rect x="999.922" y="713.9" width="122.35" height="89.093" style="fill:white;"/>
<path d="M993.824,808.958L993.824,707.936L1128.37,707.936L1128.37,808.958L993.824,808.958ZM1122.27,802.993L1122.27,713.9L999.922,713.9L999.922,802.993L1122.27,802.993Z"/>
</g>
<g transform="matrix(1,0,0,1,102.561,-132.245)">
<path d="M966.593,1032.03L947.778,1032.03L957.563,1032.03L957.563,1063.28L947.781,1063.28L966.575,1063.28" style="fill:none;stroke:black;stroke-width:4px;"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
assets/front-comments/icons/decline.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="69px" height="69px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1;">
<g transform="matrix(1,0,0,1,-1153.51,-881.59)">
<g id="decline">
<g transform="matrix(2.38354,0,0,2.30609,-1649.56,-1364.25)">
<rect x="1176.01" y="973.873" width="28.728" height="29.829" style="fill:rgb(255,200,200);"/>
</g>
<g transform="matrix(-0.5732,0.5732,-1.08294,-1.08294,2777.67,1290.18)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:3.26px;"/>
</g>
<g transform="matrix(-0.5732,-0.5732,1.08294,-1.08294,814.15,2506.47)">
<path d="M1027.23,906.598L1094.61,906.598" style="fill:none;stroke:black;stroke-width:3.26px;"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

14
assets/front-comments/icons/delete.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="69px" height="69px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-1156.78,-953.31)">
<g id="delete" transform="matrix(1.47438,0,0,1.47438,-564.996,-468.55)">
<g transform="matrix(1.61664,0,0,1.56411,-733.384,-558.866)">
<rect x="1176.01" y="973.873" width="28.728" height="29.829" style="fill:white;"/>
</g>
<g id="delete1" serif:id="delete" transform="matrix(1.51836,0,0,1.51836,1172.75,969.558)">
<path d="M17,6L22,6L22,8L20,8L20,21C20,21.552 19.552,22 19,22L5,22C4.448,22 4,21.552 4,21L4,8L2,8L2,6L7,6L7,3C7,2.448 7.448,2 8,2L16,2C16.552,2 17,2.448 17,3L17,6ZM18,8L6,8L6,20L18,20L18,8ZM9,11L11,11L11,17L9,17L9,11ZM13,11L15,11L15,17L13,17L13,11ZM9,4L9,6L15,6L15,4L9,4Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
assets/front-comments/icons/gitlab.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.54429 2.67305C5.81644 2.49995 6.13587 2.41612 6.45799 2.43329C6.78102 2.4505 7.09056 2.56841 7.34318 2.77049L7.34405 2.77119C7.59044 2.96879 7.76998 3.2372 7.85866 3.5399L9.30537 7.96754H14.6944L16.1411 3.5399C16.2298 3.23722 16.4093 2.96879 16.6557 2.77116L16.6604 2.76745C16.9128 2.56777 17.2209 2.45133 17.5424 2.43423C17.8638 2.41712 18.1826 2.50023 18.4547 2.67197L18.4571 2.67347C18.7307 2.84735 18.9427 3.10328 19.0624 3.40486L19.0664 3.41491L21.5393 9.86622C21.9619 10.9712 22.0136 12.1836 21.6865 13.3205C21.3594 14.4574 20.6715 15.457 19.7263 16.1685L12.9955 21.2331L12.9945 21.2338C12.7066 21.4513 12.3554 21.5692 11.9943 21.5692C11.6332 21.5692 11.2819 21.4513 10.9939 21.2337L4.26254 16.1683C3.32063 15.4562 2.63541 14.4574 2.30989 13.3224C1.98437 12.1873 2.03616 10.9772 2.45747 9.8741L4.93724 3.40497C5.0571 3.10297 5.26966 2.84673 5.54429 2.67305ZM6.35534 4.73567L4.16029 10.4639C3.87993 11.2013 3.82298 12.0676 4.04049 12.8261C4.25704 13.5811 4.71123 14.2461 5.33544 14.7225L11.9943 19.7329L18.6484 14.7265C19.2789 14.2502 19.7379 13.5822 19.9563 12.8227C20.1751 12.0624 20.1148 11.1847 19.8328 10.4455L17.6444 4.73558L16.0001 9.76791H7.9996L6.35534 4.73567Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
assets/front-comments/index.css Normal file
View file

@ -0,0 +1 @@
h2[data-v-019dfc9e]{margin-bottom:1rem}.k-table .k-table-index-column[data-v-019dfc9e]{width:6rem}

35
assets/front-comments/index.js Normal file
View file

File diff suppressed because one or more lines are too long

309
assets/front-comments/style.css Normal file
View file

@ -0,0 +1,309 @@
:root {
--fc-border: 2px solid #000;
--fc-border-light: 1px solid #999;
--fc-font-size-m: 1.2rem;
--fc-font-size-s: calc(var(--fc-font-size-m) / 1.3);
}
.fc__btn {
border: none;
background-color: transparent;
padding: 0;
cursor: pointer;
}
.fc__btn:not(.fc__bubble):hover,
.fc__btn-add.fc__btn-add--move {
filter: invert(100%);
}
.fc__icon {
width: 100%;
}
.fc__bubble,
.fc__btn-add {
z-index: 999;
}
.fc__btn-add:focus {
outline: none !important;
}
.fc__edition-panel,
.fc__btn-add,
.fc__bubble {
z-index: 999;
}
.fc__btn-add {
position: fixed;
width: 3rem;
height: 2.5rem;
cursor: pointer;
}
.fc__btn-add--bottom-right {
bottom: 1rem;
right: 1rem;
}
.fc__btn-add--bottom-left {
bottom: 1rem;
left: 1rem;
}
.fc__btn-add--top-left {
top: 1rem;
left: 1rem;
}
.fc__btn-add--top-right {
top: 1rem;
right: 1rem;
}
.fc__btn-add .fc__plus {
width: 3rem;
height: 3rem;
display: inline-block;
transform: translateY(-2px);
}
.fc__btn-add:not(.fc__btn-add--move) {
top: auto !important;
left: auto !important;
}
.fc__btn-add.fc__btn-add--move {
position: absolute;
cursor: none !important;
}
.fc__btn-add--field {
right: 5rem;
}
.fc__edition-panel {
--panel-width: 15rem;
position: absolute;
padding-bottom: 0;
}
.fc__edition-panel--left {
transform: translateX(calc(0rem - var(--panel-width)));
}
.fc__edition-panel--top {
transform: translateY(calc(0rem - 150px));
}
.fc__edition-panel textarea {
position: relative !important;
resize: none !important;
color: #000 !important;
font-family: sans-serif !important;
font-weight: 100 !important;
width: var(--panel-width) !important;
height: 7rem !important;
outline: none !important;
border: var(--fc-border) !important;
padding: 0.5rem !important;
}
.fc__edition-panel textarea:focus {
outline: none !important;
}
.fc__edition-panel__btns {
display: flex;
background-color: #fff;
margin-top: 0.5rem;
}
.fc__edition-panel__btns button {
all: initial;
color: #000;
font-family: sans-serif;
font-weight: 100;
text-align: center;
font-size: 1rem;
width: 100%;
padding: 0.5rem;
border: var(--fc-border) !important;
background-color: #fff;
cursor: pointer;
}
.fc__edition-panel__btns button:first-child {
border-right: none !important;
}
.fc__edition-panel__btns button:hover {
background-color: #eee;
}
.fc__bubble {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 2.9rem;
scroll-margin-top: 6rem;
color: #000;
font-family: sans-serif;
font-size: var(--fc-font-size-m);
font-weight: 500;
background-image: var(--fc-icon-chat-box-empty);
background-size: 3rem 2.5rem;
background-position: 0 4px;
background-repeat: no-repeat;
}
.fc__comment {
position: absolute;
z-index: 999;
width: 20rem;
padding: 1rem;
background-color: #fff;
border: var(--fc-border) !important;
}
.fc__comment * {
color: #000 !important;
font-family: sans-serif !important;
font-weight: 100 !important;
}
.fc__comment p {
margin: 1rem 0 !important;
}
.fc__comment-delete {
position: absolute;
right: 1rem;
top: 1rem;
}
.fc__icon {
width: 1.5rem;
height: 1.5rem;
}
.fc__comment,
.fc__edition-panel {
font-family: sans-serif;
font-size: var(--fc-font-size-m);
font-weight: 100;
}
/* ================= CONTEXT ================= */
#collapsible {
display: none;
}
.fc__label-toggle {
display: block;
font-size: var(--fc-font-size-s);
cursor: pointer;
}
.fc__label-toggle::before {
content: " ";
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: 0.7rem;
transform: translateY(-2px);
transition: transform 0.2s ease-out;
}
.fc__collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height 0.25s ease-in-out;
}
.fc__toggle:checked + .fc__label-toggle + .fc__collapsible-content {
max-height: 100vh;
}
.fc__toggle:checked + .fc__label-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.fc__content-inner {
margin: 0;
margin-top: 1rem;
padding-left: 0;
}
.fc__context-item {
list-style-type: none;
font-size: var(--fc-font-size-s);
line-height: 1.3;
}
.fc__context-item:not(:last-child) {
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px dotted #000;
}
.fc__open-window {
background-color: transparent;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
margin-left: 1rem;
}
.fc__open-window:hover {
background-color: #000;
color: #fff !important;
}
/* ================= END CONTEXT ================= */
.fc__author {
font-weight: 400;
}
.fc__datetime {
font-size: var(--fc-font-size-s);
}
.fc__suggestion {
position: relative;
padding: 0.1rem 0.2rem;
margin: 0 0.2rem;
background-color: inherit;
border: var(--fc-border);
}
.fc__suggestion:hover {
color: #fff;
background-color: #000;
}
.fc__suggestion--edit {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.fc__suggestion-bubble {
position: absolute;
z-index: 999;
width: 20vw;
background-color: #fff;
color: #000;
border: var(--fc-border);
padding: 1rem;
left: -0.1rem;
bottom: -5.5rem;
}
.fc__suggestion-bubble__btns {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
column-gap: 0.5rem;
}

27
assets/js/script.js
View file

@ -3,11 +3,14 @@ const verticalUnit = 1.3 * remFactor;
function toggleTab(data, tab) {
if (data.activeTab === tab) {
scrollToElem("body");
window.scrollTo({
top: 0,
behavior: "smooth",
});
setTimeout(() => {
data.activeTab = "";
data.isOpen = false;
}, 200);
data.activeTab = "";
}, 300);
} else {
data.activeTab = tab;
data.isOpen = true;
@ -28,6 +31,24 @@ function scrollToElem(selector) {
}, 100);
}
function setWindowHeightFactor() {
const windowHeight = window.innerHeight;
const min = 650;
const delta = windowHeight - min;
const factor = roundToNearestHalf(delta / 150);
const head = document.querySelector("head");
const style = document.createElement("style");
style.innerText = `:root { --window-height-factor:${factor} }`;
head.appendChild(style);
}
function roundToNearestHalf(num) {
return Math.round(num * 2) / 2;
}
setWindowHeightFactor();
document.addEventListener("DOMContentLoaded", () => {
function toggleLogoState() {
const scrollY = window.scrollY || window.pageYOffset;