Skip to content

Commit

Permalink
fix: use bootstrap classes for style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gerseneck
Gerseneck committed Jul 23, 2024
1 parent 59fc0c1 commit 2a39810
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 60 deletions.
22 changes: 11 additions & 11 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<a class="nav-link text-primary" href="/projects">Projects</a>
</li>
</ul>
<button class="nav-item btn" id="modeButton" style="border: none; outline: none; margin-right: 15px;">
<button class="nav-item btn mr-1" id="modeButton" class="border border-0">
<h5><i class="bi bi-brightness-high-fill" style="vertical-align: -0.125em"></i></h5>
</button>
</div>
Expand All @@ -57,7 +57,7 @@ <h5><i class="bi bi-brightness-high-fill" style="vertical-align: -0.125em"></i><
<h5 class="modal-title">Brightness Slider</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="text-align: center;">
<div class="modal-body text-center">
<label for="brightnessRange" style="vertical-align: 0.30em; padding-right: 5px;">Dark</label>
<input type="range" min="0" max="100" value="100" class="slider" id="brightnessRange">
<label for="brightnessRange" style="vertical-align: 0.30em; padding-left: 5px;">Bright</label>
Expand All @@ -66,28 +66,28 @@ <h5 class="modal-title">Brightness Slider</h5>
</div>
</div>

<main class="page-wrapper" style="margin: 25px;">
<main class="page-wrapper m-4">
{{ content }}
</main>

<footer class="footer-format bg-body-tertiary">
<div class="container py-5 col-12 col-md">
<img src="/assets/icon.svg" alt="WL Hack Club Logo" height="64px">
<span class="text-muted" style="float: right;">
<a href="https://github.com/WLHackClub/" style="text-decoration: none;" target="_blank">
<i class="bi bi-github" style="font-size: 24px;"></i>
<span class="text-muted float-end">
<a href="https://github.com/WLHackClub/" class="text-decoration-none" target="_blank">
<i class="bi bi-github fs-4"></i>
</a>
<a href="https://www.instagram.com/wl_hackclub/" style="text-decoration: none;" target="_blank">
<i class="bi bi-instagram" style="font-size: 24px;"></i>
<a href="https://www.instagram.com/wl_hackclub/" class="text-decoration-none" target="_blank">
<i class="bi bi-instagram fs-4"></i>
</a>
<a href="https://discord.gg/5JChnwaEQd" style="text-decoration: none;" target="_blank">
<i class="bi bi-discord" style="font-size: 24px;"></i>
<a href="https://discord.gg/5JChnwaEQd" class="text-decoration-none" target="_blank">
<i class="bi bi-discord fs-4"></i>
</a>
</span>
<small class="d-block mb-3 text-muted">&copy; {{ site.time | date: '%Y' }}</small>
<small class="d-block mb-3 text-muted">
<a href="/credits">Website Credits</a>
<span style="float: right;">
<span class="float-end">
<a href="https://github.com/WLHackClub/WLHackClub.github.io" target="_blank">Source Code</a>
</span>
</small>
Expand Down
6 changes: 3 additions & 3 deletions _layouts/project.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@

<h1>{{ page.title }}</h1>

<div style="margin-top: 5px; margin-bottom: 5px;">
<div class="my-1">
{% if page.tags %}
{% for tag in page.tags %}
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/{{ tag }}/{{ tag }}-{% if site.data.devicons[tag] %}{{ site.data.devicons[tag] }}{% else %}{{ 'original' }}{% endif %}.svg" draggable="false" width="32" height="32">
{% endfor %}
{% endif %}
</div>

<div style="margin-bottom: 16px">
<div class="mb-2">
{{ page.description }}
</div>

{% if page.code_url %}
<a href="{{ page.code_url }}" class="btn btn-primary" target="_blank" style="margin-right: 5px">
<a href="{{ page.code_url }}" class="btn btn-primary me-1" target="_blank">
<i class="bi bi-code-slash"></i>
Source Code
</a>
Expand Down
2 changes: 1 addition & 1 deletion about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h1>About Us</h1>
<p>WL Hack Club is a student led organization where we learn about CS and coding.</p>

<div class="row d-flex justify-content-center" style="margin-top: 20px; margin-bottom: 20px;">
<div class="row d-flex justify-content-center my-2">
<div class="col-md-8">
<div id="welcomeCarousel" class="carousel slide" data-bs-theme="dark">
<div class="carousel-indicators">
Expand Down
2 changes: 1 addition & 1 deletion discord.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,6 @@
</head>

