Codage Type Bullet Journal

INSCRIPTION : 03/05/2020

Bonjour à tous!

Bon, je commence le codage depuis pas longtemps (genre vraiment 2 semaines peut être), et là, je sèche complètement.
Je suis sur un forum RPG et je suis entrain de travailler sur les fiches de liens/fiches de RPG de mes personnages. La dernière lubie: faire une thématique bullet journal pour l'une d'elles... Codage Type Bullet Journal 2924983556

(oui je me déteste).

J'ai trouvé un type qui me plait beaucoup, mais le codage ne fonctionne pas du tout comme je le voudrai, et je comprends pas comment le modifier pour que le code fonctionne sur le site. Sachant qu'après il faudra que je l'optimise pour que ça corresponde à ce que je veux, mais déjà j'aimerais trouver un code type forum et ensuite galérer dessus.

Et si le code intéresse l'un de vous et que quelqu'un a envie de m'aider dans cette entreprise, je prends toute aide!!!

Voici le rendu final What a Face

https://codepen.io/oliviale/details/aPwaXm

Merci d'avance Smile

Code HTML:

Code:: .main-content
.notebook
   .notebook__inner
      .title
         h1 Week 18
         h3 April 29 - May 6
      .days
         .days__item
            .days__day Monday
            .days__list
               p Prepare gift
               p Travel Day!
               p Check ads
               p Ad copy change
         .days__item
            .days__day Tuesday
            .days__list
               p SEO LP
               p New ad creatives
               .highlighted
                  .text
                     span 7pm: Waitress
         .days__item
            .days__day Wednesday
            .days__list
               p SEO LP
               p Weekly Meet
               .highlighted
                  .text
                     span 2pm: Anastasia
         .days__item
            .days__day Thursday
            .days__list
               p SEO LP
               .highlighted
                  .text
                     span 2pm: Come From Away
                  .text
                     span 7pm: The Band's Visit

         .days__item
            .days__day Friday
            .days__list
               p Notion docs
               p Ad report
               .highlighted
                  .text
                     span 2pm: Dear Evan Hansen
                  .text
                     span 7pm: Frozen
         .days__item
            .days__day Weekend
            .days__list
               p Meet w/ Rina
               .highlighted
                  .text
                     span 2pm: Chicago
                  .text
                     span 7pm: Mean Girls
      .notes
         span notes
         .notes__list
            | - Follow-up customer meet email
            br
            | - Flight BOS-JFK: 2pm on 29 Apr

      .expenses
         h4 Weekly Expenses
         .expenses__box
            span.expenses__title
            span.expenses__amount $ 400
         .expenses__box
            span.expenses__title
            span.expenses__amount $ 120
         .expenses__box
            span.expenses__title
            span.expenses__amount $ 175
         .expenses__box
            span.expenses__title
            span.expenses__amount $ 42
         .expenses__box
            span.expenses__title ️
            span.expenses__amount $ 520
         .expenses__box
            span.expenses__title
            span.expenses__amount $ 200
         .savings
            span.expenses__title Savings:
            span.expenses__amount $ 145

      .picture
         .picture__border
            img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/TSNY.jpg")
            figcaption
               | Times Square,
               br
               | NYC ♥
      .goals
         span weekly
         span goals
         .goals__inner
            .goals__list
               .goals__item
                  .goals__item__checkbox
                     span
                  .goals__item__desc One Codepen
               .goals__item
                  .goals__item__checkbox
                  .goals__item__desc One Blog Post
               .goals__item
                  .goals__item__checkbox
                  .goals__item__desc One Illustration

      .music
         .music__title Artist of the Week
         .music__artist George Ezra
         svg(viewBox="0 0 444.18 444.18")
            path(d="M400.348,294.485c-8.014-20.093-24.798-33.091-46.049-35.662c-34.474-4.172-72.55,19.051-104.452,63.713 C178.301,422.701,110.164,429.493,90.976,429.168c-16.64-0.268-27.452-5.433-30.785-10.433 c-8.769-13.154,9.513-36.94,20.978-48.972c8.255,6.058,18.181,9.334,28.613,9.334c12.955,0,25.134-5.045,34.294-14.206 l106.461-106.46c2.786,0.3,5.602,0.467,8.444,0.467c20.7,0,40.162-8.062,54.801-22.7c14.638-14.638,22.699-34.1,22.699-54.801 c0-20.701-8.062-40.163-22.699-54.801c-30.219-30.217-79.385-30.215-109.602,0c-14.638,14.638-22.699,34.1-22.699,54.801 c0,2.842,0.167,5.658,0.467,8.444L75.488,296.304c-9.161,9.16-14.206,21.339-14.206,34.294c0,10.412,3.265,20.319,9.3,28.564 c-4.132,4.317-10.097,11.035-15.416,18.867c-16.741,24.653-13.295,40.269-7.456,49.027c6.927,10.392,23.011,16.788,43.023,17.11 c0.541,0.009,1.089,0.013,1.651,0.013c17.095,0,43.821-4.224,76.704-23.5c33.207-19.465,64.485-49.552,92.964-89.424 c28.193-39.471,62.012-60.985,90.444-57.541c15.637,1.891,27.999,11.487,33.918,26.327c10.44,26.179-0.117,62.094-28.242,96.072 c-8.815,10.649-16.981,21.185-24.273,31.314c-2.42,3.362-1.656,8.049,1.705,10.469s8.049,1.657,10.469-1.705 c7.096-9.856,15.054-20.123,23.654-30.513C401.406,367.408,412.853,325.841,400.348,294.485z M86.095,354.286 c-6.327-6.327-9.812-14.74-9.812-23.688c0-6.392,1.787-12.505,5.108-17.785l46.177,46.177c-5.28,3.322-11.394,5.108-17.785,5.108 C100.835,364.098,92.422,360.613,86.095,354.286z M214.788,225.593c-11.805-11.805-18.306-27.5-18.306-44.194 c0-3.396,0.283-6.747,0.811-10.036l71.725,71.725c-3.289,0.528-6.64,0.811-10.036,0.811 C242.288,243.899,226.593,237.397,214.788,225.593z M214.788,137.204c12.185-12.184,28.189-18.276,44.194-18.276 s32.01,6.092,44.193,18.276c11.806,11.805,18.307,27.5,18.307,44.194s-6.501,32.39-18.307,44.194 c-5.276,5.276-11.333,9.484-17.905,12.534l-83.017-83.017C205.304,148.537,209.512,142.48,214.788,137.204z M204.182,236.199 c8.337,8.337,18.243,14.533,29.047,18.329l-94.455,94.455l-47.376-47.376l94.455-94.456 C189.649,217.956,195.844,227.862,204.182,236.199z")
            path(d="M71.404,156.771c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065s3.815-16.75,0.729-24.864 L74.201,40.279l60.756-23.103l17.82,46.862c-5.879-1.236-12.163-0.87-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93 c4.929,12.961,17.306,20.95,30.414,20.95c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065 s3.815-16.75,0.729-24.864l-30.211-79.45c-0.707-1.859-2.124-3.362-3.938-4.176s-3.879-0.875-5.738-0.168L61.859,28.924 c-3.872,1.472-5.817,5.804-4.345,9.676L78,92.472c-5.879-1.236-12.163-0.869-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93 C45.919,148.782,58.296,156.771,71.404,156.771z M162.109,103.004c-1.915,4.264-5.375,7.528-9.745,9.189 c-9.021,3.428-19.147-1.118-22.578-10.137c-3.429-9.02,1.118-19.148,10.137-22.578c2.041-0.776,4.137-1.144,6.201-1.144 c7.058,0,13.723,4.302,16.377,11.281C164.163,93.985,164.024,98.739,162.109,103.004z M65.148,107.912 c2.041-0.776,4.137-1.144,6.201-1.144c7.058,0,13.723,4.302,16.377,11.281c1.661,4.37,1.522,9.124-0.393,13.389 c-1.915,4.264-5.375,7.528-9.745,9.189c-9.021,3.429-19.147-1.118-22.578-10.137C51.582,121.47,56.129,111.342,65.148,107.912z")
      .tracker
         each val in ['M','T','W','T','F','S','S']
            .tracker__day= val
         .tracker__title ‍� Gym
         - for (var i=0; i<7; i++)
            .tracker__bubble
         .tracker__title Read
         - for (var i=0; i<7; i++)
            .tracker__bubble
         .tracker__title No Alcohol
         - for (var i=0; i<7; i++)
            .tracker__bubble



