{"version":3,"mappings":"AACA,aIGE,uCAOA,oFASA,8DAMA,4CAMA,qBAKA,+CAMA,8BAMA,gEAMA,yCAOA,mEAOA,qCAKA,gCAKA,gCACE,wGJ/EJ,YMAE,oaAwBA,kECxBA,0BAIA,oBAIA,iIAME,0BAIA,uBAIA,iDAIE,yEAME,uBAON,oDPvCF,kBCAE,wHAOE,yBAIA,+BAKA,gDAKE,kCAAqC,2CCrBzC,+HAOE,gDAIA,6DAKE,gDAQJ,4MCxBA,sFAME,+CENF,gBACE,oDAKE,wBAMF,gMAQE,4DAME,uBAUJ,8CACE,2BACE,yDAQE,gBAAiB,8CAST,uKAahB,iEAIA,kGAKA,4DAIA,qDAIA","sources":["resources/css/app.css","resources/css/notes.css","resources/css/header.css","resources/css/pagination.css","resources/css/reset.css","resources/css/colours.css","resources/css/theme-selector.css","resources/css/layout.css"],"sourcesContent":["/* First thing we need to do is declare our cascade layers */\n@layer reset, base, components;\n\n@import url('reset.css');\n@import url('colours.css');\n@import url('layout.css');\n@import url('header.css');\n@import url('notes.css');\n@import url('pagination.css');\n@import url('theme-selector.css');\n","@layer components {\n  .note {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--clr-border);\n    border-radius: var(--border-radius);\n    padding: 1ex 2ex;\n\n    .e-content > p:first-child {\n      margin-block-start: 0;\n    }\n\n    .syndication-links {\n      display: flex;\n      flex-direction: row;\n      gap: 1ex;\n\n      svg {\n        border-radius: 4px;\n        width: auto;\n        height: 1lh;\n      }\n    }\n  }\n\n  .reply-to {\n    font-size: 85%;\n    margin-inline: 2ex;\n    padding-inline: 1ex;\n    border: 1px solid var(--clr-border);\n    border-bottom: none;\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n}\n","@layer components {\n  body > header {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    grid-template-rows: auto auto;\n    align-items: baseline;\n    gap: 1rem;\n\n    a {\n      text-decoration: none;\n    }\n\n    h1 {\n      margin: 0;\n      text-wrap: nowrap;\n    }\n\n    nav {\n      display: flex;\n      flex-direction: row;\n      gap: .5rem;\n\n      @media screen and (width <= 1100px) {\n        grid-row: 2;\n        grid-column: 1 / span 3;\n        flex-wrap: wrap;\n      }\n    }\n  }\n}\n","@layer components {\n  .pagination {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n\n    div {\n      display: flex;\n      flex-direction: row;\n      gap: 1ex;\n    }\n  }\n}\n","@layer reset {\n  /* Sourced from https://piccalil.li/blog/a-more-modern-css-reset/ */\n\n  /* Box sizing rules */\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  /* Prevent font size inflation */\n  html {\n    /* stylelint-disable property-no-vendor-prefix */\n    -moz-text-size-adjust: none;\n    -webkit-text-size-adjust: none;\n    /* stylelint-enable property-no-vendor-prefix */\n    text-size-adjust: none;\n  }\n\n  /* Remove default margin in favour of better control in authored CSS */\n  body, h1, h2, h3, h4, p,\n  figure, blockquote, dl, dd {\n    margin-block-end: 0;\n  }\n\n  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\n  ul[role='list'],\n  ol[role='list'] {\n    list-style: none;\n  }\n\n  /* Set core body defaults */\n  body {\n    line-height: 1.5;\n  }\n\n  /* Set shorter line heights on headings and interactive elements */\n  h1, h2, h3, h4,\n  button, input, label {\n    line-height: 1.1;\n  }\n\n  /* Balance text wrapping on headings */\n  h1, h2,\n  h3, h4 {\n    text-wrap: balance;\n  }\n\n  /* A elements that don't have a class get default styles */\n  a:not([class]) {\n    text-decoration-skip-ink: auto;\n    color: currentcolor;\n  }\n\n  /* Make images easier to work with */\n  img,\n  picture {\n    max-width: 100%;\n    display: block;\n  }\n\n  /* Inherit fonts for inputs and buttons */\n  input, button,\n  textarea, select {\n    font-family: inherit;\n    font-size: inherit;\n  }\n\n  /* Make sure textareas without a rows attribute are not tiny */\n  textarea:not([rows]) {\n    min-height: 10em;\n  }\n\n  /* Anything that has been anchored to should have extra scroll margin */\n  :target {\n    scroll-margin-block: 5ex;\n  }\n\n  /* Disable view transition animations for users who don’t want them */\n  @media (prefers-reduced-motion) {\n    ::view-transition-group(*),\n    ::view-transition-old(*),\n    ::view-transition-new(*) {\n      animation: none !important;\n    }\n  }\n}\n","@layer base {\n  :root {\n    color-scheme: light dark;\n\n    --primary-hue: 307;\n    --clr-text: light-dark(\n      oklch(5% 0.1 var(--primary-hue)),\n      oklch(100% 0.1 var(--primary-hue))\n    );\n    --clr-background: light-dark(\n      oklch(100% 0.1 var(--primary-hue)),\n      oklch(15% 0.15 var(--primary-hue))\n    );\n    --clr-border: light-dark(\n      oklch(90% 0.2 var(--primary-hue)),\n      oklch(25% 0.1 var(--primary-hue))\n    );\n\n    /* Adding snow fall colour whilst we are using it */\n    --clr-snow-fall: light-dark(\n      oklch(25% 0.15 var(--primary-hue)),\n      oklch(85% 0.2 var(--primary-hue))\n    );\n  }\n\n  body {\n    background-color: var(--clr-background);\n    color: var(--clr-text);\n  }\n}\n","@layer components {\n  #theme-selector {\n    button {\n      appearance: none;\n      border: none;\n      background: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    }\n\n    /* This is the element with the [popover] attribute */\n    #theme-selector-dropdown {\n      position: absolute;\n      position-area: block-end span-inline-start;\n      margin: 0;\n      border: 2px solid var(--clr-border);\n      background-color: var(--clr-background);\n      color: var(--clr-text);\n\n      fieldset {\n        border: 0;\n        display: flex;\n        flex-direction: row;\n        gap: 1ch;\n\n        input {\n          display: none;\n        }\n      }\n    }\n\n    /*\n     * This is the element with the [popover] attribute\n     * Here we are styling the open and closing animations\n     */\n    @media (prefers-reduced-motion: no-preference) {\n      #theme-selector-dropdown {\n        &:popover-open {\n          transform: translateY(0) scale(1);\n          opacity: 1;\n\n          /*\n           * Start styles for the opening transition.\n           * Added to :popover-open, but after the opened styles.\n           */\n          @starting-style {\n            transform: translateY(30px) scale(0);\n            opacity: 0;\n          }\n        }\n\n        /*\n         * End styles for the closing transition.\n         */\n        transform: translateY(0) scale(0);\n        opacity: 0;\n\n        /*\n         * Enumerate transitioning properties, including display and overlay.\n         */\n        transition: transform, opacity, display allow-discrete, overlay allow-discrete;\n        transition-duration: 0.5s;\n        transform-origin: top right;\n      }\n    }\n  }\n\n  ::view-transition-group(changing-theme) {\n    animation-duration: 1.25s;\n  }\n\n  ::view-transition-new(changing-theme),\n  ::view-transition-old(changing-theme) {\n    mix-blend-mode: normal;\n  }\n\n  ::view-transition-new(changing-theme) {\n    animation-name: reveal;\n  }\n\n  ::view-transition-old(changing-theme) {\n    animation: none;\n  }\n\n  @keyframes reveal {\n    from {\n      clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);\n    }\n\n    to {\n      clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);\n    }\n  }\n}\n","@layer base {\n  :root {\n    --border-radius: 8px;\n  }\n\n  html {\n    font-size: 125%;\n  }\n\n  body {\n    display: grid;\n    grid-template-columns: 1fr min(80ch, 80vw) 1fr;\n    grid-template-rows: min-content 1fr min-content;\n    padding-inline: 4vw;\n\n    > header {\n      grid-column: 1/-1;\n    }\n\n    > main {\n      grid-column: 2/3;\n    }\n\n    > footer {\n      grid-column: 1/-1;\n      margin-block-start: 2ex;\n\n      search form {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 1ex;\n\n        input {\n          min-width: 0;\n        }\n      }\n    }\n  }\n\n  .h-feed {\n    display: flex;\n    flex-direction: column;\n    gap: 2ex;\n  }\n}\n"],"names":[]}