-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from vim/implement-style-guide
Implement style guide
- Loading branch information
Showing
10 changed files
with
147 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,16 @@ | ||
| import React from "react"; | ||
| import Link from "next/link"; | ||
|
|
||
| export default function Footer() { | ||
| return ( | ||
| <footer className="w-full flex justify-center items-center pb-3"> | ||
| <a href="/impressum">Impressum</a> | ||
| <span className="border-x-2 border-primary h-9 mx-3 w-0" /> | ||
| <a href="/copyright">Copyright</a> | ||
| <footer className="w-full flex justify-center items-center"> | ||
| <Link className="link" href="/impressum"> | ||
| Impressum | ||
| </Link> | ||
| <span className="border-x-2 border-primary h-16 mx-12" /> | ||
| <Link className="link" href="/copyright"> | ||
| Copyright | ||
| </Link> | ||
| </footer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| .btn-primary { | ||
| @apply border-solid border-[1px] rounded-xl border-secondary text-secondary py-3 px-6 transition-all hover:bg-secondary hover:text-white; | ||
| @apply border-solid border-[1px] rounded border-primary font-normal text-primary text-md py-2 px-6 lg:py-4 lg:px-12 transition-colors hover:bg-primary-opacity; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,61 @@ | ||
| .heading { | ||
| @apply font-[400] text-secondary; | ||
| .h1 { | ||
| @apply font-fira font-semibold text-primary text-xl mb-8; | ||
| } | ||
|
|
||
| .h2 { | ||
| @apply font-fira font-semibold text-primary text-lg mb-6; | ||
| } | ||
|
|
||
| .h1-prefix { | ||
| @extend .h1; | ||
|
|
||
| &::before { | ||
| content: ">_ "; | ||
| } | ||
| } | ||
|
|
||
| @screen sm { | ||
| @apply mb-5; | ||
| } | ||
| .h2-prefix { | ||
| @extend .h2; | ||
|
|
||
| @screen md { | ||
| @apply mb-6; | ||
| &::before { | ||
| content: "> "; | ||
| } | ||
| } | ||
|
|
||
| @screen lg { | ||
| @apply mb-7; | ||
| } | ||
| p.paragraph { | ||
| @apply font-fira font-normal text-base text-white; | ||
| } | ||
|
|
||
| @screen xl { | ||
| @apply mb-8; | ||
| a.link { | ||
| &:link { | ||
| @apply font-normal font-semibold text-base text-white underline; | ||
| } | ||
| } | ||
|
|
||
| .h1 { | ||
| @extend .heading; | ||
| font-size: clamp(3rem, 5vw, 5rem); | ||
| } | ||
| &:visited { | ||
| @apply text-gray-1; | ||
| } | ||
|
|
||
| .h2 { | ||
| @extend .heading; | ||
| font-size: clamp(2rem, 4vw, 4rem); | ||
| } | ||
| &:hover { | ||
| @apply text-primary; | ||
| } | ||
|
|
||
| .h3 { | ||
| @extend .heading; | ||
| font-size: clamp(1.75rem, 3.5vw, 3rem); | ||
| } | ||
| &:focus { | ||
| @apply text-red-600; | ||
| } | ||
|
|
||
| .h4 { | ||
| @extend .heading; | ||
| font-size: clamp(1.5rem, 3vw, 2.5rem); | ||
| &:active { | ||
| @apply text-primary; | ||
| } | ||
| } | ||
|
|
||
| .h5 { | ||
| @extend .heading; | ||
| font-size: clamp(1.5rem, 2.5vw, 1.75rem); | ||
| } | ||
| ul.list { | ||
| @apply ml-2; | ||
|
|
||
| .h6 { | ||
| @extend .heading; | ||
| font-size: clamp(1.5rem, 2vw, 1.25rem); | ||
| } | ||
| > li { | ||
| @apply list-['>'] text-white; | ||
|
|
||
| ul.list li { | ||
| list-style-type: "> "; | ||
| > span { | ||
| @apply block text-base ml-2; | ||
| } | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,18 @@ | ||
| @import "./components.scss"; | ||
| @import "./text.scss"; | ||
| @import "./btns.scss"; | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| :root { | ||
| --foreground-rgb: 0, 0, 0; | ||
| --background-start-rgb: 214, 219, 220; | ||
| --background-end-rgb: 255, 255, 255; | ||
| --color-primary: #79fb2a; | ||
| --color-secondary: #45ff02; | ||
| --color-tertiary: #e74c3c; | ||
| --c-gray-1: #313131; | ||
| --c-gray-2: #222222; | ||
| --c-gray-3: #1b1b1b; | ||
| --primary-text: #333; | ||
| --secondary-text: #555; | ||
| --c-primary: #45ff02; | ||
| --c-primary-opacity: #45ff0215; | ||
| --c-gray-1: #c7c7c620; | ||
| --c-gray-2: #7f7f7f25; | ||
| --c-gray-3: #cccccc; | ||
| --c-gray-4: #313131; | ||
| --c-gray-5: #222222; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| :root { | ||
| --foreground-rgb: 255, 255, 255; | ||
| --background-start-rgb: 0, 0, 0; | ||
| --background-end-rgb: 0, 0, 0; | ||
| } | ||
| } | ||
|
|
||
| body { | ||
| color: rgb(var(--foreground-rgb)); | ||
| background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); | ||
| html { | ||
| @apply h-full bg-gray-4; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters