I hate this code. Needs to be completely rewritten

This commit is contained in:
pedrocx486 2023-03-05 01:54:59 -03:00
parent 8c24fbc872
commit 57edc63f24
15 changed files with 105 additions and 89 deletions

View file

@ -4,9 +4,9 @@
</div> </div>
<div class="text-center"> <div class="text-center">
<input type="text" placeholder="Search by Title" (keyup)="searchArchive($event.target!.value)"> <input type="text" placeholder="Search by title" (keyup)="searchArchive($event.target!.value)">
&nbsp; &nbsp;
<button class="btn-bad-action" type="button" (click)="searchArchive('', true);">× CLEAR</button> <button class="btn" type="button" (click)="searchArchive('', true);">× CLEAR</button>
</div> </div>
<div class="list-group" *ngIf="filteredArchives.length > 0"> <div class="list-group" *ngIf="filteredArchives.length > 0">
@ -22,6 +22,6 @@
<div class="margin-y text-center" *ngIf="!!settings.username"> <div class="margin-y text-center" *ngIf="!!settings.username">
<a href="./"> <a href="./">
<button type="button" class="margins-sides btn-secondary btn-fat">« HOME »</button> <button type="button" class="margins-sides btn btn-fat">« HOME »</button>
</a> </a>
</div> </div>

View file

