Remove obsolete CSS, Corrections and improvements

- I removed the obsolete CSS in dottydoc.css
- The compliant CSS codes have been moved to folder dotty_res/styles/theme/layout
- I improved the UI for the author of a blog post

Author: Dedelweiss

docs/_assets/css/dottydoc.css

@@ -1,224 +1,23 @@
-html, body {
-  font-weight: 300;
-  height: 100%;
-}
-
-main.container {
-  min-height: 100vh;
-  padding: 15px 15px;
-  padding-bottom: 45px; /* prevents the content to be hidden by the gitter sidecar */
-}
-
-.container img {
-  width: 100%;
-  height: auto;
-}
-
-.site-container img{
-  width: 100%;
-  height: auto;
-}
-
-/* headers */
-main header {
-  border-bottom: 1px solid rgba(0,0,0,.1);
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-}
-
-main > h1 {
-  margin-bottom: 20px;
-}
-
 .byline {
   font-size: 14px;
+  display: flex;
+  margin-top: 10px;
 }
 
-.byline, .byline a {
-  color: grey;
-}
-.byline .author {
-  display: block;
-}
-
-/* indexes */
-ul.post-list {
-  list-style: none;
-  padding-left: 0;
-}
-.post-list h2 {
-  margin-bottom: 0;
-}
-
-h1:hover a.anchor,
-h2:hover a.anchor,
-h3:hover a.anchor,
-h4:hover a.anchor,
-h5:hover a.anchor {
-  color: lightgrey;
-  text-decoration: none;
-}
-
-h1:hover a.anchor:hover,
-h2:hover a.anchor:hover,
-h3:hover a.anchor:hover,
-h4:hover a.anchor:hover,
-h5:hover a.anchor:hover {
-  color: var(--secondary);
-}
-
-/* blog footer */
-.blog-author {
-  color: gray;
-}
-
-.blog-author img#author-img {
+.byline img#author-img {
   width: auto;
   height: auto;
-  max-width:100px;
-  max-height:100px;
-  border-radius: 50%;
+  max-width: 50px;
+  border-radius: 10px;
 }
 
