Browse Source

[LANDING] Quick fix, blog script overwrote this file.

master
Eliseu Amaro 2 weeks ago
parent
commit
94e9fac122
1 changed files with 137 additions and 111 deletions
  1. +137
    -111
      index.html

+ 137
- 111
index.html View File

@@ -1,111 +1,137 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" type="text/css" />
<link rel="stylesheet" href="blog.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
<title>My fancy blog - My fancy blog</title>
</head><body>
</div></div></div>
<div id="template-wrapper"><div class="template-unit">
<h3><a class="ablack" href="updates-interface-and-accessibility.html">
Updates: Interface and accessibility
</a></h3>
<!-- bashblog_timestamp: #202109131730.12# -->
<div class="subtitle">September 13, 2021 &mdash;
John Smith
</div>
<!-- text begin -->

<p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
This update has been in the works for a long time&hellip; Many considerations had to be done, and given the current state of
modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>

<p>We hope you like it!</p>

<h3>The prime directive</h3>

<blockquote><p>Modern looking, consistent and accessible UI across all browsers.
Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>

<p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

<h3>Features</h3>

<ul>
<li>Accessible

<ul>
<li>Easy to use keyboard only navigation

<ul>
<li>Feedback on focused elements</li>
<li>Keyboard shortcuts to access main regions</li>
<li>Vi-like shortcuts</li>
</ul>
</li>
<li>Screen reader tested

<ul>
<li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
<li>Brief description of navigation links</li>
<li>Using semantic HTML whenever possible</li>
</ul>
</li>
<li>Special care given for styling solutions that could break accessibility</li>
<li>Colors and type sizes in accordance to W3C contrast guidelines

<ul>
<li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
</ul>
</li>
</ul>
</li>
<li>Fast, the content provided to the user really is just markup and some CSS rules

<ul>
<li>Optionally there will be some small use cases where JS makes sense (it&rsquo;s the only thing modern browsers understand e.e)

<ul>
<li>For example, cropping your avatar before uploading a new one.</li>
<li>This is the only example until now.</li>
</ul>
</li>
</ul>
</li>
<li>Dark and light default themes available (according to your system theme)</li>
<li>Graceful degradation for unsupported HTML elements</li>
<li>Achieving modern user interface patterns without JS</li>
<li>Various layout engines tested and work as they should

<ul>
<li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc&hellip;)</li>
<li>WebkitGTK (Epiphany, Midori, etc&hellip;)</li>
<li>Gecko (Firefox and derivatives)</li>
<li>Goanna (Palemoon, Basilisk, etc&hellip;)</li>
<li>Internet Explorer</li>
</ul>
</li>
</ul>


<h3>Video</h3>

<h4>Keyboard tests</h4>

<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>




<p class="readmore"><a href="./updates-interface-and-accessibility.html">Read more...</a></p>
<div id="all_posts"><a href="all_posts.html">View more posts</a> &mdash; <a href="all_tags.html">All tags</a> &mdash; <a href="feed.rss">Subscribe</a></div>
</div>
<div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> &mdash; <a href="mailto:john&#64;smith&#46;com">john&#64;smith&#46;com</a><br/>
Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
</div></div>
</body></html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
<meta name="description" content="GNU social; A free software social networking platform.">
<title>GNU social &mdash; a free software social networking platform</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel='stylesheet' type='text/css' href="assets/fonts/opensans/opensans.css">
</head>

<body>
<header class="header">
<div class="home-menu menu menu-horizontal menu-fixed">
<a class="menu-heading" href="https://gnusocial.rocks/">
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
</a>
<ul class="menu-list">
<li class="menu-item menu-selected"><a href="#" class="menu-link">Home</a></li>
<li class="menu-item"><a href="v2/" class="menu-link">Version 2</a></li>
<li class="menu-item"><a href="v3/" class="menu-link">Version 3</a></li>
</ul>
</div>
</header>
<div class="body-wrapper">
<div class="splash-container">
<div class="splash">
<div class="splash-head">
<img src="assets/img/gnu-social-logo.svg" alt="GNU social">
<b>gnu</b>social
</div>
<p class="splash-subhead">
The free software social networking platform.
</p>
<!--
<a href="communities/" class="button button-primary">Join</a>
<a href="v2/" class="button button-primary">Version 2</a>
-->
</div>
</div>
<div class="content-wrapper">
<div class="content">