aside.context
.explanation
   | Continuation of this
   a(href="https://codepen.io/oliviale/full/bLYQQE" target="_blank") Moleskine pen
   | .
   br
   | Part of the
   a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection here
   | .


footer
a(href="https://twitter.com/meowlivia_" target="_blank")
   i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
   i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
   i.icon-social-dribbble.icons

Code CSS:

Code:: $color-black: #111;
$color-red: #cc4b48;
$color-red2: #e4572e;
$color-vermilion: #f4442e;
$color-vermilion2: #d05b58;
$color-pink: #efb8ba;
$color-pink2: #e79598;
$color-pink3: #db6165;

@mixin text-shadow() {
text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 coral;
}

* {
box-sizing: border-box;
}

body {
background: #222;
font-family: "Gochi Hand", sans-serif;
color: #333;
}

aside.context {
text-align: center;
color: #fff;
line-height: 1.7;
font-size: 20px;
letter-spacing: .5px;
a {
   text-decoration: none;
   color: #fff;
   padding: 3px 0;
   border-bottom: 1px dashed;
   &:hover {
      border-bottom: 1px solid;
   }
}
.explanation {
   max-width: 700px;
   margin: 4em auto 0;
}
}

footer {
text-align: center;
margin: 4em auto;
width: 100%;
a {
   text-decoration: none;
   display: inline-block;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: transparent;
   border: 1px dashed #fff;
   color: #fff;
   margin: 5px;
   &:hover {
      background: rgba(255, 255, 255, 0.1);
   }
   .icons {
      margin-top: 12px;
      display: inline-block;
      font-size: 20px;
   }
}
}

.main-content {
margin: 5em auto;
}

.notebook {
max-width: 800px;
min-width: 550px;
min-height: 570px;
margin: auto;
border-radius: 16px;
background: $color-red;
padding: 2px 4px 2.5px;
&__inner {
   width: 100%;
   height: 100%;
   position: relative;
   border-radius: 16px;
   background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center,
      linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
   background-size: 16px 16px;
   display: grid;
   padding: 30px 20px 25px;
   grid-template-areas:
      "title expenses picture"
      "days expenses picture"
      "days expenses picture"
      "days goals quote"
      "notes tracker tracker";
   grid-template-columns: 50% 30% 20%;
   grid-template-rows: 18% auto auto 30% 25%;
   &:after {
      content: "";
      width: 100px;
      height: 100%;
      top: 0;
      margin: auto;
      left: 0;
      right: 0;
      position: absolute;
      background: linear-gradient(
         to right,
         transparent 10%,
         rgba(153, 153, 153, 0.05) 50%,
         rgba(153, 153, 153, 0.4) 51%,
         rgba(153, 153, 153, 0.15) 51.5%,
         transparent 90%
      );
   }
}
}

.title {
grid-area: title;
text-align: center;
h1 {
   font: 50px/1 "Lobster", cursive;
   @include text-shadow();
   margin: 0;
}
h3 {
   font: 13px/1.2 "Rock Salt", cursive;
   margin: 8px;
}
}

.days {
grid-area: days;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 15px;
margin-right: 22px;
&__item {
   border: 2px solid $color-black;
   position: relative;
   &:nth-child(1) {
      box-shadow: 3px 3px 0 0 rgba($color-vermilion2,0.4);
   }
   &:nth-child(2) {
      box-shadow: 3px 3px 0 0 rgba($color-vermilion,0.5);
   }
   &:nth-child(3) {
      box-shadow: 3px 3px 0 0 rgba($color-pink,0.6);
   }
   &:nth-child(4) {
      box-shadow: 3px 3px 0 0 rgba($color-red,0.7);
   }
   &:nth-child(5) {
      box-shadow: 3px 3px 0 0 rgba($color-pink2,0.7);
   }
   &:nth-child(6) {
      box-shadow: 3px 3px 0 0 rgba($color-red2,0.5);
   }
}
&__day {
   padding: 5px 5px 2px;
   font: 14px/1.5 "Special Elite", cursive;
   border-bottom: 2px solid $color-black;
}
&__list {
   padding: 8px;
   font-size: 14px;
   line-height: .9;
}
p {
   padding-left: 8px;
   position: relative;
   margin: 5px 0;
   &:after {
      content: '-';
      top: 0;
      position: absolute;
      left: 0;
   }
}
.highlighted {
   position: absolute;
   width: 100%;
   bottom: 0;
   padding: 8px;
   left: 0;
   text-align: center;
   .text {
      margin-top: 5px;
      position: relative;
      span {
         position: relative;
         z-index: 2;
      }
      &:after {
         content: '';
         background: rgba($color-pink,0.3);
         width: 95%;
         height: 100%;
         position: absolute;
         left: 2px;
         top: 0;
         z-index: 1;
         transform: rotate(-3deg);
      }
   }
}
}

