Browse Source

Changing the theme of the website

Signed-off-by: Dušan Mitrović <dusan@dusanmitrovic.xyz>
master
Dušan Mitrović 1 week ago
parent
commit
0cc98c0d1b
Signed by: dusan GPG Key ID: 8E81D1BFCE8427E5
20 changed files with 5709 additions and 236 deletions
  1. +0
    -2
      app.js
  2. +5429
    -12
      package-lock.json
  3. +1
    -1
      package.json
  4. +0
    -23
      routes/info.js
  5. +20
    -14
      static/css/blog-post.css
  6. +9
    -22
      static/css/card.css
  7. +5
    -1
      static/css/contact.css
  8. +14
    -9
      static/css/form.css
  9. +1
    -1
      static/css/homepage.css
  10. +13
    -4
      static/css/image-upload.css
  11. +12
    -5
      static/css/navbar.css
  12. +106
    -74
      static/css/prism.css
  13. +40
    -18
      static/css/style.css
  14. +6
    -6
      static/css/webring.css
  15. +4
    -3
      views/404.hbs
  16. +2
    -0
      views/home.hbs
  17. +1
    -1
      views/image-upload.hbs
  18. +0
    -12
      views/info.hbs
  19. +1
    -4
      views/partials/navbar.hbs
  20. +45
    -24
      views/view-data/home.js

+ 0
- 2
app.js View File

@@ -31,7 +31,6 @@ const home = require('./routes/home');
const login = require('./routes/login');
const blog = require('./routes/blog');
const contact = require('./routes/contact');
const info = require('./routes/info');
const rss = require('./routes/rss');
const images = require('./routes/images');

@@ -78,7 +77,6 @@ app.use('/admin', login);
app.use('/admin', images);
app.use('/blog', blog);
app.use('/contact', contact);
app.use('/info', info);
app.use('/rss', rss);

// 404 route, this must always be the last route mounted


+ 5429
- 12
package-lock.json
File diff suppressed because it is too large
View File


+ 1
- 1
package.json View File

@@ -32,7 +32,7 @@
"image-size": "^0.9.3",
"jsdom": "^16.4.0",
"knex": "^0.21.15",
"marked": "^1.2.7",
"marked": "^2.0.1",
"method-override": "^3.0.0",
"moment": "^2.29.1",
"multer": "^1.4.2",


+ 0
- 23
routes/info.js View File

@@ -1,23 +0,0 @@
/**
* @author Dusan Mitrovic <dusan@dusanmitrovic.xyz>
* @license AGPL-3.0-or-later https://opensource.org/licenses/AGPL-3.0
*
* @summary HTTP routes for the licensing page
*/
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
return res.render(
'info',
{
title: 'Info',
year: new Date().getUTCFullYear(),
css: [
'/static/css/blog-post.css'
],
}
);
});

module.exports = router;

+ 20
- 14
static/css/blog-post.css View File

@@ -6,19 +6,20 @@
.blog-post-new-link {
display: inline-block;
padding: 0.5em;
margin-top: 2em;
margin-bottom: 1em;
text-decoration: none;
color: white;
background: black;
color: var(--foreground);
background: var(--red);
}

.blog-post {
padding: 1em;
margin: 1em 0;
background: white;
}

#blog-page {
margin-top: 6em;
width: 700px;
}

@@ -53,8 +54,8 @@
}

.blog-post-link {
color: black;
text-decoration-color: black;
color: var(--red);
text-decoration: none;
}

.blog-navigation {
@@ -63,16 +64,18 @@
}

.blog-navigation-link {
color: black;
color: var(--foreground);
text-decoration: none;
font-size: 2.5rem;
}

.post-content {
background: var(--secondary-bg);
background: var(--background);
color: var(--foreground);
}

.post-content h1 {
color: var(--red);
font-size: 2rem;
margin-bottom: 0.5em;
}
@@ -89,8 +92,8 @@
}

.post-content a {
color: var(--active-color);
text-decoration-color: var(--active-color);
color: var(--yellow-light);
text-decoration-color: var(--yellow-light);
}

.post-content ul,
@@ -109,6 +112,10 @@ ol {
height: auto;
}

.post-content pre {
border: 1px solid var(--foreground);
}

.post-actions {
display: flex;
align-items: center;
@@ -120,16 +127,16 @@ ol {
margin-right: 1em;
padding: 0.5em 1em;
text-decoration: none;
background: var(--secondary-fg);
color: var(--secondary-bg);
background: var(--green);
color: var(--foreground);
}

.post-action-delete {
border-style: none;
padding: 0.8em 1em;
cursor: pointer;
background: var(--error-color);
color: var(--primary-fg);
background: var(--red);
color: var(--foreground);
}

@media screen and (max-width: 576px) {
@@ -182,4 +189,3 @@ ol {
width: 90%;
}
}


+ 9
- 22
static/css/card.css View File

@@ -2,26 +2,19 @@
display: flex;
align-items: center;
justify-content: space-around;
background: white;
padding: 1em 2em;
margin: 1em;
}

