light theme (w/ theming engine)
basic-entrys (from json endpoint) mental map for api-endpointsmaster
DerZombiiie
commit
a5b53dec54
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
|
||||
|
After Width: | Height: | Size: 349 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>derzombiiie.com - home</title>
|
||||
<link rel="stylesheet" href="/style/fonts.css">
|
||||
<link rel="stylesheet" href="/style/main.css">
|
||||
<script src="/js/jq.js"></script>
|
||||
<script src="/js/themes.js"></script>
|
||||
<script src="/js/menubar.js"></script>
|
||||
<script src="/js/entry.js"></script>
|
||||
<script src="/js/index.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="menubox"></div>
|
||||
|
||||
<div class="content">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
class entry {
|
||||
constructor( title, author, desc, href, tags ) {
|
||||
this.title = title;
|
||||
this.author = author;
|
||||
this.desc = desc;
|
||||
this.href = href;
|
||||
this.tags = tags;
|
||||
}
|
||||
createelement() {
|
||||
let element = document.createElement("DIV");
|
||||
element.innerHTML +=
|
||||
`<div class="entry">
|
||||
<div class="title">${this.title}</div>
|
||||
<div class="author">BY ${this.author}</div>
|
||||
<hr class="seperator" \>
|
||||
<div class="preview">${this.desc}</div>
|
||||
</div>`
|
||||
element.classList = ["entrybox"]
|
||||
return element
|
||||
}
|
||||
appendto( tag ) {
|
||||
$(tag).append(this.createelement());
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// index.js used for /index.html
|
||||
console.log(
|
||||
` // ------------------------------------------ //
|
||||
// Author: derzombiiie (derz@elidragon.com) //
|
||||
// License: GPLv3 (if not noted otherwise) //
|
||||
// ------------------------------------------ //`)
|
||||
|
||||
// static theme for testing
|
||||
new themes( "light" )
|
||||
|
||||
// get newest 10 blog articles from api
|
||||
$.get("/posts?api&featured&len=10", d => {
|
||||
let json = JSON.parse(d)
|
||||
if ( json.type != "s" )
|
||||
return false
|
||||
else {
|
||||
elements = []
|
||||
for( let i = 0 ; i < json.content.length ; i++ ) {
|
||||
let elem = new entry(json.content[i].title, json.content[i].author, json.content[i].desc, json.content[i].href, json.content[i].tags)
|
||||
elements.push(elem)
|
||||
$(".content").append(elem.createelement())
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
console.log(
|
||||
`- * - # Menubar (by derz) # - * -`)
|
||||
|
||||
class menubar {
|
||||
constructor( tag, content ) {
|
||||
this.tag = tag
|
||||
return this.parse( content )
|
||||
}
|
||||
parse( p ) {
|
||||
let html = '<div class="menubar">'
|
||||
for ( let i = 0; i < p.length ; i++ ) {
|
||||
switch( p[i].type ) {
|
||||
case "href":
|
||||
html += `<div class="href" onclick='location = "${p[i].href}"'>\n`
|
||||
html += `${p[i].text}\n`
|
||||
html += `</div>\n`
|
||||
break
|
||||
|
||||
case "input":
|
||||
html += `<div class="input">\n`
|
||||
html += ` <input type="${ p[i].type ? p[i].type : "text" }" id="${p[i].id}">\n`
|
||||
html += ` <img src="${ p[i].icon }" alt="${ p[i].alt }">\n`
|
||||
html += `</div>`
|
||||
break
|
||||
|
||||
default:
|
||||
console.warn("No type specified!")
|
||||
}
|
||||
html += '<div class="spacer"></div>\n'
|
||||
}
|
||||
html += '</div>\n'
|
||||
$(this.tag).html(html)
|
||||
return html
|
||||
}
|
||||
}
|
||||
|
||||
// init:
|
||||
document.onreadystatechange = () => {
|
||||
if( document.readyState == "complete" )
|
||||
a = new menubar( ".menubox", [
|
||||
{"type":"href", "text":"derzombiiie.com","href":"/"},
|
||||
{"type":"href", "text":"posts", "href":"/posts"},
|
||||
{"type":"href", "text":"newest", "href":"/posts?newest"},
|
||||
{"type":"input","id" :"search-field", "icon":"/icon/search.svg"}
|
||||
])
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
class themes {
|
||||
constructor( theme ) {
|
||||
if ( theme ) return this.loadstyle(theme)
|
||||
fetch("/usermeta?theme").then( d => d.json()).then( d => {
|
||||
if ( d.type == "s" )
|
||||
this.loadstyle( d.style )
|
||||
else
|
||||
console.error("Couldnt read user style")
|
||||
})
|
||||
}
|
||||
|
||||
loadstyle( style ) {
|
||||
$.get( "/style/" + style + ".css" , css => {
|
||||
$('<style type="text/css"></style>')
|
||||
.html(css).appendTo("head")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"type":"s","content":[{"title":"My first Post - test test 12 12 Lorem ipsum dolor sit, amet consectetur elit","author":"derzombiiie","desc":"Hi, this is my first post on this blog, its going to be about IT stuff. now here some Lorem:\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam fugiat commodi illum autem voluptatum, eveniet eos aspernatur neque consequatur. Veritatis nesciunt repellat quae tenetur aut consequatur consequuntur cupiditate quis quod? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus quas culpa perferendis sapiente necessitatibus ea sint vero, commodi pariatur laboriosam vel dignissimos adipisci unde dolores consequuntur. Voluptatibus ad architecto ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas qui reprehenderit id, officiis odio nisi unde? Quaerat quisquam dignissimos, inventore, doloremque expedita iusto maiores quas placeat voluptatem nobis, est sequi.","href":"#","tags":["testing","$$$"]},{"title":"My second Post - test test 12 12 Lorem ipsum dolor sit, amet consectetur elit","author":"derzombiiie","desc":"Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, fugiat? Eius porro nam placeat voluptate nihil quisquam velit quaerat voluptates. Dolorum itaque reiciendis nemo tempora beatae quasi? Officiis, rem. Quis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam tempora quibusdam, autem vel accusamus enim nesciunt? Dolores, adipisci molestias. Totam nisi doloremque modi voluptates eveniet cumque commodi a laborum delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sed qui enim dignissimos id blanditiis voluptatem, vitae nisi facilis tempora eligendi laboriosam, laborum earum eius neque veritatis optio maiores quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem laudantium asperiores, maxime, officiis deserunt sed nulla aperiam distinctio mollitia repellendus vitae! Nostrum enim, rem iste architecto obcaecati quam possimus aliquid! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error laboriosam sapiente quis numquam! Iusto reprehenderit corporis expedita atque illo pariatur molestias, aut, voluptas in corrupti mollitia tenetur doloribus quis inventore.","href":"#","tags":["testing","$$$"]}]}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@font-face {
|
||||
font-family: slkscr;
|
||||
src: url( /style/slkscr.ttf );
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/* Light-theme */
|
||||
|
||||
/* MENU */
|
||||
.menubox {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: black;
|
||||
}
|
||||
.menubox > .menubar {
|
||||
|
||||
}
|
||||
.menubox > .menubar > *:not(.spacer) {
|
||||
font-family: slkscr;
|
||||
font-size: 1.7em;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
border-width: 2px;
|
||||
border-color: black;
|
||||
}
|
||||
.menubox > .menubar > .input > img {
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
/* entry */
|
||||
.entrybox > .entry {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #6d5dbf;
|
||||
border-top-style: solid;
|
||||
border-top-width: 0.6em;
|
||||
border-top-color: #6d5dbf;
|
||||
}
|
||||
.entrybox > .entry > .title {
|
||||
position: relative;
|
||||
font-size: 3em;
|
||||
font-family: slkscr;
|
||||
}
|
||||
.entrybox > .entry > .author {
|
||||
font-style: italic;
|
||||
font-family: slkscr;
|
||||
font-size: 1em;
|
||||
}
|
||||
.entrybox > .entry > .seperator {
|
||||
border: none;
|
||||
border-top-color: #6d5dbf;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
body, html {
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
/* MENU */
|
||||
.menubox {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 2.8em;
|
||||
}
|
||||
.menubox > .menubar {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
height: 1.7em;
|
||||
width: calc( 100% - 1em );
|
||||
}
|
||||
.menubox > .menubar > *:not(.spacer) {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
user-select: none;
|
||||
}
|
||||
.menubox > .menubar > .input > input {
|
||||
position: relative;
|
||||
top: -0.3em;
|
||||
height: 1.1em;
|
||||
width: 12em;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
.menubox > .menubar > .input > img {
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
left: -0.2em;
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
.menubox > .menubar > .spacer {
|
||||
width: 0.5em;
|
||||
}
|
||||
|
||||
/* content */
|
||||
.content {
|
||||
top: 3em;
|
||||
}
|
||||
.entrybox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.entrybox > .entry {
|
||||
position: relative;
|
||||
width: calc( 100% - 10em );
|
||||
left: 5em;
|
||||
top: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.entrybox > .entry > .title-bar {
|
||||
position: relative;
|
||||
justify-content: left;
|
||||
display: flex;
|
||||
}
|
||||
.entrybox > .entry > .title {
|
||||
left: 0px;
|
||||
}
|
||||
.entrybox > .entry > .seperator {
|
||||
position: relative;
|
||||
height: 0px;
|
||||
top: 0.2em;
|
||||
}
|
||||
.entrybox > .entry > .preview {
|
||||
position: relative;
|
||||
top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue