hakurei.app/static/grapheneos.css
Daniel Micay 1503d660d2 use -webkit-fill-available instead of 100vh
The approach of using 100vh interacts poorly with how Chromium and
Safari calculate the viewport height on mobile. They include their
navigation bar as part of the viewport height from the start to avoid
dynamic changes to the viewport site.
2019-07-05 21:40:57 -04:00

191 lines
4.4 KiB
CSS

/* use the standard Material Light theme to match GrapheneOS apps */
/* https://android.googlesource.com/platform/frameworks/base/+/android-9.0.0_r35/core/res/res/values/colors_material.xml */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: -webkit-fill-available;
font-family: Roboto, sans-serif;
background-color: #fafafa; /* grey50 */
color: rgba(0, 0, 0, 0.87); /* 87% black */
margin: 0;
padding: 0;
overflow-y: scroll;
}
.hidden {
display: none;
}
a {
color: #1565c0; /* blue800 */
text-decoration: none;
}
a:visited {
color: #6a1b9a; /* purple800 */
}
a:hover {
text-decoration: underline;
}
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited, h6 a, h6 a:visited {
color: rgba(0, 0, 0, 0.87); /* 87% black */
}
pre {
overflow-x: auto;
}
code, pre {
font-family: "Roboto Mono", monospace;
}
nav ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
margin: 0;
padding: 0;
}
nav {
background-color: #212121; /* grey900 */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0 ,0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
nav ul li {
list-style-type: none;
}
nav ul li:hover {
background-color: #424242; /* grey800 */
}
nav ul li a {
color: #fff; /* 100% white */
display: block;
text-decoration: none;
padding: 1em;
}
nav ul li a:visited {
color: #fff; /* 100% white */
}
nav ul li.active a {
color: #64B5F6; /* blue300 */
}
#content {
margin-left: auto;
margin-right: auto;
padding: 1em;
max-width: 832px;
min-width: 0;
width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
}
#bitcoin_address {
display: inline-block;
}
#bitcoin_address > * {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
footer img {
width: 60px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
margin-top: auto;
margin-left: auto;
margin-right: auto;
padding: 1em;
max-width: 800px;
overflow-wrap: break-word;
text-align: center;
}
footer a {
color: #616161; /* grey500 */
}
footer a:visited {
color: #616161; /* grey500 */
}
#social {
margin-top: 2em;
padding: 0;
list-style-type: none;
}
#social li {
display: inline;
padding: 0 0.5em;
}
#stable-channel ul, #beta-channel ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(/fonts/roboto_latin.woff2?0) format('woff2');
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;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(/fonts/roboto_italic_latin.woff2?0) format('woff2');
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;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(/fonts/roboto_bold_latin.woff2?0) format('woff2');
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;
}
/* latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/fonts/robotomono_latin.woff2?0) format('woff2');
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;
}
/* latin */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 700;
src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/robotomono_bold_latin.woff2?0) format('woff2');
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;
}