replace bootstrap by picnic, highlight os download

web/layouts/index.html

@@ -15,53 +15,65 @@
    {{ $link_macos32_dmg := printf "%s_macos32.dmg" $prefix -}}
    {{ $link_macos64_dmg := printf "%s_macos64.dmg" $prefix -}}
    {{ $link_macos_brew := "https://formulae.brew.sh/cask/lazpaint" }}
-    <div class="text-center download">
-        <div class="card">
-            <h1 id="download">{{ printf (i18n "download_version") .Site.Params.version}}</h1>
-            <p><a href="http://sourceforge.net/donate/index.php?group_id=404555" class="btn btn-success">{{ i18n "donate" }}</a></p>
-            <p id="os-hint" style="visibility: hidden">{{ i18n "your_os_is" }}</p>
+    <div class="download">
+      <div class="content center">
+        <h1 id="download">{{ printf (i18n "download_version") .Site.Params.version}}</h1>
+        <p><a href="http://sourceforge.net/donate/index.php?group_id=404555" class="button success">{{ i18n "donate" }}</a></p>            
+        <div id="found-os" style="visibility: hidden">
+          <p id="os-hint">{{ i18n "your_os_is" }}</p>
+        </div>
+        <div id="other-os">
+          <div id="Windows">
             <h2>Windows</h2>
-            <p><a class="btn btn-dark" href="{{$link_installer_win32_win64}}">{{ i18n "installation" }} ({{ i18n "bit_32_and_64" }})
+            <p><a class="button" href="{{$link_installer_win32_win64}}">{{ i18n "installation" }} ({{ i18n "bit_32_and_64" }})
                     </a>
-                <a class="btn btn-dark" href="{{$link_win32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
+                <a class="button" href="{{$link_win32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
                     ({{ i18n "no_install" }})</a>
-                <a class="btn btn-dark" href="{{$link_win64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
+                <a class="button" href="{{$link_win64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
                     ({{ i18n "no_install" }})</a>
-                <a href="https://portableapps.com/apps/graphics_pictures/lazpaint-portable" class="btn btn-dark">Portable ({{ i18n "bit_32_and_64" }})</a></p>
+                <a href="https://portableapps.com/apps/graphics_pictures/lazpaint-portable" class="button">Portable ({{ i18n "bit_32_and_64" }})</a></p>
+          </div>
+          <div id="Linux">
             <h2>Linux</h2>
-            <p><a class="btn btn-dark" href="{{$link_linux32_deb}}">{{ printf (i18n "deb_package") (i18n "bit_32") }}
+            <p><a class="button" href="{{$link_linux32_deb}}">{{ printf (i18n "deb_package") (i18n "bit_32") }}
                     </a>
-                <a class="btn btn-dark" href="{{$link_linux64_deb}}">{{ printf (i18n "deb_package") (i18n "bit_64") }}
+                <a class="button" href="{{$link_linux64_deb}}">{{ printf (i18n "deb_package") (i18n "bit_64") }}
                     </a>
-                <a class="btn btn-dark" href="{{$link_linux32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
+                <a class="button" href="{{$link_linux32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
                     ({{ i18n "no_install" }})</a>
-                <a class="btn btn-dark" href="{{$link_linux64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
+                <a class="button" href="{{$link_linux64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
                     ({{ i18n "no_install" }})</a></p>
             <h2>Rpi</h2>
-            <p><a class="btn btn-dark" href="{{$link_rpi32_deb}}">{{ printf (i18n "deb_package") (i18n "bit_32") }}
+            <p><a class="button" href="{{$link_rpi32_deb}}">{{ printf (i18n "deb_package") (i18n "bit_32") }}
                     </a>
-                <a class="btn btn-dark" href="{{$link_rpi64_deb}}">{{ printf (i18n "deb_package") (i18n "bit_64") }}
+                <a class="button" href="{{$link_rpi64_deb}}">{{ printf (i18n "deb_package") (i18n "bit_64") }}
                     </a>
-                <a class="btn btn-dark" href="{{$link_rpi32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
+                <a class="button" href="{{$link_rpi32_no_install}}">{{ printf (i18n "archive") (i18n "bit_32") }}
                     ({{ i18n "no_install" }})</a>
-                <a class="btn btn-dark" href="{{$link_rpi64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
+                <a class="button" href="{{$link_rpi64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
                     ({{ i18n "no_install" }})</a></p>
+          </div>
+          <div id="UNIX">
             <h2>FreeBSD</h2>
-             <p><a class="btn btn-dark" href="{{$link_freebsd64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
+             <p><a class="button" href="{{$link_freebsd64_no_install}}">{{ printf (i18n "archive") (i18n "bit_64") }}
                     ({{ i18n "no_install" }})</a></p>
+          </div>
+          <div id="MacOS">
             <h2>MacOS</h2>
-            <p><a class="btn btn-dark" href="{{$link_macos32_dmg}}">MacOS
+            <p><a class="button" href="{{$link_macos32_dmg}}">MacOS
                     {{ i18n "bit_32" }}</a>
