Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <!--
- ENTWURF
- Page #27 by silbrigthemes
- Entwurf is a responsive WIP page, which can also be used to showcase books that you are currently reading.
- ----------
- Rules:
- 1) Do not use as base code.
- 2) Do not customize beyond recognition.
- 3) Do not steal (parts of) the code.
- 4) Do not claim as your own.
- 5) Do not delete or alter the credit.
- 6) Do not redistribute to other sites.
- ----------
- Useful comments to this code have been made.
- If you need any help for a problem , feel free to send me a message via silbrigthemes.tumblr.com/ask or send a message to my official support blog, silbrigsupport.tumblr.com.
- Have fun!
- Love,
- Julia <3
- ----------
- Note:
- This work is protected by a creative commons
- Attribution-NonCommercial-NoDerivatives 4.0 International
- (CC BY-NC-ND 4.0)
- license.
- -->
- <head>
- <meta charset="utf-16">
- <title>{Title} | Entwurf</title> <!-- {Title} is your blog title. Change after the "|". -->
- <link rel="shortcut icon" href="{Favicon}"/>
- <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
- <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
- <!-- Changes the toolbar color on mobile. -->
- <meta name="theme-color" content="#217c8e"/>
- <!-- Icon font, by fontawesome -->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
- <!-- Necessary for the theme to be responsive. -->
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Necessary for the scripts to work. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!-- Global Font | Open Sans -->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <!-- Title Font | Playfair Display -->
- <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&display=swap&subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
- <!-- Other Fonts -->
- <!-- Roboto Mono -->
- <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
- <!-- Cormorant Garamond -->
- <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
- <!-- Dancing Script -->
- <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700&subset=latin-ext,vietnamese" rel="stylesheet">
- <style>
- body{
- margin:0;
- top:0;
- left:0;
- background-color:#f3f1ec; /* background color */
- font-size:1em; /* font-size, 1em = 16px */
- color:#333; /* text color */
- font-family:"Open Sans", Verdana; /* global font */
- text-align:justify; /* alt.: left */
- overflow-x:hidden;
- scroll-behavior:smooth;
- }
- /* Custom Scrollbar */
- ::-webkit-scrollbar{
- width:10px;
- }
- ::-webkit-scrollbar-thumb{
- width:10px;
- background-color:#217c8e; /* background color */
- }
- /* Custom Text Selection */
- ::selection{
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- }
- ::-moz-selection{
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- }
- ::-o-selection{
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- }
- ::-webkit-selection{
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- }
- /* Custom Tooltips */
- .tippy-tooltip.entwurf-theme {
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- text-align:left; /* alt.: center, right, justify */
- }
- .tippy-tooltip.entwurf-theme .tippy-svg-arrow {
- fill:#217c8e; /* background color */
- }
- /* ––– END GENERAL | START TEXT STYLES ––– */
- /* Bold Text */
- b, strong{
- font-weight:bold;
- font-weight:700;
- color:#555; /* text color */
- }
- /* Italic Text */
- i, em{
- font-weight:300; /* thin text */
- font-style:italic;
- color:#111; /* text color */
- }
- /* Marked Text */
- mark{
- padding:2px 4px;
- background-color:#01596d; /* background color */
- color:#fff; /* text color */
- }
- /* Preformatted Text */
- pre{
- font-family:"Roboto Mono", Courier; /* font-family */
- font-size:calc(1em - 2px);
- word-wrap:break-all;
- white-space:pre-wrap;
- color:#003c49; /* text color */
- }
- /* Small Text */
- small{
- font-size:calc(1em - 4px);
- }
- /* Underlined Text */
- u{
- text-decoration:none;
- border-bottom:2px solid #333; /* width style color */
- }
- /* Blockquote */
- blockquote{
- border-left:4px solid #217c8e; /* width style color */
- padding-left:8px;
- }
- /* Embedded Media */
- img, iframe{
- max-width:100%;
- }
- /* Text Line */
- hr{
- width:80%;
- height:2px;
- border:none;
- background-color:#217c8e; /* background color */
- }
- /* LINKS */
- /* Link */
- a{
- text-decoration:none;
- color:#217c8e; /* text color */
- border-bottom:2px solid #217c8e; /* width style color */
- }
- /* Link | Hover */
- a:hover{
- color:#01596d; /* text color */
- border-bottom:2px solid #01596d; /* width style color */
- }
- /* Link | Transitions */
- a, a:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* PARAGRAPHS */
- /* First Paragraph */
- p:first-child{
- margin-top:0;
- }
- /* Empty Paragraphs */
- p:empty{
- display:none;
- }
- /* LISTS */
- /* Ordered List */
- ol{
- list-style-type:decimal;
- }
- /* Unordered List */
- ul{
- list-style-type:disc;
- }
- /* COLORED TEXT */
- /* Red Text */
- .npf_color_joey {
- color:#f21000; /* text color */
- }
- /* Orange Text */
- .npf_color_monica {
- color:#f26400; /* text color */
- }
- /* Yellow Text */
- .npf_color_phoebe {
- color:#f2ad00; /* text color */
- }
- /* Green Text */
- .npf_color_ross {
- color:#37ce00; /* text color */
- }
- /* Blue Text */
- .npf_color_rachel {
- color:#005cf2; /* text color */
- }
- /* Purple Text */
- .npf_color_chandler {
- color:#8d00f2; /* text color */
- }
- /* Pink Text */
- .npf_color_niles {
- color:#f200c1; /* text color */
- }
- /* SPECIAL FONTS */
- /* Quirky Font */
- .npf_quirky{
- font-family: "Dancing Script", cursive;
- font-size:1.5em;
- }
- /* Chat Font */
- .npf_chat{
- font-family:"Roboto Mono", Courier;
- }
- /* Quote Font */
- .npf_quote{
- font-family:"Cormorant Garamond", "Palatino";
- font-size:1.25em;
- }
- /* HEADINGS */
- /* First Heading */
- h1{
- font-size:1.75em;
- font-weight:bold;
- color:#217c8e; /* text color */
- }
- /* Second Heading */
- h2{
- font-size:1.5em;
- font-weight:normal;
- color:#01596d; /* text color */
- }
- /* Third Heading */
- h3{
- font-size:1.25em;
- font-weight:300;
- color:#003c49; /* text color */
- }
- /* Fourth Heading */
- h4{
- font-size:1em;
- color:#002630; /* text color */
- }
- /* Fifth Heading */
- h5{
- font-size:calc(1em - 2px);
- text-transform:uppercase;
- color:#002630; /* text color */
- }
- /* Sixth Heading */
- h6{
- font-size:calc(1em - 4px);
- text-transform:uppercase;
- color:#002630; /* text color */
- }
- /* ––– END TEXT STYLES | START LAYOUT ––– */
- /* SIDEBAR */
- #sidebar{
- padding:1em;
- width:calc(30vw - 2em);
- height:calc(100vh - 2em);
- position:fixed;
- top:0;
- left:0;
- background-color:#fff; /* background color */
- display:flex;
- align-items:center;
- justify-content:center;
- flex-direction:column;
- }
- /* Sidebar Title */
- #s-title{
- font-size:2.5em;
- font-family:"Playfair Display", Georgia; /* font-family */
- text-transform:lowercase;
- font-style:italic;
- color:#217c8e; /* text color */
- }
- /* Sidebar Description */
- #s-desc{
- margin-bottom:8px;
- }
- /* Filter Container */
- #myBtnContainer{
- display:flex;
- flex-wrap:wrap;
- justify-content:center;
- }
- /* Filter Button */
- .btn{
- border:none;
- outline:none;
- padding:12px 16px;
- background-color:#f3f1ec; /* background color */
- cursor:pointer;
- margin-right:4px;
- margin-bottom:4px;
- font-family:"Open Sans", Verdana; /* font-family */
- font-size:calc(1em - 4px);
- color:#333; /* text color */
- }
- /* Filter Button | Hover */
- .btn:hover{
- color:#217c8e; /* text color */
- }
- /* Filter Button | Active */
- .btn.active{
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- }
- /* Filter Button | Transitions */
- .btn, .btn:hover, .btn.active{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* CONTAINER */
- #container{
- width:70vw;
- margin-left:30vw;
- height:auto;
- }
- /* WORK */
- .work{
- width:calc(50vw + 2em);
- padding:1em;
- background-color:#fff; /* background color */
- margin-left:calc(10vw - 2em);
- margin-bottom:5em;
- margin-top:5em;
- display:grid;
- grid-template-columns:20vw 15vw 15vw;
- grid-column-gap:1em;
- grid-template-rows:auto 40vh auto auto;
- grid-row-gap:1em;
- float:left;
- display:none;
- }
- /* The "show" class is added to the filtered elements */
- .show {
- display:grid;
- }
- /* Title */
- .w-title{
- grid-column-start:1;
- grid-column-end:4;
- font-size:2em;
- font-family:"Playfair Display", Georgia; /* font-family */
- text-transform:lowercase;
- font-style:italic;
- color:#217c8e; /* text color */
- }
- /* Subtitle */
- .w-subt{
- background-color:#217c8e; /* background color */
- padding:4px 8px;
- color:#fff; /* text color */
- text-transform:uppercase;
- margin-bottom:8px;
- }
- /* Long Description */
- .w-desc{
- grid-column-start:1;
- grid-column-end:2;
- grid-row-start:2;
- grid-row-end:5;
- }
- /* Short Description */
- .w-short{
- grid-column-start:2;
- grid-column-end:3;
- }
- /* -- Table */
- table{
- max-width:100%;
- }
- /* -- Table Cell */
- td{
- text-align:left;
- vertical-align:top;
- }
- td:first-child{
- padding-right:8px;
- }
- /* Image */
- .w-image{
- grid-column-start:3;
- grid-column-end:4;
- }
- .w-image img{
- max-width:100%;
- }
- /* Links */
- .w-links{
- grid-column-start:2;
- grid-column-end:3;
- grid-row-start:3;
- grid-row-end:5;
- display:flex;
- flex-wrap:wrap;
- justify-content:flex-start;
- align-items:flex-start;
- }
- /* -- Link */
- a.link{
- color:#fff; /* text color */
- background-color:#217c8e; /* background color */
- padding:4px 8px;
- margin-right:4px;
- margin-bottom:4px;
- border-bottom:none;
- }
- /* -- Link | Hover */
- a.link:hover{
- background-color:#01596d; /* background color */
- color:#fff; /* text color */
- }
- /* -- Link | Transitions */
- a.link, a.link:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* -- Link | Icon */
- a.link span{
- font-size:calc(1em - 2px);
- }
- /* Progress */
- .w-progress{
- grid-column-start:3;
- grid-column-end:4;
- grid-row-start:3;
- grid-row-end:4;
- }
- /* -- Progress Bar */
- .progressbar{
- width:100%;
- background-color:#f3f1ec; /* background color */
- height:20px;
- }
- /* -- Progress */
- /* Sets the style for all progress. */
- .progress{
- background-color:#217c8e; /* background color */
- height:20px;
- }
- /* These set the length of the progress. **/
- .p1{
- width:60%;
- }
- /* Status */
- .w-status{
- grid-column-start:3;
- grid-column-end:4;
- grid-row-start:4;
- grid-row-end:5;
- background-color:#217c8e; /* background color */
- color:#fff; /* text color */
- padding:8px;
- display:flex;
- align-items:center;
- justify-content:center;
- }
- /* ––– END LAYOUT | START EXTRAS ––– */
- /* Hides the tumblr app button, by @yeoli-thm */
- .tmblr-iframe--app-cta-button {
- display:none!important;
- }
- /* CUSTOM CONTROLS */
- /* Container */
- #custom-controls{
- position:fixed;
- top:8px;
- right:8px;
- height:calc(4 * 36px + 3 * 4px);
- width:36px;
- display:flex;
- flex-wrap:wrap;
- justify-content:space-between;
- align-items:space-between;
- }
- /* Control Link */
- a.conlink{
- border-bottom:none;
- box-shadow:none;
- text-decoration:none;
- }
- /* Control Element */
- .cont{
- background-color:#fff; /* background color */
- color:#217c8e; /* text color */
- font-size:calc(1em - 2px);
- width:36px;
- height:36px;
- display:flex;
- align-items:center;
- justify-content:center;
- }
- /* Control Element on Hover */
- .cont:hover{
- color:#01596d; /* background color */
- transform:scale(0.95); /* smaller */
- }
- /* Transitions */
- .cont, .cont:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Hides standard tumblr controls */
- body > iframe:first-child {
- display: none !important;
- }
- /* Credit, Home Link, To Top */
- #cd, #home, #top{
- right:8px;
- position:fixed;
- }
- /* Credit */
- /* Do not touch! */
- #cd{
- bottom:8px;
- }
- /* Home Link */
- #home{
- bottom:calc(8px + 36px + 4px);
- }
- /* To Top */
- #top{
- bottom:calc(8px + 2 * 36px + 2 * 4px);
- display:none;
- outline:none;
- border:none;
- }
- /* To Top | Hover */
- #top:hover{
- cursor:pointer;
- }
- /* ––– END EXTRAS | START RESPONSIVE LAYOUT ––– */
- /* DESKTOP */
- @media only screen and (min-width:800px){
- /* Mobile Footer */
- #mobile-footer{
- display:none;
- }
- }
- /* TABLETS */
- @media only screen and (max-width:800px){
- /* Multiple Elements */
- #sidebar, #cd, #top, #custom-controls, #home{
- display:none;
- }
- /* Container */
- #container{
- width:100vw;
- margin-left:0;
- }
- /* Work */
- .work{
- width:calc(80vw + 2em);
- grid-template-columns:35vw 22.5vw 22.5vw;
- grid-template-rows:auto auto auto 2em;
- margin-top:3em;
- margin-bottom:3em;
- }
- .work:last-child{
- margin-bottom:calc(10vh + 3em);
- }
- /* Long Description */
- .w-desc{
- grid-column-start:1;
- grid-column-end:2;
- grid-row-start:2;
- grid-row-end:5;
- }
- /* Short Description */
- .w-short{
- grid-column-start:2;
- grid-column-end:4;
- grid-row-start:2;
- grid-row-end:3;
- }
- /* Image */
- .w-image img{
- display:none;
- }
- /* Links */
- .w-links{
- grid-column-start:2;
- grid-column-end:3;
- grid-row-start:3;
- grid-row-end:4;
- }
- /* Progress */
- .w-progress{
- grid-column-start:3;
- grid-column-end:4;
- grid-row-start:3;
- grid-row-end:4;
- }
- /* Status */
- .w-status{
- grid-column-start:3;
- grid-column-end:4;
- grid-row-start:4;
- grid-row-end:5;
- }
- /* Mobile Footer */
- #mobile-footer{
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- background-color:#003c49; /* background color */
- position:fixed;
- bottom:0;
- left:0;
- width:100vw;
- height:10vh;
- }
- /* Navigation Element */
- .mf-nav{
- width:36px;
- height:36px;
- font-size:calc(1em - 2px);
- background-color:#fff; /* background color */
- color:#003649; /* text color */
- display:flex;
- align-items:center;
- justify-content:center;
- }
- /* Navigation Element on Hover */
- .mf-nav:hover{
- color:#01596d; /* text color */
- cursor:pointer;
- }
- /* Navigation Element Transitions */
- .mf-nav, .mf-nav:hover{
- transition:0.5s;
- -moz-transition:0.5s;
- -o-transition:0.5s;
- -webkit-transition:0.5s;
- }
- /* Navigation Element Links */
- a.mf-link{
- border-bottom:none;
- }
- }
- /* PHONES */
- @media only screen and (max-width:500px){
- /* Work */
- .work{
- display:block;
- width:calc(80vw - 2em);
- margin-left:10vw;
- }
- /* Links */
- .w-links{
- margin:4px 0;
- }
- /* Progress */
- .w-progress{
- margin-bottom:8px;
- }
- }
- </style>
- </head>
- <body>
- <!-- SIDEBAR -->
- <div id="sidebar">
- <!-- Sidebar Title -->
- <div id="s-title">Entwurf</div>
- <!-- Sidebar Description -->
- <div id="s-desc">
- Collection of my work(s) in progress.
- </div>
- <!-- Sidebar Filters -->
- <div id="myBtnContainer">
- <button class="btn active" onclick="filterSelection('all')">
- Show all
- </button>
- <button class="btn" onclick="filterSelection('filter1')">
- Filter 1
- </button>
- <button class="btn" onclick="filterSelection('filter2')">
- Filter 2
- </button>
- <button class="btn" onclick="filterSelection('filter3')">
- Filter 3
- </button>
- <button class="btn" onclick="filterSelection('filter4')">
- Filter 4
- </button>
- <!-- Add more here. -->
- </div> <!-- // end sidebar filters -->
- </div> <!-- // end sidebar -->
- <!-- CONTAINER -->
- <div id="container">
- <!-- WORK -->
- <div class="work filter1 filter2">
- <!-- Title -->
- <div class="w-title">[title here]</div>
- <!-- Long Description -->
- <div class="w-desc">
- <div class="w-subt">description</div>
- <div class="w-text">
- [summary here]
- </div>
- </div> <!-- // end long description -->
- <!-- Short Description -->
- <div class="w-short">
- <div class="w-subt">short description</div>
- <table>
- <tr>
- <td>Title:</td>
- <td>[title here]</td>
- </tr>
- <tr>
- <td>Genre:</td>
- <td>[genres here]</td>
- </tr>
- <tr>
- <td>Main Characters:</td>
- <td>[characters here]</td>
- </tr>
- <tr>
- <td>Themes:</td>
- <td>[themes here]</td>
- </tr>
- <!-- Add more if you want to. -->
- </table>
- </div> <!-- // end short description -->
- <!-- Image -->
- <div class="w-image">
- <img src="[image url here]" alt="image"/>
- </div> <!-- // end image -->
- <!-- Links -->
- <div class="w-links">
- <a href="/" class="link" title="example link">
- <span class="fas fa-link"></span> Example Link
- </a>
- <!-- Add more if you want to. -->
- </div> <!-- // end links -->
- <!-- Progress -->
- <div class="w-progress">
- <div class="progressbar">
- <div class="progress p1"></div>
- </div>
- </div> <!-- // end progress -->
- <!-- Status -->
- <div class="w-status">
- [status here]
- </div> <!-- // end status -->
- </div> <!-- // end work -->
- <!-- Add more here. -->
- <!-- Copy and paste the following code:
- <div class="work filter1 filter2">
- <div class="w-title">[title here]</div>
- <div class="w-desc">
- <div class="w-subt">description</div>
- <div class="w-text">
- [summary here]
- </div>
- </div>
- <div class="w-short">
- <div class="w-subt">short description</div>
- <table>
- <tr>
- <td>Title:</td>
- <td>[title here]</td>
- </tr>
- <tr>
- <td>Genre:</td>
- <td>[genres here]</td>
- </tr>
- <tr>
- <td>Main Characters:</td>
- <td>[characters here]</td>
- </tr>
- <tr>
- <td>Themes:</td>
- <td>[themes here]</td>
- </tr>
- </table>
- </div>
- <div class="w-image">
- <img src="[image url here]" alt="image"/>
- </div>
- <div class="w-links">
- <a href="/" class="link" title="example link">
- <span class="fas fa-link"></span> Example Link
- </a>
- </div>
- <div class="w-progress">
- <div class="progressbar">
- <div class="progress p1"></div>
- </div>
- </div>
- <div class="w-status">
- [status here]
- </div>
- </div>
- -->
- </div> <!-- // end container -->
- <!-- MOBILE FOOTER -->
- <div id="mobile-footer">
- <!-- Desktop Link -->
- <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="mf-link">
- <div class="mf-nav">
- <span class="fab fa-tumblr" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Home Link -->
- <a href="/" title="return to blog" class="mf-link">
- <div class="mf-nav">
- <span class="fas fa-home" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Credit – Do not touch! -->
- <a href="https://silbrigthemes.tumblr.com/" title="page by silbrigthemes" class="mf-link">
- <div class="mf-nav">
- <span class="fas fa-code" aria-hidden="true"></span>
- </div>
- </a>
- </div> <!-- // end mobile footer -->
- <!-- CUSTOM CONTROLS -->
- <div id="custom-controls">
- <!-- Dashboard Link -->
- <a href="https://www.tumblr.com/dashboard" title="go to dashboard" class="conlink">
- <div class="cont">
- <span class="fab fa-tumblr" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Message -->
- <!-- Takes people to dashboard to send you a message. -->
- <a href="https://www.tumblr.com/message/{Name}" title="send a message to {Name}" class="conlink">
- <div class="cont">
- <span class="fas fa-comment-dots" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Customize -->
- <!-- Takes you, the blog owner, to the customization. -->
- <a href="https://www.tumblr.com/customize/{Name}?redirect_to=https%3A%2F%2F{Name}.tumblr.com" title="customize page" class="conlink">
- <div class="cont">
- <span class="fas fa-palette" aria-hidden="true"></span>
- </div>
- </a>
- <!-- Follow -->
- <!-- Takes people to a page so that they can follow you. -->
- <a href="https://www.tumblr.com/follow/{Name}" title="follow {Name}" class="conlink">
- <div class="cont">
- <span class="fas fa-plus" aria-hidden="true"></span>
- </div>
- </a>
- </div> <!-- // end custom controls -->
- <!-- CREDIT -->
- <!-- Do not touch! -->
- <a href="https://silbrigthemes.tumblr.com/" class="conlink">
- <div class="cont" id="cd" title="page by silbrigthemes">
- <span class="fas fa-code" aria-hidden="true"></span>
- </div>
- </a>
- <!-- HOME -->
- <a href="/" class="conlink">
- <div class="cont" id="home" title="return to blog">
- <span class="fas fa-home" aria-hidden="true"></span>
- </div>
- </a>
- <!-- To top button -->
- <button onclick="topFunction()" class="cont" id="top" title="go back up">
- <span class="fas fa-chevron-up" aria-hidden="true"></span>
- </button>
- <script>
- var mq = window.matchMedia( "(min-width: 800px)" );
- if (mq.matches) {
- //Get the button
- var mybutton = document.getElementById("top");
- // When the user scrolls down 20px from the top of the document, show the button
- window.onscroll = function() {scrollFunction()};
- function scrollFunction() {
- if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
- mybutton.style.display = "block";
- } else {
- mybutton.style.display = "none";
- }
- }
- // When the user clicks on the button, scroll to the top of the document
- function topFunction() {
- document.body.scrollTop = 0;
- document.documentElement.scrollTop = 0;
- }
- }
- else {
- mybutton.style.display = "none";
- }
- </script>
- <!-- Filter Script -->
- <script>
- filterSelection("all")
- function filterSelection(c) {
- var x, i;
- x = document.getElementsByClassName("work");
- if (c == "all") c = "";
- // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
- for (i = 0; i < x.length; i++) {
- w3RemoveClass(x[i], "show");
- if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
- }
- }
- // Show filtered elements
- function w3AddClass(element, name) {
- var i, arr1, arr2;
- arr1 = element.className.split(" ");
- arr2 = name.split(" ");
- for (i = 0; i < arr2.length; i++) {
- if (arr1.indexOf(arr2[i]) == -1) {
- element.className += " " + arr2[i];
- }
- }
- }
- // Hide elements that are not selected
- function w3RemoveClass(element, name) {
- var i, arr1, arr2;
- arr1 = element.className.split(" ");
- arr2 = name.split(" ");
- for (i = 0; i < arr2.length; i++) {
- while (arr1.indexOf(arr2[i]) > -1) {
- arr1.splice(arr1.indexOf(arr2[i]), 1);
- }
- }
- element.className = arr1.join(" ");
- }
- // Add active class to the current control button (highlight it)
- var btnContainer = document.getElementById("myBtnContainer");
- var btns = btnContainer.getElementsByClassName("btn");
- for (var i = 0; i < btns.length; i++) {
- btns[i].addEventListener("click", function() {
- var current = document.getElementsByClassName("active");
- current[0].className = current[0].className.replace(" active", "");
- this.className += " active";
- });
- }
- </script>
- <!-- Tooltips, TippyJs -->
- <script src="https://unpkg.com/popper.js@1"></script>
- <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
- <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
- <script>
- tippy('a[title], #cd, #top, #home', {
- theme: 'entwurf',
- arrow: tippy.roundArrow,
- zIndex: 9999999999,
- maxWidth: 300,
- content(reference) {
- const title = reference.getAttribute('title');
- reference.removeAttribute('title');
- return title;
- },
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement