gistfile1.txt

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  color-scheme: light dark;

  --main-font: "IBM Plex Sans", sans-serif;
  --code-font: "IBM Plex Mono";

  --space0:     2px;  /* 16 * 0.125 */
  --space1:     4px;  /* 16 * 0.25 */
  --space2:     8px;  /* 16 * 0.5  */
  --space3:    12px;  /* 16 * 0.75 */
  --space4:    16px;  /* 16 * 1    */
  --space5:    20px;  /* 16 * 1.25 */
  --space6:    24px;  /* 16 * 1.5  */
  --space7:    32px;  /* 16 * 2    */
  --space8:    40px;  /* 16 * 2.5  */
  --space9:    48px;  /* 16 * 3    */
  --space10:   64px;  /* 16 * 4    */
  --space11:   80px;  /* 16 * 5    */
  --space12:   96px;  /* 16 * 6    */
  --space13:  128px;  /* 16 * 8    */
  --space14:  160px;  /* 16 * 10   */
  --space15:  192px;  /* 16 * 12   */
  --space16:  256px;  /* 16 * 16   */
  --space17:  384px;  /* 16 * 24   */
  --space18:  512px;  /* 16 * 32   */
  --space19:  640px;  /* 16 * 40   */
  --space20:  768px;  /* 16 * 48   */
  --space21:  896px;  /* 16 * 56   */
  --space22: 1024px;  /* 16 * 64   */
  --space23: 1280px;  /* 16 * 80   */

  --spaceDesktop: 896px;

  --fontSize0: 10px;
  --fontSize1: 12px;
  --fontSize2: 14px;
  --fontSize3: 16px;
  --fontSize4: 18px;
  --fontSize5: 20px;
  --fontSize6: 24px;
  --fontSize7: 30px;
  --fontSize8: 36px;
  --fontSize9: 48px;
  --fontSize10: 60px;
  --fontSize11: 72px;

  --gray25: #fdfdfd;
  --gray50: #fafafa;
  --gray100: #f5f5f5;
  --gray200: #e9eaeb;
  --gray300: #d5d7da;
  --gray400: #a4a7ae;
  --gray500: #717680;
  --gray600: #535862;
  --gray700: #414651;
  --gray800: #252b37;
  --gray900: #181d27;
  --gray950: #0a0d12;

  --dmGray25: #fafafa;
  --dmGray50: #f7f7f7;
  --dmGray100: #f0f0f1;
  --dmGray200: #ececed;
  --dmGray300: #cecfd2;
  --dmGray400: #94979c;
  --dmGray500: #85888e;
  --dmGray600: #61656c;
  --dmGray700: #373a41;
  --dmGray800: #22262f;
  --dmGray900: #13161b;
  --dmGray950: #0c0e12;

  --blue25: #f5faff;
  --blue50: #eff8ff;
  --blue100: #d1e9ff;
  --blue200: #b2ddff;
  --blue300: #84caff;
  --blue400: #53b1fd;
  --blue500: #2e90fa;
  --blue600: #1570ef;
  --blue700: #175cd3;
  --blue800: #1849a9;
  --blue900: #194185;

  --fuchsia25: #fefaff;
  --fuchsia50: #fdf4ff;
  --fuchsia100: #fbe8ff;
  --fuchsia200: #f6d0fe;
  --fuchsia300: #eeaafd;
  --fuchsia400: #e478fa;
  --fuchsia500: #d444f1;
  --fuchsia600: #ba24d5;
  --fuchsia700: #9f1ab1;
  --fuchsia800: #821890;
  --fuchsia900: #6f1877;

  --violet25: #fbfaff;
  --violet50: #f5f3ff;
  --violet100: #ece9fe;
  --violet200: #ddd6fe;
  --violet300: #c3b5fd;
  --violet400: #a48afb;
  --violet500: #875bf7;
  --violet600: #7839ee;
  --violet700: #6927da;
  --violet800: #5720b7;
  --violet900: #491c96;

  --background: light-dark(white, var(--dmGray950));
  --backgroundShadow: light-dark(var(--gray25), var(--dmGray900));
  --backgroundShadow2: light-dark(var(--gray50), var(--dmGray800));
  --borderColor: light-dark(var(--gray200), var(--dmGray700));
  --fontColor: light-dark(var(--gray900), var(--dmGray50));
  --fontColorFade: light-dark(var(--gray600), var(--dmGray400));
  --fontColorPop: light-dark(var(--gray700), var(--dmGray200));

  --brightBackgroundColor: light-dark(var(--blue800), var(--violet700));
  --brightFontColor: light-dark(var(--gray25), var(--dmGray25));

  --highlightColor: light-dark(var(--blue800), var(--violet600));
  --highlightFontColor: light-dark(var(--blue800), var(--dmGray50));

  --focusBackgroundColor: light-dark(var(--gray50), var(--dmGray800));
  --focusBorderColor: light-dark(var(--blue500), var(--violet500));

  --lightGradientColor1: rgba(161,196,253,1);
  --lightGradientColor2: rgba(194,233,251,1);

  --darkGradientColor1: rgba(67,0,177,1);
  --darkGradientColor2: rgba(165,49,220,1);

  --gradient: linear-gradient(45deg,
    light-dark(var(--lightGradientColor1), var(--darkGradientColor1)) 35%,
    light-dark(var(--lightGradientColor2), var(--darkGradientColor2)) 100%);
}

