Merge branch 'add-css-styling' into 'main'
add: css styling See merge request odweta/sourceworks.dev!3
This commit is contained in:
odweta
@@ -0,0 +1,8 @@
|
|||||||
|
.blink-cursor {
|
||||||
|
animation: blink-cursor 1s steps(1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-cursor{
|
||||||
|
0%, 50% { opacity: 0.0; } /* invisible 0%..50% */
|
||||||
|
50%, 100% { opacity: 1.0; } /* visible 50%..100% */
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
#title {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul,
|
||||||
|
#bottom-line {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
.glitch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
isolation: isolate;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Duplicated text layers inherit the element's color */
|
||||||
|
.glitch::before,
|
||||||
|
.glitch::after {
|
||||||
|
content: attr(data-glitch);
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: inherit;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal glitch slices */
|
||||||
|
.glitch::before {
|
||||||
|
z-index: 1;
|
||||||
|
animation: glitch-cyan 1.5s infinite steps(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glitch::after {
|
||||||
|
z-index: 2;
|
||||||
|
animation: glitch-red 1.2s infinite steps(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal slices move left and right */
|
||||||
|
@keyframes glitch-cyan {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
clip-path: inset(0 0 80% 0);
|
||||||
|
transform: translateX(-8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
clip-path: inset(20% 0 55% 0);
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
clip-path: inset(55% 0 25% 0);
|
||||||
|
transform: translateX(-12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
45%,
|
||||||
|
70% {
|
||||||
|
clip-path: inset(0 0 100% 0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
clip-path: inset(35% 0 45% 0);
|
||||||
|
transform: translateX(7px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch-red {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
clip-path: inset(75% 0 5% 0);
|
||||||
|
transform: translateX(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
clip-path: inset(10% 0 70% 0);
|
||||||
|
transform: translateX(-11px);
|
||||||
|
}
|
||||||
|
|
||||||
|
35%,
|
||||||
|
60% {
|
||||||
|
clip-path: inset(0 0 100% 0);
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
clip-path: inset(50% 0 30% 0);
|
||||||
|
transform: translateX(-7px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.glitch::before,
|
||||||
|
.glitch::after {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
* {
|
||||||
|
color: #ebdbb2;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
background-color: #282828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading,
|
||||||
|
.link {
|
||||||
|
color: #d79921;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
border-left: solid 2px #a89984;
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-style: italic;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 70%;
|
||||||
|
margin-inline: auto;
|
||||||
|
margin-top: 5rem;
|
||||||
|
background-color: #3c3836;
|
||||||
|
border-radius: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
+33
-15
@@ -3,27 +3,45 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/style.css"/>
|
||||||
|
<link rel="stylesheet" href="css/corrections.css"/>
|
||||||
|
<link rel="stylesheet" href="css/blink-cursor.css"/>
|
||||||
|
<link rel="stylesheet" href="css/glitch.css"/>
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<title>sourceworks.dev</title>
|
<title>sourceworks.dev</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Odweta – Personal Home Page</h1>
|
<div class="card">
|
||||||
<p>an Android programmer, sysadmin and <i>hacker</i></p>
|
<h1 id="title" class="heading">Odweta – Personal Home Page</h1>
|
||||||
|
|
||||||
<h3>Programming projects:</h3>
|
<p class="quote">an Android developer, sysadmin and <span class="glitch" data-glitch="hacker">hacker</span></p>
|
||||||
<ul>
|
|
||||||
<li><a href="https://gitlab.com/odweta/solon">Solon</a> – a custom frontend for a school administration system Škola Online as an Android app.</li>
|
|
||||||
<li><a href="https://gitlab.com/odweta/odwetalibc">odwetalibc</a> – an extention library of stock C functionalities, providing dynamic arrays, Python-like lists, some string manipulation enhancements and other utility functions.</li>
|
|
||||||
<li><a href="https://gitlab.com/odweta/vendetta">vendetta</a> – a tool for managing projects which use the odwetalibc library.</li>
|
|
||||||
<li><a href="https://github.com/odweta/fakturovac">Fakturovač</a> – software for creating and managing invoices.</li>
|
|
||||||
<li><a href="https://gitlab.com/odweta/searcher">Searcher</a> – a simple app which fetches the first page of google results for a specified query and saves it as a JSON file.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<footer>
|
<h3 class="heading">><span class="blink-cursor">_</span> Programming projects:</h3>
|
||||||
<h3>Contact me at:</h3>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Email: <a href="mailto:contact@sourceworks.dev">contact@sourceworks.dev</a></li>
|
<li><a class="link" href="https://gitlab.com/odweta/solon">Solon</a> – a custom frontend for a school administration system Škola Online as an Android app.</li>
|
||||||
<li>Matrix: @odweta:matrix.org</li>
|
<li><a class="link" href="https://gitlab.com/odweta/odwetalibc">odwetalibc</a> – an extention library of stock C functionalities, providing dynamic arrays, Python-like lists, some string manipulation enhancements and other utility functions.</li>
|
||||||
|
<li><a class="link" href="https://gitlab.com/odweta/vendetta">vendetta</a> – a tool for managing projects which use the odwetalibc library.</li>
|
||||||
|
<li><a class="link" href="https://github.com/odweta/fakturovac">Fakturovač</a> – software for creating and managing invoices.</li>
|
||||||
|
<li><a class="link" href="https://gitlab.com/odweta/searcher">Searcher</a> – a simple app which fetches the first page of google results for a specified query and saves it as a JSON file.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
|
||||||
|
<footer>
|
||||||
|
<h3 class="heading">💾 My work:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
GitLab: <a href="https://gitlab.com/odweta">https://gitlab.com/odweta</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
GitHub: <a href="https://github.com/odweta">https://github.com/odweta</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 class="heading">📨 Contact me at:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Email: <a href="mailto:contact@sourceworks.dev">contact@sourceworks.dev</a></li>
|
||||||
|
<li id="bottom-line">Matrix: @odweta:matrix.org</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user