feat: v1.0

Author: IronBeagle404

assets/static/artist.css

@@ -1,71 +1,89 @@
-
+/* --- Fonts --- */
 @font-face {
     font-family: 'Agrandir';
     src: url('/assets/static/fonts/PPAgrandir-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
 }
-
 @font-face {
     font-family: 'Agrandir';
     src: url('/assets/static/fonts/PPAgrandir-GrandHeavy.otf') format('opentype');
     font-weight: 900;
     font-style: normal;
 }
-
 @font-face {
     font-family: 'Agrandir';
     src: url('/assets/static/fonts/PPAgrandir-GrandLight.otf') format('opentype');
     font-weight: 300;
     font-style: normal;
 }
 
-body {
-    font-family: 'Agrandir', Arial, sans-serif;
+/* --- Background & reset --- */
+html, body {
     margin: 0;
     padding: 0;
-    min-height: 100vh;
-    background-image: url('/assets/static/image/background.png');
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden; 
+}
+
+body {
+    font-family: 'Agrandir', Arial, sans-serif;
+    background: url('/assets/static/image/background.png') no-repeat center top;
     background-size: cover;
     background-position: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    box-sizing: border-box;
 }
 
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 50px 20px;
+/* --- Title --- */
+.page-header {
+    width: 100%;
     text-align: center;
+    margin-top: 20px;
 }
 
 h1 {
-    font-family: 'Agrandir', Arial, sans-serif;
     font-weight: 900;
     color: white;
     font-size: 4.5em;
-    margin: 0;
-    margin-bottom: 10px;
+    margin: 20px 0 0;
+    display: inline-block;
+    position: relative;
     text-transform: uppercase;
     letter-spacing: 2px;
-    position: absolute;
-    top: 60px;
-    left: 90px;
 }
 
 h1::after {
-    content: '';
     position: absolute;
-    bottom: -10px;
+    content: '';
     left: 0;
-    width: 100%;
     height: 2px;
+    bottom: -10px;
     background-color: #FF6600;
+    width: 100%;
 }
 
+/* --- Main Layout --- */
+.main-layout {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    max-width: 1200px;
+    gap: 40px;
+    margin: 70px auto;
+    padding: 0;
+    flex-wrap: nowrap;
+}
+
+/* --- Image Side --- */
 .artist-image {
-    position: absolute;
-    top: 60px;
-    right: 120px;
+    flex: 0 0 400px;
     width: 400px;
+    max-width: 100%px;
+    aspect-ratio: 1 / 1;
     height: 400px;
     border: 2px solid #FF6600;
     border-radius: 10px;
@@ -78,25 +96,40 @@ h1::after {
     object-fit: cover;
 }
 
-.info-card {
-    position: absolute;
-    top: 270px;
-    left: 85px;
-    width: 600px;
+/* --- Middle Side (History/Members) --- */
+.middle-side {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    flex: 0 1 400px;
+    max-width: 600px;
+}
+
+/* --- Right Side (Concert Dates) --- */
+.concert-side {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    flex: 0 1 400px;
+    max-width: 600px;
+}
+
+/* --- Cards --- */
+.info-card,
+.member-card,
+.concert-card {
     background-color: transparent;
     border: 2px solid #FF6600;
     border-radius: 15px;
     color: white;
-    padding-top: 30px;
+    max-width: 100%;
 }
 
-.info-card .card-header {
-    position: absolute;
-    top: -22px;
-    left: 50%;
-    transform: translateX(-50%);
+/* --- Card Header --- */
+.card-header,
+.member-card-header,
+.concert-card-header {
     background-color: #FF6600;
-    font-family: 'Agrandir', Arial, sans-serif;
     font-weight: 900;
     font-size: 1.2em;
     padding: 8px 30px;
@@ -105,119 +138,125 @@ h1::after {
     color: white;
     text-transform: uppercase;
     letter-spacing: 1px;
-    border-radius: 8px;
-    z-index: 10;
+    border-radius: 8px 8px 0 0;
 }
 
+/* --- Content History --- */
 .info-card .card-content {
-    padding: 20px;
+    padding: 10px 20px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    margin-top: 10px;
 }
 
 .info-card .info-field {
-    margin: 8px 0;
-    font-family: 'Agrandir', Arial, sans-serif;
+    margin: 15px 0;
     font-weight: 400;
     font-size: 1em;
-    color: white;
     text-align: left;
 }
 
-.member-card {
-    position: absolute;
-    top: 570px;
-    left: 85px;
-    width: 600px;
-    background-color: transparent;
-    border: 2px solid #FF6600;
-    border-radius: 15px;
-    color: white;
-    padding-top: 30px;
+/* --- Content Members --- */
+.member-card .member-card-content {
+    padding: 10px 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px 10px;
 }
 
-.member-card .member-card-header {
-    position: absolute;
-    top: -22px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #FF6600;
-    font-family: 'Agrandir', Arial, sans-serif;
-    font-weight: 900;
-    font-size: 1.2em;
-    padding: 8px 30px;
-    text-align: center;
-    margin: 0;
-    color: white;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border-radius: 8px;
-    z-index: 10;
+.member-card .member-field {
+    margin: 8px 0;
+    font-weight: 400;
+    font-size: 1em;
+    text-align: left;
 }
 
-.member-card .member-card-content {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 10px;
+/* --- Content Concert Dates --- */
+.concert-card .concert-card-content {
+    padding: 10px 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px 60px;
 }
 
-.member-card .member-field {
+.concert-card .concert-field {
     margin: 8px 0;
-    font-family: 'Agrandir', Arial, sans-serif;
     font-weight: 400;
     font-size: 1em;
-    color: white;
     text-align: left;
 }
 
-.concert-card {
-    position: absolute;
-    top: 570px;
-    right: 85px;
-    width: 600px;
-    background-color: transparent;
+/* --- Return Button --- */
+.return {
+    display: block;
+    margin: 0 auto 0 auto;
+    background: rgba(255, 102, 0, 0.6);
     border: 2px solid #FF6600;
     border-radius: 15px;
     color: white;
-    padding-top: 30px;
-}
-
-.concert-card .concert-card-header {
-    position: absolute;
-    top: -22px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #FF6600;
+    padding: 10px 30px;
     font-family: 'Agrandir', Arial, sans-serif;
-    font-weight: 900;
-    font-size: 1.2em;
-    padding: 8px 30px;
-    text-align: center;
-    margin: 0;
-    color: white;
+    font-weight: 600;
+    font-size: 1em;
     text-transform: uppercase;
     letter-spacing: 1px;
-    border-radius: 8px;
-    z-index: 10;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: center;
 }
 
-.concert-card .concert-card-content {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-top: 10px;
+.return:hover {
+    transform: scale(1.05);
+    background: rgba(138, 43, 226, 0.6);
+    border: 2px solid #8A2BE2;
+    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.4);
 }
 
-.concert-card .concert-field {
-    margin: 8px 0;
-    font-family: 'Agrandir', Arial, sans-serif;
-    font-weight: 400;
-    font-size: 1em;
-    color: white;
-    text-align: left;
+/* --- Responsive --- */
+@media (max-width: 1500px) {
+    .main-layout {
+        flex-direction: column;
+        align-items: center;
+        gap: 40px;
+        margin: 70px 10%;
+    }
+
+    .artist-image,
+    .middle-side,
+    .concert-side {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+
+    .member-card .member-card-content,
+    .concert-card .concert-card-content {
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+    }
+}
+
+@media (min-width: 425px) {
+    .main-layout {
+        gap: 60px;
+    }
+
+    .middle-side,
+    .concert-side {
+        min-width: 510px;
+        gap: 50px;
+    }
+
+    .concert-card {
+        min-width: 510px;
+    }
+
+    .artist-image {
+        width: 500px;
+        height: 500px;
+        flex: 0 0 500px;
+    }
+
+    h1 {
+        font-size: 5em;
+    }
 }