re-arrange site resources
This commit is contained in:
parent
6b1a6a1e0e
commit
24744b767a
SSH key fingerprint:
SHA256:Hqn452XQ1ETzUt/FthJu6+OFkS4NBxCv5VQSEvuk7CE
18 changed files with 156 additions and 155 deletions
48
fira.css
48
fira.css
|
|
@ -1,48 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('fonts/FiraCode-Light.woff2') format('woff2'),
|
||||
url("fonts/FiraCode-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('fonts/FiraCode-Regular.woff2') format('woff2'),
|
||||
url("fonts/FiraCode-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('fonts/FiraCode-Medium.woff2') format('woff2'),
|
||||
url("fonts/FiraCode-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('fonts/FiraCode-SemiBold.woff2') format('woff2'),
|
||||
url("fonts/FiraCode-SemiBold.woff") format("woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('fonts/FiraCode-Bold.woff2') format('woff2'),
|
||||
url("fonts/FiraCode-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code VF';
|
||||
src: url('fonts/FiraCode-VF.woff2') format('woff2-variations'),
|
||||
url('fonts/FiraCode-VF.woff') format('woff-variations');
|
||||
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
|
||||
font-weight: 300 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="master.css">
|
||||
<link rel="stylesheet" href="/res/css/master.css">
|
||||
<title>~floppy</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
"My life is a living nightmare!"
|
||||
</p>
|
||||
</div>
|
||||
<div><img src="profile-image.png" class="profile-image"></div>
|
||||
<div><img src="/res/images/profile.png" class="profile-image"></div>
|
||||
<div>
|
||||
<ul>
|
||||
<li>19 y/o, British</li>
|
||||
|
|
@ -35,7 +35,8 @@
|
|||
<ul class="social">
|
||||
<li><strong>Forgejo:</strong> <a href="https://git.frzn.dev/fwoppydwisk/">@fwoppydwisk@git.frzn.dev</a></li>
|
||||
<li><strong>E-mail:</strong> <a href="mailto:floppydisk@hyprcat.net">floppydisk@hyprcat.net</a></li>
|
||||
<li><strong>Fedi:</strong> <a rel="me" href="https://furry.engineer/@fwoppydwisk">@fwoppydwisk@furry.engineer</a>
|
||||
<li><strong>Fedi:</strong> <a rel="me"
|
||||
href="https://furry.engineer/@fwoppydwisk">@fwoppydwisk@furry.engineer</a>
|
||||
</li>
|
||||
<li><strong>Discord:</strong> @fwoppydwisk</li>
|
||||
</ul>
|
||||
104
master.css
104
master.css
|
|
@ -1,104 +0,0 @@
|
|||
@import url('fira.css');
|
||||
|
||||
:root {
|
||||
--background: #11111b;
|
||||
--foreground: #cdd6f4;
|
||||
--drop-shadow-color: #cdd6f43c;
|
||||
--drop-shadow-size: 8px 8px;
|
||||
--links: #89b4fa;
|
||||
--profile-image-size: 200px;
|
||||
--page-width: 520px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background);
|
||||
font-family: "Fira Code";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--links);
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline solid;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: square;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
ul.social {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
li:before {
|
||||
content: "-";
|
||||
padding-right: 5px;
|
||||
} */
|
||||
|
||||
|
||||
div.page-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
width: var(--page-width);
|
||||
}
|
||||
|
||||
div.grid {
|
||||
display: grid;
|
||||
grid-template-columns: var(--profile-image-size) auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
border: 1px solid var(--foreground);
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color))
|
||||
}
|
||||
|
||||
div.grid div:nth-child(2) {
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.grid div:nth-child(4) {
|
||||
vertical-align: middle;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
div.grid div:last-child {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
div.grid>div {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img.profile-image {
|
||||
width: var(--profile-image-size);
|
||||
border: 2px solid var(--foreground)
|
||||
}
|
||||
|
||||
p.social-heading {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
48
res/css/fira.css
Normal file
48
res/css/fira.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@font-face {
|
||||
font-family: "Fira Code";
|
||||
src: url("/res/fonts/FiraCode-Light.woff2") format("woff2"),
|
||||
url("/res/fonts/FiraCode-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code";
|
||||
src: url("/res/fonts/FiraCode-Regular.woff2") format("woff2"),
|
||||
url("/res/fonts/FiraCode-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code";
|
||||
src: url("/res/fonts/FiraCode-Medium.woff2") format("woff2"),
|
||||
url("/res/fonts/FiraCode-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code";
|
||||
src: url("/res/fonts/FiraCode-SemiBold.woff2") format("woff2"),
|
||||
url("/res/fonts/FiraCode-SemiBold.woff") format("woff");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code";
|
||||
src: url("/res/fonts/FiraCode-Bold.woff2") format("woff2"),
|
||||
url("/res/fonts/FiraCode-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Fira Code VF";
|
||||
src: url("/res/fonts/FiraCode-VF.woff2") format("woff2-variations"),
|
||||
url("/res/fonts/FiraCode-VF.woff") format("woff-variations");
|
||||
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
|
||||
font-weight: 300 700;
|
||||
font-style: normal;
|
||||
}
|
||||
104
res/css/master.css
Normal file
104
res/css/master.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
@import url("fira.css");
|
||||
|
||||
:root {
|
||||
--background: hsl(282, 23%, 9%);
|
||||
--foreground: hsl(271, 64%, 88%);
|
||||
--drop-shadow-color: hsla(271, 64%, 88%, 0.235);
|
||||
--drop-shadow-size: 8px 8px;
|
||||
--links: hsl(267, 84%, 81%);
|
||||
--profile-image-size: 200px;
|
||||
--page-width: 520px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background);
|
||||
font-family: "Fira Code";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--links);
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline solid;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: square;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
ul.social {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
li:before {
|
||||
content: "-";
|
||||
padding-right: 5px;
|
||||
} */
|
||||
|
||||
div.page-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
width: var(--page-width);
|
||||
}
|
||||
|
||||
div.grid {
|
||||
display: grid;
|
||||
grid-template-columns: var(--profile-image-size) auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
border: 1px solid var(--foreground);
|
||||
background-color: var(--background);
|
||||
padding: 10px;
|
||||
filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color));
|
||||
}
|
||||
|
||||
div.grid div:nth-child(2) {
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
div.grid div:nth-child(4) {
|
||||
vertical-align: middle;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
div.grid div:last-child {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
div.grid > div {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img.profile-image {
|
||||
width: var(--profile-image-size);
|
||||
border: 2px solid var(--foreground);
|
||||
}
|
||||
|
||||
p.social-heading {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 287 KiB After Width: | Height: | Size: 287 KiB |
Loading…
Reference in a new issue