/* LAYOUT / GENERAL */

a, h1, h2, h3, h4, h5 {
  text-decoration: none;
  margin: 0;
}

a {
  color: var(--fontColor);
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--main-font);
  font-size: var(--fontSize3);
  color: var(--fontColor);
  background: var(--background);
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--spaceDesktop);
  min-height: calc(100vh - var(--space13));
  margin: 0 auto;
  padding: var(--space9) var(--space4);
}


/* MENU */

.menu {
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--borderColor);
}

.menu-inner {
  width: var(--spaceDesktop);
  display: flex;
  justify-content: space-between;
  padding: var(--space4) var(--space4);
}

.menu-logo {
  font-family: var(--code-font);
  font-size: var(--fontSize3);
}

.menu-icon {
  display: none;
  border: 0;
  background: transparent;
}

.menu-navigation {
  display: flex;
  gap: var(--space8);
}

.menu-navigation-item {
  font-size: var(--fontSize3);
  font-weight: 300;
}

.menu-navigation-item:hover {
  color: var(--brightBackgroundColor);
}


/* FOOTER */

.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--borderColor);
}

.footer-inner {
  width: var(--spaceDesktop);
  display: flex;
  justify-content: space-between;
  padding: var(--space5) var(--space4);
  font-size: var(--fontSize2);
}

.footer-nav {
  display: flex;
  gap: var(--space5);
}

.footer-link {
  color: var(--fontColorFade);
  font-weight: 400;
}

.footer-link:hover {
  color: var(--fontColor);
}

.footer-copyright {
  color: var(--fontColorFade);
  font-weight: 400;
}


/* FEED */


.feed-profile {
  display: flex;
  padding: 0 var(--space5);
  gap: var(--space5);
}

.feed-profile-image {
  border-radius: 100%;
  height: var(--space14);
}

.feed-profile-title {
  font-weight: 400;
  margin-top: 6px;
}

.feed-profile-intro {
  margin-top: 15px;
  line-height: 1.27;
}

.feed-profile .ui-meta {
  margin-top: 17px;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: var(--space6);
  padding: var(--space9) 0;
}

.feed-header {
  font-size: var(--fontSize2);
  font-family: var(--code-font);
  font-weight: 400;
  color: var(--fontColorFade);
}

.feed-highlight-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--space16);
  background-image: var(--gradient);
  color: var(--highlightFontColor);
  padding: var(--space5);
  border-radius: var(--space1);
}

.feed-highlight-tags {
  display: flex;
  gap: var(--space3);
  padding: var(--space4) 0;
}

.feed-highlight-title {
  font-size: var(--fontSize8);
  font-weight: normal;
  margin: 0;
}

.feed-highlight-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.feed-highlight-teaser {
  font-style: italic;
  max-width: var(--space19);
}

.feed-recent {
  display: flex;
  flex-direction: column;
  gap: var(--space4);
  padding: var(--space5) 0;
}

.feed-recent-posts {
  display: flex;
  gap: var(--space8);
}

.feed-recent-post {
  display: flex;
  flex-direction: column;
  gap: var(--space2);
  flex-grow: 1;
  flex-basis: 0%;
}

.feed-recent-post-title {
  font-size: var(--fontSize4);
  font-weight: 500;
  margin: 0;
}

.feed-recent-post-teaser {
  font-size: var(--fontSize2);
  color: var(--fontColorFade);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feed-recent-post-footer {
  display: flex;
  justify-content: space-between;
}

.feed-recent-post-tags {
  display: flex;
  gap: var(--space3);
  margin: var(--space2) 0;
}

.feed-recent-post-arrow {
  font-size: var(--fontSize4);
  align-self: end;
  color: var(--fontColorFade);
}

.feed-recent-post:hover .feed-recent-post-arrow {
  color: var(--fontColor);
}

.feed-archive-link {
  align-self: center;
  font-size: var(--fontSize2);
  font-weight: 400;
  color: var(--fontColorFade);
  display: flex;
  gap: var(--space1);
}

.feed-archive-link:hover {
  color: var(--fontColor);
}

.feed-archive-link-icon {
  align-self: end;
  position: relative;
  top: 3px;
}


/* POST */

.post-tags {
  display: flex;
  gap: var(--space3);
  margin-top: 14px;
}

.post-title {
  font-size: var(--fontSize9);
  font-weight: normal;
  margin: var(--space4) 0;
  margin-top: 9px;
}

.post-header .ui-meta {
  margin-top: 29px;
  margin-bottom: 13px;
}

.post-content {
  max-width: var(--space20);
  padding: var(--space3) 0;
}

.post-teaser {
  font-style: italic;
  line-height: 1.5;
}

.post-main {
  display: inline-block;
  line-height: 1.5;
}

.post-main::first-letter {
  initial-letter: 2;
  font-weight: 500;
  color: var(--brightBackgroundColor);
  margin-right: var(--space2);
  margin-bottom: var(--space1);
}


/* PAGE */

.page-main {
  display: inline-block;
  line-height: 1.5;
  max-width: var(--space19);
}

.page-main::first-letter {
  initial-letter: 2;
  font-weight: 500;
  color: var(--brightBackgroundColor);
  margin-right: var(--space2);
  margin-bottom: var(--space1);
}


/* TAG SEARCH */

.tag-search-list {
  display: flex;
  flex-direction: column;
  gap: var(--space8);
  padding: var(--space7) 0;
  width: 100%;
  max-width: var(--space18);
}


/* ARCHIVE */

.archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space8);
  padding: var(--space7) 0;
  width: 100%;
  max-width: var(--space18);
}


/* LOGIN */


.login-container {
  display: flex;
  flex-direction: column;
  gap: var(--space6);
  padding: var(--space7) 0;
}


/* ADMIN */

.admin-container {
  display: flex;
  flex-direction: column;
  gap: var(--space6);
  padding: var(--space7) 0;
}

.admin-analytics {
  width: 100%;
  max-width: var(--space18);
  display: flex;
  flex-direction: column;
  gap: var(--space4);
}

#admin-analytics-chart {
  color: var(--borderColor);
  width: 100%;
}

.admin-pages, .admin-posts {
  display: flex;
  flex-direction: column;
  gap: var(--space4);
}

.admin-pages-title, .admin-posts-title, .admin-analytics-title {
  font-size: var(--fontSize3);
  font-family: var(--code-font);
  font-weight: normal;
  color: var(--fontColorFade);
  margin: var(--space2) 0;
}

