Compare commits
No commits in common. "9401e3f11052d9d7d587ace4441e9916a6c58770" and "cd89f0d49ddcbc7bebcd73d92396559924bb32c4" have entirely different histories.
9401e3f110
...
cd89f0d49d
|
|
@ -1,9 +1,13 @@
|
|||
kind: pipeline
|
||||
type: docker
|
||||
name: default
|
||||
# Cette image va par défault clone le repo (pas besoin de clone manuellement)
|
||||
|
||||
steps:
|
||||
- name: Clonage du Repo
|
||||
image: alpine/git
|
||||
commands:
|
||||
- ls
|
||||
- pwd
|
||||
- name: Installation du package
|
||||
image: node
|
||||
commands:
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -11,5 +11,3 @@ init_script.sh
|
|||
.env
|
||||
.env_dev
|
||||
.env_prod
|
||||
.env_test
|
||||
.env_test
|
||||
300
css/app.css
300
css/app.css
|
|
@ -95,23 +95,11 @@
|
|||
.wp-admin.post-type-portfolio .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.wp-admin.post-type-portfolio .chapter-section)) {
|
||||
}
|
||||
|
||||
.wp-block-post-title {
|
||||
text-transform: unset;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wp-block-post-title:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.wp-admin.post-type-portfolio .is-root-container,
|
||||
.portfolio-single{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 7rem;
|
||||
/* & + *:not(.simple-screen) {
|
||||
@apply xl:mt-32;
|
||||
} */
|
||||
}
|
||||
|
||||
.wp-admin.post-type-portfolio .is-root-container h1,
|
||||
|
|
@ -139,8 +127,8 @@
|
|||
.portfolio-single p,
|
||||
.portfolio-single span {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
|
|
@ -163,200 +151,16 @@
|
|||
|
||||
.wp-admin.post-type-portfolio .is-root-container h2, .portfolio-single h2{
|
||||
padding-bottom: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-weight: 700 !important;
|
||||
font-size: 2.5rem;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chapter-section + .peertube-integration{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.portfolio-archive{
|
||||
padding-top: 8rem !important;
|
||||
}
|
||||
|
||||
/* @apply bigCaslon; */
|
||||
|
||||
.portfolio-archive h1:before, .portfolio-archive h2:before, .portfolio-archive h3:before, .portfolio-archive h4:before, .portfolio-archive h5:before, .portfolio-archive h6:before, .old-projects h1:before, .old-projects h2:before, .old-projects h3:before, .old-projects h4:before, .old-projects h5:before, .old-projects h6:before{
|
||||
--tw-content: none;
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.portfolio-archive p,
|
||||
.portfolio-archive span,
|
||||
.old-projects p,
|
||||
.old-projects span {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.portfolio-archive strong, .old-projects strong{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.portfolio-project-card{
|
||||
.project-card{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
padding-top: 8rem;
|
||||
max-width: 1800px;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.portfolio-project-card__cover{
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
|
||||
/* &:hover {
|
||||
img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.portfolio-project-card__cover img{
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
mix-blend-mode: multiply;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.portfolio-project-card--active .portfolio-project-card__cover:hover img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.portfolio-project-card__details{
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.portfolio-project-card__details{
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio-project-card__details .client-name{
|
||||
padding-top: 1rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
font-weight: 400;
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.portfolio-project-card__details .excerpt{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.portfolio-project-card__details .excerpt h3{
|
||||
font-size: 1.25rem;
|
||||
/* @apply bigCaslon text-4xl; */
|
||||
/* @apply bigCaslon text-4xl; */
|
||||
}
|
||||
|
||||
.portfolio-project-card__details .excerpt p{
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.portfolio-project-card__details .terms{
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0px;
|
||||
display: block;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project:hover{
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project {
|
||||
box-sizing: content-box;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* background-color: #34113F; */
|
||||
|
||||
/* background-color: #0033DA; */
|
||||
|
||||
.portfolio-project-card .cta--read-project span{
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.4s ease-in-out;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project img{
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
--tw-translate-x: -2rem;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
opacity: 0;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project:hover{
|
||||
/* background-color: #0033DA; */
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(233 25 105 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project:hover span{
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.portfolio-project-card .cta--read-project:hover img{
|
||||
--tw-translate-x: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
opacity: 1;
|
||||
transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
/* $couleur = array(
|
||||
'web' => '#1CC7C7',
|
||||
'print' => '#C14FE3',
|
||||
'motiondesign' => '#21D5F5',
|
||||
'video' => '#21D5F5',
|
||||
); */
|
||||
|
||||
.portfolio-header{
|
||||
position: relative;
|
||||
width: 100vw !important;
|
||||
|
|
@ -372,6 +176,8 @@
|
|||
inset: 0px;
|
||||
height: 100% !important;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
|
|
@ -396,6 +202,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
|
@ -407,7 +215,6 @@
|
|||
}
|
||||
|
||||
.portfolio-header .client-logo{
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 3rem;
|
||||
|
|
@ -430,6 +237,8 @@
|
|||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.gallery-website-screens{
|
||||
|
|
@ -480,15 +289,6 @@
|
|||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.gallery-website-screens ul.is-mobile-capture{
|
||||
gap: 6rem;
|
||||
}
|
||||
|
||||
.gallery-website-screens ul.is-mobile-capture img{
|
||||
max-width: 15rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.gallery-website-screens ul{
|
||||
max-width: 1800px;
|
||||
}
|
||||
|
|
@ -499,8 +299,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px){
|
||||
|
|
@ -524,9 +322,11 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* & + *:not(.simple-screen) {
|
||||
@apply xl:mt-32;
|
||||
} */
|
||||
@media (min-width: 1280px){
|
||||
.chapter-section + *:not(.simple-screen){
|
||||
margin-top: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-section--right{
|
||||
flex-direction: row-reverse;
|
||||
|
|
@ -534,18 +334,19 @@
|
|||
|
||||
.chapter-section__content {
|
||||
flex-shrink: 0;
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.chapter-section__content p{
|
||||
max-width: 24rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(82 82 82 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
/* @apply max-w-xl; */
|
||||
.chapter-section__innerblocks{
|
||||
max-width: 36rem;
|
||||
}
|
||||
|
||||
.chapter-section__innerblocks p {
|
||||
.chapter-section__innerblocks p{
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.chapter-section__cover{
|
||||
|
|
@ -595,69 +396,12 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.simple-screen--large{
|
||||
padding: 6rem;
|
||||
}
|
||||
|
||||
.simple-screen--large img{
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
.simple-screen--white{
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.peertube-integration{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 782px){
|
||||
.peertube-integration{
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
.peertube-integration{
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-integration iframe{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 960px){
|
||||
.peertube-integration iframe{
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
.peertube-integration iframe{
|
||||
max-width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-integration iframe {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.case-button{
|
||||
margin-top: 1.5rem;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" width="53.1" height="29.1" viewBox="0 0 53.1 29.1">
|
||||
<g id="Calque_1-2" data-name="Calque 1">
|
||||
<path d="M53.1,13.1c-.2,0-15.4-4.9-15.9-13.1l-3,.2c.3,6,6.1,10.3,11.1,12.9H0v3h45.3c-4.9,2.6-10.7,6.9-11.1,12.9l3,.2c.5-8.2,15.7-13,15.9-13.1l-.4-1.4.4-1.4Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 386 B |
|
|
@ -26,15 +26,14 @@ function cpt_customer()
|
|||
register_post_type(
|
||||
'portfolio',
|
||||
array(
|
||||
'label' => __('Projets'),
|
||||
'singular_label' => __('Projets'),
|
||||
'label' => __('Portfolio'),
|
||||
'singular_label' => __('Portfolio'),
|
||||
'public' => true,
|
||||
'menu_icon' => 'dashicons-forms',
|
||||
'show_ui' => true,
|
||||
'hierarchical' => false,
|
||||
'supports' => array('title', 'thumbnail', 'editor', 'excerpt', 'custom-fields', 'revisions', 'page-attributes'),
|
||||
'show_in_rest' => true, // Active l'éditeur de blocs (Gutenberg).
|
||||
'rewrite' => array('slug' => 'projets'),
|
||||
|
||||
)
|
||||
);
|
||||
|
|
@ -44,42 +43,3 @@ add_action('init', 'cpt_customer');
|
|||
function my_custom_post_type() {}
|
||||
|
||||
add_action('init', 'my_custom_post_type');
|
||||
|
||||
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------------
|
||||
DÉCLARATION DES COLONNES CUSTOM DANS LA LISTE DES POSTS ARTISANS
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
// **** AJOUT DES COLONNES
|
||||
function deligraph_projets_add_acf_posts_columns($columns)
|
||||
{
|
||||
global $current_screen;
|
||||
|
||||
|
||||
$customColumns = array(
|
||||
'client' => 'Client',
|
||||
);
|
||||
$new_admin_col_arrays = array_slice($columns, 0, 2, true) + $customColumns + array_slice($columns, 2, count($columns) - 2, true);
|
||||
return array_merge($new_admin_col_arrays);
|
||||
}
|
||||
add_filter('manage_portfolio_posts_columns', 'deligraph_projets_add_acf_posts_columns');
|
||||
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------------
|
||||
GESTION DE LA VALEUR DE CHAQUE COLONNE
|
||||
------------------------------------------------------------------------*/
|
||||
function deligraph_projets_handle_posts_custom_columns($column)
|
||||
{
|
||||
|
||||
$post_id = get_the_ID();
|
||||
|
||||
if ($column == 'client') {
|
||||
$client = get_field('client_name', $post_id);
|
||||
if (!$client) return;
|
||||
echo $client;
|
||||
}
|
||||
}
|
||||
add_action('manage_portfolio_posts_custom_column', 'deligraph_projets_handle_posts_custom_columns', 10, 2);
|
||||
|
|
|
|||
|
|
@ -5,14 +5,13 @@
|
|||
@import "./base/font.css";
|
||||
@import "./editor/editor.css";
|
||||
|
||||
@import "./pages/single-portfolio.css";
|
||||
@import "./pages/archive-portfolio.css";
|
||||
@import "./portfolio/single-portfolio.css";
|
||||
@import "./pages/portfolio.css";
|
||||
|
||||
@import "./blocks/portfolio-header.css";
|
||||
@import "./blocks/gallery-website-screens.css";
|
||||
@import "./blocks/chapter-section.css";
|
||||
@import "./blocks/simple-screen.css";
|
||||
@import "./blocks/peertube-integration.css";
|
||||
|
||||
.case-button {
|
||||
@apply w-fit bg-red-500 px-6 py-2 rounded-full text-white block mt-6;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
.chapter-section {
|
||||
@apply flex items-center justify-center 2xl:gap-12 !my-0 px-12;
|
||||
@apply flex items-center justify-center 2xl:gap-12 !my-0;
|
||||
/* min-height: 80vh; */
|
||||
@apply xl:pt-32;
|
||||
|
||||
@apply mx-auto;
|
||||
|
||||
/* & + *:not(.simple-screen) {
|
||||
& + *:not(.simple-screen) {
|
||||
@apply xl:mt-32;
|
||||
} */
|
||||
}
|
||||
&--right {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
&__content {
|
||||
flex-shrink: 0;
|
||||
@apply max-w-lg;
|
||||
p {
|
||||
@apply text-neutral-600 max-w-sm;
|
||||
@apply text-neutral-600;
|
||||
}
|
||||
}
|
||||
&__innerblocks {
|
||||
/* @apply max-w-xl; */
|
||||
@apply max-w-xl;
|
||||
p {
|
||||
@apply max-w-md;
|
||||
}
|
||||
}
|
||||
&__cover {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,6 @@
|
|||
&.is-flex {
|
||||
@apply flex flex-nowrap;
|
||||
}
|
||||
&.is-mobile-capture {
|
||||
@apply gap-24;
|
||||
img {
|
||||
@apply rounded-3xl max-w-60;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 1800px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
.peertube-integration {
|
||||
@apply w-full flex px-8 md:px-12 xl:px-24 py-12 bg-neutral-100;
|
||||
|
||||
iframe {
|
||||
@apply mx-auto;
|
||||
|
||||
@apply lg:max-w-[80vw] xl:max-w-[60vw];
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
dispay: block;
|
||||
|
||||
&__cover {
|
||||
@apply absolute inset-0 w-full !h-full object-cover;
|
||||
@apply absolute inset-0 bg-red-400 w-full !h-full object-cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
&__heading-infos {
|
||||
@apply flex items-center justify-between;
|
||||
@apply flex items-center justify-between text-white;
|
||||
@apply text-xs;
|
||||
.project-type {
|
||||
@apply my-0 leading-relaxed;
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
}
|
||||
|
||||
.client-logo {
|
||||
@apply w-72 h-auto object-contain object-center mx-auto block my-12 relative;
|
||||
@apply w-72 h-auto object-contain object-center mx-auto block my-12;
|
||||
}
|
||||
|
||||
&__innerblocks {
|
||||
@apply mx-auto max-w-lg p-8 rounded-lg text-center text-sm;
|
||||
@apply mx-auto max-w-lg text-white p-8 rounded-lg text-center text-sm;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,8 @@
|
|||
}
|
||||
}
|
||||
&--large {
|
||||
@apply p-24;
|
||||
img {
|
||||
@apply w-full max-w-screen-2xl h-auto;
|
||||
}
|
||||
}
|
||||
&--white {
|
||||
@apply py-0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,4 @@
|
|||
@apply alignfull px-32;
|
||||
}
|
||||
}
|
||||
.wp-block-post-title {
|
||||
text-transform: unset;
|
||||
@apply leading-none;
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,123 +0,0 @@
|
|||
.portfolio-archive {
|
||||
@apply !pt-32;
|
||||
}
|
||||
.portfolio-archive,
|
||||
.old-projects {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
/* @apply bigCaslon; */
|
||||
&:before {
|
||||
@apply content-none;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
@apply text-sm leading-relaxed;
|
||||
}
|
||||
strong {
|
||||
@apply font-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio-project-card {
|
||||
@apply mx-auto px-12 pt-32;
|
||||
max-width: 1800px;
|
||||
|
||||
&__cover {
|
||||
@apply bg-neutral-100 block overflow-hidden;
|
||||
img {
|
||||
@apply mix-blend-multiply object-cover object-center w-full;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
/* &:hover {
|
||||
img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
} */
|
||||
}
|
||||
&--active {
|
||||
.portfolio-project-card__cover:hover {
|
||||
img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__details {
|
||||
@apply grid md:grid-cols-2;
|
||||
|
||||
.client-name {
|
||||
@apply pt-4 text-lg font-normal underline underline-offset-4;
|
||||
}
|
||||
.excerpt {
|
||||
@apply pt-4;
|
||||
h3 {
|
||||
@apply text-xl;
|
||||
/* @apply bigCaslon text-4xl; */
|
||||
/* @apply bigCaslon text-4xl; */
|
||||
}
|
||||
p {
|
||||
@apply text-sm text-neutral-500 pb-0 mb-0;
|
||||
}
|
||||
}
|
||||
.terms {
|
||||
@apply flex gap-2;
|
||||
}
|
||||
}
|
||||
.cta--read-project {
|
||||
@apply text-sm block text-white mt-6 mb-0 w-fit ;
|
||||
@apply py-3 px-5 hover:px-6 relative rounded-full bg-neutral-900 flex items-center justify-center;
|
||||
box-sizing: content-box;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
/* background-color: #34113F; */
|
||||
/* background-color: #0033DA; */
|
||||
|
||||
|
||||
span{
|
||||
@apply text-xs font-medium;
|
||||
text-decoration: none;
|
||||
transition: all 0.4s ease-in-out;
|
||||
@apply mr-0;
|
||||
}
|
||||
|
||||
img {
|
||||
@apply w-6 h-6 opacity-0 absolute right-6 -translate-x-8;
|
||||
filter: invert(1);
|
||||
}
|
||||
&:hover{
|
||||
/* background-color: #0033DA; */
|
||||
@apply bg-deli-pink;
|
||||
|
||||
span{
|
||||
@apply mr-8;
|
||||
}
|
||||
img{
|
||||
@apply opacity-100 translate-x-0;
|
||||
transition: opacity .6s ease-in-out, translate 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* $couleur = array(
|
||||
'web' => '#1CC7C7',
|
||||
'print' => '#C14FE3',
|
||||
'motiondesign' => '#21D5F5',
|
||||
'video' => '#21D5F5',
|
||||
); */
|
||||
5
resources/css/pages/portfolio.css
Normal file
5
resources/css/pages/portfolio.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.project-card {
|
||||
@apply max-w-screen-2xl mx-auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
p,
|
||||
span {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
@apply text-xs leading-relaxed;
|
||||
@apply text-sm leading-relaxed;
|
||||
}
|
||||
strong {
|
||||
@apply font-semibold;
|
||||
|
|
@ -29,14 +29,6 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
@apply text-4xl pb-6 !font-bold;
|
||||
font-size: 2.5rem;
|
||||
@apply text-5xl pb-6;
|
||||
}
|
||||
/* & + *:not(.simple-screen) {
|
||||
@apply xl:mt-32;
|
||||
} */
|
||||
}
|
||||
|
||||
.chapter-section + .peertube-integration {
|
||||
@apply mt-8;
|
||||
}
|
||||
|
|
@ -5,9 +5,30 @@ Template Name: Portfolio
|
|||
get_header();
|
||||
|
||||
$currentPageId = get_the_ID();
|
||||
?>
|
||||
|
||||
<section class="portfolio-archive projects-overview">
|
||||
|
||||
?>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 accroche">
|
||||
<h1><?php echo get_field('nom_de_la_page'); ?></h1>
|
||||
</div>
|
||||
<div class="offset-lg-8 col-lg-1">
|
||||
<div class="circleTop"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="button-group">
|
||||
<button class="tout is-checked" data-target="*">tout</button>
|
||||
<button class="web" data-target=".web">web</button>
|
||||
<button class="print" data-target=".print">print</button>
|
||||
<button class="video" data-target=".video">vidéo</button>
|
||||
<button class="motiondesign" data-target=".motiondesign">motion design</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="projects-overview">
|
||||
|
||||
<?php
|
||||
$args = array(
|
||||
|
|
@ -20,85 +41,178 @@ $currentPageId = get_the_ID();
|
|||
<?php
|
||||
$projectThumbnailUrl = get_the_post_thumbnail_url($portfolio_post->ID, 'full');
|
||||
$projectPermLink = get_the_permalink($portfolio_post->ID);
|
||||
$excerpt = get_the_excerpt();
|
||||
$clientName = get_field('client_name', $portfolio_post->ID);
|
||||
$terms = get_the_terms($portfolio_post->ID, 'project_type');
|
||||
|
||||
?>
|
||||
<div class="portfolio-project-card portfolio-project-card--active">
|
||||
<a class="portfolio-project-card__cover" href="<?php echo $projectPermLink ?>">
|
||||
<div class="project-card">
|
||||
<a href="<?php echo $projectPermLink ?>">
|
||||
<img src="<?php echo $projectThumbnailUrl ?>" alt="">
|
||||
|
||||
</a>
|
||||
<div class="portfolio-project-card__details">
|
||||
<div>
|
||||
<h2 class="client-name"><?php echo $clientName ?></h2>
|
||||
<div class="terms">
|
||||
<?php foreach ($terms as $term): ?>
|
||||
<span>#<?php echo $term->name ?></span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='excerpt'>
|
||||
<h3><?php the_title(); ?></h3>
|
||||
<p><?php echo $excerpt ?></p>
|
||||
<a class="cta--read-project" href="<?php the_permalink(); ?>">
|
||||
<span>Voir le projet</span>
|
||||
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/graphic-assets/arrow-see-project.svg" alt="Voir le projet">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2><?php the_title(); ?></h2>
|
||||
<p><?php the_content(); ?></p>
|
||||
<a href="<?php the_permalink(); ?>">Voir le projet</a>
|
||||
</div>
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
|
||||
<section class="old-projects ">
|
||||
<section class="old-project container">
|
||||
<?php
|
||||
$portfolio_beta = get_field('portfolio_beta', $currentPageId);
|
||||
|
||||
$cat_colors = array(
|
||||
'web' => '#1CC7C7',
|
||||
'print' => '#C14FE3',
|
||||
'motiondesign' => '#21D5F5',
|
||||
'video' => '#21D5F5',
|
||||
);
|
||||
?>
|
||||
|
||||
<?php
|
||||
$project_id = $portfolio_post->ID;
|
||||
$projectUrl = get_permalink($project_id);
|
||||
$thumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
|
||||
$mobileThumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
|
||||
$projectDescription = get_field('project_description', $project_id);
|
||||
|
||||
$pousseBoule = 'offset-lg-8';
|
||||
$projectType = 'web';
|
||||
$projectTitle = get_the_title($project_id);
|
||||
$clientName = get_field('client_name', $project_id);
|
||||
|
||||
$currentProjectColor = $cat_colors[$projectType];
|
||||
|
||||
$mouse = $categorie === 'video' ? 'Mouseactive' : null;
|
||||
$i = 3;
|
||||
$ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
|
||||
?>
|
||||
|
||||
|
||||
<?php
|
||||
// check if the repeater field has rows of data
|
||||
$couleur = array(
|
||||
'web' => '#1CC7C7',
|
||||
'print' => '#C14FE3',
|
||||
'motiondesign' => '#21D5F5',
|
||||
'video' => '#21D5F5',
|
||||
);
|
||||
$i = 1;
|
||||
$compteurBoule = 1;
|
||||
$compteurVideo = 1;
|
||||
?>
|
||||
|
||||
<?php foreach ($portfolio_beta as $portfolio_project): ?>
|
||||
<?php
|
||||
$image = get_sub_field('image_du_projet');
|
||||
$imageMobile = get_sub_field('image_du_projet_mobile');
|
||||
|
||||
$projectName = $portfolio_project['nom_du_projet'];
|
||||
$clientName = $portfolio_project['nom_du_client'];
|
||||
$projectDescription = $portfolio_project['description_du_projet'];
|
||||
$projectThumbnail = $portfolio_project['image_du_projet'];
|
||||
$image = $portfolio_project['image_du_projet'];
|
||||
$imageMobile = $portfolio_project['image_du_projet_mobile'];
|
||||
$categorie = $portfolio_project['categorie_du_projet'];
|
||||
?>
|
||||
$mouse = 'Mousenonactif';
|
||||
$valeur = $categorie['value'];
|
||||
|
||||
<div class="portfolio-project-card portfolio-project-card--inactive">
|
||||
<div class="portfolio-project-card__cover" href="<?php echo $projectPermLink ?>">
|
||||
<!-- <img src="<?php echo $projectThumbnailUrl ?>" alt=""> -->
|
||||
<img class="large <?php echo $mouse; ?>" src="<?php echo $projectThumbnail['url']; ?>" alt="<?php echo $projectThumbnail['alt'] ?>">
|
||||
|
||||
|
||||
// COMPTEUR BOULE
|
||||
if ($compteurBoule == 1):
|
||||
elseif ($compteurBoule == 2):
|
||||
$pousseBoule = 'offset-lg-4';
|
||||
elseif ($compteurBoule == 3):
|
||||
$pousseBoule = 'offset-lg-8';
|
||||
$compteurBoule = 1;
|
||||
endif;
|
||||
// FIN COMPTEUR BOULE
|
||||
|
||||
// COMPTEUR VIDEO ET MOUSE VIDEO
|
||||
if ($categorie['value'] === 'video'):
|
||||
$mouse = 'Mouseactive';
|
||||
endif;
|
||||
// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
|
||||
// LIEN VIDEO VIDE
|
||||
$lienvideo = $portfolio_project['url_de_la_video'];
|
||||
|
||||
// FIN LIEN VIDEO VIDE
|
||||
?>
|
||||
<div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
|
||||
<div class="row">
|
||||
|
||||
<div class="<?php echo $pousseBoule; ?> col-lg-1">
|
||||
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="circleTop"></div>
|
||||
</div>
|
||||
<div class="col-12 <?php
|
||||
if ($categorie['value'] === 'video'):
|
||||
echo ("openSlickModal-" . $compteurVideo);
|
||||
endif;
|
||||
if (empty($lienvideo)) {
|
||||
echo ' clickno';
|
||||
}
|
||||
?>">
|
||||
<img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
|
||||
<img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
|
||||
</div>
|
||||
<div class="portfolio-project-card__details">
|
||||
<div>
|
||||
<h2 class="client-name"><?php echo $clientName ?></h2>
|
||||
<div class="terms">
|
||||
<?php if (isset($categorie['value'])): ?>
|
||||
<span>#<?php echo $categorie['value'] ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='excerpt'>
|
||||
<?php
|
||||
if ($i % 2 == 0):
|
||||
?>
|
||||
<div style="color: <?php echo $cat_colors[$valeur]; ?>" class="col-lg-4">
|
||||
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
|
||||
<h3><?php echo $projectName ?></h3>
|
||||
<p><?php echo $projectDescription ?></p>
|
||||
<p class="client"><?php echo $clientName ?></p>
|
||||
</div>
|
||||
<div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
|
||||
<?php
|
||||
else:
|
||||
?>
|
||||
<div style="color: <?php echo $cat_colors[$valeur]; ?>" class="offset-lg-4 col-lg-4">
|
||||
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
|
||||
<h3><?php echo $projectName ?></h3>
|
||||
<p class="client"><?php echo $clientName ?></p>
|
||||
</div>
|
||||
<div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
|
||||
<?php
|
||||
endif;
|
||||
?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php if ($categorie['value'] === 'video'): ?>
|
||||
<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
|
||||
<div class="slickWindow">
|
||||
<!-- Your popup content -->
|
||||
<iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
|
||||
</iframe>
|
||||
<!-- / Your popup content -->
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
$compteurVideo++;
|
||||
endif;
|
||||
|
||||
$i++;
|
||||
$compteurBoule++;
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="circleEnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Loading…
Reference in New Issue
Block a user