mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Move page styles to the main styles folder
This commit is contained in:
Hazem Krimi
+1
-1
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Head from 'next/head';
|
||||
import IconButton from '../components/IconButton';
|
||||
import { Wrapper } from './styles/404';
|
||||
import { Wrapper } from '../styles/404';
|
||||
|
||||
const NotFound: FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import React, { FC, useContext, useState } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import { useForm, ValidationError } from '@formspree/react';
|
||||
import Head from 'next/head';
|
||||
import { Wrapper } from './styles/about';
|
||||
import { Wrapper } from '../styles/about';
|
||||
import Image from 'next/image';
|
||||
import Input from '../components/Input';
|
||||
import MDXButton from '../components/MDXButton';
|
||||
|
||||
@@ -7,7 +7,7 @@ import { MDXEmbedProvider } from 'mdx-embed';
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
import renderToString from 'next-mdx-remote/render-to-string';
|
||||
import hydrate from 'next-mdx-remote/hydrate';
|
||||
import { Wrapper } from '../styles/blog/slug';
|
||||
import { Wrapper } from '../../styles/blog/slug';
|
||||
import matter from 'gray-matter';
|
||||
import components from '../../components';
|
||||
import Head from 'next/head';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FC } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import { getBlogPosts } from '../../utils/blog';
|
||||
import { Wrapper } from '../styles/blog';
|
||||
import { Wrapper } from '../../styles/blog';
|
||||
import Card from '../../components/Card';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import Head from 'next/head';
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
||||
import { getPortfolioProjects } from '../utils/portfolio';
|
||||
import { getBlogPosts } from '../utils/blog';
|
||||
import { GetStaticProps } from 'next';
|
||||
import { Wrapper } from './styles/home';
|
||||
import { Wrapper } from '../styles/home';
|
||||
import Hero from '../components/Hero';
|
||||
import Button from '../components/Button';
|
||||
import Card from '../components/Card';
|
||||
|
||||
@@ -9,7 +9,7 @@ import renderToString from 'next-mdx-remote/render-to-string';
|
||||
import hydrate from 'next-mdx-remote/hydrate';
|
||||
import matter from 'gray-matter';
|
||||
import components from '../../components';
|
||||
import { Wrapper } from '../styles/portfolio/slug';
|
||||
import { Wrapper } from '../../styles/portfolio/slug';
|
||||
import Head from 'next/head';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import CodeBlock from '../../components/CodeBlock';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FC } from 'react';
|
||||
import { getPortfolioProjects } from '../../utils/portfolio';
|
||||
import { useRouter } from 'next/router';
|
||||
import { Wrapper } from '../styles/portfolio';
|
||||
import { Wrapper } from '../../styles/portfolio';
|
||||
import Card from '../../components/Card';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import Head from 'next/head';
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 65vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
color: #3f9aee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
`;
|
||||
@@ -1,61 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div<{ dark: boolean }>`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem;
|
||||
grid-template-columns: auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.photo {
|
||||
order: initial;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about,
|
||||
.contact {
|
||||
margin: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #73d26b;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
.error {
|
||||
color: #d75050;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,35 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -1,90 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,48 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1rem;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio,
|
||||
.blog {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.projects-wrapper,
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -1,35 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
@@ -1,78 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #3f9aee;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user