gil.ink/src/assets/css/main.css

/*
Themes
*/
:root,
[data-selected-theme=grayscalelight] {
  --color-bg: #fff;
  --color-bg-2: #f8f8f8;
  --color-ui: #ddd;
  --color-ui-2: #888;
  --color-ui-3: #555;
  --color-tx: #111;
  --color-link: #36c;
  --color-hover: rgb(25.5, 51, 102);
  --color-active: rgb(153, 178.5, 229.5);
}

/*
[data-selected-theme="light"] {
  --color-background: #aabf7e; //aabf7e
  --text-normal: #191b19; //191b19
  --text-invert: #fff;
  --text-subtle: #595959; //595959
  --color-primary: #344f1f; //344f1f
  --color-secondary: #60941a; //60941a
  --color-link: #309bae; //309bae
  --color-paper: #e8efd7; //e8efd7
}
*/
/*
Themed elements
*/
body {
  background: var(--color-bg);
}

a {
  color: var(--color-link);
  text-decoration: dotted underline;
}
a:hover {
  color: var(--color-hover);
  text-decoration: solid underline;
}
a:active {
  color: var(--color-active);
}

h1 {
  color: var(--color-primary);
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--color-secondary);
}

hr {
  background-color: var(--text-normal);
  border: none;
}

.muted {
  color: var(--text-subtle);
}

.site {
  color: var(--color-tx);
}

.idcard {
  margin: auto;
  background: rgb(252.7769230769, 248.3307692308, 242.7730769231);
  background: linear-gradient(120deg, rgb(252.7769230769, 248.3307692308, 242.7730769231) 79%, #39a 79%, #39a 80%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 80%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 81%, #39a 81%, #594 84%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 84%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 85%, #594 78%);
  border: solid var(--color-bg-2) 2px;
  border-radius: 15px;
}
.idcard__header {
  padding: 15px;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #594;
  text-transform: uppercase;
  font-weight: bold;
}
.idcard__header h3 {
  margin-top: 0px;
  text-align: center;
  color: rgb(252.7769230769, 248.3307692308, 242.7730769231);
}
.idcard__picture {
  max-width: 200px;
  margin: auto;
  margin-top: 20px;
}
.idcard__bio {
  padding: 15px;
  width: max-content;
}
.idcard__bio p {
  margin-top: 5px;
}
.idcard__label {
  font-weight: bold;
  font-size: 85%;
  color: #36c;
}

.box {
  border-radius: 15px;
  border: dashed 1px var(--color-ui);
  background-color: var(--color-bg-2);
}

.pad {
  padding: 15px;
  padding-top: 0;
}

.gap {
  gap: 15px;
}

code,
pre {
  border: solid var(--color-ui-2) 1px;
  border-radius: 3px;
  background-color: var(--color-ui);
  padding: 0 2px;
}

.category {
  border-radius: 15px;
  background-color: var(--color-link);
  color: var(--color-bg);
  padding: 0 5px;
}

/* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v18-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/inter-v18-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-bold-italic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
.page--about {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 600px) {
  .page--about {
    display: grid;
    grid: "main idcard" auto "main funfacts" auto "main interests" auto "social social" auto/auto auto;
  }
}
@media only screen and (min-width: 768px) {
  .page--about {
    grid: "main main idcard" auto "main main ." auto "interests funfacts funfacts" auto ". social ." auto/auto auto auto;
  }
}
.page--about .main-content {
  grid-area: main;
}
.page--about .social {
  grid-area: social;
}
.page--about .interests {
  grid-area: interests;
}
.page--about .funfacts {
  grid-area: funfacts;
}

.idcard {
  display: flex;
  flex-direction: column;
  grid-area: idcard;
}

.page--home {
  display: grid;
}
@media only screen and (min-width: 600px) {
  .page--home {
    grid: "main ." auto "main social" auto ". social" auto "badges updates" auto ". updates" auto/1fr auto;
  }
  .page--home .home__main {
    grid-area: main;
  }
  .page--home .home__social {
    grid-area: social;
  }
  .page--home .home__updates {
    grid-area: updates;
  }
  .page--home .home__badges {
    grid-area: badges;
  }
}

body {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
}

pre, code {
  font-family: "Hack", monospace;
}

.monospace {
  font-family: "Hack", monospace;
}

#skip-navigation {
  position: fixed;
  top: -100%;
  right: 0;
}
#skip-navigation:focus {
  top: 0;
}

.site {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100vw);
  margin: auto;
}

/*# sourceMappingURL=main.css.map */