diff --git a/assets/css/style.css b/assets/css/style.css index 274ca65..542eff9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -4,20 +4,29 @@ box-sizing: border-box !important; scroll-margin: 5rem; } + a img, :link img, :visited img { border: none; } + :focus { outline: none; } + ::-moz-focus-inner { border: 0; } + form { all: unset; } + +ul li { + margin-left: 1rem !important; +} + body, html { scroll-behavior: smooth; @@ -25,13 +34,15 @@ html { -moz-osx-font-smoothing: grayscale; height: 100vh; font-size: 1rem; - font-family: "open_sansregular"; + font-family: "open_sansregular", sans-serif; color: #221e22; background-color: #f6f4f6; } + body * { position: relative; } + header { z-index: 3; position: fixed; @@ -43,40 +54,56 @@ header { top: 0; left: 0; padding: 0.5rem 1rem 0.5rem 1rem; - -webkit-box-shadow: 2px 5px 16px 0px rgba(162, 36, 48, 0.4), - 17px 26px 15px 0px rgba(0, 0, 0, 0); - box-shadow: 2px 5px 16px 0px rgba(162, 36, 48, 0.4), - 17px 26px 15px 0px rgba(0, 0, 0, 0); + + box-shadow: 0 1px 1px rgba(162, 36, 48, 0.1), 0 2px 2px rgba(162, 36, 48, 0.1), + 0 4px 4px rgba(162, 36, 48, 0.1), 0 8px 8px rgba(162, 36, 48, 0.1), + 0 16px 16px rgba(162, 36, 48, 0.1); } + header ul { list-style: none; } + header * { font-size: inherit; color: #f6f4f6; height: 100vh; - max-height: 3rem; + max-height: 2rem; display: flex; align-items: center; } + .home-menu { display: flex; justify-content: space-between; } + .menu-heading { display: flex; color: #f6f4f6; } -.menu-heading b { -} + .menu-heading img { height: 1.25rem; } + .menu-link { - line-height: 1.4em; - margin-left: 1rem; + padding: 2px 12px; + font-size: 0.8em; color: #f6f4f6; + font-family: "open_sansbold", sans-serif; + border-radius: 0.5rem; + box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075); } + +.menu-link:focus, +.menu-link:hover, +.ribbon-content a:focus, +.ribbon-content a:hover { + text-decoration: none !important; + box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 0.075), inset 0 2px 2px hsl(0deg 0% 0% / 0.075), inset 0 4px 4px hsl(0deg 0% 0% / 0.075), inset 0 8px 8px hsl(0deg 0% 0% / 0.075), inset 0 16px 16px hsl(0deg 0% 0% / 0.075); +} + .button { background-color: #221e22ee; border-radius: 0.5rem; @@ -85,15 +112,18 @@ header * { align-self: flex-end; width: max-content; } + hr { margin-bottom: 1rem; width: 100%; color: #221e2266; } + #log-of-past-successes { display: flex; flex-direction: column; } + @media screen and (min-width: 2000px) and (min-height: 1000px) { .content, .content-team { @@ -101,61 +131,75 @@ hr { padding-right: 20% !important; } } + @media screen and (min-width: 800px) { .l-box { margin-right: 4rem; } } + @media screen and (max-width: 800px) { .menu-list { font-size: 1rem !important; } + .content, .content ~ * { top: unset !important; padding-top: 0 !important; position: relative !important; } + .soc { top: 3rem !important; height: calc(100vh - 4rem); } + .splash-head { - font-size: 2rem !important; + font-size: 3rem !important; } + .splash-head img { height: 3rem !important; width: 3rem !important; } + .content, .ribbon-wrapper, .content-team { padding: 1.5rem !important; } + .content-team .g .l-box-lrg:last-child { flex: 1 !important; word-break: keep-all; white-space: nowrap; } + .l-box { margin-right: 1rem; } + footer { position: relative !important; } } + .body-wrapper { margin-top: 4rem; } + .body-wrapper a { - font-family: "open_sansbold"; + font-family: "open_sansbold", sans-serif; font-weight: bold; } + .splash { text-align: center; - padding: 3rem; + padding: 1rem; background-color: #f6f4f6; } + .splash-head { display: inline-flex; flex-wrap: wrap; @@ -167,61 +211,86 @@ hr { cursor: default; margin-bottom: 1rem; } + .splash-head img { height: 6rem; width: 6rem; margin-right: 5px; } + .content-head { font-family: "open_sansbold", sans-serif; } + .content { z-index: 2; position: sticky; - padding: 4rem; + padding: 3rem; background-color: #e9eaed; } + +[class^="content"] h1 { + font-family: "open_sansbold", sans-serif; +} + +h2 { + font-family: "open_sansbold", sans-serif !important; + margin: 0.4em 0 0.2em 0 !important; +} + .is-center { text-align: center; } + .content .g { display: flex; flex-wrap: wrap; justify-content: space-between; } + .content .g .l-box { flex: 1; min-width: 10rem; } + .content ~ * { z-index: 3; position: sticky; - top: 4rem; } + .ribbon-wrapper { background-color: #f6f4f6; padding: 4rem; } + .ribbon { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } + .ribbon img { min-width: 15rem; max-height: 200px; margin: 0 2rem 2rem 2rem; } + .ribbon-content h2 { margin-top: unset; } + .ribbon-content a { background-color: #a22430; color: #f6f4f6; padding: 4px 12px; + margin-right: 4px; border-radius: 0.5rem; + box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), + 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), + 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075); } + .content-team { z-index: 3; position: sticky; @@ -229,25 +298,31 @@ hr { padding: 4rem; background-color: #e9eaed; } + .content-team .g { display: flex; flex-wrap: wrap; justify-content: space-between; } + .content-team .g .l-box-lrg { text-align: justify-all; padding-inline-end: 2rem; } + .content-team .g .l-box-lrg:first-child { flex: 1; min-width: 20rem; } + .content-team .g .l-box-lrg:nth-child(2) { flex: 1; } + .content-team .g .l-box-lrg:last-child { flex: 0.5; } + #nodes { display: flex; flex-direction: column; @@ -258,21 +333,26 @@ hr { max-width: max-content; width: 100%; } + #nodes td, #nodes th { width: 100%; border: 1px solid #ddd; padding: 6px 12px; } + #nodes tr:nth-child(even) { background-color: #f6f4f6; } + #nodes tr:nth-child(odd) { background-color: #eeeeee; } + #nodes tr:hover { background-color: #e9eaed; } + #nodes th { padding-top: 12px; padding-bottom: 12px; @@ -280,14 +360,16 @@ hr { background-color: #a22430; color: #f6f4f6; } + .footer { width: 100%; padding: 1rem; background-color: #333333; color: #e9eaed; } + .footer a { - font-family: "open_sansbold"; + font-family: "open_sansbold", sans-serif; font-weight: bold; color: #e9eaed; } diff --git a/index.html b/index.html index 943967a..be7d137 100644 --- a/index.html +++ b/index.html @@ -49,33 +49,33 @@
-

+

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.

@@ -100,7 +100,7 @@

Support the team making GNU social possible!

-

Who makes GNU social?

+

Who makes GNU social?

Many developers have been involved in the making of GNU social. It's hard to keep a precise record of so many valuable contributions.

Version 3 development is being maintained by Diogo Cordeiro, Hugo Sales and Eliseu Amaro.

Version 2 development was maintained by Diogo Cordeiro with many important contributions from Alexei Sorokin and the help of Summer of Code students.

@@ -109,7 +109,7 @@
-

Discuss

+

Discuss

Discuss the project on:
XMPP: xmpp:gnusocial@conference.bka.li?join,
@@ -123,7 +123,7 @@

-

Tell Others

+

Tell Others

gs-logos.tar.gz (14.2 kB)