User registration.
Cleanup CSS. Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>pull/1/head
parent
1b9ea56423
commit
5ab8a79e78
GPG Key ID:
C7207ACC3382AD8B
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = "/";
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/signin.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||
<script src="/js/generic.js"></script>
|
||||
<title><%= website_name %> | Login</title>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||
|
||||
<div class="page">
|
||||
<div class="center-modal">
|
||||
<div class="modal-title">Login</div>
|
||||
<div class="input-line">
|
||||
<div>Username</div>
|
||||
<input id="username" type="text" />
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<div>Password</div>
|
||||
<input id="password" type="password" />
|
||||
</div>
|
||||
<div class="horizontal-button-container">
|
||||
<button onclick="requestLogin()"><span>Login</span></button>
|
||||
<a href="/register"><span>Register</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include("partials/footer.ejs") %>
|
||||
</body>
|
||||
</html>
|
||||
<script src="/js/generic.js"></script>
|
||||
<script defer src="/js/login.js"></script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/signin.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
|
||||
<script src="/js/generic.js"></script>
|
||||
<title><%= website_name %> | Register</title>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("partials/header.ejs", {selected: 'home'}) %>
|
||||
|
||||
<div class="page">
|
||||
<div class="center-modal">
|
||||
<div class="modal-title">Register</div>
|
||||
<div class="input-line">
|
||||
<div>Username</div>
|
||||
<input id="username" type="text" />
|
||||
</div>
|
||||
<div class="input-line">
|
||||
<div>Password</div>
|
||||
<input id="password" type="password" />
|
||||
</div>
|
||||
<div class="horizontal-button-container">
|
||||
<button onclick="requestRegister()"><span>Register</span></button>
|
||||
<a href="/login"><span>Login</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include("partials/footer.ejs") %>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script defer src="/js/register.js"></script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/login.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/generic.css" />
|
||||
<script src="/js/generic.js"></script>
|
||||
<title>Yet-Another-Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("partials/header.ejs") %>
|
||||
<div class="page">
|
||||
<div class="page-center">
|
||||
<div class="page-modal">
|
||||
<div class="title">Register</div>
|
||||
<div class="login-part">
|
||||
<div class="name">Username:</div>
|
||||
<input id="username" type="text" />
|
||||
</div>
|
||||
<div class="login-part">
|
||||
<div class="name">Password:</div>
|
||||
<input id="password" type="password" />
|
||||
</div>
|
||||
<div class="action-container">
|
||||
<button onclick="requestRegister()" class="button"><span>Register</span></button>
|
||||
<a href="/login">Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include("partials/footer.ejs") %>
|
||||
</body>
|
||||
</html>
|
||||
<script defer src="/js/login.js"></script>
|
||||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue