blog/sass/no-style-please.scss

@import "theme/dark";
@import "theme/light";
:root {
  --text-0: rgba(0, 0, 0, 87%);
  --text-1: rgba(0, 0, 0, 66%);
  --bordercl: rebeccapurple;
  --bg-0: #fff;
  --bg-1: #f2f2f2;

  --primary-color: #ef5350;
  --hover-color: white;
}
// -------------- THEME SWITCHER -------------- //
@mixin dark-appearance {
  filter: invert(1);
  img {
    filter: invert(1);

    &.ioda {
      filter: invert(0);
    }
  }
}

body[a="dark"] {
  @include dark-appearance;
}

@media (prefers-color-scheme: dark) {
  body[a="auto"] {
    @include dark-appearance;
  }
}
// -------------------------------------------- //

// bg color is also needed in html in order to
// block body's background propagation
// see: https://stackoverflow.com/a/61265706
html,
input,
select,
textarea,
label,
button {
  color: var(--main-text-color);
  background-color: var(--page-back-color);
  font-family: 'MapleMono';
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.post-meta {
  text-align: right;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 3rem;
}

hr {
  margin: 2rem 0;
}

p {
  margin: 1rem 0;
}

li {
  margin: 0.4rem 0;
}

*:target {
  background-color: var(--target-highlight-color);
  color: var(--main-back-color);
}

.wrapper {
  position: relative;
  background-color: var(--main-back-color);
  min-height: calc(100vh - 8rem);
  max-width: 70ch;
  margin: 2rem auto;
  padding: 2rem 2rem;
}

hr {
  margin: 2rem 0;
  text-align: center;
  border: 0;
  color: var(--main-text-color);

  &:before {
    content: "| | |";
  }
  &:after {
    content: attr(data-content) "| | |";
  }
}

table {
  width: 100%;
}

table,
th,
td {
  border: thin solid var(--main-text-color);
  border-collapse: collapse;
  padding: 0.4rem;
}


p code {
  background-color: var(--code-back-color);
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  border-radius: 6px;
}
div.highlighter-rouge code {
  display: block;
  overflow-x: auto;
  white-space: pre-wrap;
  padding: 1rem;
}

blockquote {
  font-style: italic;
  border: thin solid black;
  padding: 1rem;

  p {
    margin: 0;
  }
}

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

a {
  color: var(--link-text-color);
  cursor: pointer;
}

.post_date {
  font-size: 1rem;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.github_icon {
  content: var(--github-icon-url);
}

.twitter_icon {
  content: var(--twitter-icon-url);
}

.email_icon {
  content: var(--email-icon-url);
}

.coffee_icon {
  content: var(--coffee-icon-url);
}

.search_icon {
  content: var(--search-icon-url);
}

.webring_icon {
  content: var(--webring-icon-url);
}

.rss_icon {
  content: var(--rss-icon-url);
}

a.cc_list {
  text-decoration: none;
}

.copyright_icon {
  content: var(--copyright-icon-url);
  height: 16px;
  margin: -3px;
}

.cc_icon {
  content: var(--cc-icon-url);
  height: 16px;
  margin: -3px;
}

.attribution_icon {
  content: var(--attribution-icon-url);
  height: 16px;
  margin: -3px;
}

.non_com_icon {
  content: var(--non_com-icon-url);
  height: 16px;
  margin: -3px;
}

.share_alike_icon {
  content: var(--share_alike-icon-url);
  height: 16px;
  margin: -3px;
}

.octicon:hover {
  visibility: hidden;
}

h1 .octicon {
  margin-left: -2.4em;
  margin-right: calc(2.4em - 1.8em);
}

h2 .octicon {
  margin-left: -2.9em;
  margin-right: calc(2.9em - 1.8em);
}

h3 .octicon {
  margin-left: -3.4em;
  margin-right: calc(3.4em - 1.8em);
}

h4 .octicon {
  margin-left: -3.9em;
  margin-right: calc(3.9em - 1.8em);
}

h5 .octicon {
  margin-left: -4.4em;
  margin-right: calc(4.4em - 1.8em);
}

h6 .octicon {
  margin-left: -4.9em;
  margin-right: calc(4.9em - 1.8em);
}

.octicon {
  fill: currentColor;
  visibility: visible;
  pointer-events: all;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
}

input,
select,
textarea,
label,
button {
  border-radius: 0.3em;
  margin-left: 0;
}

fieldset {
  border: none;
  padding: 0;
}

.textfield {
  max-width: 100%;
  padding-bottom: 1rem;
}

.narrowfield {
  width: 420px;
}

.hp {
  display: none;
}

textarea {
  vertical-align: top;
}

.textfield__input {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.3em;
  padding: 0.4em;
  width: 100%;
  max-width: -webkit-fill-available;
}

.notify-me,
.g-recaptcha {
  padding-bottom: 1rem;
  max-width: min-content;
}

.button {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--page-back-color);
  border-radius: 0.3em;
  padding: 0.4em;
  overflow: hidden;
  cursor: pointer;
}

button:hover {
  background-color: var(--main-text-color);
  color: var(--main-back-color);
}

footer {
  margin-top: 2rem;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 0.5rem;
}

.soc {
  display: flex;
  align-items: center;
  justify-content: center;
 
  margin-right: 1rem;
}
.soc:hover {
  color: var(--main-back-color);
  background: var(--link-text-color);
}
.footer-info {
  padding: var(--footer-padding);
}

.list {
 margin-bottom: 2rem;
}

.horizon{
    display: flex;
    justify-content: end;
    .start {
        width: 100%;
    }
}


article {
    .body {
        word-wrap: break-word;
    }
}
pre {
    padding: 1rem;
    overflow: auto;
  }
  // The line numbers already provide some kind of left/right padding
  pre[data-linenos] {
    padding: 1rem 0;
  }
  pre table td {
    padding: 0;
  }
  // The line number cells
  pre table td:nth-of-type(1) {
    text-align: center;
    user-select: none;
  }
  pre mark {
    // If you want your highlights to take the full width.
    display: block;
    // The default background colour of a mark is bright yellow
    background-color: rgba(254, 252, 232, 0.9);
  }
  pre table {
    width: 100%;
    border-collapse: collapse;
  }