- fontawesome is too big for our use case. we could use just some SVG's and inspect other implementations, like shortcodes or partials to display them.
+ [interesting approach using SVG's](https://www.client9.com/using-font-awesome-icons-in-hugo/)
+ [using js and a shortcode](https://matze.rocks/posts/fontawesome_in_hugo/)
+ + [using partials and svgs](https://codingnconcepts.com/hugo/social-icons-hugo/)
- content presentation before styling
+ we should finalize templates for different kinds of content before working on styling
* homepage
// BOURBON
@import "bourbon/bourbon";
-// FONT-AWESOME v6.2.1
-@import "fa-v6/fontawesome";
-@import "fa-v6/brands";
+
// MY COLOR DEFINITIONS
@import "colors";
+
// GOOGLE FONTS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');
color: inherit;
}
}
+}
+.inline-svg {
+ display: inline-block;
+ height: 1.15rem;
+ width: 1.15rem;
+ top: 0.15rem;
+ position: relative;
}
\ No newline at end of file
<html lang="{{ $.Site.LanguageCode | default "en" }}">
{{- partial "head.html" . -}}
<body class="blog">
- <div id="page">
+ <div id="page" class="section-blog">
<a id="top" class="skip-link screen-reader-text" href="#primary">skip to content</a>
{{- partial "header.html" . -}}
{{- partial "breadcrumbs.html" . -}}
--- /dev/null
+<span class="inline-svg">
+{{ $svg := .Get 0 }}
+{{ readFile ( print "SVGs/" . ".svg" ) | safeHTML }}
+</span>
{{/*
* Add the featured image to the header if it's present in the Front Matter
*/}}
-{{ if isset .Params "featured_image" }}
-<style media="screen">
- header#masthead {
- height: 60vh;
- background-image: url( {{ $.Params.featured_image | absURL }} );
- background-repeat: no-repeat;
- background-position: center center;
- background-attachment: fixed;
- }
-</style>
+{{ if .IsPage }}
+ {{ if isset .Params "featured_image" }}
+ <style media="screen">
+ header#masthead {
+ height: 60vh;
+ background-image: url( {{ $.Params.featured_image | absURL }} );
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-attachment: fixed;
+ }
+ </style>
+ {{ end }}
{{ end }}
<p class="site-description">{{ .Site.Params.Description }}</p>
</div>
{{ if isset .Site.Menus "main" }}
- {{- partial "main-menu.html" . -}}
+ {{- partial "main-menu.html" . -}}
{{ end }}
</header>
<ul class="social-links-list">
{{ range site.Data.socials.sites | shuffle }}
<li>
- <a href="{{ .url }}/{{ .user }}"><i class="fa-brands fa-square-{{ .name }}"></i><span class="screen-reader-text">{{ .name }}</span></a>
+ <a href="{{ .url }}/{{ .user }}">{{ partial "funcs/svg.html" ".name" }}</a>
</li>
{{ end }}
+ <li class="linux">{{ partial "funcs/svg.html" "linux" }}</li>
</ul>
</div>
--- /dev/null
+<span class="inline-svg" >
+{{- $fname:=print "../SVGs/" ( .Get 0 ) ".svg" -}}
+{{ $fname | readFile | safeHTML }}
+</span>
\ No newline at end of file
