Add contacts section

Also enables responsive image optimization

1 files changed, 175 insertions, 0 deletions

diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css
new file mode 100644
index 0000000..15ed2a6
--- /dev/null
+++ b/src/components/landing/sections/Contact.module.css
@@ -0,0 +1,175 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.contacts {
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.col {
+  margin-bottom: 1.5rem;
+}
+
+.contact {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  --marussy-contact-color: var(--ifm-font-color-base);
+  --marussy-contact-icon-color: var(--marussy-contact-color);
+  --marussy-contact-icon-hover-color: var(--ifm-link-hover-color);
+  --marussy-contact-muted-color: var(--ifm-color-secondary-contrast-foreground);
+  --marussy-contact-muted-color-or-hover: var(--marussy-contact-muted-color);
+  --marussy-alternate-icon: 0;
+  color: var(--marussy-contact-color);
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .contact {
+  --marussy-contact-muted-color: var(--ifm-color-emphasis-500);
+  --marussy-contact-icon-hover-color: var(--ifm-color-primary-light);
+}
+
+.contact:not(:has(.contact__action:hover)):hover,
+.contact:focus-within:not(:has(.contact__action:focus)) {
+  --marussy-contact-color: var(--ifm-link-hover-color);
+  --marussy-contact-icon-color: var(--marussy-contact-icon-hover-color);
+  --marussy-contact-muted-color-or-hover: var(--ifm-link-hover-color);
+}
+
+.contact:has(.contact__action--alternate:hover),
+.contact:has(.contact__action--alternate:focus) {
+  --marussy-alternate-icon: 1;
+}
+
+.contact__icon-holder {
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  margin-right: 1rem;
+  background: var(--ifm-color-emphasis-200);
+  border-radius: 50em;
+  align-items: center;
+  justify-content: center;
+  color: var(--marussy-contact-icon-color);
+}
+
+.contact__icon-holder--fediverse {
+  padding: 0.75rem;
+}
+
+.contact__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  opacity: calc(1 - var(--marussy-alternate-icon));
+  transition:
+    color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
+    opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.contact__icon--fediverse {
+  width: 3rem;
+  height: 3rem;
+  margin: -0.0625rem -0.0625rem 0.0625rem 0.0625rem;
+}
+
+.contact__icon--alternate {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  color: var(--marussy-contact-icon-hover-color);
+  opacity: var(--marussy-alternate-icon);
+}
+
+.contact__content {
+  dispaly: flex;
+  flex-direction: row;
+}
+
+.contact__title {
+  margin: 0;
+  --casl: 0;
+}
+
+.contact__value {
+  margin: 0;
+}
+
+.contact__description {
+  margin: 0;
+  --slnt: -15;
+  --crsv: 1;
+  font-size: 0.875rem;
+  --marussy-contact-color: var(--marussy-contact-muted-color-or-hover);
+  color: var(--marussy-contact-muted-color-or-hover);
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.contact__link {
+  --ifm-link-color: var(--marussy-contact-color);
+}
+
+.contact__link::after {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.contact__action {
+  position: relative;
+  --ifm-link-color: var(--marussy-contact-muted-color);
+}
+
+.contact__action:focus {
+  --ifm-link-color: var(--ifm-link-hover-color);
+}
+
+.small {
+  display: inline-block;
+  position: relative;
+  max-height: 0;
+  width: 1.5rem;
+  overflow: visible;
+  vertical-align: text-bottom;
+}
+
+.small__link {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+}
+
+.small__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.photo__container {
+  position: relative;
+  border-radius: var(--ifm-card-border-radius);
+  overflow: hidden;
+  aspect-ratio: 1288/480;
+  min-height: 15rem;
+  max-width: 100%;
+  background-size: cover;
+  background-position: 25% center;
+}
+
+.photo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 25% center;
+}