Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make site more responsive #64

Merged
merged 3 commits into from
Aug 30, 2024
Merged

Make site more responsive #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf69eb2
make site more responsive
leroymusa Aug 30, 2024
b823f3c
adjust embedded yt video
leroymusa Aug 30, 2024
661c666
add styles in _layouts/
leroymusa Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
293 changes: 165 additions & 128 deletions website/_layouts/industry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,193 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />

<head>
<title>{{ page.title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<meta http-equiv="X-Content-Type-Options" content="nosniff" /> -->
<!-- <meta http-equiv="X-Frame-Options" content="SAMEORIGIN" /> -->

<link rel="stylesheet" href="assets/css/main.min.css" />
<noscript
><link rel="stylesheet" href="assets/css/noscript.min.css"
/></noscript>
<link rel="shortcut icon" href="assets/img/logo-short.ico" />
<style>
<!-- <meta http-equiv="X-Frame-Options" content="SAMEORIGIN" /> -->

<link rel="stylesheet" href="assets/css/main.min.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.min.css" />
</noscript>
<link rel="shortcut icon" href="assets/img/logo-short.ico" />
<style>
.clubs {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}

.clubs img {
max-width: 25%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
}

.in_text {
padding: 3%;
padding-top: 0;
}

.in_text_header {
padding-top: 20px;
}

body {
font-family: Arial, sans-serif;
max-width: 100%;
margin: 0 auto;
text-align: center;
}

.partner {
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 10px;
padding: 0 3%;
}

.partner img {
max-width: 14%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
}

.img_links {
max-width: 14%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
}

.img_with_link {
min-width: 100%;
object-fit: contain;
}

.button {
background-color: #111827;
border: 1px solid transparent;
border-radius: 0.75rem;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
flex: 0 0 auto;
font-family: "Inter var", ui-sans-serif, system-ui, -apple-system,
system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 1.2rem;
text-align: center;
text-decoration: none #6b7280 solid;

touch-action: manipulation;
width: auto;
}

/* Adjustments for mobile screens */
@media (max-width: 768px) {
.clubs {
display: flex;
justify-content: flex-start;
flex-direction: column;
/* Stack images vertically on smaller screens */
align-items: center;
gap: 10px;
}
.clubs img {
max-width: 25%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
}
.in_text {
padding: 3%;
padding-top: 0;
}
.in_text_header {
padding-top: 20px;

.button {
padding: 0.75rem 1.5rem;
}
body {
font-family: Arial, sans-serif;

.clubs img {
max-width: 100%;
margin: 0 auto;
text-align: center;
/* Images take full width on mobile */
}

.partner {
display: flex;
justify-content: space-evenly;
flex-direction: column;
/* Stack images vertically on smaller screens */
align-items: center;
gap: 10px;
padding: 0 3%;
}

.partner img {
max-width: 14%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
max-width: 100%;
/* Images take full width on mobile */
}

.img_links {
max-width: 14%;
height: 150px;
object-fit: contain;
flex: 1 1 auto;
max-width: 100%;
}

.img_with_link {
min-width: 100%;
object-fit: contain;
}
.button {
background-color: #111827;
border: 1px solid transparent;
border-radius: 0.75rem;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
flex: 0 0 auto;
font-family: "Inter var", ui-sans-serif, system-ui, -apple-system,
system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 1.2rem;
text-align: center;
text-decoration: none #6b7280 solid;

touch-action: manipulation;
width: auto;
}
}

/* Adjustments for mobile screens */
@media (max-width: 768px) {
.clubs {
flex-direction: column; /* Stack images vertically on smaller screens */
align-items: center;
}
.button {
padding: 0.75rem 1.5rem;
}
.clubs img {
max-width: 100%; /* Images take full width on mobile */
}
.partner {
flex-direction: column; /* Stack images vertically on smaller screens */
align-items: center;
}

.partner img {
max-width: 100%; /* Images take full width on mobile */
}
.img_links {
max-width: 100%;
}
.img_with_link {
min-width: 100%;
}
}
#header #logo {
position: absolute;
width: 1.75em;
height: auto;
display: flex;
}

#header #logo {
position: absolute;
width: 1.75em;
height: auto;
display: flex;
}
.poster-container {
text-align: center;
}
.poster-container {
text-align: center;
}

.poster-container img {
max-width: 100%;
height: auto;
margin-top: 2em;
}
.poster-container img {
max-width: 100%;
height: auto;
margin-top: 2em;
}

h2 {
font-size: 28px;
margin-bottom: 20px;
}
h2 {
font-size: 28px;
margin-bottom: 20px;
}

p {
font-size: 16px;
line-height: 1.6;
text-align: justify;
}

p {
font-size: 16px;
line-height: 1.6;
text-align: justify;
.banner img {
width: 100%;
max-height: 400px;
object-fit: cover;
margin-top: 20px;
}

.button {
display: block;
width: fit-content;
margin: 20px auto;
}

@media (max-width: 768px) {
.video-wrapper {
max-width: 100%;
}

.banner img {
width: 100%;
height: auto;
max-height: 250px;
}
</style>
</head>
<body class="is-preload">
{% include header.html %} {{ content }} {% include footer.html %} {% include
scripts.html %}
</body>
</html>
}
</style>
</head>

<body class="is-preload">
{% include header.html %} {{ content }} {% include footer.html %} {% include
scripts.html %}
</body>

</html>
Loading
Loading