etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

feat(geocaching): add initial page for 2023

Browse source 
feat(sliding_gallery): add horizontal scrolling gallery component
This commit is contained in:
Matthieu Bessat 2023-09-15 14:59:48 +02:00
parent b779f59e70
commit 9a3b414e76
13 changed files with 173 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/images/icons/external.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"><path d="M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z"/><path d="M19 1h-8l3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 264 B

1
assets/images/icons/wikipedia_globe.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 164 KiB

38
assets/sass/general.scss
View file

@ -93,3 +93,41 @@ img {
grid-template-columns: 1fr 1fr;
}
.btn {
}
.wikipedia-btn {
display: inline-flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
max-height: 10rem;
padding: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.1);
// background: linear-gradient(to right, rgb(17, 17, 17), rgb(255, 255, 255));
background: rgba(255, 255, 255, 1);
color: black;
border-radius: 5px;
box-shadow: 0 0 .3rem rgba(0, 0, 0, 0.5);
.btn__icon {
width: 4rem;
margin-right: 2rem;
}
}
.wikipedia-icon {
aspect-ratio: 1;
}
.btn__icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon_inline {
width: 1rem;
height: 1rem;
}

1
assets/sass/main.scss
View file

@ -41,4 +41,5 @@ $accent-dark: #A56F09;
// components
@import 'tags.scss';
@import 'card.scss';
@import 'sliding_gallery.scss';

29
assets/sass/sliding_gallery.scss Normal file
View file

@ -0,0 +1,29 @@
.sliding_gallery {
display: flex;
flex-direction: row;
overflow-x: auto;
scrollbar-width: auto !important;
scrollbar-color: $accent rgba(0, 0, 0, 0.1) !important;
margin: 2rem 0;
figure {
min-width: 30rem;
}
&::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
&::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
&::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
}