From 1983b96de023d551de990edf2b318101ad4acff3 Mon Sep 17 00:00:00 2001 From: Seth Etter Date: Fri, 14 Aug 2026 17:33:16 -0500 Subject: [PATCH] Replace utility classes with semantic CSS - Element selectors handle default content flow (headings, paragraphs, lists, inline links) instead of text-*/my-*/max-w-* utilities - Semantic classes: donation-options (was flex-row), cta-row buttons sized via .cta-row .btn (was btn-large) - Responsive behavior preserved: nav toggle, CTA stacking, donation column stacking, auto-fit card grid - Values/stances lists get real bullets; fixed unwrapped Stances block and stray

in about page - Inline links styled via main a; removed link-blue - Removed unused volunteer-card, flex-col, and remaining utilities --- src/about.njk | 92 +++++-------- src/conduct.njk | 28 ++-- src/index.njk | 39 +++--- src/support.njk | 20 +-- static/styles.css | 332 ++++++++++++++++------------------------------ 5 files changed, 185 insertions(+), 326 deletions(-) diff --git a/src/about.njk b/src/about.njk index 25bfe33..2cb1c5d 100644 --- a/src/about.njk +++ b/src/about.njk @@ -5,70 +5,38 @@ title: About

Wichita's community for software developers

-

devICT is a volunteer-run community aiming to educate, empower and connect web, game, and software developers in the Wichita, KS area through online and in-person engagement.

-
-

Open to all: hobbyists, beginners, and seasoned engineers alike.

-

devICT is a welcoming and knowledgeable community where you can engage, contribute, and grow your skills as a web, game, or software developer.

+

devICT is a volunteer-run community aiming to educate, empower, and connect developers in the Wichita, KS area. We welcome all manner of hackers and makers.

-
-
-

Who we are

-

We are a group of individuals who have a common interest in software development.

-

Our skill levels vary greatly, from complete beginners to seasoned veterans. We welcome anyone with a curiosity for programming.

-

We strictly enforce a Code of Conduct to provide all of our members a safe and inclusive environment.

-
-
-

What we do

-

Members of devICT have one common goal: to be better at what we do. Our events and services are aimed at achieving that.

-

To make that happen we have monthly events that are both social and educational.

-

We also have an active Slack community which serves as a place to connect and discuss with others in the community.

-
-
-

Get involved!

-

Most of the time we are hanging out in Slack. To join, just fill out this form.

-

Primarily, be sure to become a member on the Meetup page. Then you will receive notifications for upcoming events.

-

You could also give a talk! Share the knowledge! We enjoy learning about any development related topics. Contact a board member if you are interested!

-
-
+
-
+

devICT began in 2012 with the purpose of bringing together like-minded individuals to learn and grow together as software developers. Since then we've maintained regular in person events, both social and educational in nature, and an active online community in Slack.

-
-

Organizers

-

The devICT Institute is a 501c3 non-profit governed by a board of directors. In addition to the board we are supported by volunteers who organize events and generally keep things running.

+

Instead of focusing on a specific programming language or layer of the stack (frontend, backend, infrastructure), we decided to embrace any and all aspects of software. As a result, we've cultivated a diverse community full of a variety of experiences and perspectives on technology.

-

Board & Volunteers

-
-
- Image of Seth Etter - Seth Etter - Board of Directors - Contact on Slack -
-
- Image of Christen Lofland - Christen Lofland - Board of Directors - Contact on Slack -
-
- Image of Michael Neth - Michael Neth - Board of Directors - Contact on Slack -
-
- Image of Brian Buller - Brian Buller - Code & Coffee Host - Contact on Slack -
-
- Image of Brian Foster - Brian Foster - Game Jam Organizer - Contact on Slack -
-
-
+

Values

+ +

Our community is rooted in a few foundational principles that guide our actions and decision making.

+ + + +

Stances

+ +

These positions follow from our principles. They reflect where we stand today and may grow as our community and context evolve.

+ + + +

Organizers

+

The devICT Institute is a 501c3 non-profit governed by a board of directors. In addition to the board we are supported by volunteers who organize events and generally keep things running.

+

If you want to get in touch with organizers at devICT, you can email the board at board [at] devict.org.

diff --git a/src/conduct.njk b/src/conduct.njk index 76cce9d..b5c7f4d 100644 --- a/src/conduct.njk +++ b/src/conduct.njk @@ -3,7 +3,7 @@ layout: layouts/base.njk title: Code of Conduct --- -
+

Code of Conduct

All individuals participating in any devICT sanctioned space, whether in-person or online, are required to agree with the following code of conduct. This includes attendees, volunteers, speakers, sponsors, and members of the devICT board. Organizers will enforce this code whenever deemed appropriate. We expect cooperation from all participants to help ensure a safe and welcoming environment for everybody.

@@ -31,18 +31,14 @@ title: Code of Conduct

You may use this form to anonymously report an incident that may have violated our Code of Conduct. The report will go to the devICT Board of Directors. The report goes through the servers at formspree.io.

-
-
-
- - -
-
-

If you want a response from the board, please leave some kind of contact information here.

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

If you want a response from the board, please leave some kind of contact information here.

+
+ + +
+
diff --git a/src/index.njk b/src/index.njk index 5f945b2..809f973 100644 --- a/src/index.njk +++ b/src/index.njk @@ -5,30 +5,28 @@ title: ""

Wichita's community for software developers

-

devICT is a volunteer-run community aiming to educate, empower and connect web, game, and software developers in the Wichita, KS area through online and in-person engagement.

-
-

Open to all: hobbyists, beginners, and seasoned engineers alike.

-

devICT is a welcoming and knowledgeable community where you can engage, contribute, and grow your skills as a web, game, or software developer.

+

devICT is a volunteer-run community aiming to educate, empower, and connect developers in the Wichita, KS area. We welcome all manner of hackers and makers.

+
+ +

Open to all: hobbyists, beginners, and seasoned engineers alike.

+

devICT is a welcoming and knowledgeable community where you can engage, contribute, and grow your skills.

+
- Learn more - Join us in Slack - Upcoming events + Learn more + Join us in Slack + Upcoming events
-
+
-

Why contribute?

-
+

Why contribute?

+

Build Skills

Working on real-world projects exposes you to new technologies and best practices.

-
-

Build Portfolio

-

Your contributions get recorded on GitHub, providing tangible proof of your skills.

-

Build Network

Interacting with the community offers immense learning opportunities and widens your professional network.

@@ -39,16 +37,11 @@ title: ""
-

How to contribute?

-
-
-

Join the Conversation

-

Join us in Slack and jump into the conversation! Share what you're working on, ask questions, and help others.

- Join Slack -
+

How to contribute?

+

Contribute to a Project

-

Browse our GitHub organization to find projects you can contribute to. Plenty of ways to help with or without coding.

+

Browse our GitHub organization to find projects you can contribute to. Plenty of ways to help with or without coding.

Get Coding
@@ -63,7 +56,7 @@ title: ""
-

In addition to our community members, we are supported by these great local partners.

+

In addition to our community members, we are supported by these great local partners.

GrooverLabs diff --git a/src/support.njk b/src/support.njk index 6410ae3..cde5dbb 100644 --- a/src/support.njk +++ b/src/support.njk @@ -3,18 +3,18 @@ layout: layouts/base.njk title: Support --- -

Support your local dev community!

-

devICT is 100% volunteer run and funded by the support of our community members and sponsor organizations.

+

Support your local dev community!

+

devICT is 100% volunteer run and funded by the support of our community members and sponsor organizations.

-
+
-
-
-

Recurring Donations

-

You can create a recurring donation by creating an account on Patreon. To donate visit our Patreon profile.

+
+
+

Recurring Donations

+

You can create a recurring donation by creating an account on Patreon. To donate visit our Patreon profile.

-
-

One-time Donations

-

