Add sass styles file

2023-11-13 21:22:25 +01:00 · 2023-11-13 21:22:25 +01:00 · 90b412227d
parent a1405629af
commit 90b412227d
1 changed files with 110 additions and 0 deletions
--- a/src/assets/css/styles.scss
+++ b/src/assets/css/styles.scss
@ -0,0 +1,110 @@
+:root {
+    --light-1: #fdfdfe;
+    --light-2: #ddd;
+    --light-3: #fed;
+    --dark-1: #333;
+    --dark-2: #123;
+    --light-transparent-1: rgba(125,125,125, 0.75);
+    --dark-transparent-1: rgba(200,195,190,0.15);
+
+    --color-1: #5bf;
+
+    --background-color: var(--light-1);
+    --text-color: var(--dark-1);
+    /* --link-color: var(--color-1); */
+    --link-focus: var(--dark-2);
+}
+
+@media (prefers-color-scheme: dark){
+    :root {
+        --background-color: var(--dark-2);
+        --text-color: var(--light-2);
+        --link-color: var(--color-1);
+        --link-focus: var(--light-3);
+
+        a{color:var(--link-color);}
+        a:focus{outline-color:var(--link-focus);}
+    }
+}
+
+body{
+    color: var(--text-color);
+    background-color: var(--background-color);
+    font-size: 18px;
+    font: 1.2rem/1.5 Century Gothic, sans-serif;
+    max-width: 600px;
+    max-width: 55ch;
+    margin: 0 auto;
+    padding: 2.5rem 1.75rem;
+}
+header{
+    outline: 2px solid var(--light-2);
+    outline-offset: 1rem;
+}
+h1,h2,h3,h4,h5,h6{
+    line-height: 1.2; 
+    font-family: Arial, serif;
+}
+h1{
+    font-size: 2.45rem;
+}
+a:focus{
+    outline: 0.2rem solid var(--link-focus);
+    outline-offset: 0.4rem;
+}
+p{
+    margin-bottom: 2rem;
+}
+section, aside, footer{
+    margin: 2.5rem auto;
+}
+ul{
+    margin-top: -1.25rem;
+    margin-bottom: 2.25rem;
+}
+b{
+    background-color: var(--dark-transparent-1);
+    padding: 0.4rem;
+    margin: -0.4rem;
+
+}
+dt{
+    font-weight: bold;
+    margin-top: 1rem; 
+}
+
+dt:target{
+    background-color: var(--dark-transparent-1);
+    padding: 0.2rem;
+    margin: 0.8rem -0.2rem 0 -0.2rem;
+    outline: 2px solid var(--light-transparent-1);
+
+}
+
+
+
+
+
+
+/* Skip Link */
+.skip-link {
+    clip: rect(1px, 1px, 1px, 1px);
+    display: block;
+    block-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    inline-size: 1px;
+    top: 1rem;
+    left: 1rem;
+    z-index: 999;
+}
+  
+  .skip-link:focus {
+    clip: auto;
+    block-size: auto;
+    overflow: visible;
+    inline-size: auto;
+    color: var(--text-color);
+    padding: .2rem .4rem;
+    line-height: 1;
+}