Design of xkcd.com - Revision history

82.132.239.70: Undo revision 409665 by 2001:4450:81E7:1E00:ADD6:A33:300F:1CBB (talk) Strange copypaste thing...

2026-04-06T12:36:05Z

Undo revision 409665 by 2001:4450:81E7:1E00:ADD6:A33:300F:1CBB (talk) Strange copypaste thing...

2001:4450:81E7:1E00:ADD6:A33:300F:1CBB: /* Comic section */

2026-04-06T04:12:45Z

‎Comic section

DollarStoreBa'al: /* Header section */

2025-10-15T13:08:20Z

‎Header section

FaviFake: /* Comic section */

2025-05-02T07:17:47Z

‎Comic section

FaviFake at 07:17, 2 May 2025

2025-05-02T07:17:26Z

FaviFake at 15:45, 18 April 2025

2025-04-18T15:45:40Z

FaviFake at 17:09, 16 April 2025

2025-04-16T17:09:03Z

172.71.254.36: Requested info and Wayback Machine citations added, banner removed

2025-04-15T05:52:25Z

Requested info and Wayback Machine citations added, banner removed

FaviFake at 15:59, 12 March 2025

2025-03-12T15:59:05Z

FaviFake: /* Bitcoin address */ updated bitcoin address

2025-03-02T10:22:11Z

‎Bitcoin address: updated bitcoin address

← Older revision		Revision as of 12:36, 6 April 2026
Line 38:		Line 38:

	Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics\|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name\|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.		Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics\|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name\|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.