If you want to help but do not want to set up a recurring donation you can give a single amount using PayPal or Venmo.

+
+

One-time Donations

+

If you want to help but do not want to set up a recurring donation you can give a single amount using PayPal or Venmo.

diff --git a/static/styles.css b/static/styles.css index c3c6145..35facde 100644 --- a/static/styles.css +++ b/static/styles.css @@ -36,17 +36,6 @@ body { background: url('/cream_pixels.png') repeat; } -a { - color: var(--color-link); - text-decoration: none; - font-weight: 500; - transition: color 0.2s ease-in-out; -} - -a:hover { - color: var(--color-link-hover); -} - hr { border: none; border-top: 1px solid #e5e7eb; @@ -60,21 +49,61 @@ hr { padding: 0 2rem; } +/* Content flow */ +main h1 { + font-size: 2.25rem; + line-height: 2.5rem; + margin: 2rem 0 1rem; +} + +main h2 { + font-size: 1.5rem; + line-height: 2rem; + font-weight: 600; + margin: 2rem 0 1rem; +} + +main h3 { + font-size: 1.25rem; + margin: 0 0 0.5rem; +} + +main p { + margin: 0 0 1rem; +} + +main ul { + list-style: disc; + padding-left: 1.5rem; + margin: 0 0 1rem; +} + +main li { + margin-bottom: 0.5rem; +} + +main a { + color: #2563eb; + text-decoration: none; + font-weight: 500; +} + +main a:hover { + color: #1d4ed8; + text-decoration: underline; +} + /* Header */ .header { background: white; - padding: 1.5rem 2rem; - margin-bottom: 2rem; border-bottom: 1px solid #e2e8f0; + margin-bottom: 2rem; } .header-content { max-width: var(--max-width); - margin-left: auto; - margin-right: auto; -} - -.header-content { + margin: 0 auto; + padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; @@ -102,8 +131,11 @@ hr { .nav-menu a { color: var(--color-gray-500); + text-decoration: none; + font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; + transition: color 0.2s ease-in-out; } .nav-menu a:hover { @@ -138,9 +170,9 @@ hr { /* Footer */ .footer { - padding: 0 2rem 2rem; max-width: var(--max-width); margin: 0 auto; + padding: 0 2rem 2rem; } .footer-links { @@ -153,9 +185,25 @@ hr { display: flex; align-items: center; gap: 0.25rem; + color: var(--color-link); + text-decoration: none; font-weight: 500; } +.footer-links a:hover { + color: var(--color-link-hover); +} + +/* Hero */ +.hero h1 { + margin-top: 0; +} + +.hero h2 { + font-size: 1.25rem; + font-weight: normal; +} + /* Buttons */ .btn { display: inline-block; @@ -172,170 +220,63 @@ hr { .btn:hover { background: var(--color-orange-hover); color: white; + text-decoration: none; } -.btn-large { - font-size: 1.25rem; - padding: 1rem 1.5rem; - width: 100%; -} - -/* Cards */ -.card { - background: white; - border-radius: 0.5rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - padding: 1.5rem; +/* CTA row: stacked on mobile, side-by-side on wider screens */ +.cta-row { + display: flex; + flex-direction: column; + gap: 1rem; + margin: 2rem 0; } -.card h3 { +.cta-row .btn { font-size: 1.25rem; - margin-bottom: 0.5rem; } -.card p { - margin-bottom: 0.75rem; - color: var(--color-gray-700); -} - -.card p:last-child { - margin-bottom: 0; -} +@media (min-width: 768px) { + .cta-row { + flex-direction: row; + } -.card .btn { - margin-top: 1rem; + .cta-row .btn { + flex: 1; + } } -/* Grid — columns fit to container width */ +/* Card grid — columns fit to container width */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + margin-bottom: 1rem; } -/* Flex utilities */ -.flex-row { - display: flex; - flex-direction: row; - gap: 1rem; -} - -.flex-col { - display: flex; - flex-direction: column; - gap: 1rem; -} - -@media (max-width: 768px) { - .flex-row { - flex-direction: column; - } -} - -.flex-1 { - flex: 1; -} - -/* Text utilities */ -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-lg { - font-size: 1.125rem; -} - -.text-sm { - font-size: 0.875rem; -} - -.font-bold { - font-weight: bold; -} - -.font-semibold { - font-weight: 600; -} - -/* Spacing */ -.mb-2 { margin-bottom: 0.5rem; } -.mb-4 { margin-bottom: 1rem; } -.mb-8 { margin-bottom: 2rem; } -.mb-16 { margin-bottom: 4rem; } -.my-4 { margin-top: 1rem; margin-bottom: 1rem; } -.my-8 { margin-top: 2rem; margin-bottom: 2rem; } -.mt-4 { margin-top: 1rem; } -.mt-8 { margin-top: 2rem; } - -/* Max width */ -.max-w-4xl { - max-width: 56rem; -} - -.max-w-md { - max-width: 28rem; -} - -/* Hero section */ -.hero { - margin-bottom: 2rem; -} - -.hero h1 { - font-size: 2.25rem; - font-weight: bold; - margin: 0 0 1rem; -} - -.hero h2 { - font-size: 1.25rem; - margin: 0 0 1rem; - font-weight: normal; +.card { + background: white; + border-radius: 0.5rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + padding: 1.5rem; } -.hero p { - font-size: 1.5rem; - margin: 0 0 1rem; +.card p { + color: var(--color-gray-700); } -/* CTA buttons row */ -.cta-row { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 2rem 0; +.card p:last-child { + margin-bottom: 0; } -@media (min-width: 768px) { - .cta-row { - flex-direction: row; - } - - .cta-row .btn { - flex: 1; - } +.card .btn { + margin-top: 1rem; } /* Sponsors */ .sponsors { display: flex; gap: 2rem; + margin-bottom: 2rem; } .sponsors img { @@ -349,31 +290,20 @@ hr { opacity: 0.75; } -/* Volunteer cards */ -.volunteer-card img { - border-radius: 0.25rem; - margin-bottom: 0.5rem; -} - -.volunteer-card strong { - display: block; -} - -.volunteer-card .role { - color: var(--color-gray-500); - font-size: 0.875rem; - display: block; - margin-bottom: 0.25rem; +/* Donation options: side-by-side, stacked on mobile */ +.donation-options { + display: flex; + gap: 2rem; } -.volunteer-card a { - color: var(--color-orange); - font-weight: 500; +.donation-options > div { + flex: 1; } -.volunteer-card a:hover { - text-decoration: underline; - color: var(--color-orange-hover); +@media (max-width: 768px) { + .donation-options { + flex-direction: column; + } } /* Forms */ @@ -381,6 +311,12 @@ hr { margin-bottom: 1rem; } +.form-group label { + display: block; + font-size: 0.875rem; + margin-bottom: 0.5rem; +} + .form-input, .form-textarea { width: 100%; @@ -409,6 +345,10 @@ hr { align-items: center; } +.form-row .form-input { + max-width: 200px; +} + .form-submit { background: var(--color-orange); color: white; @@ -424,50 +364,12 @@ hr { background: var(--color-orange-hover); } -/* Markdown content */ -.markdown-body { - line-height: 1.7; -} - +/* Code of Conduct page */ .markdown-body h1 { - font-size: 2rem; - margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; } -.markdown-body h2 { - font-size: 1.5rem; - margin-top: 2rem; - margin-bottom: 1rem; -} - -.markdown-body p { - margin-bottom: 1rem; -} - -.markdown-body strong { - font-weight: 600; -} - .markdown-body a { color: var(--color-orange); } - -.markdown-body a:hover { - text-decoration: underline; -} - -/* Link colors for inline links */ -a.link-blue { - color: #2563eb; -} - -a.link-blue:visited { - color: #7c3aed; -} - -a.link-blue:hover { - color: #1d4ed8; - text-decoration: underline; -} -- knotmirror 0.0.1