Show sourcecode
The following files exists in this folder. Click to view.
stylesheet.css
444 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
/* =========================================================
GLOBAL
========================================================= */
:root {
--neon-blue: #00fff7;
--neon-purple: #b000ff;
--neon-pink: #ff00ff;
--bg-dark: #0a0a1a;
--bg-card: rgba(17, 17, 30, 0.92);
--text-light: #ffffff;
--text-gray: #aaa;
--radius: 16px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background:
radial-gradient(circle at 20% 20%, rgba(0,255,247,0.08), transparent 25%),
radial-gradient(circle at 80% 30%, rgba(176,0,255,0.08), transparent 25%),
radial-gradient(circle at 50% 90%, rgba(255,0,255,0.06), transparent 30%),
var(--bg-dark);
font-family: 'Outfit', Helvetica, Arial, sans-serif;
color: var(--text-light);
min-height: 100vh;
}
/* =========================================================
PAGE STRUCTURE
========================================================= */
/* Header */
header#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: none;
min-height: 75px;
margin: 0;
padding: 18px 50px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(10, 10, 20, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 255, 247, 0.15);
z-index: 1000;
}
/* Main content */
div#content {
width: 960px;
max-width: calc(100% - 40px);
margin: 0 auto;
padding: 130px 0 60px 0;
overflow: auto;
}
/* Article */
article {
width: 100%;
float: none;
}
/* =========================================================
LOGO
========================================================= */
.logga {
font-family: 'Outfit', Helvetica, sans-serif;
font-size: 26px;
font-weight: 800;
color: var(--neon-blue);
text-shadow:
0 0 10px var(--neon-blue),
0 0 20px rgba(0,255,247,0.5);
}
/* =========================================================
NAVIGATION
========================================================= */
nav.navmenu {
font-family: 'Outfit', Arial, sans-serif;
padding: 0;
background: transparent;
border: 0;
font-weight: 600;
}
nav.navmenu a {
display: inline-block;
margin-left: 10px;
padding: 10px 16px;
text-decoration: none;
color: #aaa;
border: 1px solid transparent;
border-radius: 10px;
transition: 0.3s;
}
nav.navmenu a:hover {
color: var(--neon-pink);
border-color: var(--neon-pink);
background: rgba(255, 0, 255, 0.05);
text-shadow: 0 0 10px var(--neon-pink);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.25);
}
/* =========================================================
HEADINGS
========================================================= */
h1,
h2 {
border: 0;
}
h1 {
font-size: 48px;
font-weight: 800;
margin: 0 0 30px 0;
background: linear-gradient(
90deg,
var(--neon-blue),
var(--neon-purple),
var(--neon-pink)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
color: var(--neon-purple);
font-size: 32px;
margin-top: 35px;
text-shadow: 0 0 15px rgba(176, 0, 255, 0.6);
}
/* =========================================================
MAIN CONTENT CARD
========================================================= */
article.justify.border {
background: var(--bg-card);
padding: 40px;
border-radius: var(--radius);
border: 1px solid rgba(0, 255, 247, 0.25);
box-shadow:
0 0 25px rgba(0, 255, 247, 0.08),
0 0 40px rgba(176, 0, 255, 0.06);
transition: 0.4s;
}
article.justify.border:hover {
border-color: rgba(255, 0, 255, 0.4);
box-shadow:
0 0 30px rgba(0, 255, 247, 0.12),
0 0 50px rgba(255, 0, 255, 0.08);
}
/* =========================================================
TEXT
========================================================= */
p {
color: #ccc;
font-size: 17px;
line-height: 1.7;
}
strong {
color: var(--neon-blue);
}
/* =========================================================
LINKS
========================================================= */
a {
color: var(--neon-blue);
transition: 0.3s;
}
a:hover {
color: var(--neon-pink);
text-shadow: 0 0 10px var(--neon-pink);
text-decoration: none;
}
/* =========================================================
EXERCISES
========================================================= */
ul {
padding-left: 25px;
}
li {
margin-bottom: 14px;
color: #ccc;
}
li a {
color: var(--neon-blue);
text-decoration: none;
font-weight: 600;
}
li a:hover {
color: var(--neon-pink);
text-shadow: 0 0 10px var(--neon-pink);
}
/* =========================================================
FIGURE / IMAGE
========================================================= */
figure {
border: 1px solid rgba(0, 255, 247, 0.3);
padding: 8px;
margin: 1em;
background: #11111f;
border-radius: var(--radius);
box-shadow:
0 0 20px rgba(0, 255, 247, 0.08);
}
figure img {
max-width: 100%;
border: 0;
border-radius: 10px;
}
figcaption {
font-style: italic;
font-size: smaller;
padding-left: 1em;
color: #aaa;
}
figure.right {
margin-right: 1em;
}
figure.top {
margin-top: 0;
}
/* =========================================================
FLOAT
========================================================= */
.right {
float: right;
}
.left {
float: left;
}
/* =========================================================
FOOTER
========================================================= */
footer#bottom {
font: normal 0.85em 'Outfit', Arial, Helvetica, sans-serif;
color: #777;
padding: 35px 8%;
margin: 0;
width: 100%;
background: rgba(10, 10, 20, 0.9);
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
footer#bottom a {
color: var(--neon-blue);
margin: 0 5px;
}
footer#bottom a:hover {
color: var(--neon-pink);
}
/* =========================================================
ACTIVE MENU ITEM
========================================================= */
body#start a#start-,
body#comments a#comments-,
body#exercises a#exercises-,
body#viewsource a#viewsource- {
color: var(--neon-blue);
border: 1px solid var(--neon-blue);
background: rgba(0, 255, 247, 0.08);
text-shadow:
0 0 10px var(--neon-blue);
box-shadow:
0 0 15px rgba(0, 255, 247, 0.25);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
header#top {
padding: 16px 20px;
}
.logga {
font-size: 20px;
}
nav.navmenu a {
margin-left: 4px;
padding: 8px 9px;
font-size: 13px;
}
div#content {
max-width: calc(100% - 20px);
padding-top: 110px;
}
article.justify.border {
padding: 25px;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 26px;
}
figure.right {
float: none;
margin: 20px 0;
}
}