adjust styles
This commit is contained in:
isUnknown
parent
dd217e7a6a
commit
3804d13cb6
34 changed files with 756 additions and 174 deletions
|
|
@ -42,6 +42,19 @@
|
||||||
padding-bottom: calc(5 * var(--unit--vertical));
|
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) {
|
@media screen and (min-width: 640px) {
|
||||||
#main-header {
|
#main-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ html {
|
||||||
|
|
||||||
* {
|
* {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
|
scrollbar-color: transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Works on Chrome, Edge, and Safari */
|
/* Works on Chrome, Edge, and Safari */
|
||||||
|
|
@ -44,7 +44,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb {
|
*::-webkit-scrollbar-thumb {
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: transparent;
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ button.toggle.right.open::before {
|
||||||
margin-top: -25svh;
|
margin-top: -25svh;
|
||||||
margin-bottom: 30svh;
|
margin-bottom: 30svh;
|
||||||
transition: margin-top 0.5s ease-in-out;
|
transition: margin-top 0.5s ease-in-out;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs.open {
|
#tabs.open {
|
||||||
|
|
@ -42,6 +43,30 @@ button.toggle.right.open::before {
|
||||||
margin-top: var(--unit--vertical);
|
margin-top: var(--unit--vertical);
|
||||||
transition: max-height 0.5s ease-in-out;
|
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 {
|
.page-cover.open .active-tab {
|
||||||
height: calc(100svh - 7.5 * var(--unit--vertical));
|
height: calc(100svh - 7.5 * var(--unit--vertical));
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: "Switzer-Variable", sans-serif;
|
font-family: "Switzer-Variable", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -41,13 +46,20 @@ article h2 {
|
||||||
--margin-left: calc(4 * var(--unit--horizontal));
|
--margin-left: calc(4 * var(--unit--horizontal));
|
||||||
width: calc(100% - var(--margin-left));
|
width: calc(100% - var(--margin-left));
|
||||||
margin-left: var(--margin-left);
|
margin-left: var(--margin-left);
|
||||||
|
font-size: var(--font-size-l);
|
||||||
|
line-height: var(--unit--vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-title {
|
.main-title {
|
||||||
line-height: 1;
|
line-height: calc(var(--unit--vertical) * 2);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-weight: var(--font-weight-light);
|
font-weight: var(--font-weight-light);
|
||||||
|
margin-bottom: var(--unit--vertical);
|
||||||
|
}
|
||||||
|
|
||||||
|
.texts__title {
|
||||||
|
font-size: var(--font-size-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
|
|
@ -70,9 +82,11 @@ button,
|
||||||
}
|
}
|
||||||
.fs-xl {
|
.fs-xl {
|
||||||
font-size: var(--font-size-xl) !important;
|
font-size: var(--font-size-xl) !important;
|
||||||
|
line-height: calc(var(--unit--vertical) * 1.5) !important;
|
||||||
}
|
}
|
||||||
.fs-xxl {
|
.fs-xxl {
|
||||||
font-size: var(--font-size-xxl) !important;
|
font-size: var(--font-size-xxl) !important;
|
||||||
|
line-height: calc(var(--unit--vertical) * 2.5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
|
|
@ -121,8 +135,8 @@ a:not(.no-line):hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.no-line) {
|
a:not(.no-line) {
|
||||||
text-decoration: dotted;
|
text-decoration: underline;
|
||||||
text-decoration-color: #fff;
|
text-decoration-color: inherit;
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
text-underline-offset: 0.2rem;
|
text-underline-offset: 0.2rem;
|
||||||
text-decoration-thickness: 0.5px;
|
text-decoration-thickness: 0.5px;
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
--color-primary: #ffffff;
|
--color-primary: #ffffff;
|
||||||
--color-primary--transparent: rgba(255, 255, 255, 0.86);
|
--color-primary--transparent: rgba(255, 255, 255, 0.86);
|
||||||
--color-secondary: rgb(120, 171, 150, 0.86);
|
--color-secondary: rgb(120, 171, 150, 0.86);
|
||||||
--color-secondary--light: rgb(119, 177, 157, 0.25);
|
--color-secondary--light: rgb(119, 177, 157, 0.2);
|
||||||
--color-secondary--x-light: rgb(119, 177, 157, 0.15);
|
--color-secondary--x-light: rgb(119, 177, 157, 0.1);
|
||||||
|
|
||||||
--unit--horizontal: 5vw;
|
--unit--horizontal: 5vw;
|
||||||
--unit--vertical: 1.7rem;
|
--unit--vertical: 1.7rem;
|
||||||
|
|
|
||||||
17
assets/front-comments/icons/accept.svg
Normal file
17
assets/front-comments/icons/accept.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
14
assets/front-comments/icons/chat-box-empty.svg
Normal file
14
assets/front-comments/icons/chat-box-empty.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
20
assets/front-comments/icons/chat-box-plus.svg
Normal file
20
assets/front-comments/icons/chat-box-plus.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
15
assets/front-comments/icons/chat-box-text-select.svg
Normal file
15
assets/front-comments/icons/chat-box-text-select.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
17
assets/front-comments/icons/decline.svg
Normal file
17
assets/front-comments/icons/decline.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
14
assets/front-comments/icons/delete.svg
Normal file
14
assets/front-comments/icons/delete.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
assets/front-comments/icons/gitlab.svg
Normal file
1
assets/front-comments/icons/gitlab.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
assets/front-comments/index.css
Normal file
1
assets/front-comments/index.css
Normal 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
35
assets/front-comments/index.js
Normal file
File diff suppressed because one or more lines are too long
309
assets/front-comments/style.css
Normal file
309
assets/front-comments/style.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -3,11 +3,14 @@ const verticalUnit = 1.3 * remFactor;
|
||||||
|
|
||||||
function toggleTab(data, tab) {
|
function toggleTab(data, tab) {
|
||||||
if (data.activeTab === tab) {
|
if (data.activeTab === tab) {
|
||||||
scrollToElem("body");
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
data.activeTab = "";
|
|
||||||
data.isOpen = false;
|
data.isOpen = false;
|
||||||
}, 200);
|
data.activeTab = "";
|
||||||
|
}, 300);
|
||||||
} else {
|
} else {
|
||||||
data.activeTab = tab;
|
data.activeTab = tab;
|
||||||
data.isOpen = true;
|
data.isOpen = true;
|
||||||
|
|
@ -28,6 +31,24 @@ function scrollToElem(selector) {
|
||||||
}, 100);
|
}, 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", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
function toggleLogoState() {
|
function toggleLogoState() {
|
||||||
const scrollY = window.scrollY || window.pageYOffset;
|
const scrollY = window.scrollY || window.pageYOffset;
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,7 @@
|
||||||
},
|
},
|
||||||
"require": {
|
"require": {
|
||||||
"php": "~8.1.0 || ~8.2.0 || ~8.3.0",
|
"php": "~8.1.0 || ~8.2.0 || ~8.3.0",
|
||||||
"getkirby/cms": "^4.0",
|
"getkirby/cms": "^4.0"
|
||||||
"adrienpayet/front-comments": "^0.8.9"
|
|
||||||
},
|
},
|
||||||
"config": {
|
"config": {
|
||||||
"allow-plugins": {
|
"allow-plugins": {
|
||||||
|
|
|
||||||
31
composer.lock
generated
31
composer.lock
generated
|
|
@ -4,37 +4,8 @@
|
||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "4439e672d6e47d4b53afb46c041a4fd6",
|
"content-hash": "749a661738bcd5b9428c88a1da847bc7",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
|
||||||
"name": "adrienpayet/front-comments",
|
|
||||||
"version": "0.8.9",
|
|
||||||
"source": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://framagit.org/isUnknown/kirby-front-comments",
|
|
||||||
"reference": "cc9b03f63b02c0b461fbdbf419c224a96288abb1"
|
|
||||||
},
|
|
||||||
"require": {
|
|
||||||
"getkirby/composer-installer": "^1.1"
|
|
||||||
},
|
|
||||||
"type": "kirby-plugin",
|
|
||||||
"extra": {
|
|
||||||
"installer-name": "front-comments"
|
|
||||||
},
|
|
||||||
"notification-url": "https://packagist.org/downloads/",
|
|
||||||
"license": [
|
|
||||||
"MIT"
|
|
||||||
],
|
|
||||||
"authors": [
|
|
||||||
{
|
|
||||||
"name": "Adrien Payet",
|
|
||||||
"email": "adrien.payet@outlook.com"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "Kirby plugin for adding comments anywhere in front-end pages.",
|
|
||||||
"homepage": "https://framagit.org/isUnknown/kirby-front-comments",
|
|
||||||
"time": "2024-03-09T14:04:18+00:00"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "christian-riesen/base32",
|
"name": "christian-riesen/base32",
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
title: Blocs
|
title: Grille
|
||||||
image:
|
image:
|
||||||
back: black
|
back: black
|
||||||
icon: bars
|
color: white
|
||||||
|
icon: dashboard
|
||||||
|
create:
|
||||||
|
fields:
|
||||||
|
- category
|
||||||
|
|
||||||
tabs:
|
tabs:
|
||||||
contentTab:
|
contentTab:
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
title: Linéaire
|
title: Linéaire
|
||||||
image:
|
image:
|
||||||
back: black
|
back: black
|
||||||
|
color: white
|
||||||
icon: bars
|
icon: bars
|
||||||
create:
|
create:
|
||||||
fields:
|
fields:
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ title: Année
|
||||||
image:
|
image:
|
||||||
icon: calendar
|
icon: calendar
|
||||||
back: black
|
back: black
|
||||||
|
color: white
|
||||||
|
|
||||||
columns:
|
columns:
|
||||||
- width: 1/3
|
- width: 1/3
|
||||||
|
|
@ -11,7 +12,7 @@ columns:
|
||||||
type: pages
|
type: pages
|
||||||
templates:
|
templates:
|
||||||
- linear
|
- linear
|
||||||
- blocks
|
- grid
|
||||||
- width: 2/3
|
- width: 2/3
|
||||||
fields:
|
fields:
|
||||||
edito:
|
edito:
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@ sections:
|
||||||
label: Catégorie
|
label: Catégorie
|
||||||
type: select
|
type: select
|
||||||
options: query
|
options: query
|
||||||
query: site.categories.split
|
query: site.find('texts').categories.split
|
||||||
|
required: true
|
||||||
width: 1/3
|
width: 1/3
|
||||||
author:
|
author:
|
||||||
label: Auteur
|
label: Auteur
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,12 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
use Kirby\Uuid\Uuid;
|
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'debug' => true,
|
'debug' => true,
|
||||||
'panel' => [
|
'panel' => [
|
||||||
'menu' => [
|
'menu' => require __DIR__ . '/menu.php',
|
||||||
'site' => [
|
|
||||||
'label' => 'Accueil',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'site');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'texts' => [
|
|
||||||
'icon' => 'pen',
|
|
||||||
'label' => 'Textes',
|
|
||||||
'link' => 'pages/texts',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/texts');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'-',
|
|
||||||
'-',
|
|
||||||
'infos' => [
|
|
||||||
'icon' => 'question',
|
|
||||||
'label' => 'À propos',
|
|
||||||
'link' => 'pages/a-propos',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/a-propos');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'newsletter' => [
|
|
||||||
'icon' => 'email',
|
|
||||||
'label' => 'Infolettre',
|
|
||||||
'link' => 'pages/lettre',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/lettre');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'-',
|
|
||||||
'-',
|
|
||||||
'users',
|
|
||||||
'comments',
|
|
||||||
'admin' => [
|
|
||||||
'icon' => 'folder',
|
|
||||||
'label' => 'Administration',
|
|
||||||
'link' => 'pages/admin',
|
|
||||||
'current' => function ($current) {
|
|
||||||
$path = Kirby::instance()->request()->path()->toString();
|
|
||||||
return Str::contains($path, 'pages/admin');
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'-',
|
|
||||||
'-',
|
|
||||||
'system',
|
|
||||||
]
|
|
||||||
],
|
],
|
||||||
'routes' => [
|
'routes' => [
|
||||||
[
|
require __DIR__ . '/routes/virtual-author.php',
|
||||||
'pattern' => 'auteurs/(:any)',
|
require __DIR__ . '/routes/virtual-category.php',
|
||||||
'action' => function ($slug) {
|
|
||||||
$kirby = kirby();
|
|
||||||
$author = getAuthorBySlug($slug);
|
|
||||||
|
|
||||||
return Page::factory([
|
|
||||||
'slug' => '',
|
|
||||||
'template' => 'author',
|
|
||||||
'model' => 'authors',
|
|
||||||
'content' => [
|
|
||||||
'title' => $author->name(),
|
|
||||||
'presentation' => $author->presentation(),
|
|
||||||
'author' => $author->name(),
|
|
||||||
'uuid' => Uuid::generate(),
|
|
||||||
]
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
|
|
||||||
56
site/config/menu.php
Normal file
56
site/config/menu.php
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
return [
|
||||||
|
'site' => [
|
||||||
|
'label' => 'Accueil',
|
||||||
|
'current' => function ($current) {
|
||||||
|
$path = Kirby::instance()->request()->path()->toString();
|
||||||
|
return Str::contains($path, 'site');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'texts' => [
|
||||||
|
'icon' => 'pen',
|
||||||
|
'label' => 'Textes',
|
||||||
|
'link' => 'pages/texts',
|
||||||
|
'current' => function ($current) {
|
||||||
|
$path = Kirby::instance()->request()->path()->toString();
|
||||||
|
return Str::contains($path, 'pages/texts');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'-',
|
||||||
|
'-',
|
||||||
|
'infos' => [
|
||||||
|
'icon' => 'question',
|
||||||
|
'label' => 'À propos',
|
||||||
|
'link' => 'pages/a-propos',
|
||||||
|
'current' => function ($current) {
|
||||||
|
$path = Kirby::instance()->request()->path()->toString();
|
||||||
|
return Str::contains($path, 'pages/a-propos');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'newsletter' => [
|
||||||
|
'icon' => 'email',
|
||||||
|
'label' => 'Infolettre',
|
||||||
|
'link' => 'pages/lettre',
|
||||||
|
'current' => function ($current) {
|
||||||
|
$path = Kirby::instance()->request()->path()->toString();
|
||||||
|
return Str::contains($path, 'pages/lettre');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'-',
|
||||||
|
'-',
|
||||||
|
'users',
|
||||||
|
'comments',
|
||||||
|
'admin' => [
|
||||||
|
'icon' => 'folder',
|
||||||
|
'label' => 'Administration',
|
||||||
|
'link' => 'pages/admin',
|
||||||
|
'current' => function ($current) {
|
||||||
|
$path = Kirby::instance()->request()->path()->toString();
|
||||||
|
return Str::contains($path, 'pages/admin');
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'-',
|
||||||
|
'-',
|
||||||
|
'system',
|
||||||
|
];
|
||||||
25
site/config/routes/virtual-author.php
Normal file
25
site/config/routes/virtual-author.php
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Kirby\Uuid\Uuid;
|
||||||
|
|
||||||
|
return [
|
||||||
|
'pattern' => 'auteurs/(:any)',
|
||||||
|
'action' => function ($slug) {
|
||||||
|
$kirby = kirby();
|
||||||
|
$author = getAuthorBySlug($slug);
|
||||||
|
|
||||||
|
return Page::factory(
|
||||||
|
[
|
||||||
|
'slug' => '',
|
||||||
|
'template' => 'author',
|
||||||
|
'model' => 'authors',
|
||||||
|
'content' => [
|
||||||
|
'title' => $author->name(),
|
||||||
|
'presentation' => $author->presentation(),
|
||||||
|
'author' => $author->name(),
|
||||||
|
'uuid' => Uuid::generate(),
|
||||||
|
]
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
];
|
||||||
22
site/config/routes/virtual-category.php
Normal file
22
site/config/routes/virtual-category.php
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Kirby\Uuid\Uuid;
|
||||||
|
|
||||||
|
return [
|
||||||
|
'pattern' => 'categories/(:any)',
|
||||||
|
'action' => function ($category) {
|
||||||
|
$kirby = kirby();
|
||||||
|
|
||||||
|
return Page::factory(
|
||||||
|
[
|
||||||
|
'slug' => '',
|
||||||
|
'template' => 'category',
|
||||||
|
'model' => 'categories',
|
||||||
|
'content' => [
|
||||||
|
'title' => $category,
|
||||||
|
'uuid' => Uuid::generate(),
|
||||||
|
]
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Subproject commit cc9b03f63b02c0b461fbdbf419c224a96288abb1
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
|
<title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
|
||||||
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css?version-cache-prevent<?= rand(0, 1000)?>" />
|
<link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
|
||||||
<script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
|
<script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
<meta name="robots" content="noindex">
|
<meta name="robots" content="noindex">
|
||||||
|
|
@ -13,8 +13,8 @@
|
||||||
<header id="main-header">
|
<header id="main-header">
|
||||||
<div id="logo" >
|
<div id="logo" >
|
||||||
<a href="/" class="no-line">
|
<a href="/" class="no-line">
|
||||||
<h2 id="actuel">actuel</h2>
|
<h1 id="actuel">actuel</h1>
|
||||||
<h2 id="inactuel">inactuel</h2>
|
<h1 id="inactuel">inactuel</h1>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
<?php
|
<?php
|
||||||
$left['slug'] = Str::slug($left['label']);
|
$left = $left ?? false;
|
||||||
|
|
||||||
|
if ($left) {
|
||||||
|
$left['slug'] = Str::slug($left['label']);
|
||||||
|
}
|
||||||
$authorFilter = isset($authorFilter) ? $authorFilter : false;
|
$authorFilter = isset($authorFilter) ? $authorFilter : false;
|
||||||
$activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
$activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
||||||
?>
|
?>
|
||||||
|
|
@ -11,11 +15,13 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
||||||
<div class="toggle-btns | flex space-between" style="
|
<div class="toggle-btns | flex space-between" style="
|
||||||
--content:space-between;
|
--content:space-between;
|
||||||
">
|
">
|
||||||
|
<?php if ($left): ?>
|
||||||
<button
|
<button
|
||||||
class="toggle left"
|
class="toggle left"
|
||||||
:class="activeTab === '<?=$left['slug'] ?>' ? 'open' : 'close'"
|
:class="activeTab === '<?=$left['slug'] ?>' ? 'open' : 'close'"
|
||||||
@click="toggleTab($data, '<?=$left['slug'] ?>')"
|
@click="toggleTab($data, '<?=$left['slug'] ?>')"
|
||||||
><?= $left['label'] ?></button>
|
><?= $left['label'] ?></button>
|
||||||
|
<?php endif ?>
|
||||||
<button
|
<button
|
||||||
class="toggle right"
|
class="toggle right"
|
||||||
:class="activeTab === 'texts' ? 'open' : 'close'"
|
:class="activeTab === 'texts' ? 'open' : 'close'"
|
||||||
|
|
@ -26,10 +32,12 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
||||||
<div
|
<div
|
||||||
class="active-tab"
|
class="active-tab"
|
||||||
>
|
>
|
||||||
|
<?php if ($left): ?>
|
||||||
<section
|
<section
|
||||||
x-show="activeTab === '<?=$left['slug'] ?>'">
|
x-show="activeTab === '<?=$left['slug'] ?>'">
|
||||||
<?= $left['content'] ?>
|
<?= $left['content'] ?>
|
||||||
</section>
|
</section>
|
||||||
|
<?php endif ?>
|
||||||
<ul
|
<ul
|
||||||
x-show="activeTab === 'texts'">
|
x-show="activeTab === 'texts'">
|
||||||
<?php foreach($kirby->collection('years') as $year): ?>
|
<?php foreach($kirby->collection('years') as $year): ?>
|
||||||
|
|
@ -56,25 +64,13 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
|
||||||
class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
|
class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
|
||||||
</div>
|
</div>
|
||||||
<?php foreach($year->children() as $article): ?>
|
<?php foreach($year->children() as $article): ?>
|
||||||
<?php if (!$authorFilter || $authorFilter === $article->author()->toUser()->name()->value()) : ?>
|
<?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
|
||||||
<li class="texts | bottom" style="--bottom:3">
|
<?php snippet(
|
||||||
<a href="<?= $article->url() ?>" class="texts__title no-line">
|
'text-item',
|
||||||
<h3><?= $article->title() ?></h3>
|
[
|
||||||
</a>
|
'article' => $article
|
||||||
<div class="texts__infos">
|
]
|
||||||
<p>
|
) ?>
|
||||||
<?php if (!$authorFilter): ?>
|
|
||||||
<span class="opacity" style="--opacity:.5">par</span>
|
|
||||||
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a>,
|
|
||||||
<span class="opacity" style="--opacity:.5">le</span>
|
|
||||||
<?php endif ?>
|
|
||||||
<?= $article->published()->toDate('d/m/Y') ?>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="texts__labels">
|
|
||||||
<button class="label label--category">[ <?= $article->category() ?> ]</button>
|
|
||||||
</div> -->
|
|
||||||
</li>
|
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
<?php endforeach ?>
|
<?php endforeach ?>
|
||||||
<?php endforeach ?>
|
<?php endforeach ?>
|
||||||
|
|
|
||||||
13
site/snippets/text-item.php
Normal file
13
site/snippets/text-item.php
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<li class="texts | bottom" style="--bottom:3">
|
||||||
|
<a href="<?= $article->url() ?>" class="texts__title no-line">
|
||||||
|
<h3><?= $article->title() ?></h3>
|
||||||
|
</a>
|
||||||
|
<div class="texts__infos">
|
||||||
|
<p>
|
||||||
|
<span class="opacity" style="--opacity:.5">par</span>
|
||||||
|
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
|
||||||
|
<span class="opacity" style="--opacity:.6">publié le </span><?= $article->published()->toDate('d/m/Y') ?>
|
||||||
|
<span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<article>
|
<article>
|
||||||
<?php snippet('cover', slots: true) ?>
|
<?php snippet('cover', slots: true) ?>
|
||||||
<?php slot('title') ?>
|
<?php slot('title') ?>
|
||||||
<h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
|
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
|
||||||
<?php endslot() ?>
|
<?php endslot() ?>
|
||||||
<?php slot('tabs') ?>
|
<?php slot('tabs') ?>
|
||||||
<?php snippet('tabs', [
|
<?php snippet('tabs', [
|
||||||
|
|
|
||||||
49
site/templates/category.php
Normal file
49
site/templates/category.php
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<?php snippet('header'); ?>
|
||||||
|
|
||||||
|
<main id="<?= $page->template() ?>">
|
||||||
|
<article>
|
||||||
|
<?php snippet('cover', slots: true) ?>
|
||||||
|
<?php slot('title') ?>
|
||||||
|
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
|
||||||
|
<p class="opacity" style="--opacity:.6">catégorie</p>
|
||||||
|
<?php endslot() ?>
|
||||||
|
<?php endsnippet() ?>
|
||||||
|
<div
|
||||||
|
class="active-tab"
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<?php foreach($kirby->collection('years') as $year): ?>
|
||||||
|
<?php if ($year) : ?>
|
||||||
|
<?php endif ?>
|
||||||
|
<div
|
||||||
|
x-data='{
|
||||||
|
isOpen: false
|
||||||
|
}'
|
||||||
|
:class="isOpen ? '' : 'short'"
|
||||||
|
class="
|
||||||
|
texts__year
|
||||||
|
| full-width
|
||||||
|
flex column
|
||||||
|
bottom"
|
||||||
|
style="
|
||||||
|
--content: center;
|
||||||
|
--bottom: 2;"
|
||||||
|
>
|
||||||
|
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
|
||||||
|
<div class="year__edito">
|
||||||
|
<?= $year->edito() ?>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
:class="isOpen ? 'open' : 'close'"
|
||||||
|
class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
|
||||||
|
</div>
|
||||||
|
<?php foreach($year->children() as $article): ?>
|
||||||
|
<?php if ($article->category() == $page->title()) : ?>
|
||||||
|
<?php snippet('text-item', ['article' => $article]) ?>
|
||||||
|
<?php endif ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
@ -3,10 +3,10 @@
|
||||||
<main id="<?= $page->template() ?>">
|
<main id="<?= $page->template() ?>">
|
||||||
<?php snippet('cover', slots: true) ?>
|
<?php snippet('cover', slots: true) ?>
|
||||||
<?php slot('title') ?>
|
<?php slot('title') ?>
|
||||||
<h3 class="title-center">
|
<h2 class="title-center">
|
||||||
revue critique<br>
|
critique des arts<br>
|
||||||
des arts et des techniques<br>
|
et des techniques<br>
|
||||||
</h3>
|
</h2>
|
||||||
<?php endslot() ?>
|
<?php endslot() ?>
|
||||||
|
|
||||||
<?php slot('tabs') ?>
|
<?php slot('tabs') ?>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<article>
|
<article>
|
||||||
<?php snippet('cover', ['isOpen' => true], slots: true) ?>
|
<?php snippet('cover', ['isOpen' => true], slots: true) ?>
|
||||||
<?php slot('title') ?>
|
<?php slot('title') ?>
|
||||||
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
|
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
|
||||||
<p>
|
<p>
|
||||||
<span class="opacity" style="--opacity:.6">par </span>
|
<span class="opacity" style="--opacity:.6">par </span>
|
||||||
<a
|
<a
|
||||||
|
|
@ -13,7 +13,8 @@
|
||||||
>
|
>
|
||||||
<?= $page->author()->toUser()->name() ?>
|
<?= $page->author()->toUser()->name() ?>
|
||||||
</a><br>
|
</a><br>
|
||||||
<span class="opacity" style="--opacity:.6">le <?= $page->published()->toDate('d/m/Y') ?></span>
|
<span class="opacity" style="--opacity:.6">publié le </span><?= $page->published()->toDate('d/m/Y') ?>
|
||||||
|
<span class="opacity" style="--opacity: .6">dans</span> <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
|
||||||
</p>
|
</p>
|
||||||
<?php endslot() ?>
|
<?php endslot() ?>
|
||||||
<?php slot('tabs') ?>
|
<?php slot('tabs') ?>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue