+
{{ 'ALGORITHM.TITLE' |translate }}
@for (category of categories$ | async; track category.id) {
diff --git a/src/app/pages/algorithms/conway-gol/conway-gol.component.html b/src/app/pages/algorithms/conway-gol/conway-gol.component.html
index d0cfcc0..568001c 100644
--- a/src/app/pages/algorithms/conway-gol/conway-gol.component.html
+++ b/src/app/pages/algorithms/conway-gol/conway-gol.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'GOL.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/fractal/fractal.component.html b/src/app/pages/algorithms/fractal/fractal.component.html
index a1f96a1..b8c7b8f 100644
--- a/src/app/pages/algorithms/fractal/fractal.component.html
+++ b/src/app/pages/algorithms/fractal/fractal.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'FRACTAL.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/fractal3d/fractal3d.component.html b/src/app/pages/algorithms/fractal3d/fractal3d.component.html
index 9663325..b7ed0da 100644
--- a/src/app/pages/algorithms/fractal3d/fractal3d.component.html
+++ b/src/app/pages/algorithms/fractal3d/fractal3d.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'FRACTAL3D.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html b/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
index fecb592..88aa734 100644
--- a/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
+++ b/src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'LABYRINTH.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.html b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
index bfc4f13..3cb31a5 100644
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.html
+++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'PATHFINDING.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/pendulum/pendulum.component.html b/src/app/pages/algorithms/pendulum/pendulum.component.html
index 2c853d3..1775f09 100644
--- a/src/app/pages/algorithms/pendulum/pendulum.component.html
+++ b/src/app/pages/algorithms/pendulum/pendulum.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'PENDULUM.TITLE' | translate }}
diff --git a/src/app/pages/algorithms/sorting/sorting.component.html b/src/app/pages/algorithms/sorting/sorting.component.html
index 504df1d..7f97529 100644
--- a/src/app/pages/algorithms/sorting/sorting.component.html
+++ b/src/app/pages/algorithms/sorting/sorting.component.html
@@ -1,4 +1,4 @@
-
+
{{ 'SORTING.TITLE' | translate }}
diff --git a/src/styles.scss b/src/styles.scss
index cec365c..2871d39 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -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;
-}
\ No newline at end of file
+}