Skip to content

Instantly share code, notes, and snippets.

@caputomarcos

caputomarcos/index.html

Created July 10, 2022 14:24
Show Gist options
  • Save caputomarcos/8367415a14ebb0802a1d8b1cbcbaf2a1 to your computer and use it in GitHub Desktop.
Save caputomarcos/8367415a14ebb0802a1d8b1cbcbaf2a1 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Animated Retro Blog
Raw
index.html
<!--
Author: Mustafa Azim
E-mail: [email protected]
Copyright (c) 2022 by Mustafa Azim (https://codepen.io/Abdel-Azim/pen/poaopje)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html>
<html>
<head>
<title>Fanless Intel NUC PC Mod</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<div class="stack-div">
<!-- Left & right margins -->
<aside class="margin-div-home">
<svg class="vertical-0 v-1">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-2">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-3">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-4">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-5">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-6">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-7">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-8">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-9">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-10">
<rect class="rect-0" />
</svg>
</aside>
<aside class="margin-div-home" id="right-margin">
<svg class="vertical-0 v-1">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-2">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-3">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-4">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-5">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-6">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-7">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-8">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-9">
<rect class="rect-0" />
</svg>
<svg class="vertical-0 v-10">
<rect class="rect-0" />
</svg>
</aside>
<!-- Top navigation bar -->
<nav class="nav-bar">
<ul class="nav-ul">
<li class="nav-li"><a href="#menu-home">Home</a></li>
<li class="nav-li"><a href="#menu-hardware">Hardware</a></li>
<li class="nav-li"><a href="#menu-assembly">Assembly</a></li>
<li class="nav-li"><a href="#menu-aboutme">About Me</a></li>
</ul>
</nav>
<!-- Backgrounnd -->
<div class="background-div">
<video class="background-video" src="https://assets.codepen.io/8174275/fanlesspc-vid0-1.mov" autoplay loop muted></video>
<div class="background-overlay"></div>
<div class="background-grid"></div>
</div>
<!-- Home & intro -->
<div id="menu-home" class="menu-home">
<img id="home-fig" src="https://assets.codepen.io/8174275/nuc-11-opened.png" alt="Intel Nuc 11 performance opened">
<p id="article-home" class="descriptive-text"><span id="home-the">T</span>he <a href="https://www.intel.com/content/www/us/en/products/details/nuc.html" target="_blank" class="descriptive-text-link">Intel® NUC</a> mini PC performance kit is meant for DIYers, It has the latest mobile chip CPU 11<sub>th</sub> gen with IRIS integrated GPU. The kit doesn't include SODIMM and NVMe nor SSD, which is a major advantage for the user as the user has the freedom to choose the RAMs and the storage. Moreover, the chassis can be replaced by a custome modded chassis should the user deicde to. A cooling system is entirely replaceable by passive or active heatsink should the user decide to install the PC in a quite room. The kit doesn't include Microsoft Windows license, therefore, the user could install OS starting from Windows 10,11, or Linux distribution such as Ubuntu or Mint. It's the user's DIY! Mod it and customize it to fits your use case scenario.</p>
<section class="intro-home-section">
<img id="intro-fig" src="https://assets.codepen.io/8174275/akasa-prespective1.png" alt="Akasa chassis for Intel NUC 11 mini PC">
<p id="intro-home" class="descriptive-text">We will use Akasa fanless chassis which will be functioning as a passive heatsink and case simultaniously, the needed components for this custom build are listed as follow.</p>
</section>
</div>
<!-- Hardware -->
<div id="menu-hardware" class="menu-hardware">
<div class="content-container">
<table id="table-components">
<thead>
<tr>
<th id="component-col" class="bottom-line-animation-no-off" scope="col">Component</th>
<th id="specs-col" class="bottom-line-animation-no-off" scope="col">Specs</th>
<th id="picture-col" class="bottom-line-animation-no-off" scope="col">Picture</th>
</tr>
</thead>
<tr>
<td class="bottom-line-animation animation-reverse-alternate">Intel®<br>BNUC11TNHV5</td>
<td class="text-left bottom-line-animation">Intel® Core™ i5-1145G7<br>
M.2 and 2.5" Drive<br>28 W TDP<br>12-20 VDC<br>4-Cores 8-Threads<br>4.40 GHz<br>DDR4-3200 1.2V SO-DIMMs 2<br>Dual HDMI 2.0b<br>Dual DP 1.4a via Type C<br>PCIe x4 Gen4 M.2 80mm<br>PCIe x1 Gen3 M.2 42mm<br>Front: 2x USB 3.2<br>Rear: 2x USB C 4<br>1x USB 3.2<br>1x USB 2.0<br>
Intel® Ethernet Controller i225-LM<br>Intel® Wi-Fi 6 AX201<br>1x Thunderbolt™ 4<br>1x Thunderbolt™ 3<br>117 x 112 x 54mm<br></td>
<td class="text-left bottom-line-animation">
<img id="nuc-11-img-table" src="https://assets.codepen.io/8174275/nuc-11-front.png" alt="picture of NUC 11 Performance kit">
</td>
</tr>
<tr>
<td class="bottom-line-animation">Samsung®<br>MZ-V8P1T0BW</td>
<td class="text-left bottom-line-animation animation-reverse-alternate">M.2 2280<br>PCIe® Gen 4.0 x4<br>NVMe™ 1.3c<br>Samsung 1GB Low Power DDR4 SDRAM (1TB)<br>1TB: Up to 7,000 MB/s<br>1TB: Up to 5,000 MB/s<br>1TB: 6.2 Wavg 8.9Wmax<br>0 - 70 ℃</td>
<td class="text-left bottom-line-animation">
<img id="ssd980pro-img-table" src="https://assets.codepen.io/8174275/890pro.png" alt="picture of SSD 980 Pro">
</td>
</tr>
<tr>
<td class="bottom-line-animation animation-reverse-alternate">G.Skill®<br>CL22 32GB K2</td>
<td class="text-left text-left bottom-line-animation">DDR4 3600Mhz 16GB x2<br>1.20V<br>3200 MT/s<br>22-22-22-52<br><br><br></td>
<td class="bottom-line-animation animation-reverse-alternate">
<img id="ddr4-img-table" src="https://assets.codepen.io/8174275/gskillcl32ddr4.png" alt="picture of NUC 11 Performance kit">
</td>
</tr>
<tr>
<td class="bottom-line-animation">Akasa®<br>Turing TN</td>
<td class="text-left bottom-line-animation animation-reverse-alternate">Fanless chassis compatible with Intel® NUC model:<br>
NUC11TNKi3<br>NUC11TNHi3<br>NUC11TNBi3<br>NUC11TNKi5<br>NUC11TNHi5<br>NUC11TNBi5<br>NUC11TNKv5<br>NUC11TNHv5<br>NUC11TNBv5<br>NUC11TNKi7<br>NUC11TNHi7<br>NUC11TNBi7<br>NUC11TNKv7<br>NUC11TNHv7<br>NUC11TNBv7</td>
<td class="bottom-line-animation">
<img id="akasa-img-table" src="https://assets.codepen.io/8174275/akasa-prespective1.png" alt="Picture of Akasa chassis">
</td>
</tr>
</table>
</div>
</div>
<!-- Assembly manual -->
<div id="menu-assembly" class="menu-assembly">
<div class="content-container">
<div id="akasa-manual-p1" class="akasa-image-container">
<div class="navigation-up-down">
<a href="#akasa-manual-p2" class="show-photo-down"> &#9660 </a>
</div>
<div class="akasa-manual-wrapper">
<img class="akasa-manual" src="https://assets.codepen.io/8174275/m1.png" alt="Cover page manual" loading="eager">
</div>
</div>
<div id="akasa-manual-p2" class="akasa-image-container">
<div class="navigation-up-down">
<a href="#akasa-manual-p1" class="show-photo-up"> &#9650 </a>
<a href="#akasa-manual-p3" class="show-photo-down"> &#9660 </a>
</div>
<div class="akasa-manual-wrapper">
<img class="akasa-manual" src="https://assets.codepen.io/8174275/m2.png" alt="first page manual" loading="eager">
</div>
</div>
<div id="akasa-manual-p3" class="akasa-image-container">
<div class="navigation-up-down">
<a href="#akasa-manual-p2" class="show-photo-up"> &#9650 </a>
<a href="#akasa-manual-p4" class="show-photo-down"> &#9660 </a>
</div>
<div class="akasa-manual-wrapper">
<img class="akasa-manual" src="https://assets.codepen.io/8174275/m3.png" alt="second page manual" loading="eager">
</div>
</div>
<div id="akasa-manual-p4" class="akasa-image-container">
<div class="navigation-up-down">
<a href="#akasa-manual-p3" class="show-photo-up"> &#9650 </a>
</div>
<div class="akasa-manual-wrapper">
<img class="akasa-manual" src="https://assets.codepen.io/8174275/m4-1.png" alt="third page manual" loading="eager">
</div>
</div>
</div>
</div>
<!-- About me -->
<div id="menu-aboutme" class="menu-aboutme">
<div class="content-container">
<iframe id="about-me-video" width="1280" height="720" src="https://www.youtube.com/embed/FBuzzGjt3iM" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Footer -->
<div id="footer">
<h2 class="myname-text">Mustafa Azim</h2>
<h2 class="myname-text animation-reverse-alternate"><a href="mailto:[email protected]">[email protected]</a></h2>
</div>
</div>
</body>
</html>
Raw
style.css
/* Author: Mustafa Azim
E-mail: [email protected]
Copyright (c) 2022 by Mustafa Azim (https://codepen.io/Abdel-Azim/pen/poaopje)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
* {
font-family: 'Barlow Condensed', sans-serif;
text-rendering: geometricPrecision;
color: rgba(128, 255, 255, 0.79);
animation: fadein-effect-anime 1s 1;
/* border: 1px dashed red; */
}
@keyframes fadein-effect-anime {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
scroll-behavior: smooth;
}
body {
background-color: black;
margin: 0;
}
/* Global variables */
:root {
--stack-width: clamp(300px, 100%, 8000px);
--central-width: clamp(20%, 50vw, 90%);
--margin-display: inline;
--left: 25%;
--nav-li-font-size: 27px;
--descriptive-text-font-size: 23px;
--descriptive-text-link-font-size: 27px;
--descriptive-text-first-letter-font-size: 95px;
--content-height: clamp(200px, 350px, 500px);
--h2-font-size: 25px;
--td-font-size: 20px;
--akasa-manual--image-width: 37vw;
--footer-margin-bottom: 35px;
--left-right-padding-anime-0: 5vw;
--left-right-padding-anime-1: 3vw;
--image-navigation-font-size: 30px;
--navigation-up-down-top: 50px;
--navigation-up-down-wrapper-top: 30%;
}
/* Media responsive resolutions */
@media all and (max-width: 800px) {
* {
--margin-display: none;
--central-width: clamp(40%, 90vw, 100%);
--left: 5%;
--descriptive-text-font-size: 15px;
--descriptive-text-link-font-size: 17px;
--descriptive-text-first-letter-font-size: 25px;
--content-height: clamp(100px, 200px, 250px);
--h2-font-size: 19px;
--td-font-size: 9px;
--akasa-manual--image-width: 65vw;
--footer-margin-bottom: 150px;
--nav-li-font-size: 15px;
--left-right-padding-anime-0: 3vw;
--left-right-padding-anime-1: 1vw;
--image-navigation-font-size: 16px;
--navigation-up-down-top: 25px;
--navigation-up-down-wrapper-top: 15%;
}
}
/* Margins */
.margin-div-home {
display: var(--margin-display);
position: fixed;
top: 0px;
bottom: 0px;
width: calc(var(--stack-width) * 0.25);
height: auto;
overflow: hidden;
}
#right-margin {
right: -0.5%;
}
.vertical-0 {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 3vw;
opacity: 1;
}
.rect-0 {
width: 10%;
height: 20%;
fill: rgba(0, 255, 255, 1);
}
.v-1 {
left: 0%;
top: 0%;
animation: v1 10s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes v1 {
0% {
top: -110%;
}
100% {
top: 110%;
}
}
.v-2 {
left: 10%;
top: 10%;
animation: v2 10s infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes v2 {
0% {
top: -100%;
}
100% {
top: 120%;
}
}
.v-3 {
left: 20%;
top: 20%;
animation: v3 10s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes v3 {
0% {
top: -90%;
}
100% {
top: 130%;
}
}
.v-4 {
left: 30%;
top: 30%;
animation: v4 10s infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes v4 {
0% {
top: -80%;
}
100% {
top: 140%;
}
}
.v-5 {
left: 40%;
top: 40%;
animation: v5 10s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes v5 {
0% {
top: -70%;
}
100% {
top: 150%;
}
}
.v-6 {
left: 50%;
top: 50%;
animation: v6 10s infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes v6 {
0% {
top: -60%;
}
100% {
top: 160%;
}
}
.v-7 {
left: 60%;
top: 60%;
animation: v7 10s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes v7 {
0% {
top: -50%;
}
100% {
top: 170%;
}
}
.v-8 {
left: 70%;
top: 70%;
animation: v8 10s infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes v8 {
0% {
top: -40%;
}
100% {
top: 180%;
}
}
.v-9 {
left: 80%;
top: 80%;
animation: v9 10s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes v9 {
0% {
top: -30%;
}
100% {
top: 190%;
}
}
.v-10 {
left: 90%;
top: 90%;
animation: v10 10s infinite;
animation-direction: reverse;
animation-timing-function: linear;
}
@keyframes v10 {
0% {
top: -20%;
}
100% {
top: 200%;
}
}
/* Background */
.stack-div {
width: var(--stack-width);
position: sticky;
margin: 0px;
top: 0px;
}
.background-div {
position: fixed;
margin: 0px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: sticky;
opacity: 0.7;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 1;
}
.background-overlay {
position: absolute;
animation: background-overlay-anime 60s infinite;
animation-direction: alternate;
animation-timing-function: linear;
filter: opacity(0.55);
width: 100%;
height: 100%;
top: 0px;
z-index: 2;
}
@keyframes background-overlay-anime {
0% {
background-image: linear-gradient(
1deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
5% {
background-image: linear-gradient(
18deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
10% {
background-image: linear-gradient(
36deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
15% {
background-image: linear-gradient(
54deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
20% {
background-image: linear-gradient(
72deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
25% {
background-image: linear-gradient(
90deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
30% {
background-image: linear-gradient(
108deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
35% {
background-image: linear-gradient(
126deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
40% {
background-image: linear-gradient(
144deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
45% {
background-image: linear-gradient(
162deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
50% {
background-image: linear-gradient(
180deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
55% {
background-image: linear-gradient(
198deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
60% {
background-image: linear-gradient(
216deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
65% {
background-image: linear-gradient(
234deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
70% {
background-image: linear-gradient(
252deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
75% {
background-image: linear-gradient(
270deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
80% {
background-image: linear-gradient(
288deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
85% {
background-image: linear-gradient(
306deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
90% {
background-image: linear-gradient(
324deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
95% {
background-image: linear-gradient(
342deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
100% {
background-image: linear-gradient(
359deg,
rgba(241, 61, 239, 0.7),
rgba(0, 255, 255, 0.7)
);
}
}
.background-grid {
position: absolute;
background-image: url("https://assets.codepen.io/8174275/background-grid.png");
background-repeat: space;
background-size: 3px 3px;
width: 100%;
height: 100%;
top: 0px;
z-index: 2;
}
/* Navigation Bar */
nav.nav-bar {
padding: 0px;
position: sticky;
top: 0px;
width: var(--stack-width);
margin: auto;
background: rgba(18, 18, 31, 0.7);
text-align: center;
z-index: 30;
}
ul.nav-ul {
list-style-type: none;
margin: 10px;
padding: 1px;
display: inline-block;
}
li.nav-li {
display: inline-block;
padding-left: var(--left-right-padding-anime-1);
padding-right: var(--left-right-padding-anime-1);
padding-top: 0px;
padding-bottom: 0px;
animation: top-bar-anime 5s 1;
animation-timing-function: ease-in;
}
a[href^="#menu-"] {
font-family: 'Barlow Condensed', sans-serif;
font-size: var(--nav-li-font-size);
font-weight: lighter;
}
a[href^="#menu-"]:hover {
background-color: rgba(0, 255, 255, 0.03);
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: rgba(0, 255, 255, 0.9);
animation: top-bar-hover-anime 0.5s infinite;
animation-direction: alternate;
color: rgba(237, 0, 255, 0.79);
}
a[href^="#menu-"]:link {
color: rgb(0, 255, 255);
text-decoration: none;
}
a[href^="#menu-"]:visited {
color: rgb(0, 255, 255);
}
a[href^="#menu-"]:active {
color: rgba(233, 55, 184, 0.9);
filter: drop-shadow(3px 0px 5px rgba(233, 55, 184, 0.7));
}
@keyframes top-bar-anime {
0% {
padding-left: var(--left-right-padding-anime-0);
padding-right: var(--left-right-padding-anime-0);
padding-top: 0px;
padding-bottom: 0px;
}
100% {
padding-left: var(--left-right-padding-anime-1);
padding-right: var(--left-right-padding-anime-1);
padding-top: 0px;
padding-bottom: 0px;
}
}
@keyframes top-bar-hover-anime {
0% {
border-bottom-color: rgba(0, 0, 0, 0.1);
}
100% {
border-bottom-color: rgba(0, 255, 255, 1);
}
}
/* home div */
.menu-home {
position: relative;
overflow: visible;
width: var(--stack-width);
z-index: 6;
top: 1%;
padding-top: 3%;
margin-top: 3%;
}
#article-home {
position: relative;
text-shadow: 0px 0px 1px;
color: rgba(128, 255, 255, 0.79);
text-align: justify;
width: var(--central-width);
left: var(--left);
margin-top: 1%;
z-index: 5;
font-stretch: ultra-expanded;
}
#article-home:first-line {
font-size: calc(var(--descriptive-text-font-size) + 2px);
}
#home-the {
font-size: var(--descriptive-text-first-letter-font-size);
font-weight: bold;
float: left;
margin-top: -.2em;
}
#home-fig {
position: absolute;
z-index: 4;
width: 21%;
top: 15%;
animation: home-fig-anime 30s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes home-fig-anime {
0% {
padding-left: 2%;
filter: drop-shadow(-17px 17px 5px rgba(0, 255, 255, 0.55));
opacity: 1;
}
15% {
opacity: 0.5;
filter: drop-shadow(-15px 15px 15px rgba(0, 255, 255, 0.55));
}
30% {
opacity: 0.2;
filter: drop-shadow(-10px 10px 15px rgba(0, 255, 255, 0.55));
}
75% {
opacity: 0.5;
filter: drop-shadow(12px 12px 15px rgba(0, 255, 255, 0.55));
}
90% {
opacity: 1;
filter: drop-shadow(15px 15px 15px rgba(0, 255, 255, 0.55));
}
100% {
padding-left: 77%;
filter: drop-shadow(17px 17px 5px rgba(0, 255, 255, 0.55));
}
}
.intro-home-section {
position: relative;
width: var(--central-width);
height: var(--content-height);
left: var(--left);
overflow: visible;
}
#intro-home {
position: relative;
padding: 5%;
text-shadow: 0px 0px 1px;
color: rgba(128, 255, 255, 0.79);
text-align: left;
z-index: 4;
font-stretch: ultra-expanded;
}
#intro-fig {
position: relative;
z-index: 5;
padding-top: 3%;
float: right;
animation: intro-fig-anime 15s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes intro-fig-anime {
0% {
width: calc(var(--stack-width) * 0.347);
filter: drop-shadow(-12px 9px 15px rgba(0, 255, 255, 0.55));
}
100% {
width: calc(var(--stack-width) * 0.35);
filter: drop-shadow(15px 15px 30px rgba(241, 61, 239, 0.7));
}
}
/* hardware div */
.menu-hardware {
width: var(--stack-width);
left: 0%;
padding-top: 3%;
position: relative;
z-index: 7;
}
#component-col {
width: 7%;
}
#specs-col {
width: 15%;
}
#table-components {
overflow: visible;
}
#nuc-11-img-table,
#ddr4-img-table,
#ssd980pro-img-table,
#akasa-img-table {
width: 15vw;
margin-left: 2%;
filter: brightness(0.77);
animation: hardware-fig-anime 15s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes hardware-fig-anime {
0% {
margin-left: 2%;
filter: drop-shadow(-12px 9px 10px rgba(0, 255, 255, 0.55));
}
100% {
margin-left: 3%;
filter: drop-shadow(11px 11px 13px rgba(241, 61, 239, 0.7));
}
}
/* assembly div */
.menu-assembly {
width: var(--stack-width);
left: 0px;
padding-top: 5%;
position: relative;
z-index: 7;
margin-bottom: 5%;
}
.akasa-manual-wrapper {
position: relative;
padding-left: 0%;
filter: brightness(370%);
overflow: visible;
}
.akasa-manual {
position: relative;
filter: drop-shadow(0px 2px 2px rgba(0, 255, 255, 0.97));
width: var(--akasa-manual--image-width);
top: 0px;
left: 0px;
z-index: 8;
padding-top: 5%;
}
.akasa-image-container {
position: relative;
z-index: 9;
padding-left: 7vw;
}
.navigation-up-down {
display: flex;
flex-flow: column wrap;
align-items: end;
position: sticky;
top: var(--navigation-up-down-wrapper-top);
z-index: 10;
}
.navigation-up-down > .show-photo-up, .show-photo-down {
position: relative;
left: 0%;
z-index: 10;
font-size: var(--image-navigation-font-size);
padding-top: var(--navigation-up-down-top);
height: var(--navigation-up-down-top);
}
/* about me div */
.menu-aboutme {
width: var(--stack-width);
left: 0px;
margin-top: 3%;
position: relative;
z-index: 11;
}
.myname-text {
animation: myname-anime 1s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes myname-anime {
0% {
transform: rotate(1deg);
filter: drop-shadow(-5px 3px 9px rgba(0, 255, 255, 0.7));
}
25% {
transform: rotate(-1deg);
}
50% {
filter: drop-shadow(5px 5px 8px rgba(241, 61, 239, 0.7));
}
75% {
transform: rotate(1deg);
}
100% {
filter: drop-shadow(-5px 3px 9px rgba(0, 255, 255, 0.9));
}
}
#about-me-video {
width: 90%;
margin-top: 5%;
margin-bottom: 3%;
position: relative;
margin-right: auto;
margin-left: auto;
display: block;
animation: aboutme-video-anime 5s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes aboutme-video-anime {
0% {
border: 3px solid rgba(0, 255, 255, 0.5);
box-shadow: 3px 3px 23px 13px rgba(0, 255, 255, 0.5);
}
100% {
border: 3px solid rgba(241, 61, 239, 0.7);
box-shadow: 3px 3px 23px 13px rgba(241, 61, 239, 0.7);
}
}
/* GP Selectors */
table {
width: 100%;
}
td {
width: 15%;
font-size: var(--td-font-size);
}
tr {
width: var(--central-width);
text-align: center;
}
a {
text-decoration: none;
color: rgba(0, 255, 255, 0.79);
}
a:hover {
color: rgba(233, 55, 184, 0.9);
filter: drop-shadow(3px 0px 5px rgba(233, 55, 184, 0.7));
}
/* GP Containers */
.content-container {
width: var(--central-width);
left: var(--left);
position: relative;
}
/* Animations */
.bottom-line-animation {
animation: bottom-line-anime 5s infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.7, 0.1, 0.7, 1);
}
@keyframes bottom-line-anime {
0% {
border-bottom: 3px solid rgba(0, 255, 255, 0.9);
}
40% {
border-bottom: 3px solid rgba(233, 55, 184, 0.9);
}
100% {
border-bottom: 3px solid rgba(233, 55, 184, 0);
}
}
.bottom-line-animation-no-off {
animation: bottom-line-anime-no-off 5s infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 1);
}
@keyframes bottom-line-anime-no-off {
0% {
border-bottom: 2px solid rgba(0, 255, 255, 0.9);
}
100% {
border-bottom: 2px solid rgba(233, 55, 184, 0.9);
}
}
.animation-reverse-alternate {
animation-direction: alternate-reverse;
}
/* Text styles */
h2 {
font-family: 'Barlow Condensed', sans-serif;
font-size: var(--h2-font-size);
font-weight: lighter;
text-align: center;
}
.descriptive-text {
font-family: 'Barlow Condensed', sans-serif;
font-size: var(--descriptive-text-font-size);
font-weight: lighter;
}
.text-left {
text-align: left;
}
.descriptive-text-link {
text-decoration: none;
color: rgba(0, 150, 255, 0.79);
font-size: var(--descriptive-text-link-font-size);
}
#footer {
position: relative;
width: var(--stack-width);
margin-top: calc(var(--footer-margin-bottom / 2 + 15px));
margin-bottom: var(--footer-margin-bottom);
z-index: 7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment