aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorjack <[email protected]>2022-03-10 03:05:30 -0700
committerjack <[email protected]>2022-03-10 03:05:30 -0700
commit5d25896dad0a7879740891cc05202b367a63f31a (patch)
treec602c72b3ee5be981f547b2e2d5a962edb2c195c
parentc417664b5c522815114d91e1920fe6b2952dff11 (diff)
downloadsite-5d25896dad0a7879740891cc05202b367a63f31a.tar.gz
site-5d25896dad0a7879740891cc05202b367a63f31a.zip
initial dotfiles page + finally fix containers
-rw-r--r--dotfiles.html54
-rw-r--r--index.html10
-rw-r--r--media/dracula.pngbin0 -> 68930 bytes
-rw-r--r--media/nord.pngbin0 -> 119132 bytes
-rw-r--r--style.css28
5 files changed, 81 insertions, 11 deletions
diff --git a/dotfiles.html b/dotfiles.html
index fcf0250..f010602 100644
--- a/dotfiles.html
+++ b/dotfiles.html
@@ -10,9 +10,61 @@
<body>
<button type="button" onclick="window.location.href='index.html'" class="btn btn2"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_computer.png" alt="pusheen on the computer" class="mx-auto d-block" width="250" height="250">
- <div class="container-fluid c2 text-center border rounded">
+ <div class="container-fluid peach text-center rounded">
<h3>dotfiles</h3>
<p>linux configuration files & notes</p>
</div>
+ <div class="container blue rounded desktop-cont">
+ <div class="row">
+ <div class="col-8">
+ <img src="media/nord.png" class="rounded float-left desktop" alt="nord desktop">
+ </div>
+ <div class="col-4">
+ <h2 class="text-center"><a href="https://github.com/waffle87/dots" target="_blank">nord</a></h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices.
+ Donec id velit eget lacus euismod ornare eu ac leo.
+ </p>
+ <br>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices.
+ Donec id velit eget lacus euismod ornare eu ac leo.
+ </p>
+ <br>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="container lav rounded desktop-cont">
+ <div class="row">
+ <div class="col-4">
+ <h2 class="text-center"><a href="https://github.com/waffle87/dots/tree/pluto" target="_blank">dracula</a></h2>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices.
+ Donec id velit eget lacus euismod ornare eu ac leo.
+ </p>
+ <br>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos. Proin tristique semper varius. Quisque a placerat leo. Praesent tincidunt nec arcu eget egestas. Vestibulum tristique metus ut odio posuere ultrices.
+ Donec id velit eget lacus euismod ornare eu ac leo.
+ </p>
+ <br>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla commodo est a posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos.
+ </p>
+ </div>
+ <div class="col-8">
+ <img src="media/dracula.png" class="rounded float-right desktop" alt="dracula desktop">
+ </div>
+ </div>
+ </div>
</body>
</html>
diff --git a/index.html b/index.html
index b04c465..beb35cc 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,13 @@
<body>
<button type="button" onclick="window.location.href='index.html'" class="btn btn1"><i class="fa-solid fa-house"></i>home</button>
<img src="media/pusheen_hi.png" alt="pusheen says hi" class="mx-auto d-block" width="250" height="250">
- <div class="container-fluid c1 text-center border rounded">
+ <div class="container-fluid lav text-center rounded">
<h3>about</h3>
<p>small keyboard enjoyer & open source enthusiast</p>
</div>
<div class="row">
- <div class="col-md-6">
- <div class="container row1 border rounded">
+ <div class="col col-margins-l">
+ <div class="container row1 rounded">
<h3 class="text-center">info</h3>
<i class="fa-brands fa-github fa-lg"></i>
<a href="https://github.com/waffle87" target="_blank">waffle87</a>
@@ -31,8 +31,8 @@
<a href="media/jack.gpg" class="gpgkey" download>38FE2D9C474B1286</a>
</div>
</div>
- <div class="col-md-6">
- <div class="container row1 border rounded">
+ <div class="col col-margins-r">
+ <div class="container row1 rounded">
<h3 class="text-center">pages</h3>
<i class="fa-solid fa-angle-right"></i>
<a href="dotfiles.html">dotfiles</a>
diff --git a/media/dracula.png b/media/dracula.png
new file mode 100644
index 0000000..ad3999c
--- /dev/null
+++ b/media/dracula.png
Binary files differ
diff --git a/media/nord.png b/media/nord.png
new file mode 100644
index 0000000..806c92f
--- /dev/null
+++ b/media/nord.png
Binary files differ
diff --git a/style.css b/style.css
index e01999a..54c3089 100644
--- a/style.css
+++ b/style.css
@@ -77,26 +77,25 @@ body {
color: var(--dark);
}
-.c1 { /*home*/
+.lav {
background-color: var(--lavender);
margin-bottom: 10px;
max-width: 90%;
-
}
-.c2 { /*dotfiles*/
+.peach {
background-color: var(--peach);
margin-bottom: 10px;
max-width: 90%;
}
-.c3 { /*keyboards*/
+.c3 {
background-color: var(--yellow);
margin-bottom: 10px;
max-width: 90%;
}
-.c4 { /*configuration*/
+.blue {
background-color: var(--blue);
margin-bottom: 10px;
max-width: 90%;
@@ -108,6 +107,14 @@ body {
max-width: 90%;
}
+.col-margins-l {
+ margin-left: 5%;
+}
+
+.col-margins-r {
+ margin-right: 5%;
+}
+
.row1 {
background-color: var(--flamingo);
color: var(--dark);
@@ -138,3 +145,14 @@ a:hover {
}
.gpgkey { font-family: 'Source Code Pro', monospace; }
+
+.desktop {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+.desktop-cont {
+ padding-top: 14px;
+ padding-bottom: 14px;
+ margin-bottom: 15px;
+}