diff --git a/backend/page_scripts.js b/backend/page_scripts.js index ae075e0..b453a08 100644 --- a/backend/page_scripts.js +++ b/backend/page_scripts.js @@ -25,7 +25,7 @@ async function index(request, response) { }); } function register(request, response) { - response.render("register.ejs", getDefaults(request)); + response.render(getThemePage("register"), getDefaults(request)); } function login(request, response) { response.render(getThemePage("login"), getDefaults(request)); diff --git a/frontend/public/css/admin.css b/frontend/public/css/admin.css deleted file mode 100644 index 8d2be6a..0000000 --- a/frontend/public/css/admin.css +++ /dev/null @@ -1,252 +0,0 @@ -body { - margin: 0; - background-color: #111; - color: white; - font-family: Verdana, Geneva, Tahoma, sans-serif; -} - -.header { - background-color: #222; - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - padding: 0 10px; - box-sizing: border-box; - margin-bottom: 1rem; -} -.header .left { - margin: auto auto auto 0; - font-size: 20px; - height: 100%; -} -.header .left a { - width: inherit; -} -.header .right { - margin: auto 0 auto auto; - height: 100%; - display: flex; - flex-direction: row; -} -.header .right a:hover, -.header .right a:focus { - background-color: #333; -} -.header a { - height: 100%; - width: 130px; - margin: auto 0; - display: flex; - text-decoration: none; - transition: background-color ease-in-out 0.1s; -} -.header a div { - margin: auto; - color: white; -} - -button { - background-color: #1c478a; - border: 0; - border-radius: 5px; - color: white; - cursor: pointer; -} - -button:hover, -button:focus { - background-color: #122d57; -} - -button.good, -a.good { - background-color: #015b01; -} - -button.yellow, -a.yellow { - background-color: #4a4a00; -} - -button.bad, -a.bad { - background-color: #8e0000; -} - -.page { - width: 1000px; - min-height: 10px; - margin: 0 auto; -} -.page .horizontal-button-container { - display: flex; - flex-direction: row; -} -.page .horizontal-button-container button, -.page .horizontal-button-container a { - width: 120px; - min-height: 30px; - text-decoration: none; - display: flex; - margin-right: 5px; -} -.page .horizontal-button-container button span, -.page .horizontal-button-container a span { - margin: auto; -} -.page .horizontal-button-container button:last-of-type, -.page .horizontal-button-container a:last-of-type { - margin-right: 0; -} -.page .blog-admin { - margin-bottom: 10px; -} -.page .pagination { - display: flex; - flex-direction: row; - width: 100%; - margin: 0 auto; -} -.page .pagination a { - height: 40px; - width: 150px; - margin-right: 5px; - display: flex; - text-decoration: none; - background-color: #222; -} -.page .pagination a span { - margin: auto; - color: white; - font-size: 20px; -} -.page .pagination a:last-of-type { - margin-right: 0; - margin-left: 5px; -} -.page .pagination a.disabled { - filter: brightness(50%); -} -.page .pagination .page-list { - flex-grow: 1; - display: flex; - flex-direction: row; - margin-bottom: 50px; -} -.page .pagination .page-list a { - width: 40px; - height: 40px; - display: flex; - text-decoration: none; - background-color: #222; - border-radius: 10px; - margin: 0 10px 0 0; -} -.page .pagination .page-list a span { - margin: auto; - color: white; -} -.page .pagination .page-list a:first-of-type { - margin: auto 10px auto auto; -} -.page .pagination .page-list a:last-of-type { - margin: auto auto auto 0; -} -.page .pagination .page-list a.active { - background-color: #993d00; -} - -.hidden { - display: none !important; -} - -@media screen and (max-width: 1010px) { - .page { - width: 95%; - } -} -.container { - background-color: #222; - min-height: 10px; - padding: 10px 20px; - box-sizing: border-box; -} -.container .category-navigation { - width: 100%; - height: 30px; - display: flex; - margin-bottom: 15px; -} -.container .category-navigation button { - width: 100%; - margin-right: 5px; - border-radius: 5px; - text-decoration: none; - display: flex; -} -.container .category-navigation button span { - margin: auto; - color: white; -} -.container .category-navigation button:not(.active) { - background-color: #4c515e; -} -.container .category-navigation button:hover, -.container .category-navigation button:focus { - filter: brightness(50%); -} -.container .setting-row { - display: flex; - flex-direction: row; - min-height: 30px; - padding: 5px; - box-sizing: border-box; -} -.container .setting-row .setting-title { - font-size: 18px; - margin: auto auto auto 0; -} -.container .setting-row .setting-toggleable { - min-width: 150px; - display: flex; - margin: auto 0 auto auto; -} -.container .setting-row .setting-toggleable .spinner { - margin: auto 0 auto auto; - animation: spin 1s; - animation-timing-function: linear; - animation-iteration-count: infinite; -} -.container .setting-row .setting-toggleable input { - padding: 0; - margin: auto 0 auto auto; - height: 25px; - width: 100px; - box-sizing: border-box; - text-align: center; - border-radius: 10px; -} -.container .setting-row .setting-toggleable input[type=text] { - width: 350px; -} -.container .setting-row .setting-toggleable button { - width: 125px; - margin-left: auto; - height: 30px; -} -.container .setting-row:nth-child(even) { - background-color: #1c1c1c; -} -.container .setting-row:nth-child(odd) { - background-color: #191919; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(-360deg); - } -} \ No newline at end of file diff --git a/frontend/public/css/admin.scss b/frontend/public/css/admin.scss deleted file mode 100644 index 92eb208..0000000 --- a/frontend/public/css/admin.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use "theme"; - -.container { - background-color: theme.$header-color; - min-height: 10px; - padding: 10px 20px; - box-sizing: border-box; - - .category-navigation { - width: 100%; - height: 30px; - display: flex; - margin-bottom: 15px; - - button { - width: 100%; - margin-right: 5px; - border-radius: 5px; - text-decoration: none; - display: flex; - - span { - margin: auto; - color: white; - } - } - - button:not(.active) { - background-color: #4c515e; - } - - button:hover, - button:focus { - filter: brightness(50%); - } - - button:active { - // display: none; - } - } - - .setting-row { - display: flex; - flex-direction: row; - min-height: 30px; - padding: 5px; - box-sizing: border-box; - - .setting-title { - font-size: 18px; - margin: auto auto auto 0; - } - - .setting-toggleable { - min-width: 150px; - display: flex; - margin: auto 0 auto auto; - - .spinner { - margin: auto 0 auto auto; - animation: spin 1s; - animation-timing-function: linear; - animation-iteration-count: infinite; - } - - input { - padding: 0; - margin: auto 0 auto auto; - height: 25px; - width: 100px; - box-sizing: border-box; - text-align: center; - border-radius: 10px; - } - - input[type="text"] { - width: 350px; - } - - button { - width: 125px; - margin-left: auto; - height: 30px; - } - } - } - .setting-row:nth-child(even) { - background-color: #1c1c1c; - } - .setting-row:nth-child(odd) { - background-color: #191919; - } -} -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(-360deg); - } -} diff --git a/frontend/public/css/blog-list.css b/frontend/public/css/blog-list.css deleted file mode 100644 index c561f5c..0000000 --- a/frontend/public/css/blog-list.css +++ /dev/null @@ -1,128 +0,0 @@ -.blog-admin { - width: 100%; - background-color: #222; - margin-bottom: 20px; - padding: 5px; - box-sizing: border-box; -} -.blog-admin .horizontal-button-container a { - background-color: #00367b; - color: white; - text-decoration: none; - padding: 5px 10px; - box-sizing: border-box; - border-radius: 5px; -} - -.search-area { - width: 100%; - height: 30px; - margin-bottom: 10px; - display: flex; - flex-direction: row; -} -.search-area input { - width: 50%; - background-color: black; - border: 0; - outline: 0; - border-radius: 5px; - color: white; - height: 100%; - text-indent: 5px; - margin: 0 10px 0 auto; -} -.search-area button { - height: 100%; - min-width: 100px; - margin: 0 auto 0 0; -} - -.blog-entry { - width: 100%; - display: grid; - grid-template-columns: 150px auto; - grid-gap: 10px; - margin-bottom: 10px; -} -.blog-entry .thumbnail { - width: 150px; - height: 150px; -} -.blog-entry .thumbnail img { - height: 100%; - width: 100%; -} -.blog-entry .blog-info { - display: flex; - flex-direction: column; -} -.blog-entry .blog-info .blog-title { - font-size: 20px; - border-bottom: 1px solid #9f9f9f; - display: flex; -} -.blog-entry .blog-info .blog-title a { - color: white; - text-decoration: none; -} -.blog-entry .blog-info .blog-title .author { - color: #9f9f9f; - font-style: italic; - margin-left: auto; - font-size: 16px; -} -.blog-entry .blog-info .blog-description { - color: #9f9f9f; - margin-top: 10px; - max-height: 100px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - word-break: none; - overflow: hidden; - text-align: left; -} -.blog-entry .blog-info .blog-action { - display: flex; - flex-direction: row; - margin-top: auto; -} -.blog-entry .blog-info .blog-action .date { - font-size: 16px; - color: gray; - margin-right: auto; -} -.blog-entry .blog-info .blog-action a { - color: white; - font-style: italic; -} - -.blog-entry:last-of-type { - margin-bottom: inherit; -} - -@media screen and (max-width: 500px) { - .search-area { - height: 60px; - flex-direction: column; - } - .search-area input { - width: 100%; - height: 30px; - margin: 0; - } - .search-area button { - height: 30px; - width: 100%; - margin: 0; - } - .page .blog-entry { - grid-template-columns: 75px auto; - margin-bottom: 20px; - } - .page .blog-entry .thumbnail { - width: 75px; - height: 75px; - } -} \ No newline at end of file diff --git a/frontend/public/css/blog-list.scss b/frontend/public/css/blog-list.scss deleted file mode 100644 index 08d0736..0000000 --- a/frontend/public/css/blog-list.scss +++ /dev/null @@ -1,142 +0,0 @@ -$quiet-text: #9f9f9f; - -.blog-admin { - width: 100%; - background-color: #222; - margin-bottom: 20px; - padding: 5px; - box-sizing: border-box; - - .horizontal-button-container { - a { - background-color: #00367b; - color: white; - text-decoration: none; - padding: 5px 10px; - box-sizing: border-box; - border-radius: 5px; - } - } -} - -.search-area { - width: 100%; - height: 30px; - margin-bottom: 10px; - display: flex; - flex-direction: row; - - input { - width: 50%; - background-color: black; - border: 0; - outline: 0; - border-radius: 5px; - color: white; - height: 100%; - text-indent: 5px; - margin: 0 10px 0 auto; - } - - button { - height: 100%; - min-width: 100px; - margin: 0 auto 0 0; - } -} - -.blog-entry { - width: 100%; - display: grid; - grid-template-columns: 150px auto; - grid-gap: 10px; - margin-bottom: 10px; - - .thumbnail { - width: 150px; - height: 150px; - img { - height: 100%; - width: 100%; - } - } - - .blog-info { - display: flex; - flex-direction: column; - .blog-title { - font-size: 20px; - border-bottom: 1px solid $quiet-text; - display: flex; - a { - color: white; - text-decoration: none; - } - - .author { - color: $quiet-text; - font-style: italic; - margin-left: auto; - font-size: 16px; - } - } - .blog-description { - color: $quiet-text; - margin-top: 10px; - max-height: 100px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - word-break: none; - overflow: hidden; - text-align: left; - } - - .blog-action { - display: flex; - flex-direction: row; - margin-top: auto; - - .date { - font-size: 16px; - color: gray; - margin-right: auto; - } - a { - color: white; - font-style: italic; - } - } - } -} - -.blog-entry:last-of-type { - margin-bottom: inherit; -} - -@media screen and (max-width: 500px) { - .search-area { - height: 60px; - flex-direction: column; - input { - width: 100%; - height: 30px; - margin: 0; - } - button { - height: 30px; - width: 100%; - margin: 0; - } - } - .page { - .blog-entry { - grid-template-columns: 75px auto; - margin-bottom: 20px; - .thumbnail { - width: 75px; - height: 75px; - } - } - } -} diff --git a/frontend/public/css/blogNew.css b/frontend/public/css/blogNew.css deleted file mode 100644 index 706206c..0000000 --- a/frontend/public/css/blogNew.css +++ /dev/null @@ -1,192 +0,0 @@ -.e-header { - width: 100%; - display: grid; - grid-template-columns: 150px auto; - background-color: #222; - padding: 10px; - box-sizing: border-box; - grid-gap: 20px; - margin-bottom: 10px; -} -.e-header .e-thumbnail { - height: 150px; -} -.e-header .e-thumbnail img { - height: 100%; - width: 100%; - -o-object-fit: cover; - object-fit: cover; -} -.e-header .e-description { - width: 100%; - display: flex; - flex-direction: column; -} -.e-header .e-description input { - margin-bottom: 5px; -} -.e-header .e-description textarea { - color: #ccc; - font-size: 16px; - width: 100%; - flex-grow: 1; -} - -.e-image-area { - background-color: #222; - min-height: 200px; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); - grid-template-rows: auto auto; - grid-gap: 4px; - padding: 5px; - box-sizing: border-box; - width: 100%; - margin-bottom: 10px; -} -.e-image-area .placeholder { - margin: auto; - grid-row: 1/-1; - grid-column: 1/-1; -} -.e-image-area .image { - height: 100px; - aspect-ratio: 16/9; - margin: auto; - display: flex; - position: relative; -} -.e-image-area .image img { - max-height: 100%; - max-width: 100%; - margin: auto; -} -.e-image-area .image div { - position: absolute; - right: 0; - padding: 5px 10px; - box-sizing: border-box; - background-color: darkred; - cursor: pointer; -} - -.e-content { - background-color: #222; - padding: 5px; - margin-bottom: 10px; -} -.e-content .text-actions { - height: 35px; - width: 100%; - background-color: #424242; - border-radius: 2px; - display: flex; - flex-flow: row wrap; - place-content: space-around; -} -.e-content .text-actions .left, -.e-content .text-actions .right { - height: 100%; - display: flex; - flex-direction: row; -} -.e-content .text-actions .left a, -.e-content .text-actions .right a { - height: 100%; - max-height: 100%; - min-width: 50px; - display: flex; - border-radius: 2px; - background-color: #333; - box-sizing: border-box; - cursor: pointer; -} -.e-content .text-actions .left a span, -.e-content .text-actions .right a span { - margin: auto; -} -.e-content .text-actions .left a img, -.e-content .text-actions .right a img { - margin: auto; - height: 100%; - padding: 5px; - box-sizing: border-box; - color: white; -} -.e-content .text-actions .left { - margin: 0 auto 0 0; -} -.e-content .text-actions .right { - margin: 0 0 0 auto; -} -.e-content .text-actions a:hover, -.e-content .text-actions a:focus { - filter: brightness(50%); -} -.e-content textarea { - font-size: 16px; - min-height: 200px; - color: white; - outline: 0; -} - -.e-tags { - min-height: 40px; - width: 100%; - background-color: #222; - display: flex; - flex-direction: row; - padding: 5px; - box-sizing: border-box; - margin-bottom: 1rem; -} -.e-tags input { - width: 100%; -} - -.e-settings { - min-height: 40px; - width: 100%; - background-color: #222; - display: flex; - flex-direction: row; - padding: 5px; - box-sizing: border-box; - margin-bottom: 1rem; -} -.e-settings .publish-date { - display: flex; -} -.e-settings .publish-date div { - margin: auto 10px auto auto; -} -.e-settings .publish-date input { - margin-right: 5px; -} -.e-settings input, -.e-settings textarea { - width: 200px; -} -.e-settings .horizontal-buttons { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} -.e-settings .horizontal-buttons button { - width: 200px; - height: 40px; -} - -input, -textarea { - width: 100%; - padding: 5px; - box-sizing: border-box; - margin: 0; - border: 0; - background-color: black; - color: white; - font-size: 18px; - resize: vertical; -} \ No newline at end of file diff --git a/frontend/public/css/blogNew.scss b/frontend/public/css/blogNew.scss deleted file mode 100644 index 7b3d0a9..0000000 --- a/frontend/public/css/blogNew.scss +++ /dev/null @@ -1,211 +0,0 @@ -$background-body: #222; - -.e-header { - width: 100%; - display: grid; - grid-template-columns: 150px auto; - background-color: $background-body; - padding: 10px; - box-sizing: border-box; - grid-gap: 20px; - margin-bottom: 10px; - - .e-thumbnail { - height: 150px; - - img { - height: 100%; - width: 100%; - object-fit: cover; - } - } - - .e-description { - width: 100%; - display: flex; - flex-direction: column; - - input { - margin-bottom: 5px; - } - - textarea { - color: #ccc; - font-size: 16px; - width: 100%; - flex-grow: 1; - } - } -} - -.e-image-area { - background-color: $background-body; - min-height: 200px; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); - grid-template-rows: auto auto; - grid-gap: 4px; - padding: 5px; - box-sizing: border-box; - width: 100%; - margin-bottom: 10px; - - .placeholder { - margin: auto; - grid-row: 1 / -1; - grid-column: 1 / -1; - } - - .image { - height: 100px; - aspect-ratio: 16/9; - margin: auto; - display: flex; - position: relative; - - img { - max-height: 100%; - max-width: 100%; - margin: auto; - } - - div { - position: absolute; - right: 0; - padding: 5px 10px; - box-sizing: border-box; - background-color: darkred; - cursor: pointer; - } - } -} - -.e-content { - background-color: $background-body; - padding: 5px; - margin-bottom: 10px; - - .text-actions { - height: 35px; - width: 100%; - background-color: #424242; - border-radius: 2px; - display: flex; - flex-flow: row wrap; - place-content: space-around; - - .left, - .right { - height: 100%; - display: flex; - flex-direction: row; - - a { - height: 100%; - max-height: 100%; - min-width: 50px; - display: flex; - border-radius: 2px; - background-color: #333; - box-sizing: border-box; - cursor: pointer; - - span { - margin: auto; - } - - img { - margin: auto; - height: 100%; - padding: 5px; - box-sizing: border-box; - color: white; - } - } - } - - .left { - margin: 0 auto 0 0; - } - .right { - margin: 0 0 0 auto; - } - - a:hover, - a:focus { - filter: brightness(50%); - } - } - - textarea { - font-size: 16px; - min-height: 200px; - color: white; - outline: 0; - } -} - -.e-tags { - min-height: 40px; - width: 100%; - background-color: $background-body; - display: flex; - flex-direction: row; - padding: 5px; - box-sizing: border-box; - margin-bottom: 1rem; - - input { - width: 100%; - } -} - -.e-settings { - min-height: 40px; - width: 100%; - background-color: $background-body; - display: flex; - flex-direction: row; - padding: 5px; - box-sizing: border-box; - margin-bottom: 1rem; - .publish-date { - display: flex; - div { - margin: auto 10px auto auto; - } - input { - margin-right: 5px; - } - } - - input, - textarea { - width: 200px; - } - - .horizontal-buttons { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - - button { - width: 200px; - height: 40px; - } - } -} - -input, -textarea { - width: 100%; - padding: 5px; - box-sizing: border-box; - margin: 0; - border: 0; - background-color: black; - color: white; - font-size: 18px; - resize: vertical; -} diff --git a/frontend/public/css/blogSingle.css b/frontend/public/css/blogSingle.css deleted file mode 100644 index 23c5e97..0000000 --- a/frontend/public/css/blogSingle.css +++ /dev/null @@ -1,68 +0,0 @@ -.page .title { - background-color: #222; - padding: 10px; - box-sizing: border-box; - font-size: 24px; -} -.page .image-container { - width: 100%; - margin-bottom: 4px; -} -.page .image-container img { - width: 100%; -} -.page .video-embed { - width: 100%; - min-height: 560px; - display: flex; -} -.page .video-embed iframe { - width: 100%; - height: 560px; - margin: auto; -} -.page .side-by-side { - display: flex; - flex-flow: row wrap; - place-content: space-around; -} -.page .side-by-side .image-container { - padding: 5px; - box-sizing: border-box; - width: 50%; - margin-bottom: 0; -} -.page .side-by-side .video-embed { - width: 50%; - min-height: 280px; - padding: 5px; - box-sizing: border-box; -} -.page .side-by-side .video-embed iframe { - width: 100%; - height: 280px; -} -.page h1 { - border-bottom: 1px solid #777; -} -.page h2 { - width: 50%; - border-bottom: 1px solid #777; -} -.page h3 { - width: 25%; - border-bottom: 1px solid #777; -} -.page h4 { - width: 20%; - border-bottom: 1px solid #777; -} -.page a { - color: white; -} - -@media screen and (max-width: 500px) { - .page .side-by-side .image-container { - width: 100%; - } -} \ No newline at end of file diff --git a/frontend/public/css/blogSingle.scss b/frontend/public/css/blogSingle.scss deleted file mode 100644 index 699f09d..0000000 --- a/frontend/public/css/blogSingle.scss +++ /dev/null @@ -1,86 +0,0 @@ -.page { - .title { - background-color: #222; - padding: 10px; - box-sizing: border-box; - font-size: 24px; - } - - .image-container { - width: 100%; - margin-bottom: 4px; - - img { - width: 100%; - } - } - - .video-embed { - width: 100%; - min-height: 560px; - display: flex; - - iframe { - width: 100%; - height: 560px; - margin: auto; - } - } - - .side-by-side { - display: flex; - flex-flow: row wrap; - place-content: space-around; - - .image-container { - padding: 5px; - box-sizing: border-box; - width: 50%; - margin-bottom: 0; - } - - .video-embed { - width: 50%; - min-height: 280px; - padding: 5px; - box-sizing: border-box; - - iframe { - width: 100%; - height: 280px; - } - } - } - - h1 { - border-bottom: 1px solid #777; - } - - h2 { - width: 50%; - border-bottom: 1px solid #777; - } - h3 { - width: 25%; - border-bottom: 1px solid #777; - } - - h4 { - width: 20%; - border-bottom: 1px solid #777; - } - - a { - color: white; - } -} - -@media screen and (max-width: 500px) { - .page { - .side-by-side { - .image-container { - width: 100%; - } - } - } -} diff --git a/frontend/public/css/login.css b/frontend/public/css/login.css deleted file mode 100644 index 9dcc99d..0000000 --- a/frontend/public/css/login.css +++ /dev/null @@ -1,38 +0,0 @@ -.page .page-center { - margin-top: 2rem; -} -.page .page-center .page-modal { - width: 400px; - height: 200px; - background-color: white; - margin: auto; - padding: 1rem; - box-sizing: border-box; -} -.page .page-center .page-modal .title { - font-size: 1.4rem; - text-align: center; -} -.page .page-center .page-modal .login-part { - width: 100%; - margin-bottom: 1rem; -} -.page .page-center .page-modal .login-part input { - width: 100%; - padding: 0.25rem; - box-sizing: border-box; -} -.page .page-center .page-modal .action-container { - display: flex; - flex-direction: row-reverse; -} -.page .page-center .page-modal .action-container button { - width: 100px; - padding: 0.25rem; - box-sizing: border-box; - margin-left: auto; - height: 30px; -} -.page .page-center .page-modal .action-container a { - margin: auto auto auto 0; -} \ No newline at end of file diff --git a/frontend/public/css/signin.css b/frontend/public/css/signin.css deleted file mode 100644 index efaf286..0000000 --- a/frontend/public/css/signin.css +++ /dev/null @@ -1,217 +0,0 @@ -body { - margin: 0; - background-color: #111; - color: white; - font-family: Verdana, Geneva, Tahoma, sans-serif; -} - -.header { - background-color: #222; - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - padding: 0 10px; - box-sizing: border-box; - margin-bottom: 1rem; -} -.header .left { - margin: auto auto auto 0; - font-size: 20px; - height: 100%; -} -.header .left a { - width: inherit; -} -.header .right { - margin: auto 0 auto auto; - height: 100%; - display: flex; - flex-direction: row; -} -.header .right a:hover, -.header .right a:focus { - background-color: #333; -} -.header a { - height: 100%; - width: 130px; - margin: auto 0; - display: flex; - text-decoration: none; - transition: background-color ease-in-out 0.1s; -} -.header a div { - margin: auto; - color: white; -} - -button { - background-color: #1c478a; - border: 0; - border-radius: 5px; - color: white; - cursor: pointer; -} - -button:hover, -button:focus { - background-color: #122d57; -} - -button.good, -a.good { - background-color: #015b01; -} - -button.yellow, -a.yellow { - background-color: #4a4a00; -} - -button.bad, -a.bad { - background-color: #8e0000; -} - -.page { - width: 1000px; - min-height: 10px; - margin: 0 auto; -} -.page .horizontal-button-container { - display: flex; - flex-direction: row; -} -.page .horizontal-button-container button, -.page .horizontal-button-container a { - width: 120px; - min-height: 30px; - text-decoration: none; - display: flex; - margin-right: 5px; -} -.page .horizontal-button-container button span, -.page .horizontal-button-container a span { - margin: auto; -} -.page .horizontal-button-container button:last-of-type, -.page .horizontal-button-container a:last-of-type { - margin-right: 0; -} -.page .blog-admin { - margin-bottom: 10px; -} -.page .pagination { - display: flex; - flex-direction: row; - width: 100%; - margin: 0 auto; -} -.page .pagination a { - height: 40px; - width: 150px; - margin-right: 5px; - display: flex; - text-decoration: none; - background-color: #222; -} -.page .pagination a span { - margin: auto; - color: white; - font-size: 20px; -} -.page .pagination a:last-of-type { - margin-right: 0; - margin-left: 5px; -} -.page .pagination a.disabled { - filter: brightness(50%); -} -.page .pagination .page-list { - flex-grow: 1; - display: flex; - flex-direction: row; - margin-bottom: 50px; -} -.page .pagination .page-list a { - width: 40px; - height: 40px; - display: flex; - text-decoration: none; - background-color: #222; - border-radius: 10px; - margin: 0 10px 0 0; -} -.page .pagination .page-list a span { - margin: auto; - color: white; -} -.page .pagination .page-list a:first-of-type { - margin: auto 10px auto auto; -} -.page .pagination .page-list a:last-of-type { - margin: auto auto auto 0; -} -.page .pagination .page-list a.active { - background-color: #993d00; -} - -.hidden { - display: none !important; -} - -@media screen and (max-width: 1010px) { - .page { - width: 95%; - } -} -.center-modal { - margin: auto; - width: 400px; - background-color: #222; - display: flex; - flex-direction: column; - padding: 0 20px 20px 20px; - box-sizing: border-box; - border-radius: 5px; -} -.center-modal .modal-title { - text-align: center; - font-size: 26px; - margin-top: 10px; -} -.center-modal .input-line { - display: flex; - flex-direction: column; - margin-bottom: 20px; -} -.center-modal .input-line div { - margin-bottom: 5px; - font-size: 18px; -} -.center-modal .input-line input { - background-color: #0d0d0d; - border: 0; - padding: 5px; - box-sizing: border-box; - color: white; -} -.center-modal .horizontal-button-container { - flex-direction: row-reverse !important; -} -.center-modal .horizontal-button-container * { - width: 100% !important; -} -.center-modal .horizontal-button-container a, -.center-modal .horizontal-button-container button { - color: white; - display: flex; - width: -moz-min-content; - width: min-content; -} -.center-modal .horizontal-button-container a span, -.center-modal .horizontal-button-container button span { - margin: auto; - text-align: center; -} \ No newline at end of file diff --git a/frontend/public/css/signin.scss b/frontend/public/css/signin.scss deleted file mode 100644 index a46469f..0000000 --- a/frontend/public/css/signin.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use "theme"; - -.center-modal { - margin: auto; - width: 400px; - background-color: theme.$header-color; - display: flex; - flex-direction: column; - padding: 0 20px 20px 20px; - box-sizing: border-box; - border-radius: 5px; - - .modal-title { - text-align: center; - font-size: 26px; - margin-top: 10px; - } - - .input-line { - display: flex; - flex-direction: column; - margin-bottom: 20px; - - div { - margin-bottom: 5px; - font-size: 18px; - } - - input { - background-color: #0d0d0d; - border: 0; - padding: 5px; - box-sizing: border-box; - color: white; - } - } - - .horizontal-button-container { - flex-direction: row-reverse !important; - - * { - width: 100% !important; - } - - a, - button { - color: white; - display: flex; - width: min-content; - - span { - margin: auto; - text-align: center; - } - } - } -} diff --git a/frontend/public/css/theme.css b/frontend/public/css/theme.css deleted file mode 100644 index 39fe2c3..0000000 --- a/frontend/public/css/theme.css +++ /dev/null @@ -1,168 +0,0 @@ -body { - margin: 0; - background-color: #111; - color: white; - font-family: Verdana, Geneva, Tahoma, sans-serif; -} - -.header { - background-color: #222; - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - padding: 0 10px; - box-sizing: border-box; - margin-bottom: 1rem; -} -.header .left { - margin: auto auto auto 0; - font-size: 20px; - height: 100%; -} -.header .left a { - width: inherit; -} -.header .right { - margin: auto 0 auto auto; - height: 100%; - display: flex; - flex-direction: row; -} -.header .right a:hover, -.header .right a:focus { - background-color: #333; -} -.header a { - height: 100%; - width: 130px; - margin: auto 0; - display: flex; - text-decoration: none; - transition: background-color ease-in-out 0.1s; -} -.header a div { - margin: auto; - color: white; -} - -button { - background-color: #1c478a; - border: 0; - border-radius: 5px; - color: white; - cursor: pointer; -} - -button:hover, -button:focus { - background-color: #122d57; -} - -button.good, -a.good { - background-color: #015b01; -} - -button.yellow, -a.yellow { - background-color: #4a4a00; -} - -button.bad, -a.bad { - background-color: #8e0000; -} - -.page { - width: 1000px; - min-height: 10px; - margin: 0 auto; -} -.page .horizontal-button-container { - display: flex; - flex-direction: row; -} -.page .horizontal-button-container button, -.page .horizontal-button-container a { - width: 120px; - min-height: 30px; - text-decoration: none; - display: flex; - margin-right: 5px; -} -.page .horizontal-button-container button span, -.page .horizontal-button-container a span { - margin: auto; -} -.page .horizontal-button-container button:last-of-type, -.page .horizontal-button-container a:last-of-type { - margin-right: 0; -} -.page .blog-admin { - margin-bottom: 10px; -} -.page .pagination { - display: flex; - flex-direction: row; - width: 100%; - margin: 0 auto; -} -.page .pagination a { - height: 40px; - width: 150px; - margin-right: 5px; - display: flex; - text-decoration: none; - background-color: #222; -} -.page .pagination a span { - margin: auto; - color: white; - font-size: 20px; -} -.page .pagination a:last-of-type { - margin-right: 0; - margin-left: 5px; -} -.page .pagination a.disabled { - filter: brightness(50%); -} -.page .pagination .page-list { - flex-grow: 1; - display: flex; - flex-direction: row; - margin-bottom: 50px; -} -.page .pagination .page-list a { - width: 40px; - height: 40px; - display: flex; - text-decoration: none; - background-color: #222; - border-radius: 10px; - margin: 0 10px 0 0; -} -.page .pagination .page-list a span { - margin: auto; - color: white; -} -.page .pagination .page-list a:first-of-type { - margin: auto 10px auto auto; -} -.page .pagination .page-list a:last-of-type { - margin: auto auto auto 0; -} -.page .pagination .page-list a.active { - background-color: #993d00; -} - -.hidden { - display: none !important; -} - -@media screen and (max-width: 1010px) { - .page { - width: 95%; - } -} \ No newline at end of file diff --git a/frontend/public/css/theme.scss b/frontend/public/css/theme.scss deleted file mode 100644 index 4695f31..0000000 --- a/frontend/public/css/theme.scss +++ /dev/null @@ -1,186 +0,0 @@ -$header-color: #222; -$button-generic: #1c478a; - -body { - margin: 0; - background-color: #111; - color: white; - font-family: Verdana, Geneva, Tahoma, sans-serif; -} - -.header { - background-color: $header-color; - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - padding: 0 10px; - box-sizing: border-box; - margin-bottom: 1rem; - - .left { - margin: auto auto auto 0; - font-size: 20px; - height: 100%; - - a { - width: inherit; - } - } - .right { - margin: auto 0 auto auto; - height: 100%; - display: flex; - flex-direction: row; - - a:hover, - a:focus { - background-color: #333; - } - } - a { - height: 100%; - width: 130px; - margin: auto 0; - display: flex; - text-decoration: none; - transition: background-color ease-in-out 0.1s; - - div { - margin: auto; - color: white; - } - } -} - -button { - background-color: $button-generic; - border: 0; - border-radius: 5px; - color: white; - cursor: pointer; -} - -button:hover, -button:focus { - background-color: #122d57; -} - -button.good, -a.good { - background-color: #015b01; -} -button.yellow, -a.yellow { - background-color: #4a4a00; -} -button.bad, -a.bad { - background-color: #8e0000; -} - -.page { - width: 1000px; - min-height: 10px; - margin: 0 auto; - - .horizontal-button-container { - display: flex; - flex-direction: row; - - button, - a { - width: 120px; - min-height: 30px; - text-decoration: none; - // background-color: #222; - display: flex; - margin-right: 5px; - - span { - margin: auto; - } - } - - button:last-of-type, - a:last-of-type { - margin-right: 0; - } - } - - .blog-admin { - margin-bottom: 10px; - } - - .pagination { - display: flex; - flex-direction: row; - width: 100%; - margin: 0 auto; - - a { - height: 40px; - width: 150px; - margin-right: 5px; - display: flex; - text-decoration: none; - background-color: #222; - - span { - margin: auto; - color: white; - font-size: 20px; - } - } - a:last-of-type { - margin-right: 0; - margin-left: 5px; - } - - a.disabled { - filter: brightness(50%); - } - - .page-list { - flex-grow: 1; - display: flex; - flex-direction: row; - margin-bottom: 50px; - - a { - width: 40px; - height: 40px; - display: flex; - text-decoration: none; - background-color: #222; - border-radius: 10px; - margin: 0 10px 0 0; - - span { - margin: auto; - color: white; - } - } - - a:first-of-type { - margin: auto 10px auto auto; - } - a:last-of-type { - margin: auto auto auto 0; - } - - a.active { - background-color: #993d00; - } - } - } -} - -.hidden { - display: none !important; -} -@media screen and (max-width: 1010px) { - .page { - width: 95%; - } -} diff --git a/frontend/public/js/login.js b/frontend/public/js/login.js deleted file mode 100644 index 302a288..0000000 --- a/frontend/public/js/login.js +++ /dev/null @@ -1,17 +0,0 @@ -async function requestLogin() { - const account_information = { - username: qs("#username").value, - password: qs("#password").value, - }; - - const account_response = await request("/login", "POST", account_information); - - // Check response for errors - - // If success, return to account - console.log(account_response); - - if (account_response.body.success) { - location.href = "/"; - } -} diff --git a/frontend/public/js/register.js b/frontend/public/js/register.js deleted file mode 100644 index ac27160..0000000 --- a/frontend/public/js/register.js +++ /dev/null @@ -1,17 +0,0 @@ -async function requestRegister() { - const account_information = { - username: qs("#username").value, - password: qs("#password").value, - }; - - const account_response = await request("/register", "POST", account_information); - - // Check response for errors - - // If success, return to account - console.log(account_response); - - if (account_response.body.success) { - location.href = "/login"; - } -} diff --git a/frontend/views/login.ejs b/frontend/views/login.ejs deleted file mode 100644 index 26b6b1a..0000000 --- a/frontend/views/login.ejs +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - <%= website_name %> | Login - - - <%- include("partials/header.ejs", {selected: 'home'}) %> - -
-
-
Login
-
-
Username
- -
-
-
Password
- -
-
- - Register -
-
-
- - <%- include("partials/footer.ejs") %> - - - - diff --git a/frontend/views/register.ejs b/frontend/views/register.ejs deleted file mode 100644 index cccfff9..0000000 --- a/frontend/views/register.ejs +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - <%= website_name %> | Register - - - <%- include("partials/header.ejs", {selected: 'home'}) %> - -
-
-
Register
-
-
Username
- -
-
-
Password
- -
-
- - Login -
-
-
- - <%- include("partials/footer.ejs") %> - - - - diff --git a/frontend/views/themes/default/ejs/register.ejs b/frontend/views/themes/default/ejs/register.ejs new file mode 100644 index 0000000..cc1b408 --- /dev/null +++ b/frontend/views/themes/default/ejs/register.ejs @@ -0,0 +1,34 @@ + + + + + + + + Yet-Another-Blog + + + <%- include("partials/header.ejs") %> +
+
+
+
Register
+ + +
+ + Login +
+
+
+
+ <%- include("partials/footer.ejs") %> + + + diff --git a/frontend/views/themes/default/js/login.js b/frontend/views/themes/default/js/login.js index 302a288..8c42b6a 100644 --- a/frontend/views/themes/default/js/login.js +++ b/frontend/views/themes/default/js/login.js @@ -15,3 +15,21 @@ async function requestLogin() { location.href = "/"; } } + +async function requestRegister() { + const account_information = { + username: qs("#username").value, + password: qs("#password").value, + }; + + const account_response = await request("/register", "POST", account_information); + + // Check response for errors + + // If success, return to account + console.log(account_response); + + if (account_response.body.success) { + location.href = "/login"; + } +}