1503d660d2
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.
191 lines
4.4 KiB
CSS
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;
|
|
}
|