From d79084d0066064bad5f1399fa8a34aa3c7d53344 Mon Sep 17 00:00:00 2001 From: Diogo Peralta Cordeiro Date: Wed, 31 Mar 2021 12:20:14 +0100 Subject: [PATCH] CSS based on https://purecss.io/layouts/marketing/ --- index.html | 177 ++++++++++++++++++++++----------- styles.css | 279 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 400 insertions(+), 56 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 8a1bfb5..f5df68d 100644 --- a/index.html +++ b/index.html @@ -4,68 +4,133 @@ GNU social + + + + - -
-

GNU social

- - -
-

The project

-

True to the Unix-philosophy of small programs to do a small job, GNU - social is a social communication software used - in federated social networks. -

-

It is widely supported and has a large userbase. It is already used by - the Free Software Foundation. - 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.

-

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.

+ +
+
+
+ GNU social + +
+
+
+
+

GNU social

+

+ The free software social networking platform. +

+ Join + Own +

+
+
+
+
+ +

Features

-

Features

-
    -
  • Versatile. 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.
    • -
  • Stable. GNU social has been used in production environments for over ten years.
    • -
  • Plug and Play. 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.
    • -
  • Privacy focused. GNU social is part of the GNU project, it's 100% free software, with - no malicious features or spyware.
    • -
+
+
+ +

+ + Versatile +

+

+ 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. +

+
+
+

+ + Accessible +

+

+ 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. +

+
+
+

+ + Customizable +

+

+ 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. +

+
+
+

+ + Privacy focused +

+

+ GNU social is part of the GNU project, it's 100% free software, with + no malicious features or spyware. +

+
+
+
+
+
+ File Icons +
+
+ +

Where can I join GNU social?

-

FAQ

-

Where can I join GNU social?

There are many kinds of GNU social server instances online right now!

Click here to see a list of popular GNU social sites you can join!

Disclaimer: Please note that the GNU social development team is not responsible for the operation or content of sites that run its software. -

Who makes GNU social?

-

The current development team is lead by Diogo Cordeiro. A - list containing the current devs and other contributors is - available here. - The founders of the GNU social project were Matt Lee, - Evan Prodromou and - Mikael Nordfeldth. -

+
+
-

Contact

-

Discuss the project on our IRC channel #social on irc.freenode.net

-

Contribute code, report bugs and request features on our repository. -

-

If you are a student you can also apply to GNU social's Summer of Code. -

- +
+

Support GNU social

+

Support the team making GNU social possible!

+
+
+

Who makes GNU social?

+

The current development team is lead by Diogo Cordeiro. A + list containing the current devs and other contributors is + available here. + The founders of the GNU social project were Matt Lee, + Evan Prodromou and + Mikael Nordfeldth. +

+
+ +
+

Discuss

+

Discuss the project on our IRC channel #social on irc.freenode.net

+

Contribute code, report bugs and request features on our repository. +

+

If you are a student you can also apply to GNU social's Summer of Code. +

+
+ +
+

Tell Others

+

gs-logos.tar.gz (14.2 kB)

+

+
+
+
+ +
+ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5fbf4d3 --- /dev/null +++ b/styles.css @@ -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 (

) */ +.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 (

) */ +.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%; + } +}