diff --git a/index.html b/index.html index cda1e66..7f4793b 100644 --- a/index.html +++ b/index.html @@ -7,19 +7,13 @@ SimpleBlog - Julia Walker's Personal Blog - + - + - + - - +
-
- -
-
- - - - +
- - +
-
-
-

- Hi, I'm Julia Walker. -
Web Developer + Hi, I'm Julia Walker.
Web Developer

-

- Specialized in a11y - and Core Web Vitals + Specialized in a11y and Core Web Vitals

-
Contact Me About Me
-
-
Julia Walker
-
-
-
- - - -
-
- - +
-

Latest Blog Post

-
- -
- -
- Building microservices with Dropwizard, MongoDB & Docker -
- -
- - - -

- - Building microservices with Dropwizard, MongoDB & Docker - -

- -

- This NoSQL database oriented to documents (by documents like JSON) combines some of the features from - relational - databases, easy to use and the multi-platform is the best option for scale up and have fault - tolerance, load balancing, - map reduce, etc. -

- -
- -
- Julia Walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Fast web page loading on a $20 feature phone -
- -
- - - -

Fast web page loading on a $20 feature phone

- -

- Feature phones are affordable (under $20-25), low-end devices enabling 100s of millions of users in - developing countries - to leverage the web. Think of them as a light version of a smart phone. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Accessibility Tips for Web Developers -
- -
- - - -

Accessibility Tips for Web Developers

- -

- It's awesome to build sites that are inclusive and accessible to everyone. There are at least six key - areas of - disability we can optimize for: visual, hearing, mobility, cognition, speech and neural. Many tools - and resources can - help here, even if you're totally new to web accessibility. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Dynamically Securing Databases using Hashicorp Vault -
- -
- - - -

Dynamically Securing Databases using Hashicorp Vault

- -

- Nowadays, it's hard to profoundly talk about security in the IT industry, since it has to be - considered on so many - different levels: from securing code chunks, securing containers, up to securing complex - infrastructures and defining - strong authorization and authentication policies across the enterprise. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Adaptive Loading - Improving Web Performance on low-end devices -
- -
- - - -

Adaptive Loading - Improving Web Performance on low-end devices

- -

- Adaptive Loading: Do not just respond based on screen size, adapt based on actual device hardware. - Any user can have a slow experience. In a world with widely varying device capabilities, a "one-size" - fits all - experience may not always work. Sites that delight users on high-end devices can be unusable on - low-end ones, - particularly on median mobile and desktop hardware and in emerging markets. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Don't Develop Just for Yourself - A Developer's Checklist to Accessibility -
- -
- - - -

Don't Develop Just for Yourself - A Developer's Checklist to Accessibility -

- -

- We, as developers, tend to develop sites unconsciously for people like ourselves. If we don't actively - pay attention, - the sites are often accessible only for certain types of people: Sighted mouse-users, who have good - fine motor skills - and are good at using computers. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Building a Restful CRUD API with Node JS, Express, and MongoDB -
- -
- - - -

Building a Restful CRUD API with Node JS, Express, and MongoDB

- -

- Application Programming Interface is the abbreviation for API. An API is a software interface that - enables two apps to - communicate with one another. In other words, an API is a messenger that sends your request to the - provider and then - returns the response to you. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- Monitoring Performance with the PageSpeed Insights API -
- -
- - - -

Monitoring Performance with the PageSpeed Insights API

- -

- The PageSpeed Insights API provides free access to performance monitoring for web pages and returns - data with - suggestions for how to improve. The V5 API includes lab data from Lighthouse and real-world data from - the Chrome User - Experience Report (CrUX). -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- The best web accessibility tools for developers in 2021 -
- -
- - - -

The best web accessibility tools for developers in 2021 -

- -

- The quality of the tools you use defines the speed with which you can diagnose and resolve problems. - Each year the landscape changes dramatically in web technologies, and of late the tooling for - accessibility is no - exception. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- - -
- -
- How to connect a React frontend with a NodeJS/Express backend -
- -
- - - -

How to connect a React frontend with a NodeJS/Express backend

- -

- The MERN (MongoDB, Express, React, NodeJS) stack is very popular for making full stack applications, - utilizing - Javascript for both the backend and frontend as well as a document-oriented or non relational database - (MongoDB), - meaning that it's structured like JSON rather than a large excel sheet like SQL databases are. -

- -
- -
- Julia walker -
- -
- Julia Walker - -

