Translations, new icon, blocks, icons & images for softwares and fixing bugs.

static/css/blocks.css

@@ -0,0 +1,45 @@
+
+.block-preview {
+    /*border: black 1px solid;*/
+    box-shadow: 0px 0px 2px 0px #000000;
+    width: min(25em, calc(100vw - 2em));
+    height: 20em;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.block-preview:hover {
+    box-shadow: 0px 0px 4px 0px #000000;
+}
+
+.block-preview .label {
+    transition: max-height 0.2s ease-in;
+    max-height: 20%;
+    overflow: hidden;
+    bottom: 0;
+    background-color: #FFFFFFDD;
+    padding: 0.5em;
+    bottom: 0; 
+}
+
+.block-preview:hover .label {
+    max-height: 100%;
+}
+
+.block-preview .label .show-on-hover {
+    display: none;
+    transition: opacity 0.2s;
+    opacity: 0;
+    max-height: 0;
+    background: none;
+}
+
+.block-preview:hover .label .show-on-hover {
+    display: block;
+    opacity: 1;
+    max-height: 100%;
+}
+
+.padding-container {
+    padding: 1em;
+}

static/css/common.css

@@ -4,15 +4,46 @@ body {
     margin: 0px;
     --light-font: 'Metropolis Light', 'Fira Sans Light','Ubuntu Light', 'Noto Sans Light', sans-serif;
     --primary-color: #50DC71;
-    --nav-background: #FAFAFA;
+    --secondary-color: #FAFAFA;
+    --nav-background: var(--secondary-color);
     --footer-background: #111111; 
 }
 
+/* button */
+
 a[role=button] {
     text-decoration: none;
     color: black;
+    cursor: pointer;
 }
 
+a[role=button].primary {
+    background-color: var(--primary-color);
+}
+
+a[role=button].secondary {
+    background-color: var(--secondary-color);
+}
+
+a[role=button].primary, a[role=button].secondary {
+    padding: 0.5em;
+    text-transform: uppercase;
+    font-size: larger;
+    box-shadow: 0px 0px 2px 0px #000000;
+    transition: box-shadow 0.2s;
+    line-height: 3em;
+}
+
+a[role=button].primary:active, a[role=button].secondary:active {
+    box-shadow: 0px 0px 8px 0px #000000;
+}
+
+a[role=button].primary:hover, a[role=button].secondary:hover {
+    box-shadow: 0px 0px 4px 0px #000000;
+}
+
+/* format */
+
 .center {
     margin-right: auto;
     margin-left: auto;
@@ -32,8 +63,29 @@ a[role=button] {
     margin-right: 0.4em;
 }
 
-#content {
-    padding: 1em;
+.icon-larger-text {
+    width: 1.4em;
+    height: 1.4em;
+    margin-right: 0.4em;
+    margin-top: -0.2em;
+}
+
+h1 {
+    font-size: xx-large;
+}
+
+h2 {
+    font-size: x-large;
+}
+
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 3px;
+}
+
+.flex {
+    display: flex !important;
 }
 
 /* Columns */

static/css/custom.css

@@ -0,0 +1,2 @@
+
+ 

static/css/header.css

@@ -50,6 +50,34 @@ nav .navbar-list {
     background-color: var(--primary-color);
 }
 
+.navbar-list li.background {
+    background-color: var(--nav-background);
+}
+
+
+.menu-with-sub {
+    display: block;
+}
+
+.menu-with-sub .sub-menu {
+    display: none;
+    position: absolute;
+    margin-left: -1.2em;
+    width: 100%;
+}
+
+.menu-with-sub.toggled .sub-menu {
+    display: block;
+}
+
+.menu-with-sub:hover .sub-menu {
+    display: block;
+}
+
+.menu-with-sub .sub-menu:hover {
+    display: block;
+}
+
 #navbar-toggler {
     border: 0;
     background: none;
@@ -60,7 +88,7 @@ nav .navbar-list {
     padding-right: 1em;
 }
 
-@media screen and (max-width: 550px) {
+@media screen and (max-width: 700px) {
     #navbar-toggler {
         display: block;
     }
@@ -99,7 +127,7 @@ nav .navbar-list {
     
     .navbar-list {
         display: block !important;
-        width: 100%;
+        width: 100vw;
         height: 100%;
         padding-left: 0;
     }
@@ -109,7 +137,16 @@ nav .navbar-list {
         display: flex;
     }
     
+    .menu-with-sub {
+        display: block;
+    }
+    
+    .menu-with-sub .sub-menu {
+        margin-left: 1em;
+        display: ruby;
+    }
+    
     #content {
-        padding-top: 3em;
+        padding-top: 4em;
     }
 }

static/css/sections.css

@@ -1,6 +1,17 @@
+
+section.section1 {
+    background-size: cover;
+    background-repeat: no-repeat;
+    color: black;
+    padding-left: 1em;
+    padding-top: 1em;
+    padding-right: 1em;
+}
+
 .section-end-triangle {
     width: 0;
     height: 0;
+    margin-left: -1em;
     border-top-width: 3em;
     border-top-style: solid;
     border-top-color: transparent;