diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.html | 146 | ||||
| -rw-r--r-- | static/main.css | 94 | ||||
| -rw-r--r-- | static/phone.png | bin | 0 -> 98936 bytes |
3 files changed, 174 insertions, 66 deletions
diff --git a/static/index.html b/static/index.html index 976df119..09f2c2ed 100644 --- a/static/index.html +++ b/static/index.html @@ -48,82 +48,106 @@ </ul> </nav> </header> - <main id="grapheneos"> - <h1><a href="#grapheneos">GrapheneOS</a></h1> + <main class="normalize" id="grapheneos"> + <div class="content hero"> - <p>GrapheneOS is a privacy and security focused mobile OS with Android app - compatibility developed as a non-profit <a href="/source">open source</a> project. - It's focused on the research and development of privacy and security technology - including substantial improvements to sandboxing, exploit mitigations and the - permission model.</p> + <div> + <h1><a href="#grapheneos">GrapheneOS</a></h1> + <p>The private and secure mobile operating system with Android app compatibility. + Developed as a non-profit open source project.</p> + <a class="button" href="/install/">Install GrapheneOS</a> + </div> - <p>GrapheneOS improves the privacy and security of the OS from the bottom up. It - deploys technologies to mitigate whole classes of vulnerabilities and make exploiting - the most common sources of vulnerabilities substantially more difficult. It improves - the security of both the OS and the apps running on it. The app sandbox and other - security boundaries are fortified. GrapheneOS tries to avoid impacting the user - experience with the privacy and security features. Ideally, the features can be - designed so that they're always enabled with no impact on the user experience and no - additional complexity like configuration options. It's not always feasible, and - GrapheneOS does add various toggles for features like the Network permission, Sensors - permission, restrictions when the device is locked (USB peripherals, camera, quick - tiles), etc. along with more complex user-facing privacy and security features with - their own UX.</p> + <figure class="device-img"> + <img alt="" class="phone-img" height="580" src="/phone.png"/> + <img alt="" class="phone-logo-img" height="200" src="{{path|/mask-icon.svg}}" width="200"/> + </figure> - <p>The <a href="/features">features page</a> provides an overview of the substantial - privacy and security improvements added by GrapheneOS to the Android Open Source - Project.</p> + </div> - <p>Official releases are available on the <a href="/releases">releases page</a> and - installation instructions are on the <a href="/install/">install page</a>.</p> + <div class="surface"> + <div class="content break"> + <p>Get to know GrapheneOS</p> + </div> + </div> - <p>GrapheneOS also develops various apps and services with a focus on privacy and - security. Vanadium is a hardened variant of the Chromium browser and WebView - specifically built for GrapheneOS. GrapheneOS also includes our minimal - security-focused PDF Viewer, our hardware-based Auditor app / attestation service - providing local and remote verification of devices, and the externally developed - Seedvault encrypted backup which was initially developed for inclusion in - GrapheneOS.</p> + <div class="content"> + <h1 class="start"><a href="#grapheneos">GrapheneOS</a></h1> - <section id="never-google-services"> - <h2><a href="#never-google-services">No Google apps or services</a></h2> + <p>GrapheneOS is a privacy and security focused mobile OS with Android app + compatibility developed as a non-profit <a href="/source">open source</a> project. + It's focused on the research and development of privacy and security technology + including substantial improvements to sandboxing, exploit mitigations and the + permission model.</p> - <p>GrapheneOS will never include either Google Play services or another - implementation of Google services like microG. It's possible to install Play - services as a set of fully sandboxed apps without special privileges via our - <a href="/usage#sandboxed-play-services">sandboxed Play services compatibility - layer</a>. See <a href="/faq#google-services">the FAQ section</a> for more details - on our plans for filling in the gaps from not shipping Play services and Google - apps.</p> - </section> + <p>GrapheneOS improves the privacy and security of the OS from the bottom up. It + deploys technologies to mitigate whole classes of vulnerabilities and make exploiting + the most common sources of vulnerabilities substantially more difficult. It improves + the security of both the OS and the apps running on it. The app sandbox and other + security boundaries are fortified. GrapheneOS tries to avoid impacting the user + experience with the privacy and security features. Ideally, the features can be + designed so that they're always enabled with no impact on the user experience and no + additional complexity like configuration options. It's not always feasible, and + GrapheneOS does add various toggles for features like the Network permission, Sensors + permission, restrictions when the device is locked (USB peripherals, camera, quick + tiles), etc. along with more complex user-facing privacy and security features with + their own UX.</p> - <section id="history"> - <h2><a href="#history">History</a></h2> + <p>The <a href="/features">features page</a> provides an overview of the substantial + privacy and security improvements added by GrapheneOS to the Android Open Source + Project.</p> - <p>GrapheneOS was founded as an open source project in late 2014. It was formerly - known as CopperheadOS. For more details, see the <a href="/history/">history - page</a>.</p> - </section> + <p>Official releases are available on the <a href="/releases">releases page</a> and + installation instructions are on the <a href="/install/">install page</a>.</p> - <section id="upstream"> - <h2><a href="#upstream">Upstream contributions</a></h2> + <p>GrapheneOS also develops various apps and services with a focus on privacy and + security. Vanadium is a hardened variant of the Chromium browser and WebView + specifically built for GrapheneOS. GrapheneOS also includes our minimal + security-focused PDF Viewer, our hardware-based Auditor app / attestation service + providing local and remote verification of devices, and the externally developed + Seedvault encrypted backup which was initially developed for inclusion in + GrapheneOS.</p> - <p>See <a href="/faq#upstream">the FAQ section on our upstream work</a> improving - privacy and security for billions of users by getting a subset of our changes into - core infrastructure projects.</p> - </section> + <section id="never-google-services"> + <h2><a href="#never-google-services">No Google apps or services</a></h2> - <section id="roadmap"> - <h2><a href="#roadmap">Roadmap</a></h2> + <p>GrapheneOS will never include either Google Play services or another + implementation of Google services like microG. It's possible to install Play + services as a set of fully sandboxed apps without special privileges via our + <a href="/usage#sandboxed-play-services">sandboxed Play services compatibility + layer</a>. See <a href="/faq#google-services">the FAQ section</a> for more details + on our plans for filling in the gaps from not shipping Play services and Google + apps.</p> + </section> - <p>See <a href="/faq#roadmap">the FAQ section on the roadmap</a>.</p> - </section> + <section id="history"> + <h2><a href="#history">History</a></h2> - <section id="device-support"> - <h2><a href="/faq#device-support">Device support</a></h2> + <p>GrapheneOS was founded as an open source project in late 2014. It was formerly + known as CopperheadOS. For more details, see the <a href="/history/">history + page</a>.</p> + </section> - <p>See <a href="/faq#device-support">the FAQ section on device support</a>.</p> - </section> + <section id="upstream"> + <h2><a href="#upstream">Upstream contributions</a></h2> + + <p>See <a href="/faq#upstream">the FAQ section on our upstream work</a> improving + privacy and security for billions of users by getting a subset of our changes into + core infrastructure projects.</p> + </section> + + <section id="roadmap"> + <h2><a href="#roadmap">Roadmap</a></h2> + + <p>See <a href="/faq#roadmap">the FAQ section on the roadmap</a>.</p> + </section> + + <section id="device-support"> + <h2><a href="/faq#device-support">Device support</a></h2> + + <p class="end">See <a href="/faq#device-support">the FAQ section on device support</a>.</p> + </section> + </div> </main> <footer> <a href="/"><img src="{{path|/mask-icon.svg}}" width="512" height="512" alt=""/>GrapheneOS</a> diff --git a/static/main.css b/static/main.css index a4295984..ca4c56c4 100644 --- a/static/main.css +++ b/static/main.css @@ -112,7 +112,7 @@ main { overflow-wrap: break-word; } -button { +button, .button, .button:visited { color: white; font-size: 0.9em; font-weight: bold; @@ -124,16 +124,23 @@ button { padding: 0.5rem 1.5rem; } -button:hover { +button:hover, .button:hover { background-color: #1863ad; /* color between default and pressed */ cursor: pointer; } -button:focus { +button:focus, .button:focus { background-color: #2f73b4; /* button pressed on Android */ box-shadow: 0 2px 4px -1px rgba(0 0 0 / 20%), 0 4px 5px 0 rgba(0 0 0 / 14%), 0 1px 10px 0 rgba(0 0 0 / 12%); } +.button, .button:visited, .button:hover, .button:active { + text-decoration: none; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + line-height: 2.5rem; +} + .coin-address { display: block; margin-left: auto; @@ -202,6 +209,60 @@ td { padding: 0.5rem; } +main.normalize { + max-width: 100%; + margin: 0; + padding: 0; +} + +.content { + max-width: 832px; + margin: auto; + padding: 3.5rem 1rem; +} + +.hero { + display: flex; + align-items: center; + flex-flow: row nowrap; + justify-content: space-between; +} + +.hero h1 { + margin: 0; +} + +.device-img { + margin: 0 0 0 2rem; + position: relative; +} + +.phone-logo-img { + position: absolute; + top: 48%; + left: 50%; + transform: translate(-50%, -50%); +} + +.surface { + background-color: #e6e6e6; + width: 100%; +} + +.start { + margin-top: 0; +} + +.end { + margin-bottom: 0; +} + +.break p { + text-align: center; + line-height: 1rem; + margin: 0; +} + /* latin */ @font-face { font-family: Roboto; @@ -252,6 +313,17 @@ td { unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +@media only screen and (max-width: 735px) { + .hero { + flex-flow: column nowrap; + text-align: center; + } + + .device-img { + margin: 3.5rem 0 0; + } +} + @media (prefers-color-scheme: dark) { body { background: #121212; @@ -270,12 +342,12 @@ td { color: rgba(255 255 255 / 87%); /* 87% white */ } - button { + button, .button, .button:visited { color: black; background-color: #95c4ff; /* system_accent1_200, because accent_device_default_dark => system_accent1_100 was too light */ } - button:hover { + button:hover, .button:hover { background-color: #89b4ea; /* color between default and pressed */ } @@ -303,4 +375,16 @@ td { td { border-color: #222; } + + .phone-img { + filter: brightness(0.87); + } + + .phone-logo-img { + filter: invert(87%); + } + + .surface { + background-color: #212121; + } } diff --git a/static/phone.png b/static/phone.png Binary files differnew file mode 100644 index 00000000..4c4c2494 --- /dev/null +++ b/static/phone.png |
