mirror of
https://codeberg.org/vlw/victorwesterlund.com.git
synced 2025-09-14 11:33:41 +02:00
Victor Westerlund
0cd5d11cd8
commit 17b429555fceefc9c3500ddee4da8c6902d9674a
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Tue Dec 28 01:00:11 2021 +0100
Optimize assets and pages
commit c05e4bb5eabd9ef2b96eccb347cc0399cb6869f8
Author: Victor Westerlund <victor@victorwesterlund.com>
Date: Tue Dec 14 18:06:52 2021 +0100
Add noopener link type
Prevents Spotify from accessing the window object of victorwesterlund.com.
I think sending the referrer header is fine so noreferrer is not needed
commit cc3cca09ac02cc0bf45204bbe52dcc20ee10a2eb
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Sun Dec 12 15:56:05 2021 +0100
Add desktop style
Added the desktop overrides as media queries for a mobile-first approach. Also added the "more" and "contact" pages.
commit de6f30a7c2525e5bb7a31a55f11a40fc33347f85
Author: Victor Westerlund <victor.vesterlund@gmail.com>
Date: Sun Dec 12 14:46:21 2021 +0100
New content and CSS refactor
Content template for "more" and major CSS refactor
142 lines
2.4 KiB
CSS
142 lines
2.4 KiB
CSS
:root {
|
|
--color-background: 255,255,255;
|
|
--color-contrast: 33,33,33;
|
|
|
|
--padding: 20px;
|
|
--running-height: 100px;
|
|
--footer-denom: 1;
|
|
}
|
|
|
|
/* -- Cornerstones -- */
|
|
|
|
* {
|
|
margin: 0;
|
|
font-family: "Monaco","Consolas",monospace,sans-serif;
|
|
color: rgb(var(--color-contrast));
|
|
}
|
|
|
|
*::selection {
|
|
background-color: rgb(var(--color-contrast));
|
|
color: rgb(var(--color-background));
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: var(--running-height) 1fr calc(var(--running-height) / var(--footer-denom));
|
|
background-color: rgb(var(--color-background));
|
|
place-items: center;
|
|
justify-items: center;
|
|
font-size: 21px;
|
|
}
|
|
|
|
body > * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p,
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a {
|
|
display: contents;
|
|
}
|
|
|
|
/* -- Components -- */
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--padding,30px);
|
|
}
|
|
|
|
.arrow {
|
|
display: inline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.arrow::after {
|
|
content: " →";
|
|
}
|
|
|
|
footer {
|
|
justify-self: end;
|
|
padding: 0 calc(var(--running-height) / (var(--footer-denom) * 2));
|
|
}
|
|
|
|
footer p:not(:last-child) {
|
|
display: none;
|
|
}
|
|
|
|
/* -- Media Queries -- */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-background: 0,0,0;
|
|
--color-contrast: 255,255,255;
|
|
}
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
a:hover {
|
|
background: rgba(var(--color-contrast),.1);
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.arrow::after {
|
|
content: ": " attr(href);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
body > * {
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (min-aspect-ratio: 14/9) and (min-height: 500px) {
|
|
:root {
|
|
--footer-denom: 2;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
height: 100%;
|
|
gap: calc(var(--padding) * 1.5);
|
|
font-size: 19px;
|
|
color: rgb(var(--color-background));
|
|
background-color: rgb(var(--color-contrast));
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
footer p:not(:last-child) {
|
|
display: initial;
|
|
}
|
|
|
|
footer p:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
footer p:first-child:last-child {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
@media (min-aspect-ratio: 14/9) and (min-height: 500px) and (prefers-color-scheme: dark) {
|
|
footer {
|
|
color: rgb(var(--color-contrast));
|
|
background-color: rgba(var(--color-contrast),.15);
|
|
}
|
|
}
|