Skip to content

お問合せ欄を作成 #5

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

Merged
merged 2 commits into from
Jul 15, 2025
+34 −676
Merged

お問合せ欄を作成 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa9818a
お問合せ欄を作成
Fukusan64 Jul 14, 2025
3826fa6
scopeを使わないようにする
Fukusan64 Jul 15, 2025
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
2 changes: 1 addition & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
# and they will be accessible like {{ site.your_variable }}.

timezone: Asia/Tokyo
year: 2024
year: 2025
title: DojoCon Japan
subtitle: "Inspire Next 〜好奇心に火をつけよう〜"
description: >-
Expand Down
9 changes: 9 additions & 0 deletions _includes/top/sections/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<section id="contact">
<div class="d-flex flex-column align-items-center text-center">
<h2 class="header-letter-spacing">お問い合わせ</h2>
<p class="fs-4 fw-bold lh-base mb-4">CONTACT</p>
<p class="fs-6 fw-semibold letter-spacing lh-lg mb-5">DojoCon Japan {{ site.year }} についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>

<a href="{{ site.contact }}" class="btn-lg" target="_blank" rel="noopener">お問い合わせフォーム</a>
</div>
</section>
363 changes: 23 additions & 340 deletions _sass/pages/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,347 +1,30 @@
@use '../global/variables' as *;

/* stylesheet for `index.md` */
.top {
position: relative;
&-information {
height: 60vh;
height: 60dvh;
min-height: 600px;
text-align: left;
color: $white;
@media screen and (max-width: 992px) {
height: 75vh;
height: 75dvh;
}

&_date {
font-size: 48px;
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
@media screen and (max-width: 992px) {
font-size: 22px;
}
}
&_leadcopy {
font-size: 32px;
font-weight: bold;
@media screen and (max-width: 992px) {
font-size: 20px;
}
}
&_theme {
font-size: 150px;
font-family: "Poppins", sans-serif;
font-weight: 900;
font-style: normal;
line-height: 1.4;
@media screen and (max-width: 992px) {
font-size: 56px;
}
}
#contact {
.header-letter-spacing {
letter-spacing: 0.2em;
}
&-videowrap {
position: absolute;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
.video {
/*天地中央配置*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}
.letter-spacing {
letter-spacing: 0.17em;
}
}

section#contact {
color: #ffffff;
}

div#about {
h2 {
color: $secondary-color;
.btn-lg {
display: block;
box-sizing: border-box;
width: 50%;
min-width: fit-content;
padding: 0.8rem 1.5rem;
font-size: 1.5rem;
font-weight: bold;
text-transform: uppercase;
}

.wrapper-block {
display: grid;
grid-template-rows: auto auto auto;

color: #ffffff;
background: linear-gradient(to right, white 25%, white 25%, $secondary-color 25%, $secondary-color 100%);

h3 {
font-size: 1.65em;
line-height: 1em;
}

.description {
p {
font-size: 0.85em;
line-height: 1.5em;
}
}

img {
max-width: 50vw;
}

section.first-section {
grid-row: 1;

display: grid;
grid-template-columns: 1fr 3fr 2fr 2fr;
column-gap: 20px;

img {
grid-column: 2;
width: 100%;
height: auto;
}

.description {
grid-column: 3;
}
}

section.second-section {
grid-row: 2;

display: grid;
grid-template-columns: 2fr 3fr 1fr 2fr;
column-gap: 20px;

.description {
grid-column: 2;
}

img {
grid-column: 3;
width: 100%;
height: auto;
border-radius: 10px;
}
}

section.third-section {
grid-row: 3;

display: grid;
grid-template-columns: 1fr 2fr 1fr;
column-gap: 20px;

.description {
grid-column: 2;
}
}
}
}

.map {
margin-bottom: 30px;
}





// タブレット
@media screen and (max-width: 800px) {
#colored_zone {
.title-welcome {
font-size: 6vw;
grid-column: 2 / span 10;
}
.dojocon-image {
grid-column: 2 / span 12;
img {
width: 80%;
margin-left: -5%
}
}
.about-dojocon {
grid-column: 2 / span 12;
padding-left: 30px;
padding-right: 30px;
}

.about-coderdojo {
grid-column: 2 / span 7;
padding-right: 0;
}
.coderdojo-logo {
grid-column: 9 / span 4;
text-align: center;
img {
width: 60%;
}
}
.about-dojocon-this-year {
grid-column: 2 / span 12;
}
color: #0e0e0e;
background-color: #efefef;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 1.5px 0 #fff inset;
border: none;
transition: background-color 0.2s ease-in-out;
}
}

@media screen and (max-width: 640px) {
.ignore-pc {
display: inline;
}
.ignore-sp {
display: none;
}


#colored_zone {
.about-dojocon {
padding: 60px 30px 60px 30px;
.short {
font-size: 1.5em;
}
}
.coderdojo-logo {
grid-column: 2 / span 12;
text-align: center;
order: 5;
padding-top: 0;
padding-bottom: 60px;
img {
width: 60%;
}
}
.about-coderdojo {
grid-column: 2 / span 12;
padding: 0 30px;
order: 6;
.short {
font-size: 1.5em;
}
}
.about-dojocon-this-year {
grid-column: 2 / span 12;
padding: 60px 30px 60px 30px;
.short {
font-size: 1.5em;
}
}
}
}


#sponsors_index {
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
margin: 2em auto;
max-width: 1000px;

.sponsors-container {
margin-top: 70px;
margin-bottom: 70px;
h3 { font-weight: 700; }
.sponsor-logo-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;

img.sponsor-logo {
transition: 0.5s;
object-fit: contain;

&:hover {
transform: scale(1.1);
opacity: 0.8;
}
}

#platinum-sponsors > a {
img.sponsor-logo {
margin: 0.5em 0;
max-width: 85%;
}
}

#gold-sponsors > a {
img.sponsor-logo {
margin: 0.2em 0;
max-width: 60%;

@media screen and (max-width: 640px) {
max-width: 65%;
}
}
}

#silver-sponsors > a {
img.sponsor-logo {
margin: 0 1em;
max-width: 40%;

@media screen and (max-width: 640px) {
margin: 0 0.6em;
max-width: 42%;
}
}
}

#bronze-sponsors > a {
img.sponsor-logo {
margin: 0.8em 0.5em;
max-width: 30%;

@media screen and (max-width: 640px) {
margin: 0.4em 1em;
max-width: 33%;
}
}
}

#in-kind-sponsors {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;

div {
margin: 0.8em 0.5em;
max-width: 30%;

img.sponsor-logo {
max-width: 90%;
}
}
}

#individual-sponsors {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;

div.individual-sponsor-name {
margin: 1em 2em;
font-size: 1.2rem;
a {
&:hover {
opacity: 0.8;
color: var(--gray-dark);
text-decoration: none;
}
}
}
}
}
.btn-lg:hover {
background-color: #e0e0e0;
color: #0e0e0e;
}
}
}
Loading