Annika/tomodachi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor, and polish formatting

Browse Source
This commit is contained in:
Annika
2022-05-13 16:03:01 -06:00
parent a2f80408b0
commit 8ed9a003da
4 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ABSTRACT.TTF
BIN
View File
Binary file not shown.
index.html
+23 -19
View File
@@ -32,7 +32,7 @@
<main> <main>
<section id="hero-img" class="container-fluid p-5"> <section id="hero-img" class="container-fluid p-5">
<div class="row"> <div class="row">
<div class="col-md-3" id="signup-box"> <div class="col-md-3 subway" id="signup-box">
<h4 class="txt-lt">Keep updated</h4> <h4 class="txt-lt">Keep updated</h4>
<div class="card bg-blur sq"> <div class="card bg-blur sq">
<div class="card-body"> <div class="card-body">
@@ -95,8 +95,8 @@
</div> </div>
<div class="col-6 offset-1 d-none d-md-block txt-lt"> <div class="col-6 offset-1 d-none d-md-block txt-lt">
<div class="left-bar px-2"> <div class="left-bar px-2">
<h4>The Retro Renaissance is Here!</h4> <h4 class="tomodachi fs-4">The Retro Renaissance is Here!</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p> <p class="subway">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -104,19 +104,19 @@
<section id="pitch-bar" class="container-fluid txt-lt bg-drk"> <section id="pitch-bar" class="container-fluid txt-lt bg-drk">
<div class="row"> <div class="row">
<div class="col-md-7 order-md-1"> <div class="col-md-7 order-md-1">
<div class="card hanging-card mx-2 my-3 my-md-0 mx-md-5 txt-lt bg-trans sq display-6 p-3 px-5"> <div class="card hanging-card mx-2 my-3 my-md-0 mx-md-5 txt-lt bg-trans sq fs-2 p-3 px-4 px-md-5">
<ul class="list-unstyled"> <ul class="list-unstyled dyn-fsize-3 subway">
<li>🐈 lorem3</li> <li><i class="mdi mdi-chip"></i> Blazing Fast 50MHz eZ80</li>
<li>🐈 lorem3</li> <li><i class="mdi mdi-memory"></i> 4MiB Low Latency SRAM</li>
<li>🐈 lorem3</li> <li><i class="mdi mdi-space-invaders"></i> Full 15-bit Color Graphics</li>
<li>🐈 lorem3</li> <li><i class="mdi mdi-speaker"></i> Stereo Wavetable Synthesis</li>
<li>🐈 lorem3</li> <li><i class="mdi mdi-keyboard"></i> Compact Mechanical Keyboard</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-md-5 txt-lt p-5"> <div class="col-md-5 txt-lt p-5">
<h3>Powerful 16-bit Computing, in an Affordable Package!</h3> <h3 class="fs-5 fs-md-4 tomodachi">Powerful 24-bit Computing, in an Affordable Package!</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.</p> <p class="subway">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.</p>
</div> </div>
</div> </div>
</section> </section>
@@ -127,19 +127,23 @@
<img class="" src="macboard.jpg" alt=""> <img class="" src="macboard.jpg" alt="">
</div> </div>
<div class="col-md-9 p-5 mt-md-15vh txt-lt"> <div class="col-md-9 p-5 mt-md-15vh txt-lt">
<h4 class="display-4">🐈 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4> <h4 class="fs-4 fs-md-3 tomodachi"><i class="mdi mdi-desktop-classic"></i> Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
<p class="fs-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p> <p class="fs-5 subway">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p>
<p class="fs-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p> <p class="fs-5 subway">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="reviews" class="container-fluid bg-dgry"> <section id="reviews" class="container-fluid bg-dgry subway">
<div class="row p-3 p-md-5 full-height mh-40vh"> <div class="row p-3 p-md-5 full-height mh-40vh">
<div class="col-md-4 my-2 my-md-0 order-md-1"> <div class="col-md-4 my-2 my-md-0 order-md-1">
<div class="card full-height sq bg-grey txt-lt"> <div class="card full-height sq bg-grey txt-lt">
<div class="card-body text-center"> <div class="card-body text-center">
<h4 class="fs-1">💯💯💯</h4> <h4 class="fs-1 txt-red">
<i class="mdi mdi-space-invaders"></i>
<i class="mdi mdi-space-invaders"></i>
<i class="mdi mdi-space-invaders"></i>
</h4>
<p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p> <p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
<p class="fs-6 txt-red fw-bold">Lorem ipsum dolor sit amet consectetur.</p> <p class="fs-6 txt-red fw-bold">Lorem ipsum dolor sit amet consectetur.</p>
</div> </div>
@@ -165,11 +169,11 @@
</section> </section>
</main> </main>
<footer> <footer>
<section class="bg-grey mh-20vh txt-lt p-5"> <section class="bg-grey mh-20vh txt-lt p-5 subway">
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4> <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.</p>
</section> </section>
<section class="bg-dgry mh-10vh txt-lt d-flex align-items-center justify-content-center p-1"> <section class="bg-dgry mh-10vh txt-lt d-flex align-items-center justify-content-center p-1 subway">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p>
</section> </section>
</footer> </footer>
style.css
+23 -2
View File
@@ -5,7 +5,12 @@
@font-face { @font-face {
font-family: "DEADCRT"; font-family: "DEADCRT";
src: url("DEADCRT.ttf") src: url("DEADCRT.ttf");
}
@font-face {
font-family: "subway";
src: url("subway.ttf")
} }
header { header {
@@ -17,7 +22,7 @@ header {
.site-title { .site-title {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: "DEADCRT"; font-family: "DEADCRT", monospace;
/* background-color: var(--dark-bg); */ /* background-color: var(--dark-bg); */
color: white; color: white;
padding-left: 2em; padding-left: 2em;
@@ -31,6 +36,14 @@ header {
z-index: 99; z-index: 99;
} }
.tomodachi {
font-family: "DEADCRT";
}
.subway {
font-family: 'subway', monospace;
}
#hero-img { #hero-img {
background-image: url("hero-bg.jpg"); background-image: url("hero-bg.jpg");
min-height: 60vh; min-height: 60vh;
@@ -51,6 +64,10 @@ header {
background-color: var(--dark-bg); background-color: var(--dark-bg);
} }
.dyn-fsize-3 {
font-size: 16px;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.hanging-card { .hanging-card {
min-height: 30vh; min-height: 30vh;
@@ -62,6 +79,10 @@ header {
.mt-md-15vh { .mt-md-15vh {
margin-top: 15vh; margin-top: 15vh;
} }
.dyn-fsize-3 {
font-size: 32px;
}
} }
subway.ttf
BIN
View File
Binary file not shown.