Update theme according personal website

This commit is contained in:
Knah Tsaeb 2024-12-19 17:14:38 +01:00
parent d7dd0ba9df
commit 65bfdb051b
11 changed files with 1271 additions and 917 deletions

View file

@ -22,7 +22,7 @@ function myShaarli_init($conf) {
$conf->set('thumbnails.mode', 'none');
return array($error);
}
if ($conf->get('resource.theme') !== 'myShaarli' and $conf->get('resource.theme') !== 'myShaarli_Columns') {
if (!in_array($conf->get('resource.theme'), ['myShaarli', 'myShaarli_Columns'])) {
$error = 'myShaarli plugin: ' .
'This plugin need modification of template. Use myShaarli theme for test.';
$conf->set('thumbnails.mode', 'none');
@ -51,7 +51,7 @@ function hook_myShaarli_render_header($data) {
'attr' => [
'href' => $conf->get('plugins.WebSite_URL'),
],
'html' => '<i class="fa fa-home" aria-hidden="true"></i> Site',
'html' => 'Site',
];
$data['buttons_toolbar'][] = $button;
}

View file

@ -5,6 +5,7 @@
</head>
<body>
{include="page.header"}
<section>
<div class="pure-g">
<div class="pure-u-lg-1-3 pure-u-1-24"></div>
<div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
@ -59,6 +60,7 @@
</form>
</div>
</div>
</section>
{include="page.footer"}
</body>
</html>

View file

@ -2,10 +2,6 @@
--background-color: #171414;
--text-color: #fffbfb;
--text-color-inverse: #171414;
.linklist-pages {
color: var(--text-color);
}
}
[data-theme="light"] {
@ -23,13 +19,27 @@
--dark-main-color: var(--primary-darken);
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--background-color);
color: var(--text-color);
width: 80vw;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
text-rendering: optimizeSpeed;
font-size: var(--font-size);
}
a {
transition: all .2s linear, border .2s linear;
transition: .2s linear, border .2s linear;
}
h1 {
font-size: calc(var(--font-size) * 1.6);
}
.shaarli-menu {
@ -47,8 +57,9 @@ a {
}
.subheader-form {
background-color: var(--background-color-lighten);
padding: 1.1em 0;
padding: calc(var(--default-space)*6) 0;
width: 80vw;
border: var(--default-space) solid var(--text-color);
}
.subheader-form {
@ -72,6 +83,11 @@ a {
color: var(--primary);
}
.linklist-pages a:hover,
.daily-entry .daily-entry-title a {
color: var(--primary-darken);
}
.linkcount {
color: var(--text-color);
}
@ -81,8 +97,10 @@ a {
}
.linklist-filters {
color: var(--text-color);
padding-left: .3em;
margin: unset;
color: var(--primary);
font-size: unset;
}
.linklist-filters a:hover {
@ -109,6 +127,7 @@ a {
height: auto;
font-size: 1em;
width: 4em;
color: var(--secondary-text-contrast);
}
.linklist-item.private::before {
@ -143,11 +162,13 @@ a {
.linklist-item-infos {
padding: 8px 8px 5px 8px;
grid-area: footer;
background: var(--background-secondary-color);
}
.linklist-item-title .label-private {
border: solid 1px var(--warning);
color: var(--warning);
color: var(--warning-darken);
}
.linklist-item-infos .label a {
@ -176,6 +197,7 @@ a {
.footer-container {
margin: 0;
color: var(--text-color);
margin: calc(var(--default-space) *4) 0 0 0;
}
.footer-container a {
@ -198,10 +220,6 @@ a {
grid-area: main;
}
.linklist-item-infos {
grid-area: footer;
}
.grid-container,
.linklist-item {
display: grid;
@ -215,10 +233,6 @@ a {
padding: 10px;
}
.linklist-item-title h2 {
line-height: auto;
}
.page-form select,
input[type="text"],
input[type="checkbox"] {
@ -312,7 +326,7 @@ button:hover {
}
.container {
margin-top: 55px;
margin-top: 0;
}
.header-search,
@ -332,3 +346,136 @@ button:hover {
.pure-menu-link {
display: inline-block;
}
header {
background-color: transparent;
}
header h1 img {
display: inline;
}
header h1 {
color: var(--primary);
}
header svg {
fill: var(--primary-lighten);
vertical-align: middle;
}
header a {
transition: 0.4s;
}
header h1 a {
text-decoration: none;
color: var(--primary);
text-decoration: underline transparent;
}
header a:hover {
color: var(--primary-lighten);
text-decoration: underline var(--primary);
text-decoration-thickness: var(--default-space);
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-family: initial;
}
nav h1,
nav ul {
margin: 0;
}
nav h1 img {
vertical-align: middle;
}
nav ul {
display: flex;
gap: calc(var(--default-space) * 2);
flex-wrap: wrap;
padding: 0;
}
nav li {
margin: var(--default-space);
list-style: none;
font-size: calc(var(--font-size) * 1.2);
}
nav li a {
color: var(--primary-lighten);
text-decoration: underline transparent;
}
nav li a:hover,
nav .active {
text-decoration: underline var(--primary-darken);
text-decoration-thickness: var(--default-space);
}
nav .fa {
padding-right: var(--default-space);
}
.searchform-block input[type="text"]::placeholder,
.page-form input[type="text"]::placeholder {
color: var(--text-color);
}
.searchform-block input[type="text"],
.page-form input[type="text"] {
color: var(--secondary-text-contrast);
}
.paging,
.linklist-item,
.page-visitor,
#pageError,
.login-form-container,
#addlink-form,
.page-form {
background-color: var(--light-background-color);
border: 1px solid var(--background-color-darken);
border-radius: calc(var(--default-space) * 1.2);
box-shadow: var(--box-shadow-light);
}
.paging {
color: var(--primary-lighten);
margin: 0 0 calc(var(--default-space) *4) 0;
}
section .pure-g,
.pluginform-container {
margin: 0 0 calc(var(--default-space) *4) 0;
}
.linklist-item-infos-dateblock a {
color: var(--primary);
}
.linklist-item-infos-dateblock a:hover {
text-decoration: underline var(--primary-darken);
color: var(--primary-darken);
}
.pinned-link,
.linklist-item-title .label-sticky {
color: var(--info-darken) !important;
}
.linklist-item-title .label-sticky {
border: solid 1px var(--info-darken);
}

File diff suppressed because one or more lines are too long

View file

@ -51,10 +51,11 @@
</form>
{/loop}
{include="linklist.paging"}
<div id="linklist">
<div id="link-count-block" class="pure-g link-count-block">
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
<div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
<div id="link-count-content" >
<div class="linkcount pure-u-lg-0 center">
{if="!empty($linkcount)"}
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
@ -64,8 +65,6 @@
{/if}
</div>
{include="linklist.paging"}
<div id="plugin_zone_start_linklist" class="plugin_zone">
{loop="$plugin_start_zone"}
{$value}
@ -116,8 +115,7 @@
{/if}
<div id="linklist-loop-block" class="pure-g">
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
<div id="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
<div id="linklist-loop-content">
{ignore}Set translation here, for performances{/ignore}
{$strPrivate=t('Private')}
{$strEdit=t('Edit')}
@ -230,7 +228,6 @@
</div>
{/if}
{/if}
<a href="{$base_path}/shaare/{$value.shorturl}" title="{$strPermalink}">
{if="!$hide_timestamps || $is_logged_in"}
{$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
<span class="linkdate" title="{$updated}">
@ -240,10 +237,12 @@
&middot;
</span>
{/if}
<a href="{$base_path}/shaare/{$value.shorturl}" title="{$strPermalink}">
{$strPermalinkLc}
</a>
{if="$is_logged_in && $value.private"}
&middot;
<a href="{$base_path}/admin/shaare/private/{$value.shorturl}?token={$token}" title="{$strShaarePrivate}">
<i class="fa fa-share-alt"></i>
</a>
@ -311,12 +310,7 @@
{/loop}
</div>
<div id="linklist-paging-bottom-block" class="pure-g link-count-block">
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
<div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
{include="linklist.paging"}
</div>
</div>
{include="page.footer"}
<script src="{$asset_path}/js/thumbnails.min.js?v={$version_hash}#"></script>

View file

@ -1,4 +1,3 @@
<div class="linklist-paging">
<div class="paging pure-g">
<div class="linklist-filters pure-u-1-3">
<span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
@ -37,7 +36,6 @@
{/if}
</div>
<div class="linklist-pages pure-u-1-3">
{if="$next_page_url"}
<a href="{$next_page_url}" class="paging_newer">
@ -50,7 +48,6 @@
<i class="fa fa-arrow-circle-right"></i>
</a>
{/if}
</div>
<div class="linksperpage pure-u-1-3">
@ -71,4 +68,3 @@
</a>
</div>
</div>
</div>

View file

@ -1,28 +1,15 @@
<div class="shaarli-menu pure-g" id="shaarli-menu">
<div class="pure-u-lg-0 pure-u-1">
<div class="pure-menu">
<header role="banner">
<a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-mobile">
<img src="{$asset_path}/img/favicon_32.png#" width="16" height="16" class="head-logo" alt="logo" />
<header>
<nav>
<h1>
<img src="{$asset_path}/img/favicon_128.png#" loading="lazy" height="120px" alt="logo" />
<a href="{$titleLink}">
{$shaarlititle}
</a>
</header>
<a href="#" class="menu-toggle" id="menu-toggle" aria-label="{'Menu'|t}"><s class="bar" aria-hidden="true"></s><s class="bar" aria-hidden="true"></s></a>
</div>
</div>
<div class="pure-u-1">
<div class="pure-menu menu-transform pure-menu-horizontal pure-g">
<ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
<li class="pure-menu-item pure-u-0 pure-u-lg-visible">
<img src="{$asset_path}/img/logo_myShaarli.png#" width="120" height="45" class="head-logo" alt="logo" />
<a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-desktop">
{$shaarlititle}
</a>
</li>
</h1>
<ul>
{loop="$plugins_header.buttons_toolbar"}
<li class="pure-menu-item shaarli-menu-plugin">
<li>
<a
{$value.attr.class=isset($value.class) ? $value.attr.class . ' pure-menu-link' : 'pure-menu-link'}
{loop="$value.attr"}
{$key}="{$value}"
{/loop}>
@ -31,74 +18,59 @@
</li>
{/loop}
{if="$is_logged_in || $openshaarli"}
<li class="pure-menu-item">
<a href="{$base_path}/admin/add-shaare" class="pure-menu-link" id="shaarli-menu-shaare">
<i class="fa fa-plus" aria-hidden="true"></i> {'Shaare'|t}
<li>
<a href="{$base_path}/admin/add-shaare">
{'Shaare'|t}
</a>
</li>
<li class="pure-menu-item" id="shaarli-menu-tools">
<a href="{$base_path}/admin/tools" class="pure-menu-link">
<i class="fa fa-cog" aria-hidden="true"></i> {'Tools'|t}
<li>
<a href="{$base_path}/admin/tools">
{'Tools'|t}
</a>
</li>
{/if}
<li class="pure-menu-item" id="shaarli-menu-tags">
<a href="{$base_path}/tags/cloud" class="pure-menu-link">
<i class="fa fa-cloud" aria-hidden="true"></i> {'Tag cloud'|t}
<li>
<a href="{$base_path}/tags/cloud">
{'Tag cloud'|t}
</a>
</li>
{if="$thumbnails_enabled"}
<li class="pure-menu-item" id="shaarli-menu-picwall">
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}" class="pure-menu-link">
<i class="fa fa-picture-o" aria-hidden="true"></i> {'Picture wall'|t}
<li>
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}">
{'Picture wall'|t}
</a>
</li>
{/if}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-rss">
<a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
</li>
{if="$is_logged_in"}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-logout">
<a href="{$base_path}/admin/logout" class="pure-menu-link">{'Logout'|t}</a>
</li>
{else}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-login">
<a href="{$base_path}/login" class="pure-menu-link">{'Login'|t}</a>
</li>
{/if}
</ul>
<div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a href="#" class="pure-menu-link" title="Toggle Dark/Light theme" aria-label="Toggle Dark/Light theme" onclick="switchTheme();">
<ul>
<li>
<a href="#" title="Toggle Dark/Light theme" aria-label="Toggle Dark/Light theme" onclick="switchTheme();">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</a>
</li>
<li class="pure-menu-item" id="shaarli-menu-desktop-rss">
<a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}">
<li>
<a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}">
<i class="fa fa-rss" aria-hidden="true"></i>
</a>
</li>
{if="!$is_logged_in"}
<li class="pure-menu-item" id="shaarli-menu-desktop-login">
<a href="{$base_path}/login" class="pure-menu-link"
<li>
<a href="{$base_path}/login"
data-open-id="header-login-form"
id="login-button" aria-label="{'Login'|t}" title="{'Login'|t}">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
{else}
<li class="pure-menu-item" id="shaarli-menu-desktop-logout">
<a href="{$base_path}/admin/logout" class="pure-menu-link" aria-label="{'Logout'|t}" title="{'Logout'|t}">
<li>
<a href="{$base_path}/admin/logout" aria-label="{'Logout'|t}" title="{'Logout'|t}">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</a>
</li>
{/if}
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main id="content" class="container" role="main" data-theme="dark">
<div id="search" class="subheader-form searchform-block header-search">

View file

@ -16,8 +16,7 @@
{/if}
<div class="pure-g">
<div class="pure-u-lg-1-6 pure-u-1-24"></div>
<div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
<div class="page-form page-visitor">
{$countPics=count($linksToDisplay)}
<h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
@ -50,7 +49,6 @@
{/loop}
</div>
</div>
<div class="pure-u-lg-1-6 pure-u-1-24"></div>
</div>
{include="page.footer"}

View file

@ -127,7 +127,7 @@
<input type="hidden" name="token" value="{$token}">
</form>
<form action="{$base_path}/admin/plugins" method="POST">
<form action="{$base_path}/admin/plugins" method="POST" class="pluginform-container">
<div class="pure-g">
<div class="pure-u-lg-1-8 pure-u-1-24"></div>
<div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">

View file

@ -9,8 +9,7 @@
{include="tag.sort"}
<div class="pure-g">
<div class="pure-u-lg-1-6 pure-u-1-24"></div>
<div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
<div class="page-form page-visitor">
{$countTags=count($tags)}
<h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
{if="!empty($search_tags)"}
@ -69,4 +68,3 @@
{include="page.footer"}
</body>
</html>

View file

@ -6,6 +6,7 @@
<body>
{include="page.header"}
<section>
<div class="pure-g">
<div class="pure-u-lg-1-3 pure-u-1-24"></div>
<div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
@ -130,6 +131,8 @@
</div>
</div>
</section>
{include="page.footer"}
<input type="hidden" id="bookmarklet-alert"
value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}">