.card-image-container {
width: 40%;
}

.card-image {
width: 100%;
height: auto;
}

.card-body {
width: 60%;
margin-left: 2em;
text-align: justify;
text-justify: inter-word;
}

.card-title {
color: var(--red);
font-size: 2rem;
margin-bottom: 0.5em;
}
@@ -33,31 +26,24 @@
}

.card-link {
color: black;
color: var(--foreground);
font-size: 1.3rem;
text-decoration: none;
}

.card-link:hover {
color: var(--active-color);
color: var(--red);
}

@media screen and (max-width: 800px) {
.card {
flex-direction: column;
}

.card-image-container {
width: 100%;
}

.card-image {
width: 100%;
padding: 0.5em 1em;
}

.card-body {
width: 100%;
margin: 0;
text-align: center;
}

.card-text {
@@ -69,10 +55,11 @@
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}

.card-link {
margin: 0.5em 0;
font-size: 1.1rem;
font-size: 1.2rem;
}
}

+ 5
- 1
static/css/contact.css View File

@@ -2,8 +2,12 @@
width: 700px;
}

#contact-form {
margin-top: 3em;
}

@media screen and (max-width: 700px) {
#contact-page {
width: 100%;
}
}
}

+ 14
- 9
static/css/form.css View File

@@ -1,7 +1,7 @@
.form {
display: flex;
padding: 1em;
background: var(--secondary-bg);
background: var(--background);
flex-direction: column;
}

@@ -12,28 +12,33 @@
.form-input {
padding: 1em 2em;
margin-bottom: 1em;
background: white;
border: 1px solid black;
background: var(--backround);
border: 1px solid var(--foreground);
font-size: 1rem;
color: black;
color: var(--foreground);
}

.form-input::placeholder {
color: var(--foreground);
opacity: 1;
}

.form-textarea {
resize: none;
background-color: white;
color: black;
background-color: var(--background);
color: var(--foreground);
padding: 1em;
font-size: 1rem;
margin-bottom: 1em;
border: 1px solid black;
border: 1px solid var(--foreground);
}

.form-button {
width: 20%;
padding: 1em 2em;
border-style: none;
background-color: black;
color: white;
background-color: var(--red);
color: var(--foreground);
cursor: pointer;
}



+ 1
- 1
static/css/homepage.css View File

@@ -1,5 +1,5 @@
#homepage {
width: 80%;
font-size: 1.2rem;
}

@media screen and (max-width: 1000px) {


+ 13
- 4
static/css/image-upload.css View File

@@ -1,5 +1,14 @@
#image-upload-page {
width: 700px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#image-upload-page .form-button {
width: 100%;
}

#image-upload-page img {
@@ -10,21 +19,21 @@

.upload-error {
text-align: center;
color: var(--error-color);
background-color: var(--grey-bg);
color: var(--red);
background-color: var(--background);
margin-top: 1em;
padding: 1em 2em;
}

.upload-output {
text-align: center;
background-color: var(--grey-bg);
background-color: var(--background);
margin-top: 1em;
padding: 0.5em 1em;
}

.upload-output a {
color: var(--success-color);
color: var(--green);
}

