Freckle & Hazel - Githubissues

zuperninja commented 6 years ago

Website for wedding photographers and video.

Bright, clean, simple // showcase, professionnal // trust & bold

Format ?

zuperninja commented 6 years ago

https://coraltheme.format.com/ = blur image in the background / color block / unique menu

zuperninja commented 6 years ago

checker si possible d'une homepage fullscreen Enable hamburger link pinterest

zuperninja commented 6 years ago

Format me donne envie de bosser sur Tumblr. Et me fait penser que les plateformes CMS c'est de la marde. Je me sens vite bloquée techniquement ou visuellement. Format c'est beau tout de suite, mais très dur d'améliorer le chemin utilisateur et le storytelling. Ca va dans un sens et c'est tout. Je sentais la même chose avec Silversquare. En gros à chaque fois que je teste quelque chose pour un client j'en vois les limites et les frustrations. Ça répond à leur besoin, mais moi je suis pas très charmée.

Alors je me dis qu'au fond Tumblr, c'est tellement oldschool que tu peux tout faire. Stockage illimité et accès au HTML et CSS, avec le côté CMS/blogging si tu as bien fait ton thème. Soucis c'est que ça prend du thème à faire, et les thèmes payants que j'ai vu son pas foufou responsive.

Après Github Pages c'est le top hein. Mais la learning curve est longue !

zuperninja commented 6 years ago

Center social footer on Format.com + add space between the icon


footer{
  width: 100% !important;
}

footer .social{
  justify-content: center !important;
}

footer .social-item + .social-item {
    margin-left: 50px !important;
}

zuperninja commented 6 years ago

Add a font:

Convert your files with https://www.fontsquirrel.com
Upload the files to your format.com website through Design Editor > Click on "User stylesheet CSS" > and at the bottom of the files you have this :

I spend some time finding it. Nothing in the help section, I lost 15min finding a trick to add this font because i thought it was impossible to add a random file (other than image). So yeah. This works fine like this, you just have to know that this option was implemented.


@font-face {
    font-family: 'shellahera_script_demoregular';
    src: url('https://4ormat-asset.s3.amazonaws.com/vfs/845108/public_assets/44483724/shellaherascriptdemo-webfont.woff2') format('woff2'),
         url('https://4ormat-asset.s3.amazonaws.com/vfs/845108/public_assets/44483724/shellaherascriptdemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h2 {
  font-family: 'shellahera_script_demoregular' !important;

}

zuperninja commented 6 years ago

Can the logo on the landing page be “fix” (meaning, fixed on the background image)? It moves if you scroll up or down on a smaller screen like my laptop, or even a smartphone. But doesn’t do it on our desktop that has a much bigger screen.

#full_screen_image{
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center center !important;
}

Add a blury effect or a pastel color in the background ? or just a no-scroll event if the picture will be deform if it's in background-size:cover; or better a "@media only screen and (min-device-width: 400px)"

zuperninja commented 6 years ago

footer{
  width: 100% !important;

}

footer .social{
  justify-content: center !important;
}

footer .social-item + .social-item {
    margin-left: 50px !important;
}

@font-face {
    font-family: 'shellahera_script_demoregular';
    src: url('https://4ormat-asset.s3.amazonaws.com/vfs/845108/public_assets/44483724/shellaherascriptdemo-webfont.woff2') format('woff2'),
         url('https://4ormat-asset.s3.amazonaws.com/vfs/845108/public_assets/44483724/shellaherascriptdemo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h2 {
  font-family: 'shellahera_script_demoregular',"Helvetica Neue", Arial, Helvetica, sans-serif !important;
  font-size: 4em !important;
  color: #cb9147;
  text-shadow: #edcca2 -1px 1px !important;
  letter-spacing: 0.02em;

}

.navigation {
  display: flex  !important;
}

.menu { 
  display: flex;
  flex-direction: column  !important;
}

@media (width >= 768px) {

.menu {
    flex-direction:  !important;
}
  }

@media (width >= 768px) {
    .menu > li:not(:last-child) {
      margin-right: 40px   !important;
    }
  }

.menu a {
  position: relative  !important;
  display: inline-block  !important;
  font-size: 20px  !important;
  font-weight: 300  !important;
  color: #666  !important;
  transition: color .2s ease  !important;
  padding: 3px 0  !important;
  margin-bottom: 10px  !important;
}

.menu a:hover {
    color: #aaa  !important;

  }

.menu a:hover::after,
    .menu a:hover::before {
      width: 100%  !important;
      left: 0  !important;
    }

.menu a::after,
  .menu a::before {
    content: ''; 
    position: absolute;
    top: calc(100% + 5px);
    width: 0;
    right: 0;
    height: 3px;
  }

.menu a::before {
    transition: width .4s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
    background: #2196f3   !important;;
  }

.menu a::after {
    transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
    background: #F44336   !important;;
  }

footer .container{
    background:white;
    z-index: 2;
  }

#full_screen_image{
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center center !important;
}

.navigation .category > a {
    cursor: pointer !important;
}

zuperninja commented 6 years ago

Color code:

dark: 343039 light: d1dad7 accent_blue: 5f9f99 accent_yellow: cb9147

zuperninja commented 6 years ago

