+/**
+ * General
+ */
body {
- background: url(../img/noise.png) #979797;
+
}
-header {
+.strong {
+ font-weight: bold;
+}
+.clear {
+ clear: both;
+}
+
+/**
+ * Extends Pure grids responsive to hide items.
+ * Use xx-0 to hide an item on xx screen.
+ * Display it at any level with xx-visible.
+ */
+.pure-u-0 { display: none !important; }
+@media screen and (min-width: 35.5em) {
+ .pure-u-sm-0 { display: none !important; }
+ .pure-u-sm-visible { display: inherit !important; }
+}
+@media screen and (min-width: 48em) {
+ .pure-u-md-0 { display: none !important; }
+ .pure-u-md-visible { display: inherit !important; }
+}
+@media screen and (min-width: 64em) {
+ .pure-u-lg-0 { display: none !important; }
+ .pure-u-lg-visible { display: inherit !important; }
+}
+@media screen and (min-width: 80em) {
+ .pure-u-xl-0 { display: none !important; }
+ .pure-u-xl-visible { display: inherit !important; }
}
/**
* MENU
**/
-.pure-menu {
- /*position: fixed;*/
- background: #16a085;
+.shaarli-menu {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: #1b926c;
+ -webkit-font-smoothing: antialiased;
+ /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
+ max-height: 2.1em;
+ transition: max-height 0.5s;
+ overflow: hidden;
+ z-index: 999;
+}
+
+.shaarli-menu.open {
+ max-height: 500px;
+ transition: max-height 0.75s;
}
.pure-menu-selected {
- background: #049372;
+ background: #1A694C;
}
.pure-menu-link,
.pure-menu-link:hover,
.pure-menu-selected .pure-menu-link:hover {
- color: #fff;
+ color: #d1fff0;
background: transparent;
}
-.shaarli-menu {
- margin-bottom: 1em;
- -webkit-font-smoothing: antialiased;
- /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
- max-height: 2.1em;
- transition: max-height 0.5s;
- overflow: hidden;
-}
-
-.shaarli-menu.open {
- max-height: 500px;
- transition: max-height 0.75s;
-}
-
.menu-toggle {
width: 34px;
height: 34px;
}
/**
- * Extends Pure grids responsive to hide items.
- * Use xx-0 to hide an item on xx screen.
- * Display it at any level with xx-visible.
+ * Header
*/
-.pure-u-0 { display: none !important; }
-@media screen and (min-width: 35.5em) {
- .pure-u-sm-0 { display: none !important; }
- .pure-u-sm-visible { display: inherit !important; }
+#header {
+ width: 100%;
+ height: 150px;
+ background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
}
-@media screen and (min-width: 48em) {
- .pure-u-md-0 { display: none !important; }
- .pure-u-md-visible { display: inherit !important; }
+
+#header h1 {
+ position: fixed;
+ float: left;
+ margin: 45px 0 0 0;
+ width: 44%;
+ height: 100px;
+ text-align: right;
}
-@media screen and (min-width: 64em) {
- .pure-u-lg-0 { display: none !important; }
- .pure-u-lg-visible { display: inherit !important; }
+
+#header h1 a, #header h1 a:visited {
+ /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
+ display: -ms-flexbox;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ overflow: hidden;
+ height: 100px;
+ color: #b0ddce;
+ text-decoration: none;
+ z-index: 1;
+
+ /* TODO: font? */
}
-@media screen and (min-width: 80em) {
- .pure-u-xl-0 { display: none !important; }
- .pure-u-xl-visible { display: inherit !important; }
+
+#header h1 a:hover {
+ color: #d1fff0;
+}
+
+#linkcount {
+ position: fixed;
+ top: 40px;
+ right: 10px;
+ color: #b0ddce;
+ font-size: 0.8em;
+}
+
+#search {
+ position: fixed;
+ top: 55px;
+ right: 10px;
+ width: 44%;
+ text-align: right;
+}
+
+#content {
+ position: relative;
+ box-shadow: 0 -2px 1em #797979;
+ z-index: 2;
+ background: url(../img/noise.png) #979797;
}
\ No newline at end of file
{include="includes"}
</head>
<body>
-<div id="pageheader">
- {include="page.header"}
+{include="page.header"}
- <div id="headerform" class="search">
- <form method="GET" class="searchform" name="searchform">
- <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
- {if="!empty($search_crits) && $search_type=='fulltext'"}
- value="{$search_crits}"
- {/if}
- >
- <input type="submit" value="Search" class="bigbutton">
- </form>
- <form method="GET" class="tagfilter" name="tagfilter">
- <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
- {if="!empty($search_crits) && $search_type=='tags'"}
- value="{function="implode(' ', $search_crits)"}"
- {/if}
- autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
- data-list="{loop="$tags"}{$key}, {/loop}"
- >
- <input type="submit" value="Search" class="bigbutton">
- </form>
- {loop="$plugins_header.fields_toolbar"}
- {$value}
- {/loop}
- </div>
+<div id="headerform" class="search">
+
+ <!--{loop="$plugins_header.fields_toolbar"}
+ {$value}
+ {/loop}-->
</div>
<div id="linklist">
<div class="shaarli-menu pure-g" id="shaarli-menu">
<div class="pure-u-lg-0 pure-u-1">
<div class="pure-menu">
+ <!-- FIXME! default value in PHP -->
<a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
class="pure-menu-link">
<i class="fa fa-home"></i>
</div>
</div>
-<div id="logo" title="Share your links !" onclick="document.location='?';"></div>
+<div id="header" class="pure-u-0 pure-u-lg-visible">
+ <h1 id="header-title">
+ <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}">
+ {$GLOBALS['title']}
+ </a>
+ </h1>
+ <div id="linkcount">
+ {if="!empty($linkcount)"}<span class="strong">{$linkcount}</span> shaares{/if}
+ </div>
-<div id="linkcount" class="nomobile">
- {if="!empty($linkcount)"}{$linkcount} links{/if}
+ <div id="search">
+ <form method="GET" class="searchform" name="searchform">
+ <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
+ {if="!empty($search_crits) && $search_type=='fulltext'"}
+ value="{$search_crits}"
+ {/if}
+ >
+ <input type="submit" value="Search" class="bigbutton">
+ </form>
+ <form method="GET" class="tagfilter" name="tagfilter">
+ <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
+ {if="!empty($search_crits) && $search_type=='tags'"}
+ value="{function="implode(' ', $search_crits)"}"
+ {/if}
+ autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+ data-list="{loop="$tags"}{$key}, {/loop}"
+ >
+ <input type="submit" value="Search" class="bigbutton">
+ </form>
+ </div>
</div>
-<div id="menu">
- <ul>
- <li><span id="shaarli_title">
- <a href="{$titleLink}">{$shaarlititle}</a>
- </span>
- </li>
+<div id="content">
+
{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
{ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
{else}
-<li><a href="?" class="nomobile">Home</a></li>
- {if="isLoggedIn()"}
- <li><a href="?do=logout">Logout</a></li>
- <li><a href="?do=tools">Tools</a></li>
- <li><a href="?do=addlink">Add link</a></li>
- {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
- <li><a href="?do=tools">Tools</a></li>
- <li><a href="?do=addlink">Add link</a></li>
- {else}
- <li><a href="?do=login">Login</a></li>
- {/if}
- <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
- {if="$GLOBALS['config']['SHOW_ATOM']"}
- <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
- {/if}
- <li><a href="?do=tagcloud">Tag cloud</a></li>
- <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
- <li><a href="?do=daily">Daily</a></li>
- {loop="$plugins_header.buttons_toolbar"}
- {$value}
- {/loop}
+
{/if}
- </ul>
-</div>
+
{if="!empty($plugin_errors) && isLoggedIn()"}
<ul class="errors">
{/if}
<div class="clear"></div>
-
-
projects / github / shaarli / Shaarli.git / commitdiff
