/* ---------------------------------------------------------------- I M P O R T ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- D E F A U L T S ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------------- */ /*041*/ /* ---------------------------------------------------------------- LAYOUT ---------------------------------------------------------------- */ /* was 560px /// 530px: old blog size */ /* 810px: legacy size based on a fixed 12-column grid (40px unit and 30px gutter) */ /* was 1024px */ /* was 370px // was 500px */ /* 680px + safetypadding */ /* 900px + safetypadding */ /* 1024px + safetypadding */ /* used to be 16px */ /* ---------------------------------------------------------------- COLORS ---------------------------------------------------------------- */ /* #69a2ff */ /* fadeout(@defaults-color-manateeblack, 97%) looks better than @defaults-color-snowblacks-002 */ /* Palette.snowWhites.at(0.075).desaturate(0.08) = rgba(208, 221, 240, 0.1)*/ /* fadeout(@defaults-color-manateeblack, 90%) looks better than @defaults-color-snowblacks-010 */ /* looks better than @defaults-color-snowblacks-010 */ /* ---------------------------------------------------------------- FONT STACKS ---------------------------------------------------------------- */ /* Starting from Safari 13.1, they added font family names for system fonts: ui-sans-serif — San Francisco (same as system-ui and -apple-system) ui-rounded ui-serif — New York ui-monospace — SF Mono */ /* More */ /* ---------------------------------------------------------------- COLOR PALETTE ---------------------------------------------------------------- */ /* Helper Function: ``` var a = []; a.push([Palette.skyflowerBluesV2, 'skyflowerblues']); a.push([Palette.diamondGrays, 'diamondgrays']); a.push([Palette.diamondBlacks, 'diamondblacks']); a.push([Palette.diamondWhites, 'diamondwhites']); a.push([Palette.snowGrays, 'snowgrays']); a.push([Palette.snowBlacks, 'snowblacks']); a.push([Palette.snowWhites, 'snowwhites']); a.push([Palette.iceGrays, 'icegrays']); a.push([Palette.iceBlacks, 'iceblacks']); a.push([Palette.iceWhites, 'icewhites']); a.push([Palette.oceanGrays, 'oceangrays']); a.push([Palette.oceanBlacks, 'oceanblacks']); a.push([Palette.oceanWhites, 'oceanwhites']); var s = ''; for (var j=0; j80 || i%5===0) { var grad = a[j][0]; var title = a[j][1]; var rgbaString = grad.at(i/100).toString('rgba256'); s += '@defaults-color-'+title+'-'+("0000" + i).slice(-3)+': color('+rgbaString+');\n'; } } s += '\n'; } console.log(s); ``` */ /* Legacy */ /* business pink */ /* awesome green */ /* golden yellow */ /* golden yellow bright */ /* skyflower blue */ /* indigo blue */ /* things blue 0 */ /* things blue 1 */ /* things blue 2 */ /* things blue 3 */ /* things blue 4 */ /* things blue 5 */ /* things blue 6 */ /* things blue 7 */ /* things blue 8 */ /* things blue 9 */ /* manatee gray */ /* manatee black (50% manatee black ^= manatee gray) */ /* rhino gray */ /* rhino black (75% rhino black ^= rhino gray) */ /* shark black */ /* snow white */ /* porcelain white */ /* quartz black */ /* diamond black */ /* space black (mac) */ /* space black (ios) */ /* space silver (mac) */ /* space silver (ios) */ /* ---------------------------------------------------------------- T O O L S ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- BACKGROUND IMAGES ---------------------------------------------------------------- */ /* BACKGROUND IMAGE */ /* SPRITE */ /* HIDE TEXT */ /* ---------------------------------------------------------------- GRID ---------------------------------------------------------------- */ /* - implemented like Core 0.6 > Layout > Grid > MixedGrid > Float/Innerpadding */ /* ROW */ /* COLUMN */ /*---------------------------------------------------------------- SCALES AND PROPORTIONS ---------------------------------------------------------------- */ /* see modularscale.com see goldenrationcalculator.com */ /*---------------------------------------------------------------- DYNAMIC PROPERITIES ---------------------------------------------------------------- */ /* A LESS hack, that allows setting properties dynamically, e.g. as a parameter from mixins. Known issue: It creates an additional line "-less-property: property", there is no workaround yet. */ /*---------------------------------------------------------------- GRID UNITS ---------------------------------------------------------------- */ /* Set properties based on grid units */ /*---------------------------------------------------------------- FLEXBOX ---------------------------------------------------------------- */ /* Notes: - the flexbox model only works with direct children - there are two syntaxes (2009 and 2012) */ /* OLD FLEXBOX MODEL 2009 ------------------------- Surprisingly good browser "support": Chrome, Firefox 2+, Safari 3.1+... Pretty much everything except IE 9- and Opera anything. I say "support" because the actual implementations were partial and differed a bit (hence the re-write). Browsers might drop support for the old syntax in the future. http://infrequently.org/2009/08/css-3-progress/ http://www.html5rocks.com/de/tutorials/flexbox/quick/ */ /* NEW FLEXBOX MODEL 2012 ------------------------- Not supported in Safari yet. http://dev.opera.com/articles/view/flexbox-basics/ http://css-tricks.com/old-flexbox-and-new-flexbox/ */ /*---------------------------------------------------------------- BOX SIZING ---------------------------------------------------------------- */ /*---------------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------------- */ /*---------------------------------------------------------------- BACKGROUND CLIP ---------------------------------------------------------------- */ /* Can be used to enable transparent borders */ /*---------------------------------------------------------------- BACKGROUND SIZE ---------------------------------------------------------------- */ /*---------------------------------------------------------------- GRADIENTS (LINEAR) ---------------------------------------------------------------- */ /*---------------------------------------------------------------- GRADIENTS (LINEAR HORIZONTAL) ---------------------------------------------------------------- */ /*---------------------------------------------------------------- GRADIENTS (RADIAL) ---------------------------------------------------------------- */ /*---------------------------------------------------------------- BOX SHADOW ---------------------------------------------------------------- */ /*---------------------------------------------------------------- RETINA BACKGROUND IMAGE ---------------------------------------------------------------- */ /* mediaQueries from retina.js project: (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) */ /* EXPERIMENT: Trying to avoid loading both images, but it didn't work @media all and not (print and (-webkit-min-device-pixel-ratio: @minpixelratio)) { //background-image: url('@{url}'); //background: blue; } @media only screen and (-webkit-max-device-pixel-ratio: @minpixelratio) { //background-image: url('@{url}'); //background: green; } @media screen and (-webkit-min-device-pixel-ratio: @minpixelratio) { //background-image: url('@{url2x}'); //background: yellow; } */ /* APPLE.COM USES: @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) */ /*---------------------------------------------------------------- BORDER IMAGE ---------------------------------------------------------------- */ /*---------------------------------------------------------------- RESPONSIVE IMAGE ---------------------------------------------------------------- */ /*---------------------------------------------------------------- IMAGE REPLACEMENT OF TEXT ---------------------------------------------------------------- */ /*---------------------------------------------------------------- TRANSITIONS ---------------------------------------------------------------- */ /*---------------------------------------------------------------- TRANSFORMS ---------------------------------------------------------------- */ /*---------------------------------------------------------------- AUTO CLEAR (AKA CLEARFIX) ---------------------------------------------------------------- */ /*---------------------------------------------------------------- ALIGN BASELINE ---------------------------------------------------------------- */ /* Purpose: Aligns the first baseline of two text blocks with different fontsizes ("aside" and "main") by adding margin to the top of the "aside". Note: - @toplineposition and @baselineposition: Assumed position of the baseline and topline within the text bounding box. Can be different for each font. */ /*---------------------------------------------------------------- INLINE BLOCK ---------------------------------------------------------------- */ /* Note: IE6 and IE7 support inline-block on elements that are originally inline. The mixin is not necessary on these elements. */ /*---------------------------------------------------------------- MIN HEIGHT ---------------------------------------------------------------- */ /*---------------------------------------------------------------- TEXT WRAPPING ---------------------------------------------------------------- */ /*---------------------------------------------------------------- USER SELECT NONE ---------------------------------------------------------------- */ /*---------------------------------------------------------------- MULTI COLUMN ---------------------------------------------------------------- */ /*---------------------------------------------------------------- SPRITE ---------------------------------------------------------------- */ /*---------------------------------------------------------------- PREPEND ICON BEFORE ---------------------------------------------------------------- */ /* Doesn't work in IE < 8 (generated content) */ /*---------------------------------------------------------------- KERNING AND LIGATURES ---------------------------------------------------------------- */ /* Enable kerning-pairs & ligatures. Apparently has performance issues and can lead to crashes in edge cases. See: http://aestheticallyloyal.com/public/optimize-legibility/ */ /*---------------------------------------------------------------- ANTIALIASING ---------------------------------------------------------------- */ /* @smoothing: subpixel-antialiased | antialiased | none */ /*---------------------------------------------------------------- WEBKIT SPECIFIC STUFF ---------------------------------------------------------------- */ /*---------------------------------------------------------------- CENTER HORIZONTALLY ---------------------------------------------------------------- */ /* .core-tools-center(@width) { width: @width; margin-left: auto; margin-right: auto; } .core-tools-center(@grid-span, @grid-unit, @grid-gutter) { .core-tools-gridwidth(width, @grid-span, @grid-unit, @grid-gutter); margin-left: auto; margin-right: auto; } */ /*---------------------------------------------------------------- VERTICAL ALIGNMENT ---------------------------------------------------------------- */ /* Issues: - Doesn't work in IE < 8 ('display:table' is not supported). */ /*---------------------------------------------------------------- 3D ---------------------------------------------------------------- */ /*---------------------------------------------------------------- TEST ---------------------------------------------------------------- */ /* .core-tools-test(@input) { //@var: `"hello".toUpperCase() + '!'`; @string: @input; //@first: ~` "@{input}"["@{input}".length-2] `; @first: ~` ( "@{string}".charAt("@{string}".length-1)==='%') ? 'x' : 'y' `; // !!! string is wrapped in [ ... ] //@first: ~` "@{string}".match(/(100|[0-9]{1,2})%/g)?'x':'y' `; //@first: ~` "@{string}".replace(/(100|[0-9]{1,2})%$/g, "") `; //@first: ~` "@{string}".replace(/(100|[0-9]{1,2})(\.[0-9]{1,2})?%$/g, "") `; //@second: ~` parseInt("@{string}".replace(/%/g, ""))/100 `; //@var: ~` parseInt("@{string}".replace(/%/g, ""))/100 `; //@var: 'test'; content: @first; } */ /* .set-dynamic-fontsize(@basesize, @steps) { @minfactor: 1.0; @maxfactor: 1.666; @decay: 2; // large number means, slower decay //@maxsize: @basesize * @factor; //@_var: ~`(function(basesize, steps){ return (factor * steps); })()`; //@_var: ~`Math.pow("@{factor}", "@{steps}")`; //@_var: ~`1/("@{factor}", "@{steps}")`; // f(x) = decay / (x + steepness - 1) @fx: @decay / (@steps + @decay - 1); // results are between ~ 1.0-0.0 font-size: @basesize * (@minfactor + ((@maxfactor - @minfactor) * @fx)); } */ /* ================================================================ H E A D I N G ================================================================ */ /* Making sure text before and after the heading will stay on the baseline grid. The headline itself can be offset from the baseline grid. Please note: - thelineheight: must be a factor - thenumberoflines: how many (base-)lines does the headline span? - theverticalposition: where in that space is the headline positioned? 0.0...1.0 */ /* ================================================================ L I N E ( H O R I Z O N T A L R U L E ) ================================================================ */ /* ================================================================ L I N K ================================================================ */ /* ================================================================ L I S T ================================================================ */ /* ================================================================ I N I T I A L C A P ================================================================ */ /* Note: @toplineposition and @baselineposition: assumed position of the baseline and topline within the text bounding box (can be different for each font) */ /* ================================================================ H A N G I N G P U N C T U A T I O N ================================================================ */ /* Examples:

“Belgae ab extremis Galliae finibus oriuntur.”

*/ /* ================================================================ I N P U T S , B U T T O N S , T E X T F I E L D S . . . ================================================================ */ /* Purpose: Basic layout for all input elements, like buttons and textfields that have complicated layout. Known issues: - Line-height cannot be used properly. The only way to get a consistent height of buttons and textfields, is to use "normal !important". */ /* ================================================================ G R O U P ================================================================ */ /* Internally built like an "inline grid". Attributes: - width - spacing - align - axis */ /* ================================================================ G R I D ================================================================ */ /* # Grid Types - fixedgrid - regular grid with aligned gutters - width: fixed - gutter: fixed - mixedgrid - regular grid with aligned gutters - width: percentage - gutter: fixed - fluidgrid - regular grid with aligned gutters - width: percentage - gutter: percentage - proportionalgrid - exact proportions, but gutters aren't aligned (you can't have both) - width: percentage - gutter: percentage # Layout Techniques - float (+) browser support (+) multi-row (responsive!) (-) multi-row: columns must have same height (-) alignment hard/impossible (•) minor issues: autoclear hack, rounding issues - inline (+) multi-row (responsive!) (+) multi-row: columns can have different heights (+) alignment easy (vertical and horizontal) (-) whitespace issue (•) minor issues: browser support IE8+, rounding issues - table (+) no rounding issues (+) alignment possible (vertical) (-) needs table, row, and column for gutter (except 'fluid') (-) multi-row impossible (except via hidden rows) (!) always fills up the entire table (3 * 1/4) => 100% - flexbox (?) complicated # Gutter Techniques There are 3 different techniques on how the "gutter" is applied. Each technique has its pros and cons. In some cases, one technique is preferred if it allows differently sized columns to just override the width attribute in CSS, without other complicated adjustments. - first-column (+) row does not exceed container (-) harder setup (first column needs to be targeted and styled differently) (-) doesn't work as multi-line grid (first column of each line must be targeted and styled) - negative-margin (in row) (+) easy setup (+) works as multi-line grid (-) row exceeds container (1 gutter) - inner-padding (in column) (+) easy setup (+) works as multi-line grid (-) row exceeds container (1/2 gutter) (-) occupies column padding (cannot be used for other purposes, background color in gutter) (-) requires box-sizing (doesn't work in IE < 8) # Known Issues - Using percentages can lead to sub-pixel widths that are rounded differently in different browsers. See: http://ejohn.org/blog/sub-pixel-problems-in-css/ # TODOs - Solve handling of different units - Handle percentage/ratio inputs - Fix rounding errors */ /* ---------------------------------------------------------------- B A S I C G R I D ( H E L P E R S ) ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- F I X E D G R I D ---------------------------------------------------------------- */ /* Parameters: - @width: pixels or ems - @gutter: pixels or ems Layout Techniques: - float - inline Gutter Techniques: - firstcolumn - negativemargin (default) - innerpadding */ /* ---------------------------------------------------------------- M I X E D G R I D ---------------------------------------------------------------- */ /* Parameters: - @ratio: 1/4 or 0.25 - @gutter: pixels or ems Layout Techniques: - float - inline - table Gutter Techniques: - innerpadding (only possible implementation) Known Issues: - The 'table' implementation needs an additional wrapper! - The 'table' implementation always fills up the entire row! */ /* ---------------------------------------------------------------- F L U I D G R I D ---------------------------------------------------------------- */ /* Parameters: - @ratio: 1/4 or 0.25 - @gutter: percentage Layout Techniques: - float - inline - table Gutter Techniques: - firstcolumn - negativemargin - innerpadding (default, because simple width calculation) */ /* ---------------------------------------------------------------- P R O P O R T I O N A L G R I D ---------------------------------------------------------------- */ /* Notes: In a regular grid, the gutter is included in proportion calculations (common case). (+) Columns of different widths line up to the same grid (-) Exact proportions of the content of columns are not maintained In a proportional grid, the gutter is ignored in proportion calculations (rarely needed). (+) Exact proportions of the content of columns are precisely maintained (-) Columns of different widths don't line up to the same grid (-) Requires "number of items" Proportions calculation: - Only the content is used for the calculation (not the gutter). Therefore the total number of items is required. - Advantage: Precise proportions between differently sized content blocks are maintained (e.g. 1-1-2 remains 1-1-2) - Disadvantage: Differently sized content blocks are not aligned. It cannot be used for a grid layout. - You cannot have both. If aligned content blocks are more important, use "fluid row and columns" Parameters: - @ratio: 1/4 or 0.25 - @numberofitems: number - @gutter: percentage Layout Techniques: - float - inline (not implemented) - table (not implemented, doesn't work because borderspacing doesn't accept percentages) Gutter Techniques: - firstcolumn - negativemargin (default) - innerpadding */ /* ================================================================ F L O A T S ================================================================ */ /*---------------------------------------------------------------- B A S I C F L O A T ---------------------------------------------------------------- */ /*---------------------------------------------------------------- G R I D F L O A T ---------------------------------------------------------------- */ /*---------------------------------------------------------------- T A B U L A R F L O A T ---------------------------------------------------------------- */ /* Layout for elements that don't have a wrapping container for each row that can be cleared. Can be used on a
for example. */ /* ---------------------------------------------------------------- O V E R R I D E S ---------------------------------------------------------------- */ body { /* Apply to the body to get a minimum viewport size that fits everything including saftey padding. Also fixes a bug with repeating background images being cut off when scrolling is required. */ /* Background Extension */ background: #fcfeff; } .page { -webkit-text-size-adjust: 100%; } .slice.for-sky { padding: 0 0 1px 0; background-color: #fcfeff; background-repeat: repeat-x; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAMgCAIAAABtb5/QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVZJREFUeNqklkF2AzEIQ/17qJ6s93/NS5qOAQk87SKLsY2QBDhe6/PrY60VfkBZ+/3x2F/YvfXYQ66/9p74IibkN+svbmKddxyST8iZuFyYCZd3DH0epS3j3cLCcvU8J4wb3DKv7TwnnI7w0HU+jJXa7vDqNP4JR+Cy93P63ueL3J+7N6SZwM5BxKw9QeMpQ+0j/90j8U2c/6w1zn6sZc9x8nzyUvcOh7oxnDNm5XzxxHhWa6ln1vHJ95vjEHLK/lJ65njUnclKfeA09ecnLrT9EueXgnP1p+JU9V45ur2QP/WM8jDvqV7DcCu895jiBYKz9oH/cty9kjXp4oTGcK7OAcce6F44z30DP9c79anWPXvucMY+6bwu/X+ONWor+ty8e42qVvF8fVt6DhheFVfpLtzF26XMucql/i8lB3PPOS5iXd5nwiv1Pse+z2cs9+b/+f4WYABzHQk8vY8bwAAAAABJRU5ErkJggg=='); /* background-size: contain; /* was causing bugs... added for extra long status texts, maybe remove? */ } .slice.for-sky .slice-additionalbackground { /* Layout */ padding: 0 0 1px 0; min-height: 1300px; /* Appearance */ background: url('images/abovetheclouds-io75.jpg') repeat-x; background-size: 1500px 1300px; background-size: cover; /* added for extra long status texts, maybe remove? */ background-position: 50% -150px; } .browser-is-mac .slice.for-sky .slice-additionalbackground { transition: background-position 1s ease-out; } .weather-is-expanded .slice.for-sky .slice-additionalbackground { background-position: 50% -50px; } @media screen and (max-width: 420px) { .slice.for-sky { background-position: 50% -100px; } .slice.for-sky .slice-additionalbackground { min-height: 800px; background-position: 50% -300px; } .weather-is-expanded .slice.for-sky .slice-additionalbackground { background-position: 50% -200px; } } .slice.for-sky.for-report { background-position: 50% -100px; } .slice.for-sky.for-report .slice-additionalbackground { min-height: 800px; background-position: 50% -500px; } .slice.for-footer { padding: 1px 0; background: #fcfeff; } /* ---------------------------------------------------------------- W E A T H E R ---------------------------------------------------------------- */ .weather { /* Layout */ width: 400px; min-height: 100px; margin: 80px auto; /* Typography */ font-family: ui-rounded, -apple-system, BlinkMacSystemFont, Roboto, sans-serif; font-size: 13px; line-height: 1.3; font-weight: bold; color: #fff; } @media screen and (max-width: 420px) { .weather { width: auto; } } /* CURRENT */ .weather-is-expanded .weather .weather-current { background: url('images/weather-timeline-io70.png') no-repeat; background-size: 100px 200px; background-position: 0px 100px; } .weather-is-expanded .weather.is-sunny .weather-current { background-position: 0px 75px; } .weather-is-expanded .weather.is-rainy .weather-current { background-position: 0px 90px; } /* HISTORY */ .weather-history { /* Layout */ height: 0; overflow: hidden; /* Appearance */ } .browser-is-mac .weather-history { transition: height 1s ease-out; } /* STATUS */ .weather-status { padding-left: 110px; } /* DESCRIPTION */ /* DATE */ .weather-date { color: rgba(255, 255, 255, 0.33); } /* LINK */ .weather-description a { text-decoration: underline; } /* LOCALTIME */ .weather-localtime { text-decoration: underline; } /* IN 'CURRENT' */ .weather-current { /* STATUS */ /* DESCRIPTION */ /* DATE */ } .weather-current .weather-status { min-height: 100px; } .weather-current .weather-status.is-sunny { background: url('images/weather-icon-sunny-io70.png') no-repeat; background-size: 100px 100px; } .weather-current .weather-status.is-rainy { background: url('images/weather-icon-rainy-io70.png') no-repeat; background-size: 100px 100px; } .weather-current .weather-status.is-stormy { background: url('images/weather-icon-stormy-io70.png') no-repeat; background-size: 100px 100px; } .weather-current .weather-description { padding-top: 10px; font-size: 20px; line-height: 1.2; } .weather-current .weather-date { display: none; } /* IN 'HISTORY' */ .weather-history { /* STATUS */ /* DESCRIPTION */ /* DATE */ } .weather-history .weather-status { padding-top: 30px; padding-bottom: 30px; } .weather-history .weather-status.is-sunny { background: url('images/weather-timeline-sunny-io70.png') repeat-y; background-size: 100px 300px; } .weather-history .weather-status.is-rainy { background: url('images/weather-timeline-rainy-io70.png') repeat-y; background-size: 100px 300px; } .weather-history .weather-status.is-stormy { background: url('images/weather-timeline-stormy-io70.png') repeat-y; background-size: 100px 300px; } .weather-history .weather-status:last-child { padding-bottom: 80px; } .weather-history .weather-status:first-child:last-child { background-position: 0px 50px; padding-top: 80px; padding-bottom: 100px; } .weather-history .weather-status.is-sunny .weather-description { padding-top: 10px; } .weather-history .weather-status.is-sunny .weather-date { display: none; } /* ACTIONS */ .weather-actions { margin-top: 15px; } .weather-showmore, .weather-reportissue { /* Layout */ display: inline-block; *display: inline; zoom: 1; margin-right: 1em; min-width: 8em; /* Appearance */ color: #fff; color: rgba(255, 255, 255, 0.5); cursor: pointer; /* // Button Style padding: 0 1em; line-height: 1.75; background-color: rgba(255,255,255,0.08); .core-tools-borderradius(3px); &:hover { background-color: rgba(255,255,255,0.16); } */ } .weather-showmore:hover, .weather-reportissue:hover { color: rgba(255, 255, 255, 0.75); } /* MESSAGE (FOR LOADING AND ERRORS) */ .weather-message { /* Layout */ display: block; min-height: 50px; padding: 10px 50px; /* Typography */ font-size: 15px; line-height: 1.25; color: rgba(255, 255, 255, 0.5); } .weather.is-initialized .weather-message { /* // Show activity indicator //background-image: url(images/weather-activityindicator.gif); background-image: url(data:image/gif;base64,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); background-repeat: no-repeat; background-position: 0 5px; */ } .weather.is-loading .weather-message { text-align: center; } .weather.is-not-successful .weather-message { text-align: left; } .weather.is-successful .weather-message { display: none; } /* ---------------------------------------------------------------- A R R I V A L S ---------------------------------------------------------------- */ .arrivals { /* Layout */ margin: 2em auto 5em auto; position: relative; z-index: 100; /* Typography */ font-family: ui-rounded, -apple-system, BlinkMacSystemFont, Roboto, sans-serif; font-size: 18px; line-height: 1.3; color: rgba(255, 255, 255, 0.5); /* Appearance */ border-radius: 0.75em; background: hsl(0, 0%, 20%) url(images/arrivals-backgroundnoise.png); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25); } /* HEADER */ .arrivals-header { /* Layout */ padding: 15px 2.5% 15px 2.5%; /* Typography */ font-weight: normal; font-size: 1.5em; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; /* Appearance */ color: rgba(255, 255, 255, 0.9); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.16); } .arrivals-header h1:before { /* Layout */ content: ''; display: inline-block; width: 1.25em; height: 1.25em; margin-right: 0.5em; vertical-align: -0.25em; /* Appearance */ background: url('images/arrivals-planelanding.svg') no-repeat; background-size: 100% 100%; opacity: 0.5; } /* FOOTER */ .arrivals-footer { height: 30px; border-top: 1px solid rgba(255, 255, 255, 0.04); } /* COLUMN LAYOUT */ .arrivals-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 2%; } /* H1 */ /* LIST */ /* ITEM */ .arrivals-item { /* Layout */ position: relative; padding: 17px 2.5%; /* Appearance */ border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.16); } /* FLIPBOX */ .arrivals-flipbox { /* Layout */ position: relative; margin-bottom: 0.5em; padding: 0 0.5em; white-space: nowrap; overflow: hidden; /* Typography */ font-size: 1.125em; line-height: 2em; font-weight: 700; color: #fff; text-shadow: 0px -1px 0px #000; /* Appearance */ background: hsl(0, 0%, 10%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, hsl(0, 0%, 13%)), color-stop(1, hsl(0, 0%, 15%))); background: -webkit-linear-gradient(top, hsl(0, 0%, 13%) 50%, hsl(0, 0%, 15%) 100%); background: -moz-linear-gradient(top, hsl(0, 0%, 13%) 50%, hsl(0, 0%, 15%) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 13%) 50%, hsl(0, 0%, 15%) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 13%) 50%, hsl(0, 0%, 15%) 100%); border-radius: 0.3em; box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.25) inset, 0 -2px 0px rgba(0, 0, 0, 0.25) inset, 0 1px 0px rgba(255, 255, 255, 0.1); } .arrivals-status .arrivals-flipbox { text-align: center; } .arrivals-flipbox:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0.15) 49.99%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.05)); } .arrivals-flipbox strong { display: inline-block; padding: 0.1em 0.25em; line-height: 1; background: hsl(200, 45%, 45%); color: #fff; text-shadow: 0 -1px 0 hsl(200, 45%, 35%); border-radius: 4px; } .arrivals .is-disabled .arrivals-status .arrivals-flipbox { color: #777; } .arrivals .is-released .arrivals-status .arrivals-flipbox { color: hsl(200, 60%, 80%); } /* THINGS ICONS */ .arrivals-title .arrivals-flipbox:before { content: ''; display: inline-block; width: 25px; height: 25px; vertical-align: -0.2em; background: url('images/arrivals-thingsicons.png') no-repeat; background-size: 150px 25px; opacity: 0.6; } .arrivals-item.for-thingsmac .arrivals-title .arrivals-flipbox:before { background-position: -25px 0px; } .arrivals-item.for-thingsiphone .arrivals-title .arrivals-flipbox:before, .arrivals-item.for-thingsipad .arrivals-title .arrivals-flipbox:before { background-position: -50px 0px; } .arrivals-item.for-thingscloud .arrivals-title .arrivals-flipbox:before { background-position: -75px 0px; } .arrivals-item.for-thingswatch .arrivals-title .arrivals-flipbox:before { background-position: -100px 0px; } .arrivals-item.for-thingsvision .arrivals-title .arrivals-flipbox:before { background-position: -125px 0px; } /* CAPTIONS */ .arrivals-caption { /* Layout */ padding: 0 0.15em; margin-bottom: 0.5em; /* Typography */ font-size: 0.8em; line-height: 1.3em; font-weight: 500; } .arrivals-caption a { color: inherit; text-decoration: underline; } .arrivals-caption a:hover { color: rgba(255, 255, 255, 0.85); } .arrivals-caption p { margin-bottom: 1.3em; } /* RESPONSIVE */ @media screen and (max-width: 420px) { .arrivals { margin-left: -4.4%; margin-right: -4.4%; font-size: 17px; } .arrivals-title .arrivals-flipbox:before { vertical-align: -0.25em; } } /* ---------------------------------------------------------------- R E P O R T E R ---------------------------------------------------------------- */ .reporter { /* Layout */ max-width: 600px; margin: 70px auto 100px auto; padding: 2em; /* Appearance */ background: white; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 1em; box-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05); } .reporter :last-child { margin-bottom: 0; } .reporter-form { margin-top: 2em; } .reporter-item { margin-bottom: 2em; } .reporter-question { font-weight: 600; } .reporter-friendlycaptcha { margin: 1em 0; }