diff options
| author | Loic Guegan <manzerbredes@mailbox.org> | 2020-04-21 15:48:24 +0200 |
|---|---|---|
| committer | Loic Guegan <manzerbredes@mailbox.org> | 2020-04-21 15:48:24 +0200 |
| commit | 5c07eda3fa0e48c7b8337f8b57b8390da86ee6d7 (patch) | |
| tree | 91c2dfa66e00a35c0fe72a04dea4f5f39c0f442f /themes/default/assets | |
Init project
Diffstat (limited to 'themes/default/assets')
| -rw-r--r-- | themes/default/assets/script.js | 103 | ||||
| -rw-r--r-- | themes/default/assets/style.css | 110 |
2 files changed, 213 insertions, 0 deletions
diff --git a/themes/default/assets/script.js b/themes/default/assets/script.js new file mode 100644 index 0000000..4681d9e --- /dev/null +++ b/themes/default/assets/script.js @@ -0,0 +1,103 @@ +// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
+var DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+function startTime() {
+ var today = new Date();
+ var h = today.getHours();
+ var ampm = h >= 12 ? 'PM' : 'AM';
+ var m = today.getMinutes();
+ var s = today.getSeconds();
+ m = checkTime(m);
+ s = checkTime(s);
+ var h = h % 12;
+ var h = h ? h : 12; // the hour '0' should be '12'
+
+ //---------------------
+
+ var dow = DAYS[today.getDay()]
+ var dd = ('0' + today.getDate()).slice(-2)
+ var mm = ('0' + (today.getMonth() + 1 )).slice(-2)
+ var yy = today.getFullYear()
+
+ document.getElementById('date').innerHTML = dow + ' ' + yy + '-' + mm + '-' + dd
+
+ //---------------------
+
+ document.getElementById('time').innerHTML =
+ h + ":" + m + ":" + s + ' ' + ampm;
+ var t = setTimeout(startTime, 500);
+}
+
+function checkTime(i) {
+ if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
+ return i;
+}
+
+var dateElem = document.getElementById('date')
+
+var vpwidth = document.documentElement.clientWidth
+var sections = document.querySelectorAll('.box')
+function fixSectionHeight() {
+ var step = 1
+ if (vpwidth >= 480) step = 2;
+ if (vpwidth >= 768) step = 4;
+
+ sections.forEach(function (s) {
+ s.style.height = 'auto'
+ })
+
+ for (var i = 0; i < sections.length; i += step) {
+ var ss = Array.prototype.slice.call(sections, i, i + step)
+ var hss = ss.map(function (e) { return e.clientHeight })
+ var h = Math.max.apply(null, hss)
+ ss.forEach(function (s) {
+ s.style.height = h + 'px'
+ })
+ }
+}
+
+function addLinks(DATA) {
+ const main = document.querySelector("main");
+
+ function createSection(linkGroup) {
+ const section = document.createElement("section");
+
+ const box = document.createElement("div");
+ box.classList.add("box");
+
+ const title = document.createElement("span");
+ title.classList.add("title");
+ title.innerHTML = linkGroup.category;
+
+ const content = document.createElement('div');
+ content.classList.add('content');
+
+ for (let link of linkGroup.links) {
+ const anchor = document.createElement('a');
+ anchor.setAttribute('href', link.url);
+
+ const anchorSpan = document.createElement('span');
+ anchorSpan.classList.add('links');
+ anchorSpan.innerHTML = link.name;
+
+ anchor.appendChild(anchorSpan);
+
+ content.appendChild(anchor);
+ }
+
+ box.appendChild(title);
+ box.appendChild(content)
+
+ section.appendChild(box);
+
+ return section;
+ }
+
+ for (let linkGroup of DATA.linkGroups) {
+ const section = createSection(linkGroup);
+
+ main.appendChild(section);
+ }
+}
+
diff --git a/themes/default/assets/style.css b/themes/default/assets/style.css new file mode 100644 index 0000000..b2676b4 --- /dev/null +++ b/themes/default/assets/style.css @@ -0,0 +1,110 @@ +
+:root {
+--bgdark: #232836;
+--bglight: #282e3f;
+--bglighter: #2f364a;
+
+--fgdark: #8686a4;
+--fglight: #ccccfa;
+
+--accent: #d39ceb;
+--border: #2f364a;
+--disabled: #696969;
+--hover: #ffffff;
+}
+
+* {
+ font-family: "t kiwi Wide";
+ font-size: 20px;
+}
+
+html {
+ background: var(--bgdark);
+ background-position: top -24px left 0;
+ margin-top: -26px;
+}
+
+html, body {
+ width: 100vw;
+ height: 100vh;
+ padding: 0;
+ margin: 0;
+}
+
+main {
+ display: flex;
+ justify-content: center;;
+ overflow-y: auto;
+ flex-flow: row wrap;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+#clock {
+ position: relative;
+ top: -30px;
+ display: flex;
+ text-align: center;
+}
+
+#time, #date {
+ color: var(--fglight);
+ display: inline-block;
+ margin: 0 5px;
+ flex-grow: 1;
+ width: 0;
+}
+
+#time {
+ text-align: left;
+}
+
+#date {
+ text-align: right;
+}
+
+.links {
+ padding: 5px 15px;
+ width: auto;
+ display: block;
+ text-align: center;
+}
+
+a:visited, a {
+ color: var(--fgdark);
+ text-decoration: none;
+ outline: none;
+}
+
+a:not(.tablinks):visited, a:not(.tablinks) { transition: all 00ms ease 0s; }
+a:hover { color: var(--fglight); }
+
+.slash {
+ color: var(--fgdark);
+}
+
+main section {
+ box-sizing: border-box;
+ min-width: 300px;
+}
+
+.title {
+ display: none;
+}
+
+section {
+ margin: 12px;
+ padding: 12px;
+ /*border: 8px solid var(--fgdark);*/
+ box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.13);
+}
+
+section {
+ background-color: var(--bglight);
+ border-radius: 4px;
+}
+
+section:hover {
+ background-color: var(--bglighter);
+}
|