Split main.css into multiple files

src/_includes/hero.liquid

@@ -6,3 +6,7 @@
     {% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: true %}
   </div>
 </section>
+
+{% css %}
+  {% include "css/components/hero.css" %}
+{% endcss %}

src/_includes/layouts/base.html

@@ -7,8 +7,14 @@
       {% include "css/reset.css" %}
       {% include "css/variables.css" %}
       {% include "css/main.css" %}
-      {% include "css/header.css" %}
+
-      {% include "css/footer.css" %}
+      {% include "css/components/button.css" %}
+      {% include "css/components/skip-link.css" %}
+      {% include "css/components/socials-list.css" %}
+      {% include "css/components/projects.css" %}
+      {% include "css/components/timeline.css" %}
+      {% include "css/components/competences.css" %}
+      {% include "css/components/download.css" %}
     {% endcss %}
     <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
   </head>

src/_includes/partials/footer.liquid

@@ -12,3 +12,7 @@
         {% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
     </div>
 </footer>
+
+{% css %}
+  {% include "css/footer.css" %}
+{% endcss %}

src/_includes/partials/header.liquid

@@ -5,3 +5,7 @@
     {% include "partials/navigation" %}
   </div>
 </header>
+
+{% css %}
+  {% include "css/header.css" %}
+{% endcss %}

src/css/components/button.css

@@ -0,0 +1,40 @@
+button,
+.btn {
+  --hover: rgba(var(--neutral-highest), 0.8);
+  --active: rgba(var(--neutral-highest), 0.8);
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  width: fit-content;
+  max-width: 100%;
+  min-height: 2.5rem;
+  max-height: none;
+  color: rgb(var(--neutral-lower));
+  background-color: var(--text);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: var(--font-weight-semibold);
+  font-stretch: var(--font-stretch, condensed);
+  border: none;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  transition: background-color 0.1s ease-in-out;
+  display: inline-flex;
+}
+button:disabled,
+.btn:disabled {
+  --hover: inherit;
+  --active: inherit;
+  color: #929292;
+  cursor: not-allowed;
+  background-color: #e5e5e5;
+}
+button:not(:disabled):hover,
+.btn:not(:disabled):hover {
+  background-color: var(--hover);
+}
+button:not(:disabled):active,
+.btn:not(:disabled):active {
+  background-color: var(--active);
+}

src/css/components/competences.css

@@ -0,0 +1,12 @@
+.competences-section .col {
+  width: 100%;
+  margin-bottom: 2rem;
+}
+@media screen and (min-width: 991px) {
+  .competences-section > div {
+    flex-direction: row;
+  }
+  .competences-section .col {
+    width: 40%;
+  }
+}

src/css/components/download.css

@@ -0,0 +1,9 @@
+.download {
+  gap: 0.8rem;
+}
+.download p {
+  font-size: 1.4rem;
+}
+.btn-download {
+  color: rgb(var(--brand-secondary-lower));
+}

src/css/components/hero.css

@@ -0,0 +1,27 @@
+.hero {
+  height: 90svh;
+}
+.hero div {
+  text-align: center;
+  flex-direction: column;
+  justify-content: end;
+  align-items: center;
+  display: flex;
+}
+.hero p {
+  max-width: 48ch;
+}
+@media screen and (min-width: 768px) {
+  .hero div {
+    text-align: start;
+    align-items: start;
+  }
+}
+.hero-title {
+  font-size: 1.8rem;
+}
+@media screen and (min-width: 768px) {
+  .hero-title {
+    font-size: 4rem;
+  }
+}

src/css/components/projects.css

@@ -0,0 +1,44 @@
+.project-grid {
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 1rem;
+  display: grid;
+}
+.project-grid li {
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+.card {
+  --background: url(https://placehold.co/200x150);
+  z-index: 1;
+  background: var(--background);
+  background-repeat: no-repeat;
+  background-size: cover;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2.5rem;
+  height: 100%;
+  padding: 0.4rem;
+  display: flex;
+  position: relative;
+}
+.card a:hover {
+  color: #3a3a3a;
+  transition: color 0.2s ease-in-out;
+}
+.card a:before,
+.card a:after {
+  --icon-size: 1.2rem;
+}
+.card .top {
+  justify-content: space-between;
+  width: 100%;
+  display: flex;
+}
+.card .links {
+  align-self: flex-end;
+  gap: 0.35rem;
+  display: flex;
+}
+.card .content {
+  padding: 1rem 0.4rem 0;
+}

src/css/components/skip-link.css

@@ -0,0 +1,17 @@
+body > a {
+  z-index: 99999;
+  padding: 0.4rem 1rem;
+  position: absolute;
+  inset-block-start: 0.3rem;
+  inset-inline-start: 0.3rem;
+}
+body > a:not(:focus) {
+  size: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  border: 0;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+}

src/css/components/socials-list.css

@@ -0,0 +1,19 @@
+.socials-list {
+  gap: 0.2rem;
+  margin-block-start: 1rem;
+}
+.socials-list--label {
+  gap: 2rem;
+}
+.socials-list--label a {
+  --item-color: black;
+  --icon-color: #262626;
+  text-underline-offset: 0.25rem;
+  font-weight: 500;
+  -webkit-text-decoration: underline #262626;
+  text-decoration: underline #262626;
+}
+.socials-list--label a:hover {
+  --item-color: var(--text-2);
+  --icon-color: var(--text-2);
+}

src/css/components/timeline.css

@@ -0,0 +1,45 @@
+.timeline {
+  flex-direction: column;
+  margin-top: 1.4rem;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+.timeline:before {
+  content: "";
+  background-color: rgb(var(--neutral-lower));
+  inline-size: 6px;
+  margin-inline-start: -3px;
+  position: absolute;
+  inset: 1.5rem 0 0 1.5rem;
+}
+.timeline li {
+  --size: 3rem;
+  padding: 0 0 0 calc(var(--size) + 0.8rem);
+  margin: 1.4rem 0;
+  position: relative;
+  list-style: none;
+}
+.timeline li:last-child {
+  margin-bottom: 3rem;
+}
+.timeline li:first-child {
+  margin-top: -20px;
+}
+.timeline li:before {
+  content: "";
+  aspect-ratio: 1;
+  inline-size: var(--size);
+  background-color: rgb(var(--neutral-lower));
+  border: 6px solid rgb(var(--brand-secondary-medium));
+  z-index: 1;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+  inset-block-end: 50%;
+  inset-inline-start: 0;
+  transform: translateY(50%);
+}
+.timeline li:hover:before {
+  border-color: rgb(var(--brand-secondary-high));
+}

src/css/main.css

@@ -4,6 +4,9 @@
 :where(h1, h2, h3, h4, h5, h6, p) {
   margin: 0;
 }
+:where(html:focus-within) {
+  scroll-behavior: smooth;
+}
 
 /* Utilities */
 .wrapper,
@@ -99,67 +102,6 @@
   outline-style: solid;
 }
 
-/* Button */
-button,
-.btn {
-  --hover: rgba(var(--neutral-highest), 0.8);
-  --active: rgba(var(--neutral-highest), 0.8);
-  cursor: pointer;
-  border-radius: var(--border-radius);
-  width: fit-content;
-  max-width: 100%;
-  min-height: 2.5rem;
-  max-height: none;
-  color: rgb(var(--neutral-lower));
-  background-color: var(--text);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: var(--font-weight-semibold);
-  font-stretch: var(--font-stretch, condensed);
-  border: none;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  text-decoration: none;
-  transition: background-color 0.1s ease-in-out;
-  display: inline-flex;
-}
-button:disabled,
-.btn:disabled {
-  --hover: inherit;
-  --active: inherit;
-  color: #929292;
-  cursor: not-allowed;
-  background-color: #e5e5e5;
-}
-button:not(:disabled):hover,
-.btn:not(:disabled):hover {
-  background-color: var(--hover);
-}
-button:not(:disabled):active,
-.btn:not(:disabled):active {
-  background-color: var(--active);
-}
-
-/* Skip link */
-body > a {
-  z-index: 99999;
-  padding: 0.4rem 1rem;
-  position: absolute;
-  inset-block-start: 0.3rem;
-  inset-inline-start: 0.3rem;
-}
-body > a:not(:focus) {
-  size: 1px;
-  white-space: nowrap;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  border: 0;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-}
-
 /* Icons */
 .icon-download:before,
 .icon-download:after {
@@ -301,164 +243,7 @@ main li {
   margin: 0;
   padding: 0;
 }
-.hero {
-  height: 90svh;
-}
-.hero div {
-  text-align: center;
-  flex-direction: column;
-  justify-content: end;
-  align-items: center;
-  display: flex;
-}
-.hero p {
-  max-width: 48ch;
-}
-@media screen and (min-width: 768px) {
-  .hero div {
-    text-align: start;
-    align-items: start;
-  }
-}
-.hero-title {
-  font-size: 1.8rem;
-}
-@media screen and (min-width: 768px) {
-  .hero-title {
-    font-size: 4rem;
-  }
-}
-.project-grid {
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-  gap: 1rem;
-  display: grid;
-}
-.project-grid li {
-  border-radius: var(--border-radius);
-  overflow: hidden;
-}
-.card {
-  --background: url(https://placehold.co/200x150);
-  z-index: 1;
-  background: var(--background);
-  background-repeat: no-repeat;
-  background-size: cover;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 2.5rem;
-  height: 100%;
-  padding: 0.4rem;
-  display: flex;
-  position: relative;
-}
-.card a:hover {
-  color: #3a3a3a;
-  transition: color 0.2s ease-in-out;
-}
-.card a:before,
-.card a:after {
-  --icon-size: 1.2rem;
-}
-.card .top {
-  justify-content: space-between;
-  width: 100%;
-  display: flex;
-}
-.card .links {
-  align-self: flex-end;
-  gap: 0.35rem;
-  display: flex;
-}
-.card .content {
-  padding: 1rem 0.4rem 0;
-}
 section {
   margin-block: 3.5rem;
   padding-block: 2rem;
 }
-.socials-list {
-  gap: 0.2rem;
-  margin-block-start: 1rem;
-}
-.socials-list--label {
-  gap: 2rem;
-}
-.socials-list--label a {
-  --item-color: black;
-  --icon-color: #262626;
-  text-underline-offset: 0.25rem;
-  font-weight: 500;
-  -webkit-text-decoration: underline #262626;
-  text-decoration: underline #262626;
-}
-.socials-list--label a:hover {
-  --item-color: var(--text-2);
-  --icon-color: var(--text-2);
-}
-.timeline {
-  flex-direction: column;
-  margin-top: 1.4rem;
-  padding: 0;
-  display: flex;
-  position: relative;
-}
-.timeline:before {
-  content: "";
-  background-color: rgb(var(--neutral-lower));
-  inline-size: 6px;
-  margin-inline-start: -3px;
-  position: absolute;
-  inset: 1.5rem 0 0 1.5rem;
-}
-.timeline li {
-  --size: 3rem;
-  padding: 0 0 0 calc(var(--size) + 0.8rem);
-  margin: 1.4rem 0;
-  position: relative;
-  list-style: none;
-}
-.timeline li:last-child {
-  margin-bottom: 3rem;
-}
-.timeline li:first-child {
-  margin-top: -20px;
-}
-.timeline li:before {
-  content: "";
-  aspect-ratio: 1;
-  inline-size: var(--size);
-  background-color: rgb(var(--neutral-lower));
-  border: 6px solid rgb(var(--brand-secondary-medium));
-  z-index: 1;
-  border-radius: 50%;
-  transition: all 0.2s ease-in-out;
-  position: absolute;
-  inset-block-end: 50%;
-  inset-inline-start: 0;
-  transform: translateY(50%);
-}
-.timeline li:hover:before {
-  border-color: rgb(var(--brand-secondary-high));
-}
-.download {
-  gap: 0.8rem;
-}
-.download p {
-  font-size: 1.4rem;
-}
-.btn-download {
-  color: rgb(var(--brand-secondary-lower));
-}
-.competences-section .col {
-  width: 100%;
-  margin-bottom: 2rem;
-}
-@media screen and (min-width: 991px) {
-  .competences-section > div {
-    flex-direction: row;
-  }
-  .competences-section .col {
-    width: 40%;
-  }
-}
-

src/css/reset.css

@@ -225,6 +225,7 @@
   */
  :where([type="search"]) {
    -webkit-appearance: textfield;
+   appearance: textfield;
  }
  
  /* iOS only */