Compare commits
No commits in common. "84f591833df829458cc9eea754fc751027a80060" and "fd0a173e9c31c9f48381d3b0d432bf0f5dc37439" have entirely different histories.
84f591833d
...
fd0a173e9c
@ -1,40 +0,0 @@
|
||||
import './style.css';
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className={"bg-secondary footer-container"}>
|
||||
<div className={"content text-left footer-section"}>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>LOCATION</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Highest Rated</a>
|
||||
<a href={'#'} className={'text-sm block'}>Lowest Rated</a>
|
||||
<a href={'#'} className={'text-sm block'}>Recently Added</a>
|
||||
<a href={'#'} className={'text-sm block'}>Random</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>REGION</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Jawa</a>
|
||||
<a href={'#'} className={'text-sm block'}>Kalimantan</a>
|
||||
<a href={'#'} className={'text-sm block'}>Nusa Tenggara</a>
|
||||
<a href={'#'} className={'text-sm block'}>Papua</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sulawesi</a>
|
||||
<a href={'#'} className={'text-sm block'}>Sumatra</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>MORE</h2>
|
||||
<a href={"#"} className={'text-sm block'}>On this day</a>
|
||||
<a href={"#"} className={'text-sm block'}>Site updates</a>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
|
||||
<h2 className={'font-bold text-md'}>SITE DETAILS</h2>
|
||||
<a href={'#'} className={'text-sm block'}>Faq</a>
|
||||
<a href={'#'} className={'text-sm block'}>Privacy policy</a>
|
||||
<a href={'#'} className={'text-sm block'}>Feedback</a>
|
||||
<a href={'#'} className={'text-sm block'}>Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer;
|
@ -1,10 +0,0 @@
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
padding-bottom: 4vh;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
line-height: 1.75;
|
||||
}
|
@ -30,7 +30,7 @@ function Header() {
|
||||
return (
|
||||
<header>
|
||||
<div className="flex flex-row content">
|
||||
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
|
||||
<h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>HilingRiviw</h1>
|
||||
<form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
|
||||
<label>
|
||||
<input
|
||||
|
@ -13,7 +13,7 @@ function SeparatorWithAnchor(props: SeparatorProps) {
|
||||
<a href={props.pageLink}>{props.pageName}</a>
|
||||
</h1>
|
||||
{props.secondLink &&
|
||||
<a href={props.secondLink} className={"text-xs"}>View all</a>
|
||||
<a href={props.secondLink} className={"text-sm"}>View all</a>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
@ -1,9 +1,4 @@
|
||||
.divider {
|
||||
border-bottom-width: 1px;
|
||||
padding-bottom: 3px;
|
||||
border-color: #38444d;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #92a8b7;
|
||||
}
|
@ -1,9 +1,7 @@
|
||||
import Header from "./Header";
|
||||
import SeparatorWithAnchor from "./Separator/WithAnchor";
|
||||
import Footer from './Footer/';
|
||||
|
||||
export {
|
||||
Header,
|
||||
SeparatorWithAnchor,
|
||||
Footer
|
||||
SeparatorWithAnchor
|
||||
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -3,7 +3,7 @@
|
||||
/* @tailwind component; */
|
||||
|
||||
:root {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
|
88
src/lato.css
88
src/lato.css
@ -1,88 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-LightItalic.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Italic.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-MediumItalic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-BoldItalic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('./fonts/Lato-BlackItalic.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
import { Footer, Header } from "../../components";
|
||||
import { Header } from "../../components";
|
||||
|
||||
type ChildrenProps = {
|
||||
children: ComponentChildren
|
||||
@ -12,7 +12,38 @@ function DefaultLayout({ children }: ChildrenProps) {
|
||||
<main style={{ overflow: 'hidden' }}>
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
<footer className={"bg-secondary"} style={{ width: "100%", clear: 'both', overflow: 'hidden', paddingBottom: 50}}>
|
||||
<div className={"content text-left"}>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
|
||||
<h2>Location</h2>
|
||||
<p>Highest Rated</p>
|
||||
<p>Lowest Rated</p>
|
||||
<p>Recently Added</p>
|
||||
<p>Random</p>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
|
||||
<h2>IDK</h2>
|
||||
<p>Jawa</p>
|
||||
<p>Kalimantan</p>
|
||||
<p>Nusa Tenggara</p>
|
||||
<p>Papua</p>
|
||||
<p>Sulawesi</p>
|
||||
<p>Sumatra</p>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
|
||||
<h2>MORE</h2>
|
||||
<p>On this day</p>
|
||||
<p>Site updates</p>
|
||||
</div>
|
||||
<div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
|
||||
<h2>SITE DETAILS</h2>
|
||||
<p>FAQ</p>
|
||||
<p>PRIVACY Policy</p>
|
||||
<p>Feedback</p>
|
||||
<p>Contact Us</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { render } from 'preact'
|
||||
import { App } from './app.tsx'
|
||||
import './index.css'
|
||||
import './lato.css';
|
||||
|
||||
render(<App />, document.getElementById('app')!)
|
||||
|
@ -30,6 +30,16 @@ type News = {
|
||||
}
|
||||
|
||||
function Home() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
const getUrl = async () => {
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getUrl();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<div className="content main-content mt-3">
|
||||
@ -39,30 +49,31 @@ function Home() {
|
||||
<SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
|
||||
{data.new_places.map((x: NewPlaces) => (
|
||||
<div className={"recently-added-section-card"}>
|
||||
<div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
|
||||
{/* <p>{x.id}</p> */}
|
||||
<div style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7 }}>
|
||||
<img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
|
||||
</div>
|
||||
<div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
|
||||
<p className={'location-title'}>{x.name}</p>
|
||||
<p className={'text-xs mt-1'}>{x.location}</p>
|
||||
<div style={{ textAlign: 'left', borderBottomWidth: 1 }}>
|
||||
<p>{x.name}</p>
|
||||
<p>{x.location}</p>
|
||||
</div>
|
||||
<div className={"flex flex-row items-center mb-3"}>
|
||||
<div className={'mr-3'}>
|
||||
<p className={'text-sm text-center'}>{x.critic_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<div className={"flex flex-row"}>
|
||||
<div>
|
||||
<p>{x.critic_rating}</p>
|
||||
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<p className={"text-sm text-tertiary"}>critic score ({x.critic_voters})</p>
|
||||
<p>Critic Score ({x.critic_voters})</p>
|
||||
</div>
|
||||
<div className={"flex flex-row items-center"}>
|
||||
<div className={'mr-3'}>
|
||||
<p className={'text-sm text-center'}>{x.user_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: ` ${x.user_rating}%`, backgroundColor: 'green' }} />
|
||||
<div className={"flex flex-row"}>
|
||||
<div>
|
||||
<p>{x.user_rating}</p>
|
||||
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<p className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
|
||||
<p>User score ({x.user_voters})</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -76,17 +87,17 @@ function Home() {
|
||||
<SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
|
||||
<div className={"mt-5"}>
|
||||
{news.data.map((x: News) => (
|
||||
<div class={"text-sm news-card"}>
|
||||
<div style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
|
||||
<div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
|
||||
<img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
|
||||
</div>
|
||||
<a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
|
||||
<p className={'mt-2 mb-2'}>{x.header}</p>
|
||||
<a target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
|
||||
<p>{x.header}</p>
|
||||
<div className={"flex flex-row"}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
|
||||
<p className={"mr-3 ml-1"}>{x.likes_count}</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="16" viewBox="0 -960 960 960" width="18"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
|
||||
<p className={"ml-1"}>{x.comments_count}</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
|
||||
<p>{x.likes_count}</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
|
||||
<p>{x.comments_count}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@ -98,60 +109,55 @@ function Home() {
|
||||
|
||||
{/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
||||
<section className={"mt-10"}>
|
||||
<div class={"grid grid-cols-4 lg:gap-12"}>
|
||||
<div className={'col-span-4 lg:col-span-2 trending-section'}>
|
||||
<div class={"grid grid-cols-4 gap-12"}>
|
||||
<div className={'col-span-2 mr-5'}>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
|
||||
<div className={'grid grid-cols-4 md:grid-cols-3'}>
|
||||
<div className={'grid grid-cols-3'}>
|
||||
{popular.data.map((x) => (
|
||||
<div className={"m-2 text-sm col-span-2 md:col-span-1"}>
|
||||
<div className={"mb-2 trending-image-container"}>
|
||||
<img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
<p>{x.name}</p>
|
||||
<p className={"text-xs"}>{x.location}</p>
|
||||
<div>
|
||||
|
||||
<div className={"m-2"}>
|
||||
<div style={{ overflow: 'hidden', borderRadius: 7 }}>
|
||||
<img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
|
||||
</div>
|
||||
<p>{x.name}</p>
|
||||
<p>{x.location}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={'col-span-2 lg:col-span-1'}>
|
||||
<div>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
|
||||
{critics_users_pick.critics.map((x) => (
|
||||
<div className={"pt-2 text-sm"}>
|
||||
<div className={'mr-2 critics-users-image'}>
|
||||
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
|
||||
<div className={"mt-1"}>
|
||||
<div style={{ width: 72, height: 72, float: 'left' }}>
|
||||
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
|
||||
</div>
|
||||
<p className={'location-title'}>{x.name}</p>
|
||||
<p className={'text-xs location-province location-title'}>{x.location}</p>
|
||||
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
|
||||
<p className={'text-xs ml-2'}>{x.critic_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<p>{x.name}</p>
|
||||
<p>{x.location}</p>
|
||||
<div style={{ display: 'inline-block' }}>
|
||||
<p>{x.critic_rating} ({x.critic_voters})</p>
|
||||
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ clear: 'both'}} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className={'col-span-2 lg:col-span-1'}>
|
||||
<div>
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
|
||||
{critics_users_pick.users.map((x) => (
|
||||
<div className={"pt-2 text-sm"}>
|
||||
<div className={'mr-2 critics-users-image'}>
|
||||
<img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
|
||||
<div className={"mt-1"}>
|
||||
<div style={{ width: 72, height: 72, float: 'left' }}>
|
||||
<img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
|
||||
</div>
|
||||
<p className={'location-title'}>{x.name}</p>
|
||||
<p className={'text-xs location-province location-title'}>{x.location}</p>
|
||||
<div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
|
||||
<p className={'text-xs ml-2'}>{x.user_rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
|
||||
<p>{x.name}</p>
|
||||
<p>{x.location}</p>
|
||||
<div style={{ display: 'inline-block' }}>
|
||||
<p>{x.user_rating} ({x.user_rating})</p>
|
||||
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ clear: 'both'}} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
@ -164,23 +170,22 @@ function Home() {
|
||||
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
|
||||
<div>
|
||||
{popular_user_review.data.map((x) => (
|
||||
<div className={'text-sm'} style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
|
||||
<div style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
|
||||
<div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
|
||||
<img src={x.thumbnail} style={{ width: '100%' }} />
|
||||
</div>
|
||||
<p className={"text-sm location-titles"}>{x.place_name}</p>
|
||||
<p className={'text-xs mb-2'}>{x.location}</p>
|
||||
<p style={{ whiteSpace: 'nowrap' }} className={"text-sm"}>{x.place_name}</p>
|
||||
<p className={'text-sm'}>{x.location}</p>
|
||||
<p className={'text-sm'}>{x.username}</p>
|
||||
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
|
||||
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
|
||||
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
||||
<p>{x.rating}</p>
|
||||
<div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
|
||||
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ clear: 'both'}} className={'mb-3'}/>
|
||||
<div>
|
||||
{x.message}
|
||||
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
|
||||
<p>{x.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
@ -188,6 +193,30 @@ function Home() {
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-row">
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src={viteLogo} class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://preactjs.com" target="_blank">
|
||||
<img src={preactLogo} class="logo preact" alt="Preact logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + Preact</h1>
|
||||
<div class="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/app.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Preact logos to learn more
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold underline text-prime" >
|
||||
Hello world!
|
||||
</h1>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
|
||||
|
@ -11,50 +11,6 @@
|
||||
width: 16.6%;
|
||||
}
|
||||
|
||||
.location-container {
|
||||
text-align: left;
|
||||
border-bottom-width: 1px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.location-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
color: #fbc531;
|
||||
}
|
||||
|
||||
.news-link:hover{
|
||||
color: #b99229;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
display: inline-block;
|
||||
width: 33.3%;
|
||||
padding: 0 1% 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
.trending-image-container {
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.critics-users-image {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.critics-users-rating-container {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.recently-added-section-card {
|
||||
@ -66,13 +22,6 @@
|
||||
.recently-added-section-card {
|
||||
width: 33.3%;
|
||||
}
|
||||
.news-card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.trending-section {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
@ -81,28 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
.news-card {
|
||||
width: 100%;
|
||||
}
|
||||
/* @media screen and (max-width: 425px) {
|
||||
|
||||
.location-title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.critics-users-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.location-province {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.trending-image-container {
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
} */
|
@ -6,15 +6,7 @@ export default {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
primary: '#202225',
|
||||
secondary: '#2f3136',
|
||||
tertiary: '#a8adb3'
|
||||
},
|
||||
borderColor: {
|
||||
primary: '#38444d',
|
||||
secondary: '#202225'
|
||||
},
|
||||
fontFamily: {
|
||||
lato: ['Lato', 'sans-serif']
|
||||
secondary: '#2f3136'
|
||||
},
|
||||
fontSize: {
|
||||
xs: ['0.75rem', { lineHeight: '1rem' }],
|
||||
|
Loading…
Reference in New Issue
Block a user