[#5] Update table look

Signed-off-by: Anastasiya Shamray <a.shamray@yadro.com>

assets/css/style.css

@@ -619,6 +619,44 @@ textarea.form-control {
   top: 8px;
 }
 
+.content-container {
+  max-width: 95vw;
+}
+
+@media (min-width: 1300px) {
+  .content-container {
+    max-width: 1232px;
+  }
+}
+
+@media (max-width: 992px) {
+  .content-container {
+    max-width: 92vw;
+  }
+}
+
+.content-row {
+  justify-content: space-around;
+}
+
+.content-sidebar {
+  padding: 0;
+}
+
+.content-page {
+  padding: 0;
+}
+
+@media (min-width: 992px) {
+  .content-sidebar {
+    max-width: 28%;
+  }
+
+  .content-page {
+    max-width: 72%;
+  }
+}
+
 #TableOfContents ul li,
 #TableOfContents ul li ul {
   margin-bottom: 0;
@@ -712,6 +750,13 @@ table th {
   vertical-align: top;
   border: 1px solid #dee2e6;
   margin-bottom: 0;
+  font-weight: 500;
+}
+
+.table .table-th {
+  padding: .4rem .5rem;
+  font-size: 16px;
+  line-height: 1.2;
 }
 
 thead {
@@ -724,6 +769,109 @@ tbody {
   margin-bottom: 0;
 }
 
+.status {
+  text-decoration: underline dotted;
+  position: relative;
+  text-align: center;
+}
+
+.status .tooltiptext {
+  visibility: hidden;
+  padding: 6px;
+  background-color: white;
+  border: 1px black solid;
+  text-align: center;
+  font-size: 14px;
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  transform: translate(-50%, -100%);
+}
+
+.status:hover .tooltiptext {
+  visibility: visible;
+}
+
+.authors {
+  margin: 0;
+}
+
+.author-name {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid darkgrey;
+  margin: 0;
+  transition: border-bottom 0.2s;
+}
+
+.author-name:hover {
+  border-bottom: 1px solid lightgrey;
+}
+
+.author-name .tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+  width: max-content;
+  background-color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 15px;
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 5px 15px 0 rgba(0,0,0,0.3);
+  transition: opacity 0.2s;
+}
+
+.author-name:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.author-name .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -6px;
+  border-width: 6px;
+  border-style: solid;
+  border-color: white transparent transparent transparent;
+}
+
+.author-delimiter {
+  margin-left: -6px;
+}
+
+.author-contact {
+  cursor: pointer;
+  color: var(--primary-color);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  transition: opacity 0.2s;
+}
+
+.author-contact:last-child {
+  margin: 0;
+}
+
+.author-contact a,
+.author-contact i {
+  margin: 0;
+}
+
+.author-contact:hover {
+  opacity: 0.7;
+}
+
+.author-contact:hover a {
+  text-decoration-line: underline;
+}
+
 .notices {
   margin: 2rem 0;
   position: relative;
@@ -805,7 +953,7 @@ tbody {
   position: sticky;
   top: 50px;
   margin-bottom: 30px;
-  padding: 40px 10px 20px 10px;
+  padding: 40px 0 20px;
 }
 
 .sidelist {
@@ -813,7 +961,7 @@ tbody {
 }
 
 li.sidelist>a {
-  margin-left: 20px;
+  margin-left: 25px;
   margin-bottom: 10px;
   display: block;
   font-size: 20px;
@@ -827,7 +975,7 @@ li.sidelist li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 0;
 }
 
 li.sidelist li a:hover {
@@ -845,6 +993,7 @@ li.sidelist li a:hover {
 .sidelist li.sidelist.active>a {
   border-left: 5px solid var(--primary-color);
   background: #e9eeed;
+  padding: 0.75rem 1rem;
 }
 
 .sidelist li.sidelist.active>a>i {
@@ -903,7 +1052,7 @@ code {
   color: inherit;
   text-align: right;
   z-index: 1;
-  left: -22px;
+  left: -17px;
   top: -5px;
 }
 
@@ -981,11 +1130,6 @@ pre code::-webkit-scrollbar-thumb {
   font-weight: 700;
 }
 
-table td,
-table th {
-  font-weight: 500;
-}
-
 .nav-tabs .nav-item {
   margin-bottom: -2px;
 }

layouts/partials/default.html

@@ -1,8 +1,8 @@
 <!-- details page -->
 <section class="single section-sm pb-0">
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-4">
+  <div class="container content-container">
+    <div class="row content-row">
+      <div class="col-lg-4 content-sidebar">
         <div class="sidebar">
           <a
             class="back-btn"
@@ -28,8 +28,8 @@
           </ul>
         </div>
       </div>
-      <div class="col-lg-8">
-        <div class="p-lg-5 p-4 bg-white" id="content">
+      <div class="col-lg-8 content-page">
+        <div class="pt-4 pb-4 bg-white" id="content">
           <h1 class="mb-5" id="title">{{ partial "title.html" . }}</h1>
           {{ if .Content }}
             <div class="content">

layouts/partials/navigation.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-md {{ if .IsHome }}navbar-dark{{ else }}navbar-light{{ end }}">
-  <div class="container px-2 px-md-0">
+  <div class="container content-container px-2 px-md-0">
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
       {{ $logo:= site.Params.logo }}
       {{ $logoWhite:= site.Params.logo_white }}