- - - - -

-
- -
- -
- -
- +
+
- - + +
- - - - - - +
-
-

Topics

- - -
- -
- -

Database

- - - -
- -
- -

Accessibility

- - - -
- -
- -

Web Performance

- - +

Database

 +

Accessibility

 +

Web Performance
-

Tags

-
- @@ -718,165 +143,82 @@

Tags

-
-
-

Let's Talk

-
-

Do you want to learn more about how I can help your company overcome problems? Let us have a conversation.

- -
-
-
-
- - - - - - + - - - - - + - + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4dfdf79 --- /dev/null +++ b/script.js @@ -0,0 +1,155 @@ +/*-----------------------------------*\ + #script.js +\*-----------------------------------*/ + +/*============================ + 1. THEME TOGGLE +============================*/ + +const themeToggleBtns = document.querySelectorAll('.theme-btn-mobile, .theme-btn-desktop'); +const body = document.body; + +themeToggleBtns.forEach(btn => { + btn.addEventListener('click', () => { + if (body.classList.contains('light-theme')) { + body.classList.replace('light-theme', 'dark-theme'); + localStorage.setItem('theme', 'dark-theme'); + } else { + body.classList.replace('dark-theme', 'light-theme'); + localStorage.setItem('theme', 'light-theme'); + } + }); +}); + +// Load saved theme +const savedTheme = localStorage.getItem('theme'); +if (savedTheme) body.className = savedTheme; + + +/*============================ + 2. LOAD MORE BLOG CARDS +============================*/ + +const loadMoreBtn = document.getElementById('loadMoreBtn'); +const blogContainer = document.getElementById('blog-container'); + +// Example blog data +const blogData = [ + { + title: 'Blog Post 1', + topic: 'Database', + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...', + author: 'Julia Walker', + date: 'Oct 5, 2025' + }, + { + title: 'Blog Post 2', + topic: 'Accessibility', + text: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices...', + author: 'Julia Walker', + date: 'Oct 4, 2025' + }, + { + title: 'Blog Post 3', + topic: 'Web Performance', + text: 'Phasellus bibendum, mi nec cursus interdum, urna lorem facilisis...', + author: 'Julia Walker', + date: 'Oct 3, 2025' + } +]; + +let loadedCount = 0; +const increment = 2; + +function loadBlogs() { + const nextBlogs = blogData.slice(loadedCount, loadedCount + increment); + + nextBlogs.forEach(blog => { + const blogCard = document.createElement('div'); + blogCard.classList.add('blog-card'); + blogCard.innerHTML = ` +
+ ${blog.title} +
+
+ ${blog.topic} +

${blog.title}

+

${blog.text}

