Split main.css into multiple files
This commit is contained in:
parent
ad66bae2ac
commit
35a7e1bcf9
|
|
@ -5,4 +5,8 @@
|
|||
{{ section.templateContent }}
|
||||
{% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: true %}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{% css %}
|
||||
{% include "css/components/hero.css" %}
|
||||
{% endcss %}
|
||||
|
|
@ -7,8 +7,14 @@
|
|||
{% include "css/reset.css" %}
|
||||
{% include "css/variables.css" %}
|
||||
{% include "css/main.css" %}
|
||||
{% include "css/header.css" %}
|
||||
{% include "css/footer.css" %}
|
||||
|
||||
{% include "css/components/button.css" %}
|
||||
{% include "css/components/skip-link.css" %}
|
||||
{% include "css/components/socials-list.css" %}
|
||||
{% include "css/components/projects.css" %}
|
||||
{% include "css/components/timeline.css" %}
|
||||
{% include "css/components/competences.css" %}
|
||||
{% include "css/components/download.css" %}
|
||||
{% endcss %}
|
||||
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -11,4 +11,8 @@
|
|||
|
||||
{% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
{% css %}
|
||||
{% include "css/footer.css" %}
|
||||
{% endcss %}
|
||||
|
|
@ -4,4 +4,8 @@
|
|||
<div>
|
||||
{% include "partials/navigation" %}
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
{% css %}
|
||||
{% include "css/header.css" %}
|
||||
{% endcss %}
|
||||
40
src/css/components/button.css
Normal file
40
src/css/components/button.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
button,
|
||||
.btn {
|
||||
--hover: rgba(var(--neutral-highest), 0.8);
|
||||
--active: rgba(var(--neutral-highest), 0.8);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 2.5rem;
|
||||
max-height: none;
|
||||
color: rgb(var(--neutral-lower));
|
||||
background-color: var(--text);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-stretch: var(--font-stretch, condensed);
|
||||
border: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
display: inline-flex;
|
||||
}
|
||||
button:disabled,
|
||||
.btn:disabled {
|
||||
--hover: inherit;
|
||||
--active: inherit;
|
||||
color: #929292;
|
||||
cursor: not-allowed;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
button:not(:disabled):hover,
|
||||
.btn:not(:disabled):hover {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
button:not(:disabled):active,
|
||||
.btn:not(:disabled):active {
|
||||
background-color: var(--active);
|
||||
}
|
||||
12
src/css/components/competences.css
Normal file
12
src/css/components/competences.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.competences-section .col {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media screen and (min-width: 991px) {
|
||||
.competences-section > div {
|
||||
flex-direction: row;
|
||||
}
|
||||
.competences-section .col {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
9
src/css/components/download.css
Normal file
9
src/css/components/download.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.download {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.download p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.btn-download {
|
||||
color: rgb(var(--brand-secondary-lower));
|
||||
}
|
||||
27
src/css/components/hero.css
Normal file
27
src/css/components/hero.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.hero {
|
||||
height: 90svh;
|
||||
}
|
||||
.hero div {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.hero p {
|
||||
max-width: 48ch;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero div {
|
||||
text-align: start;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
44
src/css/components/projects.css
Normal file
44
src/css/components/projects.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.project-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
}
|
||||
.project-grid li {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card {
|
||||
--background: url(https://placehold.co/200x150);
|
||||
z-index: 1;
|
||||
background: var(--background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
height: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.card a:hover {
|
||||
color: #3a3a3a;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
.card a:before,
|
||||
.card a:after {
|
||||
--icon-size: 1.2rem;
|
||||
}
|
||||
.card .top {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.card .links {
|
||||
align-self: flex-end;
|
||||
gap: 0.35rem;
|
||||
display: flex;
|
||||
}
|
||||
.card .content {
|
||||
padding: 1rem 0.4rem 0;
|
||||
}
|
||||
17
src/css/components/skip-link.css
Normal file
17
src/css/components/skip-link.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
body > a {
|
||||
z-index: 99999;
|
||||
padding: 0.4rem 1rem;
|
||||
position: absolute;
|
||||
inset-block-start: 0.3rem;
|
||||
inset-inline-start: 0.3rem;
|
||||
}
|
||||
body > a:not(:focus) {
|
||||
size: 1px;
|
||||
white-space: nowrap;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
19
src/css/components/socials-list.css
Normal file
19
src/css/components/socials-list.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.socials-list {
|
||||
gap: 0.2rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
.socials-list--label {
|
||||
gap: 2rem;
|
||||
}
|
||||
.socials-list--label a {
|
||||
--item-color: black;
|
||||
--icon-color: #262626;
|
||||
text-underline-offset: 0.25rem;
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration: underline #262626;
|
||||
text-decoration: underline #262626;
|
||||
}
|
||||
.socials-list--label a:hover {
|
||||
--item-color: var(--text-2);
|
||||
--icon-color: var(--text-2);
|
||||
}
|
||||
45
src/css/components/timeline.css
Normal file
45
src/css/components/timeline.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.timeline {
|
||||
flex-direction: column;
|
||||
margin-top: 1.4rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.timeline:before {
|
||||
content: "";
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
inline-size: 6px;
|
||||
margin-inline-start: -3px;
|
||||
position: absolute;
|
||||
inset: 1.5rem 0 0 1.5rem;
|
||||
}
|
||||
.timeline li {
|
||||
--size: 3rem;
|
||||
padding: 0 0 0 calc(var(--size) + 0.8rem);
|
||||
margin: 1.4rem 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
.timeline li:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.timeline li:first-child {
|
||||
margin-top: -20px;
|
||||
}
|
||||
.timeline li:before {
|
||||
content: "";
|
||||
aspect-ratio: 1;
|
||||
inline-size: var(--size);
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
border: 6px solid rgb(var(--brand-secondary-medium));
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
inset-block-end: 50%;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.timeline li:hover:before {
|
||||
border-color: rgb(var(--brand-secondary-high));
|
||||
}
|
||||
223
src/css/main.css
223
src/css/main.css
|
|
@ -4,6 +4,9 @@
|
|||
:where(h1, h2, h3, h4, h5, h6, p) {
|
||||
margin: 0;
|
||||
}
|
||||
:where(html:focus-within) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.wrapper,
|
||||
|
|
@ -99,67 +102,6 @@
|
|||
outline-style: solid;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
button,
|
||||
.btn {
|
||||
--hover: rgba(var(--neutral-highest), 0.8);
|
||||
--active: rgba(var(--neutral-highest), 0.8);
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 2.5rem;
|
||||
max-height: none;
|
||||
color: rgb(var(--neutral-lower));
|
||||
background-color: var(--text);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-stretch: var(--font-stretch, condensed);
|
||||
border: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
display: inline-flex;
|
||||
}
|
||||
button:disabled,
|
||||
.btn:disabled {
|
||||
--hover: inherit;
|
||||
--active: inherit;
|
||||
color: #929292;
|
||||
cursor: not-allowed;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
button:not(:disabled):hover,
|
||||
.btn:not(:disabled):hover {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
button:not(:disabled):active,
|
||||
.btn:not(:disabled):active {
|
||||
background-color: var(--active);
|
||||
}
|
||||
|
||||
/* Skip link */
|
||||
body > a {
|
||||
z-index: 99999;
|
||||
padding: 0.4rem 1rem;
|
||||
position: absolute;
|
||||
inset-block-start: 0.3rem;
|
||||
inset-inline-start: 0.3rem;
|
||||
}
|
||||
body > a:not(:focus) {
|
||||
size: 1px;
|
||||
white-space: nowrap;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon-download:before,
|
||||
.icon-download:after {
|
||||
|
|
@ -301,164 +243,7 @@ main li {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.hero {
|
||||
height: 90svh;
|
||||
}
|
||||
.hero div {
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.hero p {
|
||||
max-width: 48ch;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero div {
|
||||
text-align: start;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
.project-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
}
|
||||
.project-grid li {
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card {
|
||||
--background: url(https://placehold.co/200x150);
|
||||
z-index: 1;
|
||||
background: var(--background);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 2.5rem;
|
||||
height: 100%;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.card a:hover {
|
||||
color: #3a3a3a;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
.card a:before,
|
||||
.card a:after {
|
||||
--icon-size: 1.2rem;
|
||||
}
|
||||
.card .top {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.card .links {
|
||||
align-self: flex-end;
|
||||
gap: 0.35rem;
|
||||
display: flex;
|
||||
}
|
||||
.card .content {
|
||||
padding: 1rem 0.4rem 0;
|
||||
}
|
||||
section {
|
||||
margin-block: 3.5rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.socials-list {
|
||||
gap: 0.2rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
.socials-list--label {
|
||||
gap: 2rem;
|
||||
}
|
||||
.socials-list--label a {
|
||||
--item-color: black;
|
||||
--icon-color: #262626;
|
||||
text-underline-offset: 0.25rem;
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration: underline #262626;
|
||||
text-decoration: underline #262626;
|
||||
}
|
||||
.socials-list--label a:hover {
|
||||
--item-color: var(--text-2);
|
||||
--icon-color: var(--text-2);
|
||||
}
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
margin-top: 1.4rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.timeline:before {
|
||||
content: "";
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
inline-size: 6px;
|
||||
margin-inline-start: -3px;
|
||||
position: absolute;
|
||||
inset: 1.5rem 0 0 1.5rem;
|
||||
}
|
||||
.timeline li {
|
||||
--size: 3rem;
|
||||
padding: 0 0 0 calc(var(--size) + 0.8rem);
|
||||
margin: 1.4rem 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
.timeline li:last-child {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.timeline li:first-child {
|
||||
margin-top: -20px;
|
||||
}
|
||||
.timeline li:before {
|
||||
content: "";
|
||||
aspect-ratio: 1;
|
||||
inline-size: var(--size);
|
||||
background-color: rgb(var(--neutral-lower));
|
||||
border: 6px solid rgb(var(--brand-secondary-medium));
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
inset-block-end: 50%;
|
||||
inset-inline-start: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.timeline li:hover:before {
|
||||
border-color: rgb(var(--brand-secondary-high));
|
||||
}
|
||||
.download {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.download p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.btn-download {
|
||||
color: rgb(var(--brand-secondary-lower));
|
||||
}
|
||||
.competences-section .col {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@media screen and (min-width: 991px) {
|
||||
.competences-section > div {
|
||||
flex-direction: row;
|
||||
}
|
||||
.competences-section .col {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -225,6 +225,7 @@
|
|||
*/
|
||||
:where([type="search"]) {
|
||||
-webkit-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
/* iOS only */
|
||||
|
|
|
|||
Loading…
Reference in a new issue