Skip to content
Snippets Groups Projects
Commit 02d378e4 authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[ADD] setup vite with django-pattern-lib

parent b51aed13
Branches
No related tags found
No related merge requests found
Showing
with 1225 additions and 5105 deletions
...@@ -48,3 +48,7 @@ db.sqlite3-journal ...@@ -48,3 +48,7 @@ db.sqlite3-journal
.idea/ .idea/
.vscode/ .vscode/
# Vite settings
node_modules
...@@ -11,7 +11,7 @@ environ.Env.read_env(str(ROOT_DIR / ".env")) ...@@ -11,7 +11,7 @@ environ.Env.read_env(str(ROOT_DIR / ".env"))
# GENERAL # GENERAL
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------
DEBUG = env.bool("DJANGO_DEBUG", False) DEBUG = env.bool("DJANGO_DEBUG", True)
ROOT_URLCONF = "majak_uistyleguide.urls" ROOT_URLCONF = "majak_uistyleguide.urls"
WSGI_APPLICATION = "majak_uistyleguide.wsgi.application" WSGI_APPLICATION = "majak_uistyleguide.wsgi.application"
...@@ -42,6 +42,7 @@ INSTALLED_APPS = [ ...@@ -42,6 +42,7 @@ INSTALLED_APPS = [
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'django_vite',
'pattern_library', 'pattern_library',
] ]
...@@ -84,9 +85,7 @@ TEMPLATES = [ ...@@ -84,9 +85,7 @@ TEMPLATES = [
# STATIC # STATIC
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------
STATIC_ROOT = str(ROOT_DIR / "static_files")
STATIC_URL = "/static/" STATIC_URL = "/static/"
STATICFILES_DIRS = [str(PROJECT_DIR / "static")]
STATICFILES_FINDERS = [ STATICFILES_FINDERS = [
"django.contrib.staticfiles.finders.FileSystemFinder", "django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder", "django.contrib.staticfiles.finders.AppDirectoriesFinder",
...@@ -99,6 +98,17 @@ MEDIA_URL = "/media/" ...@@ -99,6 +98,17 @@ MEDIA_URL = "/media/"
MEDIA_ROOT = str(ROOT_DIR / "media_files") MEDIA_ROOT = str(ROOT_DIR / "media_files")
# VITE SETTINGS
# ------------------------------------------------------------------------------
# Where ViteJS assets are built.
DJANGO_VITE_ASSETS_PATH = PROJECT_DIR / "static" / "dist"
# If you use HMR or not.
DJANGO_VITE_DEV_MODE = DEBUG
# Include DJANGO_VITE_ASSETS_PATH into STATICFILES_DIRS to be copied inside
# when run command python manage.py collectstatic
STATICFILES_DIRS = [DJANGO_VITE_ASSETS_PATH]
STATIC_ROOT = PROJECT_DIR / "collectedstatic"
# PATTERN LIBRARY SETTINGS # PATTERN LIBRARY SETTINGS
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------
if DEBUG: if DEBUG:
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.container--default {
@apply max-w-screen-xl;
}
.container--narrow {
margin: auto;
width: 882px;
}
.container--medium {
@apply px-5;
margin: auto;
max-width: 1350px;
}
.container--wide {
@apply px-5;
margin: auto;
max-width: 1400px;
}
.section-clip {
clip-path: polygon(0 10px, 100% 0%, 100% 99%, 0% 100%);
margin-bottom: -3.2vw;
@screen xl {
clip-path: polygon(0 20px, 100% 0%, 100% 95%, 0% 100%);
margin-bottom: -4.2vw;
}
}
.header-max-width {
max-width: 1340px !important;
}
.container {
@apply mx-auto px-4;
max-width: 1150px;
}
.grid-container {
@apply grid mx-5;
grid-template-columns: 1fr;
grid-template-areas:
"left-side"
"content"
"right-side";
gap: 1rem;
max-width: 1150px;
&.article-section {
max-width: 1400px;
}
&.person-grid-container {
max-width: 1400px;
}
&.person-twitter-section {
grid-template-columns: minmax(0, 1200px);
@screen xl {
grid-template-columns: 240px 1fr 102px;
}
}
&.no-max {
max-width: none;
}
}
@responsive {
.grid-container {
@screen xl {
grid-template-columns: 240px 1fr 102px;
grid-template-areas:
"left-side content right-side";
margin-left: 10%;
}
@screen 3xl {
margin-left: 20%;
}
&.person-grid-container {
@screen xl {
grid-template-columns: 240px 1fr 339px;
}
}
}
}
.grid-content {
grid-area: content;
}
.grid-full {
grid-column: left-side / right-side;
grid-row: left-side / right-side;
}
.grid-left-side {
grid-area: left-side;
}
.grid-left-side-with-content {
grid-column: left-side / content;
grid-row: left-side / content;
}
.grid-right-side {
grid-area: right-side;
}
.grid-content-with-right-side {
grid-column: content / right-side;
grid-row: content / right-side;
}
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.container-padding--zero {
margin-left: -1rem;
margin-right: -1rem;
@screen xl {
margin-left: -2rem;
margin-right: -2rem;
}
}
.container-padding--auto {
margin-left: 0;
margin-right: 0;
}
}
.footer-section {
height: 450px;
}
.person-box-medium {
max-width: 485px;
width: 100%;
}
.person-box-big {
max-width: 575px;
width: 100%;
}
.photo-header {
height: 414px;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
z-index: 1;
}
> div {
z-index: 10;
}
@screen md {
height: 40vw;
}
}
.simple-header-height {
height: 13rem;
@screen xl {
height: 26rem;
}
}
@screen xl {
.footer-section {
height: 981px;
}
}
.flag {
/* right margin makes space for flag stripe */
@apply inline-block py-3 relative pl-8 pr-6 mr-10 bg-black text-white;
&:after {
@apply absolute w-10 h-full;
content: "";
left: 100%;
top: 0;
background: inherit;
clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%);
}
}
.text-input-addon {
@apply flex items-center bg-grey-125 text-grey-300 font-normal py-3 px-4 text-lg border border-grey-200 transition duration-200;
}
.text-input {
@apply outline-none bg-grey-25 py-3 px-4 text-lg border-b-2 border-black transition duration-200;
/* Fix FF text-input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
&:active,
&:focus {
&:not([disabled]):not([readonly]) {
@apply border-blue-300;
}
}
&::placeholder {
@apply text-grey-200 font-normal;
}
&[readonly],
&[disabled] {
@apply bg-grey-125 cursor-not-allowed;
&::placeholder {
@apply text-grey-200;
}
}
}
.text-input-addon--l {
@apply border-r-0;
}
.text-input-addon--r {
@apply border-l-0;
}
.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon {
@apply border-grey-300;
}
.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon {
@apply border-blue-300;
}
.text-input[readonly] ~ .text-input-addon,
.text-input[disabled] ~ .text-input-addon {
@apply bg-grey-125 text-grey-200;
}
.text-input--has-addon-l.text-input {
@apply border-l-0;
}
.text-input--has-addon-r.text-input {
@apply border-r-0;
}
.select {
@apply relative flex items-center w-full py-2 xl:py-4;
&:after {
@apply absolute right-0 text-xl font-bold pr-3 transition duration-200;
font-family: 'pirati-ui';
/* chevron down */
content: "\e925";
}
}
.select__control {
@apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200 xl:py-5;
/* Fix FF input not adjusting it's width.
* See: https://stackoverflow.com/a/48326796/303184
*/
@apply min-w-0;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
&:active,
&:focus {
&:not([disabled]):not([readonly]) {
@apply border-blue-300;
}
}
&::placeholder {
@apply text-grey-200 font-normal;
}
&[readonly],
&[disabled] {
@apply bg-grey-125 cursor-not-allowed;
&::placeholder {
@apply text-grey-200;
}
}
}
.checkbox {
@apply relative flex;
input {
@apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-white border border-grey-200 transition duration-200;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
&:active,
&:focus {
@apply border-blue-300;
}
&:checked {
@apply bg-blue-300 border-transparent;
}
&[disabled] {
@apply cursor-not-allowed;
}
}
label {
@apply max-w-lg leading-tight uppercase font-medium text-sm xl:text-base;
}
&:after {
@apply inline absolute pointer-events-none;
content: "";
height: 5px;
width: 12px;
top: 6px;
left: 4px;
border-left: 2px solid theme("colors.white");
border-bottom: 2px solid theme("colors.white");
transform: rotate(-45deg);
}
}
.radio {
@apply relative;
input {
@apply w-5 h-5 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 border border-grey-200 transition duration-200 rounded-full;
&:hover:not([disabled]):not([readonly]) {
@apply border-grey-300;
}
&:active,
&:focus {
@apply border-blue-300;
}
&:checked {
@apply bg-blue-300 border-transparent;
}
&[disabled] {
@apply cursor-not-allowed;
}
}
label {
@apply flex items-center leading-tight;
}
&:after {
@apply w-2 h-2 inline absolute pointer-events-none bg-white;
content: "";
/* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
border-radius: 50%;
top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
}
}
.form-field--error {
.text-input,
.select__control,
.text-input ~ .text-input-addon {
@apply border-red-600;
}
}
.h-default {
@apply font-condensed font-medium leading-tight;
}
.h-alt {
@apply font-alt font-normal;
line-height: 0.96;
}
.h-allcaps {
@apply font-condensed font-normal uppercase leading-tight;
}
@responsive {
.head-alt-xl,
.content-block .head-alt-xl {
@apply text-7xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-lg,
.content-block .head-alt-lg {
@apply text-6xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-md,
.content-block .head-alt-md {
@apply text-4xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-base,
.content-block .head-alt-base {
@apply text-3xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-sm,
.content-block .head-alt-sm {
@apply text-2xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-xs,
.content-block .head-alt-xs {
@apply text-xl font-alt font-normal;
line-height: 0.96;
}
.head-alt-2xs,
.content-block .head-alt-2xs {
@apply text-lg font-alt font-normal;
line-height: 0.96;
}
.head-base,
.content-block .head-base {
@apply text-3xl font-condensed font-medium leading-tight;
}
.head-sm,
.content-block .head-sm {
@apply text-2xl font-condensed font-medium leading-tight;
}
.head-xs,
.content-block .head-xs {
@apply text-xl font-condensed font-medium leading-tight;
}
.head-2xs,
.content-block .head-2xs {
@apply text-lg font-condensed font-medium leading-tight;
}
.head-heavy-base,
.content-block .head-heavy-base {
@apply text-3xl font-condensed font-bold leading-tight;
}
.head-heavy-sm,
.content-block .head-heavy-sm {
@apply text-2xl font-condensed font-bold leading-tight;
}
.head-heavy-xs,
.content-block .head-heavy-xs {
@apply text-xl font-condensed font-bold leading-tight;
}
.head-heavy-2xs,
.content-block .head-heavy-2xs {
@apply text-lg font-condensed font-bold leading-tight;
}
.head-allcaps-2xs,
.content-block .head-allcaps-2xs {
@apply text-lg font-condensed font-normal uppercase leading-tight;
}
.head-allcaps-3xs,
.content-block .head-allcaps-3xs {
@apply text-base font-condensed font-normal uppercase leading-tight;
}
.head-allcaps-4xs,
.content-block .head-allcaps-4xs {
@apply text-sm font-condensed font-normal uppercase leading-tight;
}
.head-allcaps-heavy-2xs,
.content-block .head-allcaps-heavy-2xs {
@apply text-lg font-condensed font-bold uppercase leading-tight;
}
.head-allcaps-heavy-3xs,
.content-block .head-allcaps-heavy-3xs {
@apply text-base font-condensed font-bold uppercase leading-tight;
}
.head-allcaps-heavy-4xs,
.content-block .head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight;
}
}
.header-clip {
clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
}
.head-xl {
@apply font-alt text-base lg:text-xl font-medium leading-7 uppercase;
}
.head-2xl {
@apply font-alt text-2xl font-medium leading-8 uppercase;
letter-spacing: -0.01em;
}
.head-3xl {
@apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
}
.head-4xl {
@apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
}
.head-6xl {
@apply font-alt text-2xl font-medium tracking-tight uppercase xl:text-6xl;
}
.head-7xl {
@apply font-alt text-3xl font-medium tracking-tight uppercase xl:text-7xl;
}
.head-8xl {
@apply font-alt text-4xl font-medium tracking-tight uppercase xl:text-8xl;
}
.head-9xl {
@apply font-alt text-5xl font-medium tracking-tight uppercase xl:text-8xl;
}
p {
@apply text-sm leading-6 lg:text-base;
}
.vertical-time-line {
border-left: 1px solid green;
}
.program-perex .content-block p {
font-size: 1.3rem;
line-height: 1.75rem;
}
.content-block {
h2 {
@apply font-alt text-3xl font-medium leading-7 tracking-tight uppercase mb-5 lg:leading-10 xl:text-4xl;
}
h3 {
@apply font-alt leading-4 text-lg tracking-tight uppercase xl:text-3xl xl:leading-8;
}
h4 {
@apply font-alt xl:text-2xl font-medium leading-8 uppercase;
letter-spacing: -0.01em;
}
a {
@apply text-blue-300 underline;
}
}
@font-face {
font-family: 'pirati-ui';
src: url('../../fonts/pirati-ui.eot');
src: url('../../fonts/pirati-ui.eot') format('embedded-opentype'),
url('../../fonts/pirati-ui.ttf') format('truetype'),
url('../../fonts/pirati-ui.woff') format('woff'),
url('../../fonts/pirati-ui.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="ico--"], [class*=" ico--"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'pirati-ui' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico--dots-three-vertical:before { content: "\e940"; }
.ico--dots-three-horizontal:before { content: "\e941"; }
.ico--log-out:before { content: "\e942"; }
.ico--envelope:before { content: "\e908"; }
.ico--pin:before { content: "\e943"; }
.ico--at:before { content: "\e905"; }
.ico--strategy:before { content: "\e932"; }
.ico--pig:before { content: "\e928"; }
.ico--thermometer:before { content: "\e90a"; }
.ico--menu:before { content: "\e933"; }
.ico--chevron-right:before { content: "\e923"; }
.ico--chevron-left:before { content: "\e924"; }
.ico--chevron-down:before { content: "\e925"; }
.ico--chevron-up:before { content: "\e926"; }
.ico--link-horizontal:before { content: "\e910"; }
.ico--beer:before { content: "\e909"; }
.ico--pirati:before { content: "\e90d"; }
.ico--jitsi:before { content: "\e90f"; }
.ico--open-source:before { content: "\e90e"; }
.ico--thumbs-down:before { content: "\e93d"; }
.ico--thumbs-up:before { content: "\e93e"; }
.ico--anchor:before { content: "\e92d"; }
.ico--paw:before { content: "\e90b"; }
.ico--checkmark:before { content: "\e965"; }
.ico--info:before { content: "\e901"; }
.ico--question:before { content: "\e904"; }
.ico--warning:before { content: "\e93f"; }
.ico--code:before { content: "\e94a"; }
.ico--checkbox-unchecked:before { content: "\e94e"; }
.ico--star-full:before { content: "\e94f"; }
.ico--star-empty:before { content: "\e950"; }
.ico--bookmark:before { content: "\e951"; }
.ico--cog:before { content: "\e952"; }
.ico--key:before { content: "\e953"; }
.ico--zoom-in:before { content: "\e954"; }
.ico--zoom-out:before { content: "\e955"; }
.ico--shrink:before { content: "\e956"; }
.ico--printer:before { content: "\e957"; }
.ico--file-openoffice:before { content: "\e958"; }
.ico--user:before { content: "\e959"; }
.ico--file-excel:before { content: "\e95a"; }
.ico--file-word:before { content: "\e95b"; }
.ico--file-pdf:before { content: "\e95c"; }
.ico--file-picture:before { content: "\e95d"; }
.ico--file-blank:before { content: "\e95e"; }
.ico--folder-upload:before { content: "\e95f"; }
.ico--upload:before { content: "\e960"; }
.ico--cloud-upload:before { content: "\e961"; }
.ico--folder-download:before { content: "\e962"; }
.ico--download:before { content: "\e963"; }
.ico--cloud-download:before { content: "\e964"; }
.ico--alarm:before { content: "\e900"; }
.ico--calculator:before { content: "\e911"; }
.ico--facebook-full:before { content: "\e913"; }
.ico--feed:before { content: "\e927"; }
.ico--library:before { content: "\e929"; }
.ico--office:before { content: "\e92a"; }
.ico--attachment:before { content: "\e92b"; }
.ico--enlarge:before { content: "\e92c"; }
.ico--eye-off:before { content: "\e92e"; }
.ico--eye:before { content: "\e92f"; }
.ico--share:before { content: "\e931"; }
.ico--search:before { content: "\e939"; }
.ico--pencil:before { content: "\e93c"; }
.ico--lock-open:before { content: "\e947"; }
.ico--lock:before { content: "\e948"; }
.ico--equalizer:before { content: "\e949"; }
.ico--switch:before { content: "\e94b"; }
.ico--loop:before { content: "\e94c"; }
.ico--refresh:before { content: "\e94d"; }
.ico--bullhorn:before { content: "\e944"; }
.ico--bin:before { content: "\e945"; }
.ico--cross:before { content: "\e937"; }
.ico--checkbox-checked:before { content: "\e938"; }
.ico--globe:before { content: "\e93a"; }
.ico--wikipedia:before { content: "\e93b"; }
.ico--youtube:before { content: "\e936"; }
.ico--users:before { content: "\e934"; }
.ico--book:before { content: "\e935"; }
.ico--bubbles:before { content: "\e930"; }
.ico--map:before { content: "\e914"; }
.ico--compass:before { content: "\e915"; }
.ico--folder-open:before { content: "\e916"; }
.ico--folder:before { content: "\e917"; }
.ico--drawer:before { content: "\e918"; }
.ico--stop:before { content: "\e919"; }
.ico--github:before { content: "\e91a"; }
.ico--clock:before { content: "\e91b"; }
.ico--calendar:before { content: "\e91c"; }
.ico--flickr:before { content: "\e91d"; }
.ico--instagram:before { content: "\e91e"; }
.ico--twitter:before { content: "\e91f"; }
.ico--newspaper:before { content: "\e920"; }
.ico--cart:before { content: "\e921"; }
.ico--home:before { content: "\e922"; }
.ico--link:before { content: "\e912"; }
.ico--power:before { content: "\e90c"; }
.ico--rocket:before { content: "\e946"; }
.ico--location:before { content: "\e906"; }
.ico--phone:before { content: "\e907"; }
.ico--linkedin:before { content: "\e903"; }
.ico--facebook:before { content: "\e902"; }
.article-box {
&.dark-theme {
background-color: #4C4C4C;
color: white;
}
}
.quote-icon {
font-size: 7rem;
height: 1rem;
@screen xl {
font-size: 15rem;
}
}
.slick-slider .slick-arrow {
font-size: 0;
position: absolute;
top: -.7rem;
z-index: 10;
&:before, &:after {
border-right: 2px solid white;
border-bottom: 2px solid white;
content: '';
height: .8rem;
position: absolute;
width: .8rem;
@screen lg {
height: 1rem;
width: 1rem;
}
}
&.slick-next {
transform: rotate(-45deg);
}
&.slick-prev {
transform: rotate(135deg);
}
}
.header-carousel {
display: block;
margin: 0 auto;
position: relative;
img {
filter: brightness(60%);
}
.header-carousel--text {
@apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
max-width: 1200px;
white-space: nowrap;
position: absolute;
top: 50%;
margin-left: 10%;
@screen sm {
margin-left: 10%;
top: 35%;
}
@screen lg {
top: 25%;
}
@screen xl {
top: 30%;
}
@screen 2xl {
top: 40%;
}
}
img {
bottom: 0;
left: 0;
right: 0;
top: 0;
transition: all 800ms ease-in-out;
transform: scale(1.15, 1.15);
width: 100%;
height: 458px;
object-fit: cover;
margin-bottom: -3px;
@screen md {
height: auto;
}
}
.slick-slide {
clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
}
.slick-active {
z-index: 1000;
img {
transform: scale(1, 1);
}
.header-carousel--text {
animation: right_to_left 1s ease;
}
}
@keyframes right_to_left {
from {
margin-left: 20%;
}
to {
margin-left: 10%;
}
}
.slick-arrow {
font-size: 0;
position: absolute;
right: 20%;
top: 80%;
z-index: 10;
@screen sm {
right: 10%;
}
@screen lg {
top: 60%;
}
&:before, &:after {
border-right: 3px solid white;
border-bottom: 3px solid white;
color: white;
content: '';
height: 1.3rem;
position: absolute;
width: 1.3rem;
@screen sm {
border-right: 2px solid white;
border-bottom: 2px solid white;
height: .8rem;
width: .8rem;
}
@screen lg {
height: 1rem;
width: 1rem;
}
}
&.slick-next {
transform: rotate(-45deg);
}
&.slick-prev {
transform: rotate(135deg);
}
}
.slick-dots {
color: white;
left: 10%;
position: absolute;
top: 90%;
z-index: 10;
@screen sm {
left: 5%;
top: 60%;
}
li {
display:inline-block;
border: 1px solid white;
border-radius: 50%;
height: 6px;
width: 6px;
margin: 3px;
@screen sm {
display: block;
margin-bottom: 6px;
}
&.slick-active {
background-color: white;
}
button {
font-size: 0;
}
}
}
}
.btn-carousel{
@apply h-11;
top: 28%;
}
.article-carousel {
.slick-arrow {
right: 10%;
@screen lg {
right: 5%;
}
&:before, &:after {
border-color: black;
}
&.slick-disabled {
&:before, &:after {
border-color: #B3B3B3;
}
}
}
}
div.twitter-carousel {
div.slick-track {
display: flex;
}
div.slick-slide {
display: flex;
height: auto;
margin-right: 1rem;
& > div {
height: 100%;
}
}
.slick-arrow {
right: 10%;
@screen lg {
right: 5%;
}
&:before, &:after {
border-color: black;
}
&.slick-disabled {
&:before, &:after {
border-color: #B3B3B3;
}
}
}
}
.twitter-carousel {
position: relative;
.slick-arrow {
top: -2.6rem;
}
&:before {
@screen lg {
background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
}
content: '';
height: 100%;
right: 0;
position: absolute;
width: 10%;
z-index: 100;
}
}
.contact-box {
@apply border border-grey-100 flex flex-col h-auto items-center justify-between px-16 py-8 text-center;
min-height: 20rem;
width: 280px;
}
.background-hover-zoom {
background-position: center;
background-size: 100%;
transition: background-size 0.3s ease-in;
}
.background-hover-zoom:hover {background-size: 110%}
.btn {
@apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11;
min-width: 8rem;
}
.btn__slide__wrap {
overflow: hidden;
position: relative;
:first-child {
position: relative;
transition: all linear 0.25s;
}
:last-child {
left: -100%;
position: absolute;
transition: all linear 0.25s;
}
&:hover {
:first-child {
transform: translateX(100%);
}
:last-child {
left: 0
}
}
}
.switch {
@apply py-5;
}
.switch__item {
@apply bg-grey-150 cursor-pointer px-5 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;
&:hover {
@apply no-underline bg-grey-200;
}
&.switch__item--active,
&.switch__item--active:hover {
@apply bg-turquoise-200;
}
}
@responsive {
@screen xl {
.switch__item {
@apply px-8 py-4 text-xl;
}
}
}
/* HORIZONTAL SCROLLABLE */
.horizontal-scrolling {
display: block;
margin-left: -15px;
margin-right: -15px;
max-width: calc(100% + 30px);
overflow-x: scroll;
overflow-y: hidden;
padding: 0 15px;
text-align: center;
white-space: nowrap;
}
.horizontal-scrolling.draggable {
cursor: grab;
}
.horizontal-scrolling.draggable.active, .horizontal-scrolling.draggable.active a {
cursor: grabbing;
}
.no-scrollbars {
-ms-overflow-style: -ms-autohiding-scrollbar;
scrollbar-width: none;
}
.no-scrollbars::-webkit-scrollbar {
display: none;
}
.article-timeline-grid {
@apply grid gap-2;
margin-top: -20px;
grid-template-areas:
"left-article"
"right-article";
@screen xl {
grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
grid-template-areas: "left-article timeline right-article";
}
}
.article-timeline-grid__left-article {
grid-area: left-article;
}
.article-timeline-grid__right-article {
grid-area: right-article;
}
.article-timeline-grid__timeline {
grid-area: timeline;
&:before {
content: '';
background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
position: absolute;
bottom: -1px;
height: 20px;
z-index: 10;
width: 2px;
left: -1px;
}
.article-timeline--month {
transform: translateX(-50%);
top: -1rem;
z-index: 100;
}
}
.footer-clip {
clip-path: polygon(0 10px, 100% 0, 100% 100%, 0% 100%);
/* TODO responsive */
@screen md {
clip-path: polygon(0 20px, 100% 0, 100% 100%, 0% 100%);
}
}
.footer__main {
@apply grid;
grid-template-areas:
"social"
"main-links";
}
.footer__social {
grid-area: social;
}
.footer__main-links {
grid-area: main-links;
ul {
display: flex;
flex-flow: row wrap;
max-height: 540px;
writing-mode: vertical-lr; /* workaround for long-living bug https://stackoverflow.com/a/39102894/7113416 */
@screen md {
max-height: 320px;
}
li {
display: block;
height: 40px;
line-height: 40px;
min-width: 150px;
writing-mode: initial; /* workaround revert from above */
}
}
}
.footer-collapsible__toggle {
@apply flex items-center cursor-pointer;
&:after {
content: "\e925";
font-family: "pirati-ui";
@apply ml-auto font-light text-2xl transition duration-200;
}
&.footer-collapsible__toggle--open:after {
transform: rotate(-180deg);
}
@screen lg {
&:after {
@apply hidden;
@apply cursor-auto;
}
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment