her.esy.fun/src/Scratch/en/blog/2009-10-Focus-vs-Minimalism/index.html

151 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YBlog - Focus &gt; Minimalism</title>
<meta name="keywords" content="jQuery, design, web" />
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- IndieAuth -->
<link href="https://twitter.com/yogsototh" rel="me">
<link href="https://github.com/yogsototh" rel="me">
<link href="mailto:yann.esposito@gmail.com" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
</head>
<body lang="en" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/fr/blog/2009-10-Focus-vs-Minimalism/">French</a>
</span>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
</div>
</div>
<div id="titre">
<h1>Focus &gt; Minimalism</h1>
</div>
<div class="flush"></div>
<div id="afterheader" class="article">
<div class="corps">
<p>I believe the goal researched by minimalism is <strong>Focus</strong>. But I dont believe minimalism should be the goal. Focus should be the goal, and I believe minimalism isnt necessary to reach it.</p>
<p>This is why my design is not minimalist, but I decided to remove most of the navigation stuff of all pages of my website. May be Ill prefer to hide the menu only when you are on blog article. For now, I hide the menu everywhere on the website.</p>
<hr />
<h2 id="technical-details">technical details</h2>
<p>For those who want the technical details behind the show/hide menu, here is the simple jQuery code.</p>
<p>The HTML:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;menuButton&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;entete&quot;</span><span class="kw">&gt;</span>#content of the menu<span class="kw">&lt;/div&gt;</span></a></code></pre></div>
<p>The CSS:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb2-1" title="1"><span class="pp">#menuButton</span> {</a>
<a class="sourceLine" id="cb2-2" title="2"> <span class="kw">font-size</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-3" title="3"> <span class="kw">height</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-4" title="4"> <span class="kw">line-height</span>: <span class="dv">1.8</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-5" title="5"> <span class="kw">width</span>: <span class="dv">2</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-6" title="6"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-7" title="7"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-8" title="8"> <span class="kw">top</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-9" title="9"> <span class="kw">z-index</span>: <span class="dv">9001</span> }</a>
<a class="sourceLine" id="cb2-10" title="10"></a>
<a class="sourceLine" id="cb2-11" title="11"><span class="pp">#menuButton</span><span class="in">:hover</span> {</a>
<a class="sourceLine" id="cb2-12" title="12"> <span class="kw">cursor</span>: <span class="dv">pointer</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-13" title="13"></a>
<a class="sourceLine" id="cb2-14" title="14"><span class="pp">#entete</span> {</a>
<a class="sourceLine" id="cb2-15" title="15"> <span class="kw">top</span>: <span class="dv">5</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-16" title="16"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-17" title="17"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-18" title="18"> <span class="kw">width</span>: <span class="dv">10</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-19" title="19"> <span class="kw">z-index</span>: <span class="dv">9000</span><span class="op">;</span> }</a></code></pre></div>
<p>The javascript code (using jQuery)</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb3-1" title="1"><span class="kw">function</span> <span class="at">hideMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-2" title="2"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;-10em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-3" title="3"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&amp;rarr;'</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-4" title="4"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-5" title="5"><span class="kw">function</span> <span class="at">showMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-6" title="6"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;0em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-7" title="7"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">html</span>(<span class="st">'&amp;larr;'</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-8" title="8"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-9" title="9"><span class="kw">function</span> <span class="at">toggleMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-10" title="10"> <span class="cf">if</span> ( <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">css</span>(<span class="st">'left'</span>)<span class="op">==</span><span class="st">'-10em'</span> ) <span class="op">{</span></a>
<a class="sourceLine" id="cb3-11" title="11"> <span class="at">showMenu</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb3-12" title="12"> <span class="op">}</span> <span class="cf">else</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb3-13" title="13"> <span class="at">hideMenu</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb3-14" title="14"> <span class="op">}</span></a>
<a class="sourceLine" id="cb3-15" title="15"><span class="op">}</span></a></code></pre></div>
<p>And the result is shown in the top left corner of this website.</p>
</div>
<div id="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
·
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-Focus-vs-Minimalism/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
·
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
<br />
<a class="message" href="../../../../Scratch/en/blog/Social-link-the-right-way/">These social sharing links preserve your privacy</a>
</div>
<div id="navigation">
<a href="../../../../">Home</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/softwares">Softwares</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/about">About</a>
</div>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
<div>
Published on 2009-10-22
</div>
<div>
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
</div>
<div>
Done with
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
</div>
<hr />
<div style="max-width: 100%">
<a href="https://cardanohub.org">
<img src="../../../../Scratch/img/ada-logo.png" class="simple" style="height: 16px;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
</a>
<code style="display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>