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); --color-text-link: var(--color-accent-fg);
font-size: 16px;
font-family: "Roboto", arial, sans-serif; font-family: "Roboto", arial, sans-serif;
font-size: 16px;
} }

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

@ -21,7 +21,7 @@
top: 30%; top: 30%;
} }
img { img {
width: 40%; width: clamp(20rem, 50%, 70rem);
} }
.text { .text {
@ -34,7 +34,6 @@ img {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
width: 20%;
margin: 3rem auto 0 auto; margin: 3rem auto 0 auto;
} }
@ -45,11 +44,12 @@ img {
.social-link > i { .social-link > i {
display: grid; display: grid;
place-items: center; 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; 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; width: 3rem;
aspect-ratio: 1; aspect-ratio: 1;
} }
@ -63,16 +63,19 @@ img {
border: 2px solid var(--color-mail); border: 2px solid var(--color-mail);
background-image: none; background-image: none;
} }
.telegram:hover > i { .telegram:hover > i {
color: var(--color-telegram); color: var(--color-telegram);
border: 2px solid var(--color-telegram); border: 2px solid var(--color-telegram);
background-image: none; background-image: none;
} }
.linkedin:hover > i { .linkedin:hover > i {
color: var(--color-linkedin); color: var(--color-linkedin);
border: 2px solid var(--color-linkedin); border: 2px solid var(--color-linkedin);
background-image: none; background-image: none;
} }
.github:hover > i { .github:hover > i {
color: var(--color-github); color: var(--color-github);
border: 2px solid var(--color-github); border: 2px solid var(--color-github);

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

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

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

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

1
templates/layout.html
View File

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