.notes {
grid-area: notes;
border: 2px solid $color-black;
border-width: 0 2px 2px;
margin: 35px 20px 0 0;
position: relative;
span {
   display: block;
   margin: -25px 22px;
   font: 32px "Lobster", cursive;
   @include text-shadow;
   &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      top: 0;
      left: 0;
      background: #111;
      background: linear-gradient(
         to right,
         #111 15px,
         transparent 15px,
         transparent 95px,
         #111 95px
      );
   }
}
&__list {
   margin-top: 24px;
   padding: 10px;
   line-height: 1.2;
}
}

.expenses {
grid-area: expenses;
margin: 0 0 20px 20px;
display: grid;
grid-gap: 6px 10px;
align-items: center;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, auto);
h4 {
   text-align: center;
   margin: 0 0 10px;
   font: 16px/1 "Rock Salt", cursive;
   &:first-of-type {
      grid-column: 1 / span 4;
   }
}
&__box {
   border: 2px solid $color-black;
   grid-column: span 2;
   padding: 7px 7px 5px;
}
&__title {
   font: 4px;
}
&__amount {
   font: 19px 'Gochi Hand', cursive;
   display: inline-block;
   margin-left: 10px;
}
.savings {
   position: relative;
   grid-column: 1 / span 4;
   width: 99%;
   padding: 10px 10px 5px;
   background: rgba($color-pink, 0.4);
   box-shadow: 3px 3px 0 0 rgba($color-pink2, 0.7);
   font: 16px/1 "Rock Salt", cursive;
}
}

.picture {
grid-area: picture;
margin-left: 20px;
&__border {
   width: 100%;
   background: #f9f9f9;
   padding: 20px 10px 50px;
   height: 95%;
   transform: rotate(5deg);
   position: relative;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
   &:after {
      content: "";
      width: 55%;
      height: 20px;
      top: -10px;
      z-index: 5;
      left: 25%;
      transform: rotate(-2deg);
      position: absolute;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      background: rgba(220, 220, 220, 0.4);
   }
   img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   figcaption {
      margin: 10px 0;
      text-align: center;
      display: block;
      font: 14px/1 "Gochi Hand", cursive;
      color: $color-vermilion;
   }
}
}

.goals {
grid-area: goals;
margin: 25px 0 0 20px;
border: 2px solid $color-black;
border-width: 0 2px 2px;
position: relative;
&__item {
   padding: 3px 12px;
   &__checkbox {
      border: 2px solid $color-black;
      width: 20px;
      height: 20px;
      display: inline-block;
      margin-right: 5px;
      position: relative;
      span {
         font-size: 26px;
         display: inline-block;
         position: absolute;
         top: -4px;
         color: $color-pink3;
      }
   }
   &__desc {
      display: inline-block;
      font: 18px "Gochi Hand", cursive;
      vertical-align: top;
   }
}
> span:nth-child(1) {
   position: absolute;
   text-transform: uppercase;
   font: 700 9px "Rock Salt", cursive;
   top: -30px;
   transform: rotate(-15deg);
}
> span:nth-child(2) {
   display: block;
   margin: -25px 22px;
   font: 32px "Lobster", cursive;
   @include text-shadow;
   &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      top: 0;
      left: 0;
      background: #111;
      background: linear-gradient(
         to right,
         #111 15px,
         transparent 15px,
         transparent 95px,
         #111 95px
      );
   }
}
&__inner {
   margin-top: 40px;
}
}

.music {
grid-area: quote;
margin: 25px 0 10px 20px;
position: relative;
&__title {
   font: 22px "Special Elite", cursive;
}
&__artist {
   color: $color-red2;
   margin: 15px 0;
   transform: rotate(-10deg);
   max-width: 50px;
   font: 24px/.8 'Gochi Hand', cursive;
}
svg {
   width: 65px;
   position: absolute;
   bottom: 0px;
   right: -10px;
}
}

.tracker {
grid-area: tracker;
display: grid;
margin: 20px 0 0 20px;
grid-template-rows: repeat(4, 28px);
grid-template-columns: max-content repeat(7, 1fr);
align-items: center;
font: 18px/1 "Gochi Hand", cursive;
grid-auto-flow: row;
text-align: center;
&__title {
   grid-column: 1;
   text-align: left;
   padding-right: 15px;
}
&__day {
   text-align: center;
   &:nth-child(1) {
      grid-column-start: 2;
   }
}
&__bubble {
   border: 1.5px dashed;
   margin: auto;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   &:nth-child(10),&:nth-child(12),&:nth-child(13) {
      background: rgba($color-vermilion,0.5);
   }
   &:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(22), &:nth-child(23) {
      background: rgba($color-pink,0.5);
   }
   &:nth-child(27),&:nth-child(29),&:nth-child(30) {
      background: rgba(coral,0.5);
   }
}
}