-/* api docs */
-.api span.letter-anchor {
-  float: left;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  color: white;
-  margin-top: 6px;
-  margin-right: 8px;
-  line-height: 50px;
-  text-align: center;
-  text-decoration: none;
-  font-size: 43px;
-  font-family: var(--font-family-sans-serif);
-}
-.api span.letter-anchor.object {
-  line-height: 48px;
-}
-.api span.letter-anchor.class {
-  line-height: 48px;
-  padding-right: 3px;
-}
-.letter-anchor.object {
-  background: #2c6c8d;
-}
-.letter-anchor.class {
-  background: #44ad7d;
-}
-.letter-anchor.trait {
-  background: #19aacf;
-}
-.letter-anchor.enum {
-  background: #7803fc;
-}
-.letter-anchor.package {
-  background: #2c6c8d;
-}
-
-.api header {
-  font-family: var(--font-family-sans-serif);
+.byline, .byline a {
+  color: grey;
 }
-.api header .name-prefix {
+.byline .author {
   display: block;
 }
-.api header .name-suffix {
-  display: inline-block;
-}
-
-.api header h1 {
-  margin: -13px 8px 0 0;
-  display: inline-block;
-}
-.api h2 {
-  margin-top: 1rem;
-}
-.api h3 {
-  display: inline;
-  margin: 0;
-  font: inherit;
-  font-weight: bold;
-}
-
-/* improved display and wrapping of parameters */
-.api .params, .api .type-params {
-  display: inline-flex;
-  flex-flow: wrap;
-}
-
-/* api layout */
-.wide-table {
-  display: table;
-  width: 100%;
-}
-.api .member:hover {
-  background: var(--doc-bg);
-  cursor: pointer;
-}
-.api .left-column {
-  white-space: nowrap;
-  padding-left: 1em;
-  border-left: 3px solid transparent;/* table rows cannot have borders*/
-  font-family: var(--font-family-monospace);
-  text-align: right;
-  width: 1px;
-}
-.api .member:hover .left-column {
-  border-left: 3px solid var(--secondary);
-}
-.api .right-column {
-  display: inline;
-  text-align: right;
-  font-family: var(--font-family-monospace);
-}
-
-/* admonitions */
-blockquote {
-  padding: 0 1em;
-  color: #777;
-  border-left: 0.25em solid #ddd;
-}
-
-
-aside.notice {
-  border-left: 3px solid #4c97e4;
-  background-color: #e4ebff;
-}
-
-aside.success {
-  border-left: 3px solid #36bf1d;
-  background-color: #ebfddd;
-}
-
-/* media queries for bigger screens (dottydoc is mobile-first) */
-@media (min-width: 576px) {
-  .byline .author {
-    display: inline;
-    margin-left: 1em;
-  }
-  main.container {
-    padding: 15px 30px;
-  }
-}
-@media (min-width: 768px) {
-  .api .member {
-    display: table-row;
-  }
-  .api .left-column {
-    display: table-cell;
-  }
-  .api .right-column {
-    display: flex;
-    flex-flow: wrap;
-  }
-  main.container {
-    padding: 15px 45px;
-  }
-}
 
-header {
-  position: static !important;
-  width: 100% !important;
+.byline .secondary-infos{
+  margin-left: 10px;
 }

docs/_layouts/blog-page.html

@@ -5,14 +5,25 @@
     <header>
         <h1>{{ page.title }}</h1>
         <div class="byline">
-            <time class="date">
-                <i class="far fa-calendar-alt"></i>
-                {{ page.date | date: "%Y-%m-%d" }}
-            </time>
-            <span class="author">
-                <i class="fas fa-pen-nib"></i>
-                {{ page.author }}
-            </span>
+            {% if page.author and page.authorImg %}
+            <img id="author-img" src="{{ site.baseurl }}{{ page.authorImg }}">
+            {% endif %}
+            <div class="secondary-infos">
+                {% if page.author %}
+                <div>
+                    <span class="author">
+                        <i class="fas fa-pen-nib"></i>
+                        {{ page.author }}
+                    </span>
+                </div>
+                {% endif %}
+                <div>
+                    <time class="date">
+                        <i class="far fa-calendar-alt"></i>
+                        {{ page.date | date: "%Y-%m-%d" }}
+                    </time>
+                </div>
+            </div>
         </div>
         {% if page.subTitle %}
         <div class="subtitle">
@@ -22,14 +33,4 @@ <h1>{{ page.title }}</h1>
     </header>
 
     {{ content }}
-
-    {% if page.author and page.authorImg %}
-    <hr/>
-    <div class="blog-author">
-        <img id="author-img" src="{{ site.baseurl }}{{ page.authorImg }}">
-        <span id="author-signature">
-            {{ page.author }}
-        </span>
-    </div>
-    {% endif %}
 </main>

scaladoc/resources/dotty_res/styles/theme/layout/container.css

@@ -19,6 +19,11 @@ p {
   --header-height: calc(8 * var(--base-spacing));
 }
 
+.site-container img{
+  max-width: 100%;
+  height: auto;
+}
+
 /* Scrollbar */
 
 ::-webkit-scrollbar {

scaladoc/resources/dotty_res/styles/theme/layout/content.css

@@ -8,6 +8,19 @@
   scroll-behavior: smooth;
 }
 
+/* blog footer */
+.blog-author {
+  color: gray;
+}
+
+.blog-author img#author-img {
+  width: auto;
+  height: auto;
+  max-width:100px;
+  max-height:100px;
+  border-radius: 50%;
+}
+
 #content {
   display: flex;
   flex-flow: row;
@@ -144,9 +157,9 @@
 }
 
 #content h2 {
-   color: var(--text-primary);
-    margin-block-start: calc(6* var(--base-spacing));
-    margin-block-end: calc(3* var(--base-spacing));
+  color: var(--text-primary);
+  margin-block-start: calc(6* var(--base-spacing));
+  margin-block-end: calc(3* var(--base-spacing));
 }
 
 #content .cover > h2 {
@@ -167,7 +180,7 @@
 
 /* content first paragraph */
 .first-p {
-    margin-block-start: calc(2* var(--base-spacing));
+  margin-block-start: calc(2* var(--base-spacing));
 }
 
 #content .first-p {
@@ -218,18 +231,32 @@
 
 /* content link */
 #content a {
-    color: var(--text-primary);
-    text-decoration: underline solid 1px;
-    -webkit-text-decoration-line: underline; /* Safari */
-    text-decoration-line: underline;
-    text-underline-offset: 2px;
-    transition: text-decoration-color .2s ease-in-out;
+  color: var(--text-primary);
+  text-decoration: underline solid 1px;
+  -webkit-text-decoration-line: underline; /* Safari */
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  transition: text-decoration-color .2s ease-in-out;
 }
 
 #content a:hover {
   text-decoration-color: transparent;
 }
 
+#content a.anchor {
+  color: transparent;
+  margin-left: -23px;
+  padding-right: 3px;
+  transition: color .4s ease-out;
+}
+
+#content a.anchor::before {
+  content: "\f0c1";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 20px;
+}
+
 #content .cover-header {
   margin-block-end: calc(2 * var(--base-spacing));
 }