Skip to content

Commit

Permalink
Merge branch 'fix/responsive-styles' into feature/speakers-12
Browse files Browse the repository at this point in the history
  • Loading branch information
@pjmolina
pjmolina committed Sep 5, 2024
2 parents 29ccde6 + 8f122e4 commit 5fab41c
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 90 deletions.
12 changes: 12 additions & 0 deletions 2024/speakers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@
height: 1.5rem;
}

.speaker a.social:hover img {
filter: grayscale(0%) sepia(100%) hue-rotate(-30deg) saturate(2)
brightness(1.2);
transition: filter 0.3s ease;
}

h2 {
text-align: left;
font-size: 1.3rem;
Expand All @@ -67,6 +73,12 @@
.footer {
margin-top: 10rem;
}

@media (max-width: 480px) {
.speaker {
flex-direction: column;
}
}
</style>
</head>
<body>
Expand Down
99 changes: 64 additions & 35 deletions assets/2024/seville.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ ul {
}
.logo-frame {
background-color: #f0f0f0;
height: 4rem;
height: 3rem;
margin: 2rem;
padding: 0.7rem;
}
Expand Down Expand Up @@ -133,6 +133,11 @@ h3 {
text-decoration: none;
}

a.btn:hover span {
color: var(--accent-color);
transition: all 0.3s ease;
}

.cta {
background-color: var(--accent-color);
color: #ffffff;
Expand Down Expand Up @@ -165,7 +170,8 @@ a:visited {
color: var(--main-color);
}
a:hover {
color: #fff;
color: var(--accent-color);
transition: all 0.3s ease;
}
.ml2 {
margin-left: 3rem;
Expand Down Expand Up @@ -326,7 +332,7 @@ iframe {

@media (max-width: 900px) {
.flex {
flex-direction: column;
display: block;
}

.menu-icon {
Expand Down Expand Up @@ -663,51 +669,74 @@ table.schedule tr.break td:nth-child(2) {
height: 12rem;
}

table.inscription {
border-spacing: 0px;
margin: 2rem;
padding: 0px;
text-align: center;
.inscription {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 2fr 2fr;
margin: 2rem 0;
width: 100%;
}
.inscription th.col1 {
height: 4rem;
margin: 0;
width: 15rem;
.inscription .col1 {
align-items: flex-end;
display: flex;
flex-direction: column;
margin-right: 1rem;
}
.inscription th.col2,
.inscription td.col2 {
background-color: #5f6875;
height: 4rem;
margin: 0;
width: 25rem;

.inscription .col1 span,
.col4 span {
height: 3.625rem;
}
.inscription th.col3,
.inscription td.col3 {
background-color: #4c535e;
height: 4rem;
margin: 0;
width: 25rem;

.inscription .col2,
.col3 {
background-color: #5f6875;
padding: 0 1rem;
text-align: center;
}

table.inscription th,
table.inscription td {
border: none;
margin: 0;
padding: 0;
.inscription .col1 p:nth-child(3),
.col2 p:nth-child(3),
.col3 p:nth-child(3),
.col4 p:nth-child(3) {
padding-top: 2rem;
}

table.inscription td {
margin: 0;
padding: 1rem;
text-align: center;
.inscription p {
height: 5rem;
line-height: 1.1;
}

.big {
font-size: 1.5rem;
font-weight: bold;
}
ol.inscription {

.col4 {
display: none;
}

ol.instructions {
display: block;
margin-bottom: 3rem;
margin-left: 3rem;
padding-left: 3rem;
}

@media (max-width: 768px) {
.inscription {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 3fr;
margin: 2rem 0;
width: 100%;
}

.col4 {
align-items: flex-end;
display: flex;
flex-direction: column;
margin-right: 1rem;
}
}

.session-details {
Expand Down
102 changes: 47 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ <h2 class="title-m">Collaborators</h2>
href="https://espacial.sevilla.org/en/"
alt="Sevilla Ariane Citie 2024"
><img
class="logo"
class="logo2"
src="assets/2024/sponsors/PC-Ariane-Sevilla-white.png"
/></a>
<a href="https://www.sevilla.org/" alt="Seville Cityhall"
Expand Down Expand Up @@ -196,56 +196,50 @@ <h2>Location</h2>
the event is covered by assistants, speakers via inscriptions &
sponsors.
</p>
<table class="inscription">
<thead>
<tr>
<th class="col1"></th>
<th class="col2">Early Bird Ticket</th>
<th class="sep"></th>
<th class="col3">Regular Ticket</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">When:</td>
<td class="col2">
from August 26<sup>th</sup><br />
till September 15<sup>th</sup>
</td>
<td class="sep"></td>
<td class="col3">
from September 16<sup>th</sup><br />
till October 4<sup>th</sup> <br />(or complete full capacity)
</td>
</tr>
<tr>
<td class="col1">Price:</td>
<td class="col2 big">100 EUR<sup>*</sup></td>
<td class="sep"></td>
<td class="col3 big">125 EUR<sup>*</sup></td>
</tr>
<tr>
<td class="col1">Includes:</td>
<td class="col2">
<ul>
<li>Pass for all sessions</li>
<li>Coffee breaks & lunches</li>
<li>Social Dinner</li>
<li>Guided City Tour</li>
</ul>
</td>
<td class="sep"></td>
<td class="col3">
<ul>
<li>Pass for all sessions</li>
<li>Coffee breaks & lunches</li>
<li>Social Dinner</li>
<li>Guided City Tour</li>
</ul>
</td>
</tr>
</tbody>
</table>

</table>
<div class="inscription">
<div class="col1">
<span></span>
<p>When:</p>
<p>Price:</p>
<p>Includes:</p>
</div>
<div class="col2">
<h3>Early Bird Ticket</h3>
<p>
from August 26<sup>th</sup><br />
till September 15<sup>th</sup>
</p>
<p class="big">100 EUR<sup>*</sup></p>
<ul>
<li>Pass for all sessions</li>
<li>Coffee breaks & lunches</li>
<li>Social Dinner</li>
<li>Guided City Tour</li>
</ul>
</div>
<div class="col4">
<span></span>
<p>When:</p>
<p>Price:</p>
<p>Includes:</p>
</div>
<div class="col3">
<h3>Regular Ticket</h3>
<p>
from September 16<sup>th</sup><br />
till October 4<sup>th</sup> <br />(or complete full capacity)
</p>
<p class="big">125 EUR<sup>*</sup></p>
<ul>
<li>Pass for all sessions</li>
<li>Coffee breaks & lunches</li>
<li>Social Dinner</li>
<li>Guided City Tour</li>
</ul>
</div>
</div>

<p>* Applicable taxes (VAT) incluided.</p>
<p>
Expand All @@ -254,7 +248,7 @@ <h2>Location</h2>
</p>

<h3>How to get inscribed:</h3>
<ol class="inscription">
<ol class="instructions">
<li>
Complete the inscription form per attendee with the button below. If
you need it, ask for an invoice providing your tax data.
Expand Down Expand Up @@ -293,9 +287,7 @@ <h2>Important Dates</h2>
<li><strong>2024-10-[17..19]</strong>: LangDev’24</li>
</ul>

<a name="cfp">
<h2>Call for Presentations</h2>
</a>
<h2>Call for Presentations</h2>

<p>
<em>From: June 6<sup>th</sup> till July 12<sup>th</sup> (closed).</em>
Expand Down

0 comments on commit 5fab41c

Please sign in to comment.