commit 6d72186d0ed69faac6ed4adbb7e0dcab995ced93
parent 2e5419f96aeef421c4549f109d23ba8dcc9cdc2d
Author: Ryan Jeffrey <ryan@ryanmj.xyz>
Date: Sat, 12 Feb 2022 18:29:25 -0800
Simplify CSS, get rid of main.css, move nav cluster to the side.
Diffstat:
3 files changed, 150 insertions(+), 338 deletions(-)
diff --git a/public/css/main.css b/public/css/main.css
@@ -1,208 +0,0 @@
-#taskbar {
- width: 75%;
- display: flex;
- height: 200px;
-}
-
-#home {
- width: 20%;
-}
-
-#git-server {
- width: 20%;
-}
-
-
-#blog {
- width: 20%;
-}
-
-
-#files {
- width: 20%;
-}
-
-
-#other-posts {
- width: 20%;
-}
-
-
-.title { text-align: center;
- margin-bottom: .2em; }
-.subtitle { text-align: center;
- font-size: medium;
- font-weight: bold;
- margin-top:0; }
-.todo { font-family: monospace; color: red; }
-.done { font-family: monospace; color: green; }
-.priority { font-family: monospace; color: orange; }
-.tag { background-color: #eee; font-family: monospace;
- padding: 2px; font-size: 80%; font-weight: normal; }
-.timestamp { color: #bebebe; }
-.timestamp-kwd { color: #5f9ea0; }
-.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
-.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
-.org-center { margin-left: auto; margin-right: auto; text-align: center; }
-.underline { text-decoration: underline; }
-p.verse { margin-left: 3%; }
-pre :not(#main-page-title) {
- border: 1px solid #ccc;
- box-shadow: 3px 3px 3px #eee;
- padding: 8pt;
- font-family: monospace;
- overflow: auto;
- margin: 1.2em;
-}
-pre.src {
- position: relative;
- overflow: visible;
- padding-top: 1.2em;
-}
-pre.src:before {
- display: none;
- position: absolute;
- background-color: white;
- top: -10px;
- right: 10px;
- padding: 3px;
- border: 1px solid black;
-}
-pre.src:hover:before { display: inline;}
-/* Languages per Org manual */
-pre.src-asymptote:before { content: 'Asymptote'; }
-pre.src-awk:before { content: 'Awk'; }
-pre.src-C:before { content: 'C'; }
-/* pre.src-C++ doesn't work in CSS */
-pre.src-clojure:before { content: 'Clojure'; }
-pre.src-css:before { content: 'CSS'; }
-pre.src-D:before { content: 'D'; }
-pre.src-ditaa:before { content: 'ditaa'; }
-pre.src-dot:before { content: 'Graphviz'; }
-pre.src-calc:before { content: 'Emacs Calc'; }
-pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
-pre.src-fortran:before { content: 'Fortran'; }
-pre.src-gnuplot:before { content: 'gnuplot'; }
-pre.src-haskell:before { content: 'Haskell'; }
-pre.src-hledger:before { content: 'hledger'; }
-pre.src-java:before { content: 'Java'; }
-pre.src-js:before { content: 'Javascript'; }
-pre.src-latex:before { content: 'LaTeX'; }
-pre.src-ledger:before { content: 'Ledger'; }
-pre.src-lisp:before { content: 'Lisp'; }
-pre.src-lilypond:before { content: 'Lilypond'; }
-pre.src-lua:before { content: 'Lua'; }
-pre.src-matlab:before { content: 'MATLAB'; }
-pre.src-mscgen:before { content: 'Mscgen'; }
-pre.src-ocaml:before { content: 'Objective Caml'; }
-pre.src-octave:before { content: 'Octave'; }
-pre.src-org:before { content: 'Org mode'; }
-pre.src-oz:before { content: 'OZ'; }
-pre.src-plantuml:before { content: 'Plantuml'; }
-pre.src-processing:before { content: 'Processing.js'; }
-pre.src-python:before { content: 'Python'; }
-pre.src-R:before { content: 'R'; }
-pre.src-ruby:before { content: 'Ruby'; }
-pre.src-sass:before { content: 'Sass'; }
-pre.src-scheme:before { content: 'Scheme'; }
-pre.src-screen:before { content: 'Gnu Screen'; }
-pre.src-sed:before { content: 'Sed'; }
-pre.src-sh:before { content: 'shell'; }
-pre.src-sql:before { content: 'SQL'; }
-pre.src-sqlite:before { content: 'SQLite'; }
-/* additional languages in org.el's org-babel-load-languages alist */
-pre.src-forth:before { content: 'Forth'; }
-pre.src-io:before { content: 'IO'; }
-pre.src-J:before { content: 'J'; }
-pre.src-makefile:before { content: 'Makefile'; }
-pre.src-maxima:before { content: 'Maxima'; }
-pre.src-perl:before { content: 'Perl'; }
-pre.src-picolisp:before { content: 'Pico Lisp'; }
-pre.src-scala:before { content: 'Scala'; }
-pre.src-shell:before { content: 'Shell Script'; }
-pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
-/* additional language identifiers per "defun org-babel-execute"
- in ob-*.el */
-pre.src-cpp:before { content: 'C++'; }
-pre.src-abc:before { content: 'ABC'; }
-pre.src-coq:before { content: 'Coq'; }
-pre.src-groovy:before { content: 'Groovy'; }
-/* additional language identifiers from org-babel-shell-names in
- ob-shell.el: ob-shell is the only babel language using a lambda to put
- the execution function name together. */
-pre.src-bash:before { content: 'bash'; }
-pre.src-csh:before { content: 'csh'; }
-pre.src-ash:before { content: 'ash'; }
-pre.src-dash:before { content: 'dash'; }
-pre.src-ksh:before { content: 'ksh'; }
-pre.src-mksh:before { content: 'mksh'; }
-pre.src-posh:before { content: 'posh'; }
-/* Additional Emacs modes also supported by the LaTeX listings package */
-pre.src-ada:before { content: 'Ada'; }
-pre.src-asm:before { content: 'Assembler'; }
-pre.src-caml:before { content: 'Caml'; }
-pre.src-delphi:before { content: 'Delphi'; }
-pre.src-html:before { content: 'HTML'; }
-pre.src-idl:before { content: 'IDL'; }
-pre.src-mercury:before { content: 'Mercury'; }
-pre.src-metapost:before { content: 'MetaPost'; }
-pre.src-modula-2:before { content: 'Modula-2'; }
-pre.src-pascal:before { content: 'Pascal'; }
-pre.src-ps:before { content: 'PostScript'; }
-pre.src-prolog:before { content: 'Prolog'; }
-pre.src-simula:before { content: 'Simula'; }
-pre.src-tcl:before { content: 'tcl'; }
-pre.src-tex:before { content: 'TeX'; }
-pre.src-plain-tex:before { content: 'Plain TeX'; }
-pre.src-verilog:before { content: 'Verilog'; }
-pre.src-vhdl:before { content: 'VHDL'; }
-pre.src-xml:before { content: 'XML'; }
-pre.src-nxml:before { content: 'XML'; }
-/* add a generic configuration mode; LaTeX export needs an additional
- (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
-pre.src-conf:before { content: 'Configuration File'; }
-
-caption.t-above { caption-side: top; }
-caption.t-bottom { caption-side: bottom; }
-td, th { vertical-align:top; }
-th.org-right { text-align: center; }
-th.org-left { text-align: center; }
-th.org-center { text-align: center; }
-td.org-right { text-align: right; }
-td.org-left { text-align: left; }
-td.org-center { text-align: center; }
-dt { font-weight: bold; }
-.footpara { display: inline; }
-.footdef { margin-bottom: 1em; }
-.figure { padding: 1em; }
-.figure p { text-align: center; }
-.equation-container {
- display: table;
- text-align: center;
- width: 100%;
-}
-.equation {
- vertical-align: middle;
-}
-.equation-label {
- display: table-cell;
- text-align: right;
- vertical-align: middle;
-}
-.inlinetask {
- padding: 10px;
- border: 2px solid gray;
- margin: 10px;
- background: #ffffcc;
-}
-#org-div-home-and-up
-{ text-align: right; font-size: 70%; white-space: nowrap; }
-textarea { overflow-x: auto; }
-.linenr { font-size: smaller }
-.code-highlighted { background-color: #ffff00; }
-.org-info-js_info-navigation { border-style: none; }
-#org-info-js_console-label
-{ font-size: 10px; font-weight: bold; white-space: nowrap; }
-.org-info-js_search-highlight
-{ background-color: #ffff00; color: #000000; font-weight: bold; }
-.org-svg { width: 90%; }
diff --git a/public/css/terminal.css b/public/css/terminal.css
@@ -1,5 +1,15 @@
-@import './rgb.css';
-@import './main.css';
+
+:root {
+ --dodger_blue4:#104e8b;
+ --dark_orchid2:#b23aee;
+ --green2:#00ee00;
+ --white:#ffffff;
+ --bisque4:#8b7d6b;
+ --blue:#0000ff;
+ --spring_green:#00ff7f;
+ --gray:#bebebe;
+ --yellow:#ffff00;
+}
/* unvisited link */
a:link {
@@ -33,7 +43,7 @@ a:active {
text-shadow: 0 0 4px var(--white);
}
-.topl:hover {
+nav:hover {
box-shadow: 0 0 0.2em 0.2em #0ff;
}
@@ -43,7 +53,7 @@ h4 {
margin-top: 0;
color: white;
font-color: white;
- font-family: "Cantarell", Sans-Serif;
+ font-family: Sans-Serif;
font-size: 0.8em;
}
@@ -59,51 +69,63 @@ h3 {
width: 100%;
}
-#task-meta {
- width: 75%;
- padding: 0;
- margin: auto;
- margin-top: auto;
- background-color: rgba(41,44,45,0.6);
- border: 0.1em solid white;
+nav {
text-align: center;
- text-shadow:
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000;
-}
-
-#taskbar div {
- display: inline-block;
- zoom: 1;
- width: 19%;
- text-align:center;
+ clear: both;
margin: auto;
- margin-top: auto;
- margin-bottom: 5%;
- padding: 0;
+ max-width: 175px;
+ max-height: 90%;
}
-
-
-#task-meta hr {
- /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
- background: #ffffff; /* Old browsers */
- background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
- background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
- background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
-
+nav li {
+ dispaly: inline-block;
+ list-style: none;
+ padding: 0.5em;
+ max-width: 7em;
+ max-height: 9em;
}
-#taskbar img {
- width: 40%;
- height: 40%;
+nav ul {
+ padding: 0;
+ margin: 0.5em;
+}
+
+@media (min-width: 1200px) {
+ nav {
+ float: left;
+ width: 10%;
+ position: fixed;
+ text-align: left;
+ font-size: large;
+
+ padding: 0;
+ margin: auto;
+ margin-top: auto;
+ background-color: rgba(41,44,45,0.9);
+ border: 0.1em solid white;
+ text-shadow:
+ -1px -1px 0 #000,
+ 1px -1px 0 #000,
+ -1px 1px 0 #000,
+ 1px 1px 0 #000;
+ }
+
+ nav::before {
+ content: "Links";
+ text-align: center;
+ display: block;
+ font-size: large;
+ color: violet;
+ text-decoration: underline;
+ margin: 0.5em;
+ }
+}
+
+nav li {
transition: transform 0.3s;
}
-.taskimg:hover {
+nav li:hover {
transform: scale(1.5);
}
@@ -217,6 +239,10 @@ tr:first-child td {
vertical-align: center;
}
+li {
+ color: var(--white);
+ text-shadow: 0 0 4px var(--white);
+}
th, td {
margin: 0 auto;
@@ -226,5 +252,5 @@ th, td {
}
th {
- color: var(--spring_green1);
+ color: var(--spring_green);
}
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
@@ -14,99 +14,93 @@
<link rel="shortcut icon" type="image/x-icon" href="/res/favicon-32x32.ico">
</head>
<body>
- <div id="preamble" class="status">
- <div id="task-meta" class="topl">
- <h4 style="margin-left:1em; margin-top:0.5em;">Links</h4>
- <hr>
-
- <div id="taskbar">
- <div id="home">
- <a href="/"><img src="/res/user-home.png" alt="Homepage" class="taskimg"></a>
- <h4>Home</h4>
- </div>
-
- <div id="blog">
- <a href="/posts/"><img src="/res/folder-documents.png" alt="Blog" class="taskimg"></a>
- <h4>Blog</h4>
- </div>
+ <nav>
+ <ul>
+ <li>
+ <a href="/"><img src="/res/user-home.png" alt="Homepage"></a>
+ <h4>Home</h4>
+ </li>
- <div id="files">
- <a href="/files/"><img src="/res/ktorrent.png" alt="Files" class="taskimg"></a>
- <h4>Files</h4>
- </div>
-
- <div id="git-server">
- <a href="https://git.ryanmj.xyz"><img src="/res/folder-git.png" alt="git" class="taskimg"></a>
- <h4>Git Server</h4>
- </div>
+ <li>
+ <a href="/posts/"><img src="/res/folder-documents.png" alt="Blog"></a>
+ <h4>Blog</h4>
+ </li>
- <div id="contact-me">
- <a href="mailto:ryan@ryanmj.xyz"><img alt="Email me" src="/res/kopete.png" class="taskimg"></a>
- <h4>Contact Me</h4>
- </div>
- </div>
- </div>
+ <li>
+ <a href="/files/"><img src="/res/ktorrent.png" alt="Files"></a>
+ <h4>Files</h4>
+ </li>
+
+ <li>
+ <a href="https://git.ryanmj.xyz"><img src="/res/folder-git.png" alt="git"></a>
+ <h4>Git Server</h4>
+ </li>
-<!--
- _____ _ ___ _ _ _ _
-|_ _| |__ ___ |_ _|_ __ __| |_ _ ___| |_ _ __(_) __ _| |
- | | | '_ \ / _ \ | || '_ \ / _` | | | / __| __| '__| |/ _` | |
- | | | | | | __/ | || | | | (_| | |_| \__ \ |_| | | | (_| | |
- |_| |_| |_|\___| |___|_| |_|\__,_|\__,_|___/\__|_| |_|\__,_|_|
-
- ____ _ _ _ _
-| _ \ _____ _____ | |_ _| |_(_) ___ _ __ __ _ _ __ __| |
-| |_) / _ \ \ / / _ \| | | | | __| |/ _ \| '_ \ / _` | '_ \ / _` |
-| _ < __/\ V / (_) | | |_| | |_| | (_) | | | | | (_| | | | | (_| |
-|_| \_\___| \_/ \___/|_|\__,_|\__|_|\___/|_| |_| \__,_|_| |_|\__,_|
-
- _ _
-(_) |_ ___ ___ ___ _ __ ___ ___ __ _ _ _ ___ _ __ ___ ___ ___
-| | __/ __| / __/ _ \| '_ \/ __|/ _ \/ _` | | | |/ _ \ '_ \ / __/ _ \/ __|
-| | |_\__ \ | (_| (_) | | | \__ \ __/ (_| | |_| | __/ | | | (_| __/\__ \
-|_|\__|___/ \___\___/|_| |_|___/\___|\__, |\__,_|\___|_| |_|\___\___||___/
- |_|
- _ _
-| |__ __ ___ _____ | |__ ___ ___ _ __ __ _
-| '_ \ / _` \ \ / / _ \ | '_ \ / _ \/ _ \ '_ \ / _` |
-| | | | (_| |\ V / __/ | |_) | __/ __/ | | | | (_| |
-|_| |_|\__,_| \_/ \___| |_.__/ \___|\___|_| |_| \__,_|
-
- _ _ _ __ _ _
- __| (_)___ __ _ ___| |_ ___ _ __ / _| ___ _ __ | |_| |__ ___
- / _` | / __|/ _` / __| __/ _ \ '__| | |_ / _ \| '__| | __| '_ \ / _ \
-| (_| | \__ \ (_| \__ \ || __/ | | _| (_) | | | |_| | | | __/
- \__,_|_|___/\__,_|___/\__\___|_| |_| \___/|_| \__|_| |_|\___|
-
- _
-| |__ _ _ _ __ ___ __ _ _ __ _ __ __ _ ___ ___
-| '_ \| | | | '_ ` _ \ / _` | '_ \ | '__/ _` |/ __/ _ \
-| | | | |_| | | | | | | (_| | | | | | | | (_| | (_| __/_
-|_| |_|\__,_|_| |_| |_|\__,_|_| |_| |_| \__,_|\___\___(_)
--->
- {{{body}}}
- <div class="fttr">
- <a href="https://www.gnu.org/software/emacs/">
- <img alt="POWERED BY EMACS" src="/res/stickies/emacs.png" />
- </a>
- <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">
- <img alt="GPLv3" src="/res/stickies/gplv3.png" />
- </a>
- <a href="https://www.sxemacs.org/">
- <img alt="POWERED BY SXEMACS" src="/res/stickies/sxe.png" />
- </a>
- <a href="https://www.xemacs.org/">
- <img alt="POWERED BY XEMACS" src="/res/stickies/xe.png" />
- </a>
+ <li>
+ <a href="mailto:ryan@ryanmj.xyz"><img alt="Email me" src="/res/kopete.png"></a>
+ <h4>Contact Me</h4>
+ </li>
+ </ul>
+ </nav>
+ <!--
+ _____ _ ___ _ _ _ _
+ |_ _| |__ ___ |_ _|_ __ __| |_ _ ___| |_ _ __(_) __ _| |
+ | | | '_ \ / _ \ | || '_ \ / _` | | | / __| __| '__| |/ _` | |
+ | | | | | | __/ | || | | | (_| | |_| \__ \ |_| | | | (_| | |
+ |_| |_| |_|\___| |___|_| |_|\__,_|\__,_|___/\__|_| |_|\__,_|_|
+
+ ____ _ _ _ _
+ | _ \ _____ _____ | |_ _| |_(_) ___ _ __ __ _ _ __ __| |
+ | |_) / _ \ \ / / _ \| | | | | __| |/ _ \| '_ \ / _` | '_ \ / _` |
+ | _ < __/\ V / (_) | | |_| | |_| | (_) | | | | | (_| | | | | (_| |
+ |_| \_\___| \_/ \___/|_|\__,_|\__|_|\___/|_| |_| \__,_|_| |_|\__,_|
+
+ _ _
+ (_) |_ ___ ___ ___ _ __ ___ ___ __ _ _ _ ___ _ __ ___ ___ ___
+ | | __/ __| / __/ _ \| '_ \/ __|/ _ \/ _` | | | |/ _ \ '_ \ / __/ _ \/ __|
+ | | |_\__ \ | (_| (_) | | | \__ \ __/ (_| | |_| | __/ | | | (_| __/\__ \
+ |_|\__|___/ \___\___/|_| |_|___/\___|\__, |\__,_|\___|_| |_|\___\___||___/
+ |_|
+ _ _
+ | |__ __ ___ _____ | |__ ___ ___ _ __ __ _
+ | '_ \ / _` \ \ / / _ \ | '_ \ / _ \/ _ \ '_ \ / _` |
+ | | | | (_| |\ V / __/ | |_) | __/ __/ | | | | (_| |
+ |_| |_|\__,_| \_/ \___| |_.__/ \___|\___|_| |_| \__,_|
+
+ _ _ _ __ _ _
+ __| (_)___ __ _ ___| |_ ___ _ __ / _| ___ _ __ | |_| |__ ___
+ / _` | / __|/ _` / __| __/ _ \ '__| | |_ / _ \| '__| | __| '_ \ / _ \
+ | (_| | \__ \ (_| \__ \ || __/ | | _| (_) | | | |_| | | | __/
+ \__,_|_|___/\__,_|___/\__\___|_| |_| \___/|_| \__|_| |_|\___|
+
+ _
+ | |__ _ _ _ __ ___ __ _ _ __ _ __ __ _ ___ ___
+ | '_ \| | | | '_ ` _ \ / _` | '_ \ | '__/ _` |/ __/ _ \
+ | | | | |_| | | | | | | (_| | | | | | | | (_| | (_| __/_
+ |_| |_|\__,_|_| |_| |_|\__,_|_| |_| |_| \__,_|\___\___(_)
+ -->
+ {{{body}}}
+ <div class="fttr">
+ <a href="https://www.gnu.org/software/emacs/">
+ <img alt="POWERED BY EMACS" src="/res/stickies/emacs.png" />
+ </a>
+ <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">
+ <img alt="GPLv3" src="/res/stickies/gplv3.png" />
+ </a>
+ <a href="https://www.sxemacs.org/">
+ <img alt="POWERED BY SXEMACS" src="/res/stickies/sxe.png" />
+ </a>
+ <a href="https://www.xemacs.org/">
+ <img alt="POWERED BY XEMACS" src="/res/stickies/xe.png" />
+ </a>
- <a href='https://ipv6-test.com/validate.php?url=referer'>
- <img src='/res/stickies/button-ipv6-big.png' alt='ipv6 ready' title='ipv6 ready'>
- </a>
-
- <a href="https://jigsaw.w3.org/css-validator/check/referer">
- <img src="/res/stickies/vcss.gif" alt="Valid CSS!">
- </a>
- </div>
+ <a href='https://ipv6-test.com/validate.php?url=referer'>
+ <img src='/res/stickies/button-ipv6-big.png' alt='ipv6 ready' title='ipv6 ready'>
+ </a>
+
+ <a href="https://jigsaw.w3.org/css-validator/check/referer">
+ <img src="/res/stickies/vcss.gif" alt="Valid CSS!">
+ </a>
</div>
</body>
