vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 11:33:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed content offset

Browse source 
- Added offset calculator
- Added some media queries
This commit is contained in:
Victor Westerlund 2021-09-20 16:49:53 +02:00
parent d6e4b71f28
commit aa3189be89
2 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
public/assets/css/style.css
View file

@ -1,4 +1,4 @@
/* Victor Westerlund */ /* Victor Westerlund - www.victorwesterlund.com */
:root { :root {
--palette-background: 255,255,255; --palette-background: 255,255,255;
--palette-contrast: 33,33,33; --palette-contrast: 33,33,33;
@ -35,7 +35,7 @@
*::selection { *::selection {
background-color: var(--swatch-contrast); background-color: var(--swatch-contrast);
color: var(--swatch-accent); color: var(--swatch-background);
} }
html, html,
@ -55,17 +55,39 @@ a {
font-weight: bold; font-weight: bold;
} }
a::after {
content: " →";
}
main { main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 30px; gap: 30px;
font-size: clamp(18px,5vw,3vh); font-size: 20px;
transform: translateY(0);
} }
/* -- Content -- */
/* -- Media Queries -- */ /* -- Media Queries -- */
@media (max-width: 300px) {
main {
text-align: center;
align-items: center;
}
}
@media print {
a::after {
content: ": " attr(href);
}
}
@media (pointer: fine) {
a:hover {
background: rgba(var(--palette-contrast),.1);
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--palette-background: 0,0,0; --palette-background: 0,0,0;

16
public/index.html
View file

@ -10,9 +10,21 @@
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body> <body>
<main> <main class="hidden">
<p>victor westerlund</p> <p>victor westerlund</p>
<a href="https://github.com/VictorWesterlund"><p>github →</p></a> <p><a href="https://github.com/VictorWesterlund">github</a></p>
</main> </main>
<script>
// Compensate for native elements (like the brower navbar)
function updateOffset() {
const offset = (window.outerHeight - window.innerHeight) / 2;
if(offset > -1) {
const main = document.getElementsByTagName("main")[0];
main.style.setProperty("transform",`translateY(-${offset}px)`);
}
}
window.addEventListener("resize",() => updateOffset());
updateOffset();
</script>
</body> </body>
</html> </html>