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 @@
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.
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.
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.
GNU social is part of the GNU project, it's 100% free software, with no malicious features or spyware.
@@ -100,7 +100,7 @@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 the project on:
XMPP: xmpp:gnusocial@conference.bka.li?join,
@@ -123,7 +123,7 @@