Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Changed layout, taht everything is max 1200px width and centered

Browse Source
This commit is contained in:
Lobo
2026-02-23 08:41:49 +01:00
parent 6330d45b4e
commit 30965afcbd
10 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout/app/app.component.html
View File

@@ -1,6 +1,6 @@
<app-topbar />
<main class="container app-surface">
<main class="algo-container app-surface">
<router-outlet />
</main>

2
src/app/pages/algorithms/algorithms.component.html
View File

@@ -1,4 +1,4 @@
<div class="container">
<div class="algo-container">
<h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
<div class="category-cards">
@for (category of categories$ | async; track category.id) {

2
src/app/pages/algorithms/conway-gol/conway-gol.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'GOL.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/fractal/fractal.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'FRACTAL.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/fractal3d/fractal3d.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'FRACTAL3D.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'LABYRINTH.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/pathfinding/pathfinding.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/pendulum/pendulum.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container">
<mat-card class="algo-container">
<mat-card-header>
<mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
</mat-card-header>

2
src/app/pages/algorithms/sorting/sorting.component.html
View File

@@ -1,4 +1,4 @@
<mat-card class="container sorting-card">
<mat-card class="algo-container sorting-card">
<mat-card-header>
<mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
</mat-card-header>

54
src/styles.scss
View File

@@ -21,6 +21,7 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
/* ---- Custom variables ---- */
:root {
--app-maxWidth: 1200px;
--app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
--app-fg: #{mat.get-theme-color($light-theme, on-surface)};
--app-logo-bg: #313131;
@@ -118,7 +119,7 @@ a {
box-shadow 200ms ease,
transform 200ms ease;
&.container {
&.algo-container {
width: 100%;
max-width: 1920px;
padding: 20px;
@@ -228,8 +229,11 @@ a {
// algos
.container {
padding: 2rem;
.algo-container {
width: 100%;
max-width: var(--app-maxWidth);
margin: 0 auto;
padding: clamp(1rem, 4vw, 2rem);
}
.algo-info {
@@ -398,7 +402,7 @@ canvas {
.layout-container {
width: 100%;
max-width: 1920px;
max-width: var(--app-maxWidth);
margin: 0 auto;
padding: clamp(1rem, 4vw, 2rem);
}
@@ -468,27 +472,35 @@ app-root {
.imprint {
display: grid;
gap: clamp(1rem, 3vw, 1.5rem);
max-width: 1200px;
max-width: var(--app-maxWidth);
margin: 0 auto;
}
.hero {
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 4vw, 1.5rem);
display: block;
border-radius: var(--card-radius);
background: var(--card-bg);
padding: clamp(1rem, 3vw, 1.5rem);
overflow: hidden;
}
.hero .photo {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex: 0 1 425px;
float: left;
margin-right: clamp(1rem, 4vw, 1.5rem);
margin-bottom: 0.5rem;
max-width: 100%;
}
@media (max-width: 720px) {
.hero .photo {
float: none;
margin-right: 0;
margin-bottom: 1rem;
display: flex;
justify-content: center;
}
}
.hero .photo img {
display: block;
width: 100%;
@@ -500,20 +512,18 @@ app-root {
}
.hero .intro {
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 2vw, 1rem);
flex: 1 1 300px;
display: block;
}
.hero .intro h1 {
margin-top: .25rem;
margin-top: 0;
margin-bottom: 0.5rem;
font-size: clamp(1.5rem, 5vw, 2.5rem);
}
.hero .intro .lead {
opacity: .9;
margin: .25rem 0 0.5rem;
margin: 0.5rem 0 1rem;
font-size: clamp(1rem, 2.5vw, 1.15rem);
}
@@ -686,7 +696,7 @@ app-root {
display: grid;
gap: clamp(1rem, 3vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
max-width: 1200px;
max-width: var(--app-maxWidth);
margin: 0 auto;
}
@@ -702,7 +712,9 @@ app-root {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.project-card.featured {
grid-column: 1 / -1;
}
.project-card mat-card-header {
padding-bottom: 1rem;
@@ -865,4 +877,4 @@ swiper-slide {
.sorting-card .info-panel {
margin-top: 10px;
font-size: 0.9em;
}
}