Browse Source

New content.

pull/1/head
Joshua Moon 7 months ago
parent
commit
0a30c8fdb4
3 changed files with 68 additions and 14 deletions
  1. 39
    5
      css/main.css
  2. 16
    9
      index.php
  3. 13
    0
      js/main.js

+ 39
- 5
css/main.css View File

@@ -99,7 +99,7 @@ html, body {
99 99
     font-size: 14pt;
100 100
 }
101 101
 
102
-footer, header, main, main section {
102
+footer, header, nav, main, main section {
103 103
     box-sizing: border-box;
104 104
     max-width: 1280px;
105 105
     margin: 0 auto 0 0;
@@ -129,20 +129,54 @@ footer, header, main, main section {
129 129
         font-size: 0.8rem;
130 130
     }
131 131
 
132
+nav {
133
+    padding: 0;
134
+    background: #fff;
135
+    border-top: 4px solid #ccc;
136
+    border-bottom: 2px solid #ccc;
137
+}
138
+    nav ul {
139
+        box-sizing: border-box;
140
+        background: white;
141
+        border-bottom: 2px solid #ccc;
142
+        display: flex;
143
+        flex-direction: row;
144
+        overflow: hidden;
145
+        width: 100%;
146
+        padding: 0 40px;
147
+        margin: 0;
148
+    }
149
+    nav li {
150
+        box-sizing: border-box;
151
+        text-align: center;
152
+        flex: 1;
153
+        min-width: 10rem;
154
+        padding: 10px 0;
155
+        margin: 0;
156
+        list-style: none;
157
+    }
158
+    .nav-link {
159
+        color: #111;
160
+    }
161
+.sticky {
162
+    position: fixed;
163
+    top: 0;
164
+    width: 100%;
165
+    z-index: 1;
166
+}
167
+
132 168
 h1, h2, h3, h4, h5, h6 {
133 169
     font-family: 'Quattrocento', serif;
134 170
     font-weight: bold;
135 171
 }
136
-    h1 {
137
-        margin-bottom: 0;
138
-    }
139 172
 
140 173
 .construction {
141 174
     box-sizing: border-box;
142 175
     max-width: 1280px;
143 176
     margin: 0 auto 0 0;
144
-    padding: 20px 40px;
177
+    padding: 10px 40px;
145 178
     background: rgba(255, 255, 0, 0.4);
179
+    font-size: 0.8rem;
146 180
 }
147 181
 
148 182
 figure, video, figcaption {

+ 16
- 9
index.php View File

@@ -58,18 +58,24 @@
58 58
     <link href="https://fonts.googleapis.com/css?family=Open+Sans|Quattrocento:700" rel="stylesheet">
59 59
     <link rel="stylesheet" href="css/normalize.css" />
60 60
     <link rel="stylesheet" href="css/ligtbox.min.css" />
61
-    <!--<link rel="stylesheet" href="css/main.css" />-->
62
-    <style type="text/css">
63
-    <?php include('./css/main.css'); ?>
64
-    </style>
61
+    <link rel="stylesheet" href="css/main.css?<?=time()?>" />
65 62
 </head>
66 63
 <body class="<?=($male ? "safety-off" : "safe-space")?>">
67 64
     <div class="construction"><span>This webpage is currently in development.</span></div>
65
+
68 66
     <header>
69 67
         <div class="clearfix"></div>
70 68
         <h1><?=$name?> <?=$lname?> is a Sexual Predator</h1>
69
+        <div class="clearfix"></div>
71 70
     </header>
72 71
 
72
+    <nav>
73
+        <ul id="navbar">
74
+            <li><a class="nav-link" href="#wax-my-balls">&quot;Wax my Balls&quot;</a></li>
75
+            <li><a class="nav-link" href="#censoring-the-fallout">Censorship</a></li>
76
+        </ul>
77
+    </nav>
78
+
73 79
     <main>
74 80
         <section>
75 81
             <div class="clearfix"></div>
@@ -89,8 +95,9 @@
89 95
                  In the past few months more information has been uncovered exposing him as someone with an unhealthy obsession with coming-of-age girls.
90 96
              </p>
91 97
          </section>
92
-         <section>
93
-            <h2 name="wax-my-balls">"Wax my Balls"</h2>
98
+
99
+         <section id="wax-my-balls">
100
+            <h2>"Wax my Balls"</h2>
94 101
             <p>
95 102
                 The initial incident with <?=$lname?> started when <?=$pro?> attempted to find an aesthetician willing to do work on <?=$pos?> genital region.
96 103
                 <?=$lname?> had problems doing this because <?=$pro?> insisted on contacting women who specialized in Brazilian waxes.
@@ -128,8 +135,8 @@
128 135
             </figure>
129 136
          </section>
130 137
 
131
-         <section>
132
-            <h2 name="wax-my-balls">Censoring the Fallout</h2>
138
+         <section id="censoring-the-fallout">
139
+            <h2>Censoring the Fallout</h2>
133 140
             <figure class="right">
134 141
                 <img src="/img/case/Yaniv-with-biz-Twitter-Cofounder.png" />
135 142
                 <figcaption>
@@ -206,6 +213,6 @@
206 213
     <script src="js/vendor/modernizr-3.6.0.min.js"></script>
207 214
     <script src="js/vendor/lightbox.min.js"></script>
208 215
     <script src="js/plugins.js"></script>
209
-    <script src="js/main.js"></script>
216
+    <script src="js/main.js?<?=time()?>"></script>
210 217
 </body>
211 218
 </html>

+ 13
- 0
js/main.js View File

@@ -0,0 +1,13 @@
1
+(function(window, document, undefined) {
2
+    var navbar = document.getElementById("navbar");
3
+    var sticky = navbar.offsetTop;
4
+
5
+    window.onscroll = function() {
6
+        if (window.pageYOffset >= sticky) {
7
+            navbar.classList.add("sticky")
8
+        }
9
+        else {
10
+            navbar.classList.remove("sticky");
11
+        }
12
+    };
13
+})(window, window.document);

Loading…
Cancel
Save