Compare commits

...

4 Commits

Author SHA1 Message Date
Andrzej Stepien 3d6497dfdb repair eroneous delete 2024-04-24 16:24:08 +02:00
Andrzej Stepien 4eff7aeed3 edits 2024-04-24 16:23:04 +02:00
Andrzej Stepien fcc96bbf0a add css 2024-04-24 16:22:46 +02:00
Andrzej Stepien f6418028de install fonts 2024-04-24 16:22:38 +02:00
15 changed files with 155 additions and 14 deletions

62
defaults.css Normal file
View File

@ -0,0 +1,62 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
list-style: none;
}
menu,
ol,
ul {
padding-left: 0;
}
article ol,
article ul {
list-style-position: inside;
}
a {
/* Places underlines below the descenders */
text-underline-position: under;
/* Sets the thickness as a percentage of the font size */
text-decoration-thickness: 8;
}
/* <html> = the root */
html {
font-size: 62.5%;
/* (62.5/100) * 16px = 10px */
-webkit-text-size-adjust: none;
/* for iOS Safari */
text-size-adjust: none;
/* for other mobile browsers */
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
label,
button,
select,
summary,
[type=radio],
[type=submit],
[type=checkbox] {
cursor: pointer;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Andrzej Stepien : Coder for Hire</title> <title>Andrzej Stepien : Coder for Hire</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="defaults.css" />
<link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
@ -15,27 +16,32 @@
</header> </header>
<main> <main>
<h1>Hello.</h1> <h1>Hello.</h1>
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you most <p>
likely followed a link here from my CV. I thought this page would be the best way to demonstrate what My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
I'm capable of. most
likely followed a link here from my CV. I thought this page would be the best way to demonstrate
what
I'm capable of.
</p>
<h2>The website you are currently reading...</h2> <h2>The website you are currently reading...</h2>
<ul> <ul>
<li><b>... is hosted on bespoke hardware.</b> A mini-pc in my living room, to <li><b> is hosted on bespoke hardware.</b> A mini-pc in my living room, to
be precise!</li> be precise!</li>
<li><b>... has correctly managed security certificates, scoring an 'A' grade on <a <li><b> has correctly managed security certificates, scoring an 'A' grade on <a
href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b> href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b>
</li> </li>
<li><b>... is fully compliant with <a <li><b>… is fully compliant with <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Content
Accessibility Guidelines</a></b> because accessibility isn't an optional Accessibility Guidelines</a></b> because accessibility isn't an optional
extra!</li> extra!</li>
<li><b>... is styled with careful consideration for Responsive Web Design principles</b> because <li><b> is styled with careful consideration for Responsive Web Design principles</b> (because
I have no I have no
idea what device you're using!</li> idea what device you're reading this on!)</li>
<li><b>... hosts a collection of projects demonstrating my proficiency in both frontend and <li><b>… hosts a collection of projects demonstrating my proficiency in both frontend and
backend development</b> including projects written in CSS, Html, Javascript, backend development</b> including projects written in  CSS,  Html, 
React, Nodejs, Sql, Jq, Lua and Bash.</li> Javascript,
<li><b>... was hand-coded by myself.</b> Naturally.</li>  React,  Nodejs,  Sql,  Jq,  Lua and 󱆃 Bash.</li>
<li><b>… was lovingly hand-coded by myself.</b> Naturally.</li>
</ul> </ul>
<h2>Certifications</h2> <h2>Certifications</h2>
<ul> <ul>

73
styles.css Normal file
View File

@ -0,0 +1,73 @@
@font-face {
font-family: GoMono;
src: url(fonts/GoMonoNerdFont-Regular.ttf);
font-weight: 400;
font-style: normal;
}
:root {
--text: #e0def4;
--love: #eb6f92;
--gold: #f6c177;
--rose: #ebbcba;
--pine: #31748f;
--foam: #9ccfd8;
--iris: #c4a7e7;
--base: #191724;
--surface: #1f1d2e;
--overlay: #26233a;
--hl-med: #403d52;
--hl-high: #524f67;
}
body {
background-color: var(--base);
}
h1,
h2,
h3,
h4 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: var(--love);
}
main {
font-family: GoMono, serif;
font-size: 2rem;
width: 60%;
margin: auto;
color: var(--text);
}
p {
background-color: var(--surface);
border-radius: 10rem;
padding: 2rem;
}
b {
color: var(--gold);
}
a {
text-decoration: none;
color: var(--foam);
}
a:visited {
color: var(--pine);
}
a:hover {
background-color: pink;
}
li {
list-style-type: ' ';
margin-bottom: 2rem;
}