hugo-battheme/assets/scss/style.scss

$radius: 48pt;
$toggle-width: 42pt;
$toggle-height: 24pt;

* {
  border-width: 2pt;
}

input[type="checkbox"] {
  cursor: pointer;
}
.toggleinput {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  overflow: hidden;
}

.togglelabel {
  width: $toggle-width;
  height: 24pt;
  border-radius: $radius;
  cursor: pointer;
  align-items: center;
  display: flex;
}

.togglelabel::after {
  left: calc(100% - 67pt);
  content: "";
  position: absolute;
  height: 20pt;
  width: 20pt;
  border-width: 1pt;
  border-radius: 100pt;
  transition: 1s;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "";
  border-style: solid;
}

input:checked + label:after {
  left: calc(100% - 49pt);
}

input:checked + label::after {
  content: "滛";
}

.footer-nav-item,
button{
  border-radius: 100%;
  height: 1em;
  width: 1em;
  justify-content: center;
  align-items: center;
  border-style: solid;
  cursor: pointer;
}

.togglelabel {
  border: solid;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  border-top-right-radius: $radius;
  border-bottom-right-radius: $radius;
  & .hash-link {
    &:hover {
      cursor: pointer;
      &::before {
        content: "";
      }
    }
  }
}

.postdescription,
#content p,
#content ul,
#content ol,
#content table {
  border-left-style: solid;
  border-width: 0.24em;
  padding-left: 2em;
}

p a,
.postdescription a,
ul a{
  border-style: solid;
  padding: 0.12em;
}