+
+
+ ${blog.author} +
+ ${blog.author} + + ${blog.date} +
+
+ `; + blogContainer.appendChild(blogCard); + }); + + loadedCount += increment; + + if (loadedCount >= blogData.length) { + loadMoreBtn.style.display = 'none'; + } +} + +// Initial load +loadBlogs(); + +loadMoreBtn.addEventListener('click', loadBlogs); + + +/*============================ + 3. NEWSLETTER FORM +============================*/ + +const newsletterForm = document.getElementById('newsletterForm'); +const newsletterMsg = document.getElementById('newsletterMsg'); + +newsletterForm.addEventListener('submit', e => { + e.preventDefault(); + newsletterMsg.style.display = 'block'; + newsletterForm.reset(); + + setTimeout(() => { + newsletterMsg.style.display = 'none'; + }, 3000); +}); + + +/*============================ + 4. SCROLL TO TOP BUTTON +============================*/ + +const scrollTopBtn = document.getElementById('scrollTopBtn'); + +window.onscroll = () => { + if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { + scrollTopBtn.style.display = 'block'; + } else { + scrollTopBtn.style.display = 'none'; + } +}; + +scrollTopBtn.addEventListener('click', () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); +}); + + +/*============================ + 5. MOBILE NAVIGATION +============================*/ + +const navMenuBtn = document.querySelector('.nav-menu-btn'); +const mobileNav = document.querySelector('.mobile-nav'); +const navCloseBtn = document.querySelector('.nav-close-btn'); + +navMenuBtn.addEventListener('click', () => { + mobileNav.classList.add('active'); +}); + +navCloseBtn.addEventListener('click', () => { + mobileNav.classList.remove('active'); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..b99c3d5 --- /dev/null +++ b/style.css @@ -0,0 +1,1074 @@ +/*-----------------------------------*\ + #style.css +\*-----------------------------------*/ + +/** + * copyright 2022 @codewithsadee + */ + + + + + +/*-----------------------------------*\ + #CUSTOM PROPERTY +\*-----------------------------------*/ + +.light-theme { + + /** + * light theme colors + */ + + --background-primary: hsl(0, 0%, 100%); + --background-secondary: hsl(0, 0%, 97%); + + --action-primary: hsl(214, 32%, 91%); + --action-secondary: hsl(210, 38%, 95%); + + --foreground-primary: hsl(218, 23%, 23%); + --foreground-secondary: hsl(216, 15%, 52%); + --foreground-tertiary: hsl(214, 20%, 69%); + + --accent: hsl(229, 76%, 66%); + +} + +.dark-theme { + + /** + * dark theme colors + */ + + --background-primary: hsl(218, 23%, 23%); + --background-secondary: hsl(220, 26%, 14%); + + --action-primary: hsl(216, 15%, 52%); + --action-secondary: hsl(218, 23%, 23%); + + --foreground-primary: hsl(210, 38%, 95%); + --foreground-secondary: hsl(211, 25%, 84%); + --foreground-tertiary: hsl(214, 20%, 69%); + + --accent: hsl(229, 76%, 66%); + +} + +:root { + + /** + * color + */ + + --white: hsl(0, 0%, 100%); + + /** + * typography + */ + + --fs-base: 0.85rem; + --fs-1: 1.875rem; + --fs-2: 1.5rem; + --fs-3: 1.25rem; + --fs-4: 0.875rem; + --fs-5: 0.75rem; + + /** + * spacing + */ + + --py: 5rem; + +} + + + + + +/*-----------------------------------*\ + #RESET +\*-----------------------------------*/ + +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { text-decoration: none; } + +li { list-style: none; } + +img, button { display: block; } + +a, span { display: inline-block; } + +button { + font: inherit; + border: none; + background: none; + cursor: pointer; +} + +html { + font-family: "Inter", sans-serif; + font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */ + line-height: 1.8; +} + +:focus { outline-offset: 4px; } + + +/** + * scrollbar style + */ + +::-webkit-scrollbar { width: 16px; } + + +::-webkit-scrollbar-thumb { + background: var(--accent); + border-radius: 20px; + border: 4px solid; +} + +.light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); } + +.dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); } + +.light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); } + +.dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); } + + + + + +/*-----------------------------------*\ + #BASE STYLE +\*-----------------------------------*/ + +.h1, +.h2, +.h3, +.h4 { + display: block; + color: var(--foreground-primary); +} + +.h1 { + font-size: var(--fs-1); + font-weight: 900; +} + +.h2 { + font-size: var(--fs-2); + font-weight: 700; +} + +.h3 { + font-size: var(--fs-3); + font-weight: 700; +} + +.h4 { + font-size: var(--fs-4); + font-weight: 700; +} + +.text-sm { font-size: var(--fs-4); } + +.text-tiny { font-size: var(--fs-5); } + + + + + +/*-----------------------------------*\ + #REUSED STYLE +\*-----------------------------------*/ + +.container { + margin-inline: auto; + margin: auto; /* fallback for margin-inline */ + padding: 0 15px; +} + +.btn { + min-width: 10rem; + border-radius: 100px; +} + +.btn-primary { + background: var(--accent); + color: var(--white); + padding: 0.6875rem 1.1875rem; +} + +.btn-primary:hover { + background: var(--foreground-secondary); + color: var(--action-primary); +} + +.btn-secondary { + background: var(--action-secondary); + color: var(--foreground-secondary); + padding: 0.5rem 1rem; + border: 3px solid var(--foreground-tertiary); +} + +.btn-secondary:hover { border-color: var(--accent); } + + + + + +/*-----------------------------------*\ + #Extra style for dark theme +\*-----------------------------------*/ + +.dark-theme .btn-primary:hover { color: var(--background-primary); } + +.dark-theme .blog-topic { + background: var(--action-primary); + color: var(--foreground-secondary); +} + +.dark-theme .blog-topic:hover { + background: var(--foreground-primary); + color: var(--action-primary); +} + +.dark-theme .load-more:hover { color: var(--white); } + +.dark-theme .aside .h2 { color: var(--foreground-primary); } + + + + +/*-----------------------------------*\ + #HEADER +\*-----------------------------------*/ + +header { background: var(--background-primary); } + +header .flex-wrapper { display: none; } + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; + padding: 15px 0; +} + +.logo-light, +.logo-dark { display: none; } + +.light-theme .logo-light, +.dark-theme .logo-dark { display: block; } + +header .btn-group { + display: flex; + align-items: center; + gap: 15px; +} + +.theme-btn-mobile, +.nav-menu-btn, +.nav-close-btn { + background: var(--action-secondary); + color: var(--foreground-tertiary); + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + font-size: 25px; +} + +:is(.theme-btn-mobile, +.nav-menu-btn, +.nav-close-btn):hover { + background: var(--accent); + color: var(--white); +} + +.theme-btn-mobile ion-icon { display: none; } + +.theme-btn-mobile.light .sun, +.theme-btn-mobile.dark .moon { display: block; } + +.mobile-nav { + position: fixed; + inset: 0; + background: var(--background-primary); + padding: 70px 20px; + overflow: auto; + overscroll-behavior: contain; + transform: translateX(100%); + visibility: hidden; + transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70); + z-index: 10; +} + +.mobile-nav.active { + transform: translateX(0); + visibility: visible; +} + +.nav-close-btn { + position: absolute; + top: 20px; + right: 20px; +} + +.mobile-nav .wrapper { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + border-bottom: 1px solid var(--action-primary); +} + +.mobile-nav .nav-title { margin-bottom: 1rem; } + +.mobile-nav .nav-item { margin-bottom: 0.5rem; } + +.mobile-nav .nav-link { + font-size: var(--fs-3); + color: var(--foreground-secondary); +} + +.mobile-nav .nav-link:hover { color: var(--accent); } + + + + + +/*-----------------------------------*\ + #HERO SECTION +\*-----------------------------------*/ + +.hero { + background: var(--background-primary); + padding-top: 2rem; + padding-bottom: var(--py); + text-align: center; +} + +.hero .h1 { + margin-bottom: 1rem; + line-height: 1.6; +} + +.hero b { + color: var(--accent); + font-weight: inherit; +} + +.hero .h3 { + color: var(--foreground-secondary); + margin-bottom: 2rem; +} + +.hero .btn-group { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 15px; + text-align: center; +} + +.hero .right { display: none; } + + + + + +/*-----------------------------------*\ + #BLOG SECTION +\*-----------------------------------*/ + +.main { + background: var(--background-secondary); + padding: var(--py) 0; +} + +.blog .h2 { + line-height: 1.3; + margin-bottom: 3rem; + text-align: center; +} + +.blog-card-group { margin-bottom: 3rem; } + +.blog-card { + background: var(--background-primary); + padding: 10px; + margin-bottom: 1rem; + border-radius: 10px; + box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05); + transition: 0.25s ease; +} + +.blog-card:hover { + transform: translateY(-2px); + box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1); +} + +.blog-card-banner { display: none; } + +.blog-content-wrapper { padding: 10px 5px; } + +.blog-topic { + background: var(--action-secondary); + color: var(--foreground-secondary); + font-weight: 600; + padding: 0.25rem 1rem; + border-radius: 5px; + margin-bottom: 1rem; +} + +.blog-topic:hover { + background: var(--foreground-secondary); + color: var(--action-secondary); +} + +.blog-card .h3 { + line-height: 1.4; + margin-bottom: 1rem; +} + +.blog-card .h3:hover { + text-decoration: underline; + text-decoration-thickness: 2px; +} + +.blog-text, +.profile-wrapper { display: none; } + +.blog .wrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 15px; +} + +.blog .h4 { color: var(--foreground-secondary); } + +.blog .h4:hover { color: var(--accent); } + +.blog .text-sm { + display: flex; + align-items: center; + gap: 5px; + color: var(--foreground-tertiary); +} + +.blog .separator { + background: var(--foreground-tertiary); + margin-inline: 3px; + margin: 0 3px; /* fallback for margin-inline */ + width: 3px; + height: 3px; + border-radius: 3px; +} + +.blog ion-icon { --ionicon-stroke-width: 50px; } + +.load-more { + margin-inline: auto; + margin: auto; /* fallback for margin-inline */ + background: var(--foreground-secondary); + color: var(--background-secondary); + padding: 0.6875rem 1.1875rem; +} + +.load-more:hover { background: var(--accent); } + + + + + +/*-----------------------------------*\ + #ASIDE +\*-----------------------------------*/ + +.aside { display: none; } + + + + + +/*-----------------------------------*\ + #FOOTER +\*-----------------------------------*/ + +footer { background: var(--background-primary); } + +footer .container { + padding: var(--py) 15px; + display: grid; + grid-template-columns: 1fr; + gap: 30px; +} + +footer .wrapper { text-align: center; } + +.footer-logo { margin-bottom: 10px; } + +.footer-text { + color: var(--foreground-secondary); + max-width: 300px; + margin-inline: auto; + margin: auto; /* fallback for margin-inline */ +} + +.footer-title { + color: var(--foreground-primary); + font-weight: 700; + margin-bottom: 0.4rem; +} + +.footer-link { color: var(--foreground-secondary); } + +.footer-link:hover { color: var(--accent); } + +.copyright { + color: var(--foreground-secondary); + font-size: var(--fs-4); + text-align: center; + padding: 1rem; + border-top: 1px solid var(--action-primary); +} + +.copyright a { + color: var(--accent); + font-weight: 500; +} + +.copyright a:hover { text-decoration: underline; } + + + + + +/*-----------------------------------*\ + #MEDIA QUERIES +\*-----------------------------------*/ + +/** + * responsive for larger than 550px screen + */ + +@media (min-width: 550px) { + + :root { + + /** + * typography + */ + + --fs-base: 0.90rem; + + } + + + /** + * BLOG + */ + + .blog-card { + display: grid; + grid-template-columns: 3fr 4fr; + gap: 20px; + } + + .blog-card-banner { + display: block; + overflow: hidden; + border-radius: 5px; + } + + .blog-banner-img { + width: 100%; + height: 100%; + object-fit: cover; + } + +} + + + + + +/** + * responsive for larger than 650px screen + */ + +@media (min-width: 650px) { + + :root { + + /** + * typography + */ + + --fs-1: 2.25rem; + + } + + + + /** + * REUSED STYLE + */ + + .container { padding: 0 30px; } + + + + /** + * HEADER + */ + + .navbar { padding: 30px 0; } + + + + /** + * BLOG + */ + + .blog .h2 { + position: relative; + text-align: left; + padding-left: 2rem; + } + + .blog .h2::before { + content: ''; + position: absolute; + top: 0; + left: 0; + background: var(--action-primary); + width: 5px; + height: 100%; + border-radius: 5px; + } + + .blog-text, + .profile-wrapper { display: block; } + + .blog-text { + color: var(--foreground-secondary); + font-size: var(--fs-4); + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 1rem; + } + + .blog .wrapper-flex { + display: flex; + justify-content: start; + align-items: center; + gap: 10px; + } + + .profile-wrapper { + width: 56px; + height: 56px; + background: var(--action-primary); + padding: 3px; + border-radius: 50%; + } + + .profile-wrapper img { border-radius: 50%; } + + .blog .wrapper { + flex-direction: column; + align-items: start; + gap: 0; + } + + + + /** + * FOOTER + */ + + footer .container { + padding: var(--py) 30px; + grid-template-columns: 2fr 1fr 1fr; + } + + footer .wrapper { text-align: left; } + + .footer-text { margin: 0; } + +} + + + + + +/** + * responsive for larger than 768px screen + */ + +@media (min-width: 768px) { + + /** + * REUSED STYLE + */ + + .container { max-width: 800px; } + +} + + + + + +/** + * responsive for larger than 1024px screen + */ + +@media (min-width: 1024px) { + + :root { + + /** + * typography + */ + + --fs-base: 1rem; + --fs-1: 3rem; + + } + + + + /** + * REUSED STYLE + */ + + .container { max-width: 1150px; } + + + + /** + * HEADER + */ + + header .btn-group { display: none; } + + header .flex-wrapper { + display: flex; + gap: 30px; + } + + .desktop-nav { + display: flex; + align-items: center; + gap: 30px; + } + + .desktop-nav .nav-link { + color: var(--foreground-secondary); + font-weight: 700; + } + + .desktop-nav .nav-link:hover { color: var(--accent); } + + .theme-btn-desktop { + position: relative; + background: var(--background-secondary); + color: var(--white); + width: 52px; + height: 26px; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 100px; + } + + .theme-btn-desktop.light { + background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%)); + } + + .theme-btn-desktop.dark { + background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%)); + } + + .theme-btn-desktop::before { + content: ''; + position: absolute; + background: var(--white); + width: 21px; + height: 21px; + border-radius: 30px; + top: 50%; + left: 3px; + transform: translateY(-50%); + box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05); + z-index: 2; + } + + .theme-btn-desktop.dark::before { left: calc(100% - 24px); } + + + + /** + * HERO + */ + + .hero { text-align: left; } + + .hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 50px; + } + + .hero .btn-group { + justify-content: start; + gap: 30px; + } + + .hero .right { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .hero .pattern-bg { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 100%; + height: 200px; + background: url(../images/pattern.png); + background-size: contain; + opacity: 0.2; + } + + .hero .img-box { + position: relative; + z-index: 2; + } + + .hero-img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 0 0 280px 230px; + transform: translate(10px, -10px); + } + + .hero .shape { + position: absolute; + top: 50%; + left: 50%; + border-radius: 50%; + transform: translate(-50%, -42%) rotate(-20deg); + } + + .hero .shape-1 { + background: var(--accent); + width: 90%; + height: 90%; + z-index: -1; + } + + .hero .shape-2 { + width: 92%; + height: 92%; + box-shadow: inset 0 -30px 0 var(--action-primary); + z-index: 2; + } + + + + /** + * MAIN + */ + + .main .container { + display: grid; + grid-template-columns: 5fr 2fr; + gap: 60px; + } + + + + /** + * ASIDE + */ + + .aside { + display: block; + align-self: stretch; + } + + .aside .h2 { + color: var(--foreground-secondary); + margin-bottom: 3rem; + text-align: center; + line-height: 1.3; + } + + .aside .wrapper { + background: var(--background-primary); + border-radius: 10px; + padding: 40px; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); + } + + .topics { margin-bottom: 3rem; } + + .topic-btn { + display: flex; + align-items: stretch; + background: var(--background-primary); + border-radius: 10px; + box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05); + overflow: hidden; + } + + .topic-btn:not(:last-child) { margin-bottom: 1rem; } + + .topic-btn .icon-box { + font-size: 22px; + width: 70px; + display: flex; + justify-content: center; + align-items: center; + background: var(--action-primary); + color: var(--foreground-secondary); + } + + .topic-btn:hover .icon-box { + background: var(--accent); + color: var(--white); + } + + .topic-btn ion-icon { --ionicon-stroke-width: 40px; } + + .topic-btn p { + padding: 15px; + color: var(--foreground-secondary); + font-weight: 700; + } + + .tags { margin-bottom: 3rem; } + + .tags .wrapper { + display: flex; + flex-wrap: wrap; + gap: 0.2rem; + } + + .tags .hashtag { + background: var(--action-primary); + color: var(--foreground-secondary); + padding: 5px 10px; + font-size: var(--fs-5); + font-weight: 700; + border-radius: 5px; + } + + .tags .hashtag:hover { + background: var(--foreground-secondary); + color: var(--action-primary); + } + + .contact { margin-bottom: 3rem; } + + .contact p { + color: var(--foreground-secondary); + margin-bottom: 1rem; + } + + .social-link { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + } + + .social-link .icon-box { + width: 45px; + height: 45px; + background: var(--action-secondary); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 22px; + } + + .social-link .discord { color: hsl(235, 86%, 65%); } + + .social-link .twitter { color: hsl(203, 89%, 53%); } + + .social-link .facebook { color: hsl(220, 46%, 48%); } + + .social-link .icon-box:hover { + background: var(--accent); + color: var(--white); + } + + .newsletter { + position: sticky; + top: 3rem; + margin-bottom: 98px; + } + + .newsletter p { + color: var(--foreground-secondary); + margin-bottom: 1rem; + } + + .newsletter input { + border: none; + background: var(--action-primary); + display: block; + width: 100%; + padding: 0.5rem 1rem; + font: inherit; + color: var(--foreground-secondary); + border-radius: 5px; + margin-bottom: 1rem; + } + + .newsletter input::placeholder { color: inherit; } + + .newsletter input:focus { + outline: 2px solid; + outline-offset: 0; + } + + .newsletter .btn-primary { + margin-inline: auto; + margin: auto; /* fallback for margin-inline */ + } + + + + /** + * FOOTER + */ + + .footer-title { font-size: 1.125rem; } + + .footer-link { margin-bottom: 0.3rem; } + +} \ No newline at end of file