adding daisiui, and creating initial layout

This commit is contained in:
Manuel Ernesto Garcia 2022-09-14 16:38:25 -04:00
parent 5bb063bf70
commit 234acf8537
4 changed files with 146 additions and 112 deletions

BIN
public/profile.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

View file

@ -1,8 +1,8 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
---
<!DOCTYPE html>
@ -11,19 +11,37 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<div class="drawer drawer-mobile">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col items-center justify-center">
<Header title={SITE_TITLE} />
<main>
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<div class="p-5">
<div class="card card-side bg-base-100 shadow-xl">
<figure><img src="https://placeimg.com/200/280/arch" alt="Movie" /></figure>
<div class="card-body">
<h2 class="card-title">New movie is released!</h2>
<p>Click the button to watch on Jetflix app.</p>
<div class="card-actions justify-end">
<div class="badge badge-outline">Fashion</div>
<div class="badge badge-outline">Products</div>
</div>
</div>
</div>
</div>
<h1 class="font-bold">🧑‍🚀 Hello, Astronaut!</h1>
<p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build
a personal website, blog, or portfolio with Astro.
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a
lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with
Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project.
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, React, or Vue to your
project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
@ -34,9 +52,9 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
</ul>
<p>
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
>read the docs
</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/">read the docs</a> or <a
href="https://astro.build/chat">join us on Discord</a
> to ask questions.
</p>
<p>
Looking for a blog template with a bit more personality? Check out <a
@ -46,5 +64,88 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
</p>
</main>
<Footer />
</div>
<div class="drawer-side bg-base-200">
<div class="menu p-4 overflow-y-auto w-72 text-base-content flex-col">
<div class="w-fit">
<div class="avatar transition ease-in-out w-1/2 hover:scale-110 block m-auto mt-3 mb-6">
<div class="rounded-full">
<img src="/profile.jpg" />
</div>
</div>
</div>
<ul>
<!-- Sidebar content here -->
<li><a>About</a></li>
<li><a>Projects</a></li>
<li><a>Blog</a></li>
<li><a>CV</a></li>
<li><a>Comunity</a></li>
<li><a>Support my Work</a></li>
<li><a>Contact</a></li>
</ul>
<div class="grow"></div>
<div class="social-icons px-4 my-2 flex self-center">
<a href="https://github.com/manuelernestog" target="_blank" class="mx-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-github"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</a>
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-twitter"
viewBox="0 0 16 16"
>
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
></path>
</svg>
</a>
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-telegram"
viewBox="0 0 16 16"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
></path>
</svg>
</a>
<a href="https://twitter.com/manuelernestog" target="_blank" class="mx-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
class="bi bi-linkedin"
viewBox="0 0 16 16"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

View file

@ -1,67 +0,0 @@
/*
The CSS in this style tag is based off of Bear Blog's default CSS.
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
body {
font-family: Verdana, sans-serif;
margin: auto;
padding: 20px;
max-width: 65ch;
text-align: left;
background-color: #fff;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: #444;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #222;
}
a {
color: #3273dc;
}
nav a {
margin-right: 10px;
}
textarea {
width: 100%;
font-size: 16px;
}
input {
font-size: 16px;
}
content {
line-height: 1.6;
}
table {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
code {
padding: 2px 5px;
background-color: #f2f2f2;
}
pre {
padding: 1rem;
}
pre > code {
all: unset;
}
blockquote {
border: 1px solid #999;
color: #222;
padding: 2px 0px 2px 20px;
margin: 0px;
font-style: italic;
}

View file

@ -4,5 +4,5 @@ module.exports = {
theme: {
extend: {},
},
plugins: [],
plugins: [require("daisyui")],
}