Browse Source

css updates for narrow screens

master
Inderjit Gill 3 months ago
parent
commit
b54e401c9a
1 changed files with 142 additions and 126 deletions
  1. +142
    -126
      www/civil.css

+ 142
- 126
www/civil.css View File

@ -40,20 +40,6 @@
--coloured-deck-border-radius: 0.3em;
}
@media (max-width: 1200px) {
:root {
--body-width: 93.5%;
--block-width: 70%;
}
}
@media (max-width: 800px) {
:root {
--body-width: 97.5%;
--block-width: 90%;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #2b2b2b;
@ -442,95 +428,6 @@ label.right-margin-toggle:not(.right-margin-number) {
display: none;
}
@media (max-width: 760px) {
body {
width: 84%;
padding-left: 8%;
padding-right: 8%;
}
hr,
section > p,
section > footer,
section > table {
width: 100%;
}
pre > code {
width: 97%;
}
section > ol {
width: 90%;
}
section > ul {
width: 90%;
}
figure {
max-width: 90%;
}
figcaption,
figure.fullwidth figcaption {
margin-right: 0%;
max-width: none;
}
blockquote {
margin-left: 1.5rem;
margin-right: 0rem;
}
blockquote p,
blockquote footer {
width: 100%;
}
label.right-margin-toggle:not(.right-margin-number) {
display: inline;
}
.right-margin,
.right-margin-note,
.right-margin-scribble {
display: none;
}
.right-margin-toggle:checked + .right-margin-note,
.right-margin-toggle:checked + .right-margin,
.right-margin-toggle:checked + .right-margin-scribble {
display: block;
float: left;
left: 1rem;
clear: both;
width: 95%;
margin: 1rem 2.5%;
vertical-align: baseline;
position: relative;
}
label {
cursor: pointer;
}
div.table-wrapper,
table {
width: 85%;
}
nav a {
margin-left: 0;
}
}
@media (max-width: 760px) {
.optional-navigable {
display: none;
}
}
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
@ -969,12 +866,6 @@ label.right-margin-toggle {
clear:both;
}
@media (max-width: 700px) {
#login-menuitem {
margin-bottom: 1rem;
}
}
p.fakelink {
cursor: pointer;
text-decoration: underline;
@ -1031,23 +922,6 @@ section > form { width: var(--block-width); }
margin-left: 4rem;
}
@media (max-width: 1200px) {
.left-margin {
float: right;
text-align: left;
width: 28%;
}
}
@media (max-width: 800px) {
.left-margin {
display: none;
}
.left-margin-inline {
display: none;
}
}
.cancel-offset {
margin-top: 2rem;
}
@ -1271,3 +1145,145 @@ input:required {
.delete-hack {
margin-bottom: -8px;
}
/* Responsive adjustments
========================================================================== */
@media (max-width: 1200px) {
:root {
--body-width: 93.5%;
--block-width: 70%;
}
.left-margin {
float: right;
text-align: left;
width: 28%;
}
}
@media (max-width: 800px) {
:root {
--body-width: 97.5%;
--block-width: 90%;
}
.left-margin {
display: none;
}
.left-margin-inline {
display: none;
}
}
@media (max-width: 760px) {
body {
width: 84%;
padding-left: 8%;
padding-right: 8%;
}
hr,
section > p,
section > footer,
section > table {
width: 100%;
}
pre > code {
width: 97%;
}
section > ol {
width: 90%;
}
section > ul {
width: 90%;
}
figure {
max-width: 90%;
}
figcaption,
figure.fullwidth figcaption {
margin-right: 0%;
max-width: none;
}
blockquote {
margin-left: 1.5rem;
margin-right: 0rem;
}
blockquote p,
blockquote footer {
width: 100%;
}
label.right-margin-toggle:not(.right-margin-number) {
display: inline;
}
.right-margin,
.right-margin-note,
.right-margin-scribble {
display: none;
}
.right-margin-toggle:checked + .right-margin-note,
.right-margin-toggle:checked + .right-margin,
.right-margin-toggle:checked + .right-margin-scribble {
display: block;
float: left;
left: 1rem;
clear: both;
width: 95%;
margin: 1rem 2.5%;
vertical-align: baseline;
position: relative;
}
label {
cursor: pointer;
}
div.table-wrapper,
table {
width: 85%;
}
nav a {
margin-left: 0;
}
#login-menuitem {
margin-bottom: 1rem;
}
}
@media (max-width: 500px) {
:root {
--block-width: 100%;
}
body {
width: 100%;
padding-left: 0;
padding-right: 0;
}
#root {
border-left: 0.1rem solid var(--bg2);
padding: 0 0.8rem;
}
.optional-navigable {
display: none;
}
.svg-container {
width: 100%;
}
}

Loading…
Cancel
Save