API tools faq
paste
Advertisement
olcayertas

Skeleton HTML

olcayertas
May 22nd, 2017
279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--suppress JSUnresolvedVariable -->
  3. <html>
  4. <head>
  5.     <script type="application/javascript">
  6.  
  7.         document.addEventListener("DOMContentLoaded", function (ignored) {
  8.             window.webkit.messageHandlers.onContentLoaded.postMessage(window.document.body.scrollHeight);
  9.         });
  10.  
  11.     </script>
  12.     <style>
  13.         html {
  14.             -webkit-text-size-adjust: 100%%;
  15.             -moz-text-size-adjust: 100%%;
  16.             -ms-text-size-adjust: 100%%;
  17.             text-size-adjust: 100%%;
  18.             font-size: 10px;
  19.         }
  20.  
  21.         body {
  22.             margin: 0;
  23.         }
  24.  
  25.         article,
  26.         aside,
  27.         details,
  28.         figcaption,
  29.         figure,
  30.         footer,
  31.         header,
  32.         main,
  33.         menu,
  34.         nav,
  35.         section,
  36.         summary {
  37.             display: block;
  38.         }
  39.  
  40.         audio,
  41.         canvas,
  42.         progress,
  43.         video {
  44.             display: inline-block;
  45.         }
  46.  
  47.         audio:not([controls]) {
  48.             display: none;
  49.             height: 0;
  50.         }
  51.  
  52.         progress {
  53.             vertical-align: baseline;
  54.         }
  55.  
  56.         template, [hidden] {
  57.             display: none;
  58.         }
  59.  
  60.         a {
  61.             text-decoration: none;
  62.             background-color: transparent;
  63.             color: inherit;
  64.         }
  65.  
  66.         a:active,
  67.         a:hover {
  68.             outline-width: 0;
  69.         }
  70.  
  71.         abbr[title] {
  72.             border-bottom: none;
  73.             text-decoration: underline;
  74.         }
  75.  
  76.         ul,
  77.         ol {
  78.             list-style: none;
  79.             padding: 0;
  80.             margin: 0;
  81.         }
  82.  
  83.         b, strong {
  84.             font-weight: normal;
  85.         }
  86.  
  87.         h1, h2, h3, h4, h5, h6, p, blockquote {
  88.             margin: 0 auto;
  89.             font-weight: normal;
  90.             font-size: inherit;
  91.         }
  92.  
  93.         dfn {
  94.             font-style: italic;
  95.         }
  96.  
  97.         mark {
  98.             background-color: #ff0;
  99.             color: #000;
  100.         }
  101.  
  102.         small {
  103.             font-size: 80%%;
  104.         }
  105.  
  106.         sub, sup {
  107.             font-size: 75%%;
  108.             line-height: 0;
  109.             position: relative;
  110.             vertical-align: baseline;
  111.         }
  112.  
  113.         sub {
  114.             bottom: -.25em;
  115.         }
  116.  
  117.         sup {
  118.             top: -.5em;
  119.         }
  120.  
  121.         img {
  122.             border-style: none;
  123.         }
  124.  
  125.         svg:not(:root) {
  126.             overflow: hidden;
  127.         }
  128.  
  129.         code, kbd, pre, samp {
  130.             font-family: monospace, monospace;
  131.             font-size: 1em;
  132.         }
  133.  
  134.         figure {
  135.             margin: 0 auto;
  136.         }
  137.  
  138.         hr {
  139.             box-sizing: content-box;
  140.             height: 0;
  141.             overflow: visible;
  142.         }
  143.  
  144.         button, input, select, textarea {
  145.             font: inherit;
  146.             margin: 0;
  147.         }
  148.  
  149.         optgroup {
  150.             font-weight: bold;
  151.         }
  152.  
  153.         button, input {
  154.             overflow: visible;
  155.             outline: none;
  156.         }
  157.  
  158.         button, select {
  159.             text-transform: none;
  160.         }
  161.  
  162.         button, html [type="button"], [type="reset"], [type="submit"] {
  163.             -webkit-appearance: button;
  164.         }
  165.  
  166.         button::-moz-focus-inner,
  167.         [type="button"]::-moz-focus-inner,
  168.         [type="reset"]::-moz-focus-inner,
  169.         [type="submit"]::-moz-focus-inner {
  170.             border-style: none;
  171.             padding: 0;
  172.         }
  173.  
  174.         button:-moz-focusring,
  175.         [type="button"]:-moz-focusring,
  176.         [type="reset"]:-moz-focusring,
  177.         [type="submit"]:-moz-focusring {
  178.             outline: 1px dotted ButtonText;
  179.         }
  180.  
  181.         fieldset {
  182.             border: 1px solid #c0c0c0;
  183.             margin: 0 2px;
  184.             padding: .35em .625em .75em;
  185.         }
  186.  
  187.         legend {
  188.             box-sizing: border-box;
  189.             color: inherit;
  190.             display: table;
  191.             max-width: 100%%;
  192.             padding: 0;
  193.             white-space: normal;
  194.         }
  195.  
  196.         textarea {
  197.             overflow: auto;
  198.         }
  199.  
  200.         [type="checkbox"], [type="radio"] {
  201.             box-sizing: border-box;
  202.             padding: 0;
  203.         }
  204.  
  205.         [type="number"]::-webkit-inner-spin-button,
  206.         [type="number"]::-webkit-outer-spin-button {
  207.             height: auto;
  208.         }
  209.  
  210.         [type="search"] {
  211.             -webkit-appearance: textfield;
  212.             outline-offset: -2px;
  213.         }
  214.  
  215.         [type="search"]::-webkit-search-cancel-button,
  216.         [type="search"]::-webkit-search-decoration {
  217.             -webkit-appearance: none;
  218.         }
  219.  
  220.         ::-webkit-input-placeholder {
  221.             color: inherit;
  222.             opacity: .54;
  223.         }
  224.  
  225.         ::-webkit-file-upload-button {
  226.             -webkit-appearance: button;
  227.             font: inherit;
  228.         }
  229.  
  230.         *, *:after, *:before {
  231.             -moz-box-sizing: border-box;
  232.             -webkit-box-sizing: border-box;
  233.             box-sizing: border-box;
  234.             vertical-align: top;
  235.         }
  236.  
  237.         ... base64 font faces ...
  238.  
  239.         .content {
  240.             margin-top: 1.5rem;
  241.             padding: 0 1.5rem;
  242.             width: 100%%;
  243.             position: relative;
  244.             font-size: 1.7rem;
  245.             line-height: 2.8rem;
  246.         }
  247.  
  248.         .content p {
  249.             font-size: 1.7rem;
  250.             line-height: 2.5rem;
  251.             color: #222629;
  252.             font-weight: 400;
  253.         }
  254.  
  255.         .content p strong {
  256.             font-weight: 900;
  257.         }
  258.  
  259.         .content > img {
  260.             display: block;
  261.             width: 100%%;
  262.             height: auto;
  263.         }
  264.  
  265.         .content > p {
  266.             margin-bottom: 2.6rem;
  267.         }
  268.  
  269.         .content > blockquote {
  270.             position: relative;
  271.             display: block;
  272.             margin: 3.6rem auto 2.6rem;
  273.             padding: 2.2rem 0 2rem;
  274.             border-top: solid .2rem #eaeaea;
  275.             border-bottom: solid .2rem #eaeaea;
  276.             letter-spacing: .03rem;
  277.             font-size: 3.6rem;
  278.             line-height: 4.3rem;
  279.         }
  280.  
  281.         .content > blockquote:before {
  282.             content: "";
  283.             font-family: "yenisafak-spor", monospace;
  284.             position: absolute;
  285.             top: -1.8rem;
  286.             left: 3rem;
  287.             padding: 0 1rem;
  288.             font-size: 2.8rem;
  289.             background: #fff;
  290.             color: #eaeaea;
  291.         }
  292.  
  293.         .content > blockquote small {
  294.             display: block;
  295.             padding-top: 1rem;
  296.             font-weight: normal;
  297.             font-size: 1.2rem;
  298.             line-height: 1.6rem;
  299.             color: #8c8c8c;
  300.         }
  301.  
  302.         .content > b, .content > strong {
  303.             font-weight: bold;
  304.         }
  305.  
  306.         .content > br {
  307.             content: "";
  308.             display: block;
  309.             margin-bottom: 1rem;
  310.         }
  311.  
  312.         .content ol, .content ul {
  313.             position: relative;
  314.             border: solid .1rem #e6e6e6;
  315.             padding: 3rem 2rem;
  316.             margin: 2rem auto;
  317.             background: #52c3bd;
  318.             background: rgba(82, 195, 189, .05);
  319.             -webkit-border-radius: .3rem;
  320.             -moz-border-radius: .3rem;
  321.             border-radius: .3rem;
  322.         }
  323.  
  324.         .content ol li, .content ul li {
  325.             display: block;
  326.             padding-bottom: 2rem;
  327.             font-family: "Abril", monospace;
  328.         }
  329.  
  330.         .content > p > a, .content > a {
  331.             color: #07e;
  332.             max-width: 100%%;
  333.             overflow: hidden;
  334.             text-overflow: ellipsis;
  335.         }
  336.  
  337.         .content > p > a:hover, .content > a:hover {
  338.             text-decoration: underline;
  339.         }
  340.  
  341.         .content > iframe {
  342.             width: 100%% !important;
  343.         }
  344.  
  345.         .content iframe[src*="youtube"] {
  346.             width: 100%% !important;
  347.             height: 36rem !important;
  348.         }
  349.  
  350.         figure figcaption {
  351.             font-family: "Helvetica", monospace;
  352.             padding: 0 1.5rem 1.5rem;
  353.         }
  354.  
  355.         figure figcaption h3 {
  356.             font-size: 2rem;
  357.             font-weight: 500;
  358.         }
  359.  
  360.         figure figcaption span {
  361.             color: #c8d0d4;
  362.             font-size: 1.5rem;
  363.             line-height: 2rem;
  364.         }
  365.  
  366.         figure figcaption .photo {
  367.             margin-bottom: 1.5rem;
  368.         }
  369.  
  370.         figure figcaption .photo p, figure figcaption .photo span {
  371.             width: auto;
  372.             font-size: 1.4rem;
  373.             color: #676f77;
  374.             line-height: 2rem;
  375.             display: inline-flex;
  376.         }
  377.  
  378.         figure figcaption .photo span {
  379.             color: #9ca5ad;
  380.             margin-left: .5rem;
  381.         }
  382.  
  383.         figure .icon-media-video:before {
  384.             content: "";
  385.             font-size: 2.88rem;
  386.             line-height: 4.8rem;
  387.             width: 4.8rem;
  388.             height: 4.8rem;
  389.         }
  390.  
  391.         figure .icon-media-gallery:before {
  392.             content: "";
  393.             font-size: 2.88rem;
  394.             line-height: 4.8rem;
  395.             width: 4.8rem;
  396.             height: 4.8rem;
  397.         }
  398.  
  399.         figure.inside {
  400.             width: calc(100%% + 3rem);
  401.             margin-left: -1.5rem;
  402.             position: relative;
  403.             color: #222629;
  404.             background: #000;
  405.         }
  406.  
  407.         figure.inside .title {
  408.             font-family: "Helvetica", monospace;
  409.             font-size: 2.4rem;
  410.             line-height: 2.8rem;
  411.             margin: 1.5rem auto;
  412.             color: #fff;
  413.             font-weight: bold;
  414.         }
  415.  
  416.         figure.inside .image {
  417.             position: relative;
  418.             width: auto !important;
  419.         }
  420.  
  421.         figure.inside .image img {
  422.             max-width: 100%%;
  423.             height: auto;
  424.         }
  425.  
  426.         figure.inside .image .icon-group {
  427.             width: auto;
  428.             position: absolute;
  429.             left: 1.5rem;
  430.             bottom: .5rem;
  431.             padding: 0 1.5rem;
  432.             color: #fff;
  433.             -webkit-border-radius: .4rem;
  434.             -moz-border-radius: .4rem;
  435.             border-radius: .4rem;
  436.             z-index: 99999;
  437.             background: #000;
  438.             border: solid #b7b7b7 .2rem;
  439.             font-size: 1.5rem;
  440.         }
  441.  
  442.         figure.inside .image .icon-group strong {
  443.             padding-right: 1rem;
  444.             line-height: 4.8rem;
  445.             font-family: "Helvetica", monospace;
  446.             font-weight: 700;
  447.         }
  448.  
  449.         figure.inside .image .icon-group span {
  450.             font-family: "Helvetica", monospace;
  451.             padding-right: 1rem;
  452.             line-height: 4.8rem;
  453.         }
  454.  
  455.         figure.inside .image.shadow:after {
  456.             content: "";
  457.             position: absolute;
  458.             bottom: 0;
  459.             left: 0;
  460.             right: 0;
  461.             height: 70%%;
  462.             background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, .6) 50%%, #000 100%%);
  463.             background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, .6) 50%%, #000 100%%);
  464.             background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .6) 50%%, #000 100%%);
  465.         }
  466.  
  467.         figure.inside .video {
  468.             position: relative;
  469.         }
  470.  
  471.         figure.inside .video .image.hidden {
  472.             position: absolute;
  473.             pointer-events: none;
  474.             width: 100%%;
  475.             height: 0;
  476.         }
  477.  
  478.         figure.inside .info {
  479.             margin: 1rem auto;
  480.             font-size: 1.3rem;
  481.             line-height: 1.6rem;
  482.             color: #90949d;
  483.         }
  484.  
  485.         figure.inside .info .item {
  486.             position: relative;
  487.             padding-right: 2.2rem;
  488.         }
  489.  
  490.         figure.inside .info .item:after {
  491.             content: "";
  492.             position: absolute;
  493.             top: 50%%;
  494.             right: 1rem;
  495.             height: .2rem;
  496.             width: .2rem;
  497.             background: #90949d;
  498.             -webkit-border-radius: .2rem;
  499.             -moz-border-radius: .2rem;
  500.             border-radius: .2rem;
  501.         }
  502.  
  503.         figure.inside .info .item:last-child:after {
  504.             content: none;
  505.         }
  506.  
  507.         figure.inside .action {
  508.             margin: 1rem auto;
  509.             font-family: "Abril", monospace;
  510.             font-size: 1.2rem;
  511.             line-height: 1.6rem;
  512.             color: #ccc;
  513.         }
  514.  
  515.         figure.inside .action .item {
  516.             position: relative;
  517.             padding-right: 1rem;
  518.         }
  519.  
  520.         figure.inside .action .item i {
  521.             display: inline-block;
  522.             font-size: 1.4rem;
  523.             line-height: 1.6rem;
  524.         }
  525.  
  526.         figure.inside .action .item span {
  527.             display: inline-block;
  528.             padding-top: .2rem;
  529.             line-height: 1.4rem;
  530.             margin: 0 1rem;
  531.         }
  532.  
  533.         figure.inside .spot {
  534.             font-family: "Abril", monospace;
  535.             font-size: 1.3rem;
  536.             line-height: 1.7rem;
  537.             color: #666;
  538.             margin-top: 1rem;
  539.             margin-bottom: .5rem;
  540.         }
  541.  
  542.         figure.inside .description a {
  543.             color: #07e;
  544.             width: 100%%;
  545.             overflow: hidden;
  546.             text-overflow: ellipsis;
  547.         }
  548.  
  549.         figure.inside .description strong {
  550.             font-family: "Abril", monospace;
  551.             color: #000;
  552.         }
  553.  
  554.         figure.inside[data-media="news"] .image img {
  555.             width: 100%%;
  556.             height: auto;
  557.         }
  558.  
  559.         figure.inside[data-media="image"],
  560.         figure.inside[data-media="video"],
  561.         figure.inside[data-media="gallery"] {
  562.             margin-bottom: 2.8rem;
  563.         }
  564.  
  565.         figure.inside[data-media="rich"] {
  566.             margin-bottom: 2rem;
  567.         }
  568.  
  569.         figure.inside[data-media="rich"] .order {
  570.             color: #5dc3e9;
  571.         }
  572.  
  573.         figure.inside[data-media="rich"] .embed img {
  574.             display: block;
  575.             overflow: hidden;
  576.             width: 100%%;
  577.             height: auto;
  578.         }
  579.  
  580.         figure.inside-news {
  581.             width: 100%%;
  582.         }
  583.  
  584.         figure.inside-news .image img {
  585.             width: 100%%;
  586.         }
  587.  
  588.         .note {
  589.             width: 100%%;
  590.             background: #f4feff;
  591.             border: solid #20bbdc .2rem;
  592.             display: block;
  593.             padding: 2.2rem;
  594.             margin-bottom: 2rem;
  595.             border-radius: .5rem;
  596.             font-family: "Helvetica", monospace;
  597.         }
  598.  
  599.         .note span {
  600.             color: #222629;
  601.             font-size: 1.9rem;
  602.             line-height: 2rem;
  603.         }
  604.  
  605.         .note strong {
  606.             font-weight: 500;
  607.         }
  608.  
  609.         .tag {
  610.             width: 100%%;
  611.             background: none;
  612.         }
  613.  
  614.         .tag ul {
  615.             margin: 0;
  616.             padding: 0;
  617.             background: none;
  618.             border: none;
  619.         }
  620.  
  621.         .tag ul li {
  622.             width: auto;
  623.             display: inline-flex;
  624.             margin-right: .6rem;
  625.         }
  626.  
  627.         .tag ul li a {
  628.             padding: 0 1.5rem;
  629.             border: solid #d2d7e0 .1rem;
  630.             display: block;
  631.             font-size: 1.5rem;
  632.             line-height: 4.5rem;
  633.             font-family: "Helvetica", monospace;
  634.             border-radius: .3rem;
  635.             color: #98a5bb;
  636.         }
  637.  
  638.         body {
  639.             font-family: "Abril", monospace;
  640.             font-size: 10px;
  641.         }
  642.  
  643.         * {
  644.             margin: 0;
  645.             padding: 0;
  646.             box-sizing: border-box;
  647.         }
  648.     </style>
  649.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  650.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  651. </head>
  652. <body>
  653. <div id="news-detail" class="content">
  654.     %@
  655. </div>
  656. </body>
  657. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!