dan/links
dan/links
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 background and styles

Browse source
This commit is contained in:
Dan Jones 2023-01-01 20:00:19 -06:00
commit ba3c9543d0
3 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
build/img/pexels-bert-5985264.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

4
index.html
View file

@ -10,7 +10,7 @@
<body> <body>
<header class="py-3 mb-4 border-bottom"> <header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<h1 class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark"> <h1 class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark px-4 py-2 border border-white rounded">
{{name}} {{name}}
</h1> </h1>
</div> </div>
@ -20,7 +20,7 @@
<ul class="list-group"> <ul class="list-group">
{{#links}} {{#links}}
<li class="list-group-item text-center"> <li class="list-group-item text-center">
<a href="{{{url}}}" rel="me"> <a href="{{{url}}}" rel="me" class="fs-4 text-decoration-none text-dark">
<i class="{{la}}{{^la}}lab{{/la}} la-{{icon}}"></i> <i class="{{la}}{{^la}}lab{{/la}} la-{{icon}}"></i>
{{text}} {{text}}
</a> </a>

30
scss/style.scss
View file

@ -2,6 +2,8 @@
@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here // 2. Include any default variable overrides here
$list-group-bg: inherit;
$mostly-white: rgba(255,255,255, 0.7);
// 3. Include remainder of required Bootstrap stylesheets // 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables";
@ -27,3 +29,31 @@
@import "../node_modules/bootstrap/scss/utilities/api"; @import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here // 8. Add additional custom code here
body {
background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3)), url('img/pexels-bert-5985264.jpg');
height: 100vh;
background-position: center;
background-size: cover;
color: white;
position: relative;
}
h1 {
background-color: $mostly-white;
}
section ul {
background-color: $mostly-white;
max-width: 20rem;
margin: 1rem auto;
li {
width: 100%;
overflow: auto;
i {
float: left;
}
}
}