/* Responsive here
@media screen and (max-width: 768px) {
.main-content {
   padding: 1em;
}
.notebook__inner {
   grid-template-columns: 40% 25% 35%;
   grid-template-rows: auto;
   grid-template-areas:
      "title title title"
      "days days days"
      "notes notes notes"
      "expenses expenses expenses"
      "goals quote picture"
      "tracker tracker picture";
   > div {
      margin: 30px 20px;
   }
   &:after {
      width: 100%;
      height: 100px;
      bottom: 0;
      background: linear-gradient(
         to bottom,
         transparent 10%,
         rgba(153, 153, 153, 0.05) 50%,
         rgba(153, 153, 153, 0.4) 51%,
         rgba(153, 153, 153, 0.15) 51.5%,
         transparent 90%
      );
   }
}
}
*/

INSCRIPTION : 31/12/2018

Oy o/
C'est du SCSS, chose que FA n'accepte pas. Ce que tu cherches à faire, c'est juste adapter les codes pour qu'ils fonctionnent sur ton forum ou il y a autre chose ?

INSCRIPTION : 05/02/2013

Salut

le code que tu partages sont des versions "pug"/"scss", sans doute un langage pour aider à l'écriture du html mais qui doit être compilé pour fonctionner. Sur le site où tu as été le chercher tu as un bouton "View compiled" en bas à droite du code, c'est celle qui te permet d'afficher le vrai CSS / HTML.

Remarque aussi : si tu n'es que simple membre du forum tu vas devoir inclure le code CSS au sein même de ton message, ce qui peut prendre beaucoup de caractères. Tu n'auras probablement plus beaucoup de place pour le contenu, à tester mais sois prévenue ! le codage que tu as choisi me paraît assez lourd pour un code individuel, si t'as moyen d'héberger ton CSS ailleurs c'est mieux.

INSCRIPTION : 03/05/2020

Hello, merci de ta réponse!!

En soit ce serait adapter pour que ça fasse une fiche de lien, mais du coup je me demandais si déjà je pouvais espérer partir sur ce type de modèle. Le but final est d'arriver à me faire un kit fiche de lien/résumés de l'histoire du eprso et des RPs, en mode p'tit journal. Après j'ai pas trop trop trop réfléchis à comment je pouvais organiser le truc

et je pense que je me surestime beaucoup trop pour y arriver, et que je vais finir par devoir passer une commande

INSCRIPTION : 31/12/2018

Si c'est quelque chose de différent mais sur ce genre de modèle que tu recherches, une commande serait sûrement mieux ouep :b
(pour la version compilée seulement: https://jsfiddle.net/Kehoru/uks5wxe3/3/ )

INSCRIPTION : 03/05/2020

Shad, quand je fais le "view compiled", il me met quand même un code avec des accolades et tout.

Syx, il me mets 404 error, je peux pas ouvrir le lien :/

Je vais regarder le code et aller passer commande je pense Smile

Merci beauxoup!!

INSCRIPTION : 05/02/2013

Syx a juste oublié de laisser un espace entre sa parenthèse et le lien, voici son lien sans erreur : https://jsfiddle.net/Kehoru/uks5wxe3/3/

Les accolades font partie de la syntaxe du CSS, si t'es sur l'onglet HTML (PUG -> View compiled) la syntaxe devrait t'être plus familière Smile

INSCRIPTION : 31/12/2018

Foutue parenthèse x) C'est corrigé dans le post aussi ♥

INSCRIPTION : 03/05/2020

Haha merci beaucoup!

Bon j'ai la réponse, le code du site marche pas du tout x) je vais aller poster une commande.

INSCRIPTION : 31/12/2018

@Samiralee Gilman Je confirme x) C'est en grid, FA a tendance à pas trop aimer ça; du coup faudrait limite refaire tout le code.. Pour la commande, je te conseille plutôt de faire un schéma et de ne donner aucune base, ce serait plus simple pour celui ou celle qui s'en chargera xD

INSCRIPTION : 03/05/2020

Alors je suis sur le schéma, je vais juste mettre l'image du final pour montrer un peu le style que j'aimerais bien avoir :**:

**Contenu sponsorisé**

» The future is bullet proof | JINX™
» Le Grand Journal - Michel & cie
» Morgi, je ne connais rien en codage

Codage Type Bullet Journal

Codage Type Bullet Journal

Sujets similaires

Sujets similaires