Public release 1

assets/css/main.css

@@ -1,4 +1,40 @@
-@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+@font-face {  font-family: 'Josefin Sans'; src: url('/fonts/JosefinSans.ttf') format('truetype'), font-weight: normal; font-style: normal; }
+@font-face {  font-family: 'Open Sans'; src: url('/fonts/OpenSans.ttf') format('truetype'), font-weight: normal; font-style: normal; }
+@font-face {  font-family: 'cc-icons'; src: url('/fonts/cc-icons.otf') format('opentype'), font-weight: normal; font-style: normal; }
+
+.cc
+{
+ -moz-font-feature-settings: normal;
+ -moz-font-language-override: normal;
+ display: inline-block;
+ font-family: cc-icons;
+ font-size: 2em;
+ font-stretch: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ text-rendering: auto;
+}
+/*Share Alike*/
+.cc-sa:before 
+{
+ content: "\0061";
+}
+/*Attribution*/
+.cc-by:before 
+{
+ content: "\0062";
+}
+/* CC */
+.cc-cc:before 
+{
+ content: "\0063";
+}
+/* Non Commercial Euro */
+.cc-nc-eu:before 
+{
+ content: "\0065";
+}
 
 *,
 *::before,
@@ -88,24 +124,18 @@ article.article-box article.article-content {
 }
 
 article.article-box article.article-content .article {
-    padding: 0 1rem 0 1rem;
+  padding: 0 1rem 0 1rem;
-    font-family: 'Open Sans', sans-serif;
+  font-family: 'Open Sans', sans-serif;
+}
+article.article-box article.article-content .article p {
+  padding-bottom: 0.5rem;
 }
 
-article.article-box article.article-content .article h1{
+article.article-box article.article-content .article h1,h2,h3 {
   padding-block-start: 0.5rem;
   font-family: 'Josefin Sans', sans-serif;
 }
 
-article.article-box article.article-content .article h2{
-  padding-block-start: 0.5rem;
-  font-family: 'Josefin Sans', sans-serif;
-}
-
-article.article-box article.article-content .article h3{
-  padding-block-start: 0.5rem;
-  font-family: 'Josefin Sans', sans-serif;
-}
 
 article.article-box article.article-content .article-title {
   justify-self: start;
@@ -179,6 +209,82 @@ article.article-box:nth-last-child(2) {
   margin-bottom: 3rem;
 }
 
+
+article.article-box article.article-content .article-tag-ribbon {
+  justify-self: end;
+  margin-right: calc(var(--overlap-size) * -1);  
+  padding-block: 0.25rem;
+  padding-inline: 2.5rem;
+  background-color: var(--accent-color);
+  color: white;
+  font-size: 1.1rem;
+
+  background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);
+  background-size: 100% 200%;
+  
+  transition: background-position 100ms ease;
+  cursor: pointer;
+
+  position: relative;
+}
+
+article.article-box article.article-content .article-tag-ribbon:focus-visible {
+  outline-offset: 5px;
+  outline: 2px solid var(--accent-color);
+  background-position: 0 100%;
+}
+
+article.article-box article.article-content .article-tag-ribbon::after {
+  content: "";
+  position: absolute;
+  height: var(--overlap-size);
+  width: var(--overlap-size);
+  right: 0;
+  top: 100%;
+  background-color: inherit;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+
+/* links */
+a:link {
+  color: #a256ff;
+}
+a:visited {
+  color: #7A44DD;
+}
+a:hover {
+  color: #9F69FF;
+}
+a:active {
+  color: #A48EFF;
+}
+
+/* ribbon links */
+.article-tag-ribbon a:link {
+  color: #fff;
+}
+.article-tag-ribbon a:visited {
+  color: #fff;
+}
+.article-tag-ribbon a:hover {
+  color: #000;
+}
+.article-tag-ribbon a:active {
+  color: #fff;
+}
+
+img {
+  max-width: 100%;
+}
+
+div.highlight pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: scroll;
+} 
+
 footer {
   position: fixed;
   left: 0;
@@ -202,7 +308,7 @@ footer .container {
   height: 100%;
   padding-inline: 1rem; /* optional inner padding */
   gap: 1rem;
-  font-size: 1.2rem;
+  font-size: 0.75rem;
   color: white;
 }
 
@@ -211,7 +317,7 @@ footer::before,
 footer::after {
   content: '';
   position: absolute;
-  height: 3rem;
+  height: 100%;
   width: 50vw;
   background-color: var(--accent-color);
   z-index: -1;

layouts/_partials/footer.html

@@ -1 +1 @@
-<p>CC3.0-SA-NC {{ now.Year }}. PHiAX.</p>
+<p><i class="cc cc-cc"></i> <i class="cc cc-by"></i> <i class="cc cc-sa"></i> <i class="cc cc-nc-eu"></i>  {{ now.Year }} by PHiAX. Build with HUGO</p>

layouts/_partials/terms.html

@@ -12,7 +12,7 @@ For a given taxonomy, renders a list of terms assigned to the page.
 
 {{- with $page.GetTerms $taxonomy }}
   {{- $label := (index . 0).Parent.LinkTitle }}
-      <div class="article-end-ribbon">Tags: 
+      <div class="article-tag-ribbon">Tags: 
       {{- range . }}
         <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
       {{- end }}

layouts/page.html

@@ -4,8 +4,7 @@
           <div class="article-title">{{ time.Format "Monday 2 January 2006" .PublishDate }}</div>
           <div class="article">
           <h1>{{ .LinkTitle }}</h1>
-          {{ .Content }}
+          {{ .Content }}</div>
-          </div>
 	       {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
       </article>
     </article>