fix avatar and embed shortcodes, add small button css

layouts/partials/head/fonts.html

@@ -4,7 +4,7 @@
 <!-- base font -->
 <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <!-- monospaced for code -->
-<link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" type="text/css">
 
 <!-- Configurable  Fonts -->
 {{ with .Site.Params }}

layouts/shortcodes/avatar.html

@@ -1,9 +1,13 @@
-{{ $numOfParams := ( len .Params ) }}
-{{ $avatar := "avatar.jpg" }}
-{{ if eq $numOfParams 1 }}{{ $avatar := .Get 1 }}{{ end }}
-<div class="box box--avatar">
-  {{ if eq $numOfParams 2 }}<a href="{{.Get 1 }}">{{ end }}
 {{ $path := "/images/" }} {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
-	<img class="avatar" src="{{ $path }}{{ $avatar }}"/>
-  {{ if eq $numOfParams 2 }}</a>{{ end }}
+{{ if .IsNamedParams }}
+<div class="box box--avatar">
+  {{ with .Get "url" }}<a href="{{.}}">{{ end }}
+	<img class="avatar" src="{{ $path }}{{ .Get "img" }}"/>
+  {{ with .Get "url" }}</a>{{ end }}
 </div>
+{{ else }}
+{{ $avatar := ( .Get 0 | default "avatar.jpg" ) }}
+<div class="box box--avatar">
+	<img class="avatar" src="{{ $path }}{{ $avatar }}"/>
+</div>
+{{ end }}

layouts/shortcodes/embed.html

@@ -17,7 +17,7 @@
     {{ end }}
 </div>
 {{ else }}
-<div class="box box--embed box--{{ .Get 0 }}">
+<div class="box box--embed {{ with .Get 0 }}embed--{{ . }}{{ end }}">
     {{ .Inner }}
 </div>
 {{ end }}

static/css/page.css

@@ -181,6 +181,14 @@
   padding-right: 0.5em;
 }
 
+.box--embed {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding-bottom: 0;
+  justify-content: center;
+  align-items: center;
+}
+
 .box--embed::before {
   content: "";
   height: 0.5em;
@@ -239,6 +247,11 @@
   font-size: 3rem;
 }
 
+.btn--small .btn__text,
+.btn--small .btn__icon {
+  font-size: 1rem;
+}
+
 .btn--circle {
   border-radius: 50%;
   padding: 0.5em;
@@ -266,22 +279,6 @@
   opacity: 1;
 }
 
-/*may get rid of this after fixing embed shortcode */
-.box__embed {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-}
-
-.box--embed {
-  flex-direction: column;
-  flex-wrap: nowrap;
-  padding-bottom: 0;
-}
-
 .thumb--yt {
   display: flex;
   align-items: center;
@@ -335,14 +332,14 @@
 
 code {
   font-size: 0.8em;
-  font-family: Inconsolata;
+  font-family: 'Roboto Mono', monospace;
   background-color: black;
   border-radius: 0.2em;
   color: white;
   padding-left: 0.2em;
   padding-right: 0.2em;
   padding-top: 0.05em;
-  padding-bottom: 0.3em;
+  padding-bottom: 0.07em;
   overflow-x: scroll;
 }