I hate this code. Needs to be completely rewritten
This commit is contained in:
parent
8c24fbc872
commit
57edc63f24
15 changed files with 105 additions and 89 deletions
|
@ -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)">
|
||||||
|
|
||||||
<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>
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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 />
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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()">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
|
@ -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 {
|
|
||||||
// }
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue