Basic page support

[cx.git] / public / design / css / style.css

diff --git a/public/design/css/style.css b/public/design/css/style.css
index a09110f5aa19d0fe155cf0d17e17a781a7fa7c0f..a5c06ec02b33420c6a10a5dd521e8d556529fcb8 100644 (file)
--- a/public/design/css/style.css
+++ b/public/design/css/style.css
@@ -12,6 +12,7 @@
 /* Layout */
 
 body {
+       background: #fcfcfc;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
@@ -30,10 +31,6 @@ body > * {
        margin-right: auto;
 }
 
-header {
-       margin-bottom: 8vh;
-}
-
 header h1 {
        font-size: 2em;
 }
@@ -43,6 +40,15 @@ header h1 a {
        text-decoration: none;
 }
 
+header p {
+       font-size: 0.8em;
+}
+
+nav {
+       margin-top: 2vh;
+       margin-bottom: 4vh;
+}
+
 nav ul {
        list-style: none;
        display: flex;
@@ -131,6 +137,11 @@ a {
        text-underline-offset: 0.08em;
 }
 
+a:hover {
+       background-color: navy;
+       color: #fcfcfc;
+}
+
 a:focus {
        outline: 1px solid currentColor;
        outline-offset: 0.2em;
@@ -145,12 +156,19 @@ article + article {
 article img {
        display: block;
        width: 100%;
-       min-height: 20rem;
-       max-height: 40vh;
+       aspect-ratio: 640 / 360;
+       /*min-height: 20rem;
+       max-height: 40vh;*/
        object-fit: cover;
        margin: 0 auto 1rem !important;
 }
 
+article iframe {
+       display: block;
+       width: 100%;
+       aspect-ratio: 640 / 360;
+}
+
 /*@supports (aspect-ratio: 1) {
        article img {
                max-height: unset;