Initial own color theme

mainly uses DDNet or DDNet-like colors (blue, orange)

config.toml

@@ -15,6 +15,7 @@ home = ["HTML", "RSS", "JSON"]
 
 [params]
 editURL = "https://gitlab.com/ddnet-wiki/ddnet-wiki.gitlab.io/blob/master/content/"
+themeVariant = "ddnet"
 
 # Hide Next and Previous page buttons normally displayed full height beside content
 disableNextPrev = true

content/about/editing.md

@@ -3,5 +3,26 @@ title: "Editing pages"
 weight: 10
 ---
 
+## Colors
 
+Existing colors:
+
+* ddnet.tw sidebar blue: #d8efff
+* ddnet.tw links red: #aa4444
+* ddnet.tw hove links dark red: #882222
+* ddnet logo light orange: #ffa500
+* ddnet logo dark orange: #f27400
+* ddnet logo light blue: #6ac1ff
+* ddnet logo dark blue: #4a9be6
+* teeworlds.com background color light blue: #9eb5d6
+* default tee: #c3a267
+* ddnet-wiki videos: #5e84ae
+
+Helful resources to pick colors:
+
+* https://material.io/resources/color/#!/?view.left=0&view.right=0
+* https://material.io/design/color/text-legibility.html#text-backgrounds
+  * High-emphasis text has an opacity of 87% (0xdd)
+  * Medium-emphasis text and hint text have opacities of 60% (0x99)
+  * Disabled text has an opacity of 38% (0x60)
 

static/css/theme-ddnet.css

 :root{
     
-    --MAIN-TEXT-color:#323232; /* Color of text by default */
-    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
-    --MAIN-LINK-color:#1C90F3; /* Color of links */
-    --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
+    --MAIN-TEXT-color:#000000; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #000000; /* Color of titles h2-h3-h4-h5 */
+    --MAIN-LINK-color:#aa4444; /* Color of links */
+    --MAIN-LINK-HOVER-color:#882222; /* Color of hovered links */
     --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
 
-    --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
-    --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ 
+    --MENU-HEADER-BG-color:#b84500; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color:#811200; /*Color of menu header border */ 
 
-    --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */
-    --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* Override search field icons color */
+    --MENU-SEARCH-BG-color:#ffffff; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #000000; /* Override search field border color */
+    --MENU-SEARCH-BOX-ICONS-color: #000000; /* Override search field icons color */
 
-    --MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
-    --MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
-    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+    --MENU-SECTIONS-ACTIVE-BG-color:#d8efff; /* Background color of the active section and its childs */
+    --MENU-SECTIONS-BG-color:#a6bdcc; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #00000099; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #000000dd;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #000000dd; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
@@ -39,6 +39,7 @@ h2, h3, h4, h5 {
 }
 
 a {
+    font-weight: bold;
     color: var(--MAIN-LINK-color);
 }
 

static/css/theme.css

@@ -438,7 +438,6 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 }
 #footer {
     padding: 3rem 1rem;
-    color: #b3b3b3;
     font-size: 13px;
 }
 #footer p {