Try to fix aspect ratio issues

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

diff --git a/public/design/css/style.css b/public/design/css/style.css
index e3e88d01beee06761baa97ccefce9bc0c21dfe05..27e627b0db15a2fbda74e8e243ca772d0778515f 100644 (file)
--- a/public/design/css/style.css
+++ b/public/design/css/style.css
@@ -5,25 +5,8 @@
 }
 
 @font-face {
 }
 
 @font-face {

-       font-family: Fanwood;
-       src: url(/design/fonts/fanwood/fanwood-webfont.woff);
-}
-
-@font-face {
-       font-family: Fanwood;
-       src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff);
-       font-style: italic;
-}
-
-@font-face {
-       font-family: "Fanwood Text";
-       src: url(/design/fonts/fanwood/fanwood_text-webfont.woff);
-}
-
-@font-face {
-       font-family: "Fanwood Text";
-       src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff);
-       font-style: italic;
+       font-family: "League Spartan";
+       src: url(/design/fonts/raleway/LeagueSpartan-VF.woff);

 }
 
 /* Layout */
 }
 
 /* Layout */


@@ -33,22 +16,31 @@ body {
        flex-direction: column;
        min-height: 100vh;
        padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
        flex-direction: column;
        min-height: 100vh;
        padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;

-       font-family: Fanwood, serif;
+       font-family: "League Spartan", sans-serif;

        font-size: 1.4em;
        line-height: 1.2em;
        color: #222;
 }
 
 body > * {
        font-size: 1.4em;
        line-height: 1.2em;
        color: #222;
 }
 
 body > * {

-       --layout-spacing: max(8vh, 3rem);
-       --max-width: 60ch;
+       --layout-spacing: 4em;
+       --max-width: 50ch;

        width: min(100%, var(--max-width));
        margin-left: auto;
        margin-right: auto;
 }
 
        width: min(100%, var(--max-width));
        margin-left: auto;
        margin-right: auto;
 }
 

+header {
+       margin-bottom: 8vh;
+}
+

 header h1 {
 header h1 {

-       font-size: 4em;
+       font-size: 2em;
+}
+
+header h1 a {
+       color: #000;
+       text-decoration: none;

 }
 
 nav ul {
 }
 
 nav ul {


@@ -69,7 +61,6 @@ nav [aria-current="page"] {
        font-weight: bold;
 }
 
        font-weight: bold;
 }
 

-main,

 main > * + * {
        margin-top: var(--layout-spacing);
 }
 main > * + * {
        margin-top: var(--layout-spacing);
 }


@@ -86,6 +77,10 @@ body > footer div {
        color: #767676;
 }
 
        color: #767676;
 }
 

+article {
+       font-weight: lighter;
+}
+

 article * + * {
        margin-top: 1em;
 }
 article * + * {
        margin-top: 1em;
 }


@@ -104,11 +99,10 @@ article > h1 + .updated {
 }
 
 hr {
 }
 
 hr {

-       width: 80%;

        margin: 4em auto;
        border: 0;
        height: 1px;
        margin: 4em auto;
        border: 0;
        height: 1px;

-       background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+       background: #ccc;

 }
 
 /* Typography */
 }
 
 /* Typography */


@@ -144,19 +138,26 @@ a:focus {
 
 /* Media */
 article + article {
 
 /* Media */
 article + article {

-       border-top: 1px dashed #ccc;
+       border-top: 1px solid #ccc;

        padding-top: var(--layout-spacing);
 }
 
 article img {
        display: block;
        width: 100%;
        padding-top: var(--layout-spacing);
 }
 
 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;
 }
 
        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;
 /*@supports (aspect-ratio: 1) {
        article img {
                max-height: unset;