Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@cara-tm
cara-tm committed Apr 1, 2020
1 parent e5e9bae commit f112e67
Show file tree
Hide file tree
Showing 5 changed files with 456 additions and 7 deletions.
45 changes: 42 additions & 3 deletions css/master.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,24 @@
--bg-action:#33e
}

/*
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
src: url('./fonts/inter-regular-webfont.woff2') format('woff2'),
url('./fonts/inter-regular-webfont.woff') format('woff');
*/
@font-face {
font-family:'Inter';
font-style:normal;
font-weight:400;
font-display:swap;
src: url(https://fonts.gstatic.com/s/inter/v1/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{font-size:100% inherit}
html,body{
margin:0;
padding:0
margin:0;
padding:0
}

html{
Expand All @@ -27,10 +41,24 @@ scrollbar-width:thin
}
@media screen and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
max-width:none;
line-height:1.714;
font-size:15.8px;
font-size:calc(1em * .625);
font-size:1rem;
text-rendering:optimizelegibility;
text-rendering:optimizeSpeed
}

/*! General rules */
::-moz-focus-inner{padding:0;border-style:none}
:-moz-focusring{outline:1px dotted ButtonText}
:-moz-ui-invalid{box-shadow:none}
.abs{position:absolute}
.rel{position:relative}
.txt-c{text-align:center}

header,main{
display:block;
width:96%;
Expand Down Expand Up @@ -73,7 +101,8 @@ button.ripple{*position:relative;*top:-2px;*margin-right:-.7em;*padding:6px 16px
/*! Checkbox & Radio buttons Styles (1167 Bytes) */
input[type="checkbox"]:focus{outline:0}.checkbox,.radio{display:table;position:relative;padding-left:2.1em;margin-bottom:.7em;line-height:1.45;font-size:100%;cursor:pointer}.checkbox input[type="checkbox"],.radio input[type="radio"]{opacity:0;position:absolute;z-index:1;top:0;left:0;width:1.5em;height:1.5em;line-height:1.45;cursor:pointer}.check{position:absolute;top:0;left:0;height:1.563em;width:1.563em;background-color:hsl(0,0%,93.3%)}.check::after{display:none;content:'\02715';position:absolute}.checkbox .check::after{left:0;top:0;width:100%;height:inherit;text-align:center;color:#fff}.radio input[type="radio"],.radio .check,.radio .check:after{border-radius:50%}.radio .check:after{display:none;content:'';position:absolute;top:50%;left:50%;width:.625em;height:.625em;margin:-.3125em auto 0 -.3125em;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.5)}.radio input:checked ~ .check:after{display:block}label:hover input ~ .check{background-color:hsl(0,0%,80%)}label input[type="checkbox"]:checked ~ .check,label input[type="radio"]:checked ~ .check{background-color:#333;background-color:var(--bg-action,#333)}.checkbox input:checked ~ .check::after{display:block}
/*! Select Styles (1169 Bytes) */
.select{display:block;margin-bottom:.7em}.select + select{display:block;max-height:calc(1.3em + 1.4em);height:calc(1.3em + 1.4em);margin:0;padding:.6em 1em .5em .8em;border:1px solid #bbb;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right center;background-position:right .7em top 50%,0 0;background-size:1.5em auto,100%;background-position:right .7em top 50%,0 0;background-size:1.5em auto,100%;text-overflow:ellipsis;white-space:nowrap;color:#444;font-weight:700;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}select::-ms-expand{display:none}:root select{padding:.6em 42px .7em .8em}select::-ms-expand{display:none}select:hover{border-color:#888}select:focus{border-color:#aaa;box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}select option{font-weight:400}select option:nth-child(even){background-color:#eee}@media all and (min-width:0\0) and (min-resolution:.001dpcm){select{padding:.6em 1em .5em .8em !important;background-image:none}}
.select{display:block;margin-bottom:.7em}.select + select{display:block;max-height:calc(1.3em + 1.4em);height:calc(1.3em + 1.4em);margin:0;padding:.6em 1em .5em .8em;border:1px solid #bbb;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right center;background-position:right .7em top 50%,0 0;background-size:1.5em auto,100%;background-position:right .7em top 50%,0 0;background-size:1.5em auto,100%;text-overflow:ellipsis;white-space:nowrap;color:#444;font-weight:700;font-family:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer}select::-ms-expand{display:none}:root select{padding:.6em 42px .7em .8em}select::-ms-expand{display:none}select:hover{border-color:#888}
select:focus{border-color:#aaa;box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}select option{font-weight:400;font-size:large}select option:nth-child(even){background-color:#eee}@media all and (min-width:0\0) and (min-resolution:.001dpcm){select{padding:.6em 1em .5em .8em !important;background-image:none}}
/*! Optional: for arrow up effect on select with javascript */
select.arrow-up{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 15l-6-6-6 6'%3E%3C/path%3E%3C/svg%3E")}

Expand All @@ -82,3 +111,13 @@ html .fs150\%{font-size:150%}

.\#fff-bg{background-color:#fff;color:#333}
.\#33e-bg{background-color:#33e;color:#fff}


/*! Tooltips (1631 Bytes) */
a.tooltip{position:relative}a.tooltip:after,a.tooltip:before{visibility:hidden;opacity:0;position:absolute;z-index:999;overflow:hidden;transition:transform 200ms ease,opacity 200ms;pointer-events:none}a.tooltip:before{content:attr(aria-label);display:block;top:150%;width:inherit;max-width:6em;padding:10px 15px;background:#000;color:#fff;text-decoration:underline;text-transform:none;letter-spacing:.05rem;word-break:keep-all;hyphens:none;font:normal 400 normal 12px/1.2 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;border-radius:2px}a.tooltip:after{content:'';width:0;height:0;border:6px solid transparent}a.tooltip:hover:after,a.tooltip:hover:before{visibility:visible;opacity:.85;text-decoration:none}a.tooltip--top:before{top:auto;left:0;bottom:99%;margin-bottom:10px}a.tooltip--top:after{bottom:100%;left:8px;margin-bottom:4px;border-top-color:#000;border-bottom:none}:dir(rtl) a.tooltip--top::before{right:0;left:auto}:dir(rtl) a.tooltip--top::after{left:auto;right:0;margin-right:8px}a.tooltip--right:before{top:-50%;left:99%;margin-left:10px}a.tooltip--right:after{top:50%;left:100%;margin-left:4px;margin-top:-6px;border-right-color:#000;border-left:none}a.tooltip--bottom:before{top:99%;left:0;margin-top:10px}a.tooltip--bottom:after{top:100%;left:8px;margin-top:4px;border-bottom-color:#000;border-top:none}:dir(rtl) a.tooltip--bottom:before{right:0;left:auto}:dir(rtl) a.tooltip--bottom:after{right:0;left:auto;margin-right:8px}a.tooltip--left:before{top:-50%;right:99%;margin-right:10px}a.tooltip--left:after{top:50%;right:100%;margin-top:-6px;margin-right:4px;border-left-color:#000;border-right:none}

/*! Search box (1360 Bytes) */
.search-box{width:99%;vertical-align:middle;white-space:nowrap}.search-box form{float:left;display:block;width:99.6%;margin:0;vertical-align:middle;border:1px solid #ddd;background:#fafafa}.search-box .search{float:left;width:86.7%;width:calc(100% - 45px);height:38px;height:calc(40px - 2.3px);margin-left:45px;border:none;border:1px solid transparent;color:#63717f;font-size:10pt;line-height:1}.search-box .icon{z-index:1;top:0;left:0;width:42px;height:38px;margin:0;border:none;background:none;color:#304659;cursor:pointer}.search-box .icon svg{display:block;margin:6px 0 0 8px}.search-box i{position:absolute;top:18px;left:7px;font:32px/0 Arial,sans-serif}.search-box .search,.search-box form{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.search-box .btn-search{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;z-index:-1;width:42px;height:38px;border:none;background:none;font-size:0}.search-box .search,.search-box .icon,.search-box input[type="search"]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.search-box .search::-webkit-input-placeholder{color:#65737e}.search-box .search::-moz-placeholder{color:#65737e}.search-box .search:-ms-input-placeholder{color:#65737e}.search-box .search:hover,.search-box .search:focus,.search-box .search:active{outline:none;background:none;border-color:transparent}
/*! Search submit button on the right */
.search-box.right .search{margin-left:0;margin-right:45px;padding-left:1em}.search-box.right .icon{left:unset;right:0}

Binary file added fonts/inter-regular-webfont.woff
View file
Binary file not shown.
Binary file added fonts/inter-regular-webfont.woff2
View file
Binary file not shown.
39 changes: 35 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Framework</title>
<title>Woo CSS Framework</title>
<link rel="stylesheet" href="css/master.css" />

<script>"use strict";document.documentElement.className="js "+(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?"nosvg":"svg");var arr=['article','aside','footer','figcaption','figure','footer','header','nav','main','picture','section','small','template'];for(var i=0;i<arr.length;i++){document.createElement(arr[i]);}</script>

<style>

/*!
* colors: https://websafecolors.info/color-chart
*/

.btn{margin-bottom:1em}

fieldset{
Expand All @@ -27,12 +31,12 @@
<style>
select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 15l-6-6-6 6'%3E%3C/path%3E%3C/svg%3E")}
</style>
</noscript
</noscript>
</head>

<body>
<header>
<h1>Framework</h1>
<h1>Woo CSS Framework</h1>
</header>

<main>
Expand Down Expand Up @@ -64,7 +68,11 @@ <h1>Framework</h1>
<a href="#!" class="btn no-select #33e-bg">link primary</a>
<a href="#!"><span class="btn no-select #33e-bg">Link Primary</span></a>
<button><span class="btn no-select #33e-bg">button primary</span></button>
Primary base line (a <a href="#!">simple link</a>)</p>
Primary base line (a <a href="#!" class="tooltip tooltip--bottom" aria-label="I'm a Tooltip">simple link</a>)</p>
</div>

<div class="outer">
<p><a href="#!" class="tooltip tooltip--bottom" aria-label="I'm a Tooltip">Link</a></p>
</div>

<div class="outer">
Expand Down Expand Up @@ -103,8 +111,31 @@ <h1>Framework</h1>
</fieldset>
</div>

<div class="outer"><p>&nbsp;</p></div>

<div class="outer">
<div class="search-box">
<div class="search-inner cf rel">
<form role="search" method="get" action="#" class="full fl-l">
<h4 class="readers">Search</h4>
<label label="Search" role="presentation" for="btn-search" class="abs icon">
<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><switch><g><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></g><foreignObject width="0" height="0" overflow="hidden"><i>☑</i></foreignObject></switch></svg>
<input type="submit" value="Search" aria-label="Search" class="btn-search" id="btn-search">
</label>
<input name="q" type="search" aria-label="Write then press [Enter]" title="Write then press [Enter]" class="search" id="search" placeholder="Write your search here…">
</form>
</div>
</div>
</div>

<div class="outer"><p>&nbsp;</p></div>

</main>

<footer class="outer">
<small>By cara-tm </small>
</footer>

<script>
// Source: https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
function handleFirstTab(e){if(e.keyCode===9){document.body.classList.add('user-tabbing');window.removeEventListener('keydown',handleFirstTab);window.addEventListener('mousedown',handleMouseDownOnce);}}function handleMouseDownOnce(){document.body.classList.remove('user-tabbing');window.removeEventListener('mousedown',handleMouseDownOnce);window.addEventListener('keydown',handleFirstTab);}
Expand Down
Loading

0 comments on commit f112e67

Please sign in to comment.