<body>
<h2 style="text-align: center;"><a href="https://discord.gg/5JChnwaEQd">Click here</a> if you are not redirected automatically.</h2>
<h2 class="text-center"><a href="https://discord.gg/5JChnwaEQd">Click here</a> if you are not redirected automatically.</h2>
</body>
</html>
44 changes: 22 additions & 22 deletions hackathon/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1 class="display-1 fw-bold" style="color: #D59F0F; font-family: 'JetBrains Mon
</div>

<!-- prettier-ignore -->
<div class="atcb" style="display:none; font-family: Sarabun">
<div class="atcb" style="display: none; font-family: Sarabun">
{
"name": "HoosierHacks Hackathon",
"description": "Join us to learn to code and have tons of fun at one of Indiana's largest high school hackathons!",
Expand Down Expand Up @@ -44,7 +44,7 @@ <h1 class="display-1 fw-bold" style="color: #D59F0F; font-family: 'JetBrains Mon

<div class="p-md-5 m-md-3 bg-light rounded-3 border" id="about">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">About</h1>
<h1 class="display-5 fw-bold text-center">About</h1>
<p class="fs-4"> Hoosier Hacks 3.0 is an in-person <b>free-of-cost</b> hackathon run by the Hack Club chapter from West Lafayette Jr./Sr. High School. Any intermediate/high school student in the state of Indiana is welcomed. <b>Absolutely no programming experience is needed.</b> Hoosier Hacks will offer many different workshops covering various topics of computer science. Students may choose to attend any of these workshops. These workshops will aid students with their projects. </p>
<br>
<p class="fs-4"> Near the end of the event, students will present their projects to judges who will rank their projects based on creativity, uniqueness, and practicality. Prizes will be given out to projects that have excelled in their respective category. </p>
Expand All @@ -53,7 +53,7 @@ <h1 class="display-5 fw-bold" style="text-align: center">About</h1>

<div class="p-md-5 m-md-3 bg-light rounded-3 border" id="info">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">Info</h1>
<h1 class="display-5 fw-bold text-center">Info</h1>
<h2>Basic Information</h2>
<table class="table table-light table-bordered">
<tbody>
Expand Down Expand Up @@ -103,7 +103,7 @@ <h3 class="display-8">Is there parking?</h3>
<li class="list-group-item">There is plenty of parking available on site!</li>
</ul>
<br>
<h2 class="display-8" style="text-align: center; color: #000000;">For further questions, please contact <a href="mailto:johnnyshen0630@gmail.com">Johnny Shen</a>.</h2>
<h2 class="display-8 text-center text-black">For further questions, please contact <a href="mailto:johnnyshen0630@gmail.com">Johnny Shen</a>.</h2>

<br>

Expand Down Expand Up @@ -153,7 +153,7 @@ <h2>Logistics</h2>

<div class="p-3 p-md-5 m-md-3 mb-md-4 bg-light rounded-3 border" id="awards">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">Awards</h1>
<h1 class="display-5 fw-bold text-center">Awards</h1>
<p class="fs-4">Hoosier Hacks 3.0 offers a varsity and novice division where students compete for prizes based on the quality of their projects. Awards will be handed out for projects that excel in their respective categories. Students that won can pick any of the following prizes. Up to <b>$20,000</b> of prizes will be available.</p>
<br>
<h2>Possible Awards</h2>
Expand All @@ -180,53 +180,53 @@ <h2>Possible Awards</h2>

<div class="p-3 p-md-5 m-md-3 mb-md-4 bg-light rounded-3 border" id="signup">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">Sign Up Here!</h1>
<p class="fs-4" style="text-align: center">You can use our form link <a href="https://forms.gle/oaoXYnmBSPFcLAW16">here</a> or use this QR Code to share with your friends!</p>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://forms.gle/oaoXYnmBSPFcLAW16&amp;size=256x256" alt="signup" style="display: block; margin-left: auto; margin-right: auto;">
<h1 class="display-5 fw-bold text-center">Sign Up Here!</h1>
<p class="fs-4 text-center">You can use our form link <a href="https://forms.gle/oaoXYnmBSPFcLAW16">here</a> or use this QR Code to share with your friends!</p>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://forms.gle/oaoXYnmBSPFcLAW16&amp;size=256x256" alt="signup" class="d-block mx-auto">
</div>
</div>

<div class="p-3 p-md-5 m-md-3 mb-md-4 bg-light rounded-3 border" id="sponsors">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">Sponsors</h1>
<p class="fs-4" style="text-align: center;">Hoosier Hacks 3.0 thanks all of our sponsors that help make this event possible.</p>
<h1 class="display-5 fw-bold text-center">Sponsors</h1>
<p class="fs-4 text-center">Hoosier Hacks 3.0 thanks all of our sponsors that help make this event possible.</p>
<br>
<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center row-gap-4">
<div class="col my-auto text-center">
<a href="https://sledgehammerinfosystems.com/" target="_blank"><img src="/assets/hackathon/sledgehammer_infosystems_logo.png" alt="Sledgehammer Infosystems Logo" style="width: 100%;"></a>
<a href="https://sledgehammerinfosystems.com/" target="_blank"><img src="/assets/hackathon/sledgehammer_infosystems_logo.png" alt="Sledgehammer Infosystems Logo" class="w-100"></a>
</div>
<div class="col my-auto text-center">
<a href="https://www.hotdropapp.com/" target="_blank"><img src="/assets/hackathon/hotdrop_logo.png" alt="HotDrop Logo" style="width: 100%;"></a>
<a href="https://www.hotdropapp.com/" target="_blank"><img src="/assets/hackathon/hotdrop_logo.png" alt="HotDrop Logo" class="w-100"></a>
</div>
<div class="col my-auto">
<a href="https://www.wolfram.com/" target="_blank"><img src="https://content.wolfram.com/sites/10/2019/04/wolfram-corporate-logo-horz-lg.png" alt="Wolfram Logo" style="width: 100%;"></a>
<a href="https://www.wolfram.com/" target="_blank"><img src="https://content.wolfram.com/sites/10/2019/04/wolfram-corporate-logo-horz-lg.png" alt="Wolfram Logo" class="w-100"></a>
</div>
<div class="col my-auto">
<a href="https://www.taskade.com/" target="_blank"><img src="/assets/hackathon/taskade_logo.png" alt="Taskade Logo" style="width: 100%;"></a>
<a href="https://www.taskade.com/" target="_blank"><img src="/assets/hackathon/taskade_logo.png" alt="Taskade Logo" class="w-100"></a>
</div>
<div class="col my-auto">
<a href="https://www.interviewcake.com/" target="_blank"><img src="/assets/hackathon/interview_cake_logo.png" alt="Interview Cake Logo" style="width: 100%;"></a>
<a href="https://www.interviewcake.com/" target="_blank"><img src="/assets/hackathon/interview_cake_logo.png" alt="Interview Cake Logo" class="w-100"></a>
</div>
<div class="col my-auto">
<a href="https://artofproblemsolving.com/" target="_blank"><img src="/assets/hackathon/aops_logo.png" alt="AoPS Logo" style="width: 100%;"></a>
<a href="https://artofproblemsolving.com/" target="_blank"><img src="/assets/hackathon/aops_logo.png" alt="AoPS Logo" class="w-100"></a>
</div>
<div class="col my-auto text-center">
<a href="https://gen.xyz/" target="_blank"><img src="/assets/hackathon/xyz_logo.png" alt=".xyz Logo" style="width: 65%;"></a>
<a href="https://gen.xyz/" target="_blank"><img src="/assets/hackathon/xyz_logo.png" alt=".xyz Logo" class="w-65"></a>
</div>
<div class="col my-auto text-center">
<a href="https://nostarch.com/" target="_blank"><img src="/assets/hackathon/NSP_logo.png" alt="No Starch Press Logo" style="width: 50%;"></a>
<a href="https://nostarch.com/" target="_blank"><img src="/assets/hackathon/NSP_logo.png" alt="No Starch Press Logo" class="w-50"></a>
</div>
<div class="col my-auto">
<a href="https://certopus.com/" target="_blank"><img src="/assets/hackathon/certopus_logo.png" alt="Certopus Logo" style="width: 100%;"></a>
<a href="https://certopus.com/" target="_blank"><img src="/assets/hackathon/certopus_logo.png" alt="Certopus Logo" class="w-100"></a>
</div>
<div class="col my-auto text-center">
<a href="https://jspcs.org/" target="_blank"><img src="/assets/hackathon/jspcs_logo.jpg" alt="JSPCs Logo" style="width: 50%;"></a>
<a href="https://jspcs.org/" target="_blank"><img src="/assets/hackathon/jspcs_logo.jpg" alt="JSPCs Logo" class="w-50"></a>
</div>
</div>
<h1 class="display-5 fw-bold" style="text-align: center; margin-top: 50px; margin-bottom: 50px;">Partners</h1>
<h1 class="display-5 fw-bold my-5 text-center">Partners</h1>
<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center row-gap-4">
<div class="col my-auto">
<a href="https://www.girlscoutsindiana.org/" target="_blank"><img src="/assets/hackathon/girl_scouts_logo.png" alt="Girl Scouts Logo" style="width: 100%;"></a>
<a href="https://www.girlscoutsindiana.org/" target="_blank"><img src="/assets/hackathon/girl_scouts_logo.png" alt="Girl Scouts Logo" class="w-100"></a>
</div>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions hackathon/workshops.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
---
<div class="p-md-5 m-md-3 bg-light rounded-3 border">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold" style="text-align: center">Workshops</h1>
<h1 class="display-5 fw-bold text-center">Workshops</h1>
<div class="card m-5">
<div class="card-title" style="margin: 15px;">
<div class="card-title m-3">
<h2>3D Printing</h2>
</div>
<div class="card-body fluid">
Expand All @@ -16,19 +16,19 @@ <h2>3D Printing</h2>
<p class="fs-4">We are collaborating with our school's 3D printing club to present a workshop where you can create a 3D model and watch it come to life on a 3D printer.</p>
</div>
<div class="col-md">
<img src="/assets/hackathon/3d_printer.png" alt="3d Printer" style="max-width: 100%;" class="py-2">
<img src="/assets/hackathon/3d_printer.png" alt="3d Printer" class="py-2 mw-100">
</div>
</div>
</div>
</div>
<div class="card m-5">
<div class="card-title" style="margin: 15px;">
<div class="card-title m-3">
<h2>Machine Learning</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md">
<img src="/assets/hackathon/machine_learning.png" alt="Machine Learning" style="max-width: 100%;" class="py-2">
<img src="/assets/hackathon/machine_learning.png" alt="Machine Learning" class="py-2 mw-100">
</div>
<div class="col-md-8">
<p class="fs-4">Learn how to train a machine learning model with no code or math required! Machine learning has become increasingly popular in the last few years and the skills learned in this workshop can be transferred to real models.</p>
Expand All @@ -37,7 +37,7 @@ <h2>Machine Learning</h2>
</div>
</div>
<div class="card m-5">
<div class="card-title" style="margin: 15px;">
<div class="card-title m-3">
<h2>Python</h2>
</div>
<div class="card-body">
Expand All @@ -46,19 +46,19 @@ <h2>Python</h2>
<p class="fs-4">This workshop is designed for new programmers to learn the syntax of python and write their first programs. The skills learned in this workshop can be used to create a project at this hackathon, but in 21st century, knowing how to code is a basic skill that everyone should learn and this workshop will allow you to start your journey into becoming a programmer.</p>
</div>
<div class="col-md">
<img src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/community/logos/python-logo-only.png" alt="Python" style="max-width: 100%;" class="py-2">
<img src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/community/logos/python-logo-only.png" alt="Python" class="py-2 mw-100">
</div>
</div>
</div>
</div>
<div class="card m-5">
<div class="card-title" style="margin: 15px;">
<div class="card-title m-3">
<h2>Web Development</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md">
<img src="/assets/hackathon/web_dev.png" alt="Web Development" style="max-width: 100%;" class="py-2">
<img src="/assets/hackathon/web_dev.png" alt="Web Development" class="py-2 mw-100">
</div>
<div class="col-md-8">
<p class="fs-4">This workshop will teach you all about creating your own website and how to customize it just the way you want. It is very popular for people to have websites today, and knowing how to design your own will save you money and could even make you money if you decide to design websites for other people.</p>
Expand All @@ -67,13 +67,13 @@ <h2>Web Development</h2>
</div>
</div>
<div class="card m-5">
<div class="card-title" style="margin: 15px;">
<div class="card-title m-3">
<h2>Scratch</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md">
<img src="https://en.scratch-wiki.info/w/images/Scratch_logo.svg" alt="Scratch" style="max-width: 100%;" class="py-2">
<img src="https://en.scratch-wiki.info/w/images/Scratch_logo.svg" alt="Scratch" class="py-2 mw-100">
</div>
<div class="col-md-8">
<p class="fs-4">Learn and use the fundamentals of block-programming to create a fun and engaging game in Scratch! Extra challenges that require the implementation of more complex logic are also included in the workshop.</p>
Expand Down
6 changes: 3 additions & 3 deletions js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@ input.addEventListener("input", () => {
tags += `<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${tags_list[j]["name"]}/${tags_list[j]["name"]}-${tags_list[j]["type"]}.svg" draggable="false" oncontextmenu="return false;" width="32" height="32">\n`;
}
results_div.innerHTML += `
<div class="col-sm-4" style="margin-bottom: 15px">
<div class="col-sm-4 mb-3">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">${data[ref]["title"]}</h5>
<p class="text-secondary" style="margin-right: 10px;">${data[ref]["date"]}</p>
<div class="card-subtitle" style="margin-bottom: 5px;">${tags}</div>
<p class="text-secondary mr-1">${data[ref]["date"]}</p>
<div class="card-subtitle mb-1">${tags}</div>
<p class="card-text overflow-text">${data[ref]["description"]}</p>
<a href="${data[ref]["url"]}" class="btn btn-primary mt-auto me-auto">Learn More</a>
</div>
Expand Down
Loading

0 comments on commit 2a39810

Please sign in to comment.