Skip to content

Commit 2bbb3a1

Browse files
fezcodefezcode
committed
style: the vague page v7
1 parent 74d7524 commit 2bbb3a1

File tree

2 files changed

+28
-28
lines changed

2 files changed

+28
-28
lines changed

‎src/pages/TheVaguePage.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const TheVaguePage = () => {
9292

9393
{/* Sidebar Area for Collapsed State */}
9494
<div
95-
className={`fixed top-0 left-0 bottom-0 w-[3.55556rem] z-[700] border-r ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'} hidden md:block bg-inherit`}
95+
className={`fixed top-0 left-0 bottom-0 w-[4rem] z-[700] border-r ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'} hidden md:block bg-inherit`}
9696
/>
9797

9898
{/* Loader */}
@@ -103,8 +103,8 @@ const TheVaguePage = () => {
103103
</div>
104104

105105
{/* HEADER */}
106-
<header className="c-header md:!left-[3.55556rem]">
107-
<div className="c-header_inner md:!left-[3.55556rem]">
106+
<header className="c-header md:!left-[4rem]">
107+
<div className="c-header_inner md:!left-[4rem]">
108108
<p className="c-header_heading font-instr-sans">
109109
<Link className="c-header_link" to="/">Fezcodex</Link> + <span className="c-header_link">The Vague</span>
110110
</p>
@@ -175,7 +175,7 @@ const TheVaguePage = () => {
175175
</div>
176176

177177
{/* MAIN CONTENT */}
178-
<div className="o-scroll h-screen overflow-y-auto overflow-x-hidden md:pl-[3.55556rem]">
178+
<div className="o-scroll h-screen overflow-y-auto overflow-x-hidden md:pl-[4rem]">
179179
<main>
180180
<div className="c-newspaper">
181181
<div className="c-newspaper_container !pb-0">

‎src/styles/EditorialNew.css‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ body { background-color: #f4f4f4 }
5858

5959
hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25) }
6060
.is-invert hr { border-top-color: hsla(0, 0%, 95.7%, .25) }
61-
@media (min-width:700px) { hr { margin-left: 3.55556rem } }
61+
@media (min-width:700px) { hr { margin-left: 4rem } }
6262

6363
.o-scroll { min-height: 100vh; background-color: inherit; }
6464

@@ -69,7 +69,7 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
6969
}
7070
@media (min-width:700px) {
7171
.o-container { padding-left: 5.77778rem; padding-right: 2.22222rem }
72-
.o-container.-noPadding { padding-left: 3.55556rem }
72+
.o-container.-noPadding { padding-left: 4rem }
7373
}
7474
.o-container.-small { max-width: 91.33333rem; margin: 0 auto }
7575

@@ -81,15 +81,15 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
8181
@media (min-width:700px) {
8282
.c-header {
8383
position: fixed; right: 0; left: 0; display: flex; align-items: baseline; justify-content: space-between;
84-
height: 3.55556rem; padding: .44444rem 1.66667rem; z-index: 900; top: 0; border-bottom: 1px solid rgba(26,26,26,.25);
84+
height: 4rem; padding: .44444rem 1.66667rem; z-index: 900; top: 0; border-bottom: 1px solid rgba(26,26,26,.25);
8585
background-color: #f4f4f4;
8686
}
8787
.is-invert .c-header { background-color: #1a1a1a; border-bottom-color: hsla(0, 0%, 95.7%, .25); color: #f4f4f4; }
8888
}
8989
@media (max-width:699px) {
9090
.c-header_inner {
9191
position: fixed; right: 0; left: 0; top: 0; display: flex; align-items: baseline; justify-content: space-between;
92-
height: 3.55556rem; padding: 3px 25px 0; z-index: 750; align-items: center; background-color: #f4f4f4; border-bottom: 1px solid rgba(26, 26, 26, .25)
92+
height: 4rem; padding: 3px 25px 0; z-index: 750; align-items: center; background-color: #f4f4f4; border-bottom: 1px solid rgba(26, 26, 26, .25)
9393
}
9494
.is-invert .c-header_inner { background-color: #1a1a1a; border-bottom-color: hsla(0, 0%, 95.7%, .25) }
9595
}
@@ -102,7 +102,7 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
102102
@media (max-width:699px) {
103103
.c-header_buttons {
104104
position: fixed; bottom: 0; left: 0; background-color: #f4f4f4; border-top: 1px solid rgba(26, 26, 26, .25);
105-
height: 3.55556rem; padding: 0 25px; justify-content: space-between; align-items: center; width: 100%; z-index: 750
105+
height: 4rem; padding: 0 25px; justify-content: space-between; align-items: center; width: 100%; z-index: 750
106106
}
107107
.is-invert .c-header_buttons { background-color: #1a1a1a; border-top-color: hsla(0, 0%, 95.7%, .25); color: #f4f4f4; }
108108
}
@@ -111,25 +111,25 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
111111
.is-invert .c-header_invert_dot { background-color: #f4f4f4; border-color: #f4f4f4; }
112112

113113
/* Navigation */
114-
.c-nav { position: fixed; bottom: 0; width: 3.55556rem; z-index: 800; color: #1a1a1a; transition: transform .45s cubic-bezier(0,0,.2,1); }
115-
@media (max-width:999px) { .c-nav { top: 3.55556rem } }
116-
@media (min-width:1000px) { .c-nav { top: 0; padding-top: 3.55556rem } }
114+
.c-nav { position: fixed; bottom: 0; width: 4rem; z-index: 800; color: #1a1a1a; transition: transform .45s cubic-bezier(0,0,.2,1); }
115+
@media (max-width:999px) { .c-nav { top: 4rem } }
116+
@media (min-width:1000px) { .c-nav { top: 0; padding-top: 4rem } }
117117
@media (max-width:699px) { .c-nav { left: -100vw; width: 100vw } }
118118
@media (min-width:700px) and (max-width:1199px) { .c-nav { left: -50vw; width: 50vw } }
119119
@media (min-width:1200px) { .c-nav { left: -34vw; width: 34vw } }
120120
.has-nav-open .c-nav { transform: translate3d(100%,0,0); background-color: #f4f4f4 }
121121
.has-nav-open.is-invert .c-nav { background-color: #1a1a1a }
122122

123-
.c-navButton { position: fixed; width: 3.55556rem; z-index: 2000; top: 3.55556rem; bottom: 0; left: 0; background: none; border: none; color: inherit; }
124-
@media (max-width:699px) { .c-navButton { top: 0; right: 6px; height: 3.55556rem; left: auto; color: #1a1a1a; z-index: 2000; } }
123+
.c-navButton { position: fixed; width: 4rem; z-index: 2000; top: 4rem; bottom: 0; left: 0; background: none; border: none; color: inherit; }
124+
@media (max-width:699px) { .c-navButton { top: 0; right: 6px; height: 4rem; left: auto; color: #1a1a1a; z-index: 2000; } }
125125
.is-invert .c-navButton { color: #f4f4f4; }
126126
.has-nav-open .c-navButton { color: #1a1a1a !important; }
127127
.has-nav-open.is-invert .c-navButton { color: #f4f4f4 !important; }
128-
.c-navButton_wrap { position: absolute; top: 0; bottom: 0; left: 0; width: 3.55556rem; display: flex; justify-content: center; align-items: center; flex-direction: column; }
129-
.has-nav-open .c-navButton { transform: translateX(34vw) translateX(-3.55556rem); }
130-
@media (max-width:1199px) { .has-nav-open .c-navButton { transform: translateX(50vw) translateX(-3.55556rem) } }
131-
@media (max-width:699px) {
132-
.has-nav-open .c-navButton { transform: none; color: transparent !important; pointer-events: none; }
128+
.c-navButton_wrap { position: absolute; top: 0; bottom: 0; left: 0; width: 4rem; display: flex; justify-content: center; align-items: center; flex-direction: column; }
129+
.has-nav-open .c-navButton { transform: translateX(34vw) translateX(-4rem); }
130+
@media (max-width:1199px) { .has-nav-open .c-navButton { transform: translateX(50vw) translateX(-4rem) } }
131+
@media (max-width:699px) {
132+
.has-nav-open .c-navButton { transform: none; color: transparent !important; pointer-events: none; }
133133
}
134134

135135
.c-navButton_lines:after, .c-navButton_lines:before { content: ""; display: block; width: 1.55556rem; border-bottom: 2px solid currentColor; }
@@ -149,15 +149,15 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
149149
.c-nav_label { position: absolute; bottom: 1.66667rem; font-family: 'Instrument Sans', sans-serif; writing-mode: vertical-rl; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; }
150150
@media (max-width:699px) { .c-nav_label { display: none } }
151151

152-
.c-nav_panel {
153-
height: 100%;
154-
color: #1a1a1a;
155-
display: flex;
156-
flex-direction: column;
157-
justify-content: space-between;
158-
padding: 2rem 2rem 2rem 5rem;
159-
overflow-y: auto;
160-
font-family: 'Instrument Sans', sans-serif;
152+
.c-nav_panel {
153+
height: 100%;
154+
color: #1a1a1a;
155+
display: flex;
156+
flex-direction: column;
157+
justify-content: space-between;
158+
padding: 2rem 2rem 2rem 5rem;
159+
overflow-y: auto;
160+
font-family: 'Instrument Sans', sans-serif;
161161
}
162162
.is-invert .c-nav_panel { color: #f4f4f4; }
163163
.c-nav_panel_main { font-size: 3rem; font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; }

0 commit comments

Comments
 (0)