<h1 class="content-head">Features</h1>

<div class="g">
<div class="l-box u-1 u-md-1-2 u-lg-1-4">

<h3 class="content-subhead">
Versatile
</h3>
<p>
GNU social supports both single-user and community modes and can be used in an intranet environment or as part of the wider Free Network.
</p>
</div>
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
<h3 class="content-subhead">
Accessible
</h3>
<p>
Follows AnyBrowser and A11Y guidelines. It runs virtually anywhere you can run a common piece of web software, such as WordPress or Drupal. JavaScript is optional.
</p>
</div>
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
<h3 class="content-subhead">
Customizable
</h3>
<p>
True to the Unix-philosophy of small programs to do a small job, GNU social can be easily expanded and customized via its simple plugin API.
</p>
</div>
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
<h3 class="content-subhead">
Privacy focused
</h3>
<p>
GNU social is part of the GNU project, it's 100% free software, with no malicious features or spyware.
</p>
</div>
</div>
</div>
<div class="ribbon-wrapper">
<div class="ribbon">
<img alt="Decentralized social network." src="assets/img/connections-gordon-johnson-pixabay.svg">
<div class="ribbon-content">
<h1 class="content-head content-head-ribbon">Where can I join GNU social?</h1>

<p>There are many kinds of GNU social server instances online right now!</p>
<p><a href="communities/">Click here</a> to see a list of popular GNU social sites you can join!</p>
<em><b>Disclaimer:</b> Please note that the GNU social development team is not responsible for
the operation or content of sites that run its software.</em>
</div>
</div>
</div>

<div class="content-team">
<h1>Support the team making GNU social possible!</h1>
<div class="g">
<div class="l-box-lrg u-1 u-md-1-3">
<h3>Who makes GNU social?</h3>
<p>Many developers have been involved in the making of GNU social. It's hard to keep a precise record of so many valuable contributions.</p>
<p>Version 3 development is being maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a>, <a href="https://hsal.es/">Hugo Sales</a> and <a href="https://eliseuama.ro/">Eliseu Amaro</a>.</p>
<p>Version 2 development was maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a> with many important contributions from <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a> and the help of <a href="soc/">Summer of Code students</a>.</p>
<p>The project started with <a href="https://mat.tl/">Matt Lee</a> and StatusNet with <a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a>. It was since been maintained by <a href="http://mmn-o.se">Mikael Nordfeldth</a>.</p>
<p>A list of contributors is available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>.</p>
</div>

<div class="l-box-lrg u-1 u-md-1-3">
<h3>Discuss</h3>
<p>Discuss the project on:<br>
XMPP: <a
href="xmpp:gnusocial@conference.bka.li?join">xmpp:gnusocial@conference.bka.li?join</a>,<br>
IRC: <a
href="ircs://irc.libera.chat:6697/#social">ircs://irc.libera.chat:6697/#social</a> or<br>
Matrix: <a
href="https://matrix.to/#/#social:libera.chat">#social:libera.chat</a>.</p>
<p>Contribute code, report bugs and request features on our <a href="https://notabug.org/diogo/gnu-social">repository</a>.</p>
<p>You can also ask for help on our <a href="https://lists.gnu.org/mailman/listinfo/social-discuss">mailing list</a>.</p>
<p>If you are a student you can also apply to <a href="/soc">GNU social's Summer of Code</a>.</p>
</div>

<div class="l-box-lrg u-1 u-md-1-3">
<h3>Tell Others</h3>
<p><a href="assets/tgz/logos.tar.gz">gs-logos.tar.gz</a> (14.2 kB)</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer l-box is-center">
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
</footer>
</body>
</html>

Loading…
Cancel
Save