-                <a class="btn btn-dark" href="{{$link_macos64_dmg}}">MacOS
+                <a class="button" href="{{$link_macos64_dmg}}">MacOS
                     {{ i18n "bit_64" }}</a>
-                <a class="btn btn-dark" href="{{$link_macos_brew}}">MacOS
-                    brew</a></p>                    
+                <a class="button" href="{{$link_macos_brew}}">MacOS
+                    brew</a></p>       
+          </div>             
         </div>
+      </div>
     </div>
 {{- end }}
 {{ define "dynamic" }}
 	<script>
-    	var OSName = "unknown";
+    	let OSName = "unknown";
     	if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
     	if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
     	if (navigator.appVersion.indexOf("X11") != -1) OSName = "UNIX";
@@ -69,9 +81,15 @@
 
     	if (OSName != "unknown")
     	{
-    	    osHint = document.getElementById("os-hint");
+    	    const osHint = document.getElementById("os-hint");
         	osHint.innerHTML = osHint.innerHTML.replace("%s", OSName);
-        	osHint.style.visibility = "visible";
+        	
+        	const foundOs = document.getElementById("found-os");
+        	foundOs.style.visibility = "visible";
+        	
+        	const osSpecific = document.getElementById(OSName);
+        	if (osSpecific)
+        	  foundOs.appendChild(osSpecific);
     	}
 	</script>
 {{- end }}

web/layouts/page/last.html

@@ -6,10 +6,11 @@
 {{ $text := replace $text "\n-" "\n•" -}}
 {{ $text := trim $text "\n\r\t " -}}
 <main id="main">
-	<div class="text-center download">
-		<div class="card2">
-			<h1>{{ $last.name }}<br/><a class="btn btn-primary" href="https://github.com/bgrabitmap/lazpaint">GitHub</a></h1>
-			<div class="text-left" style="white-space: pre-line; display: inline-block; padding-bottom: 2em">{{ $text }}</div>
+	<div class="download">
+		<div class="content center">
+			<h1>{{ $last.name }}</h1>
+			<div><a class="button github" href="https://github.com/bgrabitmap/lazpaint">GitHub</a></div>
+			<div class="changes">{{ $text }}</div>
 		</div>
 	</div>
 </main>

web/layouts/partials/header.html

@@ -21,7 +21,7 @@
     <meta name="msapplication-TileColor" content="#2d89ef">
     <meta name="theme-color" content="PaleTurquoise">
 
-    {{ $css := "css/bootstrap.min.css" | relURL -}}
+    {{ $css := "css/picnic.min.css" | relURL -}}
     <link rel="stylesheet" href="{{ $css }}">
     {{ $css := "css/style.css" | relURL -}}
     <link rel="stylesheet" href="{{ $css }}">
@@ -29,22 +29,22 @@
     <title>{{ i18n .Title }}</title>
   </head>
   <body>
-    <div class="float-right d-inline-block m-1">
-    {{- $this := . -}}
-    {{- range $.Site.Home.AllTranslations -}}
+    <div class="top">    
+      <div class="languages">
+      {{- $this := . -}}
+      {{- range $.Site.Home.AllTranslations -}}
         {{- if eq $this.Site.Language .Language }}
-        <span class="btn btn-success">{{ .Language }}</span>
+        <span class="button" disabled>{{ .Language }}</span>
         {{- else }}
-        <a href="{{ .Permalink }}" class="btn btn-light">{{ .Language }}</a>
+        <a href="{{ .Permalink }}" class="button">{{ .Language }}</a>
         {{- end -}}
-    {{- end }}
-    </div>
-    <div class="jumbotron jumbotron-fluid">
-        <div class="container">
-            {{ $img := "img/lazpaint_icon.png" | relURL -}}
-            <img class="logo" src="{{ $img }}" width="128" height="128" style="float: left" alt="LazPaint logo">
-            <h1 class="display-4">LazPaint</h1>
-            <p class="lead" style="color: #e0e0e0;">{{ i18n "app_description" }}</p>
+      {{- end }}
+      </div>
+      <div class="header">
+        {{ $img := "img/lazpaint_icon.png" | relURL -}}
+        <img class="logo" src="{{ $img }}" width="128" height="128" style="float: left" alt="LazPaint logo">
+        <h1>LazPaint</h1>
+        <p class="lead">{{ i18n "app_description" }}</p>
+      </div>
 {{ partial "nav.html" . }}
-        </div>
     </div>

web/layouts/partials/nav.html

@@ -1,5 +1,4 @@
-            <div id="nav-border" class="container">
-                <nav id="nav" class="nav">
+            <div class="menu">
                 {{- $page := . -}}
                 {{- range .Site.Menus.main -}}
                     {{- $item := newScratch -}}
@@ -13,12 +12,11 @@
                         {{- $item.Set "URL" (printf "%s/%s" ($item.Get "URL") $page.Language.Lang) -}}
                     {{- end -}}
                     {{- if eq (relURL $page.Permalink) (relLangURL .URL) -}}
-                        {{- $item.Set "Class" "btn-outline-light" -}} 
+                        {{- $item.Set "Class" "button success" -}} 
                     {{- else -}}
-                        {{- $item.Set "Class" "btn btn-outline-secondary " -}}
+                        {{- $item.Set "Class" "button" -}}
                     {{- end }}
-                    <a href="{{ $item.Get "URL" }}" class="btn text-uppercase {{ $item.Get "Class" }}">{{ i18n ($item.Get "Text") }}</a>&nbsp;
+                    <a href="{{ $item.Get "URL" }}" class="{{ $item.Get "Class" }}">{{ i18n ($item.Get "Text") }}</a>&nbsp;
                 {{- end }}
-                    <a href="https://www.facebook.com/LazPaint" class="btn btn-primary">f</a>
-                </nav>
+                    <a href="https://www.facebook.com/LazPaint" class="button facebook">f</a>
             </div>

web/static/css/style.css

@@ -3,67 +3,156 @@
 }
 
 body {
-    background-color: black;
     color: #f0f0f0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background: black;
 }
 
-.logo {
-    filter: grayscale(30%)
+p {
+    margin: 0px;
+}
+
+h1 {
+    font-size: 3.5rem;
+    font-weight: 300;
+}
+
+h2 {
+    padding-bottom: 0px;
 }
 
-.jumbotron {
-    background-image: url('../img/blog-back.jpg');
+.button {
+    border-radius: 0.32rem;
+}
+
+.success.button {
+    background: rgb(87, 165, 81);
+}
+
+.top {
+    background-image: url("../img/blog-back.jpg");
     background-size: cover;
+    padding-bottom: 30px;
+    margin-bottom: 5px;
     background-repeat: no-repeat;
-    margin: 0px;
-    box-shadow: inset 0 0 100px black;
-    color: white;
-    border-bottom: 5px solid black;
 }
 
-.btn-outline-light {
-    border-bottom: 0.30rem solid white;
-    padding-bottom: 0.15rem;
+.languages {
+    float: right;
+    margin-right: 20px;
+    margin-left: 20px;
 }
 
-/* cool but slow
-.btn {
-    filter: opacity(85%);
-    backdrop-filter: blur(2px);
-}*/
+.languages .button:not([disabled]) {
+    color: black;
+    background: #ddd;
+}
 
-.btn {
-    border-radius: 0.32rem;
+.languages .button:not([disabled]):hover {
+    background: #aaa;
+}
+
+.languages .button[disabled] {
+    background: rgb(87, 165, 81);
+}
+
+.header {
+    margin: 15px;
+}
+
+.logo {
+    filter: grayscale(30%)
+}
+
+.header h1 {
+    padding: 0px;
+}
+
+.header .lead {
+    margin-top: 0px;
+}
+
+.menu {
+    clear: both;
+    text-align: center;
+}
+
+.menu .button:not(.facebook) {
+    text-transform: uppercase;
+}
+
+.menu .button:not(.success):not(.facebook) {
+    color: #777;
+    background: transparent;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #777;
+}
+
+.menu .button:not(.success):not(.facebook):hover {
+    background: #777;
+    color: white;
+}
+
+.menu .button.success {
+    background: transparent;
+    border-width: 1px 1px 4px;
+    border-style: solid;
+    border-color: white;
+    border-bottom: 4px solid white;
+    padding-bottom: 0.15em;
+}
+
+.menu .button.success:hover {
+    background: white;
+    color: black;
 }
 
 .download {
     min-height: 100vh;
-    background-image: url('../img/lzpwall.jpg');
+    background-image: url("../img/lzpwall.jpg");
     background-size: cover;
-    background-position: center;
     color: white;
+    background-position: center center;
 }
 
-.download h1 {
-    padding: 30px;
+.center {
+    text-align: center;
 }
 
-.download .card {
+.download .content {
     background-color: rgba(0, 0, 0, 0.4);
     min-height: 100vh;
-    box-shadow: inset 0 0 100px rgb(6, 44, 87);
+    box-shadow: rgb(6, 44, 87) 0px 0px 100px inset;
 }
 
-.download .card2 {
-    background-color: rgba(0, 0, 0, 0.6);
-    min-height: 100vh;
-    box-shadow: inset 0 0 100px rgb(6, 44, 87);
+.download h1 {
+    padding-top: 30px;
+    padding-bottom: 0;
 }
 
 #os-hint {
     font-size: 125%;
 }
 
+#other-os .button:not(.success) {
+    background: rgb(68, 68, 68);
+}
+
+.download .button {
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(0, 0, 0, 0.25);
+}
+
+.changes {
+  white-space: pre-line; 
+  display: inline-block; 
+  padding-top: 0.5em;
+  padding-bottom: 2em; 
+  text-align: left;
+}
+
 .footer {
     color: slategray;
 }