CSS based on https://purecss.io/layouts/marketing/
This commit is contained in:
parent
8bfe315b8e
commit
d79084d006
177
index.html
177
index.html
|
|
@ -4,68 +4,133 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>GNU social</title>
|
<title>GNU social</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||||
|
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>GNU social</h1>
|
<div class="header">
|
||||||
<aside>The free/libre software social networking platform.</aside>
|
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||||
<nav>
|
<a class="pure-menu-heading" href="">GNU social</a>
|
||||||
<ul>
|
<ul class="pure-menu-list">
|
||||||
<li><a href="https://gnusocial.network/">Version 2</a></li>
|
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||||
<li><a href="v3/">Version 3</a></li>
|
<li class="pure-menu-item"><a href="https://gnusocial.network/" class="pure-menu-link">Version 2</a></li>
|
||||||
</ul>
|
<li class="pure-menu-item"><a href="v3/" class="pure-menu-link">Version 3</a></li>
|
||||||
</nav>
|
</ul>
|
||||||
</header>
|
</div>
|
||||||
<h2>The project</h2>
|
</header>
|
||||||
<p>True to the Unix-philosophy of small programs to do a small job, GNU
|
<div class="splash-container">
|
||||||
social is a social communication software used
|
<div class="splash">
|
||||||
in <a href="https://blog.diogo.site/what-is-the-fediverse">federated social networks</a>.
|
<h1 class="splash-head"><a href="#"><img src="https://gnusocial.network/assets/img/logo.png" alt="GNU social"></a></h1>
|
||||||
</p>
|
<p class="splash-subhead">
|
||||||
<p>It is widely supported and has a large userbase. It is already used by
|
The free software social networking platform.
|
||||||
the <a href="https://www.fsf.org/">Free Software Foundation</a>.
|
</p>
|
||||||
As the GNU operating system, is built around privacy and trustworthy
|
<a href="communities/" class="pure-button pure-button-primary">Join</a>
|
||||||
technology based on free software(free as in freedom, specifically
|
<a href="https://notabug.org/diogo/gnu-social/src/nightly/INSTALL.md" class="pure-button pure-button-primary">Own</a>
|
||||||
to run, study, change and distribute yoursoftware as you please).
|
</p>
|
||||||
GNU social is technology for communities to runand host their own social media.</p>
|
</div>
|
||||||
<p>Currently, we’re working on adding features to easily and flexibly
|
</div>
|
||||||
create groups and improve tags, allowing easier content filtering and
|
<div class="content-wrapper">
|
||||||
connecting with anyone that shares your interests, all under your own
|
<div class="content">
|
||||||
control and without infringing your privacy.</p>
|
|
||||||
|
<h2 class="content-head is-center">Features</h2>
|
||||||
|
|
||||||
<h2>Features</h2>
|
<div class="pure-g">
|
||||||
<ul>
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
<li><strong>Versatile.</strong> 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.</li>
|
<h3 class="content-subhead">
|
||||||
<li><strong>Stable.</strong> GNU social has been used in production environments for over ten years.</li>
|
<i class="fa fa-rocket"></i>
|
||||||
<li><strong>Plug and Play.</strong> Because GNU social is minimal and libre, it runs virtually anywhere you
|
Versatile
|
||||||
can run a common piece of web software, such as WordPress or Drupal. JavaScript is optional.</li>
|
</h3>
|
||||||
<li><strong>Privacy focused.</strong> GNU social is part of the GNU project, it's 100% free software, with
|
<p>
|
||||||
no malicious features or spyware.</li>
|
GNU social supports both single-user and community modes and can be used in
|
||||||
</ul>
|
an intranet environment or as part of the wider Free Network.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-mobile"></i>
|
||||||
|
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 pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-th-large"></i>
|
||||||
|
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 pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||||
|
<h3 class="content-subhead">
|
||||||
|
<i class="fa fa-check-square-o"></i>
|
||||||
|
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 l-box-lrg pure-g">
|
||||||
|
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
||||||
|
<img width="300" alt="File Icons" class="pure-img-responsive" src="https://cdn.pixabay.com/photo/2017/02/25/23/52/connections-2099068_960_720.png">
|
||||||
|
</div>
|
||||||
|
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
||||||
|
|
||||||
|
<h2 class="content-head content-head-ribbon">Where can I join GNU social?</h2>
|
||||||
|
|
||||||
<h2>FAQ</h2>
|
|
||||||
<h3>Where can I join GNU social?</h3>
|
|
||||||
<p>There are many kinds of GNU social server instances online right now!</p>
|
<p>There are many kinds of GNU social server instances online right now!</p>
|
||||||
<p><a href="try/">Click here</a> to see a list of popular GNU social sites you can join!</p>
|
<p><a href="try/">Click here</a> to see a list of popular GNU social sites you can join!</p>
|
||||||
<strong>Disclaimer: </strong><i>Please note that the GNU social development team is not responsible for
|
<strong>Disclaimer: </strong><i>Please note that the GNU social development team is not responsible for
|
||||||
the operation or content of sites that run its software.</i>
|
the operation or content of sites that run its software.</i>
|
||||||
<h3>Who makes GNU social?</h3>
|
</div>
|
||||||
<p>The current development team is lead by <a href="https://www.diogo.site/">Diogo Cordeiro</a>. A
|
</div>
|
||||||
list containing the current devs and other contributors is
|
|
||||||
available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>.
|
|
||||||
The founders of the GNU social project were <a href="https://mat.tl/">Matt Lee</a>,
|
|
||||||
<a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a> and
|
|
||||||
<a href="http://mmn-o.se">Mikael Nordfeldth</a>.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Contact</h2>
|
<div class="content">
|
||||||
<p>Discuss the project on our IRC channel <a
|
<h2 class="content-head is-center">Support GNU social</h2>
|
||||||
href="https://webchat.freenode.net/?channels=#social">#social</a> on irc.freenode.net</p>
|
<p>Support the team making GNU social possible!</p>
|
||||||
<p>Contribute code, report bugs and request features on our <a
|
<div class="pure-g">
|
||||||
href="https://notabug.org/diogo/gnu-social">repository</a>.
|
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||||
</p>
|
<h4>Who makes GNU social?</h4>
|
||||||
<p>If you are a student you can also apply to <a
|
<p>The current development team is lead by <a href="https://www.diogo.site/">Diogo Cordeiro</a>. A
|
||||||
href="/soc">GNU social's Summer of Code</a>.
|
list containing the current devs and other contributors is
|
||||||
</p>
|
available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>.
|
||||||
</body>
|
The founders of the GNU social project were <a href="https://mat.tl/">Matt Lee</a>,
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a> and
|
||||||
|
<a href="http://mmn-o.se">Mikael Nordfeldth</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||||
|
<h4>Discuss</h4>
|
||||||
|
<p>Discuss the project on our IRC channel <a
|
||||||
|
href="https://webchat.freenode.net/?channels=#social">#social</a> on irc.freenode.net</p>
|
||||||
|
<p>Contribute code, report bugs and request features on our <a
|
||||||
|
href="https://notabug.org/diogo/gnu-social">repository</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 pure-u-1 pure-u-md-1-3">
|
||||||
|
<h4>Tell Others</h4>
|
||||||
|
<p><a href="assets/zip/logos.tar.gz">gs-logos.tar.gz</a> (14.2 kB)</p>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="l-box is-center">
|
||||||
|
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- BASE STYLES --
|
||||||
|
* Most of these are inherited from Base, but I want to change a few.
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
line-height: 1.7em;
|
||||||
|
color: #3F3B3B;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #FF2035;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: #a22430;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
label {
|
||||||
|
color: #3F3B3B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-img-responsive {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- LAYOUT STYLES --
|
||||||
|
* These are some useful classes which I will need
|
||||||
|
*/
|
||||||
|
.l-box {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-box-lrg {
|
||||||
|
padding: 2em;
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- PURE FORM STYLES --
|
||||||
|
* Style the form inputs and labels
|
||||||
|
*/
|
||||||
|
.pure-form label {
|
||||||
|
margin: 1em 0 0;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-form input[type] {
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
box-shadow: none;
|
||||||
|
font-size: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- PURE BUTTON STYLES --
|
||||||
|
* I want my pure-button elements to look a little different
|
||||||
|
*/
|
||||||
|
.pure-button {
|
||||||
|
background-color: #1f8dd6;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em 2em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.pure-button-primary {
|
||||||
|
background: white;
|
||||||
|
color: #A22430;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- MENU STYLES --
|
||||||
|
* I want to customize how my .pure-menu looks at the top of the page
|
||||||
|
*/
|
||||||
|
|
||||||
|
.home-menu {
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||||
|
}
|
||||||
|
.home-menu {
|
||||||
|
background: #fcfbfa;
|
||||||
|
}
|
||||||
|
.pure-menu.pure-menu-fixed {
|
||||||
|
/* Fixed menus normally have a border at the bottom. */
|
||||||
|
border-bottom: none;
|
||||||
|
/* I need a higher z-index here because of the scroll-over effect. */
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-menu .pure-menu-heading {
|
||||||
|
color: #817F7F;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-menu .pure-menu-selected a {
|
||||||
|
color: #817F7F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-menu a {
|
||||||
|
color: #c33541;
|
||||||
|
}
|
||||||
|
.home-menu li a:hover,
|
||||||
|
.home-menu li a:focus {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #a22430;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- SPLASH STYLES --
|
||||||
|
* This is the blue top section that appears on the page.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.splash-container {
|
||||||
|
background: #E9EAED;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
/* The following styles are required for the "scroll-over" effect */
|
||||||
|
width: 100%;
|
||||||
|
height: 23em;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash {
|
||||||
|
/* absolute center .splash within .splash-container */
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 4em; left: 0; bottom: 0; right: 0;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This is the subheading that appears on the blue section */
|
||||||
|
.splash-subhead {
|
||||||
|
color: #3F3B3B;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- CONTENT STYLES --
|
||||||
|
* This represents the content area (everything below the blue section)
|
||||||
|
*/
|
||||||
|
.content-wrapper {
|
||||||
|
/* These styles are required for the "scroll-over" effect */
|
||||||
|
position: absolute;
|
||||||
|
top: 23em;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 12%;
|
||||||
|
z-index: 2;
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* We want to give the content area some more padding */
|
||||||
|
.content {
|
||||||
|
padding: 1em 1em 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This is the class used for the main content headers (<h2>) */
|
||||||
|
.content-head {
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin: 2em 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||||
|
.content-head-ribbon {
|
||||||
|
color: #3F3B3B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This is the class used for the content sub-headers (<h3>) */
|
||||||
|
.content-subhead {
|
||||||
|
color: #A22430;
|
||||||
|
}
|
||||||
|
.content-subhead i {
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This is the class used for the dark-background areas. */
|
||||||
|
.ribbon {
|
||||||
|
background: #E9EAED;
|
||||||
|
color: #3F3B3B;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The footer */
|
||||||
|
footer {
|
||||||
|
border-top: solid 1px #eeeeee;
|
||||||
|
background: #fbfbfb;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||||
|
* On tablets and other medium-sized devices, we want to customize some
|
||||||
|
* of the mobile styles.
|
||||||
|
*/
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
|
||||||
|
/* We increase the body font size */
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* We can align the menu header to the left, but float the
|
||||||
|
menu items to the right. */
|
||||||
|
.home-menu {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.home-menu ul {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* We increase the height of the splash-container */
|
||||||
|
/* .splash-container {
|
||||||
|
height: 500px;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* We decrease the width of the .splash, since we have more width
|
||||||
|
to work with */
|
||||||
|
.splash {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splash-head {
|
||||||
|
font-size: 250%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* We remove the border-separator assigned to .l-box-lrg */
|
||||||
|
.l-box-lrg {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||||
|
* On desktops and other large devices, we want to over-ride some
|
||||||
|
* of the mobile and tablet styles.
|
||||||
|
*/
|
||||||
|
@media (min-width: 78em) {
|
||||||
|
/* We increase the header font size even more */
|
||||||
|
.splash-head {
|
||||||
|
font-size: 300%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue