You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
709 lines
21 KiB
709 lines
21 KiB
<template>
|
|
<div>
|
|
<div class="sidebar-buttons">
|
|
<!-- {{ $cookies.get('email') }}
|
|
{{ userEmail }} -->
|
|
<button
|
|
class="btn btn--primary"
|
|
v-if="isSidebarVisible && userEmail"
|
|
@click="logout"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
|
|
<path d="M7 12h14l-3 -3m0 6l3 -3" />
|
|
</svg>
|
|
logout
|
|
</button>
|
|
<a
|
|
:href="$BASE_URL() + '/login'"
|
|
class="btn btn--primary"
|
|
v-if="isSidebarVisible && !userEmail"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-login" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
|
|
<path d="M20 12h-13l3 -3m0 6l-3 -3" />
|
|
</svg>
|
|
login
|
|
</a>
|
|
<button class="btn btn--primary" @click="showSidebar">
|
|
<svg
|
|
v-if="!isSidebarVisible"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-user-circle"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<circle cx="12" cy="12" r="9" />
|
|
<circle cx="12" cy="10" r="3" />
|
|
<path
|
|
d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-if="!isSidebarVisible"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-menu"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="4" y1="8" x2="20" y2="8" />
|
|
<line x1="4" y1="16" x2="20" y2="16" />
|
|
</svg>
|
|
<svg
|
|
v-if="isSidebarVisible"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-arrow-bar-to-right"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<line x1="14" y1="12" x2="4" y2="12" />
|
|
<line x1="14" y1="12" x2="10" y2="16" />
|
|
<line x1="14" y1="12" x2="10" y2="8" />
|
|
<line x1="20" y1="4" x2="20" y2="20" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<aside
|
|
:class="[
|
|
'sidebar-container',
|
|
{ 'sidebar-container--hide': !isSidebarVisible },
|
|
{ 'sidebar-container--show': isSidebarVisible },
|
|
]"
|
|
>
|
|
<div class="sidebar">
|
|
<div class="sidebar-content">
|
|
<h1 class="h1--about">What is<br />FlyLocal Alaska?</h1>
|
|
<iframe
|
|
id="lbry-iframe"
|
|
src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cdesktop%29/4b6d3c94ef05cd3609a22df6b2b0d45c174957a8?r=29V3nQLvAKT88DXBMViaBRypn3iWW5WM"
|
|
allowfullscreen
|
|
></iframe>
|
|
<iframe
|
|
v-if="false"
|
|
id="lbry-iframe-mobile"
|
|
src="https://odysee.com/$/embed/What-is-FlyLocal-%28fall%2C2021%2Cmobile%29/9af5d6ac694a83b95a5763dc74b87f76e6503b0e?r=Ct8Uk1dFJb5UoQzJN7ASdkypiqzkqqez"
|
|
allowfullscreen
|
|
></iframe>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F3D4.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F4C5.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F601.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong>FlyLocal-Alaska</strong> is an easy way to view the
|
|
schedules for your favorite Alaskan airlines - all in one place.
|
|
</p>
|
|
<h1 class="h1--about">Why FlyLocal<br />in Alaska?</h1>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6AB.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F697.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6E3.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong
|
|
>80% of Alaskan communities are not connected to the road
|
|
system.</strong
|
|
>
|
|
Therefore, they rely heavily on local airlines for transportation.
|
|
</p>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6A3.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F3D5.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F43B.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong>See new places.</strong> There are ~400 public airports in
|
|
Alaska, but only 20 (or 5%) with service from major US carriers.
|
|
</p>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6E9.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F681.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6F8.svg"
|
|
alt=""
|
|
srcset=""
|
|
/>
|
|
</div>
|
|
<p class="text--about">
|
|
Enjoy a completely <strong>unique flying experience</strong>. Have
|
|
you ever landed on a lake in a seaplane? Now is your chance to check
|
|
it off the bucket-list.
|
|
</p>
|
|
<h1 class="h1--about">Up-to-date<br />Travel Info</h1>
|
|
<ul class="about-carriers list-lrg">
|
|
<li @click="clickedLink('alaska-travel-info')">
|
|
<a href="https://covid19.alaska.gov/travelers/" target="_blank">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/alaska-travel-info.png`)"
|
|
alt="Alaska Travel Info"
|
|
title="Alaska Travel Info"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">
|
|
Explore Alaska<br />on these great local airlines
|
|
</h1>
|
|
<ul class="about-carriers">
|
|
<li
|
|
v-for="carrier in carriers"
|
|
:key="carrier.id"
|
|
@click="clickedCarrier(carrier.fields.Slug)"
|
|
>
|
|
<a :href="carrier.fields.BookingLink" target="_blank">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="
|
|
require(`@/assets/images/carriers/${carrier.fields.Slug}.png`)
|
|
"
|
|
:alt="carrier.fields.Name"
|
|
:title="carrier.fields.Name"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">Proud Member of</h1>
|
|
<ul class="about-carriers list-med">
|
|
<li @click="clickedLink('aaca')">
|
|
<a href="https://alaskaaircarriers.org" target="_blank">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/aaca.png`)"
|
|
alt="Alaska Air Carriers Association"
|
|
title="Alaska Air Carriers Association"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li @click="clickedLink('alaska-tia')">
|
|
<a href="https://alaskatia.org" target="_blank">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/alaska-tia.png`)"
|
|
alt="Alaska Travel Industry Association"
|
|
title="Alaska Travel Industry Association"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">Featured on</h1>
|
|
<ul class="about-carriers list-med">
|
|
<li @click="clickedLink('1-million-cups')">
|
|
<a
|
|
href="https://www.1millioncups.com/anchorage/presentations/flylocal-alaska-35304"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/1-million-cups.png`)"
|
|
alt="1 Million Cups"
|
|
title="1 Million Cups"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li @click="clickedLink('travel-alaska')">
|
|
<a
|
|
href="https://www.travelalaska.com/offers/FlyLocal/Plane-Statewide.aspx"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
class="img--carrier-logo"
|
|
style="
|
|
background: black;
|
|
border-radius: 0.5rem;
|
|
padding-left: 0.4rem;"
|
|
:src="require(`@/assets/images/orgs/travel-alaska.png`)"
|
|
alt="Travel Alaska"
|
|
title="Travel Alaska"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="company-footer">
|
|
⎨ FlyLocal v5.0.4.0 𐄙 ©2021 FlyLocal,
|
|
Inc ⎬
|
|
</div>
|
|
</div>
|
|
<ul class="contact">
|
|
<li class="contact-item" @click="clickedLink('twitter')">
|
|
<a href="https://twitter.com/fly_local" target="_blank">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-twitter"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path
|
|
d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
|
|
/>
|
|
</svg>
|
|
<span>@fly_local</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item" @click="clickedLink('facebook')">
|
|
<a href="https://facebook.com/iFlyLocal" target="_blank">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-facebook"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path
|
|
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
|
/>
|
|
</svg>
|
|
<span>@iFlyLocal</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item" @click="clickedLink('instagram')">
|
|
<a href="https://instagram.com/fly_local" target="_blank">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-instagram"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x="4" y="4" width="16" height="16" rx="4" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
|
|
</svg>
|
|
<span>@fly_local</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item" @click="clickedLink('team-email')">
|
|
<a href="mailto:team@iflylocal.com" target="_blank">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-user"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
|
|
</svg>
|
|
<span>contact us</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item" @click="clickedLink('partners-email')">
|
|
<a href="mailto:partners@iflylocal.com" target="_blank">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-briefcase"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x="3" y="7" width="18" height="13" rx="2" />
|
|
<path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
|
|
<line x1="12" y1="12" x2="12" y2="12.01" />
|
|
<path d="M3 13a20 20 0 0 0 18 0" />
|
|
</svg>
|
|
<span>partner with us</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
<div
|
|
:class="[
|
|
'sidebar-blockui',
|
|
{ 'sidebar-blockui--show': isSidebarVisible },
|
|
]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
isSidebarVisible: false,
|
|
carriers: [],
|
|
userEmail: ''
|
|
}),
|
|
async fetch() {
|
|
|
|
this.userEmail = this.$cookies.get('email');
|
|
const filterFormula = 'AND(IsActive=1,FIND("Alaska",Region)>0)';
|
|
const sortFormula = "&sort[0][field]=Name&sort[0][direction]=asc";
|
|
|
|
let offset;
|
|
let data = [];
|
|
|
|
while (true) {
|
|
const offsetParam = offset ? `&offset=${offset}` : "";
|
|
const res = await fetch(
|
|
`https://api.airtable.com/v0/appiQwfVZixRgRICe/Carriers_Alaska?filterByFormula=${filterFormula}${sortFormula}${offsetParam}`,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
Authorization: "Bearer keyJ2ht64ZSN57AG1",
|
|
},
|
|
}
|
|
);
|
|
|
|
const json = await res.json();
|
|
offset = await json.offset;
|
|
data = [...data, ...(await json.records)];
|
|
// await console.log(data.length)
|
|
|
|
if (await !offset) {
|
|
break;
|
|
} // Were done let's stop this thing
|
|
}
|
|
|
|
this.carriers = [...data];
|
|
},
|
|
methods: {
|
|
showSidebar() {
|
|
this.isSidebarVisible = !this.isSidebarVisible;
|
|
|
|
if (this.isSidebarVisible) {
|
|
this.$segment.track("sidebar__show_sidebar");
|
|
} else {
|
|
this.$segment.track("sidebar__hide_sidebar");
|
|
}
|
|
},
|
|
clickedCarrier(slug) {
|
|
this.$segment.track("sidebar__open_carrier", {
|
|
carrier: slug,
|
|
});
|
|
},
|
|
clickedLink(slug) {
|
|
this.$segment.track("sidebar__open_link", {
|
|
carrier: slug,
|
|
});
|
|
},
|
|
logout() {
|
|
this.$cookies.remove('email');
|
|
this.userEmail = '';
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--sidebar-width: 50ch;
|
|
}
|
|
|
|
.sidebar-container {
|
|
z-index: 1002;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
height: 100vh;
|
|
transition: all 0.3s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-container.sidebar-container--hide {
|
|
transform: translateX(calc(var(--sidebar-width) + 6rem));
|
|
}
|
|
|
|
.sidebar-container.sidebar-container--show {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar {
|
|
background: white;
|
|
padding: 3rem 0 3rem 3rem;
|
|
border-radius: 3rem 0 0 3rem;
|
|
pointer-events: all;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.sidebar-content {
|
|
overflow: auto;
|
|
max-width: var(--sidebar-width);
|
|
height: calc(100vh - 11rem);
|
|
padding-right: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.img--about {
|
|
height: min(3rem, 60px);
|
|
display: inline-block;
|
|
}
|
|
|
|
div.img-divider {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 25%;
|
|
}
|
|
|
|
.img--carrier-logo {
|
|
max-width: 6rem;
|
|
max-height: 6rem;
|
|
}
|
|
|
|
.list-med .img--carrier-logo {
|
|
max-width: 9rem;
|
|
max-height: 9rem;
|
|
}
|
|
|
|
.list-lrg .img--carrier-logo {
|
|
max-width: 15rem;
|
|
max-height: 15rem;
|
|
}
|
|
|
|
h1.h1--about {
|
|
font-weight: 200;
|
|
text-transform: uppercase;
|
|
color: #007fff;
|
|
font-size: min(2.7rem, 50px);
|
|
line-height: 1;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text--about {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
max-width: 40ch;
|
|
font-size: min(1rem, 18px);
|
|
}
|
|
|
|
.text--about:nth-of-type(1),
|
|
.text--about:nth-of-type(4) {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
#lbry-iframe {
|
|
width: calc(var(--sidebar-width) - 4rem);
|
|
aspect-ratio: 560/315;
|
|
margin-bottom: 2rem;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
#lbry-iframe-mobile {
|
|
width: calc(var(--sidebar-width) - 4rem);
|
|
aspect-ratio: 315/560;
|
|
margin-bottom: 2rem;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.about-carriers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.about-carriers li {
|
|
filter: saturate(0%);
|
|
transition: 0.3s all;
|
|
position: relative;
|
|
}
|
|
|
|
/* .about-carriers li::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: red;
|
|
content: '';
|
|
} */
|
|
|
|
.about-carriers li:hover {
|
|
filter: saturate(100%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.sidebar-buttons {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 1003;
|
|
display: flex;
|
|
align-content: flex-end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.sidebar-blockui {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
filter: blur(0.5);
|
|
background-color: #007fff;
|
|
transition: all 0.3s;
|
|
pointer-events: none;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.sidebar-blockui.sidebar-blockui--show {
|
|
opacity: 0.8;
|
|
pointer-events: all;
|
|
}
|
|
|
|
ul.contact {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin: 3rem 3rem 0 0;
|
|
max-width: var(--sidebar-width);
|
|
}
|
|
|
|
li.contact-item a span {
|
|
color: #007fff;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a:hover span {
|
|
color: #00ca00;
|
|
}
|
|
|
|
ul.contact li.contact-item a svg {
|
|
max-height: 2rem;
|
|
max-width: 2rem;
|
|
stroke-width: 1;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a:hover svg {
|
|
stroke: #00ca00;
|
|
}
|
|
|
|
.company-footer {
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
color: gray;
|
|
}
|
|
</style>
|