Initial Commit

blazor/Components/Layout/ContentDividerComponent.razor

@@ -0,0 +1,13 @@
+<div class="divider">
+</div>
+
+<style>
+    .divider {
+        width: 100%;
+        border-bottom: 2px solid black;
+        margin-top: 6px;
+        margin-bottom: 6px;
+        height: 12px;
+        background-color: #545454;
+    }
+</style>

blazor/Components/Layout/LayoutColumnComponent.razor

@@ -0,0 +1,17 @@
+<div class="columnContainer">
+    @ChildContent
+</div>
+
+<style>
+    .columnContainer {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    }
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}

blazor/Components/Layout/LayoutLargeContentComponent.razor

@@ -0,0 +1,38 @@
+<div class="lrg_container">
+    @ChildContent
+</div>
+
+<style>
+    .lrg_container {
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+        width: 75%;
+        min-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: 10px;
+        padding-bottom: 30px;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .lrg_container {
+            width: 100%;
+            min-width: 350px;
+        }
+    }
+
+
+    @@media only screen and (min-width: 1024px) {
+        .lrg_container {
+            margin-top: 50px;
+        }
+    }
+
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}

blazor/Components/Layout/LayoutMediumContentComponent.razor

@@ -0,0 +1,38 @@
+<div class="med_container">
+    @ChildContent
+</div>
+
+
+<style>
+    .med_container {
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+        width: 50%;
+        min-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: 10px;
+        padding-bottom: 30px;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .med_container {
+            width: 99%;
+            min-width: 350px;
+        }
+    }
+
+    @@media only screen and (min-width: 1024px) {
+        .med_container {
+            margin-top: 50px;
+        }
+    }
+</style>
+
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}

blazor/Components/Layout/LayoutNoteContentComponent.razor

@@ -0,0 +1,34 @@
+<div class="med_container">
+
+    @ChildContent
+</div>
+
+
+<style>
+    .med_container {
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: 10px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 30px;
+        border: 2px solid black;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .med_container {
+            width: 85%;
+        }
+    }
+</style>
+
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}

blazor/Components/Layout/LayoutRowComponent.razor

@@ -0,0 +1,26 @@
+<div class="rowContainer">
+    @ChildContent
+</div>
+
+<style>
+    .rowContainer {
+        display: flex;
+        flex-direction: row;
+        gap: 30px;
+        width: 100%;
+        flex-wrap: wrap;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .rowContainer {
+            gap: 3px;
+            flex-direction: column;
+        }
+    }
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}

blazor/Components/Layout/LayoutWithSidebarComponent.razor

@@ -0,0 +1,56 @@
+<div class="layoutWithSidebar">
+    <div class="layoutSidebar">
+        @Sidebar
+    </div>
+    <div class="layoutContent">
+        @Content
+    </div>
+</div>
+
+<style scoped>
+    .layoutWithSidebar {
+        display: grid;
+
+        gap: 16px;
+        width: 65%;
+        min-width: 1000px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-top: 10px;
+        padding-bottom: 30px;
+
+        grid-template-columns: 412px 1fr;
+    }
+
+    .layoutSidebar {
+        background: var(--paper);
+        padding: 16px;
+    }
+
+    .layoutContent {
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .layoutWithSidebar {
+            flex-direction: column-reverse;
+            width: 100%;
+            min-width: 350px;
+        }
+    }
+
+
+    @@media only screen and (min-width: 1024px) {
+        .layoutWithSidebar {
+            margin-top: 50px;
+        }
+    }
+
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment Sidebar { get; set; } = default!;
+
+    [Parameter] public RenderFragment Content { get; set; } = default!;
+
+}

blazor/Components/Layout/PageContainerComponent.razor

@@ -0,0 +1,29 @@
+<div class="content">
+    @ChildContent
+</div>
+
+<style>
+    .content {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 20px;
+        padding: 20px;
+        border: 2px solid black;
+        min-height: 50vh;
+        padding-bottom: 124px
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .content {
+            padding: 10px;
+            border: 0px solid black;
+        }
+    }
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment ChildContent { get; set; } = default!;
+
+}

blazor/Components/Layout/WebsiteTitleComponent.razor

@@ -0,0 +1,26 @@
+<h1 class="title">
+    @ChildContent
+</h1>
+
+
+<style>
+    .title {
+        padding-top: 35px;
+        padding-bottom: 5px;
+        font-size: 1.5rem;
+        font-weight: bolder;
+    }
+
+    @@media only screen and (max-width: 1025px) {
+        .title {
+            padding: 10px;
+            border: 0px solid black;
+        }
+    }
+</style>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+}