]> git.tuebingen.mpg.de Git - aple.git/commitdiff
projects / aple.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 17dd39d)
Improve table of contents menu and style sheet.
authorAndre Noll <maan@tuebingen.mpg.de>
Sun, 10 Jul 2022 19:13:43 +0000 (21:13 +0200)
committerAndre Noll <maan@tuebingen.mpg.de>
Sat, 14 Oct 2023 22:04:26 +0000 (00:04 +0200)
Major changes to the macros and the .css files which should improve
the look and feel of the pages a bit. Most notable is the increased
font size and the new layout of the table of contents dropdown menu.

No content changes.

include/css/aple.css patch | blob | history
include/m4/aple.m4 patch | blob | history

diff --git a/include/css/aple.css b/include/css/aple.css
index e422518cfa3f8400c6fb0f140d443d7aa814234d..da4c70ccddae9b482867e55f091cfcc3e5de3694 100644 (file)
--- a/include/css/aple.css
+++ b/include/css/aple.css
@@ -1,26 +1,47 @@
 body {
-       background-color: #aacccc;
+       color: #000;
+       background-color: #acc;
        text-align: justify;
        padding: 0px 30px 0px 25px;
-
+       font-size: 110%;
 }
 
 h1 {
-       font-size: 150%;
+       font-size: 160%;
+}
+
+h2 {
+       font-size: 130%;
+}
+
+h3 {
+       font-size: 110%;
+}
+
+p {
+       padding: 0px 0px 0px 0px;
 }
 