−	~~{{incomplete\|This page was created recently in ROBOTIC MODE. Don't remove this notice too soon.}}~~
−	In this {{w\|April Fool's Day}} comic, several new viewing modes have been added to the xkcd website, accessible through a {{w\|drop-down list}} beneath the comic (not visible on Explain xkcd). This allows various different viewing experiences for the entire website, including older comics. Some are "normal" viewing modes, like the typical "light" and "dark" modes, but others take such things further and/or in more esoteric ways. This includes an "airplane mode" (see below) that parodies and subverts the {{w\|Airplane mode\|normal implementation}}.
−
−	The accompanying comic references one of the first lines of the {{w\|Bible}} (Genesis 1:3), wherein God creates light. Here, though, before God has a chance to fully appreciate the work, a person on Earth immediately requests an implementation of {{w\|dark mode}}. Dark mode is a feature on many websites and devices which displays text in white against a black background instead of the default black text on a white background. In low ambient light this makes for a less intense viewing experience that is easier on the eyes, so many people who spend a lot of time looking at screens prefer dark mode (whereas casual users often find light mode easier to read). On OLED screens, another benefit is that because of the primarily low brightness of the screen, less battery life is consumed, which makes it useful for those who want to be energy-efficient or extend their battery life.
−
−	This demand represents a common experience for web and app designers, who spend a lot of time creating something that looks beautiful to them, and in their particular use case, only to find when it is put out into the wild that it doesn't suit the needs of many of their actual users, who don't particularly care about the effort they've put in.
−
−	Dark mode is not usually implemented on planets,{{cn}} although one could argue that night-time is effectively Earth's "dark mode", which could have been created by God as a response to the person. (That seems likely, in fact, given that the very next words in Genesis 1:4 are "and he separated the light from the darkness".) The comic deviates somewhat from traditional Judeo-Christian theology, as in Genesis the day/night cycle was created on the first day, but humans were created on the sixth day - thus, the "dark mode" (night-time) would already have been implemented by the time humans existed. Possibly the person is actually requesting a dark mode that can be toggled at will, rather than one which occurs automatically each day.
−
−	~~Unlike most comics, the title text contains no jokes, but rather explains the update and gives basic instructions.~~
−
−	~~The comic credits the "Excellent Design Team", consisting of Amber, Benjamin Staffin, and Kevin who helped create the modes.~~
−
−	~~===List Of Modes===~~
−	~~; Light Mode~~
−	~~: The usual site experience. Typically, where sites have light and dark modes, light is the default option, so as to mimic ink on paper (such as printed {{w\|newspaper comic strip}}s).~~
−
−	~~; Lighter Mode~~
−	~~: The entire web page is filtered to look {{w\|Exposure (photography)#Overexposure and underexposure\|overexposed}}, making colors wash out and reducing the contrast.~~
−
−	~~; Dark Mode~~
−	: A standard "white content on black background" dark mode. Specifically, Dark Mode inverts the colors of the page (which makes a {{w\|Negative (photography)\|colour-negative}} and then hue-rotates it by 180 degrees (to make hue return to normal, only brightness-reversed. (For example, see comic [[556: Alternative Energy Revolution\|556]], with dark mode enabled, to see how the hue is maintained.) The background of the page, normally light blue, becomes a dark blue; (near-)whites become (near-)blacks, and vice-versa, only mid-tones staying the same. This inversion makes the content of this particular comic, with the original transition from a dark pane to "let there be light" panes and the subsequent request for this very feature, particularly nonsensical, as it seems to start fully bright, then darken as God creates light.
−
−	~~; Darkest Mode~~
−	: Everything on the webpage turns completely black (severely 'underexposed', in effect, the opposite to "Lighter mode" but also even more extreme). The exception is the drop down menu widget, which may appear as merely a dark gray — and depending upon the browser itself, the dropped-down menu may be its 'natural' appearance when it becomes fully active — which is of course extremely helpful for navigating back out of this mode or onward onto others.
−
−	~~; Blurry Mode~~
−	: {{w\|Blur (photographic effect)\|Blurs}} the entire webpage. This is not conventionally desirable as it makes it harder to read text and interpret visuals. Whereas light and dark mode support can improve {{w\|Web accessibility\|accessibility}} for certain vision conditions, this mode makes already poor vision even worse.
−
−	~~; Grayscale Mode~~
−	: Applies a standard {{w\|grayscale}}/{{w\|Colorfulness#Saturation\|desaturation}} conversion filter to the entire webpage. Many devices provide a grayscale mode as one of their color filter settings, which can simulate different {{w\|color vision deficiencies}}. Grayscale specifically can also help improve focus by preventing colors from catching the eye and making distractions less visually appealing.
−
−	~~; Greyscale Mode~~
−	: Operates identically to Grayscale Mode, but also changes the spelling of "math" in the slogan at the top of the page to "maths" (to go along with the respective {{w\|American and British English spelling differences\|British English}} use of ''{{wiktionary\|gray}}/{{wiktionary\|grey}}'').
−
−	~~; Dorian Greyscale Mode~~
−	: Makes the webpage slowly turn grey<!-- or 'gray', but now sticking with this given the Mode's title... -->, including darkening/fading-to-grey 'white' areas. This refers to ''{{w\|The Picture of Dorian Gray}}'', in which the titular character has a portrait that slowly ages and fades out while the character stays young and handsome. The transformation finishes after 5 minutes.
−
−	: Of note is that the surname of the titular character is "{{w\|Grey (disambiguation)#People\|Gray}}" (as is still common, if not dominant, in Britain), but the mode itself is named for the primary British/non-American standard English version of the word for such a hueless shade.
−
−	~~: No relation to the {{w\|Dorian mode}}, a musical scale.~~
−
−	~~; Space Opera Mode~~
−	: Turns the entire page into a ''{{w\|Star Wars}}''-style opening scroll, which loops round until you change the mode. Scrolling the mouse scrolls up or down through the page content. {{w\|Space opera}} is a genre of sci-fi that ''Star Wars'' falls under.
−
−	~~; 3D Mode~~
−	~~: Makes the comic render in {{w\|Anaglyph 3D\|anaglyphic stereoscopy}}. [[Randall]] has used 3D space before for [[848\|another joke comic]].~~
−
−	~~; Origami Mode~~
−	~~: Rotates and folds various pieces of the webpage, as if it were {{w\|origami}}-folded.~~
−
−	~~; Ink Mode~~
−	~~: Recolors the webpage as if drawn in blue ink, which is often used for the initial roughing-out of a drawing.~~
−
−	~~; Spring Mode~~
−	: Gives the comic a simple physics simulation, making it slightly rotate around an axis when the page is scrolled, and giving it a {{w\|springboard}} look, hence the name. The axis around which the page precesses is perpendicular to the axis the user scrolls on. This means that when the page is scrolled vertically (the usual direction), the comic wobbles around a horizontal axis, but when scrolled horizontally (if your screen size or zoom allows it), the comic precesses about the vertical axis.
−
−	~~; Antipodes Mode~~
−	: Turns the entire webpage upside down. An {{w\|antipodes\|antipode}} is the point on the Earth's surface directly opposite of another, but "The Antipodes" is also a term used to refer to {{w\|Australia}} and {{w\|New Zealand}} by inhabitants of the northern hemisphere. Note: When the comic was first published this was labeled "Southern Hemisphere Mode".
−
−	~~; Hacker Mode~~
−	: Recolors the entire webpage in the stereotypical green-on-black coding environment color scheme often used by {{w\|hacker}}s on film and TV. This visual shorthand is a holdover from early {{w\|monochrome monitor}}s that used P1 phosphor. (Modern terminal software has no such limitations, and many programmers today use {{w\|syntax highlighting}} to color-code operators and keywords.)
−
−	~~; Screensaver Mode~~
−	: Makes the comic float around on the webpage, bouncing as it hits the edges. A common type of {{w\|screensaver}} has some text or other element drifting around the screen in this way. Many people ended up watching such screensavers, waiting for the bouncing graphic to hit the corner of the screen. Like with Hacker Mode, there is an element of nostalgia to this; screensavers are less necessary on modern LCD screens, so fewer setups use them.
−
−	~~; Modem Mode~~
−	: Slowly reveals the comic from top to bottom, as if slowly loading (but [[598: Porn\|only in approximation]]) the way images often used to have to be progressively rendered from a low-rate stream of image data in the days of more limited dial-up connections and also a lower-performance {{w\|Internet backbone}} in general. This is accompanied by audio of the sound of a {{w\|modem}} communicating over such a connection. NB - this mode does not appear to function correctly/reliably for some viewers.
−
−	~~; Stained Glass Mode~~
−	: Fills each closed area of the comic with a separate color to mimic the look of {{w\|stained glass}} imagery. The colors vary each time this mode is selected or the page is reloaded in this mode, which <!--check the code to verify? ...but going purely from visual analysis of the how it treats comic 2598 and other obvious comics with colourful/greyful features already in the original-->works by flooding a single pseudorandom hue over all areas of near-white, each flood bounded only by any sufficiently dark or saturated drawn line/border.
−
−	~~; Airplane Mode~~
−	: Makes the comic fly around on the page, with the {{w\|onomatopoeia}} "NYOOM!" written next to it, as if it were an {{w\|airplane}}. This is unlike the usual use of {{w\|airplane mode}} to refer to disabling the cellphone (or all {{w\|radio frequency}}) features of a mobile device, as required on most flights. Of course, the website's "Airplane Mode" does no such thing, and would be pointless to enable on an airplane.{{cn}}
−
−	~~; Boat Mode~~
−	: Makes the entire webpage tilt back and forth, emulating the way a boat rolls on the water. While [[165: Turn Signals\|extremely unlikely]], this could theoretically counteract the rocking motion of a boat, stabilizing the page content. In practice, it is unlikely to help with {{w\|seasickness}}. (As of 2024, some smart devices started offering a "vehicle motion cues" feature that is meant to reduce motion sickness, although it is designed for road vehicles rather than watercraft.)
−
−	~~: This mode is a reference to the longstanding mention of a Boat Mode in the [[footnote]], which says "Remove your device from Airplane Mode and set it to Boat Mode".~~
−

	The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].		The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].

← Older revision		Revision as of 04:12, 6 April 2026
Line 38:		Line 38:

	Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics\|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name\|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.		Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics\|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name\|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.
		+	{{incomplete\|This page was created recently in ROBOTIC MODE. Don't remove this notice too soon.}}
		+	In this {{w\|April Fool's Day}} comic, several new viewing modes have been added to the xkcd website, accessible through a {{w\|drop-down list}} beneath the comic (not visible on Explain xkcd). This allows various different viewing experiences for the entire website, including older comics. Some are "normal" viewing modes, like the typical "light" and "dark" modes, but others take such things further and/or in more esoteric ways. This includes an "airplane mode" (see below) that parodies and subverts the {{w\|Airplane mode\|normal implementation}}.
		+
		+	The accompanying comic references one of the first lines of the {{w\|Bible}} (Genesis 1:3), wherein God creates light. Here, though, before God has a chance to fully appreciate the work, a person on Earth immediately requests an implementation of {{w\|dark mode}}. Dark mode is a feature on many websites and devices which displays text in white against a black background instead of the default black text on a white background. In low ambient light this makes for a less intense viewing experience that is easier on the eyes, so many people who spend a lot of time looking at screens prefer dark mode (whereas casual users often find light mode easier to read). On OLED screens, another benefit is that because of the primarily low brightness of the screen, less battery life is consumed, which makes it useful for those who want to be energy-efficient or extend their battery life.
		+
		+	This demand represents a common experience for web and app designers, who spend a lot of time creating something that looks beautiful to them, and in their particular use case, only to find when it is put out into the wild that it doesn't suit the needs of many of their actual users, who don't particularly care about the effort they've put in.
		+
		+	Dark mode is not usually implemented on planets,{{cn}} although one could argue that night-time is effectively Earth's "dark mode", which could have been created by God as a response to the person. (That seems likely, in fact, given that the very next words in Genesis 1:4 are "and he separated the light from the darkness".) The comic deviates somewhat from traditional Judeo-Christian theology, as in Genesis the day/night cycle was created on the first day, but humans were created on the sixth day - thus, the "dark mode" (night-time) would already have been implemented by the time humans existed. Possibly the person is actually requesting a dark mode that can be toggled at will, rather than one which occurs automatically each day.
		+
		+	Unlike most comics, the title text contains no jokes, but rather explains the update and gives basic instructions.
		+
		+	The comic credits the "Excellent Design Team", consisting of Amber, Benjamin Staffin, and Kevin who helped create the modes.
		+
		+	===List Of Modes===
		+	; Light Mode
		+	: The usual site experience. Typically, where sites have light and dark modes, light is the default option, so as to mimic ink on paper (such as printed {{w\|newspaper comic strip}}s).
		+
		+	; Lighter Mode
		+	: The entire web page is filtered to look {{w\|Exposure (photography)#Overexposure and underexposure\|overexposed}}, making colors wash out and reducing the contrast.
		+
		+	; Dark Mode
		+	: A standard "white content on black background" dark mode. Specifically, Dark Mode inverts the colors of the page (which makes a {{w\|Negative (photography)\|colour-negative}} and then hue-rotates it by 180 degrees (to make hue return to normal, only brightness-reversed. (For example, see comic [[556: Alternative Energy Revolution\|556]], with dark mode enabled, to see how the hue is maintained.) The background of the page, normally light blue, becomes a dark blue; (near-)whites become (near-)blacks, and vice-versa, only mid-tones staying the same. This inversion makes the content of this particular comic, with the original transition from a dark pane to "let there be light" panes and the subsequent request for this very feature, particularly nonsensical, as it seems to start fully bright, then darken as God creates light.
		+
		+	; Darkest Mode
		+	: Everything on the webpage turns completely black (severely 'underexposed', in effect, the opposite to "Lighter mode" but also even more extreme). The exception is the drop down menu widget, which may appear as merely a dark gray — and depending upon the browser itself, the dropped-down menu may be its 'natural' appearance when it becomes fully active — which is of course extremely helpful for navigating back out of this mode or onward onto others.
		+
		+	; Blurry Mode
		+	: {{w\|Blur (photographic effect)\|Blurs}} the entire webpage. This is not conventionally desirable as it makes it harder to read text and interpret visuals. Whereas light and dark mode support can improve {{w\|Web accessibility\|accessibility}} for certain vision conditions, this mode makes already poor vision even worse.
		+
		+	; Grayscale Mode
		+	: Applies a standard {{w\|grayscale}}/{{w\|Colorfulness#Saturation\|desaturation}} conversion filter to the entire webpage. Many devices provide a grayscale mode as one of their color filter settings, which can simulate different {{w\|color vision deficiencies}}. Grayscale specifically can also help improve focus by preventing colors from catching the eye and making distractions less visually appealing.
		+
		+	; Greyscale Mode
		+	: Operates identically to Grayscale Mode, but also changes the spelling of "math" in the slogan at the top of the page to "maths" (to go along with the respective {{w\|American and British English spelling differences\|British English}} use of ''{{wiktionary\|gray}}/{{wiktionary\|grey}}'').
		+
		+	; Dorian Greyscale Mode
		+	: Makes the webpage slowly turn grey<!-- or 'gray', but now sticking with this given the Mode's title... -->, including darkening/fading-to-grey 'white' areas. This refers to ''{{w\|The Picture of Dorian Gray}}'', in which the titular character has a portrait that slowly ages and fades out while the character stays young and handsome. The transformation finishes after 5 minutes.
		+
		+	: Of note is that the surname of the titular character is "{{w\|Grey (disambiguation)#People\|Gray}}" (as is still common, if not dominant, in Britain), but the mode itself is named for the primary British/non-American standard English version of the word for such a hueless shade.
		+
		+	: No relation to the {{w\|Dorian mode}}, a musical scale.
		+
		+	; Space Opera Mode
		+	: Turns the entire page into a ''{{w\|Star Wars}}''-style opening scroll, which loops round until you change the mode. Scrolling the mouse scrolls up or down through the page content. {{w\|Space opera}} is a genre of sci-fi that ''Star Wars'' falls under.
		+
		+	; 3D Mode
		+	: Makes the comic render in {{w\|Anaglyph 3D\|anaglyphic stereoscopy}}. [[Randall]] has used 3D space before for [[848\|another joke comic]].
		+
		+	; Origami Mode
		+	: Rotates and folds various pieces of the webpage, as if it were {{w\|origami}}-folded.
		+
		+	; Ink Mode
		+	: Recolors the webpage as if drawn in blue ink, which is often used for the initial roughing-out of a drawing.
		+
		+	; Spring Mode
		+	: Gives the comic a simple physics simulation, making it slightly rotate around an axis when the page is scrolled, and giving it a {{w\|springboard}} look, hence the name. The axis around which the page precesses is perpendicular to the axis the user scrolls on. This means that when the page is scrolled vertically (the usual direction), the comic wobbles around a horizontal axis, but when scrolled horizontally (if your screen size or zoom allows it), the comic precesses about the vertical axis.
		+
		+	; Antipodes Mode
		+	: Turns the entire webpage upside down. An {{w\|antipodes\|antipode}} is the point on the Earth's surface directly opposite of another, but "The Antipodes" is also a term used to refer to {{w\|Australia}} and {{w\|New Zealand}} by inhabitants of the northern hemisphere. Note: When the comic was first published this was labeled "Southern Hemisphere Mode".
		+
		+	; Hacker Mode
		+	: Recolors the entire webpage in the stereotypical green-on-black coding environment color scheme often used by {{w\|hacker}}s on film and TV. This visual shorthand is a holdover from early {{w\|monochrome monitor}}s that used P1 phosphor. (Modern terminal software has no such limitations, and many programmers today use {{w\|syntax highlighting}} to color-code operators and keywords.)
		+
		+	; Screensaver Mode
		+	: Makes the comic float around on the webpage, bouncing as it hits the edges. A common type of {{w\|screensaver}} has some text or other element drifting around the screen in this way. Many people ended up watching such screensavers, waiting for the bouncing graphic to hit the corner of the screen. Like with Hacker Mode, there is an element of nostalgia to this; screensavers are less necessary on modern LCD screens, so fewer setups use them.
		+
		+	; Modem Mode
		+	: Slowly reveals the comic from top to bottom, as if slowly loading (but [[598: Porn\|only in approximation]]) the way images often used to have to be progressively rendered from a low-rate stream of image data in the days of more limited dial-up connections and also a lower-performance {{w\|Internet backbone}} in general. This is accompanied by audio of the sound of a {{w\|modem}} communicating over such a connection. NB - this mode does not appear to function correctly/reliably for some viewers.
		+
		+	; Stained Glass Mode
		+	: Fills each closed area of the comic with a separate color to mimic the look of {{w\|stained glass}} imagery. The colors vary each time this mode is selected or the page is reloaded in this mode, which <!--check the code to verify? ...but going purely from visual analysis of the how it treats comic 2598 and other obvious comics with colourful/greyful features already in the original-->works by flooding a single pseudorandom hue over all areas of near-white, each flood bounded only by any sufficiently dark or saturated drawn line/border.
		+
		+	; Airplane Mode
		+	: Makes the comic fly around on the page, with the {{w\|onomatopoeia}} "NYOOM!" written next to it, as if it were an {{w\|airplane}}. This is unlike the usual use of {{w\|airplane mode}} to refer to disabling the cellphone (or all {{w\|radio frequency}}) features of a mobile device, as required on most flights. Of course, the website's "Airplane Mode" does no such thing, and would be pointless to enable on an airplane.{{cn}}
		+
		+	; Boat Mode
		+	: Makes the entire webpage tilt back and forth, emulating the way a boat rolls on the water. While [[165: Turn Signals\|extremely unlikely]], this could theoretically counteract the rocking motion of a boat, stabilizing the page content. In practice, it is unlikely to help with {{w\|seasickness}}. (As of 2024, some smart devices started offering a "vehicle motion cues" feature that is meant to reduce motion sickness, although it is designed for road vehicles rather than watercraft.)
		+
		+	: This mode is a reference to the longstanding mention of a Boat Mode in the [[footnote]], which says "Remove your device from Airplane Mode and set it to Boat Mode".
		+

	The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].		The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].

@@ Line 26: / Line 26: @@
 :''Main article: [[Header text]]''
-The [[Header text|header text]] is usually updated when Randall has news to share or wants to add information about a specific comic. The header text has been changed [[Header text#Comic-specific header text|more than a hundred times]] since the launch of [https://xkcd.com xkcd.com]. It states:
+The [[Header text|header text]] is usually updated when Randall has news to share or wants to add information about a specific comic. The header text has been changed [[Header text#Comic-specific header text|more than a hundred times]] since the launch of [https://xkcd.com xkcd.com]. The standard header text states:
 {{:Header text}}
 <span id="Comic"></span>
 ==Comic section==
 [[File:xkcd_comic.png|right|150px]]This section of the website is dedicated to displaying comics.

@@ Line 31: / Line 31: @@
 <span id="Comic"></span>
 ==Comic section==
-[[File:xkcd_comic.png|right|150px]]
+[[File:xkcd_comic.png|right|150px]]This section of the website is dedicated to displaying comics.
 ===Comic===
-This section of the website is dedicated to displaying comics. Positioned above the comic is the title, presented in large and bold lettering. Just below the title, but above the primary comic image,  there are five buttons. They follow a fairly standard layout: on the outer edges are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 11px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 12px;">|<</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">>|</span></li> arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;"><&nbsp;Prev</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Next&nbsp;></span></li> buttons, allowing navigation between the comics immediately before and after the currently displayed one. In instances where the displayed comic is the first or the last, attempting to access the previous or next comic will simply result in the page being reloaded. At the center there is a <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Random</span></li> button, which, when clicked, loads a comic at random. The same set of buttons is duplicated below the comic as well. While this redundancy isn't needed in most comics, it ensures that the buttons are conveniently accessible both before and after scrolling, especially for [[:Category:Large drawings|large comics]].
+Positioned above the comic is the title, presented in large and bold lettering. Just below the title, but above the primary comic image,  there are five buttons. They follow a fairly standard layout: on the outer edges are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 11px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 12px;">|<</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">>|</span></li> arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;"><&nbsp;Prev</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Next&nbsp;></span></li> buttons, allowing navigation between the comics immediately before and after the currently displayed one. In instances where the displayed comic is the first or the last, attempting to access the previous or next comic will simply result in the page being reloaded. At the center there is a <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Random</span></li> button, which, when clicked, loads a comic at random. The same set of buttons is duplicated below the comic as well. While this redundancy isn't needed in most comics, it ensures that the buttons are conveniently accessible both before and after scrolling, especially for [[:Category:Large drawings|large comics]].
 Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.

@@ Line 32: / Line 32: @@
 ==Comic section==
 [[File:xkcd_comic.png|right|150px]]
 This section of the website is dedicated to displaying comics. Positioned above the comic is the title, presented in large and bold lettering. Just below the title, but above the primary comic image,  there are five buttons. They follow a fairly standard layout: on the outer edges are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 11px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 12px;">|<</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">>|</span></li> arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;"><&nbsp;Prev</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Next&nbsp;></span></li> buttons, allowing navigation between the comics immediately before and after the currently displayed one. In instances where the displayed comic is the first or the last, attempting to access the previous or next comic will simply result in the page being reloaded. At the center there is a <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Random</span></li> button, which, when clicked, loads a comic at random. The same set of buttons is duplicated below the comic as well. While this redundancy isn't needed in most comics, it ensures that the buttons are conveniently accessible both before and after scrolling, especially for [[:Category:Large drawings|large comics]].
@@ Line 41: / Line 42: @@
 :<div style="font-variant: small-caps; font-weight: 500; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">Image URL (for hotlinking/embedding): </div><div style="font-variant: small-caps; font-weight: 800; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">https://imgs.xkcd.com/comics/experimental_astrophysics.png</div>
-==Title text==
+===Title text===
 :''Main article: [[Title text]]''

@@ Line 3: / Line 3: @@
 The design has changed many times over the years, but mainly in the beginning. Prior to [https://web.archive.org/web/20041024201125/http://68.57.186.221:8080/ October 24th, 2004], the website didn't mention the name "xkcd" and didn't include any comics. During that time, the site's message simply stated: "I don't use this page for much. It goes un-updated for a long time, and I don't really change the content, though I'm thinking of putting together a good links page. For now I just mostly use this to host pictures.". Before [https://web.archive.org/web/20051018051614/http://www.xkcd.com:80/ October 18th, 2005], the website was redesigned to be used to host xkcd comics. Between [http://web.archive.org/web/20060706040359/http://xkcd.com:80/ July 6th, 2006] and [http://web.archive.org/web/20060710090528/http://www.xkcd.com:80/ July 10th, 2006], the design of the website changed dramatically to one very similar to the current one.
+<span id="Links"></span>
-==Links==
+==Links section==
 [[File:xkcd_links.png|right|150px]]
 :''Main article: [[Links]]''
@@ Line 11: / Line 11: @@
 {{:Links}}
+<span id="Header"></span>
-==Header==
+==Header section==
 [[File:xkcd_header.png|right|150px]]
 The second section is the header, which contains the logo, the [[Tagline|tagline]], and the [[Header text|header text]]. The header is wider than the first section but has the same height. The xkcd logo is positioned on the upper left corner and serves as a clickable link to the front page. The image used in the logo of xkcd is from the first panel of [[77: Bored with the Internet]], showing only the characters and the chair and the desk with a now old fashioned computer screen. The color of the text in the logo is a shade of grey/gray(spelling varies with location), with a hex value of #6e7b91, and an rgba value of (110,123,145,255).
@@ Line 29: / Line 29: @@
 {{:Header text}}
+<span id="Comic"></span>
-==Comic==
+==Comic section==
 [[File:xkcd_comic.png|right|150px]]
 This section of the website is dedicated to displaying comics. Positioned above the comic is the title, presented in large and bold lettering. Just below the title, but above the primary comic image,  there are five buttons. They follow a fairly standard layout: on the outer edges are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 11px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 12px;">|<</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">>|</span></li> arrows, which transport the user to the first or most recent comic accordingly. Adjacent to these are the <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;"><&nbsp;Prev</span></li> and <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Next&nbsp;></span></li> buttons, allowing navigation between the comics immediately before and after the currently displayed one. In instances where the displayed comic is the first or the last, attempting to access the previous or next comic will simply result in the page being reloaded. At the center there is a <li style="background-color: #6E7B91; border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray; display: inline; font-size: 12px; font-variant: small-caps; font-weight: 600; margin: 0 4px; padding: 1.5px 0;"><span style="color: #FFFFFF; padding: 0 11px;">Random</span></li> button, which, when clicked, loads a comic at random. The same set of buttons is duplicated below the comic as well. While this redundancy isn't needed in most comics, it ensures that the buttons are conveniently accessible both before and after scrolling, especially for [[:Category:Large drawings|large comics]].
@@ Line 40: / Line 40: @@
 :<div style="font-variant: small-caps; font-weight: 500; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">Permanent link to this comic: </div><div style="font-variant: small-caps; font-weight: 800; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks"> https://xkcd.com/3000/</div>
 :<div style="font-variant: small-caps; font-weight: 500; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">Image URL (for hotlinking/embedding): </div><div style="font-variant: small-caps; font-weight: 800; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">https://imgs.xkcd.com/comics/experimental_astrophysics.png</div>
 ==Bottom section==

@@ Line 36: / Line 36: @@
 Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.
-The links were originally copyable plaintext, but were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].
+The two links were originally plaintext and couldn't be clicked, but they were changed to hyperlinks between [https://web.archive.org/web/20210731145017/https://xkcd.com/102/ July 31, 2021] and [https://web.archive.org/web/20210810053223/https://xkcd.com/102/ Aug 10, 2021].
 :<div style="font-variant: small-caps; font-weight: 500; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">Permanent link to this comic: </div><div style="font-variant: small-caps; font-weight: 800; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks"> https://xkcd.com/3000/</div>

@@ Line 1: / Line 1: @@
-{{xkcd.com}}[[File:xkcd_website.png|thumb|right|250px|The four main sections of the [https://xkcd.com xkcd.com] website.]]{{TOC}}{{incomplete|In section [[#Comic]], need to add '''when''' the links became hyperlinked. Before, they were in plaintext and were not clickable, but now they are. For example: [http://web.archive.org/web/20170320025830/https://xkcd.com/ here they're not hyperlinked], but [https://xkcd.com/ here they are]. For the phrasing, draw inspiration from pages like [[Footnote]] and [[Tagline]].}}
+{{xkcd.com}}[[File:xkcd_website.png|thumb|right|250px|The four main sections of the [https://xkcd.com xkcd.com] website.]]{{TOC}}
 The '''design of [https://xkcd.com xkcd.com]''' includes four white sections, which are separated by a thin black border and a light blue-gray background color. All text on the page uses a small caps font, except for the word "xkcd" in the logo image. Here is a list of the changes that have been made:
@@ Line 36: / Line 35: @@
 Finally, beneath this second row of buttons, two links are provided. The first functions as a permalink, directly linking to the comic currently displayed on the page. In some cases, custom permalinks are used for various versions of the same comic, such as in some of the [[:Category:Interactive comics|interactive comics]] like [[1350: Lorenz]] and [[1663: Garden]]. The structure of this link consists solely of the [https://xkcd.com xkcd.com] domain followed by the respective comic number. For instance, the link for comic [[3000: Experimental Astrophysics]] would appear as: "https://www.xkcd.com/3000/". The second link leads to the image URL suitable for hotlinking or embedding, in this case "https://imgs.xkcd.com/comics/experimental_astrophysics.png". This link is stored within a comics-specific logical subdirectory of the server. The filenames of these images typically align with the comic titles, although exceptions arise, particularly in cases of [[:Category:Comics sharing name|title conflicts]] or when the visible comic is dynamically generated or a composite rendering.
 :<div style="font-variant: small-caps; font-weight: 500; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks">Permanent link to this comic: </div><div style="font-variant: small-caps; font-weight: 800; font-size: 16px; line-height: 150%; text-align: center;" class="plainlinks"> https://xkcd.com/3000/</div>

← Older revision		Revision as of 15:59, 12 March 2025
Line 1:		Line 1:
−	{{xkcd.com}}[[File:xkcd_website.png\|thumb\|right\|250px\|The four main sections of the [https://xkcd.com xkcd.com] website.]]{{TOC}}~~<br>~~{{incomplete\|In section [[#Comic]], need to add '''when''' the links became hyperlinked. Before, they were in plaintext and were not clickable, but now they are. For example: [http://web.archive.org/web/20170320025830/https://xkcd.com/ here they're not hyperlinked], but [https://xkcd.com/ here they are]. For the phrasing, draw inspiration from pages like [[Footnote]] and [[Tagline]].}}	+	{{xkcd.com}}[[File:xkcd_website.png\|thumb\|right\|250px\|The four main sections of the [https://xkcd.com xkcd.com] website.]]{{TOC}}{{incomplete\|In section [[#Comic]], need to add '''when''' the links became hyperlinked. Before, they were in plaintext and were not clickable, but now they are. For example: [http://web.archive.org/web/20170320025830/https://xkcd.com/ here they're not hyperlinked], but [https://xkcd.com/ here they are]. For the phrasing, draw inspiration from pages like [[Footnote]] and [[Tagline]].}}

	The '''design of [https://xkcd.com xkcd.com]''' includes four white sections, which are separated by a thin black border and a light blue-gray background color. All text on the page uses a small caps font, except for the word "xkcd" in the logo image. Here is a list of the changes that have been made:		The '''design of [https://xkcd.com xkcd.com]''' includes four white sections, which are separated by a thin black border and a light blue-gray background color. All text on the page uses a small caps font, except for the word "xkcd" in the logo image. Here is a list of the changes that have been made:

@@ Line 90: / Line 90: @@
 :''Main article: [[Bitcoin address]]''
-The [[Bitcoin address]] on xkcd used to be included in [https://xkcd.com/bitcoin xkcd.com/bitcoin] and in the [[Footnote|footnote]]. A larger version of the Bitcoin address is available in [[Bitcoin address|the main article]]. He updated the addresses frequently, using them as a modern tip jar for high-tech users. There have been [[Bitcoin address#History|six Bitcoin addresses]] displayed over the course of the site's history, with the last one being [[Bitcoin address#Footnote|removed]], alongside the [[Footnote|footnote]], in 2016. It stated:
+The [[Bitcoin address]] on xkcd used to be included in the [[Footnote|footnote]] and in [https://xkcd.com/bitcoin xkcd.com/bitcoin]. A larger version of the Bitcoin address is available in [[Bitcoin address|the main article]]. He updated the addresses frequently, using them as a modern tip jar for high-tech users. There have been [[Bitcoin address#History|six Bitcoin addresses]] displayed over the course of the site's history, with the last one being [[Bitcoin address#Footnote|removed]], alongside the [[Footnote|footnote]], in 2016. It stated:
 {{:Bitcoin address}}