web/src/styles/base.css

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-regular-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-regular-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/major-mono-display-v13-latin-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@tailwind components;

@layer components {

  body, p, div {
    @apply text-[#909090] leading-8;
  }

  h1, h2, h3, h4 {
    font-family: "Major Mono Display";
    @apply lowercase text-white;
  }

  h1 {
    @apply text-2xl mb-8;
  }

	.middle-pane-medium {
		@apply max-w-7xl mx-auto px-6 xl:px-0;
	}
	.middle-pane-big {
		@apply max-w-screen-2xl mx-auto px-6 2xl:px-0;
	}

  #no-intro {
    background-color: #0f0f0f
  }

  #intro {
		background-image: url(/hp-bg.webp);
		background-repeat: repeat;
		background-color: #0f0f0f;
		background-position: center;
	}
  a.button {
    @apply cursor-pointer;
  }
  a.button button {
    @apply bg-white px-4 py-2 uppercase text-black border text-sm hover:text-white hover:bg-black hover:border;
  }
  a.button.inverted button {
    @apply bg-black px-4 py-2 uppercase text-white border text-sm hover:text-black hover:bg-white hover:border;    
  }

  a.button button::after {
    margin-left: 0.75em;
    content: "→";
  }

  .w3pn-topics > div {
    @apply mb-3;
  }
  .w3pn-topics > div::before {
    padding-right: 1em;
    vertical-align: 3px;
    content: url('data:image/svg+xml,<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.25" width="12" height="2" fill="white"/></svg>')
  }

  .w3pn-hp-grid > div {
    @apply aspect-video bg-[#0f0f0f];
  }

  .w3pn-wgrid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2;
  }

  .w3pn-wgrid > div {
    @apply bg-[#101010] text-center text-sm pb-6 pt-10;
  }

  .w3pn-wgrid .title {
    @apply text-white text-xl mb-1;
  }
  
  .w3pn-wgrid .icon {
    @apply mb-4;
  }

  .icon {
    @apply inline-block w-12 h-12;
  }
  .icon.small {
    @apply w-6 h-6;
  }
  
  .icon.twitter {
    background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7895 16.9392L38.6704 0H35.1454L22.2188 14.7051L11.9021 0H0L15.6043 22.2388L0 40H3.52506L17.167 24.4676L28.0646 40H39.9667M4.79734 2.60316H10.2128L35.1427 37.5247H29.7259" fill="%23C0C0C0"/></svg>');
    background-size: 100% 100%;
  }

  .icon.github {
    background-image: url('data:image/svg+xml,<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.4269 0C10.9195 0 0 11 0 24.6084C0 35.4864 6.99647 44.6943 16.7024 47.9533C17.9159 48.1983 18.3604 47.4238 18.3604 46.7723C18.3604 46.2018 18.3204 44.2463 18.3204 42.2088C11.5255 43.6758 10.1105 39.2753 10.1105 39.2753C9.01846 36.4234 7.40047 35.6904 7.40047 35.6904C5.17648 34.1829 7.56247 34.1829 7.56247 34.1829C10.0295 34.3459 11.324 36.7088 11.324 36.7088C13.5074 40.4568 17.0259 39.3978 18.4414 38.7458C18.6434 37.1568 19.2909 36.0569 19.9784 35.4459C14.5589 34.8754 8.85696 32.7569 8.85696 23.3044C8.85696 20.6154 9.82696 18.4154 11.364 16.7044C11.1215 16.0934 10.272 13.5669 11.607 10.1855C11.607 10.1855 13.6694 9.53346 18.3199 12.7114C20.311 12.1728 22.3643 11.8988 24.4269 11.8965C26.4894 11.8965 28.5919 12.1819 30.5334 12.7114C35.1844 9.53346 37.2468 10.1855 37.2468 10.1855C38.5818 13.5669 37.7318 16.0934 37.4893 16.7044C39.0668 18.4154 39.9968 20.6154 39.9968 23.3044C39.9968 32.7569 34.2949 34.8344 28.8349 35.4459C29.7249 36.2198 30.4929 37.6863 30.4929 40.0088C30.4929 43.3088 30.4529 45.9573 30.4529 46.7718C30.4529 47.4238 30.8979 48.1983 32.1109 47.9538C41.8168 44.6938 48.8133 35.4864 48.8133 24.6084C48.8533 11 37.8938 0 24.4269 0Z" fill="white"/></svg>');
    background-size: 100% 100%;
  }

  .icon.forum {
    background-image: url('data:image/svg+xml,<svg width="56" height="44" viewBox="0 0 56 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.51612 9.93547C8.51612 9.55903 8.66566 9.19801 8.93184 8.93183C9.19802 8.66565 9.55903 8.51612 9.93547 8.51612H29.8064C30.1828 8.51612 30.5439 8.66565 30.81 8.93183C31.0762 9.19801 31.2258 9.55903 31.2258 9.93547C31.2258 10.3119 31.0762 10.6729 30.81 10.9391C30.5439 11.2053 30.1828 11.3548 29.8064 11.3548H9.93547C9.55903 11.3548 9.19802 11.2053 8.93184 10.9391C8.66566 10.6729 8.51612 10.3119 8.51612 9.93547ZM31.2258 17.0322C31.2258 16.6558 31.0762 16.2948 30.81 16.0286C30.5439 15.7624 30.1828 15.6129 29.8064 15.6129H9.93547C9.55903 15.6129 9.19802 15.7624 8.93184 16.0286C8.66566 16.2948 8.51612 16.6558 8.51612 17.0322C8.51612 17.4087 8.66566 17.7697 8.93184 18.0359C9.19802 18.302 9.55903 18.4516 9.93547 18.4516H29.8064C30.1828 18.4516 30.5439 18.302 30.81 18.0359C31.0762 17.7697 31.2258 17.4087 31.2258 17.0322ZM55.3548 17.0322V32.6451C55.3535 33.774 54.9045 34.8564 54.1062 35.6546C53.308 36.4529 52.2256 36.9019 51.0967 36.9032H49.6773V42.5806C49.6772 42.8504 49.6002 43.1145 49.4554 43.3421C49.3106 43.5697 49.1039 43.7514 48.8596 43.8659C48.6153 43.9803 48.3435 44.0228 48.0759 43.9884C47.8084 43.954 47.5561 43.8441 47.3488 43.6715L39.2276 36.9032H25.5483C24.4194 36.9019 23.3371 36.4529 22.5388 35.6546C21.7405 34.8564 21.2915 33.774 21.2903 32.6451V28.3871H16.2658L8.17377 37.8258C7.98504 38.0456 7.73353 38.2025 7.45305 38.2752C7.17256 38.3479 6.87653 38.3331 6.60474 38.2326C6.33294 38.1322 6.0984 37.951 5.93263 37.7133C5.76686 37.4756 5.67779 37.1929 5.67741 36.9032V28.3871H4.25806C3.12913 28.3858 2.0468 27.9368 1.24853 27.1385C0.450253 26.3403 0.00123977 25.2579 0 24.129V4.25806C0.00123977 3.12913 0.450253 2.0468 1.24853 1.24853C2.0468 0.450253 3.12913 0.00123977 4.25806 0H35.4838C36.6127 0.00123977 37.6951 0.450253 38.4934 1.24853C39.2916 2.0468 39.7406 3.12913 39.7419 4.25806V12.7742H51.0967C52.2256 12.7754 53.308 13.2244 54.1062 14.0227C54.9045 14.821 55.3535 15.9033 55.3548 17.0322ZM35.4838 25.5483C35.8602 25.5481 36.2211 25.3985 36.4872 25.1324C36.7533 24.8663 36.9029 24.5054 36.9032 24.129V4.25806C36.9029 3.88169 36.7533 3.52081 36.4872 3.25467C36.2211 2.98854 35.8602 2.83893 35.4838 2.83871H4.25806C3.88169 2.83893 3.5208 2.98854 3.25467 3.25467C2.98854 3.52081 2.83893 3.88169 2.83871 4.25806V24.129C2.83893 24.5054 2.98854 24.8663 3.25467 25.1324C3.5208 25.3985 3.88169 25.5481 4.25806 25.5483H7.09676C7.4732 25.5483 7.83422 25.6979 8.1004 25.9641C8.36658 26.2302 8.51612 26.5913 8.51612 26.9677V33.0665L14.5359 26.0451C14.6688 25.8894 14.834 25.7644 15.0199 25.6786C15.2058 25.5929 15.4081 25.5484 15.6129 25.5483H35.4838ZM52.516 17.0322C52.5158 16.6559 52.3662 16.295 52.1001 16.0288C51.834 15.7627 51.4731 15.6131 51.0967 15.6129H39.7419V24.129C39.7406 25.2579 39.2916 26.3403 38.4934 27.1385C37.6951 27.9368 36.6127 28.3858 35.4838 28.3871H24.129V32.6451C24.1292 33.0215 24.2788 33.3824 24.545 33.6485C24.8111 33.9146 25.172 34.0642 25.5483 34.0645H39.7419C40.074 34.0644 40.3957 34.1806 40.6511 34.3929L46.8386 39.5505V35.4838C46.8386 35.1074 46.9882 34.7464 47.2544 34.4802C47.5205 34.214 47.8816 34.0645 48.258 34.0645H51.0967C51.4731 34.0642 51.834 33.9146 52.1001 33.6485C52.3662 33.3824 52.5158 33.0215 52.516 32.6451V17.0322Z" fill="white"/></svg>');
    background-size: 100% 100%;
  }

	.external::after {
		padding-left: 10px;
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='gray' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
	}

  #footerMenu .menuItem:hover .icon {
    @apply opacity-100;
  }

  .hamburger {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_1327_1074" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_1327_1074)"><path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="white"/></g></svg>');
  }
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
}

.nav-links a:hover, .nav-links a:focus {
  background-color: white;
  text-color: black;
}

.expanded {
  display: unset;
}