+
 .logo {
        border: 0px;
-       padding: 0em 20px 0px 0px;
-       margin-left: 0px;
-       margin-right: 0px;
-       border: 0px;
 }
 
 table {
-       margin-left: auto;
+       margin-left: 0px;
        margin-right: auto;
        border: none;
+       padding: 10px 0px 10px 0px;
+}
+
+table.menu {
+       padding: none;
+       border: 0px;
+       border-spacing: 0px;
+}
+
+table.logo {
+       margin-left: 0px;
 }
 
 td {
@@ -28,6 +49,15 @@ td {
        padding: 5px;
 }
 
+td.logo {
+       border: none;
+}
+
+td.menu {
+       border: none;
+       vertical-align: top;
+}
+
 svg {
        float: left;
 }
@@ -38,14 +68,9 @@ svg {
        border: 0px;
 }
 
-#overview_heading {
-       text-align: center;
-       font-weight: bold;
-}
-
-#overview_text {
+.overview {
        margin: 1% 5% 1% 5%;
-       font-size: 95%;
+       font-size: 90%;
 }
 
 div.solution {
@@ -69,10 +94,6 @@ dt {
        text-decoration: underline;
 }
 
-#chapter_list {
-       font-size: 120%;
-}
-
 .dropdown {
        position: fixed;
        top: 0; /* Position the navbar at the top of the page */
@@ -82,11 +103,10 @@ dt {
 .dropdown-content {
        display: none;
        background-color: #8aa;
-       min-width: 300px;
-       padding: 12px 12px;
-       font-size: 75%;
+       padding: 6px 25px 0px 30px;
 }
 
 .dropdown:hover .dropdown-content {
        display: block;
+       font-size: 80%;
 }
diff --git a/include/m4/aple.m4 b/include/m4/aple.m4
index c209513a5a8419115a2e544b408b91363656902c..7b23385d22705cc3931e1b5423fab92b1fefb098 100644 (file)
--- a/include/m4/aple.m4
+++ b/include/m4/aple.m4
@@ -13,22 +13,18 @@ define(«REFERENCE», [«REMOVE_NEWLINE(«$2»)»](««#»»«LOCAL_LINK_NAME(«
 define(«XREFERENCE», «[$2]»«($1)»)
 define(«EMPH», ««_»REMOVE_NEWLINE(«$1»)«_»»)
 define(«CMD», «`REMOVE_NEWLINE(«$1»)`»)
-define(«SECTION», «
-divert(«0»)
-<li> <a href='«#»LOCAL_LINK_NAME(«$1»)'>$1</a> </li>
-divert(«2»)
-<h2 id="LOCAL_LINK_NAME(«$1»)">$1</h2>
-»)
-define(«SUBSECTION», «<h3 id="LOCAL_LINK_NAME(«$1»)">$1</h3>
-»)
+define(«SECTION», « divert(«0») <a
+href='«#»LOCAL_LINK_NAME(«$1»)'>$1</a><br> divert(«2») <h2
+id="LOCAL_LINK_NAME(«$1»)">$1</h2> ») define(«SUBSECTION»,
+«<h3 id="LOCAL_LINK_NAME(«$1»)">$1</h3> »)
 
 define(«OVERVIEW», «
 
-<div id="overview_heading">
-ifelse(«$2», «», «Overview», «$2»)
-</div>
-<div id="overview_text">
-$1
+<div class="overview">
+       <center> <strong>
+               ifelse(«$2», «», «Overview», «$2»)
+       </strong> </center>
+       $1
 </div>
 »)
 define(«EXERCISES», «<h3> Exercises </h3>»)
@@ -63,7 +59,7 @@ define(«HEADER», «
 <body>
 <table class="logo"> <tr>
        <td class="logo">LOGO()</td>
-       <td id="title"> <h1>
+       <td class="logo"> <h1>
                ifelse(«$3», «», «
                        substr(translit(«$2», «_», « »), 0, index(«$2», .m4))
                », «
@@ -76,28 +72,26 @@ define(«HEADER», «
 »)
 
 define(«TABLE_OF_CONTENTS», «
-       <ul id="$1">
-               <li> TOC_ENTRY(«Introduction», «$2») </li>
-               <li> TOC_ENTRY(«Unix_Concepts», «$2») </li>
-               ifelse(PUBLIC(), «false», «
-                       <li> TOC_ENTRY(Command_Line_Utilities, «$2») </li>
-               »)
-               <li> TOC_ENTRY(Networking, «$2») </li>
-               <li> TOC_ENTRY(LVM, «$2») </li>
-               <li> TOC_ENTRY(«Filesystems», «$2») </li>
-               <li> TOC_ENTRY(OS-Level_Virtualization, «$2») </li>
-               ifelse(PUBLIC(), «false», «
-                       <li> TOC_ENTRY(Gridengine, «$2») </li>
-                       <li> TOC_ENTRY(Git, «$2») </li>
-                       <li> TOC_ENTRY(Bash, «$2») </li>
-                       <li> TOC_ENTRY(Debugging, «$2») </li>
-               »)
-       </ul>
+       TOC_ENTRY(«Introduction», «$2»)
+       TOC_ENTRY(«Unix_Concepts», «$2»)
+       ifelse(PUBLIC(), «false», «
+               TOC_ENTRY(Command_Line_Utilities, «$2»)
+       »)
+       TOC_ENTRY(Networking, «$2»)
+       TOC_ENTRY(LVM, «$2»)
+       TOC_ENTRY(«Filesystems», «$2»)
+       TOC_ENTRY(OS-Level_Virtualization, «$2»)
+       ifelse(PUBLIC(), «false», «
+               TOC_ENTRY(Gridengine, «$2»)
+               TOC_ENTRY(Git, «$2»)
+               TOC_ENTRY(Bash, «$2»)
+               TOC_ENTRY(Debugging, «$2»)
+       »)
 »)
 
 define(«TITLE», «
 HEADER(«$1», «$2», «$3»)
-<hr>
+
 <div class="dropdown">
 <svg
        height="35" width="30"
@@ -108,13 +102,19 @@ HEADER(«$1», «$2», «$3»)
        <rect fill="black" height="3" width="20" x="5" y="11" rx="2"/>
        <rect fill="black" height="3" width="20" x="5" y="17" rx="2"/>
 </svg>
-       <div class="dropdown-content">
-               <h3> Chapter </h3>
-               TABLE_OF_CONTENTS(«chapter_list»)
-               <h4> Section </h4>
-               <ul>
+<div class="dropdown-content">
+       <table class="menu">
+               <tr>
+                       <th> Chapter </th>
+                       <th> Section </th>
+               </tr> <tr>
+                       <td class="menu">
+                               TABLE_OF_CONTENTS(«chapter_list»)
+                       </td> <td class="menu">
 divert(«1»)
-</ul>
+                       </td>
+               </tr>
+       </table>
 </div>
 </div>
 divert(«2»)
aple - Advanced Problems in the Linux Environment.