You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
10 KiB
379 lines
10 KiB
|
|
/* Extra small */
|
|
@media screen and (max-width:480px) {
|
|
:root {
|
|
--global-font-size:15px;
|
|
--global-line-height:1.2em;
|
|
--global-space:8px;
|
|
--global-pad:0px;
|
|
--min-width:35ch;
|
|
--max-width:100%;
|
|
--head-size-base:100%;
|
|
--head-size-step:0%;
|
|
|
|
/*Content*/
|
|
--dismiss-content:"✘";
|
|
--enter-content:"";
|
|
}
|
|
.full {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
/* Small */
|
|
@media screen and (min-width:481px) {
|
|
:root {
|
|
--global-font-size:18px;
|
|
--global-line-height:1.2em;
|
|
--global-space:8px;
|
|
--global-pad:4px;
|
|
--min-width:35ch;
|
|
--head-size-base:112%;
|
|
--head-size-step:6.25%;
|
|
|
|
/*Content*/
|
|
--dismiss-content:"✘";
|
|
--enter-content:" ⮨";
|
|
}
|
|
.terse {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
/* Medium */
|
|
@media screen and (min-width:768px) {
|
|
:root {
|
|
--global-font-size:0.156in;
|
|
--global-line-height:1.2em;
|
|
--global-space:8px;
|
|
--global-pad:4px;
|
|
--min-width:48ch;
|
|
--head-size-base:125%;
|
|
--head-size-step:12.5%;
|
|
|
|
/*Content*/
|
|
--dismiss-content:"Close ✘";
|
|
--enter-content:" ⮨";
|
|
}
|
|
.terse {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--font-stack:Roboto, Helvetica, Arial, sans;
|
|
--header-stack:Noto Serif, serif;
|
|
--figures-font-stack:Inconsolata, Liberation Mono, Courier New, monospace;
|
|
|
|
--page-width:85ch;
|
|
|
|
--warning-font-color:firebrick;
|
|
|
|
--warning-background-color:khaki;
|
|
--error-background-color:thistle;
|
|
--valid-font-color:darkgreen;
|
|
--valid-background-color:palegreen;
|
|
|
|
/*Rethink these colors*/
|
|
--content-font-color:black;
|
|
--content-background-color:#FEFEFF;
|
|
--text-hl-color:#E0E0FC;
|
|
--text-ll-color:#251125;
|
|
--text-interactive-color:indigo;
|
|
|
|
--background-texture:url('data:image/png;base64,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');
|
|
}
|
|
|
|
/* Tags */
|
|
html * {
|
|
line-height:var(--global-line-height);
|
|
font-family:var(--font-stack);
|
|
font-size:var(--global-font-size);
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance:none;
|
|
margin: 0;
|
|
}
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
border:none;
|
|
box-sizing:content-box;
|
|
background:transparent;
|
|
color:var(--text-interactive-color);
|
|
font-weight:bold;
|
|
max-width:4.5ch;
|
|
}
|
|
|
|
body {
|
|
background-image:var(--background-texture);
|
|
margin:var(--global-space);
|
|
padding:var(--global-pad);
|
|
min-width:var(--min-width);
|
|
}
|
|
|
|
info-card {
|
|
padding:1em;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
a {
|
|
text-align:center;
|
|
flex-shrink:0;
|
|
height:var(--global-line-height);
|
|
}
|
|
|
|
button {
|
|
background-image:none;
|
|
background-color:var(--content-background-color);
|
|
border-color:var(--text-hl-color);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
padding-top:0.2em;
|
|
padding-bottom:0.4em;
|
|
font-weight:bold;
|
|
font-family:var(--header-stack);
|
|
text-wrap:nowrap;
|
|
}
|
|
h1 {
|
|
font-size:calc(var(--head-size-base) + calc(4 * var(--head-size-step)));
|
|
}
|
|
h2 {
|
|
font-size:calc(var(--head-size-base) + calc(3 * var(--head-size-step)));
|
|
}
|
|
h3 {
|
|
font-size:calc(var(--head-size-base) + calc(2 * var(--head-size-step)));
|
|
}
|
|
h4 {
|
|
font-size:calc(var(--head-size-base) + calc(1 * var(--head-size-step)));
|
|
}
|
|
|
|
/*Line by line highlight*/
|
|
code,
|
|
p,
|
|
.card-body {
|
|
background-image:linear-gradient(var(--text-hl-color) 50%, transparent 50%);
|
|
background-size:var(--min-width) calc(2 * var(--global-line-height));
|
|
}
|
|
|
|
ul>:nth-child(odd) {
|
|
background-color:var(--text-hl-color);
|
|
}
|
|
|
|
/*classes*/
|
|
.postal-invalid {
|
|
color:var(--warning-font-color);
|
|
background-color:var(--warning-background-color);
|
|
}
|
|
.postal-valid {
|
|
color:var(--valid-font-color);
|
|
background-color:var(--valid-background-color);
|
|
}
|
|
|
|
.left-input {
|
|
background-image:
|
|
linear-gradient(to right,
|
|
var(--content-background-color),
|
|
var(--text-hl-color));
|
|
border-color:var(--text-hl-color);
|
|
border-style:solid;
|
|
border-width: 0px var(--global-pad) 0px 0px;
|
|
}
|
|
.right-input {
|
|
display:inline-block;
|
|
background-image:
|
|
linear-gradient(to left,
|
|
var(--content-background-color),
|
|
var(--text-hl-color));
|
|
border-style:hidden;
|
|
padding-left:var(--global-pad);
|
|
}
|
|
|
|
.dismiss-button {
|
|
align-self:center;
|
|
border-style:solid none;
|
|
}
|
|
.dismiss-button::after {
|
|
content:var(--dismiss-content);
|
|
}
|
|
|
|
.interactive-hint {
|
|
background-color:var(--content-background-color);
|
|
border:none;
|
|
height:var(--global-line-height);
|
|
}
|
|
|
|
.card-title {
|
|
display:flex;
|
|
flex-flow:row nowrap;
|
|
align-items:baseline;
|
|
justify-content:space-between;
|
|
max-width:100%;
|
|
margin-bottom:0.2em;
|
|
}
|
|
.card-title > * {
|
|
box-sizing:content-box;
|
|
}
|
|
|
|
.card-body {
|
|
display:flex;
|
|
flex-flow:column nowrap;
|
|
align-items:center;
|
|
text-align:center;
|
|
}
|
|
.card-content {
|
|
position:relative;
|
|
}
|
|
.center {
|
|
display:inline-flex;
|
|
flex-flow:row nowrap;
|
|
align-items:center;
|
|
justify-content:space-around;
|
|
width:100%;
|
|
}
|
|
.center > * {
|
|
padding:0 0.5ch;
|
|
}
|
|
|
|
.right {
|
|
text-align:left;
|
|
position:absolute;
|
|
width:100%;
|
|
top:0%;
|
|
left:100%;
|
|
}
|
|
.left {
|
|
text-align:right;
|
|
position:absolute;
|
|
right:100%;
|
|
width:100%;
|
|
}
|
|
|
|
.title-text {
|
|
display:flex;
|
|
flex-flow:row nowrap;
|
|
align-items:center;
|
|
max-width:87%;
|
|
}
|
|
.title-spacer {
|
|
background-color:var(--text-hl-color);
|
|
height:2px;
|
|
align-self:center;
|
|
margin:0 15px;
|
|
width:90%;
|
|
flex-shrink:100;
|
|
}
|
|
|
|
.card-fineprint {
|
|
display:flex;
|
|
flex-flow:row nowrap;
|
|
justify-content:space-between;
|
|
width:100%;
|
|
padding-top:0.4em;
|
|
}
|
|
.card-fineprint > .title-spacer {
|
|
margin-right:0;
|
|
}
|
|
|
|
.allow-shrink {
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
flex-shrink:50;
|
|
}
|
|
.fineprint {
|
|
font-size:70%;
|
|
color:var(--text-ll-color);
|
|
}
|
|
|
|
.figures {
|
|
font-family:var(--figures-font-stack);
|
|
}
|
|
|
|
/*ids*/
|
|
|
|
#error {
|
|
margin:var(--global-space) auto;
|
|
background-color:var(--error-background-color);
|
|
background-image:initial;
|
|
border-radius:var(--global-space);
|
|
max-width:calc(var(--page-width) + var(--global-space));
|
|
padding:var(--global-pad);
|
|
}
|
|
|
|
#warn {
|
|
margin:var(--global-space) 0;
|
|
background-color:var(--warning-background-color);
|
|
background-image:initial;
|
|
border-radius:var(--global-space);
|
|
max-width:calc(var(--page-width) + var(--global-space));
|
|
padding:var(--global-pad);
|
|
}
|
|
|
|
#main {
|
|
margin:auto;
|
|
background-color:var(--content-background-color);
|
|
background-image:initial;
|
|
border-radius:var(--global-space);
|
|
max-width:calc(var(--page-width));
|
|
padding:var(--global-pad);
|
|
}
|
|
|
|
#info-cards {
|
|
display:flex;
|
|
flex-flow:column;
|
|
justify-content:flex-start;
|
|
align-items:stretch;
|
|
width:100%;
|
|
}
|
|
|
|
#postal-prompt {
|
|
display:flex;
|
|
flex-flow:column;
|
|
text-align:center;
|
|
margin:auto;
|
|
padding:0 1em;
|
|
}
|
|
#postal-prompt > label {
|
|
font-size:calc(var(--head-size-base) + calc(4 * var(--head-size-step)));
|
|
font-weight:bold;
|
|
padding-top:0.2em;
|
|
padding-bottom:0.4em;
|
|
}
|
|
#postal-prompt.cards-displayed > label {
|
|
font-size:initial;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#get-postal:after {
|
|
content:var(--enter-content);
|
|
}
|
|
|
|
#spotlight-segment {
|
|
display:flex;
|
|
justify-content:space-between;
|
|
flex-flow:column wrap;
|
|
min-height:96vh;
|
|
width:100%;
|
|
}
|
|
|
|
/*ids + class override*/
|
|
#postal-prompt.cards-displayed {
|
|
align-self: flex-end;
|
|
align-items:baseline;
|
|
justify-content:flex-end;
|
|
flex-flow:row;
|
|
margin:inherit;
|
|
}
|
|
|