New font, and only scroll the infos
This commit is contained in:
parent
74da396a8b
commit
0f45ccbc39
5 changed files with 16 additions and 6 deletions
BIN
public/LexendDeca-Regular.ttf
Normal file
BIN
public/LexendDeca-Regular.ttf
Normal file
Binary file not shown.
|
@ -2,10 +2,18 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "LexendDeca";
|
||||||
|
src: url("/LexendDeca-Regular.ttf") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.App {
|
.App {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
font-family:"LexendDeca", "Arial", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
10
src/App.jsx
10
src/App.jsx
|
@ -5,11 +5,13 @@ import Infos from "./components/Infos";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App md:flex">
|
<div className="App bg-gradient-to-b from-sky-500 to-white md:flex">
|
||||||
<div className="md:w-screen">
|
<div className="h-screen w-screen" style={{marginRight: "363px"}}>
|
||||||
<h1 className="text-3xl font-bold underline">Simple website thingie</h1>
|
<h1 className="text-8xl font-bold">Hi, I'm Taevas!</h1>
|
||||||
|
<h2 className="text-3xl font-bold">If you're here, you're probably interested by who I am and what I do</h2>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="md:w-96">
|
<div>
|
||||||
<Infos />
|
<Infos />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import Anilist from "./infos/Anilist";
|
||||||
|
|
||||||
function Infos() {
|
function Infos() {
|
||||||
return (
|
return (
|
||||||
<div className="bg-gradient-to-r from-sky-600 to-indigo-600 text-white inline-block static">
|
<div className="h-full fixed right-0 overflow-y-auto border-l-3 border-white border-solid bg-gradient-to-r from-sky-600 to-indigo-600 text-white inline-block static">
|
||||||
<Lastfm/>
|
<Lastfm/>
|
||||||
<Speedruncom/>
|
<Speedruncom/>
|
||||||
<Git/>
|
<Git/>
|
||||||
|
|
|
@ -29,7 +29,7 @@ export default function Info({
|
||||||
return (
|
return (
|
||||||
<div className="m-5 flex w-80 border-l-3 border-r-3 border-b-3 border-white border-solid" id={type.toLowerCase()}>
|
<div className="m-5 flex w-80 border-l-3 border-r-3 border-b-3 border-white border-solid" id={type.toLowerCase()}>
|
||||||
<h2 className="[text-orientation:upright] [writing-mode:vertical-rl]
|
<h2 className="[text-orientation:upright] [writing-mode:vertical-rl]
|
||||||
uppercase text-start text-2xl tracking-tighter font-bold pt-2
|
uppercase text-start text-2xl tracking-[-.1em] font-bold pt-2
|
||||||
border-r-3 border-t-3 border-white border-solid
|
border-r-3 border-t-3 border-white border-solid
|
||||||
bg-sky-800">
|
bg-sky-800">
|
||||||
{type}
|
{type}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue