on master help sign in
polish rnd 2
f34a1b8Gavin Atkinson
components/Header.js+1−1
@@ -48,7 +48,7 @@ export default function Header(props) {
48 }, []);
48 }, []);
49
49
50 return (
50 return (
51− <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
51+ <header className="layout px-4 md:px-8 flex justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
52 <div>
52 <div>
53 <Link href="/">
53 <Link href="/">
54 <a className="type-ui">Urbit</a>
54 <a className="type-ui">Urbit</a>
components/Section.js+2−2
@@ -10,8 +10,8 @@ export default function Section({
10 const spacing = classnames({
10 const spacing = classnames({
11 "py-4 md:py-6 lg:py-8": short,
11 "py-4 md:py-6 lg:py-8": short,
12 "py-8 md:py-10 lg:py-20": !short,
12 "py-8 md:py-10 lg:py-20": !short,
13− "md:w-6/12": narrow,
13+ "layout-narrow": narrow,
14− "md:w-8/12": !narrow,
14+ layout: !narrow,
15 });
15 });
16 return (
16 return (
17 <section className={`w-full px-4 md:px-8 ${spacing} ${className}`}>
17 <section className={`w-full px-4 md:px-8 ${spacing} ${className}`}>
pages/index.js+3−3
@@ -105,21 +105,21 @@ export default function Home({ posts, events, openGrantsCount, search }) {
105 </a>
105 </a>
106 </Link>
106 </Link>
107 </div>
107 </div>
108− <div className="flex flex-col md:flex-row w-full items-center bg-washedGreen px-8 py-8 rounded-xl">
108+ <div className="flex flex-col md:flex-row w-full items-center md:items-start bg-washedGreen px-8 py-8 rounded-xl">
109 <div className="flex items-center flex-col p-4 w-full">
109 <div className="flex items-center flex-col p-4 w-full">
110 <h2 className="text-green">200+</h2>
110 <h2 className="text-green">200+</h2>
111 <h4 className="text-green text-center pt-2">
111 <h4 className="text-green text-center pt-2">
112 Urbit stars awarded
112 Urbit stars awarded
113 </h4>
113 </h4>
114 </div>
114 </div>
115− <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen" />
115+ <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen self-center" />
116 <div className="flex items-center flex-col p-4 w-full">
116 <div className="flex items-center flex-col p-4 w-full">
117 <h2 className="text-green">400+</h2>
117 <h2 className="text-green">400+</h2>
118 <h4 className="text-green text-center pt-2">
118 <h4 className="text-green text-center pt-2">
119 Different Contributors
119 Different Contributors
120 </h4>
120 </h4>
121 </div>
121 </div>
122− <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen" />
122+ <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen self-center" />
123 <div className="flex items-center flex-col p-4 w-full">
123 <div className="flex items-center flex-col p-4 w-full">
124 <h2 className="text-green">45+</h2>
124 <h2 className="text-green">45+</h2>
125 <h4 className="text-green text-center pt-2">Active Projects</h4>
125 <h4 className="text-green text-center pt-2">Active Projects</h4>
styles/globals.css+7−3
@@ -74,9 +74,13 @@ code .type-code {
74
74
75/* Utils */
75/* Utils */
76
76
77−/* .tile-height {
77+.layout-narrow {
78− height: 32rem;
78+ @apply w-full md:w-8/12 lg:w-6/12;
79−} */
79+}
80+
81+.layout {
82+ @apply w-full md:w-10/12 lg:w-8/12;
83+}
80
84
81.measure {
85.measure {
82 max-width: 34em;
86 max-width: 34em;