releasing a better version of the project

Whoeza · Sep 20, 2022 · f4d391b · f4d391b
1 parent 8d18096
commit f4d391b
Show file tree

Hide file tree

Showing 13 changed files with 565 additions and 690 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/index.htm b/index.htm
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Experiments: Turbo Pascal look</title>
+    <link rel="stylesheet" href="layout.css">
+    <link rel="stylesheet" href="uxui.css">
+
+</head>
+
+<body>
+    <!-- TOP MENU -->
+    <nav class="menu">
+        <ul>
+            <li>Menu <span class="shortcut">1</span></li>
+            <li class="disabled">Menu <span class="shortcut">2</span></li>
+            <li>Menu <span class="shortcut">3</span></li>
+            <li>Menu <span class="shortcut">4</span></li>
+            <li>Menu <span class="shortcut">5</span></li>
+            <li>Menu <span class="shortcut">6</span></li>
+            <li>Menu <span class="shortcut">7</span></li>
+            <li>Menu <span class="shortcut">8</span></li>
+            <li>Menu <span class="shortcut">9</span></li>
+            <li>Menu <span class="shortcut">10</span></li>
+
+        </ul>
+    </nav>
+
+    <!-- EDITOR -->
+    <div class="editor-space">
+        <fieldset class="frame">
+            <legend>Frametitle.pas</legend>
+            <textarea readonly="true">
+                Main page text.
+                Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+            Main page text.
+            Cannot be editable.
+        dsafasd
+        fsdfa
+        fdadf
+        asf
+
+        xxxx
+        xxxxxxxx
+        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+            </textarea>
+        </fieldset>
+    </div>
+
+    <!-- BOTTOM MENU -->
+    <footer class="menu">
+        <ul>
+            <li>Status <spa class="shortcut"n>1</span></li>
+            <li class="disabled">Status <spa class="shortcut"n>2</span></li>
+            <li>Status <spa class="shortcut"n>3</span></li>
+            <li>Status <spa class="shortcut"n>4</span></li>
+            <li>Status <spa class="shortcut"n>5</span></li>
+            <li>Status <spa class="shortcut"n>6</span></li>
+            <li>Status <spa class="shortcut"n>7</span></li>
+            <li>Status <spa class="shortcut"n>8</span></li>
+            <li>Status <spa class="shortcut"n>9</span></li>
+            <li>Status <span class="shortcut">10</span></li>
+
+        </ul>
+    </footer>
+
+    <!-- DIALOG CONTAINER -->
+    <div class="dialog-container">
+        <fieldset class="frame">
+            <legend>Dialog title</legend>
+            <div class="dialog">
+                This is the variable dialog area. <br>
+                Adapting to fit the contents. <br><br>
+
+                Here below is the variable buttons area. Buttons align to flex-end.
+            </div>
+
+            <div class="buttons">
+                <button class="disabled">
+                    Try me
+                </button>
+                <button class="default">
+                    OK
+                </button>
+                <button>
+                    Cancel
+                </button>
+                <button>
+                    Help
+                </button>
+
+            </div>
+        </fieldset>
+    </div>
+</body>
+</html>
diff --git a/layout.css b/layout.css
@@ -0,0 +1,174 @@
+/* layout.css */
+
+
+/* LAYOUT */
+/* Consider borders included when tweaking margins and padding */
+*
+{
+    box-sizing: border-box;
+}
+/* Lists have no bullets and no margins by default */
+ul
+{
+    margin: 0;
+    padding: 0;
+}
+/* To center frame titles using <legend> */
+legend
+{
+    margin: auto;
+}
+/* Full screen body, no padding, no margin, no scrollbars */
+body
+{   
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+
+    overflow: hidden; /* for testing, use visible; otherwise, hidden */
+
+    /* display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center; */
+}
+
+/* Z-indexes */
+.editor-space
+{
+    z-index: 0;
+}
+.dialog-container
+{
+    z-index: 1;
+}
+.menu
+{
+    z-index: 2;
+}
+
+
+/* MENUS */
+/* Menus are fixed on the screen, 100% wide, 1em tall, no margin, no padding */
+/* No scrollbars */
+.menu
+{
+    position: fixed;
+    width: 100%;
+    height: 1em;
+    margin: 0px;
+    padding: 0px;
+
+    overflow: visible;
+}
+/* Top menu is at top */
+nav.menu
+{
+    top: 0px;
+}
+/* Bottom menu is at bottom */
+footer.menu
+{
+    bottom: 0px;
+}
+/* Menu lists are horizontal, begin at the start of the block */
+/* Are vertically aligned, no scrollbars */
+.menu ul
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    overflow: visible;
+}
+/* Menu items are as high as their parent, are as wide as their content */
+/* No margin, display text centered, no scrollbars */
+.menu ul li
+{
+    height: 100%;
+    width: max-content;
+    margin: 0em 0.5em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    overflow: visible;
+}
+
+
+/* EDITOR */
+body div.editor-space
+{
+    position: fixed;
+    inset: 1em 0 1em 0;
+    margin: 0 0.5em 0.5em 5px;
+}
+.editor-space .frame
+{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0 0.5em 0.5em 0.5em;
+}
+/* All frames have auto margins for their legend */
+.frame legend
+{
+    margin: auto;
+}
+/* Editor frames use uppercase text-transform */
+.editor-space .frame legend
+{
+    text-transform: uppercase;
+}
+/* Textarea properties, the home of the editor */
+textarea
+{
+    width: 100%;
+    height: 100%;
+    border-width: 0px;
+
+    overflow: scroll;
+    overflow-wrap: normal;
+    white-space: pre;
+    resize: none;
+}
+
+
+/* DIALOGS */
+.dialog-container
+{
+    position: absolute;
+    inset: 0px;
+
+    /* margin-block: auto; */
+    /* margin-inline: auto; */
+    margin: auto;
+
+    height: max-content;
+    width: max-content;
+}
+.dialog-container .frame
+{
+    height: auto;
+    width: auto;
+    padding: 0px;
+}
+.dialog-container .frame .dialog
+{
+    margin: 0.5em;
+}
+.dialog-container .buttons
+{
+    /* margin: 1em; */
+    padding: 1em;
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+button {
+    margin: 0 1em;
+}
diff --git a/src/turbopascal-00-styles.css b/src/turbopascal-00-styles.css
diff --git a/src/turbopascal-01-fonts.css b/src/turbopascal-01-fonts.css