Commit 4623c9c0 authored by Gabriele Musco's avatar Gabriele Musco
Browse files

switched to new website design

parent bf325b0c
Pipeline #200222 passed with stage
in 21 seconds
/build
__pycache__
*.glade\~
*.o
.deps
/**/*.swp
/*.bak
/*.gcda
/*.gcno
/*.o
/*.orig
/*.rej
/*.tab.c
/*~
/.*.sw[nop]
/.dirstamp
/.gitignore
/ChangeLog
/GPATH
/GRTAGS
/GSYMS
/GTAGS
/ID
/INSTALL
/Makefile
/Makefile.in
/TAGS
/aclocal.m4
/autom4te.cache
/build-aux
/config
/config.cache
/config.h
/config.h.in
/config.log
/config.lt
/config.status
/config.status.lineno
/configure
/configure.lineno
/gtk-doc.m4
/gtk-doc.make
/intltool-extract.in
/intltool-merge.in
/intltool-update.in
/libtool
/po/*.gmo
/po/*.header
/po/*.mo
/po/*.sed
/po/*.sin
/po/.intltool-merge-cache
/po/Makefile
/po/Makefile.in
/po/Makefile.in.in
/po/Makefile.in.in~
/po/Makevars.template
/po/POTFILES
/po/Rules-quot
/po/grant.pot
/po/stamp-it
/so_locations
/stamp-h1
/tags
/builddir
/buildflatpak
.buildconfig
website/style.css
pages:
image: alpine:latest
stage: deploy
script:
- apk add sassc
- sassc website/style.scss website/style.css
- mkdir .public
- cp -r website/* .public
- mv .public public
......
function getCookie(name) {
for (let cookie of document.cookie.split(';')) {
cookie = cookie.trim();
if (cookie.split('=')[0] == name) {
return cookie.split('=')[1].replace(';', '').trim();
}
}
console.log('no cookie');
return null;
}
function setCookie(name, value) {
document.cookie = `${name}=${value}`;
}
function darktoggle() {
let body = document.getElementsByTagName('body')[0];
body.className = body.className == 'darkmode' ? '' : 'darkmode';
setCookie(
'org.gabmus.darkmode',
body.className == 'darkmode' ? '1' : '0'
);
}
var browserPrefersDarkMode = window.getComputedStyle(
document.getElementById('color_preference_detector')
).content === '"dark"';
if (getCookie('org.gabmus.darkmode') == null) {
setCookie(
'org.gabmus.darkmode',
browserPrefersDarkMode ? '1' : '0'
);
}
if (getCookie('org.gabmus.darkmode') == '1') {
darktoggle();
}
const debounce = (fn) => {
let frame;
return (...params) => {
if (frame) {
cancelAnimationFrame(frame);
}
frame = requestAnimationFrame(() => {
fn(...params);
});
}
};
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
}
document.addEventListener('scroll', debounce(storeScroll), { passive: true });
storeScroll();
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Red Hat Display It'), local('RedHatDisplay-Italic'), url('./RedHatDisplay-Italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: local('Red Hat Display Medium It'), local('RedHatDisplay-MediumItalic'), url('./RedHatDisplay-MediumItalic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: italic;
font-weight: 700;
font-display: swap;
src: local('Red Hat Display Bold It'), local('RedHatDisplay-BoldItalic'), url('./RedHatDisplay-BoldItalic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: italic;
font-weight: 900;
font-display: swap;
src: local('Red Hat Display Black It'), local('RedHatDisplay-BlackItalic'), url('./RedHatDisplay-BlackItalic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Red Hat Display'), local('RedHatDisplay-Regular'), url('./RedHatDisplay-Regular.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('Red Hat Display Medium'), local('RedHatDisplay-Medium'), url('./RedHatDisplay-Medium.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Red Hat Display Bold'), local('RedHatDisplay-Bold'), url('./RedHatDisplay-Bold.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Red Hat Display';
font-style: normal;
font-weight: 900;
font-display: swap;
src: local('Red Hat Display Black'), local('RedHatDisplay-Black'), url('./RedHatDisplay-Black.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
......@@ -2,23 +2,54 @@
<html>
<head>
<meta charset="utf-8"/>
<title>HydraPaper</title>
<title>HydraPaper - Wallpaper manager with multi monitor support</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./marked.min.js"></script>
</head>
<body>
<span id="color_preference_detector"></span>
<button id="darkmodetoggle" onclick="darktoggle()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M6.81 1.102A7 7 0 0 0 1 8a7 7 0 0 0 7 7 7 7 0 0 0 4.594-1.729A8.797 8.797 0 0 1 6 4.766a8.797 8.797 0 0 1 .81-3.664z" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" color="#000" overflow="visible" fill="#2e3436"/>
</svg>
</button>
<div id="markdown">
<nav>
<ul>
<li><a href="#">
<img src="./logo-symbolic.svg" />
<strong>HydraPaper</strong>
</a></li>
<li class="spacer"></li>
<li><a href="#features">Features</a></li>
<li><a href="#install">Install</a></li>
<li><a href="#hack">Hack</a></li>
<li><a href="#support">Support</a></li>
<li>
<a id="darkmodetoggle" onclick="darktoggle()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M6.81 1.102A7 7 0 0 0 1 8a7 7 0 0 0 7 7 7 7 0 0 0 4.594-1.729A8.797 8.797 0 0 1 6 4.766a8.797 8.797 0 0 1 .81-3.664z" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" color="#000" overflow="visible" fill="#fff"/>
</svg>
</a>
</li>
</ul>
</nav>
<div id="jumbotron" style="background-image: linear-gradient(-55deg, #3584e4, #33d17a);">
<div class="content">
<div>
<div class="hbox">
<img src="logo.svg" alt="Logo" />
<div class="title">
<h1>HydraPaper</h1>
<p>Wallpaper manager with multi monitor support</p>
</div>
</div>
<a class="link_button" href="#install">Install</a>
<a class="link_button link_button_border" href="#features">Discover the features</a>
</div>
<img src="screenshots/mainwindow.png" alt="Main Window" />
</div>
</div>
<div id="footer">
<main>
<div id="mainContent">
</div>
</main>
<footer>
<h4>My other projects</h4>
<ul>
<li><a target="_blank" href="https://gabmus.gitlab.io/gnome-feeds">Feeds</a></li>
......@@ -26,10 +57,10 @@
<li><a target="_blank" href="https://gabmus.gitlab.io/whatip">What IP</a></li>
</ul>
<p>
<span id="yearspan">@YEAR@</span> © Gabriele Musco -
<span id="yearspan">2020</span> © Gabriele Musco -
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA-4.0</a>
</p>
</div>
</footer>
<script>
var getFile = (uri, cb) => {
......@@ -41,28 +72,14 @@
client.send();
};
// load md here
var populatemd = (md) => {
document.getElementById('markdown').innerHTML = marked(
md.replace(/<!--@MARGIN@-->/g, '<div style="padding-top: 75px;"></div>'),
{"sanitize": false}
);
var populatePage = (page) => {
document.getElementById("mainContent").innerHTML = page;
};
getFile('./page.md', populatemd);
getFile('./page.html', populatePage);
document.getElementById('yearspan').innerHTML = new Date().getFullYear();
function darktoggle() {
body = document.getElementsByTagName('body')[0];
body.className = body.className == 'darkmode' ? '' : 'darkmode';
}
if (window.getComputedStyle(
document.getElementById('color_preference_detector')
).content === '"dark"') {
darktoggle();
}
</script>
<script src="./detect_page_scroll.js"></script>
<script src="./dark_mode_manager.js"></script>
</body>
</html>
This diff is collapsed.
<h2 id="features">Features</h2>
<div>
<div>
<h3>Add any folders to your collection</h3>
<p>Manage your collection simply with folders, then add all of them to HydraPaper. You can enable or disable them with just a click.</p>
</div>
<img src="screenshots/folders.png" alt="Folders" />
</div>
<div>
<div>
<h3>Pick your favorites</h3>
<p>We all have favorite wallpapers for any mood. Add them as favorites, and quickly find them back in the <em>Favorites</em> section.</p>
</div>
<img src="screenshots/favorites.png" alt="Favorites" />
</div>
<div>
<div>
<h3>Go random</h3>
<p>You can quickly set random wallpapers, even from the app launcher. Fresh wallpapers in seconds.</p>
</div>
<img src="screenshots/random.png" alt="Random from window" />
<img src="screenshots/randomshortcut.png" alt="Random from shortcut" />
</div>
<div>
<div>
<h3>As you want it</h3>
<p>Customize your interaction as you like it.</p>
</div>
<img src="screenshots/preferences.png" alt="Preferences window" />
</div>
<div>
<div>
<h3>CLI power</h3>
<p>Set random of selected wallpapers from the command line. Great for custom scripts.</p>
</div>
<img src="screenshots/cli.png" alt="CLI help" />
</div>
<hr />
<div class="leftAlign">
<h2 id="install">Install</h2>
<h3>Flatpak (recommended)</h3>
<p><a href="https://flatpak.org/setup/">Install <strong>Flatpak</strong> by following the quick setup guide</a>. Does it work on your distribution? Most likely.</p>
<p>Then, click the button below to install HydraPaper:</p>
<p><a style="display: inline-block;" href="https://flathub.org/apps/details/org.gabmus.hydrapaper"><img src="https://raw.githubusercontent.com/flatpak-design-team/flathub-mockups/master/assets/download-button/download.svg?sanitize=true" height="100" alt="Get it on Flathub" /></a></p>
<h3>Fedora</h3>
<p>HydraPaper is available on Fedora’s official repos. Just run <code>sudo dnf install hydrapaper</code> in your terminal to install it. Alternatively, use <a href="#flatpak">Flatpak</a> to get the latest and greatest version of HydraPaper.</p>
<h3>AUR</h3>
<p>If you’re using Arch Linux or an Arch based system, you can install the <a href="https://aur.archlinux.org/packages/hydrapaper-git/"><code>hydrapaper-git</code></a> package from the AUR.</p>
<hr />
<h2 id="hack">Hack</h2>
<img src="icons/code.svg" alt="Code" />
<p>HydraPaper is written using Python 3 and GTK+ 3. It’s free software, released under the GPL3 license. Feel free to browse the source code on <a href="https://gitlab.gnome.org/GabMus/hydrapaper">the GitLab repository</a>, fork it, make changes or open issues!</p>
<hr />
<h2 id="support">Support</h2>
<img src="icons/bug.svg" alt="Bug" />
<p>Have you found a bug? Do you want a new feature? Whatever the case, opening an issue is never a bad idea. You can do that on <a href="https://gitlab.gnome.org/GabMus/hydrapaper">the issue page of HydraPaper’s GitLab repository</a></p>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment