first mobile draft

assets/css/main.css

@@ -0,0 +1,297 @@
+body {
+    color: #6c6c6c;
+    font-family: sans-serif;
+    line-height: 1.5;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+
+/* Header */
+header {
+    background-size: cover;
+    height: 520px;
+    background-image: url(/chapelle.png);
+    background-position: center;
+}
+
+header > div {
+    padding-left: 60px;
+    color: #fff;
+    font-family: lexend, sans-serif;
+    font-weight: 700;
+    font-size: 40px;
+}
+
+#header-title {
+    margin: 45px 0;
+    max-width: 760px;
+}
+
+.menu ul {
+    list-style-type: none;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 1em 0;
+}
+
+.menu a {
+    margin: 0.6em;
+    padding: 0 1.5em;
+    min-width: 220px;
+    text-align: center;
+    color: #fff;
+    color: #fff;
+    font-family: lexend, sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 24px;
+    text-decoration: none;
+}
+
+.menu a:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 1240px) {
+    header > div {
+        padding: 0;
+        display: flex;
+        justify-content: center;
+    }
+
+    #header-title {
+        width: 100%;
+        text-align: center;
+    }
+
+    #header-subtitle {
+        display: none;
+    }
+}
+
+@media (max-width: 750px) {
+    header {
+        height: 200px;
+    }
+    .menu {
+        display: none;
+    }
+
+    #header-title {
+        font-size: 0.9em;
+        max-width: 310px;
+        margin-top: 0.7em;
+    }
+}
+
+/* Main */
+main {
+    margin: 3.8em auto;
+    max-width: 1000px;
+    padding: 0 4em;
+}
+
+.concerts {
+    display: grid;
+    /*overflow: hidden;*/
+}
+
+.concert-entry-small {
+    display: none;
+}
+
+.concert-entry {
+    margin: 0.8em 0;
+    padding: 20px;
+
+    display: grid;
+    grid-template-columns: 2fr 3fr 7fr 1fr;
+
+    gap: 1em;
+    border: 2px #000 solid;
+    border-radius: 20px;
+    align-items: center;
+    background-color: #fff;
+    height: 200px;
+    overflow: hidden;
+}
+
+.concert-date {
+    padding: 0 0.5em;
+    font-weight: bold;
+    font-size: 1.2em;
+    color: #600303;
+}
+
+.concert-date h4 {
+    margin: 0;
+    padding: 0.2em;
+}
+
+.concert-cover {
+    flex-grow: 1;
+    /*height: 100%;*/
+}
+
+.concert-cover > img {
+    width: 100%;
+}
+
+.concert-overview {
+    flex-grow: 8;
+}
+
+.concert-overview > h2,
+.concert-overview > h4 {
+    margin: 0;
+}
+
+.concert-overview > h3 {
+    min-height: 5.5em;
+}
+
+.concert-buttons {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1em;
+    flex-grow: 1;
+}
+
+.concert-button {
+    padding: 10px;
+    border: 1px #000 solid;
+    border-radius: 5px;
+    background-color: #f3e2c8;
+    text-align: center;
+    text-decoration: none;
+    font-family: lexend, sans-serif;
+    font-weight: 350;
+    font-size: 18px;
+    color: #000;
+}
+
+@media (max-width: 750px) {
+    main {
+        max-width: 90%;
+        padding: 0;
+    }
+
+    .concert-entry {
+        display: none;
+    }
+
+    .concerts {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .concert-entry-small {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        align-items: center;
+        background-color: #fff;
+        padding-bottom: 15px;
+        margin-bottom: 10px;
+    }
+
+    .concert-entry-container {
+        display: grid;
+        grid-template-columns: 3fr 8fr;
+    }
+
+    .concert-date {
+        color: #777;
+        font-size: 1.1em;
+        margin: 15px 0 15px 0;
+    }
+
+    .separator {
+        overflow: hidden;
+        width: 90%;
+        height: 1px;
+    }
+
+    .concert-cover {
+        margin-top: 25px;
+        margin-left: 5px;
+    }
+
+    .concert-overview {
+        padding-left: 10px;
+    }
+
+    .concert-overview > a {
+        color: #da1e2c;
+        text-decoration: none;
+        font-size: 1em;
+    }
+
+    .concert-buttons {
+        width: 100%;
+        margin-top: 10px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+
+    .concert-button {
+        background-color: transparent;
+        border: none;
+        color: #777;
+        margin: 0 5px 0 5px;
+    }
+
+    .concert-button > span {
+        text-decoration: underline;
+        font-weight: bold;
+    }
+}
+
+footer {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.subtitle-overview {
+    color: #4e4e4e;
+    margin: 0.4em 0;
+}
+
+.cover {
+    padding: 20px;
+}
+
+.single-summary,
+.single-artist {
+    margin-bottom: 5em;
+}
+
+.single-cover {
+    width: 250px;
+    float: right;
+    margin: 0 0 2em 2em;
+}
+
+.single-artist-photo {
+    display: flex;
+    flex-direction: column;
+    float: right;
+    padding-top: 3em;
+    align-items: flex-start;
+}
+
+.single-artist-photo p {
+    text-align: center;
+    margin: 0;
+}
+
+.overview h2 {
+    color: #600303;
+}