Ancien code pour navigation menu barre

 <nav>
   <div id="menuToggle">
      <input type="checkbox" />
         <span></span>
         <span></span>
         <span></span>

           <ul id="menu" class="menu_list">
             {% for menu_item in menu_items %}
                {% if menu_item.type == 'category' %}
             <li class="category top_level">
               <a href="#" class="category_name{% if menu_item.id == page.category_id %} selected{% endif %}">{{ menu_item.name }}</a>
               <ul class="dropdown">
                 {% for menu_page in menu_item.pages %}
                 <li class="item {% if menu_page.id == page.id %} selected {% endif %}">
                   <a href='{{ menu_page.href }}' {% if menu_page.type == 'link' and menu_page.open_in_new_window %} target='_blank' {% endif %}>{{ menu_page.name }}</a>
                 </li>
                 {% endfor %}
               </ul>
             </li>
             {% else %}
             <li class="item {% if menu_item.id == page.id %} selected {% endif %} top_level">
               <a href='{{ menu_item.href }}' {% if menu_item.type == 'link' and menu_item.open_in_new_window %} target='_blank' {% endif %}>{{ menu_item.name }}</a>
             </li>
             {% endif %}
              {% endfor %}
           </ul>
   </div>
 </nav>

zuperninja commented 6 years ago

Code pour le logo à remettre en haut centré en GROS

 <div id="logo">
    {% if theme.logo_type_toggle == "image" %}
      {% if theme.logo_image %}
       <a href="{{ paths.root }}">
         {% if theme.logo_trim %}
           <img src="{{ theme.logo_image_trimmed }}" alt="{{ site.name }}">
         {% else %}
           <img src="{{ theme.logo_image }}" alt="{{ site.name }}">
         {% endif %}
       </a>
       {% elsif theme.logo_text %}
       <h1>
         <a href="{{ paths.root }}">{{ theme.logo_text | newline_to_br }}</a>
       </h1>
       {% endif %}
    {% else %}
      <h1>
        <a href="{{ paths.root }}">{{ theme.logo_text | newline_to_br }}</a>
      </h1>
    {% endif %}
 </div>

To be easy to do, I past this code into layout before

and change the id of the div to logo->logo_new

And then, center everything and keep the hamburger button working 🍔


#logo_new {
    position: fixed;
    padding: 30px;
    width: 100%;
    top: 0;
    text-align: center;
    z-index:100;
    pointer-events: none;
}

#logo_new img{
    display: inline-block;
    height: 8em;
    pointer-events: auto;
}

zuperninja commented 6 years ago

Oooh today was a fun day ! I spent too much time on a stupid detail thingy that i won't use. And changed the design entirely after 2hours. Redo a all new navigation system without being responsive yet. (HAMBUUURGEEER) Now, I doubt everythiiiiing ! I think i'm doing too much webdevelopping (lost of time because I only know the basic). I could learn more, or just don't do it. But that's a fun part (like every parts).

I definitely need to learn javascript more. For now I do everything on html5 and CSS3, but i'm sure it will be faster to implement some already made plugin.

To do the hamburger menu I followed this pen (HAMBUUURGEEER) and put the nav snipped into layout.html (instead of menu.html). This was I can keep a nice navigation bar in the bottom and have the hamburger on the top. But I think it's why it's not mobile friendly yet. Maybe I will disable this hamburger menu for little screen and keep the native one.

Don't use category in menu manager, only with the   <i>Name of the page</i>

zuperninja commented 6 years ago

To do:

[x] remove hamburger from landing page
[x] no scroll on landing page
[x] add logo
[x] redo footer
[x] add copyright
[x] change chevron
[x] redo caption position (enlever css pour caption togle, add a div, faire tout ça en un block)
[x] reponsive
[x] add domain name
[x] add contrast to hamburger button and logo
[x] change z-index menu

zuperninja commented 6 years ago

Change copyright directly in it: (only for screen media)

zuperninja commented 6 years ago

Remove hamburger from landing page


  {% if page.is_homepage %}
  {% else %}
  <nav> ... </nav>
  {% endif %}

zuperninja commented 6 years ago

Download an archive of the theme with the hamburger menu

zuperninja commented 6 years ago

Old hamburger nav in layout.

<nav>
   <div id="menuToggle">
      <input type="checkbox" />
         <span></span>
         <span></span>
         <span></span>

           <ul id="menu" class="menu_list">
             {% for menu_item in menu_items %}
                {% if menu_item.type == 'category' %}
             <li class="category top_level">
               <a href="#" class="category_name{% if menu_item.id == page.category_id %} selected{% endif %}">{{ menu_item.name }}</a>
               <ul>
                 {% for menu_page in menu_item.pages %}
                 <li class="item {% if menu_page.id == page.id %} selected {% endif %}">
                   <a href='{{ menu_page.href }}' {% if menu_page.type == 'link' and menu_page.open_in_new_window %} target='_blank' {% endif %}>{{ menu_page.name }}</a>
                 </li>
                 {% endfor %}
               </ul>
             </li>
             {% else %}
             <li class="item {% if menu_item.id == page.id %} selected {% endif %} top_level">
               <a href='{{ menu_item.href }}' {% if menu_item.type == 'link' and menu_item.open_in_new_window %} target='_blank' {% endif %}>{{ menu_item.name }}</a>
             </li>

             {% endif %}
              {% endfor %}
              </br>
  {% theme_include 'partials/social' %}
           </ul>
   </div>
 </nav>

zuperninja commented 6 years ago

[ ] Change font on category view and menu
[ ] add favicon
[ ] delete border on menu
[ ] add footer
[ ] SEO

zuperninja commented 6 years ago

SEO

[ ] Add metadata on pictures
[ ] Add description and metatag
[ ] Link to google analytics and social media
[ ] Add caption and metadata to picture

zuperninja / zuperninja.github.io

Freckle & Hazel #17

SEO