aboutsummaryrefslogtreecommitdiffstats
path: root/includes/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'includes/main.css')
-rw-r--r--includes/main.css150
1 files changed, 82 insertions, 68 deletions
diff --git a/includes/main.css b/includes/main.css
index 0f94c46..5f33cfb 100644
--- a/includes/main.css
+++ b/includes/main.css
@@ -1,20 +1,21 @@
html {
- accent-color: darkred;
- text-align: justify;
+ accent-color: darkred;
+ text-align: justify;
}
* :any-link {
- color: inherit;
- text-decoration: underline;
+ color: inherit;
+ text-decoration: underline;
}
aside {
- max-width: max(40%, 12rem);
- background: darkred;
- color: white;
- float: right;
- margin: 1rem;
- padding: 0.5rem;
+ max-width: max(40%, 12rem);
+ background: darkred;
+ color: white;
+ float: right;
+ margin: 0.5rem;
+ margin-left: 1rem;
+ padding: 0.5rem;
}
img,
@@ -25,88 +26,101 @@ audio,
iframe,
embed,
object {
- max-width: 100%;
- width: fit-content;
- padding: 1rem;
- margin: auto;
+ max-width: 100%;
+ width: fit-content;
+ display: block;
}
img,
svg,
video,
canvas {
- height: auto;
+ height: auto;
}
picture {
- display: contents;
+ display: contents;
+
}
@media screen {
- * :any-link:hover,
- * :any-link:active {
- font-style: italic;
- }
+ * :any-link:hover,
+ * :any-link:active {
+ font-style: italic;
+ }
+
+ body {
+ max-width: min(100dvw, 58rem);
+ min-height: 100dvh;
+ padding: 0.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr auto;
+ grid-template-areas:
+ 'header'
+ 'main'
+ 'footer';
+ display: grid;
+ }
+
+ header,
+ footer {
+ padding: 1rem;
+ font-weight: bolder;
+ background-color: darkred;
- body {
- max-width: min(100dvw, 58rem);
- min-height: 100dvh;
- padding: 0.5rem;
- margin-left: auto;
- margin-right: auto;
- grid-template-columns: 1fr;
- grid-template-rows: auto 1fr auto;
- grid-template-areas:
- 'header'
- 'main'
- 'footer';
- display: grid;
- }
+ *:any-link {
+ text-decoration: none;
+ }
+ }
- :is(header, footer) {
- padding: 1rem;
- font-weight: bolder;
- background-color: darkred;
- }
+ header {
+ grid-area: header;
+ }
- :is(header, footer) *:any-link {
- text-decoration: none;
- }
+ main {
+ grid-area: main;
+ }
- header {
- grid-area: header;
- }
+ footer {
+ align-self: end;
+ grid-area: footer;
+ }
+
+ nav>a {
+ margin-right: 0.5rem;
+ }
+}
- main {
- grid-area: main;
- }
+@media (forced-colors: active) {
- footer {
- align-self: end;
- grid-area: footer;
- }
+ header,
+ footer {
+ border: 2px solid;
+ }
- nav>a {
- margin-right: 0.5rem;
- }
+ aside {
+ border: 2px solid;
+ }
}
@media print {
- header,
- footer {
- display: none;
- }
+ header,
+ footer {
+ display: none;
+ }
- section,
- table {
- orphans: 4;
- break-inside: auto;
- }
+ section,
+ table {
+ orphans: 4;
+ break-inside: auto;
+ }
- tr {
- break-inside: avoid;
- break-before: auto;
- }
+ tr {
+ break-inside: avoid;
+ break-before: auto;
+ }
}