cyclewrite/index.html at master · c0alition/cyclewrite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon"
      type="image/png"
      href="cw-ico-32.png" />
  <link rel="stylesheet" href="cw.css">
  <title>CYCLEWRITE.COM</title>
  <script>
    const randomNumber = 1 + Math.floor(Math.random()*5);
    const headerBackgroundImage = "url('./bg/" + randomNumber + ".jpg')";
    window.onload = function() {
      document.getElementById("image-header").style.backgroundImage = headerBackgroundImage;
    }
  </script>
</head>

<body>
<header>
<div class="main-header-container">
  <div class="main-header-logo">
    <h3>CYCLEWRITE.COM</h3>
  </div>

  <p>Cyclewrite is currently in archive mode.</p>
  <div class="main-header-topnav">
    <div class="navlink">
      <a href="#">Home</a>
    </div>
    <div class="navlink dropdown">
      <a href="#">Browse</a>
        <div class="dropdown-content">
          <a href="#">Reading</a>
          <a href="#">Pictures</a>
          <a href="#">Contributors</a>
        </div>
    </div>
    <div class="navlink">
      <a href="#">About</a>
    </div>
  </div>
</div>
<div class="image-header" id="image-header"></div>
<hr />
</header>

<center>
<h1>CYCLEWRITE</h1>
<h5>PLAN-CYCLE-EXPERIENCE-WRITE-REPEAT</h5>
</center>

<div class="main-feed-container">
  <div class="entry-feed-container">
    <div class="entry-thumbnail-container">
      <div class="entry-thumbnail">
        <a href="articles/xmat-bikepacking-across-massachusetts/index.html">
          <div class="entry-thumbnail-header">
            <h5>XMAT: Bikepacking Across Massachusetts</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/1/album/5/30/5301-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>The morning started off quick. Alarm, final gear check, grab some Dunkin (this is Massachusetts after all) on the way out of town. I dropped by to pick up Pat and he was ready to roll. Everything went just as another trip on the bike out in the woods. This was going to be an awesome weekend...</p>
            </div>
          </div>
        </a>
      </div>
      <div class="entry-thumbnail">
        <a href="articles/bikepacking-an-introduction/index.html">
          <div class="entry-thumbnail-header">
            <h5>Bikepacking: An Introduction</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/10/album/11/19/111910-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>I had just begun to dabble in the weird world of mountain biking when I agreed to a 40-mile roundtrip overnight on a packed mountain bike. Up until May of this year, I was growing as a road cyclist and had no interest in the seeming perversity that leads people to ride bikes off-road...</p>
            </div>
          </div>
        </a>
      </div>
      <div class="entry-thumbnail">
        <a href="articles/a-tired-overnighter/index.html">
          <div class="entry-thumbnail-header">
            <h5>A Tired Overnighter</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/1/album/11/26/11261-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>Some trips need a little more priming than others to get going. This trip was definitely one of those.. I've been a bit burnt out from a long race season and I can't quite figure out how to shake it, but a bikepacking trip always seems like a good idea.</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/playing-in-the-mud-a-road-cyclists-first-mtb-race/index.html">
          <div class="entry-thumbnail-header">
            <h5>Playing in the Mud: A Road Cyclist's First MTB Race</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/11/album/11/20/112011-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>I hear my alarm go off and quickly reached out to silence my buzzing, screeching phone. The clock reads 5am. I head outside and the sun still hasn't risen yet and it's cold, very cold. It's early April and morning air is still a frosty thirty degrees in the valley. I'm cold, tired, and hungry, but feel a growing rush of adrenaline which can mean on...</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/first-pv-bikepacking-trip/index.html">
          <div class="entry-thumbnail-header">
            <h5>First PV Bikepacking Trip</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/2/album/11/19/11192-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>This weekend we had the fun task of dragging people out into the woods with heavy bikes and making them camp in the cold. We had some first time bikepackers, inexperienced mountain bikers, a cross bike rider, and a GDMBR veteran. The best part? Everyone made it out safely and with an awesome trip under their belt...</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/mt-greylock-by-bike/index.html">
          <div class="entry-thumbnail-header">
            <h5>Mt. Greylock by Bike</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/1/album/11/19/11191-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>Fresh rolling on our new Salsa Mukluks, and fearing that winter would never come, Pat and I set off on the search for our first snow ride. There was a light dusting in our area so we thought that certainly the highest peak in Massachusetts would have some snow that stuck around. We weren't disappointed...</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/trail-exploring-and-satisfaction/index.html">
          <div class="entry-thumbnail-header">
            <h5>Trail Exploring and Satisfaction</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/1/album/11/28/11281-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>This weekend I decided it was time for a solo trip. I have neglected my race bike for a while and figured it needed some love. I refreshed the Stans, adjusted the derailleur, and replaced a set of worn brake pads. To finish everything off I borrowed a friend's frame bag that would fit my bike...</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/warbird-round-2/index.html">
          <div class="entry-thumbnail-header">
            <h5>Warbird Round 2</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/1/album/12/18/12181-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>Took the Warbird out for a 2 day trip this weekend with a friend. Previously didn't care for it bikepacking, but I got some new bags, made a few changes, and the terrain was a LOT of gravel grinding anyway. Figured it was worth another shot...</p>
            </div>
          </div>
        </a>
      </div>

      <div class="entry-thumbnail">
        <a href="articles/charting-unknown-territory-nh-to-ma/index.html">
          <div class="entry-thumbnail-header">
            <h5>Charting Unknown Territory: NH to MA</h5>
          </div>
          <div class="entry-thumbnail-content-container">
            <div class="entry-thumbnail-photo" style="background-image: url('uploads/10/album/12/20/122010-preview.jpg'); background-size: cover; background-position: top center;"></div>
            <div class="entry-thumbnail-snippet">
              <p>This has begun to feel like old hat. Sometime during the week, I tell Jonathan that I have nothing planned for the upcoming weekend or he says, “bikepack this weekend?” And next thing you know, we’re knee deep in elephants, as the saying goes (that’s not a saying)...</p>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>

  <div class="side-feed-container">
    <a href="#">
      <div class="side-feed-entry-header">
        <h5>What's Happening at Cyclewrite?</h5>
      </div>
      <div class="side-feed-content-container">
        <div class="side-feed-snippet">
          <p>Thanks for dropping by!</p>
          <p>Things are under construction a bit after some data loss.</p>
          <p>Stuff may look a little wonky here and there with missing images and lots of entries gone. Don't be too surprised if a link is broken or buttons don't button.</p>
          <p>Here's what's new:</p>
          <ul>
            <li>Remaining entries have been converted to static HTML</li>
            <li>Main feed layout updated getting rid of the grid and adding this side feed :)</li>
          </ul>
          <p>Here's what's in the works:</p>
          <ul>
            <li>New simplified blog entry forms</li>
            <li>Some embedding options for Strava content</li>
            <li>GPX Import with data presentation</li>
            <li>New styling! Things need to be prettier</li>
          </ul>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="side-feed-entry-header">
        <h5>What is Cyclewrite?</h5>
      </div>
      <div class="side-feed-content-container">
        <div class="side-feed-snippet">
          <p>Cyclewrite started back in 2015ish as a project to learn PHP, SQL, JavaScript, HTML, and CSS. The idea was to develop a blogging platform for adventure cyclists to post their stories of adventure. While Cyclewrite still remains a learning project, I do plan on having it's functionality fully restored in the near future! I can't wait to read about what bike adventures are happening and hope you're ready to write!</p>
        </div>
      </div>
    </a>
  </div>
</div>

</body>
</html>