Closed zuperninja closed 4 years ago
https://coraltheme.format.com/ = blur image in the background / color block / unique menu
checker si possible d'une homepage fullscreen Enable hamburger link pinterest
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 !
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;
}
Add a font:
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;
}
- 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)"
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;
}
Color code:
dark: 343039 light: d1dad7 accent_blue: 5f9f99 accent_yellow: cb9147
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>
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 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;
}
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>
To do:
Change copyright directly in it: (only for screen media)
Remove hamburger from landing page
{% if page.is_homepage %}
{% else %}
<nav> ... </nav>
{% endif %}
Download an archive of the theme with the hamburger menu
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>
[ ] Add metadata on pictures
[ ] Add description and metatag
[ ] Link to google analytics and social media
[ ] Add caption and metadata to picture
Website for wedding photographers and video.
Bright, clean, simple // showcase, professionnal // trust & bold
Format ?