.admin-pages-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--space18);
  border: 1px solid var(--borderColor);
  border-radius: 4px;
}

.admin-pages-buttons {
  width: 100%;
  display: flex;
  gap: var(--space5);
}

.admin-pages-buttons .ui-button {
  flex-grow: 1;
}

.admin-pages-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--borderColor);
  padding: var(--space3);
}

.admin-pages-link:last-child {
  border-bottom: 0;
}

.admin-pages-link-title {
  font-size: var(--fontSize4);
  font-weight: 400;
}

.admin-pages-link-edit {
  display: flex;
  gap: var(--space1);
  font-size: var(--fontSize2);
  color: var(--fontColorFade);
}

.admin-pages-link:hover {
  .ui-arrow-right {
    color: var(--fontColor);
  }

  .admin-pages-link-edit {
    color: var(--fontColor);
  }
}

.admin-posts-container {
  display: flex;
  flex-direction: column;
  gap: var(--space8);
  padding: var(--space4) 0;
  width: 100%;
  max-width: var(--space18);
}


/* EDIT MENU */

.edit-menu-list {
  max-width: var(--space18);
  display: flex;
  flex-direction: column;
  gap: var(--space3);
  padding: var(--space4) 0;
}

.edit-menu-item {
  display: flex;
  gap: var(--space4);
  padding: var(--space3) var(--space4);
  border: 1px solid var(--borderColor);
  border-radius: 4px;
}

.edit-menu-item--empty {
  color: transparent;
  background: var(--backgroundShadow);
}

.edit-menu-item--ghost {
  background: var(--background);
}


/* EDIT POST */

.edit-post-form {
  display: flex;
  flex-direction: column;
  gap: var(--space6);
}

.edit-post-form-tags-title {
  font-size: var(--fontSize2);
  color: var(--fontColorFade);
  font-weight: 500;
  font-family: var(--code-font);
}

.edit-post-tags {
  display: flex;
  gap: var(--space2);
}


/* EDIT PAGE */

.edit-page-form {
  display: flex;
  flex-direction: column;
  gap: var(--space6);
}


/* UI */


.ui-page-title {
  font-size: var(--fontSize9);
  font-weight: normal;
  margin: var(--space2) 0;
}


/* UI / post */

.ui-post-link {
  display: flex;
  flex-direction: column;
  gap: var(--space2);
  flex-grow: 1;
  flex-basis: 0%;
}

.ui-post-link-header {
  display: flex;
  justify-content: space-between;
}

.ui-post-link-title {
  font-size: var(--fontSize3);
  font-weight: 500;
  margin: 0;
}

.ui-post-link-edit {
  font-size: var(--fontSize2);
  font-weight: 400;
  color: var(--fontColorFade);
  display: flex;
  gap: var(--space1);
}

.ui-post-link-teaser {
  font-size: var(--fontSize2);
  color: var(--fontColorFade);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ui-post-link:hover {
  .ui-arrow-right {
    color: var(--fontColor);
  }

  .ui-post-link-edit {
    color: var(--fontColor);
  }
}


/* UI / tag */

.ui-tag {
  font-size: var(--fontSize1);
  padding: var(--space1) var(--space4);
  background: var(--background);
  border: 1px solid var(--fontColorFade);
  border-radius: 60px;
}

.ui-tag-inverted {
  padding: var(--space1) var(--space4);
  font-size: var(--fontSize1);
  color: var(--brightBackgroundColor);
  border: 1px solid var(--brightBackgroundColor);
  border-radius: 60px;
}

.ui-tag-highlight {
  padding: var(--space1) var(--space4);
  font-size: var(--fontSize1);
  color: var(--highlightFontColor);
  border: 1px solid var(--highlightFontColor);
  border-radius: 60px;
}


/* UI / tag button */

.ui-tag-radio-button input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.ui-tag-radio-button label {
  display: inline-block;
  font-size: var(--fontSize1);
  padding: var(--space1) var(--space4);
  border: 1px solid var(--fontColorFade);
  border-radius: 60px;
}

.ui-tag-radio-button label:hover {
  background-color: var(--focusBackgroundColor);
}

.ui-tag-radio-button input[type="radio"]:focus + label {
  background-color: var(--brightFontColor);
}

.ui-tag-radio-button input[type="radio"]:checked + label {
  background-color: var(--brightBackgroundColor);
  color: white;
}



/* UI / text input */

.ui-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--space1);
}

