Merge branch 'main' of github.com:maiani/toha

assets/styles/components/buttons.scss

@@ -102,6 +102,40 @@
   }
 }
 
+.copy-code-button {
+  float: right;
+  margin-top: 0.5em;
+  margin-left: -2.6em;
+  margin-right: 3em;
+
+  background-color: get-light-color('text-color') !important;
+  color: get-light-color('inverse-text-color') !important;
+  padding: 0.25rem 0.5rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border: none;
+
+  &:hover,
+  &:focus {
+    background-color: get-light-color('accent-color') !important;
+    color: get-light-color('text-over-accent-color') !important;
+    @include transition();
+  }
+  &:focus {
+    &::before {
+      content: 'Copied!';
+      position: absolute;
+      padding: 0.3em;
+      border-radius: 0.2em;
+      margin-left: -5em;
+      margin-top: -0.2em;
+      background-color: get-light-color('accent-color') !important;
+      color: get-light-color('text-over-accent-color') !important;
+      @include transition();
+    }
+  }
+}
+
 html[data-theme='dark'] {
   .btn-dark {
     background-color: get-dark-color('accent-color') !important;
@@ -169,4 +203,15 @@ html[data-theme='dark'] {
       background-color: get-dark-color('hover-over-accent-color') !important;
     }
   }
+  .copy-code-button {
+    background-color: get-dark-color('bg-primary') !important;
+    color: get-dark-color('muted-text-color') !important;
+
+    &:hover,
+    &:focus,
+    &::before {
+      background-color: get-dark-color('accent-color') !important;
+      color: get-dark-color('text-over-accent-color') !important;
+    }
+  }
 }

assets/styles/components/cards.scss

@@ -9,6 +9,11 @@
     box-shadow: $box-shadow;
     border: 1px solid get-light-color('bg-primary');
     @include transition();
+    .card-img-top {
+      transform: scale(1.2);
+      object-fit: cover;
+      @include transition();
+    }
   }
 
   .card-head {
@@ -17,12 +22,17 @@
     overflow: hidden;
   }
 
+  .card-title {
+    font-size: large;
+  }
+
   .card-body {
-    text-align: justify;
+    text-align: left;
   }
 
   .card-img-top {
-    object-fit: cover;
+    -o-object-fit: cover;
+       object-fit: cover;
     @include transition();
   }
 
@@ -61,7 +71,8 @@
     &:focus {
       .card-img-top {
         transform: scale(1.2);
-        object-fit: cover;
+        -o-object-fit: cover;
+           object-fit: cover;
         @include transition();
       }
     }

assets/styles/components/links.scss

@@ -8,7 +8,8 @@ a {
 
   &:hover,
   &:focus {
-    text-decoration: get-light-color('hover-over-accent-color') underline;
+    -webkit-text-decoration: get-light-color('hover-over-accent-color') underline;
+            text-decoration: get-light-color('hover-over-accent-color') underline;
     color: get-light-color('hover-over-accent-color');
     @include transition();
   }
@@ -66,7 +67,8 @@ html[data-theme='dark'] {
 
     &:hover,
     &:focus {
-      text-decoration: get-dark-color('hover-over-accent-color') underline;
+      -webkit-text-decoration: get-dark-color('hover-over-accent-color') underline;
+              text-decoration: get-dark-color('hover-over-accent-color') underline;
       color: get-dark-color('hover-over-accent-color');
     }
   }

assets/styles/components/tables.scss

@@ -96,6 +96,10 @@ html[data-theme='dark'] {
     }
   }
   .gist {
+    &::-moz-selection{
+      background: get-dark-color('text-color');
+      color: get-dark-color('inverse-text-color');
+    }
     &::selection{
       background: get-dark-color('text-color');
       color: get-dark-color('inverse-text-color');

assets/styles/components/texts.scss

@@ -12,7 +12,7 @@ strong {
 
 p {
   color: get-light-color('text-color');
-  text-align: justify;
+  text-align: left;
   text-justify: inter-word;
 }
 

assets/styles/layouts/list.scss

@@ -1,6 +1,6 @@
-// in Hugo, Page kind can be either "section" or "page".
-// if it is section, then it's a page with a list of items, for example /posts
-// if it is page, then it is a single page.
+/* in Hugo, Page kind can be either "section" or "page".*/
+/* if it is section, then it's a page with a list of items, for example /posts*/
+/* if it is page, then it is a single page.*/
 body.kind-section,
 body.kind-term,
 body.kind-page {

assets/styles/layouts/main.scss

@@ -53,7 +53,6 @@ body {
   ol > ol,
   li > ol,
   li > ul {
-    -webkit-padding-start: 1rem;
     padding-inline-start: 1rem;
   }
 }

assets/styles/sections/footer.scss

@@ -13,7 +13,8 @@
     @include transition();
     &:hover {
       margin-left: 5px;
-      text-decoration: get-light-color('muted-text-color') underline;
+      -webkit-text-decoration: get-light-color('muted-text-color') underline;
+              text-decoration: get-light-color('muted-text-color') underline;
       @include transition();
     }
   }
@@ -79,7 +80,8 @@ html[data-theme='dark'] {
     a {
       color: get-dark-color('muted-text-color');
       &:hover {
-        text-decoration: get-dark-color('muted-text-color') underline;
+        -webkit-text-decoration: get-dark-color('muted-text-color') underline;
+                text-decoration: get-dark-color('muted-text-color') underline;
       }
     }
 
@@ -95,6 +97,10 @@ html[data-theme='dark'] {
       background-color: get-dark-color('bg-primary');
       &:focus {
         background-color: get-dark-color('bg-secondary');
+        color: get-dark-color('text-color');
+      }
+      &::placeholder {
+        color: get-dark-color('muted-text-color');
       }
     }
 

assets/styles/sections/pdf-viewer.scss

@@ -42,7 +42,4 @@
   @keyframes spin {
     to { -webkit-transform: rotate(360deg); }
   }
-  @-webkit-keyframes spin {
-    to { -webkit-transform: rotate(360deg); }
-  }
 }