talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding nice metronic font

Browse Source
This commit is contained in:
Arjun Patel
2022-01-11 13:21:04 -08:00
parent 11c7718823
commit 292a6c2ede
4 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.js
+5 -1
View File
@@ -26,9 +26,13 @@ function MyApp({ Component, pageProps }) {
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
</Head>
<Component {...pageProps} />
<main>
<Component {...pageProps} />
</main>
</>
}
pages/teams/demo.tsx
+25 -18
View File
@@ -1,7 +1,15 @@
import Head from 'next/head'
import Image from 'next/image';
import React from 'react';
import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh, FaAngleDown, FaPlusSquare, FaBroom, FaBell, FaFilePdf } from "react-icons/fa";
import { FaMicrophoneAlt,
FaHeadphonesAlt,
FaTh,
FaAngleDown,
FaPlusSquare,
FaBroom,
FaBell,
FaFilePdf,
FaCopy } from "react-icons/fa";
import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
import { BsThreeDots } from "react-icons/bs";
@@ -146,8 +154,8 @@ export default class Demo extends React.Component<MyProps, MyState> {
<section className="flex-1 flex flex-row items-center justify-between py-5">
{/* welcome message */}
<span className='flex flex-col'>
<span className="font-sans font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
<span className="font-sans text-md text-gray-300">you collabed <span className="text-green-500">1.5 hours</span> and worked <span className="text-orange-500">2 hours</span> yesterday</span>
<span className="font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
<span className="text-md text-gray-300">you collabed <span className="text-green-500">1.5 hours</span> and worked <span className="text-orange-500">2 hours</span> yesterday</span>
</span>
{/* avatar */}
@@ -215,7 +223,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
<div className='flex grow flex-col space-y-5 items-baseline shrink-0'>
{/* announcements */}
<section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5'>
<span className="text-white mr-auto">ANNOUNCEMENTS</span>
@@ -246,7 +254,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
</section>
{/* rooms */}
<section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className="text-white mr-auto">ROOMS</span>
@@ -263,7 +271,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className='flex flex-row space-x-2'>
{/* bugs room */}
<span className='flex flex-col bg-white bg-opacity-60 p-5 rounded-lg'>
<span className='flex flex-col bg-white bg-opacity-80 py-5 px-3 rounded-lg'>
<span className='flex flex-row justify-between items-center space-x-1'>
<span className='flex flex-row pr-10'>
@@ -276,9 +284,8 @@ export default class Demo extends React.Component<MyProps, MyState> {
</span>
</span>
<span className='flex flex-col items-baseline'>
<span className='font-bold text-black mr-auto'>Bugs</span>
<span className='text-grey-300 mr-auto'>Bugs</span>
<span className='text-xs text-gray-400'>started 5 minutes ago</span>
</span>
@@ -295,29 +302,29 @@ export default class Demo extends React.Component<MyProps, MyState> {
</section>
</div>
{/* files */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
</div>
{/* files */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className="text-white mr-auto">FILES</span>
</span>
<div className='flex flex-row'>
<div className='flex flex-row bg-white p-5 rounded-lg items-center justify-start'>
<div className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 rounded-lg items-center justify-start'>
<FaFilePdf className='text-4xl text-orange-300' />
<span className="text-gray-400 text-sm">report.pdf</span>
<span className="text-gray-200 text-sm mr-10">report.pdf</span>
<button className='p-2 text-mx'>
<button className='ml-auto p-2 text-sm'>
<FaCopy className='text-gray-200'/>
</button>
</div>
</div>
</section>
</div>
</div>
@@ -341,7 +348,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className='flex flex-col'>
<span className="text-sm text-black font-bold">{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} </span>
<span className={"text-xs font-sans text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
<span className={"text-xs text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
</span>
</span>
styles/globals.css
+22 -22
View File
@@ -1,5 +1,3 @@
html,
body {
padding: 0;
@@ -17,10 +15,10 @@ a {
box-sizing: border-box;
}
/* my personal css */
html {
background: url('/wallpapers/dark-mountains.jpg') no-repeat center center fixed;
html {
background: url("/wallpapers/dark-mountains.jpg") no-repeat center center
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
@@ -29,10 +27,14 @@ html {
main {
padding: 4em;
font-family: "Poppins", sans-serif;
}
.font-satisfy {
font-family: 'Satisfy', cursive;
font-family: "Satisfy", cursive;
}
.font-poppins {
font-family: "Poppins", sans-serif;
}
.text-teal {
@@ -40,30 +42,29 @@ main {
}
#main-title {
font-family: 'Satisfy', cursive;
font-family: "Satisfy", cursive;
font-size: 2em;
color: teal;
}
#side-note {
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: "Baloo Bhaijaan 2", cursive;
font-size: 1.5em;
}
p {
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: "Baloo Bhaijaan 2", cursive;
font-size: 2em;
color:white;
color: white;
}
#marquee-text {
font-style: italic;
font-size: 1.5em;
font-family: 'Baloo Bhaijaan 2', cursive;
font-style: italic;
font-size: 1.5em;
font-family: "Baloo Bhaijaan 2", cursive;
}
/* Mobile :320px. */
@media (max-width: 767px) {
/* Mobile :320px. */
@media (max-width: 767px) {
main {
padding: 0em;
}
@@ -74,17 +75,16 @@ p {
#side-note {
font-size: 1em;
}
p {
font-size: 1.5em;
}
#marquee-text {
font-size: 1em;
}
}
}
}
@tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
tailwind.config.js
+5 -1
View File
@@ -4,7 +4,11 @@ module.exports = {
"./components/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
extend: {
fontFamily: {
'poppins': ['"Poppins"', 'san serif']
}
},
},
plugins: [],
}