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 name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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>
|
||||
<body>
|
||||
<header>
|
||||
<h1>GNU social</h1>
|
||||
<aside>The free/libre software social networking platform.</aside>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://gnusocial.network/">Version 2</a></li>
|
||||
<li><a href="v3/">Version 3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<h2>The project</h2>
|
||||
<p>True to the Unix-philosophy of small programs to do a small job, GNU
|
||||
social is a social communication software used
|
||||
in <a href="https://blog.diogo.site/what-is-the-fediverse">federated social networks</a>.
|
||||
</p>
|
||||
<p>It is widely supported and has a large userbase. It is already used by
|
||||
the <a href="https://www.fsf.org/">Free Software Foundation</a>.
|
||||
As the GNU operating system, is built around privacy and trustworthy
|
||||
technology based on free software(free as in freedom, specifically
|
||||
to run, study, change and distribute yoursoftware as you please).
|
||||
GNU social is technology for communities to runand host their own social media.</p>
|
||||
<p>Currently, we’re working on adding features to easily and flexibly
|
||||
create groups and improve tags, allowing easier content filtering and
|
||||
connecting with anyone that shares your interests, all under your own
|
||||
control and without infringing your privacy.</p>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="https://gnusocial.network/" class="pure-menu-link">Version 2</a></li>
|
||||
<li class="pure-menu-item"><a href="v3/" class="pure-menu-link">Version 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="splash-container">
|
||||
<div class="splash">
|
||||
<h1 class="splash-head"><a href="#"><img src="https://gnusocial.network/assets/img/logo.png" alt="GNU social"></a></h1>
|
||||
<p class="splash-subhead">
|
||||
The free software social networking platform.
|
||||
</p>
|
||||
<a href="communities/" class="pure-button pure-button-primary">Join</a>
|
||||
<a href="https://notabug.org/diogo/gnu-social/src/nightly/INSTALL.md" class="pure-button pure-button-primary">Own</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
|
||||
<h2 class="content-head is-center">Features</h2>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<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>
|
||||
<li><strong>Stable.</strong> GNU social has been used in production environments for over ten years.</li>
|
||||
<li><strong>Plug and Play.</strong> Because GNU social is minimal and libre, it runs virtually anywhere you
|
||||
can run a common piece of web software, such as WordPress or Drupal. JavaScript is optional.</li>
|
||||
<li><strong>Privacy focused.</strong> GNU social is part of the GNU project, it's 100% free software, with
|
||||
no malicious features or spyware.</li>
|
||||
</ul>
|
||||
<div class="pure-g">
|
||||
<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-rocket"></i>
|
||||
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 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><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
|
||||
the operation or content of sites that run its software.</i>
|
||||
<h3>Who makes GNU social?</h3>
|
||||
<p>The current development team is lead by <a href="https://www.diogo.site/">Diogo Cordeiro</a>. A
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Contact</h2>
|
||||
<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>
|
||||
</body>
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Support GNU social</h2>
|
||||
<p>Support the team making GNU social possible!</p>
|
||||
<div class="pure-g">
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||
<h4>Who makes GNU social?</h4>
|
||||
<p>The current development team is lead by <a href="https://www.diogo.site/">Diogo Cordeiro</a>. A
|
||||
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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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