Enable media queries

This commit is contained in:
Hazem Krimi
2023-11-02 15:49:57 +01:00
parent c463e30f43
commit 8eeb9fc974
3 changed files with 34 additions and 8 deletions
+21 -2
View File
@@ -51,7 +51,8 @@ header #links {
header #links .linkedin, header #links .linkedin,
header #links .github, header #links .github,
header #links .cv-paper-flip { header #links .cv-paper-flip,
header #burger svg path {
stroke: var(--text); stroke: var(--text);
} }
@@ -62,6 +63,24 @@ header #links .moon {
fill: var(--text); fill: var(--text);
} }
header #links #theme-toggle { header #burger {
display: none;
}
header #links #theme-toggle, header #burger {
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 768px) {
header {
padding: 0.938rem 1.25rem;
}
header #menus, header #links {
display: none;
}
header #burger {
display: initial;
}
}
+8 -3
View File
@@ -1,20 +1,25 @@
{{ $styles := resources.Get "css/baseof.css" | toCSS | minify | fingerprint }} {{ $styles := resources.Get "css/baseof.css" | toCSS | minify }}
{{ $scripts := resources.Get "js/baseof.js" | js.Build | minify | fingerprint }} {{ $scripts := resources.Get "js/baseof.js" | js.Build | minify }}
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="{{ $styles.Permalink }}"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ block "styles" . }}{{ end }} {{ block "styles" . }}{{ end }}
<title> <title>
{{ block "title" . }} {{ block "title" . }}
{{ .Site.Title }} {{ .Site.Title }}
{{ end }} {{ end }}
</title> </title>
<script defer src="{{ $scripts.Permalink }}"></script> <script defer src="{{ $scripts.Permalink }}"></script>
</head> </head>
<body> <body>
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main> <main>
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
+5 -3
View File
@@ -1,7 +1,8 @@
{{ define "styles" }}
{{ $styles := resources.Get "css/partials/header.css" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" /> {{ define "styles" }}
{{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
{{ end }} {{ end }}
{{ $headerFaceImage := resources.Get "images/header-face.png" }} {{ $headerFaceImage := resources.Get "images/header-face.png" }}
@@ -34,4 +35,5 @@
data-sun="{{ $sun.Permalink }}" data-sun="{{ $sun.Permalink }}"
></span> ></span>
</div> </div>
<span id="burger">{{ readFile "assets/icons/burger.svg" | safeHTML }}</span>
</header> </header>