diff options
| -rw-r--r-- | src/app/components/admin-panel-page/admin-panel-page.component.html | 62 | ||||
| -rw-r--r-- | src/app/components/comment/comment.component.html | 18 | ||||
| -rw-r--r-- | src/app/components/feed/feed.component.html | 12 | ||||
| -rw-r--r-- | src/app/components/login/login.component.html | 22 | ||||
| -rw-r--r-- | src/app/components/navbar/navbar.component.html | 20 | ||||
| -rw-r--r-- | src/app/components/not-found/not-found.component.html | 10 | ||||
| -rw-r--r-- | src/app/components/post-attachment/post-attachment.component.html | 4 | ||||
| -rw-r--r-- | src/app/components/post-page/post-page.component.html | 6 | ||||
| -rw-r--r-- | src/app/components/post/post.component.html | 36 | ||||
| -rw-r--r-- | src/app/components/profile-settings/profile-settings.component.html | 54 | ||||
| -rw-r--r-- | src/app/components/profile/profile.component.html | 22 | ||||
| -rw-r--r-- | src/app/components/register/register.component.html | 34 | ||||
| -rw-r--r-- | src/styles.css | 54 |
13 files changed, 178 insertions, 176 deletions
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 65f9691..80d6795 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -6,34 +6,34 @@ <app-success-bar></app-success-bar> <app-error-bar></app-error-bar> - <div class="card full-width"> + <div class="card width-full"> <section> - <button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect" (click)="toggleLanguages()"> + <button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect" (click)="toggleLanguages()"> ▼ Edit Languages ▼ </button> <form class="flex-col margin-top-bot-smaller" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages"> - <label class="focus-fg-color"> + <label class="fg-focus"> Create language: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="languageCreate" placeholder="New language name"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="languageCreate" placeholder="New language name"> - <label class="focus-fg-color"> + <label class="fg-focus"> Update language: </label> <div class="flex-row flexible-children"> - <input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name"> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name"> + <input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name"> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name"> </div> - <label class="focus-fg-color"> + <label class="fg-focus"> Delete language: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name"> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit"> Modify languages </button> - <section class="faded-slim-border padding-normal margin-top-normal"> + <section class="border-faded-slim padding-dot4 margin-top-normal"> <div class="none-message" *ngIf="availableLanguages.length === 0"> No languages in database! </div> @@ -41,7 +41,7 @@ Available languages: </div> <div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ lang.name }} </div> </div> @@ -49,32 +49,32 @@ </form> </section> <section> - <button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()"> + <button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()"> ▼ Edit Technologies ▼ </button> <form class="flex-col margin-top-bot-smaller" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies"> - <label class="focus-fg-color"> + <label class="fg-focus"> Create technology: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="technologyCreate" placeholder="New technology name"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="technologyCreate" placeholder="New technology name"> - <label class="focus-fg-color"> + <label class="fg-focus"> Update technology: </label> <div class="flex-row flexible-children"> - <input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name"> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name"> + <input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name"> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name"> </div> - <label class="focus-fg-color"> + <label class="fg-focus"> Delete technology: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name"> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit"> Modify technology </button> - <section class="faded-slim-border padding-normal margin-top-normal"> + <section class="border-faded-slim padding-dot4 margin-top-normal"> <div class="none-message" *ngIf="availableTechnologies.length === 0"> No technologies in database! </div> @@ -82,7 +82,7 @@ Available technologies: </div> <div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ tech.name }} </div> </div> @@ -90,26 +90,26 @@ </form> </section> <section> - <button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()"> + <button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()"> ▼ Deletions ▼ </button> <form class="flex-col margin-top-bot-smaller" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions"> - <label class="focus-fg-color"> + <label class="fg-focus"> Delete user by Id: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteUser" placeholder="User Id"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteUser" placeholder="User Id"> - <label class="focus-fg-color"> + <label class="fg-focus"> Delete post by Id: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deletePost" placeholder="Post Id"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deletePost" placeholder="Post Id"> - <label class="focus-fg-color"> + <label class="fg-focus"> Delete comment by Id: </label> - <input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteComment" placeholder="Comment Id"> + <input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteComment" placeholder="Comment Id"> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit"> Delete </button> </form> diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 27a11e6..0ec443b 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -9,36 +9,36 @@ <span> {{ user.firstName }} {{ user.lastName }} </span> - <span class="fg-color-faded"> + <span class="fg-faded"> @{{ user.userName }} </span> </summary> <form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()"> - <textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small margin-bot-bigger" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea> - <button type="submit" class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger"> + <textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea> + <button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger"> Update Comment </button> </form> <article class="message margin-top-bot-small" *ngIf="!editingComment"> {{ comment.message }} </article> - <section class="comment-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only"> + <section class="comment-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only"> <time class="flex-row flex-center-align-items"> - <img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg"> + <img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg"> <span> {{ timeCreated }} </span> </time> </section> - <section class="flex-row justify-children-center flex-center-align-children"> - <button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()"> + <section class="flex-row justify-children-center align-children-center"> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()"> <img src="/assets/icons/tabler-icon-edit.svg"> </button> - <button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()"> + <button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()"> <img src="/assets/icons/tabler-icon-link.svg"> Share </button> - <button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deleteComment()"> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deleteComment()"> <img src="/assets/icons/tabler-icon-trash.svg"> </button> </section> diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index a7a5e0d..d81a142 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -4,24 +4,24 @@ <main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived"> <form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()"> - <textarea class="textarea-new-msg faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> - <section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger"> + <textarea class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> + <section class="flex-row flex-justify-start align-children-center top-bot-padding-dot6ger"> <div class="file-button hover-half-opacity click-effect"> <img src="/assets/icons/tabler-icon-paperclip.svg"> <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> </div> </section> - <section class="flex-row bot-padding-bigger"> - <div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small"> + <section class="flex-row bot-padding-dot6ger"> + <div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small"> <div class="flexible"> {{ file.name ? file.name : 'Attachment' }} </div> - <div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)"> + <div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)"> <img src="/assets/icons/tabler-icon-x.svg"> </div> </div> </section> - <button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller"> + <button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3"> Post </button> </form> diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 5ed1ac8..7649a3c 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,25 +1,25 @@ -<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height"> - <summary class="title card full-width no-margin padding-small">Login</summary> +<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full"> + <summary class="title card width-full no-margin padding-dot2">Login</summary> - <app-error-bar class="full-width margin-top-normal"></app-error-bar> + <app-error-bar class="width-full margin-top-normal"></app-error-bar> - <form class="full-width card padding-big" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> - <section class="input-selection full-width"> - <input type="text" placeholder="Username" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="username" required> - <label class="fancy-input-label full-width">Username</label> + <form class="width-full card padding-dot6" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> + <section class="input-selection width-full"> + <input type="text" placeholder="Username" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="username" required> + <label class="fancy-input-label width-full">Username</label> <div class="input-errors"> <label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> </div> </section> <section class="input-selection"> - <input type="password" placeholder="Password" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="password" required> - <label class="fancy-input-label full-width">Password</label> + <input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required> + <label class="fancy-input-label width-full">Password</label> <div class="input-errors"> <label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> </div> </section> - <button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button> + <button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button> </form> - <button class="focus-fg-color faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button> + <button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button> </main> diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 89a15e1..d05f6e1 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -1,40 +1,40 @@ <nav id="navbar"> - <div id="nav-contents" class="centered-content flex-row padding-smaller flex-center-align-items"> - <div class="nav-item border-radius-small flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn"> + <div id="nav-contents" class="centered-content flex-row padding-dot3 flex-center-align-items"> + <div class="nav-item border-radius-dot2 flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn"> <div id="nav-profile-picture" class="flex-col"> <img class="round-image" [src]="user.profilePictureURL"> </div> <div id="nav-username" class="font-size-dot9 flex-col"> - <div class="padding-small"> + <div class="padding-dot2"> @{{ user.userName }} </div> </div> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToFeed()" *ngIf="loggedIn"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="goToFeed()" *ngIf="loggedIn"> <img src="/assets/icons/tabler-icon-home.svg"> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none"> <!-- Trending functionality isn't implemented yet! --> <img src="/assets/icons/tabler-icon-trending-up.svg"> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none"> <!-- Chat functionality isn't implemented yet! --> <img src="/assets/icons/tabler-icon-message-circle.svg"> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none"> <!-- Search functionality isn't implemented yet! --> <img src="/assets/icons/tabler-icon-search.svg"> </div> <div class="flexible"> <!-- This element serves as a spacer --> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn"> <img src="/assets/icons/tabler-icon-settings.svg"> </div> - <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn"> + <div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn"> <img src="/assets/icons/tabler-icon-logout.svg"> </div> - <div class="nav-item flex-row flex-center-align-items border-radius-small light-hover hover-half-opacity click-effect side-padding-smaller" (click)="goToLogin()" *ngIf="!loggedIn"> + <div class="nav-item flex-row flex-center-align-items border-radius-dot2 light-hover hover-half-opacity click-effect side-padding-dot3" (click)="goToLogin()" *ngIf="!loggedIn"> Login <img src="/assets/icons/tabler-icon-login.svg"> </div> diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 50bb39b..7b776bd 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -1,15 +1,15 @@ -<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height"> - <div class="card full-width padding-big"> +<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full"> + <div class="card width-full padding-dot6"> <summary class="title"> Page not found! </summary> <hr class="card-hr"> - <nav class="flex-row flexible-children padding-small"> - <button class="flex-row flex-justify-center flex-center-align-items faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-right-small" (click)="backToFeed()"> + <nav class="flex-row flexible-children padding-dot2"> + <button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-right-small" (click)="backToFeed()"> <img src="/assets/icons/tabler-icon-home.svg"> Back to feed </button> - <button class="flex-row flex-justify-center flex-center-align-items faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" (click)="backToLogin()"> + <button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="backToLogin()"> <img src="/assets/icons/tabler-icon-login.svg"> Back to login </button> diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 04ba633..7ef8f07 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,4 +1,4 @@ -<figure class="form-attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()"> +<figure class="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()"> <div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType"> <img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg"> <img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg"> @@ -10,7 +10,7 @@ <div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()"> <img class="attachment-img" *ngIf="isImage" src="{{paramURL}}"> - <a class="attachment-download faded-slim-border padding-normal hover-half-opacity click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}"> + <a class="attachment-download border-faded-slim padding-dot4 hover-half-opacity click-effect border-radius-dot3" *ngIf="!isImage" href="{{paramURL}}"> Download attachment </a> </div> diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 10618c1..b05046e 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -4,9 +4,9 @@ <main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived"> <app-post [paramId]="postId.toString()"></app-post> - <form class="card flex-col full-width no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()"> - <textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg faded-slim-border border-bottom-only padding-small margin-bot-bigger" formControlName="newComment"></textarea> - <button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller" type="submit"> + <form class="card flex-col width-full no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()"> + <textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" formControlName="newComment"></textarea> + <button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3" type="submit"> Add Comment </button> </form> diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 65bc73a..1008e64 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -9,7 +9,7 @@ <span> {{ user.firstName }} {{ user.lastName }} </span> - <span class="fg-color-faded"> + <span class="fg-faded"> @{{ user.userName }} </span> </summary> @@ -22,66 +22,66 @@ </figure> </section> <form [formGroup]="editPostFormGroup" *ngIf="editingPost"> - <textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> - <section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger"> + <textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea> + <section class="flex-row flex-justify-start align-children-center top-bot-padding-dot6ger"> <div class="file-button hover-half-opacity click-effect"> <img src="/assets/icons/tabler-icon-paperclip.svg"> <input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple> </div> </section> </form> - <section class="flex-row bot-padding-bigger" *ngIf="editingPost"> - <div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small"> + <section class="flex-row bot-padding-dot6ger" *ngIf="editingPost"> + <div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small"> <div class="flexible"> {{ file.name ? file.name : 'Attachment' }} </div> - <div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)"> + <div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)"> <img src="/assets/icons/tabler-icon-x.svg"> </div> </div> </section> - <button class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger" *ngIf="editingPost" (click)="editPost()"> + <button class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger" *ngIf="editingPost" (click)="editPost()"> Update Post </button> - <section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only"> + <section class="post-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only"> <time class="flex-row flex-center-align-items"> - <img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg"> + <img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg"> <span> {{ timeCreated }} </span> </time> <summary class="flex-row flex-center-align-items"> - <img class="img-height-font-size" src="/assets/icons/tabler-icon-message-2.svg"> + <img class="height-font" src="/assets/icons/tabler-icon-message-2.svg"> <span> {{ post.comments.length }} </span> </summary> </section> - <section class="flex-row justify-children-center flex-center-align-children"> - <button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()"> + <section class="flex-row justify-children-center align-children-center"> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()"> <img src="/assets/icons/tabler-icon-edit.svg"> </button> - <button class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()"> + <button class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="goToPostPage()"> <img src="/assets/icons/tabler-icon-message-2.svg"> Comment </button> - <button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()"> + <button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()"> <img src="/assets/icons/tabler-icon-link.svg"> Share </button> - <button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deletePost()"> + <button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deletePost()"> <img src="/assets/icons/tabler-icon-trash.svg"> </button> </section> </main> <aside class="rating flex-col flex-center-align-items"> - <button #upvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)"> + <button #upvote class="flex-col lighter-hover border-radius-dot2 click-effect" (click)="votePost(true)"> <img src="/assets/icons/tabler-icon-chevron-up.svg"> </button> - <summary class="top-bot-padding-small"> + <summary class="top-bot-padding-dot2"> {{ votesNumber }} </summary> - <button #downvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)"> + <button #downvote class="flex-col lighter-hover border-radius-dot2 click-effect" (click)="votePost(false)"> <img src="/assets/icons/tabler-icon-chevron-down.svg"> </button> </aside> diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index 62513ef..871fd7e 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -3,68 +3,68 @@ <app-loading *ngIf="!dataArrived"></app-loading> <main class="scroll-standalone under-navbar centered-content flex-col"> - <section class="card full-width" *ngIf="this.isAdminUser"> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" (click)="goToAdminPanel()"> + <section class="card width-full" *ngIf="this.isAdminUser"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="goToAdminPanel()"> Go to admin panel </button> </section> - <form class="flex-row card full-width font-size-dot9 margin-top-bot-very-big" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()"> + <form class="flex-row card width-full font-size-dot9 margin-top-bot-very-big" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()"> <img id="profile-picture" class="round-image" [src]="user.profilePictureURL"> - <section class="flexible flex-col flex-center-align-items flex-justify-center side-padding-font"> - <input class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)"> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-top-normal" type="submit" *ngIf="newProfilePicture.size > 0"> + <section class="flexible flex-col flex-center-align-items flex-justify-center padding-side-font"> + <input class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-normal" type="submit" *ngIf="newProfilePicture.size > 0"> Update profile picture </button> </section> </form> - <form class="flex-col card full-width padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()"> + <form class="flex-col card width-full padding-dot6" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()"> <section class="flex-col"> <div class="flex-row"> - <label class="flexible focus-fg-color">First Name</label> + <label class="flexible fg-focus">First Name</label> <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label> <label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="firstName" required> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="firstName" required> </section> <section class="flex-col"> <div class="flex-row"> - <label class="flexible focus-fg-color">Last Name</label> + <label class="flexible fg-focus">Last Name</label> <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label> <label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="lastName" required> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="lastName" required> </section> <section class="flex-col"> <div class="flex-row"> - <label class="flexible focus-fg-color">Username</label> + <label class="flexible fg-focus">Username</label> <label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> <label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="username" required> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="username" required> </section> <section class="flex-col"> <div class="flex-row"> - <label class="flexible focus-fg-color">Email</label> + <label class="flexible fg-focus">Email</label> <label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label> <label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label> </div> - <input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="email" required> + <input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="email" required> </section> <section class="flex-col"> <div class="flex-row"> - <label class="flexible focus-fg-color">Password</label> + <label class="flexible fg-focus">Password</label> <label *ngIf="updateUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> <label *ngIf="updateUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label> <label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label> </div> - <input type="password" class="fancy-input faded-slim-border border-bottom-only" formControlName="password" required> + <input type="password" class="fancy-input border-faded-slim border-bottom-only" formControlName="password" required> </section> - <button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()"> + <button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()"> ▼ Edit Languages ▼ </button> <section *ngIf="showLanguages"> @@ -72,7 +72,7 @@ <label class="error"> Type in your desired languages, separated by a space </label> - <input class="fancy-input full-width faded-slim-border border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required> + <input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required> </div> <div class="none-message" *ngIf="availableLanguages.length === 0"> No languages available! @@ -81,12 +81,12 @@ Available languages: </div> <div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ lang.name }} </div> </div> </section> - <button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()"> + <button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()"> ▼ Edit Technologies ▼ </button> <section *ngIf="showTechnologies"> @@ -94,7 +94,7 @@ <label class="error"> Type in your desired technologies, separated by a space </label> - <input class="fancy-input full-width faded-slim-border border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required> + <input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required> </div> <div class="none-message" *ngIf="availableTechnologies.length === 0"> No technologies available! @@ -103,7 +103,7 @@ Available technologies: </div> <div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ tech.name }} </div> </div> @@ -112,15 +112,15 @@ <app-success-bar></app-success-bar> <app-error-bar></app-error-bar> </section> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit"> Update profile </button> </form> - <section class="card full-width"> - <div class="margin-bot-bigger text-centered error-fg-color" *ngIf="deleteAccountConfirm"> + <section class="card width-full"> + <div class="margin-bot-bigger text-centered fg-error" *ngIf="deleteAccountConfirm"> Are you sure you want to delete your account?<br>This is permanent! </div> - <button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller error-fg-color" (click)="deleteAccount()"> + <button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 fg-error" (click)="deleteAccount()"> Delete account </button> </section> diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index e6abeb9..8963d1b 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,47 +3,47 @@ <app-loading *ngIf="!dataArrived"></app-loading> <main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)"> - <section id="user-info" class="card flex-row full-width flex-justify-center"> + <section id="user-info" class="card flex-row width-full flex-justify-center"> <div> <img id="profile-picture" class="round-image" [src]="user.profilePictureURL"> </div> - <div class="flexible flex-col flex-center-align-items flex-justify-center side-padding-smaller"> + <div class="flexible flex-col flex-center-align-items flex-justify-center side-padding-dot3"> <div class="text-centered"> {{ user.firstName }} {{ user.lastName }} </div> <div> @{{ user.userName }} </div> - <form class="flex-row flexible-children full-width font-size-dot7 margin-top-normal" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn"> - <input class="faded-slim-border border-bottom-only margin-right-small" type="password" formControlName="password" *ngIf="updatingFriendship" placeholder="Type in password to confirm"> - <button id="add-friend" type="submit" class="faded-slim-border padding-tiny lighter-hover click-effect border-radius-smaller full-width"> + <form class="flex-row flexible-children width-full font-size-dot7 margin-top-normal" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn"> + <input class="border-faded-slim border-bottom-only margin-right-small" type="password" formControlName="password" *ngIf="updatingFriendship" placeholder="Type in password to confirm"> + <button id="add-friend" type="submit" class="border-faded-slim padding-dot1 lighter-hover click-effect border-radius-dot3 width-full"> {{ updatingFriendship ? 'Confirm' : (friendOfUser ? 'Unfriend' : 'Add friend') }} </button> </form> </div> </section> - <section class="card sec-info-card flex-col full-width"> - <div class="sec-info-title faded-slim-border border-bottom-only"> + <section class="card sec-info-card flex-col width-full"> + <div class="sec-info-title border-faded-slim border-bottom-only"> Languages </div> <div class="none-message" *ngIf="user.languages.length === 0"> None </div> <div class="flex-row" *ngFor="let lang of user.languages"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ lang.name }} </div> </div> </section> - <section class="card sec-info-card flex-col full-width"> - <div class="sec-info-title faded-slim-border border-bottom-only"> + <section class="card sec-info-card flex-col width-full"> + <div class="sec-info-title border-faded-slim border-bottom-only"> Technologies </div> <div class="none-message" *ngIf="user.technologies.length === 0"> None </div> <div class="flex-row" *ngFor="let tech of user.technologies"> - <div class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-dot5r padding-dot2"> {{ tech.name }} </div> </div> diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 4aae7ed..7d3a0bf 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,44 +1,44 @@ -<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height"> - <summary class="title card full-width no-margin padding-small">Register</summary> +<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full"> + <summary class="title card width-full no-margin padding-dot2">Register</summary> - <app-error-bar class="full-width margin-top-normal"></app-error-bar> + <app-error-bar class="width-full margin-top-normal"></app-error-bar> - <form class="full-width card padding-big" [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()"> - <section class="input-selection full-width"> - <input type="text" placeholder="First Name" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="firstName" required> - <label class="fancy-input-label full-width">First Name</label> + <form class="width-full card padding-dot6" [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()"> + <section class="input-selection width-full"> + <input type="text" placeholder="First Name" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="firstName" required> + <label class="fancy-input-label width-full">First Name</label> <div class="input-errors"> <label *ngIf="registerUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label> <label *ngIf="registerUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input type="text" placeholder="Last Name" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="lastName" required> - <label class="fancy-input-label full-width">Last Name</label> + <input type="text" placeholder="Last Name" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="lastName" required> + <label class="fancy-input-label width-full">Last Name</label> <div class="input-errors"> <label *ngIf="registerUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label> <label *ngIf="registerUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input type="text" placeholder="Username" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="username" required> - <label class="fancy-input-label full-width">Username</label> + <input type="text" placeholder="Username" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="username" required> + <label class="fancy-input-label width-full">Username</label> <div class="input-errors"> <label *ngIf="registerUserFormGroup.get('username')?.errors?.required" class="error">*Required</label> <label *ngIf="registerUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label> </div> </section> <section class="input-selection"> - <input type="text" placeholder="Email" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="email" required> - <label class="fancy-input-label full-width">Email</label> + <input type="text" placeholder="Email" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="email" required> + <label class="fancy-input-label width-full">Email</label> <div class="input-errors"> <label *ngIf="registerUserFormGroup.get('email')?.errors?.required" class="error">*Required</label> <label *ngIf="registerUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label> </div> </section> <section class="input-selection"> - <input type="password" placeholder="Password" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="password" required> - <label class="fancy-input-label full-width">Password</label> + <input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required> + <label class="fancy-input-label width-full">Password</label> <div class="input-errors"> <label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label> <label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label> @@ -47,9 +47,9 @@ </section> - <button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button> + <button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button> </form> - <button class="focus-fg-color faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width margin-top-normal" (click)="onRedirectLogin()"> + <button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectLogin()"> Already have an account? Login here </button> </main> diff --git a/src/styles.css b/src/styles.css index 6c43f1f..373ff93 100644 --- a/src/styles.css +++ b/src/styles.css @@ -179,7 +179,7 @@ input[type=file]::file-selector-button { justify-content: center; } -.flex-center-align-children > * { +.align-children-center > * { display: flex; align-items: center; } @@ -203,10 +203,6 @@ input[type=file]::file-selector-button { font-size: 0.7em; } -.img-height-font-size { - height: 1em; -} - /* General text */ .text-centered { @@ -219,19 +215,19 @@ input[type=file]::file-selector-button { /* General border */ -.faded-slim-border { +.border-faded-slim { border: 1px solid var(--faded-color); } -.border-radius-normal, .card { +.border-radius-dot5r, .card { border-radius: 0.5rem; } -.border-radius-smaller { +.border-radius-dot3 { border-radius: 0.3em; } -.border-radius-small { +.border-radius-dot2 { border-radius: 0.2em; } @@ -243,66 +239,66 @@ input[type=file]::file-selector-button { /* General colors */ -.fg-color-faded { +.fg-faded { color: var(--faded-color); } -.focus-fg-color { +.fg-focus { color: var(--focus-color); border-color: var(--focus-color); } -.error-fg-color { +.fg-error { color: var(--failure); border-color: var(--failure); } /* General padding */ -.padding-big { +.padding-dot6 { padding: 0.6em; } -.padding-bigger { +.padding-dot5 { padding: 0.5em; } -.padding-normal { +.padding-dot4 { padding: 0.4em; } -.padding-smaller { +.padding-dot3 { padding: 0.3em; } -.padding-small { +.padding-dot2 { padding: 0.2em; } -.padding-tiny { +.padding-dot1 { padding: 0.1em; } -.side-padding-font { +.padding-side-font { padding-right: 1em; padding-left: 1em; } -.side-padding-smaller { +.padding-side-dot3 { padding-right: 0.3em; padding-left: 0.3em; } -.bot-padding-bigger { +.padding-bot-dot5 { padding-bottom: 0.5em; } -.top-bot-padding-bigger { +.padding-top-bot-dot5 { padding-top: 0.5em; padding-bottom: 0.5em; } -.top-bot-padding-small { +.padding-top-bot-dot2 { padding-top: 0.2em; padding-bottom: 0.2em; } @@ -370,16 +366,22 @@ input[type=file]::file-selector-button { transform: scale(0.9); } -/* Misc */ +/* Size */ -.full-height { +.height-full { height: 100%; } -.full-width { +.width-full { width: 100%; } +.height-font { + height: 1em; +} + +/* Misc */ + .centered-content { max-width: var(--max-width); margin: 0 auto; |