@media screen and (max-width: 700px) {


+ 12
- 5
static/css/navbar.css View File

@@ -5,7 +5,8 @@ header {
top: 0;
width: 100%;
z-index: 3;
background-color: var(--pink-color);
background-color: var(--background);
color: var(--red);
}

.navbar-nav {
@@ -16,9 +17,15 @@ header {
}

.navbar-logo-text {
color: var(--foreground);
font-size: 1.2rem;
}

.navbar-branding {
text-decoration: none;
color: var(--foreground);
}

.navbar {
display: flex;
}
@@ -29,17 +36,17 @@ header {
}

.navbar-link {
color: var(--foreground);
text-decoration: none;
color: var(--secondary-fg);
}

.navbar-link:hover {
color: var(--active-color);
color: var(--red);
cursor: pointer;
}

.active {
text-decoration: underline;
color: var(--red);
}

.navbar-nav-area {
@@ -69,4 +76,4 @@ header {
.navbar-link {
font-size: 1.2rem;
}
}
}

+ 106
- 74
static/css/prism.css View File

@@ -1,105 +1,101 @@
/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+java+javadoclike+jsdoc+markup-templating+php+php-extras+python */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/

code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
code[class*='language-'],
pre[class*='language-'] {
color: #abb2bf;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
text-shadow: none;
background: #383e49;
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
text-shadow: none;
background: #9aa2b1;
}

@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #282c34;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: #5c6370;
}

.token.punctuation {
color: #999;
color: #abb2bf;
}

.token.namespace {
opacity: .7;
.token.selector,
.token.tag {
color: #e06c75;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.attr-name,
.token.deleted {
color: #905;
color: #d19a66;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.attr-value,
.token.builtin,
.token.inserted {
color: #690;
color: #98c379;
}

.token.operator,
@@ -107,37 +103,73 @@ pre[class*="language-"] {
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
color: #56b6c2;
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
color: #c678dd;
}

.token.function,
.token.class-name {
color: #DD4A68;
.token.function {
color: #61afef;
}

.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #c678dd;
}

.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}

.token.italic {
font-style: italic;
font-style: italic;
}

.token.entity {
cursor: help;
cursor: help;
}

pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}

pre.line-numbers > code {
position: relative;
}

.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 0;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}

.line-numbers-rows > span:before {
content: counter(linenumber);
color: #5c6370;
display: block;
padding-right: 0.8em;
text-align: right;
}

+ 40
- 18
static/css/style.css View File

@@ -1,14 +1,16 @@
:root {
/* colors */
--primary-bg: #ddd;
--secondary-bg: #fefefe;
--grey-bg: #f5f2f0;
--primary-fg: #fff;
--secondary-fg: #2e2e2e;
--active-color: #888;
--error-color: #dc3545;
--success-color: #3db057;
--pink-color: #fce5e0;
--foreground: #fff;
--background: #282c34;
--background-light: #32302f;
--red: #be5046;
--red-light: #e06c75;
--green: #98c379;
--yellow: #d19a66;
--yellow-light: #e5c07b;
--blue: #61afef;
--magenta: #c678dd;
--cyan: #56b6c2;

/* font options */
font-family: 'Helvetica', sans-serif;
@@ -27,41 +29,61 @@ body {
}

body {
background-color: var(--secondary-bg);
background-color: var(--background);
color: var(--foreground);
z-index: 1;
line-height: 1.6;
}

body h1,h2,h3 {
body h1,
h2,
h3 {
line-height: 1.2;
}

.container {
overflow: hidden;
margin: 6em auto;
margin: 3em auto;
width: 75%;
}

.rounded {
border-radius: 50%;
}

.text-center {
text-align: center;
}

.error-message {
color: var(--error-color);
color: var(--red);
text-align: center;
margin-bottom: 1em;
}

.success-message {
color: var(--success-color);
color: var(--green);
text-align: center;
margin-bottom: 1em;
}

#not-found-page {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.not-found {
line-height: 2;
}

.not-found-title {
color: var(--red);
font-size: 2rem;
}

.not-found-tagline {
margin-top: 1em;
font-size: 1.2rem;
}

@media screen and (max-width: 576px) {
.container {
width: 90%;


+ 6
- 6
static/css/webring.css View File

@@ -1,10 +1,10 @@
.webring hr {
margin-bottom: 1rem;
border: 1px solid var(--active-color);
border: 1px solid var(--yellow-light);
}

.webring h3 {
color: var(--secondary-fg);
color: var(--yellow-light);
font-size: 1.4rem;
margin-bottom: 1rem;
}
@@ -19,7 +19,7 @@
}

.webring .title a {
color: var(--secondary-fg);
color: var(--yellow-light);
}

.webring .article {
@@ -38,12 +38,12 @@
}

.webring .attribution a {
color: var(--secondary-fg);
color: var(--yellow-light);
margin-right: 1rem;
}

.webring .source a {
color: var(--secondary-fg);
color: var(--yellow-light);
}

@media screen and (max-width: 576px) {
@@ -54,4 +54,4 @@
.webring .summary {
font-size: 1rem;
}
}
}

+ 4
- 3
views/404.hbs View File

@@ -1,5 +1,6 @@
<section id="404-page" class="container">
<div class="404-page">
<h1>404 | Page Not Found</h1>
<section id="not-found-page" class="container">
<div class="not-found text-center">
<h1 class="not-found-title">404 | Page Not Found</h1>
<p class="not-found-tagline">Not all roads lead to Rome after all.</p>
</div>
</section>

+ 2
- 0
views/home.hbs View File

@@ -3,5 +3,7 @@
{{#each cards}}
{{> card title=this.title image=this.image content=this.content links=this.links }}
{{/each}}

<p class="text-center">{{copyrightText}}</p>
</main>
</section>

+ 1
- 1
views/image-upload.hbs View File

@@ -18,4 +18,4 @@
</a>
</p>
{{/if}}
</section>
</section>

+ 0
- 12
views/info.hbs View File

@@ -1,12 +0,0 @@
<section id="blog-post" class="container">
<article class="post-content">
<h1>Additional information</h1>
<p>You can examine the source code of this website <a href="https://git.dusanmitrovic.xyz/dusan/dusanmitrovic.xyz">here</a>.</p>
<p>If you would like to contact me using PGP encrypted email, my PGP public key can be found <a href="/static/publickey.txt">here</a>.</p>
<h1>Licensing</h1>
<p>Copyright &copy; {{ year }} Dušan Mitrović, all rights reversed.</p>
<p>This website is free software.</p>
<p>All source code is licensed under the terms of the <a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU Affero General Public License, version 3 or later</a>.</p>
<p>All content is licensed under the terms of the <a href="https://creativecommons.org/licenses/by-sa/4.0/legalcode">CC BY-SA</a> license.</p>
</article>
</section>

+ 1
- 4
views/partials/navbar.hbs View File

@@ -1,7 +1,7 @@
<header>
<nav class="navbar-nav">
<div class="navbar-logo-area">
<h1 class="navbar-logo-text">Dušan Mitrović</h1>
<h1 class="navbar-logo-text"><a class="navbar-branding" href="/">🪐 Dušan Mitrović</a></h1>
</div>
<div class="navbar-nav-area">
<ul class="navbar">
@@ -11,9 +11,6 @@
<li class="navbar-item">
<a class="navbar-link" href="/blog">Blog</a>
</li>
<li class="navbar-item">
<a class="navbar-link" href="/info">Info</a>
</li>
<li class="navbar-item">
<a class="navbar-link" href="/contact">Contact</a>
</li>


+ 45
- 24
views/view-data/home.js View File

@@ -1,53 +1,74 @@
module.exports = {
title: 'Home',
css: [
'/static/css/homepage.css'
],
css: ['/static/css/homepage.css'],
openGraph: {
title: 'Home',
type: 'website',
url: process.env.HOST,
description: `I'm a network engineering student and a professional software developer and a gigantic GNU/Linux enthusiast.`
description: `I'm a network engineering student and a professional software developer and a gigantic GNU/Linux enthusiast.`,
},
copyrightText: `© ${new Date().getFullYear()} Dušan Mitrović - All rights reversed`,
cards: [
{
title: 'About me',
image: {
url: '/static/images/avatar.jpg',
alt: 'An artist\'s impression of the Moon with Mars visible in the background.',
rounded: true
},
content: `I'm a professional software developer, advocate of free and open source software.
My interests are broad, anything from technology to human behavior and psychology.
Despite working as a web developer professionally I still consider programming mostly a hobby.
As such I built this website to have a platform that is truly my own, but most of all for fun.`,
content: `I'm a professional software developer, advocate of free and open source software, minimalism and altruism.
When I'm not coding I study network engineering at ICT College of Vocational studies in Belgrade, Serbia.
Despite working as a backend developer professionally, I still consider programming mostly a hobby.
To that end I develop passion projects, scripts and other stuff that I may consider useful.
This website is one of those passion projects and I use it to write my blog.`,
links: [
{
url: 'https://github.com/dusnm',
text: 'Github'
text: '🐙 Github',
},
{
url: 'https://git.dusanmitrovic.xyz',
text: 'Gitea'
text: '🍵 Gitea',
},
{
url: 'https://mastodon.technology/@duxontraitor',
text: 'Mastodon'
text: '🐘 Mastodon',
},
{
url: 'mailto:business@dusanmitrovic.xyz',
text: 'Email'
text: '✉️ Email',
},
{
url: '/rss',
text: 'RSS'
}
,
text: '📰 RSS Feed',
},
{
url: '/static/dusancv.pdf',
text: 'Résumé'
}
]
text: '💼 Résumé',
},
],
},
]
{
title: 'Other',
content: `This website is free software, licensed under the terms of the GNU AGPL 3.0 or later.
You're free to study it, modify it and redistribute it as long as you abide by the license terms and conditions.
Additionally all content is licensed under the terms of the CC BY-SA 4.0 license.`,
links: [
{
url:
'https://git.dusanmitrovic.xyz/dusan/dusanmitrovic.xyz.',
text: '🔧 Source Code',
},
{
url:
'https://git.dusanmitrovic.xyz/dusan/dusanmitrovic.xyz/raw/branch/master/LICENSE',
text: '⚖️ AGPL 3.0',
},
{
url:
'https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt',
text: '⚖️ CC BY-SA 4.0',
},
{
url: '/static/publickey.txt',
text: '🔑 PGP Key',
},
],
},
],
};

Loading…
Cancel
Save