161 lines
2.7 KiB
CSS
161 lines
2.7 KiB
CSS
/**
|
||
* Custom styles to immediately follow Tailwind’s `components` layer
|
||
*
|
||
* “Add more opinionated, complex classes like buttons, form controls, alerts,
|
||
* etc; the sort of pre-built components you often see in other frameworks that
|
||
* you might need to override with utility classes.”
|
||
*
|
||
* — from https://tailwindcss.com/docs/plugins#adding-components
|
||
*/
|
||
|
||
/**
|
||
* Post title styles
|
||
*
|
||
* These will be applied to all headings with a `page-title` or `entry-title`
|
||
* class on the frontend and to the post title in the block editor.
|
||
*
|
||
* The supplied styles are meant to match the default `h1` classes from
|
||
* Tailwind Typography.
|
||
*/
|
||
.page-title,
|
||
.entry-title {
|
||
@apply max-w-content mx-auto mb-6 text-3xl font-extrabold text-neutral-900;
|
||
}
|
||
|
||
/**
|
||
* Layout styles for centered content areas
|
||
*
|
||
* If you are controlling the width of your content area with styles applied
|
||
* to its container, you can delete the following styles whose selectors begin
|
||
* with `.page-content >` and `.entry-content >`. For more details, please see
|
||
* the following:
|
||
*
|
||
* https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
|
||
*/
|
||
|
||
.entry-content > .alignwide {
|
||
/* Wide width from the `theme.json` file */
|
||
@apply max-w-wide;
|
||
}
|
||
|
||
.entry-content > .alignfull {
|
||
@apply max-w-none;
|
||
}
|
||
|
||
.entry-content > .alignleft {
|
||
@apply float-left mr-8;
|
||
}
|
||
|
||
.entry-content > .alignright {
|
||
@apply float-right ml-8;
|
||
}
|
||
|
||
:where(.wp-block-columns) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
header {
|
||
background-size: cover;
|
||
background-position: center;
|
||
|
||
img.linkedin {
|
||
height: 1rem;
|
||
margin-left: 1rem;
|
||
margin-top: -0.5rem;
|
||
}
|
||
|
||
.header-cointainer {
|
||
@apply pt-6 grid items-center;
|
||
height: 75vh;
|
||
position: relative
|
||
}
|
||
|
||
.video-container {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
position: absolute;
|
||
z-index: 0;
|
||
top: 0;
|
||
height: 75vh;
|
||
|
||
video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
&:not(.home) {
|
||
img.linkedin {
|
||
filter: invert(1);
|
||
}
|
||
|
||
h1 {
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
footer {
|
||
ul.menu li::before {
|
||
@apply mr-3 italic;
|
||
content: "|";
|
||
}
|
||
}
|
||
|
||
.contact-block {
|
||
@apply relative;
|
||
|
||
.overlay {
|
||
@apply absolute drop-shadow-xl;
|
||
top: 15%;
|
||
z-index: 1000;
|
||
width: 40vw;
|
||
min-width: 500px;
|
||
margin-left: 15vw;
|
||
@media (max-width: 500px) {
|
||
width: 90vw;
|
||
min-width: 0;
|
||
margin: 5vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text-over-image {
|
||
@apply relative;
|
||
overflow: visible;
|
||
|
||
.text {
|
||
@apply absolute;
|
||
left: -10vw;
|
||
top: 10vw;
|
||
@media (max-width: 500px) {
|
||
left: 10vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
.overlay-icons {
|
||
@apply p-5;
|
||
width: 40vw;
|
||
min-width: 645px;
|
||
img {
|
||
width: 100px;
|
||
}
|
||
|
||
p {
|
||
width: 250px;
|
||
}
|
||
|
||
@media (min-width: 782px) {
|
||
@apply drop-shadow-xl absolute;
|
||
}
|
||
}
|