.ui-input {
  width: 100%;
  max-width: var(--space18);
  height: var(--space5);
  min-height: var(--space8);
  padding: var(--space2);
  font-family: var(--main-font);
  font-size: var(--fontSize3);
  border: 0;
  border-bottom: 1px solid var(--borderColor);
}

.ui-input:focus {
  outline: none;
  border-bottom: 1px solid var(--focusBorderColor);
  background: var( --focusBackgroundColor);
}

.ui-input-label {
  color: var(--fontColorFade);
  font-size: var(--fontSize1);
}


/* UI / button */

.ui-button {
  max-width: var(--space14);
  color: var(--brightFontColor);
  background: var(--brightBackgroundColor);
  padding: var(--space2);
  border: 1px solid var(--brightBackgroundColor);
  border-radius: 2px;
  text-align: center;
}

.ui-button--secondary {
  color: var(--fontColor);
  border-color: var(--borderColor);
  background: var(--backgroundShadow);
}

.ui-button--secondary:hover {
  color: var(--fontColorPop);
  background: var(--backgroundShadow2);
}

.ui-button--secondary:focus {
  border-color: var(--brightBackgroundColor);
}

.ui-button--medium {
  font-size: var(--fontSize2);
  padding: var(--space2);
}

.ui-button--small {
  font-size: var(--fontSize1);
  padding: var(--space1) var(--space3);
}


/* UI / meta */

.ui-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space0);
  border-left: 1px solid var(--highlightFontColor);
  padding: var(--space1) var(--space4);
}

.ui-meta-label {
  font-size: var(--fontSize2);
}

.ui-meta-value {
  font-size: var(--fontSize2);
  font-weight: bold;
}


/* UI / grid */

.ui-grid-header {
  width: 100%;
  position: relative;
}

.ui-grid-background {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.ui-grid-content {
  z-index: 10;
  position: relative;
  width: 100%;
  padding: var(--space5) 0;
}

.ui-grid-stroke {
  stroke: var(--borderColor);
}


/* UI / pagination */


.ui-pagination {
  display: flex;
  gap: var(--space4);
  font-size: var(--fontSize2);
}

.ui-pagination-pages {
  display: flex;
  gap: var(--space4);
  align-items: flex-end;
}

.ui-pagination-previous, .ui-pagination-next {
  display: flex;
  gap: var(--space2);
  color: var(--fontColorFade);
  background: transparent;
  border: none;
}

.ui-pagination-pages-other {
  color: var(--fontColorFade);
  background: transparent;
  border: none;
}


/* UI / arrow */

.ui-arrow-right {
  font-size: var(--fontSize4);
  align-self: end;
  color: var(--fontColorFade);
}


/* -- PHONE ------------------------------------- */

@media only screen and (max-width: 375px) {
  .menu-icon {
    display: inline-block;
  }

  .menu-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--space6);
    align-items: center;
    background: var(--background);
    width: 100%;
    padding: var(--space11);
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    transition: all 0.5s ease-out;
  }

  .menu-icon:focus ~ .menu-navigation {
    right: 0;
  }

  .footer-inner {
    flex-direction: column;
    gap: var(--space3);
    align-items: center;
    gap: var(--space3);
    text-align: center;
  }

  .feed-highlight-title {
    font-size: var(--fontSize7);
  }

  .feed-highlight-bottom {
    flex-direction: column;
    gap: var(--space2);
  }

  .feed .ui-meta {
    align-self: flex-start;
  }

  .feed-recent-posts {
    flex-direction: column;
  }

  .post-title {
    font-size: var(--fontSize8);
  }
}