@ -2,7 +2,7 @@ input[type="text"] {
width: 30%; width: 30%;
} }
@media only screen and (hover: none) { @media screen and (max-width: 600px) {
input[type="text"] { input[type="text"] {
width: 55%; width: 55%;
} }

View file

@ -15,6 +15,6 @@
<div class="text-center"> <div class="text-center">
<a href="./?page=archives"> <a href="./?page=archives">
<button type="button" class="btn-fat btn-primary margins-sides margin-y">« ARCHIVES »</button> <button type="button" class="btn-fat btn margins-sides margin-y">« ARCHIVES »</button>
</a> </a>
</div> </div>

View file

@ -44,13 +44,13 @@
<div class="margin-y text-center" *ngIf="settings.username"> <div class="margin-y text-center" *ngIf="settings.username">
<a href="./"> <a href="./">
<button type="button" class="margins-sides btn-secondary btn-fat">« HOME »</button> <button type="button" class="margins-sides btn btn-fat">« HOME »</button>
</a> </a>
<br /> &nbsp;
<a href="./?page=archives"> <a href="./?page=archives">
<button type="button" class="margin-top margins-sides btn-primary btn-fat"> <button type="button" class="margins-sides btn btn-fat">
« ARCHIVES » « ARCHIVES »
</button> </button>
</a> </a>

View file

@ -3,22 +3,19 @@
padding: 1rem; padding: 1rem;
margin-top: 5rem !important; margin-top: 5rem !important;
margin: 0 auto; margin: 0 auto;
background-color: rgb(56, 56, 56); background-color: rgb(37, 37, 37);
box-shadow: #000a 4px 4px;
width: 50%; width: 50%;
.avatar { .avatar {
padding: 0 1rem 0 1rem; padding: 0 1rem 0 1rem;
display: inline-block; display: inline-block;
max-width: 200px; max-width: 100px;
max-height: 150px; max-height: 100px;
} }
.avatar img { .avatar img {
border: 3px solid #6100a2; max-width: 100px;
border-radius: 5px; max-height: 100px;
max-width: 200px;
max-height: 150px;
display: block; display: block;
} }
@ -27,7 +24,6 @@
.bio-username { .bio-username {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
text-shadow: 0px 0px 10px #00bc97;
font-size: larger; font-size: larger;
} }
@ -41,7 +37,7 @@
} }
} }
@media only screen and (hover: none) { @media screen and (max-width: 600px) {
.margins { .margins {
margin: unset; margin: unset;
} }

View file

@ -1,4 +1,29 @@
[ [
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{
"postTitle": "Hello World!",
"timestamp": "1654062776",
"filename": "hello-world"
},
{ {
"postTitle": "Hello World!", "postTitle": "Hello World!",
"timestamp": "1654062776", "timestamp": "1654062776",

View file

@ -1,6 +1,9 @@
<div class="topnav" *ngIf="!!settings.username"> <div class="topnav" *ngIf="!!settings.username">
<a class="no-focus" href="./">{{settings.blogTitle}}</a> <a class="no-focus" href="./" style="color: rgb(229, 114, 0)">
<a href="./" [class.active]="isCurrentPage('/')">Home</a> {{settings.blogTitle}}
<span class="pointy-thingy">»</span>
</a>
<a href="./" class="first-after-name" [class.active]="isCurrentPage('/')">Home</a>
<a href="./?page=archives" [class.active]="isCurrentPage('/archives')">Archives</a> <a href="./?page=archives" [class.active]="isCurrentPage('/archives')">Archives</a>
<a *ngIf="!!settings?.customUrl?.url" href="{{settings?.customUrl?.url}}" target="_blank">{{settings?.customUrl?.title}}</a> <a *ngIf="!!settings?.customUrl?.url" href="{{settings?.customUrl?.url}}" target="_blank">{{settings?.customUrl?.title}}</a>
<a href="javascript:void(0);" class="icon" (click)="openMenu()"> <a href="javascript:void(0);" class="icon" (click)="openMenu()">

View file

@ -1,13 +1,13 @@
.topnav { .topnav {
min-height: 48px; min-height: 48px;
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #2a2a2a;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 2; z-index: 2;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
} }
.topnav a { .topnav a {
@ -18,20 +18,24 @@
padding: 15px 16px; padding: 15px 16px;
text-decoration: none; text-decoration: none;
font-size: 17px; font-size: 17px;
border-right: rgb(159, 159, 159) 1px solid; border-right: rgb(97, 97, 97) 1px solid;
} }
.topnav a:last-child { .topnav a:last-child {
border-right: unset; border-right: unset;
} }
.topnav a:first-child {
border-right: unset;
}
.topnav a:hover:not(.no-focus) { .topnav a:hover:not(.no-focus) {
background-color: #ddd; background-color: #a1a1a1;
color: black; color: black;
} }
.topnav a.active { .topnav a.active {
background-color: rgb(97, 0, 162); background-color: rgb(229, 114, 0);
color: white; color: white;
} }
@ -39,11 +43,31 @@
display: none; display: none;
} }
.topnav .pointy-thingy {
font-size: 2rem;
line-height: 0%;
position: absolute;
margin-top: 0.5rem;
margin-left: 0.2rem;
}
.topnav .first-after-name {
margin-left: 1rem;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.topnav a:not(:first-child) { .topnav a:not(:first-child) {
display: none; display: none;
} }
.topnav .first-after-name {
margin-left: unset;
}
.topnav a {
border-right: unset;
}
.topnav a.icon { .topnav a.icon {
float: right; float: right;
display: block; display: block;

View file

@ -5,8 +5,8 @@ button {
text-decoration: none; text-decoration: none;
padding: 0.6rem; padding: 0.6rem;
border: none; border: none;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
font-size: .8rem; font-size: 0.8rem;
} }
// Misc. // Misc.
@ -15,51 +15,11 @@ button {
} }
// Primary // Primary
.btn-primary { .btn {
background-color: rgb(97, 0, 162); background-color: rgb(229, 114, 0);
color: white; color: white;
} }
.btn-primary:hover { .btn:hover {
box-shadow: 0px 0px 7px rgb(97, 0, 162); box-shadow: unset;
}
// Secondary
.btn-secondary {
background-color: #00d199;
color: #444;
}
.btn-secondary:hover {
box-shadow: 0px 0px 7px #00d199;
}
// Tertiary
.btn-tertiary {
background-color: #17a2b8;
color: white;
}
.btn-tertiary:hover {
box-shadow: 0px 0px 7px #17a2b8;
}
// Action
.btn-action {
background-color: #00905e;
color: white;
}
.btn-action:hover {
box-shadow: 0px 0px 7px #00905e;
}
// Action
.btn-bad-action {
background-color: #cf2200;
color: white;
}
.btn-bad-action:hover {
box-shadow: 0px 0px 7px #cf2200;
} }

View file

@ -1,21 +1,22 @@
// Cards // Cards
.card { .card {
border: none; border: none;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
} }
.card-header { .card-header {
border-bottom: none; border-bottom: none;
background-color: rgb(97, 0, 162); background-color: rgb(86, 86, 86);
padding: 1rem; padding: 0.5rem;
padding-bottom: 1rem;
margin-bottom: 0; margin-bottom: 0;
} }
.title { .title {
color: #00ffea !important; color: #c2c2c2 !important;
text-decoration: none; text-decoration: none;
font-size: 1.5rem; font-size: 1rem;
font-weight: 500; font-weight: 300;
} }
.timestamp { .timestamp {
@ -29,6 +30,3 @@
margin-top: -10px; margin-top: -10px;
color: #bbb; color: #bbb;
} }
// .card-text {
// }

View file

@ -12,5 +12,5 @@ input[type="text"] {
background-color: transparent; background-color: transparent;
color: white; color: white;
font-size: 15px; font-size: 15px;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
} }

View file

@ -1,17 +1,18 @@
// Lists // Lists
.list-group { .list-group {
padding: 2rem; padding: 2rem;
margin-left: 10%;
margin-right: 10%;
} }
.list-item { .list-item {
padding: 1rem; padding: 1rem;
border: rgb(88, 88, 88) solid 1px;
background-color: rgb(46, 46, 46); background-color: rgb(46, 46, 46);
margin-top: 0.5rem; margin-top: 0.5rem;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
} }
.list-item:hover { .list-item:hover {
background-color: rgb(52, 39, 62); background-color: rgba(52, 52, 52);
cursor: pointer; cursor: pointer;
} }

View file

@ -1,13 +1,13 @@
// Placard // Placard
.placard { .placard {
background-color: rgb(97, 0, 162); background-color: rgb(59, 59, 59);
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
margin: 2rem; margin: 2rem;
font-weight: 200; font-weight: 200;
font-size: 1.25rem; font-size: 1.25rem;
color: white; color: white;
box-shadow: #000a 4px 4px; box-shadow: #000a 2px 2px;
} }
.placard-title { .placard-title {

View file

@ -1,10 +1,12 @@
//Margins //Margins
.margins { .margins {
margin: 1rem; margin: 1rem;
margin-left: 15%;
margin-right: 15%;
} }
.margins-sides { .margins-sides {
width: 40%; min-width: 20%;
margin: 0 auto; margin: 0 auto;
} }
@ -21,3 +23,10 @@
.text-center { .text-center {
text-align: center; text-align: center;
} }
@media screen and (max-width: 600px) {
.margins {
margin-left: 5%;
margin-right: 5%;
}
}

View file

@ -12,7 +12,7 @@ body {
font-family: monospace; font-family: monospace;
margin-left: 0.5em; margin-left: 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
background-color: #444; background-color: #363636;
} }
// Anchors // Anchors