Skip to content

Commit

Permalink
Add the agenda (#28)
Browse files Browse the repository at this point in the history 
* fix: add Code Connect section

* add the first sponsor

* added asbrucon sponsor

* wording fix

* html comment removed.

* fix for missing logo in Safari

* fix for missing logo in Safari

* Added agilita sponsor.

* add more sponsors

* add LinkedIn links for Rizind and Aarini

* add a new sponsor and remove propose topic link

* add registration message

* Introduced tito widget section

- removed early bird ticket section.

* updated asbrucon sponsor logo to latest version.

* added rev-trac as a sponsor

* added missing dark mode logo to rev-trac

* open registration

* join waitlist button update

* add Gambit sponsor

* add the agenda

* css and html for the latest header

---------

Co-authored-by: Fabian Tempel <fabian.tempel@sap.com>
Co-authored-by: Fabian Tempel <fab.tem@gmail.com>
  • Loading branch information
@InnaAtanasova @trilodge
3 people authored Apr 17, 2024
1 parent 0ee825a commit d72d94d
Show file tree
Hide file tree
Showing 11 changed files with 1,757 additions and 568 deletions.
50 changes: 48 additions & 2 deletions docs/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
--sucess-color: #30914c;
--logo-color: #000000;
--code-connect-color: #3B4673;
--backdrop-color: rgba(0, 0, 0, 0.4);
--modala-shadow: .25rem .25rem 1.5rem rgba(0,0,0,.25);

--type-0: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
--type-1: clamp(1.2rem, 1.0964rem + 0.5179vw, 1.5625rem);
Expand Down Expand Up @@ -610,7 +612,12 @@ main {
}

.recap-site-header .recap-container b {
color: var(--brand-color);
color: var(--brand-color);
}

.recap-site-header .recap-container div {
gap: 2rem;
display: flex;
}

.recap-site-header p {
Expand Down Expand Up @@ -638,6 +645,43 @@ main {
height: clamp(6rem, 15vw, 15rem)
}

.recap-agenda-annonce a {
font-weight: 600;
display: inline-flex;
color: var(--brand-color-alt);
}

.recap-agenda-annonce a:is(:hover, :focus) {
color: var(--brand-color);
outline: none;
}

.recap-sponsors-header {
display: flex;
align-items: center;
flex-direction: column;
margin-block-start: 3rem;
}

.recap-sponsors-header-overview-list {
gap: 3rem;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}

.recap-sponsors-header-overview-list .recap-sponsors-logo {
width: 7rem;
max-height: 3rem;
min-height: 2.5rem;
}

.recap-sponsors-header-overview-list .recap-sponsors-logo:is(picture) {
margin-block-start: 1rem;
margin-block-end: 0;
}

@media only screen and (min-width: 768px) {
.recap-site-header .recap-wrap {
flex-direction: row-reverse;
Expand Down Expand Up @@ -749,6 +793,8 @@ footer a:is(:hover, :focus) svg {
--text-color: #fff;
--code-connect-color: var(--brand-color-alt);
--logo-color: #fff;
--backdrop-color: rgba(36, 36, 36, 0.8);
--modala-shadow: .1rem .1rem 1rem var(--brand-color-alt);
}

.recap-site-header {
Expand All @@ -772,4 +818,4 @@ footer a:is(:hover, :focus) svg {
--js-color-1: var(--logo-color);
--js-color-2: var(--logo-color);
}
}
}
4 changes: 3 additions & 1 deletion docs/css/modules.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url("modules/_sponsors.css");
@import url("modules/_code-connect.css");
@import url("modules/_tito.css");
@import url("modules/_tito.css");
@import url("modules/_agenda.css");
@import url("modules/_agendaModal.css");
220 changes: 220 additions & 0 deletions docs/css/modules/_agenda.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
.recap-agenda-filter {
gap: 2rem;
display: flex;
flex-wrap: wrap;
word-break: none;
white-space: nowrap;
align-items: flex-end;
margin-block-start: 3rem;
}

.recap-agenda-filter-container {
flex: 1;
gap: 2rem;
display: flex;
flex-wrap: wrap;
}

.recap-agenda-filter fieldset {
border: none;
display: flex;
margin-inline: 0;
position: relative;
border: 1px solid var(--brand-color);
}

.recap-agenda-filter label {
cursor: pointer;
}

.recap-agenda-filter fieldset > div {
font-weight: 600;
padding-inline: 0.5rem;
padding-block: 0.35rem;
}

.recap-agenda-filter fieldset > div:has(input:checked) {
color: white;
background-image: linear-gradient(45deg, var(--brand-color-alt), var(--brand-color));;
}

.recap-agenda-filter fieldset > div:not(:last-child) {
border-inline-end: 1px solid var(--brand-color);
}

.recap-agenda-filter input {
width: 0;
height: 0;
display: none;
}

.recap-agenda {
margin: 0;
padding: 0;
list-style-type: none;
}

.recap-agenda-slot-time {
top: -5rem;
left: 50%;
position: absolute;
font-weight: 900;
text-align: center;
font-size: var(--type-4);
transform: translateX(-50%);
background-image: linear-gradient(35deg, var(--brand-color), var(--brand-color-alt));
background-clip: text;
color: transparent;
}

.recap-agenda-slot-container {
height: 100%;
display: flex;
flex-direction: column;
margin-block-start: 9rem;
text-align: start;
position: relative;
}

/* Presentation section */
.recap-agenda-slot-talk {
width: 100%;
}

.recap-agenda-slot-info {
gap: 1.5rem;
display: flex;
font-weight: 600;
margin-block-end: 1rem;
}

.recap-agenda-slot-info span {
text-transform: uppercase;
}

.recap-agenda-slot-talk h3 {
font-size: var(--type-2);
}

.recap-agenda-slot-separator {
width: 0;
min-height: 0;
position: initial;
background: transparent;
}

/* Speakers section */
.recap-agenda-slot-speakers {
width: 100%;
display: flex;
flex-direction: column;
margin-block-start: 2rem;
}

.recap-agenda-slot-speaker {
gap: 1rem;
display: flex;
align-items: center;
margin-block-end: 2rem;
}

.recap-agenda-slot-speaker div {
gap: 0.25rem;
display: flex;
flex-direction: column;
}

.recap-agenda-slot-speaker-name {
font-weight: 600;
}

.recap-agenda-slot-speaker-name + span {
font-size: 1rem;
}

.recap-agenda-slot-speaker button {
margin: 0;
padding: 0;
min-width: 4.5rem;
min-height: 4.5rem;
max-width: 4.5rem;
max-height: 4.5rem;
border: none;
cursor: pointer;
overflow: hidden;
border-radius: 10rem;
background: transparent;
}

.recap-agenda-slot-speaker button:is(:hover) {
box-shadow: 0 0 3px 3px var(--brand-color);
}

.recap-agenda-slot-speaker button:is(:focus) {
outline: 0.25rem solid var(--brand-color-alt);
}

.recap-agenda-slot-speaker img {
min-width: 4.5rem;
min-height: 4.5rem;
max-width: 4.5rem;
max-height: 4.5rem;
border-radius: 10rem;
transition: all .2s ease-in-out;
}

.recap-agenda-slot-materials ul {
gap: 1.5rem;
display: flex;
}

.recap-agenda-slot-materials a {
gap: 0.5rem;
text-decoration: none;
padding-block: 0.1rem;
padding-inline: 0.25rem;
}

.recap-agenda-slot-materials a:is(:hover) {
color: var(--brand-color-alt);
}

.recap-agenda-slot-materials a:is(:focus) {
outline-color: var(--brand-color-alt);
}

@media only screen and (min-width: 768px) {
.recap-agenda-slot-container {
gap: 2rem;
height: 100%;
display: flex;
flex-direction: row;
margin-block-start: 9rem;
}

.recap-agenda-slot-talk {
width: 60%;
}

.recap-agenda-slot-speakers {
width: 48%;
display: flex;
flex-direction: column;
margin-block-start: 2rem;
justify-content: space-between;
}

.recap-agenda-slot-separator {
width: 0.0625rem;
min-height: 100%;
position: relative;
background: var(--brand-color);
}

.recap-agenda-slot-time {
top: -5rem;
font-weight: 900;
text-align: center;
transform: translateX(-50%);
}
}
Loading

0 comments on commit d72d94d

Please sign in to comment.