Normalize styles everywhere, take more control of the style

sudorandom · Apr 16, 2024 · 3767ec6 · 3767ec6
1 parent 8f6ad1e
commit 3767ec6
Show file tree

Hide file tree

Showing 24 changed files with 2,113 additions and 103 deletions.
diff --git a/assets/scss/_404.scss b/assets/scss/_404.scss
@@ -0,0 +1,9 @@
+.btn-404 svg {
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.btn-404 a {
+  margin: 0 10px;
+}
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
@@ -0,0 +1,136 @@
+.button-container {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+button,
+.button,
+a.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 8px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-align: center;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  // Default
+  background: $light-background-header;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+    color: inherit;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+    opacity: 0.6;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+    opacity: 0.6;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &.outline {
+    background: transparent;
+    box-shadow: none;
+    padding: 8px 18px;
+    // Default
+    border-color: $light-background-secondary;
+
+    @media (prefers-color-scheme: dark) {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+
+    @media (prefers-color-scheme: light) {
+      border-color: $light-background-secondary;
+    }
+
+    [data-theme=dark] & {
+      border-color: $dark-background-secondary;
+      color: inherit;
+    }
+
+    [data-theme=light] & {
+      border-color: $light-background-secondary;
+    }
+
+    :hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  &.link {
+    background: none;
+    font-size: 1rem;
+  }
+
+  &.small {
+    font-size: .8rem;
+  }
+
+  &.wide {
+    min-width: 200px;
+    padding: 14px 24px;
+  }
+}
+
+.code-toolbar {
+  margin-bottom: 20px;
+
+  .toolbar-item a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 8px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 500;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+    // Default
+    background: $light-background-secondary;
+
+    @media (prefers-color-scheme: dark) {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+
+    @media (prefers-color-scheme: light) {
+      background: $light-background-secondary;
+    }
+
+    [data-theme=dark] & {
+      background: $dark-background-secondary;
+      color: inherit;
+    }
+
+    [data-theme=light] & {
+      background: $light-background-secondary;
+    }
+  }
+}
diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss
@@ -0,0 +1,50 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 400;
+  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
+       url("../fonts/Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 400;
+  src: url("../fonts/Inter-Italic.woff2") format("woff2"),
+       url("../fonts/Inter-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 600;
+  src: url("../fonts/Inter-Medium.woff2") format("woff2"),
+       url("../fonts/Inter-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 600;
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"),
+       url("../fonts/Inter-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-display: auto;
+  font-weight: 800;
+  src: url("../fonts/Inter-Bold.woff2") format("woff2"),
+       url("../fonts/Inter-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-display: auto;
+  font-weight: 800;
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
+       url("../fonts/Inter-BoldItalic.woff") format("woff");
+}
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
@@ -0,0 +1,56 @@
+.footer {
+  padding: 40px 20px;
+  flex-grow: 0;
+  z-index: 4;
+  [data-theme=dark] & {
+    color: $dark-color
+  }
+
+  [data-theme=light] & {
+    color: $light-color
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: 760px;
+    max-width: 100%;
+    z-index: 4;
+
+    @media #{$media-size-tablet} {
+      flex-direction: column;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 1rem;
+
+    @media #{$media-size-tablet} {
+      flex-direction: column;
+      margin-top: 10px;
+    }
+
+    & > *:not(:last-child)::after {
+      content: "•";
+      padding: 0 5px;
+
+      @media #{$media-size-tablet} {
+          content: "";
+          padding: 0;
+      }
+    }
+
+    & > *:last-child {
+      padding: 0 0px;
+
+      @media #{$media-size-tablet} {
+          padding: 0;
+      }
+    }
+  }
+}
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
@@ -0,0 +1,64 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  // Default
+  background: $light-background-header;
+  z-index: 5;
+
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: $light-background-header;
+  }
+
+  [data-theme=dark] & {
+    background: $dark-background-header;
+  }
+
+  [data-theme=light] & {
+    background: $light-background-header;
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    @media #{$media-size-phone} {
+      flex-direction: row-reverse;
+      padding: 15px;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    width: 760px;
+    max-width: 100%;
+  }
+}
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.theme-toggler {
+  fill: currentColor;
+}
+
+.not-selectable {
+  user-select: none;
+  -webkit-user-select: none;  
+  -moz-user-select: none;    
+  -ms-user-select: none;      
+}