myWebsite

Built with Hugo and a modified version of the risotto theme.
Log | Files | Refs

layout.css (1182B)

      1 /* 1rem = 16px by default */
      2 
      3 .page {
      4     max-width: 64rem;
      5     margin: 1rem auto;
      6     display: grid;
      7     grid-template-areas:
      8       "header"
      9       "body"
     10       "aside"
     11       "footer";
     12     grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */
     13     grid-row-gap: 2rem;
     14 }
     15 
     16 @media (min-width: 45rem) {
     17     .page {
     18         grid-template-areas:
     19           "header  header"
     20           "body    aside"
     21           "footer  footer";
     22         grid-template-columns: minmax(0, 1fr) 15rem;
     23         grid-column-gap: 2rem;
     24     }
     25 }
     26 
     27 /* Header */
     28 .page__header {
     29     grid-area: header;
     30     display: flex;
     31 }
     32 
     33 .page__logo {
     34     flex-shrink: 0;
     35 }
     36 
     37 .page__nav {
     38     flex-grow: 1;
     39 }
     40 
     41 /* Body + aside */
     42 .page__body {
     43     grid-area: body;
     44     background-color: var(--off-bg);
     45     box-shadow: 0 0 0 1rem var(--off-bg);
     46     overflow-wrap: break-word;
     47     border-radius: 0.1rem;
     48 }
     49 
     50 .page__aside {
     51     grid-area: aside;
     52     color: var(--off-fg);
     53     position: sticky;
     54     top: 1rem;
     55     right: 1rem;
     56     overflow-y: auto;
     57     max-height: 95vh;
     58 }
     59 
     60 /* Content */
     61 
     62 .post {
     63 }
     64 
     65 .post__summary {
     66     margin-top: 0.2rem;
     67 }
     68 
     69 
     70 /* Footer */
     71 .page__footer {
     72     grid-area: footer;
     73 }