kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix mobile version

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-19 21:51:38 +02:00
parent f6d02095ff
commit ba13043350
5 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/main/css/colors.css
View File

@ -59,6 +59,6 @@
--color-text-link: var(--color-accent-fg);
font-size: 16px;
font-family: "Roboto", arial, sans-serif;
font-size: 16px;
}

15
static/main/css/index.css
View File

@ -21,7 +21,7 @@
top: 30%;
}
img {
width: 40%;
width: clamp(20rem, 50%, 70rem);
}
.text {
@ -34,7 +34,6 @@ img {
display: flex;
justify-content: center;
text-align: center;
width: 20%;
margin: 3rem auto 0 auto;
}
@ -45,11 +44,12 @@ img {
.social-link > i {
display: grid;
place-items: center;
color: var(--color-fg-default);
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
border-radius: 100px;
margin: auto 0.5rem 1rem 0.5rem;
font-size: 2rem;
color: var(--color-fg-default);
/* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e"); */
border: 0.1rem solid var(--color-fg-default);
border-radius: 100%;
margin: 0 0.5rem 1rem 0.5rem;
width: 3rem;
aspect-ratio: 1;
}
@ -63,16 +63,19 @@ img {
border: 2px solid var(--color-mail);
background-image: none;
}
.telegram:hover > i {
color: var(--color-telegram);
border: 2px solid var(--color-telegram);
background-image: none;
}
.linkedin:hover > i {
color: var(--color-linkedin);
border: 2px solid var(--color-linkedin);
background-image: none;
}
.github:hover > i {
color: var(--color-github);
border: 2px solid var(--color-github);

9
static/main/css/layout.css
View File

@ -29,7 +29,7 @@ body {
.logo {
margin: 1rem;
padding: 1rem;
width: 3rem;
max-width: 2.5rem;
aspect-ratio: 1;
}
@ -51,10 +51,11 @@ body {
.primary-navigation a {
color: var(--color-fg-default);
font-size: 2rem;
text-decoration: none;
}
.primary-navigation a:hover {
color: var(--color-fg-muted);
color: var(--color-text-hover);
}
.primary-navigation a > [aria-hidden="true"] {
@ -68,7 +69,7 @@ body {
position: fixed;
z-index: 1000;
inset: 0 0 0 20%;
inset: 0 0 0 40%;
flex-direction: column;
padding: min(30vh, 10rem) 2rem;
@ -89,7 +90,7 @@ body {
@media (min-width: 35em) {
.primary-navigation {
--gap: clamp(1.5rem, 5vw, 3rem);
padding-block: 16px;
padding-block: 1rem;
padding-inline: clamp(3rem, 8vw, 10rem);
background-color: var(--color-header-bg-default);
}

11
static/main/css/navigation_button.css
View File

@ -25,7 +25,7 @@
.mobile-nav-toggle__line {
width: var(--line-width);
height: var(--line-height);
background: var(--color-fg-default);
background-color: var(--color-fg-default);
border-radius: var(--line-border-radius);
transition: all 0.5s ease-in-out;
}
@ -36,10 +36,17 @@
position: absolute;
width: var(--line-width);
height: var(--line-height);
background: var(--color-fg-default);
background-color: var(--color-fg-default);
border-radius: var(--line-border-radius);
transition: all 0.5s ease-in-out;
}
.mobile-nav-toggle:hover > *,
.mobile-nav-toggle:hover > *::before,
.mobile-nav-toggle:hover > ::after {
background-color: var(--color-text-hover);
}
.mobile-nav-toggle__line::before {
transform: translateY(-16px);
}

1
templates/layout.html
View File

@ -4,6 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>