/* FUTURE */ /* END FUTURE */ /* NOTES */ /* - 1024x768 = most common screen size - @media rule introduced in css 2 (1998). - https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries https://www.w3.org/TR/css3-mediaqueries/#media0 The keyword 'only' can also be used to hide style sheets from older user agents. User agents must process media queries starting with 'only' as if the 'only' keyword was not present. - need this line in
for the @media screen rule to work: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag - web safe colours: http://websafecolors.info/color-chart - more colours: http://www.tayloredmktg.com/rgb - word breaking: -- https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break/ - color palette: http://clrs.cc/ - color picker: https://www.w3schools.com/colors/colors_picker.asp - https://www.w3schools.com/tags/ref_colornames.asp */ /* Useful links: https://meyerweb.com/eric/tools/css/reset/ https://css-tricks.com/centering-css-complete-guide/ Hover is "sticky" on touch devices. Buttons don't unpress. https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ */ /* link colors: #6D7EAB; Trilema link light blue. #279ae1; Twitter hashtag blue. #26a8ee; balajis.com category blue. #0687f5; bandcamp embedded player title blue. #0093df; solid blue. */ /* To ensure that on iPhone the website cannot shift along the x-axis, need to be careful to make sure that all content wraps well. */ /* END NOTES */ /* Variables */ :root { --foo: blue; --faded_white: #FDFDFD; /* Less-bright white. */ /* Alternative faded white: #fefefe */ --solid_blue: #0c6cf2; --darker_solid_blue: #144699; --trilema_link_blue: #6D7EAB; /* trilema link color */ --bandcamp_link_blue: #0687f5; --twitter_hashtag_blue: #279ae1; --heading_orange: #FAEBD7; /* original heading background colour for edgecase v1 */ --light_orange: #f2b883; /* Alternative light orange: #f4bf93 */ --light_grey: #f1f3f4; --heading_background: #57bbf1; /* 86c5e7, 57bbf1 */ --commercial_background: #e7e9ea; /* daf2fb, c0eeff */ --commercial_link: #1437f0; /* #0349d0, #1437f0 */ --preface_background: #e7e9ea; --postface_background: #e7e9ea; --backlinks_background: #e7e9ea; } /* ==================================================== */ /* RULESET 1 */ /* ==================================================== */ /* NOTES: - This is the default ruleset. - We apply this to screens smaller than 1024x768. Well, narrower than 1024 pixels, anyway. */ body { background-color: var(--faded_white); margin: 0; } .thin_border2 { /* set this class name to .thin_border to turn on borders */ border-width: 1px; border-style: solid; } #container { -webkit-text-size-adjust: 100%; /* -webkit-text-size-adjust prevents Safari on iOS from bumping up the font sizes of various small divs. https://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment */ } #header_section { height: 120px; width: 100%; background-color: black; } #datafeed_name { height: 100%; width: 100%; display: table; text-align: center; } #datafeed_name_text { display: table-cell; vertical-align: middle; color: var(--faded_white); font-family: Arial ; font-size: 2.8em; font-weight: bold; } /* The minimal_link_styling class is used for the hyperlink around the #datafeed_name_text. */ .minimal_link_styling:link { color: inherit; cursor: auto; text-decoration: inherit; } .minimal_link_styling:visited { color: inherit; cursor: auto; text-decoration: none; } .minimal_link_styling:hover { cursor: pointer; text-decoration: underline; } /* Light links is declared early, so that it can be overridden later by link styling that is more specific. */ .light_links a, a.visited { text-decoration: none; color: var(--trilema_link_blue); } .light_links a:hover { text-decoration: underline; } /* These buttons are only visible in the small screen size */ @media only screen and (max-width: 1024px) { .button_section_wrapper { width: 100%; } .button_section { padding-top: 20px; padding-bottom: 10px; } #button_section_1 { width: 90%; /* same width as navigation_panel div */ margin: auto; } .button_sometimes_visible a, a.visited { display: inline-block; /* Converts the anchor into a block-like element, so that the parent will expand to completely contain it. */ background-color: var(--solid_blue); text-decoration: none; color: var(--faded_white); font: 600 0.85rem Arial; border-radius: 4px; padding: 8px 15px; } @media (hover: hover) { .button_sometimes_visible a:hover { text-decoration: none; background-color: var(--darker_solid_blue); transition: 0.3s; } } .button_navigation_panel.button_sometimes_visible a:before { /* This psuedo-element adds this text to the anchor, but only for ruleset 1 screen sizes. This avoids adding a line break for larger screen sizes (I think). */ content: "Explore"; } .button_top.button_sometimes_visible a:before { content: "Back to Top"; } } /* These buttons are always visible, in all screen sizes. */ .button_section_always_visible { padding: 10px 0px; } #button_section_3 { width: 100%; } #button_section_4 { width: 90%; margin: auto; margin-bottom: 50px; } .button_always_visible a, a.visited { display: inline-block; /* Converts the anchor into a block-like element, so that the parent will expand to completely contain it. */ background-color: var(--solid_blue); text-decoration: none; color: var(--faded_white); font: 600 0.85rem Arial; border-radius: 4px; padding: 8px 15px; } @media (hover: hover) { .button_always_visible a:hover { text-decoration: none; background-color: var(--darker_solid_blue); transition: 0.3s; } } .button_top.button_always_visible a:before { content: "Back to Top"; } #main_section { /* overflow:hidden causes the parent to expand to contain floating children. https://www.w3.org/TR/CSS21/visuren.html#block-formatting */ overflow: hidden; width: 100%; border-color: blue; margin-top: 50px; } #display_panel { float: left; width: 100%; border-color: green; padding-left: 0 5; line-height: 1.3em; font-size: 1.2em; margin-bottom: 100px; } #navigation_panel_wrapper { float: left; border-color: orange; width: 100%; } #navigation_panel { width: 90%; margin: auto; font-size: 1.2em; } #initial_quote { /* margin-top is 0px because the main_section already has a margin-top. */ margin-top: 0px; margin-bottom: 70px; /* this pushes down the title etc */ } #title { width: 95%; margin: 0 auto; font-family: Arial; font-weight: bold; font-size: 1.6em; line-height: 1.3em; text-align: center; } #title a, a.visited { text-decoration:none; color: black; } #title a:hover { text-decoration: underline; } #title_line { width: 90%; margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 1.5em; border-bottom: 4px solid black; } #item_metadata { margin-top: 10px; margin-bottom: 10px; width: 100%; } #item_metadata div { font-family: Arial; font-size: 0.8em; text-align: left; color: grey; width: 90%; margin: 0 auto; } #item_metadata span.metadata_author_name { /* Concession to the aesthetics of having all article author names be bold. */ text-decoration:none; color: black; font-weight: bold; } #item_metadata a, a.visited { text-decoration:none; color: black; font-weight: bold; } #item_metadata a:hover { text-decoration: underline; } #preface { width: 90%; margin: 2em auto; } .preface_content { border: 1px solid black; border-radius: 10px; font-size: 0.9em; padding: 10px; background-color: var(--preface_background); } #postface { width: 90%; margin: 2em auto; } .postface_content { border: 1px solid black; border-radius: 10px; font-size: 0.9em; padding: 10px; background-color: var(--postface_background); } #commercial { width: 90%; margin: 2em auto; } .commercial_content { border: 1px solid black; border-radius: 10px; font-size: 0.9em; padding: 10px; background-color: var(--commercial_background); } .commercial_content a, a.visited { text-decoration: none; color: var(--commercial_link); font-variant: all-small-caps; font-size: 1.1em; } .commercial_content a:hover { text-decoration: underline; } #content_wrapper { width: 90%; margin: auto; } .content { text-align: left; text-justify: inter-word; overflow-wrap: break-word; /* how portable is this? */ } .content div { display: inline-block; /* goal: within