diff --git a/components/HeaderHome/styles.module.scss b/components/HeaderHome/styles.module.scss index 62b2c67..068c9c7 100644 --- a/components/HeaderHome/styles.module.scss +++ b/components/HeaderHome/styles.module.scss @@ -4,8 +4,6 @@ background-size: 100% 12rem; width: 100%; - max-width: var(--maxWidth); - min-width: 30rem; padding-top: 6rem; @media (max-width: 34rem) { diff --git a/components/HeaderPost/styles.module.scss b/components/HeaderPost/styles.module.scss index 739fe22..9737607 100644 --- a/components/HeaderPost/styles.module.scss +++ b/components/HeaderPost/styles.module.scss @@ -7,19 +7,11 @@ $prefix: header-post; justify-content: space-between; width: 100%; - padding: 2rem 5rem 0; + padding: 2rem 5rem; margin: 0; - border-radius: 30px 30px 0 0; - @media (max-width: 34rem) { padding: 1rem 2rem; - border-radius: 0; - - img { - width: 8rem; - height: 8rem; - } } } diff --git a/components/Layout/styles.module.scss b/components/Layout/styles.module.scss index 79b2509..ed7d91e 100644 --- a/components/Layout/styles.module.scss +++ b/components/Layout/styles.module.scss @@ -1,8 +1,11 @@ .layout { + max-width: var(--maxWidth); + width: 100%; height: 100%; margin: 0 auto; padding: 0; + word-break: break-word; } .layout__head { @@ -46,7 +49,7 @@ } } -@media (max-width: 34rem) { +@media (max-width: &sm) { .container { margin: 0 auto; padding: 0; @@ -55,6 +58,12 @@ .main { padding: 1rem 2rem; - font-size: 20px; + } + + .layout__footer { + flex-direction: column; + align-items: center; + text-align: center; + border: 5px solid red; } } diff --git a/pages/_app.tsx b/pages/_app.tsx index dc50aca..402dd47 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,7 +3,7 @@ import type { AppProps } from "next/app"; import "../styles/global.css"; import "../styles/layout.css"; -import "../styles/colors.css"; +import "../styles/_colors.scss"; import "../styles/dracula-clone/index.css"; // Para o Highligh.js diff --git a/pages/posts/styles.module.scss b/pages/posts/styles.module.scss index 1cb9d69..7f3d49d 100644 --- a/pages/posts/styles.module.scss +++ b/pages/posts/styles.module.scss @@ -3,7 +3,7 @@ flex-direction: column; text-align: justify; margin: 1.5rem; - font-size: 1.2rem; + font-size: 1.1rem; p { text-indent: 3rem; @@ -14,7 +14,7 @@ font-size: 2rem; line-height: 1.3; font-weight: 800; - letter-spacing: -0.05rem; + color: var(--yellow); } .post__meta { diff --git a/styles/_breakpoints.scss b/styles/_breakpoints.scss new file mode 100644 index 0000000..9fbe7a8 --- /dev/null +++ b/styles/_breakpoints.scss @@ -0,0 +1,6 @@ +// Bootstrap + +$sm: 576px; +$md: 768px; +$lg: 992px; +$xg: 1200px; \ No newline at end of file diff --git a/styles/colors.css b/styles/_colors.scss similarity index 100% rename from styles/colors.css rename to styles/_colors.scss diff --git a/styles/global.css b/styles/global.css index 06e1857..ef61729 100644 --- a/styles/global.css +++ b/styles/global.css @@ -2,11 +2,11 @@ margin: 0; padding: 0; box-sizing: border-box; + font-family: monospace; } html, body { - font-family: monospace; line-height: 1.6; font-size: 14px; background-color: var(--black); @@ -31,6 +31,16 @@ main { padding-top: 1rem; } +p { + tab-size: 2rem; + -moz-tab-size: 2rem; /* Firefox */ + color: var(--white); /* .drac-text-white */ +} + +/* =================== + TABLE +=================== */ + table, th, td { @@ -59,10 +69,18 @@ u { text-decoration-style: wavy; } +/* =================== + LIST +=================== */ + ul { list-style: none; } +/* =================== + CODE +=================== */ + pre { background-color: rgb(246, 248, 250); border-radius: 6px; @@ -80,17 +98,3 @@ code { word-break: normal; word-wrap: normal; } - -p { - tab-size: 2rem; - -moz-tab-size: 2rem; /* Firefox */ - color: var(--white); /* .drac-text-white */ -} - -@media (max-width: 375px) { - p, - div, - li { - font-size: 1.3rem; - } -} diff --git a/styles/layout.css b/styles/layout.css index 63d57ae..1550b30 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,3 +1,3 @@ :root { - --maxWidth: 72rem; + --maxWidth: 950px; } \ No newline at end of file